JavaScriptのスマホ対応時に知らないと損する16のコト：スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）（2/3 ページ）
スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、スマホ向けサイトにおけるJavaScriptの4つの主な役割、実装上の3つの注意点、よく使われるOSSライブラリ4選、OS／機種依存事例5選などを紹介します
よく使われるOSSライブラリ4選
実際のスマートフォン向けWebサイト構築では、OSSライブラリなどを使用して、JavaScript実装を行っている場合もあるかと思います。よく使われるJavaScriptライブラリについて、その特徴をまとめてみました。
【1】いわずと知れた「jQuery」
いわずと知れた超有名ライブラリです。CSSセレクタ風にコンテンツ上の要素を選択し、スタイル・イベント・属性の操作をする、Ajaxリクエストを処理する、JSONやXMLをパースする、JavaScriptコアAPIのユーティリティメソッドの提供など、幅広い機能を持ったライブラリです。
このライブラリ自体はスマートデバイス向けではありませんが、スマートフォン向けWebサイト構築に置いて、コンテンツに対してオリジナルのインタラクションの作りこみを行いたい場合には非常に便利に使えます。
また、jQueryには、プラグイン機構があり、たくさんのサードパーティプラグインがあります。Webサイトにさまざまな機能・UI・インタラクションの追加が可能です。
【2】UIに特化した「jQuery UI」
Webサイトで使えるUIに特化したライブラリです。ウィジェット、エフェクト、インタラクションと区分けされており、特徴的なUIを提供しています。
もともとPC向けに作成されたライブラリなので、タッチUIに向かないものもありますが、フォーム系のUIなどはアプリ並みの見た目を比較的簡単に実装できます。
【3】実はjQueryのモバイル版ではなく、スマホ向けテンプレートユーティリティ「jQuery Mobile」
モバイル向けに特化した、Webサイトテンプレートユーティリティライブラリです。jQueryという名前が入っているため、jQueryのモバイル版と思われる方も多いですが、実態は、スマートデバイス向けWebサイトのテンプレートセットのような性格が強いものです。HTMLのタグにHTML5で導入されたdata-xxx属性を指定することで、動きのあるUIや、ページ遷移などを実現できます。
適用のお作法が厳格なため、デザインをカスタマイズするには、比較的手間が掛かります。そのためか、このライブラリで作られたサイトは、どれも同じような見た目になりがちです。
また、設定によっては、ページ遷移にAjaxを利用した場合に複数ページのDOMをメモリに保持するため、ページ遷移を繰り返すほど動作が重くなる傾向があります。
【4】JavaScriptで作り込める“アプリ”向け「Sencha Touch」
jQueryとは異なる概念を持ったHTMLアプリ開発ライブラリです。
通常コンテンツはHTMLで書かれますが、Sencha Touchの場合、コンテンツはJavaScriptで作り込んでいきます。そのため、Webサイト向けというより、HTML＋JavaScriptアプリ向けという性格の強いライブラリです。
Copyright © ITmedia, Inc. All Rights Reserved.