Sheeprograming

JavaScript を書いていると (少なくとも私は) Global 変数が多くなりがちである。これを減らすための書き方。

var hiyoko = {}; // 残念ながらグローバル変数になる
(function(){ // この function 内でスコープが切られる
 var object = hiyoko; // グローバル変数の名前が長い場合はこういうやり方が有効
 hiyoko.prototype.hiyokoFunction = function() {
   callFromHiyokoFunction()
 };

 // callFromHiyokoFunction はスコープ外からは呼べない
 function callFromHiyokoFunction() {
   // なんらかの関数を記述
 }

 var myHiyoko = new object(); //これもスコープ外からは参照できない
 myHiyoko.hiyokoFunction();
})()

var myHiyoko = new hiyoko();
myHiyoko.hiyokoFunction();  // 区切った中で宣言されたものも呼べる
callFromHiyokoFunction();    // こっちはエラーになる

なお、 Google Closure Lib. を使っているなら goog.scope を使うとよいが、それについてはまた別の時に書く。

小説を読もう！(小説家になろうグループ) 内の検索結果を自分のウェブページに挿入するためのライブラリを書いた。

使うには jQuery が必要 (jQuery のプラグインとして作ってもよかったかもしれない)。

簡単な使い方

手順としては以下の通り。

1. RequestBuilder を new する
   var requestBuilder = new com.hiyoko.NarouAPI.NovelAPI.getRequestBuilder();
2. requestBuilder を用いてリクエストを組み立てる。組み立てる際に使うことができる関数は後述。
3. requestBuilder の request 関数を使って結果を取得する。request 関数には callback 関数を与え、結果を利用する。

HTML に次のように記述する。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://shunshun94.web.fc2.com/lib/narouNovelAPI.js"></script>

次のようにすると結果を簡単に参照できる。コンソールを使うことですぐに結果を確認できる。

var requestBuilder = com.hiyoko.NarouAPI.NovelAPI.getRequestBuilder();
requestBuilder.limit(112).orderToReviewer.request(function(list, count){console.log(list);});

各クラス・関数の説明

概要

このライブラリは以下の2つのクラスからなります。

• com.hiyoko.NarouAPI.NovelAPI.RequestBuilder
• com.hiyoko.NarouAPI.NovelAPI.Novel

ユーザにあまり情報を入れさせることなく、ユーザ毎に見えるページを分けたい、ということがある。この場合の選択肢として URI の Query を利用する、という手が考えられる。 (使える場面は限定されるし、本来はログインさせてユーザページとして見せるべきなのかもしれないが)

