NotesワークフローアプリケーションをXPagesでモバイル化するチュートリアル: 前編

本稿では、9.0.1の環境で、シンプルなNotesワークフローアプリケーションを、XPagesでモバイルアプリケーションにする開発方法を2回にわけて解説します。カテゴリ別のビューや編集用のフォーム、アクションなどを実装します。

はじめに

当記事では、シンプルなNotesワークフローアプリケーションを、XPagesを使用してモバイル端末(iOS,Android,Blackberry)から利用できるようにするためのチュートリアルを掲載しています。

IBM Notes/Domino 8.5.3 のUpgrade Pack 1 から拡張ライブラリ (XPages Extension Library) のコントロール(ドラッグ&ドロップで機能を追加できるパーツ)群が約80種類ほど追加されました。この拡張ライブラリに、モバイル開発を容易にするコントロール群が含まれています。そして、9.0からこの拡張ライブラリがすべて日本語に対応し、より開発が行いやすくなりました。IBM Domino Designer(以下、Designer)上の拡張ライブラリのUIが日本語に対応し、日本語のヘルプも追加されています。

モバイルでは、画面サイズが小さく、操作方法も異なるため、PCブラウザと同じようにすべてのコントロールが使えるわけではありません。当記事では、よく使用される10種類ほどの拡張ライブラリのコントロールを使って開発します。これらの使い方を理解することで、クイックにモバイルアプリケーションを開発できるようになります。

当記事は前編と後編の2回にわけて掲載しています。チュートリアルは、環境の準備にかかる時間を除き、それぞれ2時間ほどで実施できます。また、当記事IBM Notes/Domino 9.0.1を前提に記述しています。使用されている用語などは、将来のリリースで変更される可能性があります。


1.XPagesモバイルコントロールの概要

モバイル向けのWebアプリケーションは、ネイティブアプリ(モバイルデバイスのOSに対応した言語で開発されたアプリ)に近い操作性を実現するため、シングルページアプリケーションモデルという手法が多く採用されています。複数のページを1つのHTMLに含まれるように構成し、画面遷移は、そのページ間の移動で実現します。データの取得はAJAX通信で行い、通信量や画面の更新を必要最低限に抑えています。XPagesのモバイル開発で使用するコントロールも、このシングルアプリケーションモデルを採用しています。詳細は、参考文献にある「XPages モバイルコントロールを使ったモバイルアプリケーション開発」の「XPages モバイルコントロールとは」をご参照ください。


2.当記事で開発するアプリケーション

休暇申請を行うシンプルなNotesアプリケーションのモバイル画面を開発します。休暇申請の一覧を表示するカテゴリ別のビューが1つあり、ユーザーは「新規申請」アクションから申請書を起票し、自分のマネージャー、休暇期間、休暇日数を入力して承認依頼を行います。本稿では、この一連の操作をモバイル化する手順を紹介します。

紹介するアプリケーションは、本稿の巻末にあるダウンロード用リンクから、ダウンロードできます。実行方法の詳細は、次のセクションで説明します。

主な画面イメージを下記に紹介します。

 
 
 
 

3.チュートリアル実施環境の準備

3-1.開発環境

IBM Notes/Domino 9.0.1以降を前提としています。Desingerのみでも演習可能です。Designerは下記のサイトから無償でダウンロードできます。サイトは英語ですが、 日本語版のDesignerをダウンロードできます。

3-2.サンプルアプリケーションの入手

開発の元となるサンプルアプリケーション(kyuka.nsf)は、本稿の巻末にあるダウンロード用リンクから、ダウンロードできます。Dominoサーバー上またはDesignerのデータディレクトリに配置してください。

3-3.アプリケーション実行のための準備

サーバー上で実行する場合

XPagesを実行する権限のあるユーザーで、サンプルアプリケーションを署名します。ヘルプの「サーバー上で実行されるエージェントと XPage を制御する」を参照してください。

サーバー上でHTTPタスクを有効にし、ブラウザから下記のURLにアクセスすると、当チュートリアルの完成後のイメージにアクセスすることができます。

http://(サーバーのホスト名)/(サンプルアプリケーションのファイルパス)/ m_workflow_comp.xsp

Designer上で実行する場合

使用しているIDで、サンプルアプリケーションを署名します。Designerから署名する場合、少なくともXPage・カスタムコントロール・スクリプトライブラリを署名する必要があります。

