jQuery Mobileを拡張する「Wijmo（ウィジモ）」モバイル対応機能

jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用 第5回

　本連載では、グレープシティが提供するJavaScriptライブラリWijmo（ウィジモ）について、サンプルとともに利用例を紹介します。これまでの連載では主にPC向けWebページでの利用法を説明してきましたが、今回はjQuery Mobileと組み合わせたモバイル向けWebページでの利用法について紹介していきます。

はじめに

　Wijmo（ウィジモ）は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリです。WijmoはjQueryやjQuery UI、jQuery Mobileをベースに、WebサイトやWebアプリケーションで活用できる高機能で多様なウィジェット（UI部品）を利用者に提供します。

　WijmoのウィジェットはPC環境（jQuery UI）との組み合わせで動作しますが、Wijmoのウィジェットのうちアダプティブウィジェットと呼ばれるものは、PC環境のほかモバイル環境（jQuery Mobile）でも動作させることができます。

　またWijmoには、jQuery Mobile専用の以下のウィジェットが用意されています。

• AppView：左側がメニュー、右側がコンテンツページとなるコンテナUI
• ListView：リストを表示するウィジェット（jQuery MobileのListViewを継承）

　そこで今回はjQuery Mobileを用いたWijmoのモバイル対応機能について紹介します。

対象読者

• WebサイトやWebアプリケーションのレベルをワンランク上げたい方
• 短納期で高度なWebサイトの作成を求められている方
• Webサイト作成において充実したサポートを求める方
• jQuery Mobileの活用で他に差を付けたい方

必要な環境

　モバイル環境でWijmoを利用するにはjQueryとjQuery Mobileの参照が必須です。現行のWijmoではjQuery 1.9.1とjQuery Mobile 1.4.0がバージョン指定されています。サポートするブラウザはjQueryおよびjQuery Mobileに準拠し、例えばiOSであればiOS 4以降、AndroidであればAndroid 2.1以降です。

　今回は以下の環境で動作を確認しています。

iOS 7.1.2

• iPhone 5 32GB SoftBank版
• Safari

Android 4.4.4

• Nexus 5 16GB
• Google Chrome 36.0.1985.131

　また後述するAppViewについては、タブレットでの表示を確認するため、以下環境を使用しています。

iOS 7.1.2

• iPad 3rd Generation 16GB Wi-Fi
• Safari