URL は次のような構造になっている (http://tools.ietf.org/html/rfc3986 から引用)。

         foo://example.com:8042/over/there?name=ferret#nose
         \_/   \______________/\_________/ \_________/ \__/
          |           |            |            |        |
       scheme     authority       path        query   fragment
          |   _____________________|__
         / \ /                        \
         urn:example:animal:ferret:nose

この Query 部分にページに与える引数を与え、ページを開いた際に利用する、という使われ方がされる。例えば https://www.google.co.jp/search?q=ひよことすれば ひよこ で検索することができる。

今回はこの Query パートを JavaScript で取得することを考える。

どうやるのか

Query は一般に key と value を = でペアにしたものを & でつないだものである。例えば次のようになる。
?age=22&sex=m&name=koneko
この場合、次のような連想配列のように考えることができる。

{
  age: '22',
  sex: 'm',
  name:'koneko'
}

このような結果を得られるものを目指す。

var com = com || {};
com.hiyoko = com.hiyoko || {};

/**
 * URL の Query 部分を取得する関数 
 * @param {Object.<string, string>}  Query の連想配列
 */
com.hiyoko.getQueries = function() {
  var params = ((location.search).slice(1)).split('&');
  var paramLength = params.length;
  var result = {};
  for(var i = 0; i < paramLength; i++){
    var pair = params[i].split('=');
    result[pair[0]] = pair[1];
  }
  return result;
};

// Usage
var queries = com.hiyoko.getQueries();

// URL が ～?search_words=ひよこ&type=image ならば
// ひよこ が console に出力される
console.log('Search Word = ' + queries['search_words']);

Query の形式

利用可能な文字

Query パートは次のようなルールで書かれる。

• URL 中最初に出てくる ? で始まる
• Query の途中で出てきた # ないしは URL の終端で終了する
• 以下の文字が利用できる
  • アルファベット, 数字
  • 以下の記号。%-._~!$&'()*+,;=:@
• これ以外の文字で利用したいもの (例えば漢字等) はパーセントエンコーディングで利用できる

key=value だけではない

上ではさも Query は key=value の形式で記述され、複数個使うときは & でつなぐかのように書いたが、実際のところ Query は次のように言われている。as query components are often used to carry identifying information in the form of "key=value" pairs (RFC 3986 Section 3.4 Query)、日本語にすればしばしば Query は識別するための情報を扱うために key=value の形式をとる である (原文ではこの後、それを考慮した扱われ方をするとよい、というような話が続く)。しばしば、であり、常に、ではない点には注意しなければならないかもしれない。

key ないし value に & がきたらどうするの?

どうしようもない。例えば、 ～?b=d&c&e=f といった場合、判断のしようがない。もしも & を入れたければパーセントエンコーディング (RFC 3986 Section 2.1 Percent-Encoding)してくれることを期待する。

参考文献

T. Berners-Lee, R. Fielding, and L. Masinter. RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax. http://tools.ietf.org/html/rfc3986, 2005

JavaScript の動作確認をするのに毎回 .html ファイルと .js ファイルを用意するのは面倒である。かといって、 nodejs (パソコンのコンソール上で動作する JavaScript) をインストールするのが難しい環境もあるだろう。家族共用のパソコンとか。

それでも JavaScript をサッと試すのに便利なツールがある。ブラウザ付属の開発者ツールである。今回は以下のブラウザに付属している開発者ツールで JavaScript を試す方法について簡単に説明する。

1. Microsoft Edge
2. Google Chrome
3. FireFox

とりあえず共通事項として

勘が良い人はこれだけ読んで試せばあとは読まなくてもいいかもしれない。ブラウザ開いて F12 キーを押し、出てきたコンソールに JavaScript のコードを入力。

Microsoft Edge

とりあえず、ブラウザを開いて F12 を押すと次のような画面が出てくる。しかる後に画面下部の<が記されている部分に JavaScript を入力すると、 JavaScript を即座に実行できる。

Google Chrome

Google Chrome の場合も F12 を押して、該当箇所にコードを書いて実行できる。

FireFox

FireFox も同様に F12 を押して、出てきた箇所にコードを書いて実行できる。

「CSS で text-align を設定したのに効かない」「CSS で margin:auto; したのに効かない」といった場面に直面したことはないだろうか。このような時に疑うべきものとして、 CSS の display プロパティがある。

今回は比較的よく使う5つを紹介する。これらは他の記事でも頻繁に登場するかもしれない。

• none
• inline
• block
• inline-block
• box

【none】

最も単純。これが割り当てられた要素は表示されない。最初からないものとして配置される。

<div style="font-size: 200%;">
  <span style="color:blue;">→</span>
  <span style="display:none;color:yellow;">●</span>
  <span style="color:red;">←</span>
</div>

見ての通り全く表示されない。

【inline】

span 要素や strong 要素等がデフォルトでこれになっている。テキストの一部分として表示されるので、テキスト中に何か情報を入れたりする際に使う。

配置の際に気を付けたいのは以下。

• height や width が無効
• margin:auto; でセンタリングできない。

<div style="padding: 1em; border:black 2px solid;font-size: 200%; line-height: 130%;">
  <div style="border: blue 2px solid; color: blue;padding:5px; width: 120px;margin:auto;">block のまま。横幅は 120px</div>
  <br/>
  <div style="border: red 2px solid; color:red; height:120px;display:inline;margin:auto;">inline に変更。高さは変わらずセンタリングもされない</div>
</div>

【block】

inline の対。div 要素や p 要素等がこれに該当する。とれるだけの横幅いっぱいと、子要素の高さの合計分だけの縦幅を持つ。しかし、 width/height でサイズを変えられるので、ボタン等を配置する際の取り回しは inline 要素より楽かもしれない。

配置の際に気を付けたいのは以下。

• 親要素に text-align:center; があってもセンタリングされない

<div style="padding: 1em; border:black 2px solid;font-size: 120%;text-align:center;">
  <span style="border: blue 2px solid; color: blue;">inline のまま</span>
  <br/>
  <span style="border: red 2px solid; color:red;display:block;">block に変更。横幅が変化</span>
  <br/>
  <span style="border: red 2px solid; color:red;display:block; width:120px;">block に変更。センタリングされない</span>
</div>

【inline-block】

inline のように配置・表示される。ただし、width や height を設定することができる。その他、block と同じようにふるまうことができる。

<div style="padding: 1em; border: black 2px solid; font-size: 200%; text-align: center;">
  <div style="display: inline-block; border: red 2px solid;padding:5px;">inline-box1</div>
  <div style="display: inline-block; border: red 2px solid;padding:5px; height: 100px; width: 200px;">inline-box2</div>
</div>

【box】

子要素の表示を変更する。子要素の高さは最も高いものに揃えられる(特に指定しない場合)。2～カラム以上のレイアウトをやるのにとても便利。

<div class="boxBase" style="width: 550px; border: 2px yellow solid; color: white;">
  <div style="background-color: #400000; padding: 5px;  width: 100px;">左メニュー</div>
  <div style="background-color: #004000; padding: 5px;  width: 200px;">本文<br/><br/>本文</div>
  <div style="background-color: #000040; padding: 5px;  width: 100px;">右メニュー</div>
  <div style="background-color: #000000; padding: 5px;  width: 50px; height:300px;">高さが指定された要素A</div>
  <div style="background-color: #202020; padding: 5px;  width: 50px; height:200px;">高さが指定された要素B</div>
</div>

参考文献

• CSS basic box - model 4.1. The ‘display’ property
• CSS Flexible Box Layout Module Level 1