新人SEが学ぶ XPages

12.Dojo Mobileを利用したスマートフォンアプリケーション「社内電話帳」

前章ではiUIというモバイル用フレームワークを利用したスマートフォンアプリケーションをご紹介いたしました。多少コーディングが必要ではあったものの、XPagesでWeb開発の標準技術を使用できることをイメージしていただけたかと思います。

さて、本章では同じようにスマートフォンアプリケーションを引き続きご紹介いたします。前章と大きな違いが1点あります。それは、使用するフレームワークです。Web開発におけるモバイル用フレームワークは、ネット上に複数存在します。XPagesは、Web開発の標準技術を取り入れることができるため、様々なフレームワークを使用することができます。前章ではその一例としてiUIを使用しましたが、本章では「Dojo Mobile」を使ってみました。Dojo MobileをXPages上で使用することにはいくつかの利点がございます。

• 最新のLotus Notes/Domino上に同梱されている
• Lotus Domino DesignerにDojoを呼び出すプロパティがあらかじめ用意されている

上記の利点から、Dojo Mobileは他のモバイル用フレームワークに比べXPagesと親和性が高いとも言えます。また、Dojo Mobileは頻度よくバージョンアップされてきているフレームワークであるため、最先端のUI、デザインのアプリケーションを実装することができます。

では、このDojo Mobileを利用し本章では「社内電話帳」アプリケーションをご紹介いたします。社員情報をスマートフォンから参照することにより、特定の人と即座に連絡を取ったり、所属やロケーションを把握したりすることができます。普段外回りがメインで時間がない営業マンにとっては有用なアプリケーションなのではないかと考えられます。

「社内電話帳」アプリケーションの特長

• スマートフォン風の横スライドのページ遷移
• メールアドレスをタップして、メーラーを起動
• 電話番号をタップして、電話をかける
• ホームオフィスをタップして、マップを起動

データソースはLotus Domino内を参照していますが、XPagesを利用することにより、Webアプリケーションの枠に留まらずスマートフォン特性を生かしたアプリケーションの開発ができます。

本章では、前章との実装の違いをご紹介していきます。

1. 「Dojo Mobile」フレームワークをインポートする　

※近日リリース予定のLotus Notes/Domino 8.5.3では標準搭載されているため不要

私が現時点で開発を行っている環境は、Lotus Notes/Domino 8.5.2になります。同梱されているDojo Toolkitのバージョンは1.4.3であり、Dojo Mobileは含まれておりません。よって、まず Dojo 1.5.0 をDojoのサイトからダウンロードし、Dojo Mobileフォルダ及びmobile.jsをあらかじめアプリケーション内にインポートする必要があります。

以下の図に示すように、Lotus Domino Designer内の設計要素ビューをJavaパースペクティブに切り替え、NSF>WebContentに2つのフォルダ及びjsファイルをインポートします。

2. フォーム、ビューの実装

XPagesで実装しWebアプリケーションとして利用する場合、フォームやビューの見栄えはスタイルシート上で行うためフォームはフィールドを配置するだけ、ビューはフィールドを参照して最初の列のみカテゴリ表示するというだけの実装を行いました。

3. XPageを作成する

3-1.ページ遷移の仕組み

前章では、スマートフォン1画面につき1つのXPageを作成していましたが、本章ではスマートフォン4画面を1つのXPageで作成しています。これは、横にスライドしてページ遷移するようなスマートフォンアプリケーションを実現したい場合に、１つのXPageですべてを記述できます(iUIでも実現可能です)。スマートフォンでのページの区切りをつけるためにXPageのソース内では<div>タグを用います。

<div id="org1" dojoType="dojox.mobile.View" selected="true"></div>
<div id="org2" dojoType="dojox.mobile.View"></div>
<div id="name" dojoType="dojox.mobile.View"></div>
<div id="detail" dojoType="dojox.mobile.View"></div>

この<div>タグの間に記述を行うことで、スマートフォン1画面分を実装することができます。

