jQuery MobileとCodiqa

jQuery Mobileは、スマートフォン向けのWebアプリケーションを作成するためのUIフレームワーク。iPhoneやAndroidをはじめ、様々なモバイルデバイスに対応している。HTMLに簡単な記述を追加するだけで、ネイティブアプリケーションのようなリッチなユーザインタフェースを作成できるのが特徴だ。

図1 : CodiqaのWebサイト

Codiqaは、このjQuery Mobileを使用したWebアプリケーションのデザインを、Webブラウザ上でWYSIWYG編集可能なサービスを提供している。アカウントを作成することで無償で利用可能で、有償のプレミアムアカウントにアップグレードすると作成したアプリケーションの保存や共有、画像のアップロードなどが可能になる (プロジェクト数などに応じて$10/月と$30/月のプランが用意されている)。

Codiqaを試してみよう

Codiqaを利用するには無償のユーザ登録を行う必要がある。登録には名前、メールアドレス、パスワードが必要になる。

図2 : 初回利用時にはユーザ登録が必要

Codiqaにログインすると、以下のような画面が表示される。一般的なWYSIWYGベースのGUIビルダと同様、パレットからコンポーネントをドラッグ&ドロップで配置することができる。配置したコンポーネントのプロパティはフローティングウィンドウで設定できる。配置したコンポーネントの選択にやや引っかかりを感じることはあるものの、基本的に動作はスムーズで、快適に編集作業を行うことができる。

図3 : 初期画面

図4 : プロパティの設定

ページは複数追加することも可能で、ページを切り替えながら編集できる。ボタンやリストビューなどクリック時の遷移先を指定することができる。

画面上部に配置されたツールバーからは、デザインモードとプレビューモードを切り替えられ、プレビューモードでは作成したUIの動作を確認することができる。また、ディスプレイの解像度や向きを変更することもでき、様々なデバイスでどのように見えるかを確認する際に便利だ。

図5 : 解像度を選択

また、作成したHTMLはzipファイルにまとめてダウンロード可能となっている。CodiqaではUIのデザインしか行うことができないため、実際には作成したHTMLをダウンロードして手を加えていくことになるだろう。また、ダウンロードしたHTMLは、Web上のJavaScriptやCSSを参照するようになっているため、デモなどの際にオフラインで利用する場合にも少々手を加える必要がある。

なお、作成したアプリケーションはブラウザを閉じると失われてしまうが、前述の通り有償のプレミアカウントにアップグレードすることで、Codiqa上に保存しておくことができるようになる。現在は有償の機能を30日間無償で利用できるようになっているようなので、本格的に利用するのであればアップグレードを検討するといいだろう。

Codiqaの使いどころ

CodiqaはいわゆるGUIビルダであり、jQuery Mobileで用意されているコンポーネントの配置しかできない。そのため、これだけでスマートフォン向けのWebアプリケーション開発が可能な統合開発環境というわけではない。現時点ではあくまでjQuery Mobileの利用をサポートするためのツールという位置付けだ。

ただし、デモなどの用途のためにjQuery Mobileを使用したモックアップを作成したりするのには適している。単純なHTML間の遷移であればCodiqa上で設定できるので、Codiqaを使用することで画面遷移まで含めたデモを、時間をかけずに作成することができるだろう。機能もシンプルなので使い方に迷うこともないはずだ。

また、jQuery Mobileの初心者がjQuery Mobileでどのようなことができるのかを試したり、jQuery Mobileを使用したHTMLの記述がどのようになるのかを掴みたいという場合にも便利だろう。

まとめ

jQuery Mobileはスマートフォン対応のUIフレームワークの中でもその扱いやすさから多くの注目を集めている。jQuery Mobileを使用することで複雑なプログラミングを行わずにスマートフォン向けのリッチなUIを構築することが可能だが、Codiqaはその敷居をさらに下げてくれるツールといえるだろう。