郵便番号から住所を自動入力する

ユーザが入力する手間を省いたり入力間違いを避ける為に、住所の一部を自動入力する補助UIを見たことがあると思います。 例えばこんなHTMLで、「郵便番号から住所を検索する」ボタンをクリックすると自動的に都道府県と住所が入力される仕組みです。

<ul>
    <li>
        <label for="zipcode">郵便番号:</label>
        <input type="text" name="zipcode" id="zipcode">
        <input type="button" id="button-getaddress" value="郵便番号から住所を検索する">
    </li>
    <li>
        <label for="state">都道府県:</label>
        <input type="text" name="state" id="state">
    </li>
    <li>
        <label for="address">住所:</label>
        <input type="text" name="address" id="address">
    </li>
</ul>

お問い合わせフォームやユーザー登録などで良く見られますね。 郵便番号からの住所検索は各所でAPIやライブラリが提供されておりますが、 ここでご紹介するのは次の２つのリソースです。

1. zipaddress.net http://zipaddress.net/
2. ajaxzip3 https://code.google.com/p/ajaxzip3/

共に商用利用可能で、リンクの設置などの制限は特にない様です。

zipaddress.net

zipaddress.net は、@sugimoto1981 氏が公開している郵便番号検索APIです。

郵便番号-住所検索API
http://zipaddress.net
郵便番号データをパラメータに含めてリクエストを送信することで、都道府県、市区町村のデータをJSONフォーマットで返却するシンプルなサービスです。

APIの利用方法はシンプルで、郵便番号を7桁の数字で送ると JSON で住所の内容を返してくれます。 JSONPにも対応しているのでクライアントサイドでの利用も簡単です。 というよりむしろ、クライアントサイドでの利用を前提としているサービスなのでしょう。 簡単に組み込みが出来るSDKも公開されています。

試しに jQuery で上に挙げたHTMLに組み込んでみます。

$("#button-getaddress").on("click", function(){
    var code;
    if(! (code = $("#zipcode").val())){
        return;
    }
    $.ajax({
        url: "http://api.zipaddress.net",
        dataType: "jsonp",
        data: {
            zipcode: code
        }
    })
    .then(function(data){
        if(! data.pref){
            alert("失敗しました。");
        } else {
            $("#state").val(data.pref);
            $("#address").val(data.address);
        }
    });
});

エンドポイントは “http://api.zipaddress.net” で、SSLにも対応しています。 返ってくるデータには以下の住所情報が含まれていますので、これらをテキストインプットに流し込めば完了です。

• pref: 都道府県
• address: 市区町村以降の住所
• fullAddress: pref + address の結合文字列

また、提供されているSDKを使って情報を取得する事も出来ます。 SDKにある ZA.request メソッドを使用する事で、JSONP周りの処理をかなり簡略化してくれます。

ZA.request(code, function(data, error){
    /* data から住所を取得する */
});

ZA.request には郵便番号と、受け取る為のコールバックを渡して使用します。 この他にも、予め各項目を入力する要素を渡しておいてハンドリングする ZA.regiester もあります。 詳しくは SDK のリファレンスをご参照ください。

ajaxzip3

ajaxzip3 は、ajaxzip2 をJSONP対応にしてリリースされたライブラリです。

ajaxzip3
https://code.google.com/p/ajaxzip3/
世界一、簡単に設置できる郵便番号検索を目指して！

他の郵便番号検索APIとは一線を画しており、 リポジトリに検索用のデータを静的なJavaScriptファイルとして設置しておき、 JSONPとしてアクセスする事で住所データを取得する仕組みです。 データは郵便番号の上3桁毎に別ファイルにされて、 /zipdata ディレクトリ に格納されています。

上述の HTML に組み込んでみましょう。

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js"></script>
<script>
    $("#button-getaddress").on("click", function(){
        if(! $("#zipcode").val()){
            return;
        }
        AjaxZip3.zip2addr("zipcode", "", "state", "address");
    });
</script>

データの展開は AjaxZip3.zip2addr メソッドで行います。 引数には郵便番号等の文字列ではなく、input 要素の name 属性を渡す事に注意してください。 （丁度、先に挙げた zipaddress.net の ZA.register がこれに倣ったような実装になっている様です。）

AjaxZip3.zip2addr(
    "zipcode", // 郵便番号上3桁を入力した input 要素,
    "", // 郵便番号下4桁を入力した input 要素
    "state", // 都道府県を入力する input 要素
    "address" // 市区町村以下を入力する input 要素
);

静的ファイルで取得する都合上、jQuery等の動的なJSONPは使用できません。 コールバック関数は zipdata() で固定されていますので、 処理を弄りたい場合はこれを上書きする事になります。

window.zipdata = function(data){ ... };

制作者の手間を極力省く設計になっている反面、融通を効かせる為には一手間必要です。

その他のヒント

上であげたいずれのリソースも、利用するにあたって正しい郵便番号（7桁の半角数字）が渡される事が前提となります。 広い層に使われるUIなので、間違った入力に柔軟に対応出来るように配慮してあげたいと思います。 例えば、番号入力が完了した時に誤った入力を自動修正する処理を挟む事で、 フォームの使い勝手が向上するのではないでしょうか。

$("#zipcode").on("blur", function(){
    var map = {
        zen: "０１２３４５６７８９",
        han: "0123456789"
    };
    this.value = this.value.replace(/[^\d]/g, function(s){
        var index = map.zen.indexOf(s);
        if(index >= 0){
            return map.han.substr(index, 1);
        }
        return "";
    });
});

上のコードは、カーソルが離れた時に全角数字を半角数字に変換したのち、余計な文字を削除する簡単な例です。 誤ってハイフン等が入力されてしまった場合でも、正しい形式でAPIにリクエストする事ができます。

参考資料

• 郵便番号-住所検索API
• ajaxzip3 – 郵便番号検索API, JSONP対応 – Google Project Hosting

YQL (Yahoo Query Language)

YQL（Yahoo Query Language） は Yahoo が提供する開発者向けのAPIで、 SQLライクなクエリを送ると様々な情報を取得する事が出来るサービスです。 受け取るデータは XML か JSON かを選択可能で、 JSONPにも対応しているのでクライアントJavaScriptからも簡単に利用できます。

例えば場所情報や地域の天気情報を取得したり、 Flickr から写真を検索したり、Webページのフィードを取得したりする事等が出来ます。