また、スマートフォン1画面には、カテゴリ1階層分が表示される仕組みになります。下記にNotesクライアントから見たNotes DBを示します。

このことから、4画面はそれぞれの階層または文書を表示する役割があります。

<div id="org1" dojoType="dojox.mobile.View" selected="true"></div>　<- 部門一覧
<div id="org2" dojoType="dojox.mobile.View"></div>　<- 部署一覧
<div id="name" dojoType="dojox.mobile.View"></div>　<- 社員一覧
<div id="detail" dojoType="dojox.mobile.View"></div>　<- 社員データ

3-2.1 画面の構成 (ビュー)

3-1でXPage全体の構成をご紹介しましたので、次に1画面の構成すなわち<div>タグ内の構成についてご紹介します。今回のようなアプリケーションの場合、下記のような構造を持っています。

<xp:panel dojoType="dojox.mobile.Heading"></xp:panel> ・・・(1)
<xp:panel dojoType="dojox.mobile.EdgeToEdgeCategory"></xp:panel> ・・・(2)
<xp:panel dojoType="dojox.mobile.EdgeToEdgeList"> ・・・(3)
 <xp:panel dojoType="dojox.mobile.ListItem"> ・・・(4)
  <xp:this.dojoAttributes> ・・・(5)
   <xp:dojoAttribute name="moveTo" value="org2"></xp:dojoAttribute>
   <xp:dojoAttribute name="transition" value="slide"></xp:dojoAttribute>
  </xp:this.dojoAttributes>
 </xp:panel>
</xp:panel>

各タグが画面のどの部分を構成しているものかを表す図を下記に示します。

また (5) においては (4) 部分での表示、タップ時の動作を、Dojoタイプを指定して定義します。この定義はソースコードに直接記述することもできますが、Lotus Domino Designerに標準搭載されているプロパティ定義からも記述できます。これは他のフレームワークにはないXPagesにおけるDojo特有のメリットです。

3-3.1 画面の構成(フォーム)

次に、スマートフォン上で文書を表示するためのフォームの構成をご説明します。文書の参照もビューと同じように<div>タグで区切られていますが、呼び出すDojoタイプや構成が異なります。今回のようなアプリケーションの場合、下記のような構造を持っています。

<xp:panel dojoType="dojox.mobile.Heading"></xp:panel> ・・・(1)
<xp:panel dojoType="dojox.mobile.RoundRectCategory"></xp:panel> ・・・(2)
<xp:panel dojoType="dojox.mobile.RoundRectList"> ・・・(3)
 <xp:panel dojoType="dojox.mobile.ListItem"></xp:panel> ・・・(4)
 <xp:panel dojoType="dojox.mobile.ListItem"></xp:panel>
   :
 <xp:panel dojoType="dojox.mobile.ListItem"></xp:panel>
</xp:panel>

各タグが画面のどの部分を構成しているものかを表す図を下記に示します。

本アプリケーションは、単にデータ参照にとどまるだけではなく、アクションを起こすことも想定して作成しているため、Mail・電話番号・ホームオフィスには、リンクをつけています。メーラー起動などの動作はHTMLのルールに従っています。

例)
メール起動する場合：<a href=”mailto:ichiro@ibmtest.com”>
電話をかける場合：<a href=”tel:03-6667-1111”>

Lotus Domino内のデータを参照し且つリンクにしたい場合は、下記のようにJavascriptでタグを生成する必要があります。

"<a href=\"mailto:" + data.getItemValueString('mailAddress')
 + "\">" + data.getItemValueString('mailAddress') + "</a>"

この定義もビュー同様、Lotus Domino DesignerのDojoのプロパティ定義から実装することができます。

4. 補足

ここまでで、アプリケーションの大枠はほとんど完成ですが、まだ実装が必要な部分があります。それは部分更新機能です。冒頭のアプリケーション画面遷移を見てわかるように、指定したカテゴリ内のカテゴリのみを表示する仕組みを実装します。もし部分更新機能を実装しないでアプリケーションを動かした場合、部門を選択しても選択された以外の部門も含めて表示されてしまいます。これを防止するために、選択された部門内の部署のみを表示するようなスクリプトを作成し、XPage内で呼び出す必要がございます。

