目次


XPages モバイルコントロールを使ったモバイルアプリケーション開発 (前編)

IBM Lotus Notes/Domino 8.5.3 アップグレード・パック 1 に含まれている XPages モバイルコントロールを利用したモバイルアプリケーションの開発方法を前編と後編の 2 回に分けて紹介します

Comments

IBM Lotus Notes/Domino (以下、Lotus Notes/Domino) アップグレード・パックは、通常の製品のリリースサイクルとは別に、製品に対する新しい機能を提供するための IBM Lotus Notes/Domino の新しいデリバリの仕組みです。初めてのアップグレード・パックとして、Lotus Notes/Domino 8.5.3 アップグレード・パック 1 が 2011年 12月にリリースされました。このアップグレード・パックには OpenNTF.org で公開されている XPages Extension Library の一部などが含まれており、XPages アプリケーション開発で利用できる機能が大幅に増加しました。

XPages モバイルコントロールも、このアップグレード・パック 1 に含まれる新しい開発コンポーネントです。これまでの XPages でのモバイルアプリケーション開発では、Dojo Mobile や jQuery Mobile などの外部ライブラリを独自に組み込んで開発することが一般的でした。しかしアップグレード・パック 1 では、XPages でモバイルアプリケーションを作るための、Dojo Mobile をベースとした XPages モバイルコントロールが提供され、追加の開発フレームワーク無しでモバイルアプリケーションの開発が可能になりました。

本稿では、XPages モバイルコントロールを利用しての、モバイルアプリケーションを開発する方法を前編と後編の 2 回に分けて紹介します。この前編では、XPages モバイルコントロールの概要を解説し、2つのページで画面遷移をする簡単なモバイルアプリケーションの開発手順を紹介します。

XPages モバイルコントロールとは

スマートフォンなどのモバイルデバイス向けの Web アプリケーション開発においては、jQuery Mobile や Sencha Touch、Dojo Mobile などの JavaScript ライブラリが広く利用されています。これらのモバイルアプリケーション開発用ライブラリの多くは、シングルページアプリケーションモデルと呼ばれる手法を採用しています。PC 用の Web アプリケーションと異なり、シングルページアプリケーションモデルのモバイルアプリケーションでは、複数の表示用のページが一つの HTML に含まれるように構成されており、画面遷移はそのページ間の遷移で実現されます (図 1)。

シングルページアプリケーションモデルを用いることで、AJAX 通信のみでページ遷移を実現することができるため、通信量や画面の更新を必要最低限に抑えることが可能となり、画面遷移時のパフォーマンスを向上させることができます。また、画面遷移時にスライドなどのアニメーションを表示することにより、ネイティブアプリケーションに近いユーザーエクスペリエンスを実現することも可能となります。

図 1. シングルページアプリケーションモデルと画面遷移
シングルページアプリケーションモデルと画面遷移
シングルページアプリケーションモデルと画面遷移

XPages モバイルコントロールでもこの仕組みを採用しています。XPages モバイルコントロールを使用して作成するアプリケーションは Single Page Application コントロールの中に含まれる複数の Mobile Page コントロールから構成されます。そしてこの Mobile Page コントロールのひとつひとつが端末に表示される画面を構成します。

Lotus Notes/Domino 8.5.3 アップグレード・パック 1 では、XPages モバイルコントロールとして、以下の 8つのコントロールを提供しています (表 1)。図 2はこれらのコントロールの表示例です。