次に、Designerクライアントで実行する場合には、アプリケーションのACLを編集する必要があります。まず「Anonymous」に「編集者」の権限を割り当てます。また、開発するアプリの一部の機能で、クライアント上のnames.nsf(個人アドレス帳)を、Dominoディレクトリに見立てて使用します。そのため、names.nsfのACLにAnonymousエントリを追加し、読者権限を割り当てます。また、動作確認用に、names.nsfに、連絡先名(FullName)が「Anonymous」というユーザーと、省略名のユーザー(例 Godai Aoki/ise)をあらかじめ登録しておきます。

上記を実施いただいた後、Designerでサンプルアプリケーションを開きます。設計要素の「XPage」から「m_workflow_comp.xsp」を開き、「Webブラウザでプリビュー」を行うと、当チュートリアルの完成後のイメージにアクセスすることができます。

3-4.モバイルアプリケーションの動作確認

開発するモバイル画面は、PCのブラウザからもある程度動作を確認することができます。ただし、モバイル独自の入力方法は再現できず、ポップアップなどの表示イメージは異なります。Android SDKのAVD(Andorid Virtual Device)というエミュレーター(無償)やiOSシミュレーター(MacにXCODEのインストールが必要、XCODEは無償)を使うと、より実機に近い画面が確認できます。また、AndroidまたはiOSの実機があれば、実機のブラウザからDominoサーバーへアクセスして動作確認することもできます。

当記事のモバイルアプリケーションはiOSシミュレーター(iOS7)とSafari(5.1.7)で動作確認をしています。以下、主にiOSシミュレーターで確認した画面で説明していきます。

3-5.デバッグの準備

XPages標準のデバッグ機能

XPagesでは、通常デバッグ用に設計要素の「アプリケーション構成」-「Xspプロパティ」の「XPage実行時エラーページを表示」を有効にします(下図)。サンプルアプリケーションでは最初から有効にしています。

 

コンソールへの出力

XPagesの実行時にサーバーサイドでエラーが発生した場合、Dominoサーバーのコンソールにメッセージが出力されます。Desinger上でアプリケーションを実行する場合、Notes.iniに「Debug_Console=1」を設定してからDesignerを起動することで、「Notes Debug Window」が同時に起動するようになります。このウィンドウからコンソールへの出力を確認できます。当チュートリアルの実施にあたり、必須ではありません。

クライアントサイドJavaScriptのデバッグ

ブラウザからサンプルアプリケーションをデバッグする場合、各ブラウザの標準、またはアドオンで提供されている開発者ツールを利用します。iOSシミュレーターから参照する場合、Safariの標準のリモートデバッグ機能が利用できます。AndroidエミュレーターやAndroidの実機から参照する場合、Chrome拡張機能の「ADB」(リモートデバッグ機能を提供)を利用することでデバッグが可能になります。当チュートリアルの実施にあたり、必須ではありません。

サーバーサイドJavascriptのデバッグ

9.0からサーバーサイドJavaScriptのデバッグ機能が追加されています。サーバーサイドJavaScriptのデバッグが必要な場合は、ヘルプの「JavaScript デバッガ」を参照してください。当チュートリアルの実施にあたり、必須ではありません。

ヘルプについて

Desingerのヘルプは、9.0からNSFでは提供されていません。Desingerのメニューの「ヘルプ」-「ヘルプ目次」から参照することができます。


4.モバイルアプリケーション開発用の設定

XPagesでモバイルアプリケーションを開発する場合、以下、2つの設定を有効にする必要があります。

4-1.XPages 用モバイルテーマの使用の設定

ダウンロードしたサンプルアプリケーションをDesignerで開き、XSPプロパティを開きます(1)。次に「XPages 用モバイルテーマの使用」にチェックを入れます(2)。この設定を有効にすると、設計要素名が”m_”から始まるXPageに自動的にモバイル用のテーマ(css)が適用されるようになります。(サンプルアプリケーションではあらかじめ有効になっています)。

 

4-2.XPages 拡張ライブラリの有効化

次に同じく「XSPプロパティ」(1)の「ページの生成」タブを開き(2)、「com.ibm.xsp.extlib.library」にチェックを入れます。こうすることで、拡張ライブラリが利用できるようになります(こちらもサンプルアプリケーションでは、あらかじめ有効になっています)。

 