部分更新機能はXPagesのAjax技術を活用してマウス操作で実現できましたが、Dojo Mobileを適用する場合、そのイベントハンドラを抑止する必要があります。そこで、下記のようなスクリプトを記述・作成し、部分更新機能を追加します。

※Dojo Mobileに限らず、他のモバイル用フレームワークもXPagesのイベントハンドラを抑止する必要があります。

function partialRefresh(widget){
 var moveTo = widget.moveTo;
 if (!moveTo || !(moveTo.match(/#?(\w+)/))) { return null; }
 
 moveTo.match(/#?(\w+)(.*)/);
 var id = RegExp.$1;
 var paramString = RegExp.$2;
 var paramJson = {};
 if(paramString){
  var paramArray = paramString.split("&");  
  var paramJsonString = new String("{");
  for (var i=0; i<paramArray.length; i++){ 
   var pair = paramArray[i].split("="); 
   if (pair[0]) {
    paramJson[pair[0]] = pair[1];
   }
  }
 }
 
 var prog = dojox.mobile.ProgressIndicator.getInstance();
 dojo.body().appendChild(prog.domNode);
 prog.start();
 
 var onComplete = function() {
  prog.stop();
  dijit.byId(id).domNode.style.display = "none";
  setTimeout(function(){
   widget.transitionTo ? widget.transitionTo(id) : widget.goTo(id);
  },0);
 }
 XSP.partialRefreshGet(id, {"params": paramJson, "onComplete": onComplete});
 
 return false;
}

このスクリプトを<div>タグ内の所定の位置で定義することにより、部分更新ができます。

まとめ

XPagesでスマートフォンアプリケーションを作成するにあたり、フレームワークはWeb上に数多くございますが、Lotus Notes/Dominoに標準搭載されているDojo Mobileは比較的使いやすい印象でした(標準搭載はバージョン8.5.3から)。今回実装する中で大いに参考させていただいたものが、2011年9月16日(金)に開催されたテクてくLotus技術者夜会：ザ・デベロッパー編で行われた講演やハンズオンです。現在では、資料公開されておりますので、是非ご参考にしてみてください。

本章では「社内電話帳」という題材で実装をしましたが、スマートフォンを活用する際のポイントとなるのは、”すばやく”・“シンプルに”情報を取得・操作することなのではないかと考えられます。皆様も、業務の中で「どういった場面にスマートフォンを利用するのか」を一度イメージしていただき、Lotus Notes/Dominoをさらに有効活用していただければと思います。今回ご紹介した実装方法が皆様のお役に立てれば幸いです。

本アプリケーション「社内電話帳」は、オープンソースプロジェクトサイト OpenNTF にて公開されました。また、XPages技術者コミュニティーにおいても随時、実装方法や一部コードについて詳細に解説していく予定ですので、ご参照いただければと思います。本アプリケーションに関するご質問などございましたら、XPages技術者コミュニティーのディスカッションスペースにご投稿いただければ幸いです。

12 / 14 | 前へ | 次へ

コメント

上に戻る

目次

• 1. About me
• 2. XPages序章
• 3. ビューの列に文書へ添付した画像を表示する機能の実装
• 4. 文字が流れて表示され、その文字がリンクになっている機能の実装
• 5. ビューの列に文書へ添付した画像を表示する機能の実装(改良版)
• 6. マネージャー承認アプリケーション
• 7. 簡単に実装：「ファイルのアップロード＆ダウンロード」
• 8. XPagesで全文検索機能を利用するには？
• 9. XPages 技術者コミュニティーの開設
• 10. 既存資産の活用：XPageからエージェントを呼び出す
• 11. 移動時間を有効活用:スマートフォンから簡易ワークフローを回す
• 12.Dojo Mobileを利用したスマートフォンアプリケーション「社内電話帳」
• 最終章. 新人SEが学んだXPagesを振り返って
• 著者について

---

12 / 14 | 前へ | 次へ