2010年4月に新卒で入社した「すぎ坊」こと杉山卓弥(すぎやまたくや)が、XPages でアプリケーションを開発していくプロセスの連載です。特別な深い開発知識を必要とせずにアプリケーションの開発を可能にするXPagesの容易性と、すぎ坊の成長の記録をご参照ください。

1. About me

XPages開発者の方へ

XPages 変身エンジニア「イケヤマ君」が、XPages の最新情報とそのパワーを開発者のみなさんにシェアしていきます。

私は2010年4月に新卒で入社した杉山卓弥(すぎやまたくや)です。現在はソフトウェア事業Lotus事業部Lotus第一クライアントテクニカルプロフェッショナルズに所属しております。 まず初めに、私がどのようなバックグラウンドを持って入社したかお話したいと思います。

大学時代の私

大学時代は、理工学部で情報工学を専攻し、大学院へ進みました。この6年間の大学生活で研究していたことは「将棋プログラムの構築」です。これは、私が小学校1年生の頃から趣味で続けている「将棋」(本人は参段)と、情報工学の「プログラミング」、という自分の好きな分野を研究にしたかったという考えからこのようなテーマにしました。昔から、ゲームが好きでしたし、なんでこんなに強いものが作れるのかという興味もありました。この興味が「自分でも作ってみたい」という希望になり、研究テーマにしました。

将棋プログラムは、言語としてC、Perlを用い、チームで開発します。各メンバーで担当が決まっており、私は唯一将棋経験があったので、人間的な検証ができる部分の実装をしていました。皆さんは、「Bonanza」という将棋ソフトをご存知でしょうか?これが私の携わっていた将棋プログラムです。実際に、市販でもPC、PSPなどで発売されています。また、フリーウェアでプログラムは公開されておりますので、興味のある方は是非対戦してみてください。

将棋はゲームですので、ただ開発をするだけではなく、コンピュータ同士での大会もございます。私もチームとして第20回世界コンピュータ将棋選手権に出場(プログラム名「Bonanza Feliz」)しました。結果は5位でしたが、非常に貴重な体験をすることができました。

IBMと私

IBMは、就職活動をするまでの私と何か縁があるように感じました。この縁とは、「IBMインターンシップ」、「IBMチェスプログラムDeepBlue」の2 つです。前者のインターンシップに関しては、実際に職場でAjaxでのアプリケーションの構築を行い、その中で社員の方の優しさ、スキル、魅力を感じました。今まで仕事をするイメージがなかった私はこのような職場で働きたいと思った次第です。また、後者のチェスプログラム「DeepBlue」は、1997年、当時のチェス世界チャンピオンに勝利したプログラムです。当時小学生だった私は、将棋が好きだったので、このような思考ゲームのコンピュータが人間と戦っていることに不思議なイメージを持ちつつ、IBMは何かすごいことをやり遂げたのだなという印象がありました。このような私とIBMつながりを意識し就職活動をして実際に入社することができましたので、今では非常に満足しております。

そんな私に1年目最後の仕事として担うことになったのはXPagesのデモアプリ作成でした。では、XPages の話題に移りましょう。


2. XPages序章

IBMに入社してから約半年かけて新入社員研修を終えましたが、当然私のXPagesの知識はほぼ0でした。そこで、まずはXPagesに慣れるために「ビューの列に文書へ添付した画像を表示する機能」「文字が流れて表示され、その文字がリンクになっている機能」の2つのアプリケーションを作成することになりました。XPagesというとIEやFirefoxなどのブラウザーで動くアプリケーションをイメージしますが、Notes クライアント上で動作するアプリケーションに挑戦する事になりました。なぜなら Lotus Notes 8.5.1 から Domino サーバーと同様にクライアント上でもXPagesを表示することが可能になったからです。当初は、まったく想像もつかない状態でしたが、約2週間で2つのデモアプリを完成させることができました。私が学習していく様子をお伝えする前に、完成イメージを御覧ください。

ビューの列に文書へ添付した画像を表示する機能

Point

  • ビューでは、ビューアイコン以外の画像は表示できなかったが、添付されている画像ファイルを表示可能
  • ショッピングサイト感覚のインターフェースで遊休資産管理や社員名簿など画像が一覧で見れる事に意味のあるアプリケーションを想定
  • 容易な実装で実現

 

↓ リンクをクリックすると

 

文字が流れて表示され、その文字がリンクになっている機能

Point

  • 指定した文書内容を他の画面で流すことが可能
  • 出社して最初に開くアプリケーションなどにパーツとして実装して、目立つメッセージとして利用されることを想定
  • 容易な実装で実現

 

↓ リンクをクリックすると

 

私が最初に作成したデモアプリは、Webでは一般的な機能を持つものだけですが、今までのNotesではアーキテクチャ上、実現することが出来ませんでした。このような今までの設計要素では不可能だった機能もXPagesによって実現することができ、なおかつ簡単に出来ます。まずは、単純な機能から実装し自身のスキルを向上させることで、今後の社内のコラボレーションをより効率的に行っていくことができるため、XPages の登場によって更に生産性の高いアプリケーション基盤となっていくのではないかと考えております。

それでは、この2つのデモアプリを完成させるまでに私が行ったこと、この章では実装に入る前までの下準備について、ご紹介させていただきます。

実装を行う前の下準備(環境準備、実装スキル習得)

まず、XPagesのデモアプリ作成の依頼を受けた私は、XPagesの勉強とそれを開発するための環境の整備から始めることにしました。環境整備に関しては、Lotus Notes/Dominoの最新バージョンである8.5.2 (Domino サーバーと同じ実行基盤が乗りました!)に、アップデートするだけのことでしたが、問題は前者にあり、何から勉強すればよいのかで悩みました。そこでお勧めするのはdeveloperWorks サイトにて公開しています XPages入門 という演習ベースのページです。この演習を行うことで、真っ白なページが着々と充実した機能付きのページに変化していきます。私は、実際にデモアプリを作るまでに演習 6までと演習 8の全てを行い、ここまでの知識をつけた上で、デモアプリの作成を1から行いました。演習の内容に関しては、本筋からそれてしまいますので、ここでは割愛させていただきます。この後の章で、XPages開発経験のない方にもできるだけ理解していただけるような立場で、デモアプリ別に私の実装過程をご紹介していきたいと思います。


3. ビューの列に文書へ添付した画像を表示する機能の実装

ビューの列に文書へ添付した画像を表示する機能は今までのLotus Notesでは実現出来ませんでした。ビューはテキストかビューアイコンのみの表示でした。

 

それに対して、XPagesの武器の一つが、HTML形式で表示の自由度が高いことです。つまり、画像のURLをNotes文書内にテキストで持たせて、XPages上ではHTMLタグにてそのURLを画像表示させることができます。この機能に加え、簡単なマウス操作でビューや文書の内容をXPages上で表示することも可能です。

私は、まずは完成までにどのような方針でアプリケーションを構築していくか考えました。もちろん、現時点ではXPages入門で演習を行った経験しかありません。 絶対パスをべた書きしてしまうので、もっと良い方法があるはずですが、XPages 初心者の私にとっては以下の方針を立てるだけで精一杯でした。

  1. ビューとフォームを新規作成する
  2. 文書作成の際に、商品名、画像ファイル、サーバー名、データベース名を入力して保存する
  3. 保存のタイミングで画像ファイルを表示するためのHTMLタグを生成する
  4. ビューには商品名と、生成したHTMLタグを表示させる
  5. XPagesでビューをそのまま参照する
  6. HTMLタグを保有する列の表示形式をHTMLに設定する
  7. 各文書のリンクを貼り、アクセスすると文書そのものが見られるようにする

上記のような方針を立てて、早速実装に取り掛かりました。

ビュー、フォームの作成