利用方法

パブリックAPIのエンドポイントは http://query.yahooapis.com/v1/public/yql です。 パラメータは、形式を指定する format 、クエリを送る q、JSONPのコールバック用の callback を渡す事ができます。 次のようなリクエストを送る事になりますね。

http://query.yahooapis.com/v1/public/yql?format=json&q=[YQLクエリ]&callback=[コールバック関数]

YQL の書き方については、公式の Yahoo Developper Network でテスト出来るコンソールを用意しているので、 どんな書式でどんな情報が得られるかを試してみると良いですね。

• YQL Console: show tables

テーブルによっては別途アプリケーションIDが必要です。 また、Flickr 関連のテーブルは flickr で登録したアプリケーションIDが必要な様です。

位置情報から天気情報を取得してみる

天気情報は weather.forecast から取得できますが、位置情報の指定に woeid という者が必要になります。 woeid というのは “Where On Earth Identifier” の事で、 全世界の地域ごとに ID を振って管理をしています。

woeid は、geo.places テーブルから都市名で引く事が出来ます。

SELECT woeid FROM geo.places WHERE text = '神奈川県横浜市'

そこで得られた woeid を使って、天気情報を引きます。ちなみに神奈川県横浜市の woeid は 1118550 です。

SELECT * FROM weather.forecast WHERE woeid = 1118550

一通りの処理を jQuery で書いてみましょう。

var rest = "http://query.yahooapis.com/v1/public/yql";

$.ajax({
    dataType: "jsonp",
    url: rest,
    data: {
        format: "json",
        q: "SELECT woeid FROM geo.places WHERE text = '神奈川県横浜市'"
    }
})
.then(function(data){
    var woeid = data.query.results.place.woeid;
    return $.ajax({
        dataType: "jsonp",
        url: rest,
        data: {
            format: "json",
            q: "SELECT * FROM weather.forecast WHERE woeid = " + woeid
        }
    });
})
.then(function(data){
    $("#widget-weather").html(data.query.results.channel.item.description);
});

結果のデータを辿って得られる description には出力用のHTMLが格納されているので、 それをそのままコンテナに表示しています。 ただ、内容は全て英語で温度の単位も華氏なので、実際に使う時は翻訳や換算をしてあげないといけません。

RSSフィードを利用する

YQL の feed テーブルでは、Web上にあるRSSフィードをJSONに変換して返す事が出来ます。 試しにJSONPで Mach3.laBlog のフィードを取得してみようと思います。

var query = "SELECT * FROM feed WHERE url = 'https://blog.mach3.jp/feed'";
var rest = "http://query.yahooapis.com/v1/public/yql";

$.ajax({
    dataType: "jsonp",
    url: rest,
    data: { format: "json", q: query }
})
.then(function(data){
    console.log(data); // フィードのデータ出力
});

自サイトのフィードを読む分には特に必要ないですが、クロスドメインでRSSを引っ張りたい時や、 サービスのAPIがXMLしか対応していない場合などに使えます。 勿論、利用規約はそのソースを提供しているコンテンツプロバイダの物に従う事になるので、 それに則って正しく利用しましょう。

爆速YQL

Yahoo! Japan デベロッパーネットワークのブログで 「爆速YQL」 なる物が紹介されていました。 これは何かというと、YQLの結果取得と出力をブログパーツのような感覚で出来てしまうコンポーネントです。

• XMLのWebAPIを爆速で使いこなせるフレームワーク – Yahoo! JAPAN Tech Blog

上で挙げたフィードの取得を試してみましょう。なるほどこれは爆速です。

