64 　jQueryMobile はスマートフォンやタブ レットで使用するWeb アプリケーション 用にユーザーインターフェースの画面デ ザインや部品を提供してくれるフレーム ワークである。jQueryMobile のオリジナ ルは海外サイトで公開されている。もち ろん、日本語に訳されたリファレンスの サイトもあるので安心していただきたい。 【図9】 【jQueryMobile】 http://jquerymobile.com 【jQuery Mobile 1.1.0 日本語リファレン ス】 http://dev.screw-axis.com/doc/jquery_ mobile/ 　使い方は非常に簡単で、公開されてい るhtml ソースを組み込むだけで利用する こともできる。実は、Delphi/400 の「VCL for the Web」にはhtml を組み込む機 能が用意されているので、この jQueryMobile をそのまま利用することが できるのである。 3-2. htmlの組み込み機能 　早速jQueryMobile をDelphi/400 で利 用するために、html を組み込む方法を説 明しよう。 　まず、使用するのはTIWTemplate ProcessorHTML コンポーネントである。 このコンポーネントは、html を指定して、 画面デザインを置き換えることができる。 コンポーネントの使い方は次のとおりで ある。 �@ Web アプリケーションを配置するフォ ルダ内にtemplates というフォルダを新 規作成して、利用したい画面html を保存 する。注意点としては、html ファイルの 文字コードは必ずUTF-8 で保存する必要 がある。【図10】 �A TIWTemplateProcessorHTML コン ポーネントのTemplates プロパティの Default に、�@で保存した画面html 名を 設定する。【図11】 �B Web アプリケーションの画面フォーム にLayoutMgr プロパティがあるので、そ こにTIWTemplateProcessorHTML コン ポーネントを設定する。【図12】 　これだけの簡単な作業で、Delphi/400 アプリケーションの画面にhtml を利用す ることができるようになる。 3-3. 画面レイアウトの作成 　それでは、jQueryMobile を利用して画 面デザインを作成してみよう。 jQueryMobile のサイト上に「単一ページ テンプレート」が用意されているので、 これを利用する。 　まず、コピーしたhtmlをtemplatesフォ ルダに保存する。【ソース2】 【参考URL】 http://dev.screw-axis.com/doc/jquery_ m o b i l e / # / d o c / j q u e r y _ m o b i l e / components/pages_dialogs/single_ page_template/ 　続いて、TIWTemplateProcessorHTML コンポーネントにhtml を設定して、実際 にアプリケーションを実行してみよう。 実行すると、今まで作成していた画面（図 7）とは、全く異なるhtml が表示される ことが確認できるだろう。【図13】 　ところで、html をうまく組み込むこと ができたが、画面はjQueryMobile サイ トからコピーしたテンプレートの内容の ままだ。そこで、html のページタイトル、 コンテンツ、フッターを書き換えてみよ う。【ソース3】 　再度実行してアプリケーション画面を 確認すると、書き換えたhtml が反映され ている。【図14】 　ちなみに、html はDelphi/400 の開発 環境で開くこともできる。つまり、 Delphi/400 ソースと同じように、html を 編集することができる。【図15】 　以上で、スマートデバイスらしい画面 デザインを取り込むことができた。さら に見た目だけでなく実は、この画面はス マートデバイスの端末の形態にあわせて、 画面を自動調整してくれるのである。もち ろん縦、横の画面回転にも対応している。 3-4. コンポーネントとhtmlの連携 　html で、スマートデバイス用の画面デ ザインを適用することができた。ただし、 今の状態では、Delphi/400 で作成したコ ンポーネントが表示されていない。ここ からは、コンポーネントをhtml と連携さ せる方法を説明していく。 　連携させる方法は簡単である。html に、 コンポーネントの名前を次のように追記 すればよい。 {%コンポーネント名% } 　では、実際に、html のコンテンツ部分 にコンポーネント名を組み込んでみよう。 　コンパイルして実行すると、html の画 面の中にコンポーネントが組み込まれ、 表示されていることが確認できる。つま り、画面だけhtml で表示して、裏では Delphi/400 のプログラムがそのまま動作 しているという仕組みである。【ソース4】 【図16】【図17】 3-5. ラジオグループのカスタマイズ 　さて、コンポーネントが表示されたの で、ここからはコンポーネントの見た目 についても、jQueryMobile を活用してカ スタマイズしていく。 　まずTIWRadioGroup については、 jQueryMobile のサイト上にラジオボタン のサンプルが用意されている。このソー スをコピーして、部品の名前を TIWRadioGroup のコンポーネント名 （Name プロパティ値）に変更し、html を書き換えよう。【ソース5】 【参考URL】 http://dev.screw-axis.com/doc/jquery_ m o b i l e / # / d o c / j q u e r y _ m o b i l e / components/forms/radiobuttons/ 　アプリケーションを実行して画面を表 示すると、ラジオグループがカスタマイ ズされていることが確認できる。【図18】 3-6. グリッドのカスタマイズ 　次に、データを表示しているグリッド をカスタマイズする。グリッドについて は、jQueryMobile のサイト上にリスト ビューとしてサンプルが用意されている。