JavaScriptのブログ記事

とても便利なJavaScriptフレームワークKnockout.jsを使ってみた

2012年10月18日 20:52 |

タイトルの通りです。
興味を持ちましたのでKnockout.jsを使ってみました。

要はMVVMフレームワーク（MVVMについてはWikipediaをご参照）。
端的に言ってしまうとインタラクティブな仕組みをJavaScriptで実現するためのライブラリです。

どこかで値が変わったときにそれを他の箇所でも自動で反映するということが容易にできます。

使ってみましたが、本当に便利です。
jQueryと一緒でなくてはならない存在になりそう。

ということでKnockout.jsの使い方の第一歩を紹介!

動作環境とか

対応ブラウザ：
IE 6以降, Firefox 2以降, Chrome, Opera, Safari
主要ブラウザは網羅しています。
使うために必要なライブラリ：
他のライブラリ（jQuery等）との依存関係はありません。単体で使用可能です。
配布：
MIT licenseにて配布されています。
公式サイト以外に以下の二箇所でも配布されています（現在の最新バージョン2.1.0のURLです）。
Microsoft Ajax CDN: http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js
cdnjs: http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js

チュートリアルの紹介

これからKnockout.jsがどんなものか、サンプルコードを元にしてさわりだけですが紹介していこうと思います。

内容としては、公式ページのチュートリアルのIntroductionを少しいじったぐらいの感じです。

かなりよくできたチュートリアルなので、英語に抵抗がなければぜひどうぞ。
以下、公式ページチュートリアル各章へのリンクです。

準備

まず、HTMLのhead内にてknockout.jsを読み込みます。
（サンプルファイルではMicrosoft Ajax CDNで読み込んでいますが、以下の記述はダウンロードしてjsフォルダに入れたと仮定）

私は一緒にjQueryも読み込んでおきました。
現時点ではファイル読み込み完了の検知のためぐらいにしか使っていないですが。

また、自分でJavaScriptのコードを書くファイルも準備。
私はdatabind.jsとしてjsフォルダに入れました。

お試しその1

まずはこちらのページを開いてみてください（同窓です）。

画面にsample textと表示されています。

この文字はHTMLではなく、JavaScriptにて記述しています。

以下、実際のコードです。まずはHTML側。

data-bindという属性がKnockout.jsを使っていく上での鍵となります。
ちなみに、データバインド（あるいはデータバインディング）とはデータ結合を意味します。

今回の場合、このspanはtext形式のsampleという名前、であることを記述しています。

続きましてJavaScript側です。

$(function() {
    function TestViewModel(){
        this.sample = "sample text";
    }
    ko.applyBindings(new TestViewModel());
});

まず、TestViewModelと名付けられたファンクションが、実際の処理を行う部分です。

this.sample = "sample text";の行で、sampleに"sample text"という文字列を代入しています。

sampleというのはHTML側でspanに指定した名前です。

ko.applyBindings(new TestViewModel());はデータバインドの適用を意味します。
要は上で指定したファンクションlが機能するための定義部みたいなもの。

ko.applyBindingsというコマンドは今後常に出てきます。

これだけだとなにがすごいのかわからないですよね。
なんか回りくどいコードを書いて一行表示しただけ。

ということで、次のお試しその2を見てください。

※お試しその1のコード一式はこちらです

お試しその2

続きましてこちらのページを開いてみてください（同窓です）。

入力欄にNakanoと書かれていて、その下にはHello , dear Nakanoと書かれています。

入力欄の内容を変更しますと、それに合わせて自動で下の文章も変わることがわかります。

たとえば、入力欄をAkiyamaとすると、その下にはHello , dear Akiyamaと表示されます。

コードを見てみましょう。
まずはHTML側。

inputにはvalue形式でsampleという名前が、spanにはtext形式でsample_addという名前を指定しています。

続きましてJavaScript側です。

$(function() {
    function TestViewModel(){
        this.sample = ko.observable("Nakano");
        this.sample_add = ko.computed(function() {
            return "Hello , dear " + this.sample();
        }, this);
    }
    ko.applyBindings(new TestViewModel());
});

お試しその1と似ていますが、違う点が二つあります。

まず一つ目が、sampleがobservable指定されていること。

これは、sampleを監視対象にすることを意味します。
つまり、sampleの値が変わったことをJavaScript側で検知できます。

次に二つ目としまして、sample_addにcomputed時の動作が記述されています。

computed時にHello , dear と、sampleにて指定した値が表示されるようになっています。

computedは、observableで指定した値の変化を検知し、処理を実行するという関数です。

つまり、sampleの値が変化するとこの関数が呼び出され、sample_addの表示内容が変わります。

たかだか数行のコードでインタラクティブな仕組みを可能とするのがKnockout.jsのすごいところです。

※お試しその2のコード一式はこちらです

お試しその3

では最後にこちらのページを開いてみてください（同窓です）。

お試しその2に消去というボタンをつけたものです。

このボタンを押すと、入力欄もその下の出力欄も、値が消えます。

まずはHTMLのコードです。

新たにbuttonが追記されています。
data-bindeはclick:clearButtonです。

これはclickした際にclearButtonを呼び出すことを意味します。

続きましてJavaScript側のコードです。

this.clearButtonにて、this.sampleを空にしています。

this.sample_addはthis.sampleを監視しているため、新たになにも記述しなくても勝手に内容が変わってくれます。

トリガはclickの他にも以下のようなものが用意されています。

※お試しその3のコード一式はこちらです

最後に

今回はKnockout.jsがどんなものなのか、とりあえずさわりだけ紹介してみました。

便利さの片鱗は伝わったのではないかなと。

機会があれば続編記事も書く予定です!

レスポンシブWeb制作で話題のjQuery Masonryを試してみた

2012年10月16日 21:50 |

なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！という記事で話題になっていますjQuery Masonry。

jQuery Masonryはfloatブロック配置用のjQueryプラグインです。
ブラウザの幅によって配置した要素がアニメーション付きで綺麗に並び変わります。

これを活用すればレスポンシブなWebサイトが制作しやすくなるかも?

ということで早速使ってみましたので、以下、そのまとめです!

ちなみに、最終的にはこうなります。

※レスポンシブデザイン（レスポンシブWebデザイン）とは、単一のHTMLで様々なディスプレイサイズの各端末で最適化表示をする手法です。

はじめに

jQuery MasonryはMIT licenseにて配布されています。

現在のバージョンは2.1.05です。