5.モバイルアプリケーションの開発-最初のページの作成

5-1.モバイルアプリケーション用のXPageを作成し、ビューページを表示するための最初のページを作成します。まず[XPage]-[新規 XPage]から[新規XPage の作成]ダイアログを開き、4で設定した接頭辞(m_)を最初につけた名前を設定します。ここでは「m_workflow」とします。

 

5-2.コントロールの「モバイル」から「単一ページアプリケーション」を選択し、ドラッグ&ドロップで配置します。

 

5-3.「モバイル」から「アプリケーションページ」を選択し、単一ページアプリケーションのファセット(緑色の丸)に配置します。ファセットは編集可能領域を表しています。

 

5-4.「アプリケーションページ」コントロールを選択した状態で、プロパティタブをクリックし(1)、「すべてのプロパティ」を開きます(2)。「id」と「pageName」に「viewpage」と記述します(3)(4)。「pageName」はページの画面遷移を設定するときに使用する名前で、この後の手順で使用します。「id」と「pagename」は必ずしも合わせる必要はないのですが、ここではわかりやすいように同じにしています。

 

5-5.「単一ページアプリケーション」コントロールを選択した状態で、「すべてのプロパティ」から「selectedPageName」にさきほどアプリケーションページの「pageName」に記述した「viewpage」を設定します。こうすることで、この単一ページアプリケーションを開くとまず「viewpage」アプリケーションページを開くという設定になります。

 

5-6. 「モバイル」から「ページ見出し」を選択し、単一ページアプリケーションのファセットに配置します。

 

5-7.「ページ見出し」コントロールを選択した状態で、「すべてのプロパティ」から「label」に「一覧」と設定します。ページ見出しの中央に設定した文字列が表示されるようになります。

 

5-8.アウトラインを確認し、配置した3つのコントロールが下記のような階層構造になっていることを確認します。下記のようになっていない場合には、アウトライン上で調整します。アウトラインの操作方法は、こちらの動画をご覧ください(約1分)。

 

5-9.WebブラウザまたはAndroidエミュレーター/iOSシミュレータでプレビューします。下記の方法で実行します。

Dominoサーバー上で実行する場合

ブラウザを開き、以下のURLにアクセスします。

http://(サーバーのホスト名)/(サンプルアプリケーションのファイルパス)/ m_workflow.xsp

Designer上で実行する場合

「m_workflow」を開いた状態で、「Webブラウザからプリビュー」を実行します。

 

5-10. 下記のように表示されることを確認します。

 

6 カテゴリ別ビューの作成

6-1.カテゴリ別ビューを作成します。Designerの画面に戻り、「拡張ライブラリ」から「データビュー」を選択し、「ページ見出し」の右横に配置します(ページ見出しのactionFacetにドロップしないよう注意してください)。

 

6-2.「データビューのデータソースの選択」ダイアログが表示されます。ビューは「一覧 - vwholiday」ビューを選択します。

 

6-3.アウトラインを確認し、「ページ見出し」コントロールと「データビュー」コントロールが同じ階層にあることを確認します。

 

6-4.次の手順から、一覧ビューのうち、モバイルで表示する列を定義します。一覧ビューのカテゴリ列を含む3列目までを表示するように設定していきます。下記がNotesアプリケーションの一覧ビューの設定になります。

 
一覧ビューの列列タイトル列のプログラム名
1列目なし(カテゴリ列)Status
2列目申請者ApplicantCol
3列目休暇期間VacationCol
 

6-5.まずカテゴリ列を定義します。データビューを選択した状態で、「すべてのプロパティ」を開き、「形式」-「categoryColumn」を選択します。そうすると「+」ボタンが表示されるので、クリックします。

 

6-6.「viewCategoryColumn[0]」が追加されます。このcolumnNameプロパティにビューのカテゴリ列のプログラム名を指定します。「Status」と入力します。

 

6-7.次に申請者列を定義します。データビューを選択した状態で、「すべてのプロパティ」を開きます。「形式」-「summaryColumn」を選択し、「+」をクリックします。

 

6-8.summeryColumnが展開します。「ColumnName」に「ApplicantCol」を設定します。

 

