miso_soup3 Blog

主に ASP.NET 関連について書いています。

Hokuriku.NET vol.10 に参加してきました 4

イベント

Hokuriku.NET vol.10 セッション４、「Featuring Project Silk ＆ Liike:
楽しい “モダン” Web 開発のちょっとディープなお話」の感想です。

主に JavaScript のモジュール化について書きます。

スライドが公開されています

Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話

内容について

Silk と Liike についての解説、そして、今後のWEB開発では JavaScript が重要となってくる、
ということを中心にお話して頂きました。
この勉強会の3日後に ” TypeScript ” が発表されたので、まさしくなタイミングでした。（と後からわかった。）

Silk と Like の違い

  • Silk
    • 2011年の夏ごろ公開
    • モダンブラウザ
  • Liike
    • 2012年初夏公開
    • Silk のモバイル対応版

２つとも、見た目は全く同じです。

そういえば、Visual Studio Express 2012 for Web は、
複数プロジェクトのソリューションを開くことができます！
なので、無料で Silk と Liike のソースを見ることができます！

JavaScript

JavaScript が今後大活躍していきますが、普通に書いていくとごちゃごちゃになってしまいます。
その対策として、モジュール化アプローチがあります。

モジュール化アプローチ

アプローチ方法は以下の３つがあります。

1. JavaScript Objects

JavaScript を、オブジェクト指向で書いていこう、というものです。

2. jQuery Plug-ins

複雑な要素の操作や処理を、プラグインでまとめてしまい、いつでもどこでも
使えるようにしよう、というものです。
jQuery を拡張したい時にこの方法が使えます。

実装の中身は、プラグインの作成と、そのプラグインを適用する、という２つの部分に分かれます。

例えば、

$.fn.doubleSizeMe = function () {
	..//要素を２倍の大きさにする処理
};

と、要素を２倍の大きさにするプラグインを定義して、

$('.icon').doubleSizeMe();

と、プラグインを適用させ、class 属性が icon である要素を、２倍の大きさにする。
…といった感じです。

jQuery のプラグインは、WEB上にたくさん公開されています。
なので、DLしてきて適用するだけ…といった試し方でも十分に楽しめます。

3. jQuery UI Widgets

jQuery Plug-ins と同じく、ある処理をウィジェットとしてまとめようというものです。
実装は、ウィジェットの作成と、その適用、という２つの部分に分かれます。

jQuery Plug-ins との違いは何でしょう…。
１番の違いは、ウィジェット（プラグイン）の作成方法です。（適用方法ではなく）
jQuery UI Widgets は、jQuery UI ライブラリに含まれている Widget を継承する形で作成します。
なので、初期化や破棄、イベントの通知など、書き方に決まりがあります。
また、jQuery UI Widgets は、Draggable や Dialog など、
元からある jQuery UI のウィジェットを継承して作ることができます。

使い方の違いとしては、
jQuery Plug-ins は、アニメーションや、要素の配置方法、複雑な処理をまとめるというもので、
jQuery UI Widgets は、クリックしたらこうなって、スライドしたらああなる、といった、
UIコントロールとしての動きを拡張するもの…
かなと思います。

更に jQuery UI Widgets

セッションでは、Silk のソースを元に、jQuery UI Widgets についてお話して頂きました。
個人的に気になっていたので、復讐をかねて記載したいと思います。

サンプルの場所

Silk のソースをDLすると、ウィジェットの使用例のサンプルもついてきます。

この QuickStarts フォルダがそれです。
中にソリューションファイルがあります。

実行

ソリューションを開くと、中はこうなっています。

で、実行してみると、

あるタグにカーソルを乗せると、そのタグがハイライトされ、
そのタグに関する人気サイトのリンク一覧が、表示されます。

この一連の処理を、
・タグの強調
・あるタグに対する、人気サイト一覧の読み込み
という２つに分け、jQuery UI Widgets を使って
モジュール化を実現しているのが、このサンプルの主旨です。

構成

ファイルの構成は以下のとおりです。

２つのウィジェットが適用されていることは、
default.htm と、startup.js を見ることで一目瞭然です。

default.htm

  <script src="jquery.qs.infobox.js"></script>
  <script src="jquery.qs.tagger.js"></script>
  <script src="startup.js"></script>

startup.js 

//infoboxウィジェットを適用
var infobox = $('body').infobox({
    dataUrl: 'http://feeds.delicious.com/v2/json/popular/'
});

//taggerウィジェットを適用
$('span[data-tag]').tagger({
    //タグが主張するとき
    activated: function (event, data) { 
　　 //infoboxウィジェットの処理が開始
        infobox.infobox('displayTagLinks', event, data.name);
    },
    //タグが主張しないとき
    deactivated: function () {　
        //infoboxウィジェットの処理が開始
        infobox.infobox('hideTagLinks');
    }
});

タグがマウスオーバーされたら…という書き方では無いのが、ミソです。
（マウスオーバーのイベントは、taggerウィジェットの中で定義されています。）

ウィジェットの中身

jquery.qs.tagger.js と、jquery.qs.infobox.js の中がどうなっているかは、
ウィジェット実装方法の解説サイトである
jQuery ウィジェットを作る (1)
と一緒に見ると、わかりやすいと思います。

おしまい

セッション３と同じく、エバンジェリスト講座の後というプレッシャーの中、
素晴らしい冒頭トークを披露された井上さん。
その時の会場の拍手は、会場を揺るがすくらい大きなものでした。
（上手い！！！って感じの拍手でした〜）