JavaScriptのスマホ対応時に知らないと損する16のコト：スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）（2/3 ページ）

[渡辺忍，KSK フレックスファームビジネスユニット エバンジェリスト]

よく使われるOSSライブラリ4選

　実際のスマートフォン向けWebサイト構築では、OSSライブラリなどを使用して、JavaScript実装を行っている場合もあるかと思います。よく使われるJavaScriptライブラリについて、その特徴をまとめてみました。

【1】いわずと知れた「jQuery」

　いわずと知れた超有名ライブラリです。CSSセレクタ風にコンテンツ上の要素を選択し、スタイル・イベント・属性の操作をする、Ajaxリクエストを処理する、JSONやXMLをパースする、JavaScriptコアAPIのユーティリティメソッドの提供など、幅広い機能を持ったライブラリです。

jQuery

　このライブラリ自体はスマートデバイス向けではありませんが、スマートフォン向けWebサイト構築に置いて、コンテンツに対してオリジナルのインタラクションの作りこみを行いたい場合には非常に便利に使えます。

　また、jQueryには、プラグイン機構があり、たくさんのサードパーティプラグインがあります。Webサイトにさまざまな機能・UI・インタラクションの追加が可能です。

【2】UIに特化した「jQuery UI」

　Webサイトで使えるUIに特化したライブラリです。ウィジェット、エフェクト、インタラクションと区分けされており、特徴的なUIを提供しています。

jQuery UI

　もともとPC向けに作成されたライブラリなので、タッチUIに向かないものもありますが、フォーム系のUIなどはアプリ並みの見た目を比較的簡単に実装できます。

【3】実はjQueryのモバイル版ではなく、スマホ向けテンプレートユーティリティ「jQuery Mobile」

　モバイル向けに特化した、Webサイトテンプレートユーティリティライブラリです。jQueryという名前が入っているため、jQueryのモバイル版と思われる方も多いですが、実態は、スマートデバイス向けWebサイトのテンプレートセットのような性格が強いものです。HTMLのタグにHTML5で導入されたdata-xxx属性を指定することで、動きのあるUIや、ページ遷移などを実現できます。

jQuery Mobile

　適用のお作法が厳格なため、デザインをカスタマイズするには、比較的手間が掛かります。そのためか、このライブラリで作られたサイトは、どれも同じような見た目になりがちです。

　また、設定によっては、ページ遷移にAjaxを利用した場合に複数ページのDOMをメモリに保持するため、ページ遷移を繰り返すほど動作が重くなる傾向があります。

【4】JavaScriptで作り込める“アプリ”向け「Sencha Touch」

　jQueryとは異なる概念を持ったHTMLアプリ開発ライブラリです。

Sencha Touch

　通常コンテンツはHTMLで書かれますが、Sencha Touchの場合、コンテンツはJavaScriptで作り込んでいきます。そのため、Webサイト向けというより、HTML＋JavaScriptアプリ向けという性格の強いライブラリです。