6-9.次に、休暇期間列を定義します。「すべてのプロパティ」を開き、「形式」-「extraColumn」を選択し、これまでと同様に「+」ボタンで追加します。そして、「columnName」プロパティに「VacationCol」と設定します。

 

6-10.「summaryColumn」と「extraColumn」の区別がつくように、追加した「extraColumn」にスタイルを設定します。「style」プロパティを選択し、右に表示されるアイコンをクリックします。

 

6-11.「スタイルエディタ」が起動します。フォントタブをクリックし(1)、サイズを9pt(2)、色にオレンジを選択して(3)、「OK」を押します(4)。

 

6-12.XPageを保存し、ブラウザから開きます。下記のように表示されることを確認します。

 

7.カテゴリ別ビューに「さらに表示…」ボタンを作成

6で作成したビューにはページャーがありません。そのため、タップするたびに表示する行を増やすボタンをビューの下部に設定します。このアプリでは、ビューを開くとまず10行表示し、「さらに表示…」というボタンをタップするたびに5行追加していく仕様とします。

 

7-1.データビューを選択した状態で、「すべてのプロパティ」を開き、「data」-「rows」に「10」と設定します。最初にビューを開いたときに表示される行数を指定しています。

 

7-2. 「さらに表示…」ボタンを作成します。「リンク」コントロールをドラッグし、データビューコントロールの「pagerBottom」と書かれたファセットにドロップします。

 

7-3.[ソース]タブを開き(1)、リンクコントロールに「xp:key=”pagerBottom”」という属性があることを確認します。

 

7-4.リンクコントロールのすべてのプロパティを開き、「基本」-「text」に「さらに表示…」と設定します。

 

7-5.引き続きリンクコントロールのプロパティから、「基本」-「rendered」プロパティを選択し、右の菱形のアイコンから「値の計算」をクリックします。

 

7-6.「スクリプトエディタ」が起動します。下記のロジックを記述し、「OK」を押下します。データビューの行数が10行以上のときのみ表示するという設定をしています。LotusScriptと違い、JavaScriptは大文字小文字を区別するのでご注意ください。

 
var dv = getComponent("dataView1");
if(dv.getRowCount() > 10)
 return true;
else
 return false;
 

7-7.リンクコントロールを選択した状態で、「イベント」タブをクリックします(1)。「クライアント」タブを選択し(2)、「アクションの追加」をクリックします(3)。

 

7-8.「シンプルアクションの編集」ダイアログが開きます。アクションに「行をデータイテレーターに追加する」※を選択します(1)。次にそれぞれのプロティに下記の値を設定します(2)。forプロパティで行を追加するコントロールを、rowcountに追加する行数を指定しています。Disabledidには、追加する行数がないときに無効にするリンク、つまりこのリンクコントロールのidを指定します。最後に「OK」を押下します。

 
disableid:link1
for:dataView1
rowcount:5

※「行をデータイテレーターに追加する」はヘルプでは「行の追加」という名前で説明されています。

 

7-9.XPagesを保存し、画面を確認します。リンクコントロールが「さらに表示」ボタンのようなスタイルで表示され、タップすると表示される行数が追加されることを確認します。

 

8. 休暇申請フォームにあたるアプリケーションページの作成

次から、モバイル用の休暇申請のフォームを作成していきます。まずフォームにあたるアプリケーションページを作成し、ビューから開けるようにします。その後、「タイトル」と「ビューへ戻るボタン」を実装します。

8-1.「モバイル」から「アプリケーションページ」を選択し、既存の「アプリケーションページ」の右横に配置します

 

8-2.アウトラインを確認し、新規に追加した「アプリケーションページ」が既存の「アプリケーションページ」と同じ階層にあることを確認します。もし親子関係になっている場合などは、下図のようになるように調整します。

 

8-3.新規に追加したアプリケーションページ(上図のappPage1)の「すべてのプロパティ」を開きます。下記のように設定します。

 
id: documentpage
pageName: documentpage
resetContent:true
 

pageNameはこのアプリケーションページの名前で、画面遷移を設定する際に使用されます。pageNameとidは必ずしもあわせる必要はありませんが、ここではわかりやすいように合わせています。
resetContentでは、ページを開くたびに内容を更新するかどうかを指定します。これがデフォルトのfalseのままだと、ビューから開いたときにページが更新されず、どの文書を開いても最初に表示した文書の内容が表示されてしまいます。

