66 【参考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/lists/docs/ 　このhtml を参考にして、TIWDBGrid をカスタマイズできる。 　ただし、データの量によっては、可変 で変更されるリストビューをhtml で事前 に定義することが難しい。そのため、 TIWDBGrid に関しては、Delphi/400 の プログラムの中で動的にhtml を作成する ことにする。 ●動的なリストビュー 　まず、ClientDataSet のデータ量によっ て、リストビューのhtml ソースを動的に 作成する関数を用意する。【ソース6】 　そして、html 上で{% IWDBGrid1% } と記述している部分を、{% ListView% } へ変更する。これによって、TIWDBGrid を表示せずに、新しくListView の描画が 行えるようになる。このリストビューは、 TIWTemplateProcessorHTML コンポー ネントのUnknownTag イベントで、関 数を呼び出して作成している。【ソース7】 　アプリケーションを実行して、表示ボ タンをタッチしてみよう。すると、デー タの表示がグリッドではなく、リスト ビュー形式で表示される。【図19】 　ここまでで、元の画面部品を全てス マートデバイス向けにカスタマイズする ことができた。 　最後におまけとして、リストビューに 画像表示も組み込んでみよう。 　フィールドの値と一致する画像ファイ ルがWeb サーバに保存されていること が前提とするが、 タグのhtml コードを追加すれば、簡単にリスト ビュー上に画像を組み込むことができ る。【ソース8】これで画像付きの照会 アプリケーションの完成である。【図 20】 4．まとめ 　さて本稿では、Delphi/400 がhtml を組み込めるという機能を着眼点とし て、スマートデバイス向けのWeb アプ リケーション開発方法を説明してきた。 拡張性が高いDelphi/400 ならではのス マートデバイス対応である。 　今回紹介したjQueryMobile をうまく 活用すれば、誰でも容易に高機能なス マートデバイス画面を開発できることを お伝えできただろうか。もちろんhtml を組み込まなくとも、Web アプリケー ションを開発することはできるので、あ くまでスマートデバイスに簡単に対応す るための1 つの手法と考えていただきた い。 　またDelphi/400 では、jQueryMobile に限らず、公開されているさまざまな html やJavaScript の技術を利用するこ とが可能だ。ぜひWeb アプリケーショ ン開発の際には、見栄えのよいスマート デバイス画面にチャレンジしてほしい。 その際、本稿のテクニックが参考になれ ば幸いである。 M