<script src="http://i.yimg.jp/images/yjdn/js/bakusoku-yql-v1-min.js"
    data-yql="SELECT * FROM feed WHERE url='https://blog.mach3.jp/feed'">
    <ul>
    {{#query.results.item}}
        <li><a href="{{link}}">{{title}}</a></li>
    {{/query.results.item}}
    </ul>
</script>

script 要素の data-yql 属性に YQL のクエリを入力すると、 要素内のビューを使ってコンテンツを表示します。 ビュー部分には Mustache を採用しており、ループや条件分岐等もする事ができます。

こういう形でのウィジェットの公開も良いですね。

参考資料

• Yahoo! Query Language – YDN
• YQL Console: show tables
• XMLのWebAPIを爆速で使いこなせるフレームワーク – Yahoo! JAPAN Tech Blog

extend

JavaScript で extend というと、幾つかのオブジェクトをマージして拡張する処理の事として知られます。
かなり頻繁に使われるこの機能は、多くのJavaScriptフレームワーク・ライブラリに備えられています。

例えば jQuery の場合は $.extend として実装されています。

var dest = {a: 1, b: 2};
var src = {a: 2, c: 3};

$.extend(dest, src);
console.log(dest); // {a: 2, b: 2, c: 3}

$.extend は複数のオブジェクトを引数に渡し、先頭に渡したオブジェクトの拡張をします。
その他のフレームワークにおいても基本的な使い方は共通で、
underscore.js の _.extend もほぼ同様の記述で利用できます。

いくつかのパターン

extend 機能を実装する上で、いくつかのパターンが考えられます。

• 値がオブジェクトだった場合に再帰的にコピー（ディープコピー）するか否か
• 既に同じ名前のプロパティが存在した場合に上書きするか否か

これらは正解不正解なくケースによって使い分ける物だと思いますが、
利用する extend 関数がどのパターンで機能を提供するのかは把握しておいた方が良いでしょう。
特に、ディープコピーの有無によるミスは気づきにくいかもしれません。

ちなみに jQuery はディープコピーの有無をコントロールする事が出来、underscore.js はディープコピーを行いません。
同名プロパティについては両者ともに後から渡された値で上書きを行います。

ディープコピーと参照

コピー元のプロパティの値がオブジェクトであった場合、
それをそのままコピーしてもそれは元のオブジェクトへの参照になります。
例えば次のように src のプロパティに data というオブジェクトがぶら下がっているとします。

var dest = {};
var src = {
    data: {
        a: 1,
        b: 2
    }
};

この src を元にして dest を拡張してみます。

$.extend(dest, src);
console.log(dest); // {"data":{"a":1,"b":2}}

問題なく拡張出来たように見えますが、
ここでコピー元の src.data のプロパティを変更してみると、それが dest.data にも反映される事が分かります。

src.data.a = 0;
console.log(dest); // {"data":{"a":0,"b":2}}

これは dest.data が src.data に紐付いている為に引き起こる様です。
この時 dest.data を src.data から切り離した新しいオブジェクトとして複製したい場合は、ディープコピー を使います。
jQuery の場合は引数の先頭に true を足してあげることでディープコピーが出来ます。

$.extend(true, dest, src);

同名プロパティの上書き

あまりないケースかもしれませんが、
コピー先のプロパティを活かしたい場合は引数の最後に渡して改めてコピーする事になります。

$.extend(dest, src, {
    propToProtect: dest.propToProtect
});

新しいオブジェクトとして生成する

継承した結果を新しいオブジェクトとして取得したい場合は、
空のオブジェクトを先頭に渡します。

var obj = $.extend({}, src1, src2);

src1 / src2 共にプロパティの変更はされず、空のオブジェクトに継承された結果が返り値として返ります。

extend の習作

なんとなく extend の働きを理解したところで、簡単な extend 関数を習作してみます。
まずはシンプルにディープコピー無しの extend です。

var extend = function(/* dest, src1, src2 */){
    var i = 0, dest, src, name;
    dest = arguments[i++];
    for(; i<arguments.length; i++){
        src = arguments[i];
        for(name in src){
            if(! src.hasOwnProperty(name)){ continue; }
            dest[name] = src[name];
        }
    }
    return dest;
};

次に、ディープコピーの有効・無効をコントロール出来るようにしたタイプです。
（コントロールをなくして別名関数にしてしまった方がシンプルに済むかもしれません）

// obj のタイプを文字列で返す
var type = function(obj){
    var m = Object.prototype.toString.call(obj).match(/\[object\s(\w+)\]/);
    return m ? m[1].toLowerCase() : null;
};

var extend = function( /* [deep,] dest, src [, src2 ...] */ ){
    var i = 0, deep = false, dest, merge;
    if(type(arguments[0]) === "boolean"){
        deep = arguments[i++];
    }
    dest = arguments[i++];
    merge = function(deep, dest, src){
        var name;
        for(name in src){
            if(! src.hasOwnProperty(name)){ continue; }
            if(deep && type(src[name]) === "object"){
                dest[name] = extend(deep, dest[name] || {}, src[name]);
                continue;
            }
            dest[name] = src[name];
        }
    };
    for(; i<arguments.length; i++){
        merge(deep, dest, arguments[i]);
    }
    return dest;
};

jQuery等がない状況でコードを書く時や、
好みの動作を行う extend 関数が欲しい時には自作のスニペットを用意しておくと捗るかもしれませんね。

参考資料

• jQuery.extend() | jQuery API Documentation
• Underscore.js

WebSocket

WebSocket は、サーバーとクライアント間の双方向の通信をスムーズに行う為の技術です。 XMLHttpRequest のように都度リクエストを送るのではなく、 一旦コネクションが貼られた後はそのコネクション上でメッセージを送り合ってデータのやり取りを行う為、 よりリアルタイム性が必要なアプリケーション、例えばチャットやオンラインゲーム等での活躍が期待されます。

Socket.io

WebSocket を恐ろしく簡単で使いやすい物に変えてしまうのが Socket.io です。

http://socket.io/
Socket.IO aims to make realtime apps possible in every browser and mobile device, blurring the differences between the different transport mechanisms. It’s care-free realtime 100% in JavaScript.

node.js で楽にWebSocketのサーバが立ち上がるうえ、クライアントサイドでは WebSocket に非対応な環境の為に、 Flash で ActionScript3 の WebSocket API を使用してフォールバックを備えてくれています。

WebSocket サーバの起動

まず socket.io をインストールしましょう。

$ npm install socket.io

そして起動用のスクリプトを書きます。

// server.js
var io = require('socket.io').listen(8080);
io.sockets.on("connection", function(socket){
    socket.emit("hello", {message: "Thanks to connect !"});
});

これは接続したクライアントに “hello” メッセージを送るだけのコードです。

listen メソッドでポートを指定してサーバを起動します。 io.sockets.on メソッドでは、新たにリクエストのあったコネクションを受け取り、 そのコールバックの中で emit コマンドでクライアント側にメッセージを送ります。

node コマンドで WebSocket サーバを起動します。

$ node server.js

これでサーバが立ち上がったと思います。 デーモン化したい時には forever が便利です。

クライアント側の処理

WebSocketとは別に、Webサーバが立ち上がっていると仮定しましょう。 クライアント側では socket.io-client を使って WebSocket に接続します。 socket.io-client は bower でも npm でもインストールできます。

$ bower install socket.io-client

ここではサーバから送った “hello” メッセージを受け取ってみます。

<script src="bower_components/socket.io-client/dist/socket.io.js"></script>
<script>
    var socket = io.connect("http://example.com:8080");
    socket.on("hello", function(data){
        console.log(data.message); // "Thanks to connect !"
    });
</script>

サーバから emit で送ったメッセージは、クライアント側で on で受け取る事ができます。 逆に、サーバ側にメッセージを送る時はクライアント側で emit し、サーバ側で on で受け取ります。

全てのソケットにメッセージを送る

上のサーバスクリプトでは、引数で渡された socket オブジェクトで emit を行っていましたが、 この socket はそのクライアントのみのコネクションです。 接続している全てのユーザにメッセージを送りたい場合は、socket にぶら下がっている broadcast を使用します。

socket.emit("message", ... ); // 自分にメッセージを送る
socket.broadcast.emit("message", ...); // 自分以外にメッセージを送る

broadcast は自分以外のコネクションを指します。

極めてシンプルなチャットの習作

Socket.io を使って極めてシンプルなチャットプログラムを作ってみます。 上で挙げた機能のみを使用して、その場限りのチャットをする事が出来ます。 ルームや認証などは一切省いています。

まずHTMLは、ニックネームとメッセージを入力するインプットと、メッセージログを出力する #log で構成されます。

<!-- HTML -->
<form id="form-message">
    <label>ニックネーム: <input type="text" id="nickname"></label>
    <label>メッセージ: <input type="text" id="message"></label>
    <input type="submit">
</form>
<hr>
<ul id="log"></ul>

次にクライアント側の JavaScript ですが、例をシンプルにする為に jQuery を使用します。

/* クライアント JavaScript */
var socket = io.connect("http://example.com:8080");

socket.on("connect", function(){
    $("#nickname").on("change", function(e){
        socket.emit("set nickname", {
            nickname: this.value
        });
    });
    $("#form-message").on("submit", function(e){
        e.preventDefault();
        var input = $("#message");
        socket.emit("send message", {
            message: input.val()
        });
        input.val("");
    });
});

socket.on("message", function(data){
    $("<li>").append($("<strong>").text(data.nickname))
    .append($("<span>").text(data.message))
    .prependTo("#log");
});

クライアントサイドの JavaScript はこのような働きをします。

• #nickname の内容が変更されると “set nickname” メッセージを送ってニックネームを変更する
• #form-message がサブミットされると、#message から “send message” でメッセージを送信する
• サーバから “message” が届いたら、 #log の中に追加して表示する

最後にサーバ側では、上記の処理をサポートするように記述します。

/* サーバ JavaScript */
var io = require('socket.io').listen(8080);

io.sockets.on("connection", function(socket){
    var anonymous = "名無しさん";
    var nickname = null;
    socket.on("set nickname", function(data){
        nickname = data.nickname;
    });
    socket.on("send message", function(data){
        if(! data.message){ return; }
        var vars = {
            nickname: nickname || anonymous,
            message: data.message
        };
        socket.emit("message", vars);
        socket.broadcast.emit("message", vars);
    });
});

socket オブジェクトには set/get が実装されており、その接続毎のデータを保持する事ができますが、 コールバックを受け取るタイプで少し例が冗長になってしまう為、ここでは単なる変数として nickname を定義しています。

WebSocket の働きが、なんとなく伝わったでしょうか。

その他のヒント

限定されたユーザにメッセージを送りたい

例えばチャットルームのような物が存在していて、その中だけでメッセージをやりとりしたい時の為に、 Socket.io には 「ルーム機能」 なる物があります。 ルームは入室・退室する事ができ、そのルームの中にいるメンバーだけに通知をする事ができます。

/*  サーバ JavaScript */
socket.join("ChatRoom"); // 入室します
socket.leave("ChatRoom"); // 退室します
io.sockets.in("ChatRoom").emit( ... ); // ルーム内のメンバーにだけ emit

ルーム内にメッセージを送るには、io.sockets を in() メソッドで絞り込んで emit します。

また、コネクションからクライアントを切り分ける ネームスペース機能 という物もあります。 “/chat” のようにネームスペースを定義してそこに接続したクライアントだけでデータのやり取りをします。 サーバ側では of() でクライアントを絞り込んで処理をかき分けます。

/*  サーバ JavaScript */
var chat = io.sockets.of("/chat");
chat.on("connection", function(socket){
    socket.on("send message", function(data){
        chat.emit( ... );
    });
});

クライアント側では、コネクション時に “/chat” を足して接続します。

/* クライアント JavaScript */
var socket = io.connect("http://example.com:8080/chat");

また、ネームスペースとルーム両方で絞り込む事もできます。

セッションを管理したい

socket.io のセッションは基本的にその接続限りです。 ページをリロードしたり、新しいタブで開いたりした時点で新しいコネクションが貼り直され、id も更新されてしまいます。 その為、認証などでセッションの保持をしたい場合は少し工夫が必要です。

socket.io の wiki にいくつかその為のレシピやモジュールが公開されていますが、 基本的に express や connect など、node.js ベースの解決策になっているので、 socket.io を採用する場合はWebサーバも express を選択した方が良さそうですね。 （特に他の物を使う理由もなさそうですが）

session.socket.io (SessionSockets)
This tiny node module simplifies your web sockets app when using http sessions from express or connect middlewares. It has no dependencies and can be initialized using any session store and cookie parser compatible with express or connect.

こちらは socket.io でセッションを管理する為の node モジュールです。

参考資料

• WebSocket – Wikipedia
• Socket.IO: the cross-browser WebSocket for realtime apps.
• Home · LearnBoost/socket.io Wiki
• Socket.IO API 解説 – Block Rockin’ Codes
• session.socket.io (SessionSockets)

Video

古くは Flash だったり wmv だったりしたWeb上での動画ファイルの再生も、 最近では HTML5 で追加された video 要素のおかげで統一化が図られています。 勿論IE8以下ではサポートしていないので Flash 等で対応してあげる必要がありますが、 その辺の面倒をしっかり見てくれるライブラリも公開されています。

video 要素

まずは video 要素を簡単におさらいします。

<video poster="img/poster.jpg" id="my-video" controls>
    <source src="movies/movie.mp4" type="video/mp4">
    <source src="movies/movie.webm" type="video/webm">
</video>

video 要素は source 要素をぶらさげ、形式ごとに動画ファイルを列挙していきます。 video の src 属性で指定する事もできますが、ブラウザ環境ごとに再生が出来る形式が限定されているので、 複数の形式を連ねて再生可能な形式で再生する方法が広く使われます。 どの環境でどの形式がサポートされているかは下記URLにて詳細がまとめられています。

• HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット – HTML | MDN

ムービーのコントロール

video 要素の元となる HTMLMediaElement には動画の再生をコントロールするメソッドがぶら下がっているので、 それを利用して操作する事ができます。ブラウザによっては他にもメソッドも独自に実装されている事があります。

var video = document.getElementById("#my-video");
...
video.load(); // ビデオのロード
video.play(); // 再生
video.pause(); // 停止

ムービーのシーク

動画の指定した時間へのジャンプは currentTime プロパティの値を変更する事で可能です。 currentTime プロパティは通常の呼び出しでは現在の再生位置を返しますが、 値を指定する事でその再生位置にジャンプする事が出来ます。

video.currentTime; // 12.345 など（再生位置を秒で返す）
video.currentTime = 30; // 30秒の位置に移動する

しかし、currentTime に代入してシークを行おうとした場合にエラーが発生する場合があります。

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

これは動画ファイルの情報がまだ利用可能でない為起こる様です。 他の外部リソース同様にメタ情報のロードを待つ必要がありますね。

video.addEventListener("loadedmetadata", function(e){
    e.target.currentTime = 30;
}, false);

この他にも多くのプロパティが実装されているので、 JavaScript でさらに進んだ処理をしたい時は W3Cのページ を訪れてみましょう。

ビデオプレイヤーライブラリ

限られた環境で動画を再生するだけならば素のまま使えば良いのですが、 やはりどうしてもレガシーな環境に対応しなければならない時があります。 面倒な部分は優秀なライブラリにお願いしてしまいましょう。

Video.js

http://www.videojs.com/

Video.js は Flash をフォールバックに使用しているプレイヤーライブラリです。 スタイルシートとJavaScriptファイルを読み込み、video 属性に専用のクラスを指定して使用します。

<video id="my-video" class="video-js vjs-default-skin"> ... </video>
<script>
var player = videojs("my-video", { /* options */ });
</script>

プレイヤーに好みのスキンを着せる事が出来るのが特徴で、 ブラウザ上でプレビューを確認しながらスキンを編集出来るツールも公開しています。 スタイルの編集は Less で行う事ができます。

• Video.js | Video Player Skin Designer

Video.js の API は、 イベント・メソッドの名前や仕様などが MediaElement API に倣った形になっています。

player.on("loadedmetadata", function(){ ... }); // on メソッドでイベントの設定
player.play(); // 再生

MediaElement.js

http://mediaelementjs.com/

MediaElement.js は、Flash や Silverlight のプレイヤーを使い、 古いブラウザでも HTML5 の MediaElement の API を使用出来るように振る舞ってくれます。 多くのCMS向けのプラグインが公開されており、WordPress はコアにバンドルされているそうです。 動作には jQuery が必要です。

<video id="my-video"> ... </video>
<script>
    var player = new MediaElementPlayer("#my-video", /* options */);
    // あるいは
    var $media = $("#my-video").mediaelementplayer({ /* options */ });
</script>

プレイヤーの初期化は MediaElementPlayer から生成するか、 $.fn.mediaelementplayer を使用して行います。 それぞれ返り値が違うので注意しましょう。

ライブラリ使用上の共通の注意

video 要素に対応していないブラウザで使用する場合は、 html5shiv や Modernizr 等で video 要素へのCSSの適用を有効化しておかなければなりません。 あるいは手作業で対応しておきましょう。

document.createElement("video");
document.createElement("audio");

また、古い環境でエミュレートしてくれるといっても、 コールするタイミングによっては使えなかったり、細かい点で本来の物と挙動が異なってしまったりします。 結局中でIE用の処理を分けざるをえない、といった状況は結構ありますので、がんばりましょう。

参考資料

• video – HTML | MDN
• HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット – HTML | MDN
• HTML5 Video Player | Video.js
• MediaElement.js – HTML5 video player and audio player with Flash and Silverlight shims

userData

userData は、旧来の Internet Explorer で使用出来るローカルのストレージです。 ローカルの記憶領域というと今では Web Storage がありますが、 しばしばその代替として使用されています。

何が凄いのかというと、これが IE5（1999年）から実装されている点で、 Web黎明期を少し抜けたあたりで Web Storage に近しい物が既に存在していたという事になります。 一方の DOM Storage はIE8からサポートされている為あまり出番はないかもしれませんが、 いまだ息が絶えないIE6-7対応で活躍する事ができます。

Cookie との比較

Web Storage の代替として広く使われている Cookie と比較すると、容量と範囲で大きな差があります。

• 容量
  • userData: およそ1MB
  • Cookie: およそ5KB
• 範囲
  • userData: 同じディレクトリ内のみ
  • Cookie: フレキシブルに設定可能

容量は、5MBほど利用できる Web Storage には及びませんが、Cookie と比較するとかなり大きいです。 その半面、データを共有出来る範囲が同じディレクトリ内に限られてしまいます。 互いに一長一短なので、場面によってい使い分けたいところです。

userData の使い方

userData は IE独自の behavior でスタイル指定をして使います。 下の例では input 要素にしていますが、恐らくどの要素でも使えると思います。

<input type="hidden" id="my-storage" style="behavior:url(#default#userData)">
<script>
    var myStorage = document.getElementById("my-storage");
    myStorage.load("myStorageData");
</script>

#default#userData を behavior で指定した要素は userData を使用する為のメソッドが使えるようになります。

• load(name): ストレージからデータをロードする
• save(name): ストレージにデータを保存する
• getAttribute(key): 値を取得する
• setAttribute(key, value): 値をセットする
• removeAttribute(key): 値を削除する

ストレージ名を “myStorageData” とし、適当な値を設定してみる例です。 ロードとセーブが都度必要になる以外は、別段注意すべき所はなさそうですね。

myStorage.load("myStorageData");
myStorage.setAttribute("name", "john");
myStorage.setAttribute("email", "john@example.com");
myStorage.save("myStorageData");

ストレージに使用する要素を動的に生成する事もできますが、DOMに追加されていないと働かないので注意が必要です。 動的生成の際には addBehavior メソッドが便利です。

var myStorage = document.createElement("input");
myStorage.setAttribute("type", "hidden");
myStorage.addBehavior("#default#userData");
document.body.appendChild(myStorage);
myStorage.load("myStorageData");

localStorage の polyfill を userData で書いてみる

少し長くなりますが、IE7以下向けの localStorage の代替処理を書いてみます。 先述の通り、同じディレクトリ内でしかデータを共有する事は出来ません。

(function(){
    // Detect supports
    if("localStorage" in window || ! ("addBehavior" in document.body)){
        return;
    }

    // Create element for strage
    var createStorage = function(name){
        var input = document.createElement("input");
        document.getElementsByTagName("head")[0].appendChild(input);
        input.setAttribute("type", "hidden");
        input.addBehavior("#default#userData");
        input.load(name);
        input._commit = function(){
            this.save(name);
        };
        return input;
    };

    // Storage and index object
    var storage = createStorage("altLocalStorage");
    var index = createStorage("altLocalStorageKeys");

    // Fetures for index
    index._get = function(){
        var keys = this.getAttribute("keys") || "";
        if(keys){ return keys.split(","); }
        return [];
    };
    index._indexOf = function(key, keys){
        var i=0; keys = keys || this._get();
        for(; i<keys.length; i++){
            if(keys[i] === key){ return i; }
        }
        return -1;
    };
    index._set = function(keys){
        this.setAttribute("keys", keys.join(","));
        this._commit();
    };

    // API
    window.localStorage = {
        setItem: function(key, value){
            var keys;
            if(index._indexOf(key) < 0){
                keys = index._get();
                keys.push(key);
                index._set(keys);
            }
            storage.setAttribute(key, value);
            storage._commit();
        },
        getItem: function(key){
            return storage.getAttribute(key);
        },
        removeItem: function(key){
            var keys, i;
            keys = index._get(),
            i = index._indexOf(key, keys);
            if(i >= 0){
                keys.splice(i, 1);
                index._set(keys);
            }
            storage.removeAttribute(key);
            storage._commit();
        },
        clear: function(){
            var i = 0, keys = index._get();
            for(; i<keys.length; i++){
                storage.removeAttribute(keys[i]);
            }
            storage._commit();
            index._set([]);
        }
    };
}());

保存されたデータを列挙する手段が見つからなかった為、キーを保存するストレージを別に作っています。 clear メソッドを実装しなければそれは必要ないので、半分以下のコード量に収まると思います。

余談ですが、IEの開発者ツールでモードを Internet Exlorer 7 にしても “localStorage” は実装されてしまっていますので、 上のコードはネイティブのIE7でないと検証する事が出来ません。

参考資料

• userData Behavior (A, ABBR, ACRONYM, …)
• DOM Storage – DOM | MDN
• Web Storage

追記

2014/01/23

コードの誤りを修正（urlの欠如）

テンプレート

動的なWebアプリケーションを制作する上で、 テンプレートは非常に強力な味方になります。 それだけにテンプレートエンジンはまさに群雄割拠で、 それぞれ個性や独自の趣向をもったライブラリが至る所で開発されています。

基本的な機能

どのテンプレートエンジンも記法こそ様々ですが、提供する機能や使い方は基本的に共通しています。 出力用の関数が用意されており、その関数に元となるテンプレート文字列と、 その中で展開したいデータを格納したオブジェクトを渡します。

例えば Mustache では render メソッドがそれにあたります。

var output = Mustache.render(template, data);

render の中では、テンプレートの記述を元にして data オブジェクトの内容を展開していきます。 例えばこのようなテンプレートが文字列で用意されているとして、

<a href="mailto:{{email}}">{{name}}</a>

これを次のような data オブジェクトで展開したいとします。

var data = {
    name: "John",
    email: "john@example.com"
};

これらを Mustache.render メソッドに渡すと、次のような出力が文字列で返されます。

<a href="mailto:john@example.com">John</a>

制御構文

テンプレートエンジンは、データのコレクションをループで回して全部出力させたり、 条件分岐を行なって true の場合のみ出力させたりといった機能を提供してくれます。

<ul>
    <!-- products（配列）の中のオブジェクトを全て出力 -->
    {{#products}}
    <li>{{name}} : {{price}}</li>
    {{/products}}
</ul>

<!-- isError が true の場合だけ出力 -->
{{#isError}}
<strong>エラーです</strong>
{{/isError}}

これは Mustache での制御構文の例です。（制御構文の書き方はライブラリによって大きく異なります）

テンプレートのコンパイル

Mustache.render のようにテンプレートとデータを渡して出力する方法の他に、 テンプレートをコンパイルしてしまって繰り返し再利用可能な関数にしてしまう事もできます。 コンパイルも多くのテンプレートエンジンで実装されています。

var render = Mustache.compile(template);
var output = render(data);

何度も繰り返し使うようなパーツはコンパイルしてしまったほうが、 人にもパフォーマンスにも優しそうです。

テンプレート文字列

Web開発においてテンプレート文字列の内容は主に HTML であり、JavaScript の文字列リテラルで表現するには長過ぎます。 そこで、次のように script 要素の中に閉じ込めてしまう手法がよくとられます。

<script type="text/template" id="template-profile">
    <div class="profile">
        <div class="name">{{name}}</div>
        <div class="email">{{email}}</div>
    </div>
</script>

<script>
    var template = document.getElementById("template-profile").innerHTML;
</script>

テンプレートエンジンライブラリの色々

どのライブラリも記法・機能が千差万別です。 自分のスタイルや、プロジェクトに合ったテンプレートエンジンを選択しましょう。

Mustache

http://mustache.github.io/

Mustache の特徴として、「多言語に対応している」事と、「ロジックレスである」事が挙げられます。 JavaScript の他にも20言語（2013年12月現在）にわたって実装されていて、 サーバサイドでもフロントでも同じ記法でテンプレートを書くことができます。

<section>
    <h1>{{title}}</h1>
    {{#onsale}}<strong>セール中！</strong>{{/onsale}}
    <ul>
    {{#items}}
        <li>{{name}} : {{price}}</li>
    {{/items}}
    </ul>
</section>

ループや条件分岐は {{#name}} で表現する為、複雑な制御は出来ません。

hogan.js

http://twitter.github.io/hogan.js/

hogan.js は Mustache 互換のテンプレート記法を採用した、Twitter が提供するテンプレートエンジンです。 Mustache と変わらない記述で、本家よりも速く動作するとしています。 出力の仕方は Mustache と変わりありません。

var output = hogan.render(template, data); // 出力
var render = hogan.compile(template); // コンパイル

EJS

Ruby の ERB スタイルでテンプレートを書ける JavaScript のライブラリです。 Mustache系と違って、テンプレート内にそのまま JavaScript コードを記述する事ができます。

<section>
    <h1><%= title %></h1>
    <% if(onsale) { %>
    <strong>セール中！</strong>
    <% } %>
    <ul>
    <% items.forEach(function(item){ %>
        <li><%= item.name %> : <%= item.price %></li>
    <% }) %>
    </ul>
</section>

テンプレートにロジックが必要な場合は非常に強力な味方になりますね。 記述もタグで囲むだけのシンプルなもので、 Ruby 開発者は勿論、PHP の開発者にとっても馴染みのある書き方なのではないでしょうか。

出力に使うメソッド名は上に上げたものと変わりません。

var output = ejs.render(template, data); // 出力
var render = ejs.compile(template); // コンパイル

underscore

http://underscorejs.org/

underscore.js は便利なメソッドを多数提供してくれる大変有難いライブラリですが、 その中の _.template メソッドがテンプレートエンジンとして働いてくれます。

テンプレートの記述は ERB に倣った物で、上の EJS で書いたテンプレートがそのまま _.template で動作します。 出力もコンパイルも同じメソッドで行います。

var output = _.template(template, data); // 出力
var render = _.template(template); // コンパイル

一番の魅力は、この機能が underscore.js の一部でしかないという点だと思います。 他の便利なメソッドを使う為に、あるいは Backbone.js を使う為にインクルードしておいた underscore.js がテンプレートエンジンとしても働き、 新たに別のライブラリを読み込む必要がないのです。

参考資料

• {{ mustache }}
• Hogan.js
• visionmedia/ejs
• Underscore.js

SVG

SVG（Scalable Vector Graphics）は、Webページ上でベクターグラフィックを扱う為のマークアップ言語です。 ベクターなので拡縮してもビットマップデータのように劣化しないのが特徴で、 アイコンやイラスト・アニメーション等で幅広く活躍できます。

<svg width="40" height="40">
    <path d="M16,22.375L7.116,28.83l3.396-10.438l-8.883-6.458l10.979,0.002L16.002,1.5l3.391,10.434h10.981l-8.886,6.457l3.396,10.439L16,22.375L16,22.375z" fill="black"></path>
</svg>

このコードをHTMLに挿入すると、ベクターで描かれた星印が表示されます。 上で使用されている path の他、rect や circle などを使って様々なグラフィックを描く事が出来ます。

IEではSVGをサポートするのがバージョン9以降な為、 旧来より実装されていた VML（Vector Markup Language）で代用されたりします。

Raphael

http://raphaeljs.com/

Raphael は比較的老舗なべクターグラフィックライブラリで、 SVGライブラリの中ではデファクトスタンダードとの呼び声が高い物です。 SVGが使える環境ならばSVGを使い、そうでない場合はVMLで代用してベクターコンテンツを扱う事ができます。

<div id="canvas"></div>
<script>

// #canvas にキャンバスを生成する
var paper = Raphael("canvas");

// キャンバスに円を描く
var circle = paper.circle(24, 24, 16);
circle.attr({
    "fill": "#c00",
    "stroke-width": 0
});

</script>

Raphael() でキャンバスを生成し、 そのキャンバスに対して circle / rect / path などを使用してグラフィックを描きます。

Raphael で描かれた図形要素には、属性を編集する attr() の他、 各種イベントハンドラを設定する為のメソッド等が実装されています。

// マウスオーバーイベントを設定する
circle.hover(
    function(){
        this.animate({
            "fill": "#00c"
        }, 500);
    },
    function(){
        this.animate({
            "fill": "#c00"
        }, 500);
    }
);

// クリックイベントを設定する
button.click(function(){
    console.log("click");
});

さながら jQuery のSVG版といった感覚で使えます。

Snap.svg

http://snapsvg.io/

Snap.svg はRaphaelの作者が開発し、Adobe からリリースされた生まれて間もないプロジェクトです。 （2013/10/23 に初リリースされています。）

最も大きな違いは、snap.svg は SVG をサポートする環境の為だけのもので、 VMLによる古い環境へのサポートは一切しないと宣言している点です。 そうすることで、SVG にあって VML にはないような先進的な機能を利用出来る為です。 また、VML対応を無くす事によりライブラリ自体の軽量化も図れている模様です。

開発者が同じなだけあり、使い方はRaphaelからほぼ変わりません。（これは素晴らしいことです） 試しに Raphael での例と同じ処理をしてみましょう。

<svg id="canvas"></svg>
<script>
    // 対象要素は svg 要素である必要があります
    var paper = Snap("#canvas");
    var circle = paper.circle(24, 24, 16);
    circle.attr({
        "fill": "#c00",
        "stroke-width": 0
    });
    circle.hover(
        function(){
            this.animate({
                "fill": "#00c"
            }, 500);
        },
        function(){
            this.animate({
                "fill": "#c00"
            }, 500);
        }
    );
    circle.click(function(){
        console.log("click");
    });
</script>

Raphael() が Snap() に変わったことと、渡す要素が svg 要素である必要がある事をのぞいて、 間違い探しの問題かと思うほどにほぼ一致しています。

また、Raphael にはなかった機能のひとつとして、「外部SVGリソースのインポート」があります。 外部SVGファイルをAjaxで取得し、その結果をコールバックで展開する事が出来ます。

Snap.load("external.svg", function(f){ ... });

他にもマスキングやパターンのクリッピングなど先鋭的な機能が揃えられています。 公式のチュートリアル ではコードを追いながら使い方を学ぶ事が出来ます。 ここのページャーのアニメーションも気が利いていてかわいいですね。

Raphael がそうであったように、新世代のSVGライブラリのスタンダードになりそうな予感がしますね。

参考資料

• Scalable Vector Graphics – Wikipedia
• SVG | MDN
• W3C SVG Working Group
• Raphaël—JavaScript Library
• Snap.svg – Home

readyState

document.readyState は、HTMLのダウンロード・パース状況を取得できるAPIです。 値は “loading” / “interactive” / “complete” などが返され、 それぞれ以下のような状態を表します。

• loading: ダウンロード中
• interactive: HTMLのダウンロードとパースが完了
• complete: サブリソースのダウンロードが完了

また、readyState の状態が移り変わる毎に、readystatechange イベントが発火されます。

document.addEventListener("readystatechange", function(e){
    console.log(document.readyState); // "loading", "interactive", "complete" など
}, false);

DOMContentLoaded

readystatechange と似た働きをもつ物に DOMContentLoaded イベントがありますが、 DOMContentLoaded をサポートしていないブラウザ、例えばIE8以下向けのフォールバックとして readystatechange が使用されたりします。

ごくシンプルに書くと、このような処理をする事になります。

var initialize = function(){
    console.log("ready");
    // アプリケーションの初期化...
};

var domReadyHandler = function(e){
    if(e.type === "DOMContentLoaded"){
        document.removeEventListener("DOMContentLoaded", domReadyHandler);
    } else {
        if(document.readyState !== "complete"){ return; }
        document.detachEvent("onreadystatechange", domReadyHandler);
        window.detachEvent("onload", domReadyHandler);
    }
    initialize();
};

if("addEventListener" in document){
    document.addEventListener("DOMContentLoaded", domReadyHandler, false);
} else if("attachEvent" in document){
    document.attachEvent("onreadystatechange", domReadyHandler);
    window.attachEvent("onload", domReadyHandler);
}

DOMContentLoaded の代替として readystatechange の “complete” のタイミングで処理を行います。 環境の判別に “addEventListener” の有無を使用していますが、 これはたまたま DOMContentLoaded のサポート環境と被っていた為です。 （DOMContentLoaded は document.ondomcontentloaded として参照できない為、イベントのサポートの有無で判別しようとすると冗長になってしまいます）

フレーム内コンテンツなどを考慮するとさらに長いコードになりますが、 下記リンクにて詳細に説明されています。

• https://github.com/addyosmani/jquery.parts/blob/master/jquery.documentReady.js

document 以外での readyState

IE10以下に限っては document 以外にも、img要素やscript要素で readyState が使えます。 従来のIEでは script 要素の onload イベントが使用出来なかった為、 スクリプトローダー等ではこれをフォールバックとして使用していたりします。

例えば、複数のスクリプトを動的・同期的に読み込んで実行したいケースでは、 script 要素の async を false にすれば想定する動きをしてくれます。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
Set this Boolean attribute to indicate that the browser should, if possible, execute the script asynchronously…

var loadSync = function(resources){
    resources.forEach(function(name){
        var script = document.createElement("script");
        script.async = false;
        script.src = name;
        document.getElementsByTagName("head")[0].appendChild(script);
    });
};

loadSync(["jquery.js", "underscore.js", "backbone.js", "main.js"]);

しかし async 属性はIE8以下ではサポートされていない為、 readystatechange イベントでスクリプトのロード状況を監視し、 読み込みが完了した時点でDOMに挿入する事で再現してみます。

// async がサポートしているかを確認
var supportAsync = "async" in document.createElement("script");

var loadSync = function(resources){
    var nodes = [];
    var count = resources.length;
    var head = document.getElementsByTagName("head")[0];

    var process = function(){
        if(this.readyState === "loaded"){ count--; }
        if(! count){
            nodes.forEach(function(node){
                node.onreadystatechange = null;
                head.appendChild(node);
            });
        }
    };

    var createNode = function(src){
        var node = document.createElement("script");
        if(supportAsync){
            node.async = false;
            node.src = src;
            head.appendChild(node);
        } else {
            node.onreadystatechange = process;
            node.src = src;
        }
        return node;
    };

    // forEach が polyfill で定義されている前提
    resources.forEach(function(name){
        nodes.push(createNode(name));
    });
};

loadSync(["jquery.js", "underscore.js", "backbone.js", "main.js"]);

IE11からは script要素の readyState は使えなくなり、load イベントの使用が推奨されています。

参考資料

• document.readyState – DOM | MDN
• script – HTML | MDN
• readyState property (Internet Explorer)
• Compatibility changes in IE11 (Windows)
• jquery.parts/jquery.documentReady.js at master · addyosmani/jquery.parts

querySelector / querySelectorAll

querySelector / querySelectorAll は、”#container .section” のようなCSSのセレクタで要素を絞り込んで取得する為のAPIです。 旧来jQuery等で使われていた要素の取得がネイティブのAPIとして実装されたと考えれば、特に難しいことはないですね。 IEは8以降でこの機能をサポートしていますが、IE8ではCSS2のセレクタのみ使用可能となっています。

querySelector[All] は document から呼び出して使用します。

document.querySelector("#container .section");
document.querySelectorAll("#container .section");

両者の違いは取得する要素の数です。 querySelector は条件に合致した最初の要素だけを返し、 querySelectorAll は合致した全ての物を返します。

<div id="container">
    <div class="section section-01"></div>
    <div class="section section-02"></div>
    <div class="section section-03"></div>
</div>
<script>
    var firstSection = document.querySelector("#container .section"); // HTMLDivElement
    var allSections = document.querySelectorAll("#container .section"); // NodeList
</script>

querySelectorAll で返される NodeList は Arrayライクなオブジェクトで、 配列のように添字で取得できるほか、インデックスで要素を返す item() メソッドが使用できます。

// これらは同じ要素を返します
allSections[0];
allSections.item(0);

他の要素取得系APIと比べて

要素の取得と言えば、getElementById / getElementsByClassName / getElementsByTagName がありますが、 想像に難くないようにこれらの方が高速な為、場面による使い分けが大切です。

使い分けが面倒、あるいは毎度 document… と書くのが鬱陶しい場合は、 セレクタから判別して処理する関数を書いてみても良いかもしれません。

var _query = function(selector){
    var nodes;
    if(/^#[\w\-]+$/.test(selector)){
        return [document.getElementById(
            selector.replace(/^#/, "")
        )];
    }
    if(/^\.[\w\-]+$/.test(selector)){
        nodes = document.getElementsByClassName(
            selector.replace(/^\./, "")
        );
    } else if((/^[a-z]+$/i).test(selector)) {
        nodes = document.getElementsByTagName(selector);
    } else {
        try {
            nodes = document.querySelectorAll(selector);
        } catch(e){
            nodes = [];
        }
    }
    return [].slice.call(nodes);
};
_query("#container"); // Array
_query(".section"); // Array
_query("div"); // Array
_query("#container .section"); // Array

ここで使われる id や class の文字については半角英数字とハイフン/アンダースコアのみに絞っています。 ついでに、forEach などが使えるように NodeList から配列に変換しています。

ただ、この場合は正規表現などのコストで有り難みが半減するかもしれません。

jQuery（Sizzle）と比べて

jQueryの独自のセレクタは要素を1つずつ検証していく為、やはりネイティブの querySelector に比べて速度が落ちてしまいます。 そのためjQueryは、

1. id や class やタグ名を渡された場合はそれに相応しいネイティブAPIを使用し、
2. ブラウザが querySelector が対応しているかどうかをチェックし、
3. querySelector で正常に解釈できるセレクタであるかどうかのテストを行い、
4. 失敗した場合（例えばjQuery独自の記法が使用されていた場合）に自分のAPIを使用して要素を抽出する

こんな感じのプロセスを踏んでいる様です。

つまりjQueryを使用する場合でも、まずは id や class で絞込み、 それに対して .find() などでフィルタリングする事で速度が改善しそうですね。

こちらで詳しく説明されています。

• jQueryのセレクタ高速化について | JavaScript | 73log.jp

参考資料

• document.querySelector – Web API リファレンス | MDN
• document.querySelectorAll – Web API リファレンス | MDN
• jQueryのセレクタ高速化について | JavaScript | 73log.jp