表 1. XPages モバイルコントロールの種類
コントロールの名称XPages ソース内でのタグコントロールの説明
シングルページアプリケーション
(Single Page Application)
<xe:singlePageApp>XPages モバイルアプリケーションのルートとなるコンテナコントロールです。このコントロール内にモバイルページコントロールをひとつ、または複数配置してアプリケーションを構成します。
モバイルページ
(Mobile Page)
<xe:appPage>XPages モバイルアプリケーションでデバイスに表示されるひとつのページを構成するコントロールです。この中に画面を構成するコントロールを配置します。
ページヘッダー
(Page Heading)
<xe:djxmHeading>モバイルページにヘッダーを追加するためのコントロールです。ページ遷移をおこなう基本的なナビゲーションをプロパティで設定できます。タブバーコントロールを配置して利用することもできます。
角丸リスト
(Rounded List)
<xe:djxmRoundRectList>角丸の表示用の枠を表示するコントロールです。この中に行表示項目(Static Line Item)などの他のコントロールを含めることもできます。
行表示項目
(Static Line Item)
<xe:djxmLineItem>リストの行項目を表示するコントロールです。他のページへの遷移設定を設定することもできます。
スイッチ
(Mobile Switch)
<xe:djxmSwitch>チェックボックスのようにオン・オフを設定できるスイッチの機能を提供するコントロールです。
タブバー
(Tab Bar)
<xe:tabBar>モバイルページ上にバナーのように表示されるコントロールです。タブバーボタンコントロールのコンテナコントロールとして主に使用されます。
タブバーボタン
(Tab Bar Button)
<xe:tabBarButton> モバイルアプリケーション向けにスタイル設定されているタブ切り替えのためのボタンコントロールです。

※ ここで示しているモバイルコントロールの日本語名称は仮称です。将来の製品リリースで変更される可能性があります。

図 2. XPages モバイルコントロールの構成と表示例
XPages モバイルコントロールの構成と表示例
XPages モバイルコントロールの構成と表示例

開発するアプリケーションの概要

本稿では簡単な Lotus Notes アプリケーションを元に XPages モバイルアプリケーションを作成する方法を紹介します。

ベースとなる Lotus Notes アプリケーションはフォームとビューを 1つずつ持つ単純な設計になっています。このアプリケーションをモバイル化することで、以下のような 3つのモバイルページから構成されるモバイルアプリケーションを作成します。

  • ホームページ: モバイルアプリケーションで最初に表示され、ビューを選択するページ
  • ビューページ: ビューの文書一覧を表示するページ
  • 文書ページ: 文書一覧で選択された文書の内容を表示するページ
図 3. 本記事で開発するモバイルアプリケーション
本記事で開発するモバイルアプリケーション
本記事で開発するモバイルアプリケーション

ベースとなる Lotus Notes アプリケーションには「Memo」フォームと「All Memos」ビューが作成されています。

「Memo」フォームは表 2 のような 5つのフィールドを持ちます。

表 2. 「Memo」フォームの設計
フィールド名設定
Subject種類: テキスト、編集可能
From種類: テキスト、作成時の計算結果、非表示
フィールドの値: @UserName
DisplayFrom種類: テキスト、表示用の計算結果
フィールドの値: @Name([CN];From)
Category種類: ダイアログリスト、編集可能
選択: 式で選択肢を設定
フィールドの値: @Unique(@DbColumn("":"nocache"; ""; "By Category"; 1))
Body種類: リッチテキスト、編集可能
図 4. 「Memo」フォームのイメージ
「Memo」フォームのイメージ
「Memo」フォームのイメージ

「All Memos」ビューは、「Memo」フォームで作成された文書の一覧を表示するビューで、表 3 のような列を持ちます。

表 3. 「All Memos」ビューの設計
列名設定
Subjectソート: 昇順
列の値; Subject
Author列の値; @Name([CN];From)
Created列の値: @Date(@Created)
図 5. 「All Memos」ビューのイメージ
「All Memos」ビューのイメージ
「All Memos」ビューのイメージ

XPages モバイルコントロールを利用するための準備

XPages モバイルコントロールを使用してモバイルアプリケーションの開発を行うために、Lotus Domino Designer にアップグレード・パック 1 を導入します。また XPages モバイルアプリケーションを実行する Lotus Domino にもアップグレード・パック 1 を導入します。

また、モバルアプリケーションを作成する Lotus Notes アプリケーション (NSF ファイル) には、以下の準備を行う必要があります。

  • XPages Extension Library の有効化
  • モバイルアプリケーション用 XPage 名のプリフィックスの設定

XPages Extension Library の有効化