8-4.ビューから作成したアプリケーションページを開くように設定します。「データビュー」コントロールの「すべてのプロパティ」を開き、「基本」-「pageName」の項目に、8-3で設定した「documentpage」を設定します。

 

8-5. フォームにタイトル(見出し)と「戻る」ボタンを作成します。「モバイル」から「ページ見出し」を選択し、追加したアプリケーションページのファセットに配置します。

 

8-6.「アウトライン」を確認し、下図のような階層になっていることを確認します。

 

8-7.フォームのタイトルと「戻る」ボタンを設定します。「ページ見出し」の「すべてのプロパティ」を開き、下記のように設定します。「label」でフォームのタイトルを設定しています。「back」でフォームの左上のボタンの名前を、moveToでボタンの移動先であるビューページを指定します。trasitionでは画面遷移時のアニメーションの種類を指定しています。

back:戻る
label:休暇申請
moveTo:viewpage
transition:slide
「label」に「休暇申請」と入力します。

 

8-7.XPageを保存し、画面を確認します。ビューのエントリをタップすると、「休暇申請」というタイトルのページが開くことを確認します。また、「戻る」ボタンからビューに戻ることを確認します。

 

9.「新規申請」ボタンの作成

フォームを作成したので、次にフォームを新規に起票するボタンを作成します。モバイルの画面でよく見られるように、ビューの右上に作成します。

9-1.「モバイル」-「ツールバーボタン」を選択し、アプリケーションページ(viewpage)に配置したページ見出し(ラベルが”一覧”)の右上のファセットにドラッグ&ドロップで配置します。ツールバーボタンは、ページ見出しのファセットで主に使用されます。

 

9-2.「アウトライン」を確認します。下記のように配置されたことを確認します。

 

9-3.「ツールバーボタン」の「すべてのプロパティ」を開き、「基本」-「label」に「新規申請」と入力します。

 

9.4「ツールバーボタン」を選択した状態で、「イベント」タブを開き、「サーバー」タブの「アクションの追加」をクリックします。

 

9-5.「シンプルアクションの編集」ダイアログが開きます。「アクション」から「アプリケーションページに移動」を選択します。プロパティにはそれぞれ下記のように設定します。documentpageに移動するように設定します。forceFullRefreshでページを開いたときに更新するかどうかを指定します。その他のプロパティで画面遷移時のアニメーションを設定しています。

 
direction:Left to Right
forceFullRefresh:true
targetPage:documentpage
transitionType:slide
 

9-6.Xpageを保存し、ブラウザから開きます。ビューに「新規申請」ボタンが表示され、タップすると休暇申請の新規文書が開くことを確認します。

 

まとめ

前編のチュートリアルでは、IBM Notes/Dominoでよく使用されるカテゴリ別のビューと、ビューからフォームを開くところまでを実装しました。後編では、フォームを編集、保存していくところを実装していきます。


参考文献

上記記事はIBM Domino 8.5.3 upgrade pack 1を前提に書かれたものなので、以下の点にご注意ください。

  • IBM Domino 9.0から、XPages Extension Libraryはすべて日本語対応され、かつ一部のコントロールは8.5.3から名称が変更されています。9.0で上記記事の言葉は、下記のように読み替える必要があります。
 
記事中のモバイルコントロールの日本語名8.5.3 upgrade pack 1のコントロール名(英語名)9.0.1(日本語版)のコントロール名
シングルページアプリケーションSingle Page Application単一ページアプリケーション
※ヘルプでは「シングルページアプリケーション」
モバイルページMobile Pageアプリケーションページ
ページヘッダーPage Headingページ見出し
※ヘルプでは「ページヘッダー」
角丸リストRound List角を丸くしたリスト
※ヘルプでは「角丸リスト」
行表示項目Static Line Item角を丸くしたリスト項目
※ヘルプでは「角丸リスト項目」
スイッチMobile Switch切り替えスイッチ
タブバーTab Barタブバー
タブバーボタンTab Bar Buttonタブバーボタン

ダウンロード

内容ファイル名サイズ
サンプルアプリケーションkyuka.zip119KB

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Lotus
ArticleID=972533
ArticleTitle=NotesワークフローアプリケーションをXPagesでモバイル化するチュートリアル: 前編
publish-date=05302014