連載
» 2013年01月16日 18時00分 公開

スマホ向けサイト制作で泣かないための秘伝ノウハウ(3):JavaScriptのスマホ対応時に知らないと損する16のコト (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アプリ向けという性格の強いライブラリです。

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。