Lotus Notes アプリケーションで XPages Extension Library を有効にします。

Lotus Domino Designer で Lotus Notes アプリケーション (NSF ファイル) を開き、「アプリケーション」ビューに表示されている「アプリケーションのプロパティ」を開きます。そして、「詳細」タブの「XPage ライブラリ」セクションにリストされている「com.ibm.xsp.extlib.library」を選択します (図 6)。

設定後、アプリケーションのプロパティを保存して閉じます。

図 6. アプリケーションプロパティで XPages Extension Library を有効にする
アプリケーションプロパティで XPages Extension Library を有効にする
アプリケーションプロパティで XPages Extension Library を有効にする

モバイルアプリケーション用 XPage 名のプリフィックスの設定

XPages モバイルコントロールを使用する XPage の命名規則を指定します。

Lotus Domino Designer のメニューから 「ウィンドウ」→「Eclipse ビューの表示」→「パッケージ・エクスプローラー」を選択します。表示された「パッケージ・エクスプローラー」ビューの「WebContent\WEB-INF」フォルダ内にある「xsp.properties」を開きます。そして「Source」タブを選択してリスト 1 のようにモバイル用 XPage 名のプリフィックス設定を追加します (図 7)。ここで設定したプリフィックスをつけた XPage に対して、モバイル用スタイルが適用されたページが表示されます。

修正した「xsp.properties」を保存して閉じます。

リスト 1. モバイル用 XPage 名のプリフィックス設定
xsp.theme.mobile.pagePrefix=m_
図 7. XPages プロパティで、モバイルコントロールを使用する XPage のプリフィックスを設定する
XPages プロパティで、モバイルコントロールを使用する XPage のプリフィックスを設定する
XPages プロパティで、モバイルコントロールを使用する XPage のプリフィックスを設定する

モバイルアプリケーションの開発

それでは、XPages モバイルコントロールを用いたサンプルアプリケーションの開発をしていきましょう。

すでに述べたように、今回作成する 3つの画面のページはひとつの Single Page Application コントロールに含まれる 3つの Mobile Page コントロールとして実装します。つまり、アプリケーションのすべてページがひとつの XPage 内に作成されます。

XPage の作成と Single Page Application コントロールの配置

最初に、モバイルアプリケーション用の XPage を新規に作成します。

アプリケーションナビゲータで、「XPage」を選択し、中央のエディタペインで「新規 XPage」ボタンを選択します。図 8 のようなダイアログボックスが表示されるので、XPage 名として「m_MobileApp」を指定します。この名前は先ほど xsp.properties に指定したプリフィックスを使用しています。

図 8. 新規 XPage の作成
新規 XPage の作成
新規 XPage の作成

次に、作成した XPage に「Mobile」セクションから Single Page Application コントロールを配置します (図 9)。

図 9. Single Page Application コントロールを配置する
Single Page Application コントロールを配置する
Single Page Application コントロールを配置する

配置した Single Page Application コントロールを選択し、プロパティペインの「Single Page Application」タブで名前を「mobileApp」に設定します (図 10)。

図 10. Single Page Application の名前を設定
Single Page Application の名前を設定
Single Page Application の名前を設定

ホームページを作成する

XPages モバイルアプリケーションで最初に表示されるホームページを作成します。

配置した Single Page Application コントロールの中に、コントロールパレットの「Mobile」セクションから Mobile Page コントロールを配置します (図 11、図 12)。

図 11. Mobile Page コントロールの配置
Mobile Page コントロールの配置
Mobile Page コントロールの配置
図 12. Single Page Application に配置された Mobile Page コントロール
Single Page Application に配置された Mobile Page コントロール
Single Page Application に配置された Mobile Page コントロール

配置した Mobile Page コントロールを選択し、「Mobile Page」タブで名前を「homePage」に設定します (図 13)。

図 13. Mobile Page コントロールの名前
Mobile Page コントロールの名前
Mobile Page コントロールの名前

「homePage」コントロールの「すべてのプロパティ」タブで以下のプロパティの設定をします (図 14)。