Notesデータベースの作成とDesignerでの起動方法は、XPages入門演習 3 をご参照ください。

  1. 新規にフォームを作成し、フォームに5つのフィールドを作成します。「商品名(Name)」、「画像ファイル(File)」、「HTMLタグ生成(Tag)」、「ホスト名(Host)」、「データベース名(Database)」フィールドの5つです。「画像ファイル」はリッチテキストフィールドとして作成し、その他はすべてテキストフィールドで作成します。

     

    Host名とデータベース名はHTMLタグを生成する際に必要となるので、ここで入力するフィールドを作成します。

  2. 保存時のタイミングでHTMLタグを生成(Tagフィールドに自動的にURLを埋め込む)するので、オブジェクトタブ⇒フォーム⇒Querysaveの欄にスクリプトを記述します。

     


    スクリプトの記述を始める前に、どのようなHTMLタグが生成できれば良いのか考えます。先輩社員の意見やWebサイトを参照した結果、以下のように出力すればよいと分かりました。(一例です。)


    <img src = "http://localhost/ImageView.nsf/0/78690FC660C9230C49257803002E8EEB/$FILE/Connections.jpg" width="100" height="100">


    この構造は、<img src="URL" width="100" height="100"> とすることで、100×100ピクセルの画像を出力できます。また、画像を添付して保存すると画像URLも取得できるので、これをURLとします。このURLの構造は、<http://サーバホスト名/データベース名/ビューID(/0/でも可)/文書ID/$FILE/添付ファイル名> となっています。


    本来であればURLは相対パスにするのが最も適切ですが、Notesクライアント上で起動すると相対パスを適用できないという問題があります。現在この件に関しては調査中ですが、Firefoxなどのブラウザーでしたら、<img src ="文書ID/$FILE/ファイル名"> でも画像を表示することが可能です。


    (後の調査でよりシンプルかつ相対パスで実装が可能であることが判明しました。こちらに関しては、後の章で改めてご紹介いたします。)


    以上のことを踏まえた上で、以下のようなスクリプトを記述します。


    ※フィールド名が異なる場合、スクリプトを変更する必要があります。ご注意ください。


    Sub Querysave(Source As Notesuidocument, Continue As Variant)
    	
    	Dim doc As NotesDocument
    	Dim docid As String
    	Dim HostName As String
    	Dim DatabaseName As String
    	Dim vardt As Variant
    	Dim item As Variant
    	Dim eobj As NotesEmbeddedObject
    	Dim Address As Variant
    	Dim eobjName As String 
    	
    	'現在文書のIDを取得
    	Set doc = Source.Document
    	docid = doc.UniversalID 
    	
    	'サーバホスト名とデータベース名を取得(括弧内はフィールド名)
    	HostName = Source.FieldGetText("Host")
    	DatabaseName = Source.FieldGetText("Database")
    	
    	'文書から添付ファイルの名前を取得
    	vardt = doc.Items
    	Forall x In vardt
    		Set item = x
    		'添付ファイルのアイテムタイプは1084
    		If item.Type = 1084 Then
    			Forall z In item.Values
    				'添付ファイルのオブジェクトを取得
    				Set eobj = doc.GetAttachment(z)
    				'添付ファイル名を取得
    				eobjName = eobj.Source
    			End Forall
    		End If
    	End Forall
    	
    	'HTMLタグの生成
    	Address = "<img src = "& """" & "http://" & HostName & "/" & DatabaseName 
    & "/0/" & docid & "/$FILE/" & eobjName & """" & "
    width= " & """" & "100" & """" & "
    height= " & """" & "100" & """" & ">" 'HTMLタグをTagフィールドに格納(括弧内はフィールド名) Call Source.FieldSetText("Tag",Address) End Sub

    スクリプト記述において悩んだポイント

    • 添付ファイル名を取得するにはどうしたら良いのか・・・私は上記記述で解決しました。

    • 「"」をString内に組み込む方法・・・「""""」と入力すると「"」を文字として認識してくれます。


    このスクリプトを記述しますと、フォームに関しての実装は終了です。
    ここでHTMLタグの生成ができましたので、あとはXPageでこのタグのフィールドを取得できれば画像を表示することが出来ます。

  3. 新規のビューを作成し、列にフォームの「HTMLタグ」、「商品名」をそれぞれ取得するようにします。列を指定し、参照先をフィールドのTag、Nameにしてください。また、ビューの選択において、以下の式を記述します。

    SELECT form = "List"
    (Listはフォームの名前です)

     

     

    フォームに比べ大分楽な実装です。


    以上で、Notesのフォームとビューは実装含め完成しました。適当に、文書を作成、保存しておくと 確認もできます。ここまででは、今までのNotes上では以下のようなビュー表示となります。ここでは、画像は表示されることはなく、タグがテキストで表示されているだけです。これが本来のNotesの表現形式です。

     

    それでは、これから新機能XPagesを用いて画像を表示できるようにしましょう。

XPageの実装

まず、XPageとして2 つの画面を作成する必要があります。

  • 画像付きビューを表示する画面
  • ビュー項目のリンクをクリックするとXPage上で文書が閲覧できる画面

実装を始める前にXPageの大枠を設定する必要があります。
私は当初、画面(XPage)に直接実装をしていくものだと思っていました。しかし、XPageは最終的な画面を構成するXPageとその中に部品として埋め込むカスタムコントロールというものがあるのです。 大規模開発や、同じ機能を色々なページで実装したい場合はこういった構成をとるほうがスマートであることに気づきました。本アプリケーションではXPageに直接書き込んでも変わりませんが、今後のために分ける癖をつけていくべきです。

私は、以下のようなXPageとカスタムコントロールを作成しました。
なお、作成の方法に関しては、XPages入門演習 3-5 を参考にしています。

XPage

  • 画像付きビューを表示する画面(Views.xsp)
  • ビュー項目のリンクをクリックするとXPage上で文書が閲覧できる画面(Shopping.xsp)

カスタムコントロール

  • ビューを参照する機能(SearchResult)
  • Notes文書からXPage上に表示する機能(profileForm)

まずは、部品となるコンテナコントロールから作成していきます。

  1. ビューを参照する機能(SearchResult)XPages入門演習 8 を参考

    1. コンテナコントロールのビューコントローラーをドラッグ&ドロップします。

       

    2. 参照したいビューを選択し、OKボタンを押します。

       

    3. 画像HTMLタグの列をクリックし、表示タブでコンテンツの種類をHTMLにします。

       

    4. 商品名の列では文書にアクセスできるようリンクを貼っておきます。

       

      以上で、ビューを参照する機能は完成いたしました。XPageの設定でフォントや色、背景などを変更することも可能です。

  2. Notes文書からXPage上に表示する機能(profileForm)XPages入門演習 5 を参考

    1. profileFormのデータタブでDomino文書データのリンク設定を行います。

       

    2. すべてのプロパティータブでcomputeWithFormをonsaveに設定します。

       

    3. 一度保存してウィンドウを閉じ、再度開きます。

    4. データパレットを選択し、「[コントロールの選択] ダイアログ・ボックス」ボタンを使用可能にします。

       

    5. 商品名とファイルを添付するフィールドをShift+クリックで複数選択し、ドラッグ&ドロップします。

       

    6. 確認ウィンドウが出た場合、OKをクリックします。

    7. リッチテキストフィールドを選択し、データタブでバインド先をHTMLタグのフィールドに変更します。

       

    8. Dominoで作成したフォームのプロパティーにおいて、Webアクセスを「代わりにXPagesを表示」とし、文書を表示する予定の画面に設定します。私の場合では、「Shopping」に設定しました。

       

      以上で、Notes文書からXPage上に表示する機能は完成しました。 ここまでで部品であるカスタムコントロールはすべて完成しましたので、次はこのカスタムコントロールをどの画面に表示させるように行うのかを設定します。

  3. 表示する画面(XPage)とカスタムコントロールのコネクト
    1. 画像付きビューを表示する画面(Views.xsp)のウィンドウを出し、カスタムコントロールの SearchResult をドラッグ&ドロップします。

       

    2. 同様に、ビュー項目のリンクをクリックするとXPage上で文書が閲覧できる画面(Shopping.xsp) のウィンドウを出し、コンテナコントロールのprofileFormをドラッグ&ドロップします。

以上で、実際に表示する画面(XPage)とカスタムコントロールのコネクト及びXPage全体の構築ができました。

すべてを保存し、最後にビューを表示する画面(Views.xsp)を開き、「Notesでプリビュー」を押すとNotesで保存した文書と画像を見ることができます。(画像が参照されない場合は、一度ブラウザーでプリビューしてからNotesでプリビューしてください。Localhost が一時的に立ち上がらないケースがございます。)

 

プリビューを行うと以下のような画像付きビューが表示されます。
(カスタマイズしている関係で多少イメージは異なりますが、機能としては相違ありません)

 

商品名をクリックすると、文書の詳細を閲覧することができます。
これは、profileFormの選択したフィールドのみ表示されるため、添付ファイルなどは非表示にできます。

以上で、画像付きビューの表示ができました。

実装を終えて

今回、私がXPagesのアプリケーションの構築をしたのはこれが初めてでしたが、XPageの実装部分は非常に直感的で簡単な印象を受けました。実際に、XPages自体の実装は、さほど時間を要していません。このアプリケーションの実装に計25時間ほどかかりましたが(XPageの学習含む)、そのうちのほとんどが添付ファイルの画像をどのようにXPage上に持っていくかで悩みました。最初はタグを生成するという方針で実装を始めたところ、そのスクリプトを書く時点で非常に困惑し、今回掲載したものに至りました。
現在は絶対パスでHTMLタグを生成する方式しか発見できていませんが、さらに調査をしてどんな環境でもアクセスできるようなアプリケーションを実装したいと考えています。(後の調査でよりシンプルかつ相対パスでも実現できる実装が可能であることが判明しました。こちらに関しては、後の章で改めてご紹介します。)

XPagesを実装していて、今まで実現できなかったことが容易にできますし、自分が仕事しやすいようにアレンジできるメリットもありますので、今後とも学習を重ね様々なアプリケーション開発に力を入れていきたいと感じています。

それでは、次回は「文字が流れて表示され、その文字がリンクになっている機能」の実装についてご紹介していきます。


4. 文字が流れて表示され、その文字がリンクになっている機能の実装

この機能も前回ご紹介したものと同様、今までのNotesでは実現出来ませんでした。しかし、XPagesを利用することで「文字が流れて表示され、その文字がリンクになっている機能」を簡単に実装できます。これも「HTML形式で表示できること」が最大の武器となります。
この機能の実装を始める前に、まずは以下のような方針を立てました。

  1. 適当な名前でビューとフォームを新規作成する
  2. フォームに流す文字、文書詳細、HTMLタグのフィールドを作成する
  3. 文書作成の際に、流す文字、文書詳細を記入して保存する
  4. 保存のタイミングで、リンク付きの文字を流すHTMLタグを生成するスクリプトを記述する
  5. XPagesで指定した文書のフィールド(流す文字)を取得するスクリプトを記述するスクリプトを記述する
  6. XPagesで文書取得部分の表示形式をHTMLにする
  7. 流れる文章をクリックすると文書そのものが見られるようにするデータのバインドを行う

私は、まだ実装のバリエーションがないため文書の取得方法に苦しみました。「ビューの列に文書へ添付した画像を表示する機能」では、ビューから文書を参照する方式を取れたのですが、今回は直接文書を取得しなくてはなりません。何か方法がないか考慮した末、XPagesには計算結果フィールドコントロールが存在するので、ここにJavaScriptで文書の取得をする記述を書くことで解決できるのではないかと推測しました。次にJavaScriptについてDominoヘルプで調査をし、実現可能であることが分かりました。 XPagesでJavaScriptを記述した経験がなかったため、この方針決めには約4時間程度要しました。

上記の方針のもと、実装に取り掛かりました。Notesデータベースの作成とDesignerでの起動方法は、XPages入門演習 3 をご参照ください。

ビュー・フォームの作成

  1. 新規にフォームを作成し、フォームに3つのフィールドを作成します。「流す文字(flowMessage)」、「文書詳細(Detaill)」、「HTMLタグ生成(TagMessage)」フィールドの3つです。3つすべてテキストフィールドで作成します。フォーム構造としては下記のようになります。

     

  2. 保存時のタイミングでHTMLタグを生成するので、オブジェクトタブ⇒フォーム⇒Querysaveの欄にスクリプトを記述します。

    スクリプトの記述を始める前に、どのようなHTMLタグが生成できれば良いのかについて考えます。 考慮の末、以下のようなタグが生成できれば表示可能となることが分かりました。


    <Marquee><A Href= "%24%24OpenDominoDocument.xsp?documentId=4AF31BD9988E1C2649257807000C8697&action=openDocument">流れる文章</A></Marquee>


    この構造は、<Marquee>タグで挟むことで、まず文字を流すことができます。また、該当文書へアクセスするためのURLは相対パスを用いて <A Href="%24%24OpenDominoDocument.xsp?documentId=(文書ID)&action=openDocument"> とします。前回ご紹介した機能と異なり、この場合では相対パスを用いることが可能です。この詳細に関しては現在調査中です。以上のことから保存時のスクリプト記述では、文書IDを取得すること、HTMLタグ生成のフィールドに格納すること、の 2点が必要であるとわかります。
    これを踏まえた上で、以下のようなスクリプトを記述します。


    Sub Querysave(Source As Notesuidocument, Continue As Variant)
    	
    	Dim doc As NotesDocument
    	Dim docid As String
    	Dim mainMessage As String
    	Dim messageTag As Variant
    	
    	'現在文書を取得
    	Set doc = Source.Document
    	
    	'現在文書のIDを取得
    	docid = doc.UniversalID 
    	
    	'流す文章をフィールドから取得(括弧内はフィールド名)
    	mainMessage = Source.FieldGetText("flowMessage")
    	
    	'HTMLタグつきの文章を作成 <Marquee>文字を流す、<A Href>リンクを貼る
    	messageTag = "<Marquee><font color=" & """" & "Blue" & """" & ">
    <A Href= " & """" & "%24%24OpenDominoDocument.xsp?
    documentId=" & docid & "&action=openDocument" & """" & ">"
    & mainMessage & "</A></font></Marquee>" '作成したHTML文章を別フィールドに格納(括弧内はフィールド名) Call Source.FieldSetText("TagMessage",messageTag) End Sub

    今回のフォーム内でのスクリプト記述は、テキストのみ扱うものですので、前回よりも比較的簡単に記述できました。
    このスクリプトを記述しますと、フォームに関しての実装は終了です。

  3. 新規のビューを作成し、列にフォームの「流す文字」、「文書詳細」を取得するようにし、ビューの選択において、以下の式を記述します。


    SELECT form = "Message"
    (Messageはフォームの名前です)

    以上で、Notesのフォームとビューは完成いたしました。

XPagesの実装

XPageとして 2つの画面を作成する必要があります。

  • 文字が流れて表示される画面
  • 流れている文章の詳細が表示される画面

実装を始める前にXPageの大枠を設定する必要があります。
私は、以下のようなXPage、カスタムコントロールを作成しました。

XPage

  • 文字が流れて表示される画面(FlowMessage.xsp)

  • 流れている文章の詳細が表示される画面(FlowDocument.xsp)

カスタムコントロール

  • 文字を流し、リンクを貼る機能(Ticker)
  • リンクをクリックすると文書詳細が表示される機能(DetailForm)

まずは、部品となるカスタムコントロールから作成していき、最後にXPageにカスタムコントロールを配置していきます。

  1. 文字を流し、リンクを貼る機能(Ticker)

    1. コンテナコントロールのパネルをドラッグ&ドロップします。パネルの名称は TickerPanelとします。

       

    2. コアコントロールの計算結果フィールドをパネルの中にドラッグ&ドロップします。

       

    3. 計算結果フィールドを選択し、計算結果フィールドタブでコンテンツの種類をHTMLに設定します。

       

    4. 計算結果フィールドの値タブを選択し、使用するバインドデータをJavaScriptとし、以下のスクリプトを記述します。


      var a = database.getAllDocuments(); //すべての文書を取得
      var b = a.getLastDocument(); //最後の文書を取得
      return b.getItemValueString("TagMessage"); //生成したタグの取得


      ※任意の文書を流すという目的から、ここでは最後の文書を取得するように指定しています。他にも最初であればgetFirstDocumentが使用可能です。

       

      ここまでで、リンクつきの文字が流れている状態になりました。次に、実際にNotes文書をXPage上で閲覧できるようにします。

  2. リンクをクリックすると文書詳細を表示する機能(DetailForm)

    1. DetailFormのデータタブで Domino文書データのリンク設定を行います。

       

    2. すべてのプロパティータブで computeWithForm を onsave に設定します。

       

    3. 一度保存してウィンドウを閉じ、再度開きます。

    4. データパレットを選択し、「[コントロールの選択] ダイアログ・ボックス」ボタンを使用可能にします。

       

    5. 流れる文字と文書詳細のフィールドをShift+クリックで複数選択し、ドラッグ&ドロップします。

       

    6. もしウィンドウが表示されたらOKをクリックします。

    7. Dominoで作成したフォームのプロパティーにおいて、Webアクセスを「代わりにXPagesを表示」にし、文書を表示する予定の画面に設定します。私の場合では、「FlowDocument」に設定しました。

       

      以上で、Notes文書をXPage上に表示する機能は完成いたしました。こちらも文書の中で扱うのはテキストのみですので、非常にシンプルです。

  3. 実際に表示する画面(XPage)にカスタムコントロールを配置する

    1. 文字が流れて表示される画面(FlowMessage.xsp)のウィンドウを出し、カスタムコントロールTickerをドラッグ&ドロップします。

       

    2. 同様に、流れている文章の詳細が表示される画面(FlowDocument.xsp)のウィンドウを出し、カスタムコントロール(DetailForm)をドラッグ&ドロップします。


      以上で、表示する画面(XPage)にカスタムコントロールを配置することができました。


      すべてを保存し、最後に文字が流れて表示される画面(FlowMessage.xsp)を開き、Notesでプリビューを押すとNotesで保存した文書を見ることができます。(画像が参照されない場合は、一度ブラウザーでプリビューしてからNotesでプリビューしてください。Localhostが一時的に立ち上がらないケースがございます。)

       

      プリビューをすると以下のような画面が表示されます。
      (カスタマイズしている関係で多少イメージは異なりますが、機能としては相違ありません)

       

      文章をクリックすると実際のNotes文書をXPage上で閲覧することが可能です。

       

      フォントやセルの書式などはXPageでカスタマイズすることが可能です。

      以上で、「文字が流れて表示され、その文字がリンクになっている機能」が完成しました。

実装を終えて

私がこのアプリケーションの実装で感じたのは、NotesでXPagesの機能が利用できることで様々なページを作れるのではないかということです。今まではNotes単体でWebのような表現はできませんでしたが、XPagesでは自由にレイアウトを決めながらビューや文書を参照することができます。

最初は、機能が実現できるかどうかも推測ができず、調査する時間に多大な時間を要してしまいますが、本アプリケーションは、前回の「ビューの列に文書へ添付した画像を表示する機能」を実装した後だったこともあり、約8時間で完成いたしました。一度経験した実装はどのような構築をすればよいのかが既に分かっていますし、構築後にどのような挙動をするのか推測しやすいため、効率的に実装することができます。まだ単純な機能しか持たないアプリケーションに過ぎませんが、これからさらに私自身スキルをつけて皆さんに快適にお使いいただけるようなものを作り上げたいと思います。それでは、次回は「ビューの列に文書へ添付した画像を表示する機能」を絶対パスではなく相対パスで実現できるシンプルな手法についてご紹介していきます。


5. ビューの列に文書へ添付した画像を表示する機能の実装(改良版)

以前の記事(3章)で、「ビューを画像付きで表示できる機能の実装」のご紹介をしましたが、一つだけ問題点がございました。それは、画像を表示させる方法に関する問題です。当初の方針では画像URLを絶対パスで指定しなければなりませんでした。しかし、後に調査をしていく上で、相対パスでの実装が可能であることが判明しました。本章では、前回の実装よりも汎用的な方法をご紹介いたします。

前回の実装方法の問題点 (絶対パスの指定)

  • ローカル環境による絶対パスの指定しかできなかったため、汎用性に欠ける。
  • データ入力の際、絶対パス指定するための入力項目が多いため負担が多い。

今回の実装方法による改善点(相対パスで実現)

  • 文書にアクセスする際に相対的に画像を探しに行くため、サーバー環境にとらわれず画像を取得することが可能である。
  • 文書の作成は、「商品名」の入力と「画像ファイル」の添付だけで良いため、データ入力の手間が大幅に削減できる。

前回の実装方法と大きな違いがあるのは、画像の取得方法です。前回は、画像URLを生成するLotusScriptを記述しておりましたが、今回は、XPages上で相対的な画像URLを取得するJavaScriptを記述します。

以前の実装方針

  1. 適当な名前でビューとフォームを新規作成する
  2. フォームに、商品名、画像ファイル、サーバー名、データベース名、HTMLタグのフィールドを生成する
  3. 保存のタイミングで画像ファイルを表示するための画像URLを生成するスクリプトを記述する
  4. ビューには商品名と、生成したHTMLタグを表示させる
  5. XPages上でビューをそのまま参照する
  6. HTMLタグを保有する列の表示形式をHTMLに設定する
  7. 各文書のリンクを貼り、アクセスすると文書そのものが見られるようにデータのバインドを行う

今回の新しい実装方針

  1. 適当な名前でビューとフォームを新規作成する
  2. フォームに、商品名、画像ファイルのフィールドを作成する
  3. ビューには商品名のみ表示させる
  4. XPages上でスクリプトを記述し、ビューを参照する
  5. 左側に画像を相対パスで参照するスクリプト、右側に文書のリンクを貼るスクリプトを記述する
  6. HTMLタグを保有する列の表示形式をHTMLに設定する
  7. アクセスすると文書そのものが見られるようにデータのバインドを行う

このような改善策を考え出すために、私はまず目標と現状を考えました。目標は、冒頭から述べている「画像URLを絶対パスではなく相対パスで取得すること」です。現状は、「Lotus Notesクライアント上で相対パスによる画像URLを生成するとXPages上でうまく動かないこと」です。つまり、相対パスで動くようにするためには「文書の保存時に画像URLをフィールドに埋め込み、後で参照する」のではなく、「他の場所で画像URLを直接参照する」方法を取らなければいけません。ここで1つの候補として推測できたのが、XPages上で画像を一つ一つ呼び出せるのではないかと考えました。これは、前章でご紹介した機能において、「XPages上のJavaScript記述で指定した文書のフィールドを取得できる」という実装経験から推測できたことです。しかし、本章の機能ではそれに加えビューを表現しなければなりませんでした。

調査した結果、ビューを参照する際に当たり前のように使っていたビューコントロールを利用するのではなく、データ表コントロールを利用すればいいことがわかりました。データ表は、セル内にスクリプトを記述することによって、指定した分まで自動でスクリプトを繰り返し、表形式にまとめるという機能があります。ここでビューに表示されているすべての文書を取得し、一覧表示すれば、あたかもビューを表示しているかのような表現が可能となるのです。一言で言うと、データ表コントロールでビューを作成することができます。 この作成方法は、後の手順(ビューを参照する機能)で詳しくご説明いたします。

それでは、実装過程をご紹介していきます。

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

    1. 適当なDB(ViewWithImage.nsf)を作成します。

       

    2. 新規フォームからフォーム(documentWithImage)を作成します。

       

    3. 以下のフィールドを作成します。
      フィールド名 productName 種類 テキスト
      フィールド名 File 種類 リッチテキスト

       

    4. ビュー(productList)を新規作成し、ビューの選択で、フォーム(documentWithImage)のみ選択するようにし、製品名(productName)を列に参照させます。
      ビューの選択: 実行タイプを“式”に変更 ⇒ SELECT form = “documentWithImage”

       

       

    5. 以上で、フォームとビューの実装は完成です。

      以前、3章でご紹介したフォームとビューの実装と比べ、作成するフィールドやスクリプトの記述を省略することができ、非常にシンプルなものとなります。データ入力の際も、簡単な入力で済ませることができます。この時点で、文書として保存できるようになりましたので、適当に文書を作成してください。

  2. XPagesの実装

    前回と同様、2画面の実装になりますので、2つのXPageと2つのカスタムコントロールを作成します。


    XPage

    • 画像付きビューが表示される画面(viewTop.xsp)

    • ビュー項目のリンクをクリックすると文書が表示される画面(documentTop.xsp)

    カスタムコントロール

    • ビューを参照する機能(cViewTop)

    • Lotus Notes文書をXPage上で表示する機能(cDocumentTop)


    まず初めに部品となるカスタムコントロールから作成します。

    1. ビューを参照する機能(cViewTop)
      1. 新規カスタムコントロールの作成をします。名前を入力し、OKをクリックします。

         

      2. cViewTopカスタムコントロールを開き、下部のデータタブでビューデータをバインドします。
        ビュー名 : productList
        データソース名 : productListView

         

      3. コンテナコントロールからデータ表コントロールをドラッグ&ドロップし、データ表タブの使用するバインドデータを単純データバインディング ⇒ データソース「productListView」、右側のコレクション名をviewEntryとします。(幅や位置などは自由にカスタマイズしてください。)

         

        データ表は、3行で管理されているものです。1行目は一番上のタイトルなどを扱うヘッダー部、2行目は命令が続く限り繰り返す内容の部分、3行目は一番下のフッター部となります。つまり、2行目にビューの列を繰り返し表示していく命令を記述することで、あたかもビューであるかのような表現が可能となります。

      4. 作成したデータ表の1行目にそれぞれ「製品ロゴ」、「製品名」と入力します。

         

      5. データ表の2行1列目に繰り返しコントロールをドラッグ&ドロップし、プロパティーの繰り返しタブでコレクション名をattachment、使用するバインドデータをJavaScriptにし以下のコードを記述します。


        var attachments:NotesRichTextItem = viewEntry.getDocument().getFirstItem("File"); return attachments.getEmbeddedObjects();

         

        この繰り返しコントロールのスクリプトを実行することで、添付ファイルを特定します。繰り返しを使っている理由は文書に複数の画像が添付された場合でも、すべてを取得できるようにするためです。(attachmentとattachmentsは役割が違います、ご注意ください。)

      6. 繰り返しコントロール内に、コアコントロールのイメージコントロールをドラッグ&ドロップします。ポップアップが表示されますので、イメージプレースホルダーの使用を選択してOKを押します。

         

      7. イメージのプロパティーのイメージタブでイメージソースの部分の右側のひし形をクリックし、値の計算を指定します。記述画面が出てきたら以下のようなスクリプトを記述します。


        "/0/" + viewEntry.getDocument().getUniversalID() + "/$FILE/" + attachment.getName();


        ここが本章の目的であった「相対パスで画像を取得する」部分です。

         

         

      8. 表示する画像の大きさを指定するために、イメージタブの高さ、幅を100ピクセル指定しておきます。

         

        ここまでで、画像を文書の順序どおりに表示する機能が完成しました。次に製品名を表示し、文書へのリンクを持つ機能を実装します。

      9. データ表2行2列目に計算結果フィールドを配置し、プロパティーの計算結果フィールドタブのコンテンツの種類を「HTML」にします。

         

      10. 計算結果フィールドのプロパティーの値タブで使用するバインドデータをJavaScriptにし、以下のスクリプトを記述します。


        "<a href=\"documentTop.xsp?documentId=" + viewEntry.getDocument().getUniversalID() + "&action=openDocument\">" + viewEntry.getColumnValue("productName") + "</a>"


        ※編集の都合上改行していますが、改行は行わないでください。

         

        カスタムコントロールを保存します。
        これで、ビューを表示するカスタムコントロールが完成です。プリビューをするためにXPageを作成します。

      11. 新規XPageボタンを押し、名前をviewTopにしてOKを押します。

         

      12. 作成したXPageを開き、右側のカスタムコントロールのcViewTopをドラッグ&ドロップします。

         

      13. XPageを保存し、左上のLotus Notesプリビューボタンからビューを表示します。

         

      14. プリビューすると以下のような、画面が表示されることを確認します。まだリンク先は実装できていないため、リンクをクリックしても正しい動作はしません。

        注意:データベースのアクセス制御をすべてのユーザーに対して管理者権限にしなければプリビュー出来ません。

         

        ご自身で、様々なカスタマイズをすることでページャーの追加、フォントの変更など見た目も変わります。私はカスタマイズを行い以下のような見た目にいたしました。

         

        このように今までのLotus NotesらしくないビューをXPagesでは表現することができます。

    2. Lotus Notes文書をXPage上に表示する機能(cDocumentTop)

      次に、リンクをクリックするとNotesの文書をXPages上で表示する機能を実装します。イメージとして、1 ではビューを参照するような実装をしましたが、今度は文書を参照するような実装に変えるだけですので同じ操作で実現ができます。私もこのような方針でできるのではないかと予測して実装していきましたが、特に問題なくスムーズに完成いたしました。

      1. 新規カスタムコントロール(cDocumentTop)を作成します。名前を入力し、OKをクリックします。

         

      2. cDocumentTopカスタムコントロールを開き、下部のデータタブで文書データをバインドします。

        フォーム名 : documentWithImage
        データソース名 : documentImage

         

      3. 一度カスタムコントロールを保存し、右側のデータパレットからproductName、File両方を選択し(Shift+クリックで複数選択できます)、カスタムコントロールへドラッグ&ドロップします。(もし、データパレットの中身が出てこなかった場合は一度カスタムコントロールを開きなおしてください。)
        データバインドコントロールの選択画面が出てきた場合は、そのままOKをクリックします。

         

      4. リッチテキストフィールドの領域を選択し、削除します。

         

      5. 削除した領域にコンテナコントロールの繰り返しコントロールをドラッグ&ドロップし、プロパティーの繰り返しタブでコレクション名をattachment、使用するバインドデータをJavaScriptにし以下のコードを記述します。


        var attachments:NotesRichTextItem = documentImage.getDocument().getFirstItem("File"); return attachments.getEmbeddedObjects();


        (attachmentとattachmentsは役割が違います。ご注意ください。)

         

      6. 繰り返しコントロール内に、コアコントロールのイメージコントロールをドラッグ&ドロップします。ポップアップが表示されますので、イメージプレースホルダーの使用を選択してOKを押します。

         

      7. イメージのプロパティーのイメージタブでイメージソースの部分の右側のひし形をクリックし、値の計算を指定します。記述画面が出てきたら以下のようなスクリプトを記述します。


        "/0/" + documentImage.getDocument().getUniversalID() + "/$FILE/" + attachment.getName()


        ここでは、繰り返しで取得した添付ファイルを展開するためのパスを記述しています。

         

         

      8. 表示する画像の大きさを指定するために、イメージタブの高さ、幅を100ピクセルに指定しておきます。


        以上で、実装は終了です。

      9. カスタムコントロールを保存し、新規XPageからXPage(DocumentTop)を作成します。

         

      10. 作成したXPageを開き、右側のカスタムコントロールのcDocumentTopをドラッグ&ドロップします。

         

      11. XPageを保存し、前に実装したXPage(viewTop)左上のLotus Notesプリビューボタンからビューを表示します。(DocumentTopからプリビューすると参照する文書がないためエラーになります。)

         

      12. 製品名のリンクをどれかクリックすると文書が表示されます。

         

         

        ご自身で、様々なカスタマイズをすることでページャーの追加、フォントの変更など見た目も変わります。私はカスタマイズを行い以下のような見た目にいたしました。

         

        以上で、ビューの列に文書へ添付した画像を表示する機能が完成しました。

実装を終えて

今回の主な変更点は、前回の実装では絶対パスにより画像URLの受け渡しを行う方針でしたが、データの入力の手間やローカル環境制約の問題が考えられました。 しかし、今回の実装では、XPage内で画像URLを取得するため、どのような環境下でも動作しますし、ユーザーが文書を登録する際もできるだけ少ない入 力項目でこの機能を実現することができます。前回は与えられた課題を形にするだけで精一杯な実装でしたが、実現可能かどうかをもう一度冷静になっ て調査したことにより質の良いアプリケーションになりました。 XPagesでは何ができるのかという引き出しが今回の実装においても広がりましたし、今後作ってみたいアプリケーションも様々見えてきました。私もXPagesを学び始めてから現在で2週間がたちます。まずは、仕事として与えられた2つのアプリ構築ミッションを充分な形で達成することができて非常に満足です。

・・・と、満足しているや否や新しいミッションが私に課されました。マネージャーに聞いたところ、「次はお題を自分で考えて、魅力的なアプリケーションを作って。どう魅力的なのかも説明できるようにね。」とのことです。つまり、2週間の経験で培った自分のスキルを限界まで出して、XPagesが魅力的な技術であることを示せるようなアプリケーションの構築が次回の挑戦となります。本記事を見てくださっている皆様にも魅力的なアプリケーションであると思っていただけるよう全力で取り組みたいと思います。この模様は、次回の記事でご紹介させていただきます。


6. マネージャー承認アプリケーション

前回までは、2つのアプリケーションの実装過程をご紹介いたしました。このアプリケーションは、マネージャーからアプリケーションの題目は指定されていました。しかし、今回のミッションは「お客様に魅力的に思っていただけるアプリケーション」を自分で考え、今までで培ってきたXPagesの経験をフルに活かしたものを作り上げるというものです。

当然、最初に「どのようなアプリケーションがお客様に魅力的に感じていただけるのか」を考えました。しかし入社1年目の私からすると、業界知識もまだ深く認識しているわけではないので何が魅力的なのか想像することが非常に困難でした。想像できないことを考えてもキリがないので、次は私自身が会社で不便に感じたこと、社内の人が不便に感じていることは何だろうか、考えることにしました。そこで直感的に思いついたのがこれです。

「マネージャー大変そうだな~。」

社内の人(マネージャー)が何かの要因によって負担かかっているからこのように感じたのです。では何が負担なのでしょうか?この要因を私なりに考えた結果が、

「部下の様々な申請を承認するのは大変そうだ」

ということです。1年目の私でも交通費申請、年次有休休暇申請などマネージャーの承認を受けていたので、これが部下全員分の承認となると非常に大変だろうという想像は容易につきました。弊社だけではなく、どの企業でも行われている業務の一部であり、少しでも承認業務の負荷を減らすアプリケーションを作成できれば、お客様にも魅力的に感じていただけるのではないかと思いました。そこで、マネージャーに承認業務でどんな物があったら便利かヒヤリングしたところ、承認時に過去の同一内容の申請や申請者が過去に申請した履歴と比較が簡単にできると便利だというコメントももらいました。

そこで以下のようなアプリケーションを考えてみました。

アプリケーションの目標

マネージャーの承認業務を1つの画面内で行えるようにする

申請できる項目

経費申請、年次有給休暇申請、お客様先訪問記録申請

※今回はサンプルとして3項目挙げておりますが、項目数の制限などはございません。

アプリケーションのメニュー

マネージャー

  • 最新申請一覧 ・・・ 承認待ちの申請のみを表示し、マネージャーはこの画面にあるすべての項目を承認すれば良い。
  • 社員別申請一覧 ・・・ 特定の社員のすべての申請(ドラフト・承認待ち含)を見ることができる。
  • 申請項目別一覧 ・・・ 特定の申請項目のすべての申請を見ることができる。
  • 承認状況別一覧 ・・・ 特定のステータスのすべての申請を見ることができる。

申請者

  • 経費申請 ・・・ 交通費・宿泊費などを申請できる。
  • 年休申請 ・・・ 年次有給休暇を申請できる。
  • コールメモ申請 ・・・ お客様先への訪問記録を申請できる。

条件

  • サンプルアプリケーションであるため、ユーザーは選択して選ぶ。
  • 本来ならばサーバー上で運用するが、今回はローカルで行う。
  • アクセス制御はつけず、誰でも操作することができる。
草案の画面イメージ (最新申請一覧)
草案の画面イメージ (最新申請一覧)

 

マネージャーから実装の許可がおりたので、まずはXPagesの学習を2日かけて行いました。学習内容は代表例を挙げますと、メニュースクリプトの記述の仕方、同一画面に文書表示する方法、イベントの扱い方(OnClickなど)です。実装には3.5日間をかけ、以下のようなマネージャー承認アプリケーションが完成いたしました。

マネージャー承認アプリケーションの画面 (最新申請一覧)
マネージャー承認アプリケーションの画面 (最新申請一覧)

 

アプリケーション全体のポイント

  • 申請・承認という業務をこのページですべて行うことができるため、業務の集中化・効率化ができる
    • 異なるデータベースから同一画面内に必要なビューを集約することができるため、データベースの場所を気にすることなく業務を完遂できる
    • Ajaxの技術を用いることにより、ページ遷移の少ない操作ができる
      • 新しいウィンドウを開くことなく、文書の閲覧・編集・保存ができる
      • ビューと文書を同時に見ることができる
    • タブ表示やボックス検索により、ユーザーは直感的な操作でページを利用できる
  • 容易な実装が可能である(私でも3.5日で実装できました)

一見、ポイントを見る限りでは非常に複雑な実装をしているように思われてしまいがちですが、XPagesでは高度な技術も直感的な操作で実装することができます。例えば、Ajaxの技術を用いた部分的な更新をする際には、イベントタブのサーバーオプションのラジオボタンで部分更新を選択し、更新する部分(コンテナコントロールのパネル)を指定するだけで実装が完了です。

 

また、異なるデータベースから同一画面内にビューを集約させることも、複雑なスクリプトを書く必要は一切なく、直感的なマウス操作で設定することができます。以下では、1つのビューの画面を図に表示してますが、これを1つのカスタムコントロールとして、XPage(画面)に自在に配置していけば集約ができます。

 

このように、アプリケーションのポイントで記載した項目は、決して開発スキルに長けている方しか実装できないことはなく、まだXPagesを覚えて間もない私でも実装ができるのです。これがXPagesの特長といえます。

それでは、いくつかの画面のポイントや悩んだ点についてご紹介していきます。

(1)マネージャー側の画面

1. 社員別申請一覧画面
社員別申請一覧画面

 

社員別申請一覧画面では、各ビューに申請者を絞り込むコンボボックスを実装しています。このボックスは選択された際にAJAXの技術により部分更新をさせているので、他のビューで一度表示した文書などをそのまま残すことが可能です。

今回は申請者のみによる絞込みですが、もちろん違う項目で絞込みを行うこともできますし、さらに絞込むことも可能です。

2. 項目別申請一覧
項目別申請一覧

 

項目別申請一覧はタブ形式で各項目のビューを表示できます。タブ形式の表示を構築する際、スクリプトを書く必要はなく、マウス操作で実装します。

 

3. 最新申請一覧
最新申請一覧

 

最新申請一覧は、「承認待ち」になっている文書のみを一覧として表示します。つまり、マネージャーはこの画面を見ることで承認するべき申請項目が把握できます。「承認待ち」の状態のときに承認ボタンが表示されるように実装しており、マネージャーが承認ボタンを押すと、「承認済み」に変わり、今後このビューには表示されなくなります。

この一覧作成で悩んだ点が1箇所ありました。それは「承認待ちの文書だけをビューとして表示する方法」です。最初は、当然スクリプトを書くだろうとは予測していたのですが、調査した結果驚くほど簡単な実装方法を発見しました。元々、Notesのビューを承認状況のステータスによってカテゴリーに分けていたため、XPages上では、以下のような表記のみで「承認待ち」のみ表示することができました。

 

このように、ビューのプロパティー -> データタブ -> カテゴリー名によるフィルタリングで、特定の文書のみを一覧として表示することができます。

(2) 申請者側の画面

このアプリケーションは、マネージャー承認ができるものとして実装する予定でしたが、1点不便だと感じる点がありました。それは、申請者側がNotesの本来のフォームから申請しなければならないことです。私の実装スケジュールでは承認側で10日ほどを考えていましたが、予想以上に手軽に実装できたため、申請者側もこのXPageで申請できるようなものに拡張することにしました。申請項目は承認項目に合わせ、経費申請、年休申請、コールメモ申請の3つのパターンを実装しました。各申請画面は、フォームの違いのみでXPageの構造としては差異がないため、新規経費申請画面をご紹介します。

1. 新規経費申請
新規経費申請

 

新規経費申請画面では、申請者側がスムーズに申請を行えるような工夫を行いました。大きな点が2点ございます。

  • 下にビューを表示させることにより、申請途中でも自分の申請をチェックできる
  • 未申請(ドラフト)の文書に関しては、下のビューをクリックすることで今まで書いていた内容が上の申請フォームに挿入され編集・申請できる

1点目の工夫では、Ajaxの技術を利用しています。申請途中に下のビューを操作しても更新されるのはビューのみです。ですので、文書の情報は失われることなく他の申請状況をチェックできます。また2点目に関しては、ビューのリンクをクリックすることで、申請フォームに文書の情報を呼び出すことができます。これによって、ドラフトに気軽に文書を保存でき、時間が空いたときに編集を再開することができます。

申請者側のXPageの実装に関しては、マネージャー側の実装ができれば特別な知識は必要ありません。中の一つ一つの構造はほとんど変わらないためです。ですので、ビューや文書の扱い方をある程度理解することができれば、様々なページを作ることができますし、アイデアによっては実業務に適用できることも充分にあると考えられます。

(3) すべての画面に現れる重要な告知

ここまでで、アプリケーションとしての機能は達成できていますが、最後のおまけとして上部に文字を流して重要告知を行う機能も付加いたしました。これは第4章でご紹介しました機能をそのまま利用しております。流す内容は、承認業務ということで総務からの承認期限の告知にいたしました。

 

これは外部に配置をしているため、どこにアクセスしても常に流れています。重要な告知がある場合には、”いつでも表示されている”、”流れている”というような目立つ工夫をすることで見ていただけるのではないかと思います。

また、この流れている文字はリンクとなっているため、この告知に関する詳細を閲覧することが可能です。

 

以上が、今回実装いたしましたマネージャー承認アプリケーションのご紹介になります。

最後に今までのNotesのビューとXPagesでの違いを比較していただければと思います。

今までのNotesビュー
今までのNotesビュー

 

XPages
XPages

 

実装を終えて

今回の実装では、今までとは違い、単機能ではなく業務を想定することにチャレンジしました。草案段階では、実際に承認業務の負荷を減らすことができるのかという不安がありました。しかし完成した本アプリケーションを先輩社員に実際に操作してもらったところ、良いコメントをたくさんもらいました。この連載でご紹介するだけではなく、実際のお客様向けデモで使ってもらえることになりそうです!そこでどのような反応をいただけるのか今後も楽しみです。

XPagesは、機能はもちろんのこと、私の中では今回改めて「開発スピードの向上」を実感いたしました。1カ月前までは「XPages」という名前しか知らなかった私ですが、今ではこのアプリケーションを作れる程、スキルアップすることができました。

今後は、できることならば実際に業務として使用しているDBをXPages化することやiPhoneアプリをXPagesで作ることにもチャレンジして行きたいと考えております。

最後に、今回作成しました「マネージャー承認アプリケーション」はこちらのページからダウンロード可能ですので、Notes/Domino 8.5.2をお使いの方は是非アプリケーションを操作してみてください!

アプリケーション起動方法

(1) サーバー環境がある場合

Notesで開く場合

データベースのプロパティー⇒起動タブ⇒指定されたXPagesを開く

 

ブラウザーで開く場合

以下のアドレスをブラウザー上に入力

http://サーバー名/アプリケーション.nsf/mgrHome.xsp

(2) サーバー環境がない場合

Lotus Domino DesignerのプリビューモードでmgrHome.xspを開く。

(Notes、ブラウザーのどちらでも起動ができます)

 


7. 簡単に実装:「ファイルのアップロード&ダウンロード」

前章では、今までに培った実装スキルを活かしてアプリケーションを作成しました。しかし、自分のスキルを形にすることはできたものの、まだまだXPagesの機能はたくさんございます。そこで、本章では、その後私が自習をする中で便利だと感じたXPagesの実装についてご紹介していきます。その中でも、最近実装にトライしたものが「ファイルのアップロード&ダウンロード」です。

今までのNotes上では、リッチテキストフィールドにファイルをドラッグ&ドロップで行う機能はデフォルトでありましたが、Webアクセスでは、HTMLタグやLotusScriptを記述して実装されていた開発者の方も多かったのではないかと思います。後者を、XPagesでは容易に実現することができます。ぜひ本章で、ノンコーディングな実装方法をご覧ください。

完成イメージ
完成イメージ

 

それでは、その実装手順をご紹介していきます。

フォーム・ビューの実装

  1. 新規にアプリケーションを作成し、Lotus Designerで以下のようなフォーム(document)を作成します。

    フィールド

    • title テキスト 編集可能
    • file リッチテキスト 編集可能

     

  2. 次に以下のようなビュー(view)を作成します。

    • タイトル 列の値:表示をフィールドにし、”title”を選択

     

  3. フォームとビューを保存して閉じます。

XPagesの実装

以下のような画面を作成します。

  • 一覧を表示する画面(viewPage)
  • 文書を作成する画面(documentPage)
  1. 一覧を表示する画面(viewPage)を作成します。

     

  2. 作成したXPageにコンテナコントロールのビューコントロールをドラッグ&ドロップします。

     

  3. 作成したビューの列の値の部分を選択し、プロパティ -> 表示タブ -> 「列の値をリンクとして表示」にチェックを入れ、「読み込み専用」を選択します。

     

  4. viewPageを保存します。
  5. 文書を作成する画面(documentPage)を作成します。

     

  6. documentPageの編集画面で、右側のツールペイン -> データタブ -> データソースからデータソースの定義を選択します。

     

  7. ポップアップ画面では、以下のような設定をしてOKを押します。
      
    データソース:Domino文書
    アプリケーション:現在
    フォーム:document
    データソース名:document1
    デフォルトアクション:文書の作成
    親文書ID:(右側のひし形 -> 値の計算) viewScope.document1UNID

     

  8. データタブに指定したデータソースのフィールドが表示されるので、フィールドすべてを選択し、ドラッグ&ドロップします。

     

  9. リッチテキストフィールドを削除します。

     

  10. リッチテキストフィールドがあった部分に、右側ツールペイン -> コントロールタブ -> コアコントロール -> 「ファイルのアップロード」をドラッグ&ドロップします。同様に、その下に「ファイルのダウンロード」をドラッグ&ドロップします。

     

  11. 「ファイルのダウンロード」では、表示する項目をプロパティ -> オプションのチェックボックスで自由に設定することが可能です。ここでは、すべてにチェックを入れておきます。

     

  12. 「ファイルのアップロード」、「ファイルのダウンロード」は新規に作成したコントロールですので、まだアップロードしたファイルがfileフィールドに格納されることはありません。そのバインディングをするために、プロパティ -> データタブで以下のような設定をそれぞれします。(アップロード、ダウンロードそれぞれ設定が必要です)

    単純データバインディング

      
    データソース名:document1
    バインド先:file

     

  13. 文書を保存できるように保存ボタンを作成します。右側のコントロール -> コアコントロール -> ボタンをドラッグ&ドロップします。その後に、ボタンのプロパティ -> ラベルを「保存して閉じる」に変更します。

     

  14. 次にボタンのアクションを設定するために、イベント -> onclick -> シンプルアクションを選択し、以下の順番でアクションの追加を行います。
    1. アクションの追加 -> アクション:文書の保存 -> OK
    2. アクションの追加 -> アクション:ページを開く -> 開くページの名前:viewPage -> OK

     

     

  15. documentPageを保存します。
  16. viewPageを再度開き、3.で作ったリンクと文書のバインディングを行います。列の値(title)を選択し、イベント -> onclick -> シンプルアクション -> アクションの追加をします。
      
    アクション:ページを開く
    開くページの名前:documentPage
    ターゲット文書:文書を開く
    文書ID:右側のひし形の値の計算を選択 -> viewScope.document1UNIDと記述

     

  17. ビューの下の部分に新規文書作成のためのボタンを作成します。コアコントロールのボタンをドラッグ&ドロップし、ラベルの部分に「新規作成」と入力します。

     

  18. イベントタブにおいて、onclick -> シンプルアクション -> アクションの追加をします。
      
    アクション:ページを開く
    開くページの名前:documentPage
    ターゲット文書:新規文書

     

  19. viewPageを保存します。
  20. viewPageをブラウザでプリビューします。(localhostサーバーへの接続が確立できる環境でないと表示されない場合がございます。)

     

  21. 新規作成ボタンを押し、タイトルと適当な画像ファイルをアップロードし、保存します。(表記の都合上、フォントを大きめに設定しております。)

     

     

  22. ビューに文書が表示されるので、リンクをクリックします。

     

  23. 図のようにファイルがダウンロードできる状態となっていることが確認できます。

     

  24. 以上でファイルのアップロード&ダウンロードが実装できました。

まとめ

本章では新規にファイルのアップロード&ダウンロードの機能を実装するための手順をご紹介しましたが、ご覧いただけましたようにJavaScriptの記述はわずかに2箇所(記述する内容としては1種類)でした。特に、ファイルのアップロード&ダウンロードの部分では一切記述は行っておりません。XPagesでは以前までスクリプトを記述していた機能をマウス操作で行ない、開発者にとってもより直感的な操作で実装することができます。LotusScriptは得意だけどWeb化に伴ってJavaScriptを一から覚えるのはどうも・・・と懸念されている方にも安心してページの構築していただけるのではないかと思います。本章では、ファイルのアップロード&ダウンロードに関してでしたが、これは簡単に実装できる1部分に過ぎず、まだまだ様々な機能を実装することができます。私自身日々の勉強において、何か便利な実装方法や機能を新しく発見した場合は、この連載を通して皆様にお伝えしていきます。次章もご期待ください!


8. XPagesで全文検索機能を利用するには?

最近、嬉しいことにXPagesに関して様々な方と接する機会が多くなってきました。XPages の実装に関する色々な話題の中でもっとも数多くいただく質問がこれでした。

「すいません、XPagesでは全文検索は使えないのでしょうか?」

今までの記事を読んでいただいている方はお気づきの通り、検索関連は一度も手をつけたことはありませんでした。つい先日、恥ずかしながら講師として参加させていただいたワークショップにおいても、前方一致の検索のガイドはあったものの、全文検索については触れていませんでした。ワークショップで数名の参加者の方から全文検索について質問をいただいたこともあり、会社に戻り調査をしようとしていたところ、ある参加者の方から全文検索の実装方法についてご連絡をいただきました。この方法は、きっと多くの方が悩んでいらっしゃると思いますし、私の勉強にもなりましたので、本章で取り上げさせていただきたいと思います。

XPagesで全文検索を利用したイメージ
XPagesで全文検索を利用したイメージ

 

 

全文検索はNotesクライアントの検索バーで検索する機能に相当します。

 

Notesクライアントではクライアントのメニュー画面に「検索バーの表示」がありますが、XPagesではWebベースのインターフェースなので、ページの一部のコンポーネントとして配置する必要があります。これは複雑なものではなく、私でも30分ほどで実装することができました。調査、文書作成含めた時間ですので次からは10分もあればできるのではないかという印象です。

それでは、実装方法をご紹介していきます。

実装するもの

  1. フォームの実装
  2. ビューの実装
  3. XPageの実装

    (1)検索フォーム画面の実装
    (2)検索結果ビュー画面の実装

1. フォームの実装

以下のようなフォームを作成します。一例として、私は個人住所録のようなフォームを想定しました。

フィールド

LastName テキスト
FirstName テキスト
Age テキスト
Address テキスト

 

2. ビューの実装

以下のようなビューを作成します。一例として、私はフォームのフィールドをそれぞれ参照しました。

 

注意)全文検索はデータベースに索引がつけられていないとできませんので、もし設定をしていなかったらデータベースのプロパティ⇒虫めがねタブ⇒索引の作成を行ってください。

 

3. Xpageの実装

1. Search,Resultという名前でそれぞれXPageを作成します。

 

2. Search画面に編集ボックスコントロール、ボタンコントロールを配置し、それぞれの以下の設定をします。

 

編集ボックスコントロール
データ⇒使用するバインドデータ「詳細」⇒使用「スコープ変数」、パラメータ「要求の範囲」、変数名「name」

 

ボタンコントロール

ボタンタブ⇒ラベル「検索」、名前「searchButton」

大項目イベントタブ⇒onclick⇒以下のアクションの追加

1. 分類「基本」、アクション「スクリプトの実行」、言語「JavaScript(サーバーサイド)」、スクリプト「sessionScope.name=requestScope.name」

2. 分類「基本」、アクション「ページを開く」、開くページの名前「Result」

 

 

3. Result画面にビューコントロールを配置します。ビューは先ほど作成したものです。

 

4.配置したビューのプロパティを以下のように設定します。

データタブ⇒結果の表示で検索を「値の計算」にし、JavaScript「sessionScope.name」を記述

 

 

5. すべてを保存し、ブラウザーから開いてみます。

 

↓ ↓ ↓

 

 

↓ ↓ ↓

 

以上で、全文検索の機能を追加することができました。

この機能ですが、Notes独特の検索書式に対応しております。
例)[FirstName] contains “卓”

まとめ

本章では、全文検索について取り上げさせていただきました。この件についてよく質問としてお聞きすることがあるということは、おそらく多くのユーザーの方が全文検索を日常的にお使いであるからだと思います。XPagesでの全文検索は多少実装に手を動かす必要はありますが難しいものではありません。フローで考えても、「Note/Dominoにリクエストを送信⇒Notes/Dominoから返ってきた一覧を受信⇒表示」という単純なものです。今回は、全文検索がXPagesを経由してでもできるのかという点に関してご紹介させていただきましたが、検索結果のソート順やデザインもXPagesでは自由に設定できるため今まで以上に柔軟性があります。まだ具体的には浮かびませんが、XPagesで検索をかけることで目的の情報にアクセスするのが早くなる一例なども今後見つけていきたいと思います。
次章も何か多くの方がお困りのことかつ簡単に実装できるものを題材にしていく予定です。ご期待ください!


9. XPages 技術者コミュニティーの開設

前章までは、自身で作成したサンプルアプリケーションや一部の機能の実装方法などをご紹介してきました。この連載では、私がXPagesを学んでいく過程をお伝えしておりますが、それだけではなく何よりも皆様にXPagesの魅力を知っていただきたいということが大前提としてあります。もちろん、私が一人で皆様のXPagesに対する不安や不明点を解決して魅力に変えることができるのであればこの上ないのですが、現実ではそうもうまくいかないものです。この連載記事でもサンプルアプリケーションや一部の機能をご紹介してはおりますが、XPagesの情報はまだまだ数え切れないほど存在しますし、この記事を通してすべてを発信することはできません。一方、Web上にはXPagesの情報がたくさん存在します。皆様は、アプリケーション開発Wiki日本語サンプルアプリデモサイトといったページをご存知でしょうか?例として挙げたサイトでは、技術的なXPagesの情報やビジネスパートナー様の作成したサンプルアプリケーションが多数掲載されております。では、このようなサイトをどうやって見つければ良いのでしょうか?Web全体ではXPagesの情報は多数存在しますが、どの情報がどこにあるのか明確にされたサイトはありません。皆様も探したい情報がなかなか見つからない、この情報に関してもう少し聞いてみたいと思われる方が多いと思います。そこで、XPagesに関連した全ての情報を集約する場として、さらにはXPagesの情報に関して様々なディスカッション、コミュニケーションができる場として、このたび「XPages技術者コミュニティー」を開設いたしました。本章では、このXPages技術者コミュニティーに関してご紹介させていただきます。

 

URL: http://XPag.es/?XPagesJapan

本コミュニティーは、XPagesに関係する方ならどなたでも参加可能です。また、参加メンバーは情報を参照するだけではなく、気軽にディスカッションを行うこと、他のメンバーへ情報を提供することも可能です。単なるWebページでしたら一方通行の情報発信になりますが、コミュニティーでは常に双方向に情報のやり取りができる点が最大のメリットです。コミュニティーが提供する機能は以下の通りです。

 

  • メンバー

    コミュニティー内のメンバーリストを参照することができます。また、メンバーのプロフィールなどを参考にしてコンタクトすることができます。中には、XPages 以外の意外なスキルに卓越したメンバーもいます。

  • メッセージ・ボード

    メンバー間で気軽に交流することができます。トピック制限はありませんので、ちょっとした情報交換をしたい場合にお使いいただけます。

  • ブックマーク

    XPagesに関係したサイトをリンク集としてまとめています。もちろん、有用な情報が載ったサイトはメンバーなら誰でもブックマークすることができますし、また、タグ検索により自分が必要な情報サイトをすばやく見つけ出すこともできます。本連載記事「新人SEが学ぶXPages」のリンクもこのブックマーク内に入っております。

  • Wiki

    XPagesに関係するビジネスパートナー様ソリューションやサンプルアプリケーションを掲載していきます。サンプルアプリケーションに関しては、作成者が自由に投稿できます。

  • ブログ

    XPagesに深く関係しているメンバーが発信する情報を閲覧できます。

  • ファイル

    XPagesに関係するファイルを共有できます。ダウンロードはもちろんのこと、メンバーが自由にアップロードすることも可能です。

上記のようなコミュニティー内の機能を大いに活用していただくことで、XPagesに関する情報を探す時間の削減、新たなスキルの発掘ができるのではないかと思います。本コミュニティーが、皆様の理想のNotesアプリケーション作成の一助となれば幸いです。

まずは、お気軽にXPages技術者コミュニティーに参加してみてください!

XPages技術者コミュニティー参加方法

  1. http://XPag.es/?RegisterでIDを取得してください。

    ※コミュニティー参加にはIBM IDが必要になります。

     

  2. http://XPag.es/?XPagesJapanにアクセスします。

     

  3. ページ内右側の「このグループに参加」ボタンを押します。

     

  4. 以上で完了です。

10. 既存資産の活用:XPageからエージェントを呼び出す

前々回、第8章「XPages で全文検索を利用するには?」の末尾で、多くの方がお困りのことを題材にするという宣言をしましたので、本章では「既存資産の活用」というトピックをご紹介します。Lotus Notes/Domino を昔からお使いいただいているユーザーの方のほとんどは、 バージョンを上げても今までのデータベース内にあるデータを残したいと考えていらっしゃるでしょう。XPages は新技術ではありますが、決して既存のNotesデータベース設計を一から作り直さなければいけないということはありません。例えば、ワークフローなどでステータス変換を行う既存のエージェントをXPagesのインターフェースから再利用できます。 今回は、XPageからエージェントを呼び出し、実行させるイメージをつかんでいただこうと思います。私も、とあるユーザーの方からこのご質問を受けたことでエージェントが簡単にXPageから呼び出せることを勉強させていただきました。

題目: 申請処理で「承認ボタンを押すと”承認待ち”のステータスを”承認済”に変更するエージェント」を呼び出すアプリケーション

承認待ちの申請文書

 

↓承認ボタンを押すと・・・

承認済の申請文書

 

それでは実装過程をご紹介していきます。

普段通り、フォーム・ビューを実装したあと、エージェントおよびXPageの実装をしていきます。括弧内は私が設定した名前になりますので、参考にしてください。

1. フォーム・ビューの実装

1-1. 新規にDB(ApprovalAgent.nsf)を作成します。

1-2. 新規フォームからフォーム(SubmitForm)を作成し、下記の通りにフィールドを作成します。

フィールド名種類
statusコンボボックス編集可能 (リスト 承認待ち,承認済)
Nameテキスト編集可能
expenseテキスト編集可能
pathテキスト編集可能

 

1-3. フォームを保存した後、新規ビューからビュー(ApprovalView)を作成し、下記の通りに列を作成します。

列名参照フィールド
承認状況status
名前Name
交通費expense

 

1-4. ビューを保存します。以上で、フォームとビューの実装は完了です。

2. エージェントの作成

2-1. ステータスを承認済に変更するエージェント(ApprovalAgent)を作成します。

スクリプト
Option Public
Option Declare

Sub Initialize
    Dim session As New NotesSession
    Dim doc As NotesDocument

    Set doc = session.DocumentContext

    Call doc.ReplaceItemValue("status", "承認済") ‘ステータスを変更する
    Call doc.Save(True, False)
End Sub

 

2-2. エージェントのプロパティ→セキュリティタブで「Webユーザーとして実行」にチェックを入れます。

 

2-3. 同じくプロパティ→基本タブで実行時オプションの対象を「なし」にします。

 

2-4. エージェントを保存します。以上でエージェント周りの設定は完了です。XPageを用いるとWebから実行するため、2-2,2-3のような処理が必要になります。

3. XPageの実装

3-1. 新規XPageからXPage(View)を作成し、コンテナコントロールのビューコントロールをドラッグ&ドロップします。

 

3-2. ビューのデータソースを1-3で作成したビューに設定し、OKを押します。

 

3-3. 1列目のビューの列を選択し、プロパティ→表示タブの「列の値をリンクとして表示する」にチェックをいれ、文書のオープンモードを「編集」にします。

 

3-4. XPage(View)を保存します。次に新規XPageからXPage(Form)を作成し、右側のデータタブをクリックします。

 

3-5. 続けてデータソースから「データソースの定義」を選択し、下記の通りにデータソースを指定します。

  
データソースDomino文書
フォームSubmitForm
データソース名submitForm
デフォルトアクション文書の編集
フォーム検証の実行文書ロード時

 

3-6. データタブの下にフォーム(SubmitForm)で作成したフィールドが表示されるので、すべてのフィールドを選択し中央へドラッグ&ドロップします。

 

3-7. データバインドコントロールの選択画面が表示されるので、フィールド「status」のコントロールをコンボボックスに変更しOKを押します。

 

3-8.出来上がったXPage上のフォームのstatusコンボボックスを選択し、プロパティ→コンボボックスタブの「読み取り専用」にチェックを入れます。

 

3-9. 表を右クリックし、行を追加した後、最終行に承認ボタンを追加します。(図には「Viewに戻るボタンがありますが、今回のご紹介で直接影響するものではありません)

 

3-10. 承認ボタンを選択したままイベントタブを選択し、onclickイベントを以下のように設定します。

・文書の保存

 

・スクリプトの実行

記述するJavaScript(サーバーサイド)

var doc = submitForm.getDocument(); ‘現在のドキュメントオブジェクトを取得
var agent = database.getAgent("ApprovalAgent"); ‘ApprovalAgentを取得
agent.runWithDocumentContext(doc);	‘エージェントを実行
agent.recycle();
context.reloadPage();

 

3-11. 最後にXpage(View)のビューのプロパティ→ビュータブから「実行時に、次を使用して選択した文書を開く」を「Form」に設定します。

 

3-12. 2つのXPageを保存し、XPage(View)をブラウザのプリビューモードで開きます。

 

 

 

3-12. 以上でXPageからエージェントを呼び出し、実行することができました。

まとめ

実装過程でご紹介したように、XPages からエージェントを実行するためには、

  • XPages用にエージェントのプロパティを2点変更する
  • XPagesのサーバーサイドJavaScript で5行のスクリプトを記述する

の操作を行うだけで実現ができます。 XPages のような新しい技術を使う場合に、今までコストをかけて実装してきたNotesデータベースのエージェントが使えなくなってしまうのではないかと思われがちですが、上述したように少しのお作法でお使いいただくことが可能です。

さらには、エージェントのような既存資産を守るだけではなく有効活用することができます。 XPages はNotes データベースをWebアプリケーションとして利用できるようにする技術ですので、端末に依存することなくWebブラウザが利用できる環境であればどこからでもエージェントを実行することができます。例えば今回題材にした承認業務もわざわざNotesクライアントが導入されている端末で作業する必要がなくなります。こういったことから、XPagesを用いることで業務の質を崩すことなく、効率的なワークスタイルを築けるかもしれません。

さて、次回ですがそろそろXPagesスマートフォンアプリケーションをご紹介したいと考えております。私自身にとっては大きな壁ではありますが、様々な場所からスマートフォンアプリケーションの要請が出てきているので、挑戦してみたいと思います。ご期待ください!


11. 移動時間を有効活用:スマートフォンから簡易ワークフローを回す

前章では、「XPageからエージェントを呼び出す」方法についてご紹介しました。シンプルなエージェントを簡単な実装で呼び出せることをイメージしていただけたのではないかと思います。このようにXPagesは、既存のNotes DBを簡単にWebアプリケーション化する事ができます。ただ、XPagesを使うメリットはこれだけではありません。例えば、「デバイスを問わない」Webアプリケーションの利点をうまく利用することができます。今、流行りのスマートフォンからでも、XPagesを用いれば既存のNotes DB上の操作(入力、ボタンアクションなど)ができます。時間や場所にとらわれず様々なスタイルで業務を遂行する、これがXPagesの大きな魅力の一つです。

さて、本章では6章、10章でも宣言をしていたXPagesのスマートフォン用アプリケーションのご紹介をしたいと思います。もちろん何も細工していないXPagesのアプリケーションをスマートフォンから見ることはできますが、画面の大きさの違いで思わぬ箇所で改行してしまったり、文字サイズが小さいなど不便な点が多くあります。よって、スマートフォンから利用する場合はスマートフォン専用のUIを組み込むことによって、より操作しやすい画面の設計ができます。
そのためには、スマートフォン用のフレームワークが必要になります。今回は iUI * というオープンソースを利用することにしました。もちろん他のフレームワークを利用することもできますので、本章で利用するiUIは一例としてご紹介します。

内容は、前章でご紹介しました「XPageからエージェントを呼び出す」方法をスマートフォンから操作できるように実装するというものです。

完成イメージ

承認待ちの申請一覧
承認待ちの申請一覧

 

承認待ちの申請文書
承認待ちの申請文書

 

↓承認ボタンをタップすると・・・

承認済の申請文書
承認済の申請文書

 

それでは実装手順をご紹介していきます。
今回は前回作ったアプリケーションに追加実装をしていきます。

1. フレームワークをXPagesにインポートする

1-1. iUIを公開しているサイトから iui-0.40-dev2.zip をダウンロードします。

1-2. iUIを展開し、以下のファイルを確認します。

 Web-app > iui > iui.js
 Web-app > iui > iui.css
 Web-app > iui > t > default以下すべてのファイル

1-3. Domino Designerから前章で作ったアプリケーション(ApprovalAgent.nsf)を開きます。

1-4. アプリケーションナビゲータのリソース>ファイルを開き、1-2で確認したファイルすべてをインポートします。まとめてインポートするにはShiftなどを使用します。

 

1-5. 以上で、フレームワークのインポートは完了です。各XPageでJavaScriptやスタイルシートを定義することで使用可能となります。

2. XPageの実装

2-1. 申請一覧を表示する画面(mView.xsp)、申請項目を表示する画面(mForm.xsp)を新規に作成します。

 

2-2. 申請一覧を表示する画面(mView.xsp)を開き、プロパティ⇒データタブでデータソースを「ApprovalView」に指定します。

 

2-3. プロパティ⇒すべてのプロパティタブの基本セクション「createForm」をfalseにします。これはデフォルトではtrueになっていますが、trueの場合、iUIのスタイルシートが適用されなくなるために施す処理です。

 

2-4. ここからはエディターのソースを直書きしていくので、こちらもご参考にしてください。まず始めにエディターのソースタブをクリックし、以下のようなWebページのサイズを決める定義を記述します。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1;
minimum-scale=1; user-scalable=no;" />

 

2-5. 次に先ほどインポートしたリソースのどれを使用するのか定義する記述をします。ここではインポートしたiui.css , iui.js , default-theme.css を使用します。

<xp:this.resources>
	<xp:styleSheet href="iui.css"></xp:styleSheet>
	<xp:styleSheet href="default-theme.css"></xp:styleSheet>
	<xp:script src="iui.js" clientSide="true"></xp:script>
</xp:this.resources>

 

2-6. ここから画面の設計に入っていきます。iUIライブラリの仕様に沿って以下のようなコードを記述します。ここでは画面図の赤枠の部分を設計することになります。

<div class="toolbar">
	<h1 id="pageTitle"></h1>
	<a id="backButton" class="button" href="#"></a>
</div>

 

 

2-7. <ul>タグを使って、ページのタイトルやidを定義します。

<ul id="home" title="経費申請(承認待ち)" selected="true">
</ul>

 

2-8. 設計タブに戻り、コンテナコントロールの繰り返しコントロールを2-7で作った<ul>タグの中に配置します。ドラッグ&ドロップが困難な場合は、1度適当に配置し、アウトラインで調整してください。

 

2-9. 繰り返しコントロールのプロパティ⇒繰り返しタブで、名前を空白に、反復セクションの中は、JavaScriptを選択し「approvalView」と入力します。

 

2-10. 同じ箇所のオプションセクションで繰り返し限度を右側のひし形から「値の計算」をクリックして下記のような記述をし、コレクション名をrowDataと入力します。ここで限度を値の計算にしているのは、作成されている文書の数を限度にすることで1ページ内に収めるためです。

approvalView.createViewNav().getCount()

 

2-11. 繰り返しコントロールの中にコアコントロールの計算結果コントロールをドラッグ&ドロップします。

 

2-12. 計算結果コントロールのプロパティ計算結果フィールドタブで名前を空白に、オプションのコンテンツの種類を「HTML」に設定後、スタイルタブの最下部「実行時に適用したデフォルトのスタイルを無効化」にチェックを入れます。

 

 

2-13. 計算結果コントロールのプロパティ⇒値タブで使用するバインドデータをJavaScriptにし、以下のような記述をします。ここではiUIの仕様に沿ったタグ形成をするスクリプトを記述します。 この計算結果で生成されるものは、文書の一覧と文書へのそれぞれのリンクになります。本来のビューを実現するためのスクリプトであると思っていただいてかまいません。

var display = "";
var curPosition = rowData.getPosition().split(".");
display = 
"<li><a href=\"/" + @ReplaceSubstring(@Subset(@DbName(),-1), "\\" , "/" ) + "/" + rowData.getOpenPageURL("mForm.xsp",false) + "\" target=\"_self\">" + rowData.getColumnValue("Name") + "</a></li>" ; if ( rowData.getSiblingCount().toString() == curPosition[1] ) { display += "</ul>"; } return display

 

2-14. 以上で、申請一覧を表示する画面(mView.xsp)は実装ができました。すべてを保存します。次に文書を表示する下図のような画面を作成していきます。

 

2-15. 申請項目を表示する画面(mForm.xsp)を開き、プロパティ⇒データタブでデータソースを「submitDocument」に指定します。

 

2-16. 2-3.と同様に、プロパティ⇒すべてのプロパティタブの基本セクション「createForm」をfalseにします。

 

2-17. 2-4.と同様にエディターのソースタブをクリックし、以下のようなWebページのサイズを決める定義を記述します。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; 
minimum-scale=1; user-scalable=no;" />

 

2-18. 2-5.と同様にインポートしたリソースのどれを使用するのか定義する記述をします。同じものを使用しますので、先ほどの定義と変わりはありません。

<xp:this.resources>
	<xp:styleSheet href="iui.css"></xp:styleSheet>
	<xp:styleSheet href="default-theme.css"></xp:styleSheet>
	<xp:script src="iui.js" clientSide="true"></xp:script>
</xp:this.resources>

 

2-19. 2-6.同様にiUIライブラリの仕様に沿って以下のようなコードを記述します。

<div class="toolbar">
	<h1 id="pageTitle"></h1>
	<a id="backButton" class="button" href="#"></a>
</div>

 

2-20. データソース記述の下部に、<div>タグを使って、ページのタイトルやidを定義します。

<div id="expense" class="panel" selected="true" title="申請項目">
</div>

 

2-21. 設計タブに戻り、コアコントロールの計算結果コントロールを2-20で作った<div>タグの中に配置します。ドラッグ&ドロップが困難な場合は、1度適当に配置し、アウトラインで調整してください。

 

2-22. 2-12.同様に、計算結果コントロールのプロパティ計算結果フィールドタブで名前を空白に、オプションのコンテンツの種類を「HTML」に設定後、スタイルタブの最下部「実行時に適用したデフォルトのスタイルを無効化」にチェックを入れます。

 

 

2-23. 計算結果コントロールのプロパティ⇒値タブで使用するバインドデータをJavaScriptにし、以下のような記述をします。ここではiUIの仕様に沿ったタグ形成をするスクリプトを記述します。本来の文書のフォームを実現するためのスクリプト記述だと思っていただいてかまいません。

var display = "";
display = "<fieldset><div class=\"row\"><label>ステータス:</label>"
	+ submitDocument.getValue("status") + "</div>"
	+ "<div class=\"row\"><label>名前:</label>"
	+ submitDocument.getValue("Name") + "</div>"
	+ "<div class=\"row\"><label>区間:</label>"
	+ submitDocument.getValue("path") + "</div></fieldset>";
return display

 

2-24. 次にアクションボタンを追加していきますが、2-16においてこのページは<form>タグをデフォルトで生成しないようにしているため、ボタンイベントなどは今のままでは動作しません。そのためにイベントを発生させる部分では、<xp:form>タグをエディターのソース画面で記述します。

<xp:form> </xp:form>

 

2-25. 設計タブに戻り、コアコントロールのボタンコントロールを2-24で作った<xp:form>タグの中に2つ入れます。ドラッグ&ドロップが困難な場合は、1度適当に配置し、アウトラインで調整してください。

 

2-26. 各ボタンのプロパティ⇒ボタンタブで下記のように設定します。

  名前: approvalButton  ラベル: 承認
  名前: declineButton   ラベル: 否認

 

2-27. 各ボタンのスタイルタブのクラスにそれぞれ、「grayButton」、「redButton」と入力します。 ※筆者は、承認のスタイルクラスをgreenButtonと定義しておりますが、iUIのデフォルトにはgreenButtonクラスは入っておりません。もしgreenButtonの追加方法を知りたいという方いらっしゃいましたら、XPages技術者コミュニティーでご依頼ください。

 

2-28. 前章と同じように、承認ボタンにイベントを追加します。(否認ボタンはボタン表示のみとします。) 承認ボタンのイベントタブのonclickを選択し、アクションの追加ボタンから下記のアクションを追加します。

  • 文書の保存
  • スクリプトの実行

記述スクリプト

var doc = submitDocument.getDocument();
var agent = database.getAgent("ApprovalAgent");
agent.runWithDocumentContext(doc);
agent.recycle();
context.reloadPage();

 

 

2-29. 以上で、申請項目を表示する画面(mForm.xsp)も実装できました。xForm.xspを保存します。

2-30. 画面の確認をスマートフォンから行います。(PC上でもSafariを使用するとスマートフォンの見栄えとほとんど同じものがご覧になれます。)
URL: http://サーバー名/ApprovalAgent.nsf/mView.xsp

 

         ↓

 

         ↓

 

Notes DBとは思えないようなインタフェースで、実装することができました。

まとめ

本章ではスマートフォンらしさを実現するUIを用いてXPagesの実装を行いました。一例として、iUIというフレームワークを使用させていただきましたが、このほかにもまだ様々なものが使えます。Dojo.mobileもその一つということができます。

手順では、ソースコードを直接記述する部分が多く見受けられ、少々大変なのではという印象お持ちの方もいらっしゃるとは思いますが、これはiUIという仕様に合わせた記述をする必要があるためです。スマートフォン向けにWebアプリケーションを構築する際は、この手順は少なからず必要であり、XPagesだから大変になってしまうということではありません。むしろ、XPages特有のマウスによる実装が本章の手順でご紹介したように使えるため構築は比較的簡単になります。

XPagesは、今までNotes DBでは面倒であった「Web化」を比較的簡単に実現できる技術であり、また他の今風のWebアプリケーションを実装できる技術でもあります。Webアプリケーションの特長を大いに活用して、今回のようにスマートフォンから操作することが可能です。是非Notesユーザーの皆様にも、XPagesを利用したNotesアプリケーションを構築し、時間や場所にとらわれない業務へ活かしていただければと思います。

本アプリケーションは、developerWorksで運営しておりますXPages技術者コミュニティーにてメンバー限定で公開しております。ダウンロードしたいという方は、メンバー登録をしていただき、nsfファイルの設計や動きなどをチェックしてみてください。また、アプリケーションに関する質問などもできる限り回答したいと考えておりますので、XPages技術者コミュニティーのメッセージ・ボードにご投稿いただければ幸いです。

さて、次章では同じようにスマートフォンUIを用いたアプリケーションをご案内する予定です。何か皆様の業務に活用できそうな内容のアプリケーションをご紹介できれば良いかなと考えています。次回もご期待ください!

* Copyright© 2007-2011, iUI Project Members


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で作成しています。これは、横にスライドしてページ遷移するようなスマートフォンアプリケーションを実現したい場合に、1つの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技術者コミュニティーのディスカッションスペースにご投稿いただければ幸いです。


最終章. 新人SEが学んだXPagesを振り返って

前章では、Dojo Mobileを用いたスマートフォンアプリケーションをご紹介いたしました。第11、12章を通してNotesアプリケーションのモバイル活用イメージを持っていただけましたでしょうか。スマートフォンアプリケーション含め、これまで様々なサンプルアプリの実現イメージ、実装手順をご紹介させていただきましたが、少しでも皆様のアプリ開発の一助となっていれば幸いでございます。

さて、突然ではありますが本連載につきましては本章をもって終了となります。理由は様々ですが、時期・スキルの観点から「新人」という看板でどこまで引っ張っていくのか、各方面からのご指摘もいただきこの度最終章とさせていただくことになりました。
(本来もう少し早く最終章を公開する予定でしたが、実は記事公開直前に私が右上腕骨の骨折という怪我をしてしまったことにより遅れてしまいました。右腕は元々病気にかかっておりいつ折れてもおかしくない状態だったのですが、それを知らずにお恥ずかしいことに飲み屋での腕相撲で折ってしまったという状況です。 あいにく複数の箇所を骨折してしまったこともあり全治は3~6カ月と長く、事故当時はショックが大きく落ち込んでおりましたが、XPages を通じて知り合えた皆様から暖かいコメントをたくさん頂き、なんとか最終記事を公開することが出来ました。読者の皆様を始めとする関係者の皆様には深くお詫びすると共に、見捨てずに見守って頂いている皆様に深く感謝致します。)

この連載は本章で最後になりますが、私自身これを区切りとして、これからは「新人」ではなく「プロフェッショナル」としてできるだけ有用な情報を皆様にお届けしたいと考えております。今はまだ不自由な両手ではありますが、今後は「新人SEが学ぶXPages」に代わる情報発信をしていく予定ですので、引き続きどうぞよろしくお願いいたします。

では、最終章として私が学んだXPagesの振り返りをお伝えしたいと思います。
私が本連載を始めたのは今年の1月末になります。当時はXPagesを勉強するにあたり右も左もわからない状態でした。さらには、Lotus Notes/Dominoの開発経験も全くない中で、何から手をつければよいのか悩んでいました。そんな中、Lotus Notes/Dominoの開発に関しては「Lotus Domino Designer 8.5 開発者ガイド」を読みながらLotus Domino Designerを操作し、XPagesに関しては「XPages入門」の手順どおりに実装することで、XPagesを利用したNotesアプリケーション開発のイメージをつかむことが出来ました。この学習をした上で、まずはマネージャーからアプリケーション題目を指定してもらい、実装しました。それが第3章、5章の「ビューの列に文書へ添付した画像を表示する機能ビューの列に文書へ添付した画像を表示する機能」、第4章の「文字が流れて表示され、その文字がリンクになっている機能」です。

 

 

これらのアプリケーションを実装したことにより、XPagesでWebの標準技術を柔軟に適用できることがわかりました。2つのアプリケーションが完成したのはXPagesを覚え始めてから、1週間経った頃でした。
マネージャーからの要望通りのアプリケーションが実装できた後は、自分で魅力的なアプリケーションを考え、作成することになりました。まだ業務アプリケーション自体そこまで知らなかったので、少ない自分の業務の中から探し出した記憶が今でも強く残っています。そこで、思いついたのが第6章の「マネージャー承認アプリケーション」です。

 

純粋に数多くの部下から様々な申請が来たときにマネージャーは承認するのが大変だと感じたため、この発想になりました。しかし題目は決まったものの、当時のXPagesスキルでは到底実装できるものではありませんでした。その幅を広げるために「アプリケーション開発 Wiki」でコントロールの役割・機能を学び、「XPagesによるWebアプリケーション開発」など様々なチュートリアルを行いました。このマネージャー承認アプリケーションは当時の私のスキルをフルに活かしたものであるといっても過言ではありません。完成したのは、XPagesを覚え始めてから3週間経った頃でした。
マネージャー承認アプリケーションを作成した頃から、セミナー等を通して現場の開発者とお話しする機会が増えてきました。生の声を色々いただくことで非常に刺激になりましたし、少しでも開発者の方々のご支援が出来ればと思い、勉強すると共に本連載を通して情報発信させていただきました。ここで作成したのが、第7章「ファイルのアップロード&ダウンロード」、第8章「全文検索機能の利用」、第10章「エージェントの呼び出し」になります。

 

 

 

これらのアプリケーションを作成する頃には、自身でトライ&エラーを繰り返して応用できるほどにまでなっていました。どんなエラーが起こっているのか、どの部分が誤った実装をしているのかなどの発見の積み重ねがスキルアップにつながっていたのだと思います。覚え始めの頃よりも、XPagesに慣れてきた時期のほうがスキルのあがり方は大きいです。こうしているうちに、半年が過ぎました。
こうしてXPagesをある程度自由に操れるようになってきたこともあり、さらに幅を広くするために今まで触れずにいたジャンルに挑戦することにしました。このジャンルは元々開発者の方々からの要望は強かったのですが、私にとって大きな壁となっていました。そんな抵抗を感じていたのが、スマートフォンアプリケーションです。スマートフォンアプリケーションはモバイル用フレームワークを用いる必要があり、当時は実装していないにもかかわらず相当難しいものだという固定観念にとらわれていました。しかし、サンプルアプリやコード記述の方法の資料を細かく読むことで、難しいイメージは次第に薄れていき、2つのアプリケーションを実装するにいたりました。そのアプリケーションが、第11章の「簡易ワークフローアプリケーション」と第12章「社内電話帳アプリケーション」です。

 

ここで参考にした資料・サンプルアプリは、「XPagesで作るiPhoneWebアプリケーションのアジャイル開発」と「テクてくLotus技術者夜会:ザ・デベロッパー編11-09-16」の2つのみです。2日間でスマートフォンアプリの開発方法を学び、さらに2日間を使いそれぞれのアプリケーションを実装しました。このアプリケーションの完成時期が、XPagesを覚え始めてから約10カ月経った頃でした。

今思いますと、XPagesを始めてから10カ月でスマートフォンアプリケーションを作成できるまでになるとは想像もしておりませんでした。私がここまで成長できたのも、数え切れないほど多くの皆様が記事を読んでくださり、貴重なご意見・アドバイスをいただけたからではないかと感じています。また、XPagesの話題を通じてたくさんの方と知り合うことが出来ました。今年行われたLotus Knows EXPO 2011では、「すぎ坊いますか?」とお声掛けくださった方が多くいらっしゃり、ご挨拶をさせていただきました。テクてくLotus技術者夜会では、XPages以外のトークもするほど参加者の皆様と仲が深まりました。私が社会人になって一番嬉しいのは、このようなつながりが増えていくことだといっても過言ではありません。今では大変楽しくお仕事をさせていただいております。

最後に、この記事を通してLotus Notes/DominoやWebアプリケーションの開発経験のない人でもここまでXPagesのスキルを身につけられるという印象を持っていただければ幸いでございます。それがこの記事でお伝えしたい私からのメインメッセージです。是非、「NotesアプリケーションのWeb化は難しい」というイメージを取り払っていただき、皆様の社内業務にXPagesを活用していただければと考えております。

コメント

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=975835
ArticleTitle=新人SEが学ぶ XPages
publish-date=11182011