Dojo Mobileベースでアプリが作れるXPagesの基礎知識：XPagesでスマホWebアプリ開発入門（1）（2/2 ページ）

[杉山卓弥，＠IT]

モバイルコントロールの詳細はプロパティで設定

　モバイルアプリの各画面は、Single Page Applicationコントロールに埋め込まれたMobile Pageコントロールで作成します。開発者はMobile Pageコントロールの中に、ヘッダやボタンといった数々の部品を埋め込み、1つの画面を設計していきます。

　図3は、Lotus Domino Designer上でのモバイル画面設計の様子を示しています。

図3　Lotus Domino Designer上でのモバイル画面設計例

　図内の緑丸の部分はコントロール内に別のコントロールを埋め込める領域です。Mobile Pageコントロール内にPage Headingコントロールを配置するなど、必要なコントロールをこの部分にドラッグ＆ドロップで配置し、画面を構成していきます。

　XPagesモバイルコントロールの中でもコンテナの役割を担うコントロール（「Mobile Page」「Page Heading」など）には、必ず埋め込み可能な領域が存在します。この領域を活用することで開発者はあらかじめパッケージングされたコントロールであっても内部の設計をある程度自由に変更できます。

モバイルコントロールの詳細はプロパティで設定

　XPagesモバイルコントロールが提供するさまざまなコントロールを配置することで、モバイルアプリの基本構造を直感的に構築できます。さらに各コントロールに用意されたプロパティを設定することで、コントロールの見栄えや動作を細かく設定できます。

　シングルページアプリケーションの構造を用いて作られたモバイル用XPagesアプリでは、図2で示したように、生成されるHTMLにMobile Pageコントロールによって作られた複数の画面が含まれます。このアプリを開いたときに端末で最初に表示される画面は、図4で示すようにSingle Page Applicationコントロールの「selectedPageName」プロパティで指定します。

図4　シングルページアプリケーションの初期画面の設定

　初期画面の設定の他にもXPagesモバイルコントロールでは下記のような設定ができます。

• 各画面内に配置したコントロールをクリックしたときの画面の遷移先設定
• 画面遷移の際のアニメーション設定
• 遷移先の画面のコンテンツをロードするタイミング設定
• 以前に表示した画面を再表示する際に、コンテンツのリロードをするかどうかの設定
• ボタンに表示するアイコン画像設定

　このように、さまざまな設定項目がコントロールのプロパティとして定義されているため、開発者はソースコードを直接記述することなく、プロパティを設定するだけで、動作の詳細をコントロールできます。

次回からは、スマホWebアプリ開発を実践

　XPagesはJavaScriptやスタイルシートなどのWebの標準技術を利用し、見栄えや操作性の良いWebアプリを効率的に開発できる環境を提供しています。さらに、Lotus Notes/Domino 8.5.3 Upgrade Pack 1でDojo MobileをベースとするXPagesモバイルコントロールを提供するようになりました。

　今回はXPagesモバイルコントロールの概要を紹介しました。XPagesモバイルコントロールを使うことによるモバイルアプリ開発の容易性、モバイル特有の開発手法が分かったと思います。

　次回からは、具体的なアプリの開発を例に、XPagesによるモバイルアプリ開発についてより詳細に紹介していきます。

Profile

杉山 卓弥

日本アイ・ビー・エム システムズ・エンジニアリング株式会社

ISE.コラボレーション＆モバイル ITスペシャリスト

Index

第1回　Dojo Mobileベースでアプリが作れるXPagesの基礎知識

Page1
モバイルアプリも作れる「XPages」とは
Dojo MobileをベースにするXPagesのアプリ開発
モバイル特有の構造「シングルページアプリケーション」

Page2
モバイルコントロールの詳細はプロパティで設定
コントロールの詳細もコードを書かずに設定
次回からは、スマホWebアプリ開発を実践