「基本」セクション

  • pageName: homePageName
  • resetContent: false
図 14. 「homePage」コントロールのプロパティ設定
「homePage」コントロールのプロパティ設定
「homePage」コントロールのプロパティ設定

ここで「pageName」プロパティに指定している文字列が、画面遷移などでこのページを参照する際に使用されます。また、「resetContent」プロパティは、このページが表示されるときに表示内容をリセットして再構成をするかどうかを設定しています。ここで作成している「homePage」はビューを選択するだけの固定的なページです。そのためページの内容をリセットする必要がないので「resetContent」を false にしています。

「homePage」コントロールの内側に、「Mobile」セクションから Page Heading コントロールを配置します。Page Header コントロールの名前には「homeHeading」と設定します (図 15)。

図 15. ホームページへの Page Heading の配置
ホームページへの Page Heading の配置
ホームページへの Page Heading の配置

配置した「homeHeading」」コントロールの「すべてのプロパティ」タブで以下のプロパティ設定をします。

「基本」セクション

  • label: Mobile Discussion
図 16. ホームページのヘッダーのラベル設定
ホームページのヘッダーのラベル設定
ホームページのヘッダーのラベル設定

「homeHeading」コントロールと同じ階層に「Mobile」セクションから Static Line Item コントロールを配置します (図 17、図 18)。

図 17. Static Line Item コントロールの配置
Static Line Item コントロールの配置
Static Line Item コントロールの配置
図 18. ホームページに配置された Static Line Item コントロール
ホームページに配置された Static Line Item コントロール
ホームページに配置された Static Line Item コントロール

配置した Static Line Item コントロールで「Static line Item」タブを選択して名前に「homeLineItem」と指定します (図 19)。

図 19. Static Line Item の名前設定
Static Line Item の名前設定
Static Line Item の名前設定

配置した「homeLineItem」コントロールの「すべてのプロパティ」タブで以下のプロパティ設定をします (図 20)。

「基本」セクション

  • label: すべての文書
図 20. Static Line Item の表示文字列の設定
Static Line Item の表示文字列の設定
Static Line Item の表示文字列の設定

これでホームページを表示する「homePage」コントロールができました。しかし、このページを表示するためにはもうひとつ作業が必要です。最初に作成した Single Page Application コントロールを選択し、「すべてのプロパティ」で以下のプロパティを設定します (図 21)。

「基本」セクション

  • selectedPageName: homePageName

これによって、最初にこのモバイルアプリケーションが開かれたときに、「homePage」ページが開かれるようになります。

図 21. アプリケーションで最初に開くページの設定
アプリケーションで最初に開くページの設定
アプリケーションで最初に開くページの設定

「m_MobileApp」XPage を保存し、インターネットエクスプローラーや Firefox などの Web ブラウザでプレビューすると以下のようにモバイルアプリケーションの画面が表示されます。モバイルコントロールではブラウザが送信する User-Agent 情報で表示する画面のスタイルを切り替えます。デフォルトの設定では Android アプリケーション用のスタイルを表示するため、ここでは黒を基調とした Android アプリケーションのスタイルが表示されています。

図 22. Firefox からプレビューした XPages モバイルアプリケーション
Firefox からプレビューした XPages モバイルアプリケーション
Firefox からプレビューした XPages モバイルアプリケーション

iPhone の User-Agent をエミュレートできる Safari のようなブラウザを用いた場合には、以下のような水色を基調とした iPhone 用のスタイルが表示されます (図 23)。

図 23. iPhone エミュレータからプレビューしたモバイルアプリケーション
iPhone エミュレータからプレビューしたモバイルアプリケーション

ビューページを作成する

次に、文書の一覧を表示するページを作成します。なお、本稿の前編ではページのみを作成し、ホームページからの画面遷移ができるところまでを開発します。このページで「All Memos」ビュー内容を表示させる実装は本稿の後編で説明します。

最初に作成したホームページと同じ階層に、「Mobile」セクションから Mobile Page コントロールを追加します。配置した Mobile Page コントロールを選択し「Mobile Page」タブで名前を「viewPage」と設定します (図 24、図 25、図 26)。

図 24. ビューページとなる Mobile Page コントロールの配置
ビューページとなる Mobile Page コントロールの配置
ビューページとなる Mobile Page コントロールの配置
図 25. Mobile Page コントロールの名前の設定
Mobile Page コントロールの名前の設定
Mobile Page コントロールの名前の設定
図 26. 配置された 2つの Mobile Page コントロール
配置された 2つの Mobile Page コントロール
配置された 2つの Mobile Page コントロール

さらに「すべてのプロパティ」タブで以下のプロパティ設定をします (図 27)。

「基本」セクション

  • pageName: viewPageName
  • preload: true
図 27. ビューページのプロパティ設定
ビューページのプロパティ設定
ビューページのプロパティ設定

ここで指定している「preload」は、この XPage から HTML が生成されるときにこのページが表示されなくてもページの内容を生成するかどうかを指定します。「preload」に「true」が指定されることで「m_MobileApp」XPage から生成される HTML が Web ブラウザに送信され「homePage」が表示される際に、「viewPage」の内容も Web ブラウザに送られます。これは Web ブラウザでソースを表示することで確認できます。

また「resetContent」は特に設定していないのでデフォルトの「false」が適用されています。今回開発しているアプリケーションではビューに表示される文書の一覧は頻繁に変わる内容ではないと想定し、「viewPage」に表示するたびにページの内容をリセットしないようにしています。

続いてビューページに表示する内容を作成します。「viewPage」コントロールの中に、「Mobile」セクションから Page Heading コントロールを追加します。Page Header コントロールの名前には「viewHeading」と指定します。

配置した「viewHeading」」コントロールの「すべてのプロパティ」タブで以下のプロパティ設定をします (図 28)。

「基本」セクション

  • label: Mobile Discussion
  • back: 戻る
  • moveTo: homePageName
図 28. ビューページのヘッダーのプロパティ設定
ビューページのヘッダーのプロパティ設定
ビューページのヘッダーのプロパティ設定

ここで指定している「back」と「moveTo」プロパティを設定することで、ビューページからホームページへ戻るボタンがヘッダーに表示されます。「back」プロパティの値がボタンに表示されるラベルで、「moveTo」プロパティの値がクリックされたときに戻るページです。

ここまででビューページの大枠ができたので、先ほど作成したホームページから遷移できるように設定します。

「homePage」コントロール内の「homeLineItem」コントロールを選択します。そして「すべてのプロパティ」タブで以下のプロパティ設定をします (図 29)。

「基本」セクション

  • moveTo: viewPageName
図 29. ホームページからビューページへの遷移の設定
ホームページからビューページへの遷移の設定
ホームページからビューページへの遷移の設定

「m_MobileApp」XPage を保存し、ブラウザやエミュレータからプレビューします。

ここまでの実装で最初に表示されるホームページの「すべての文書」の表示の右側に矢印が表示されるようになりました。そして「すべての文書」をクリックしてビューページに遷移できるようになっています。またビューページのヘッダーにある「戻る」ボタンでホームページに戻ることができます (図 30)。

図 30. ホームページとビューページ間の遷移ができるようになった
ホームページとビューページ間の遷移ができるようになった
ホームページとビューページ間の遷移ができるようになった

まとめ

IBM Lotus Notes/Domino 8.5.3 アップグレード・パック 1 で提供される XPages モバイルコントロールを使用することで、XPages でモバイルアプリケーションを簡単に作ることができるようになりました。作り方は、XPages モバイルコントロールを配置し、プロパティに値を設定していくだけです。この前編では、XPages モバイルコントロールの仕組みを説明し、2つのページからなる簡単なモバイルアプリケーションを開発するところまでご紹介しました。

後編では、このモバイルアプリケーションを拡張し、Lotus Notes アプリケーションのビューや文書のデータを表示する方法を紹介します。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Lotus
ArticleID=813630
ArticleTitle=XPages モバイルコントロールを使ったモバイルアプリケーション開発 (前編)
publish-date=05172012