1

【A-3】サイドバー用アプリをXPages で開発してみよう！

株式会社ソルクシーズ

吉田武司

2013年11月6日

2

サイドバーって？（１）

– 標準では、以下の機能が表示されます

• Sametime連絡先• フィード• 1日の予定

– 他にもいろいろ利用できます• IBM Connection• Google ガジェット• Web サイト 等々

• Notes 8.X の Standard 版で利用可能になった右側のプラグインやウィジェットの表示領域

3

サイドバーって？（２）

• 最近のPCはワイドになったけれど全画面表示で使うには横に広すぎる・・・その余った部分を有効活用してみませんか？

• メインの画面を作業中の状態のままで使える

– 現在の作業を閉じずに済む。– 見比べたりできる。

• 作業中でも画面端に表示されているので他の作業中でも気づける この部分！

4

サイドバーって？（３）

• 詳しい説明は、ブログ（ノーツと。。。）にまとめています。ぜひいろいろと試してみてください！

– サイドバーを使ってみよう（1）紹介 http://p.tl/b7bI

– サイドバーを使ってみよう（2）RSS Feed Generator についての補足 http://p.tl/8kVV

– サイドバーを使ってみよう（3）マイ・ウィジェット・パネルの表示 http://p.tl/ZQuR

– サイドバーを使ってみよう（4）ノーツのビューをサイドバーへ登録 http://p.tl/2XBH

5

なぜサイドバーアプリケーション？

③ サイドバーア

プリは単機能でよい

① 複雑なアプリ

開発はまだ不安

⑤ サイドバー

アプリは規模も小さい

④ 時間もあまりな

いし・・・

② とは言っても何か

目的を持って勉強しないとやり辛い

6

というわけで・・・

• XPagesの学習を始める時、最初からワークフローなど複雑なアプリケーションを開発するのは大変です。

• そこでサイドバー用の小さなアプリケーション開発を通じて少しずつ学習していってはどうでしょうか？との提案です。

• 今回は以下を中心にご説明します。– サイドバーアプリケーションのアイデア– よく使うコントロールの説明

• 環境は、Notes/Domino 9.0 です。

7

サイドバーを使用する際の注意点

• 画面が狭い。特に幅が・・・– その為、ダイアログなどが表示できない

画面に表示しきれない！

8

サイドバーアプリケーションの例

• ミニメール• 伝言メモ• ニュース配信• マスターやマニュアル、ヘルプ

• グラフ• Web サービス• ポータル

9

例１

• ミニメールアプリケーション– 作業中の画面はそのままですぐにメールが送れる

– 宛先はダイアログが使えないので入力補完機能（タイプアヘッド）で実装

10

「メールの送信」シンプルアクション

– Notes/Domino 9.0 からXPagesにもメール送信のシンプルアクションが追加されました。簡単にメール送信の機能が実装できて大変便利です！

– この機能の練習にミニメールアプリケーションはちょうどよいかと思います

11

例２

• 伝言メモなどのメールアプリケーション– メールを伝言メモなどに特化させるのもよいかも？

12

例３

• プロフィール風？ニュース配信アプリケーション– ノーツの文書（ニュース）をビューから取得（投稿日付の降順でソート）

– XPages（Web）ならノーツのビューと違って顔写真や画像も表示可能

プロフィールほどリアルタイム性は必要ではないけれど、様々な情報を手軽に発信したい！

13

メール受信DBへのニュース投稿– メール受信 DB にしておけば既存システムにメール投稿機能を追加するだけで手軽にニュースを投稿可能

部門掲示板DB

サイドバー用ニュース配信DB

部門掲示板DB

通達DB

14

例４

• マスターやマニュアル、ヘルプなどの参照系アプリケーション

– 顧客情報や商品マスター、業務でよく使うマニュアルやヘルプなど参照することが多い情報をサイドバーから素早く検索して表示

15

例５

• グラフ

– 営業の成績や商品の在庫、プロジェクトの進捗状況などをグラフで表示

16

例６

• Webサービス

– 社内、社外で利用できるWeb サービスと組み合わせる

• 社外のWeb サービスを利用する場合使用料などが発生することがあります。ご利用サイトの規約をよく確認上ご注意下さい。（Google Maps など）

17

例７

• ポータルアプリケーション– 様々な情報

• 日々の営業情報• 通達• 個人の購読情報 等々

– よく使うアプリケーションへのリンク• ワークスペースからアイコンを探すのに苦労している方は楽になるかな？

今回はこのアプリケーションで使用しているコントロールを中心にご紹介

18

・注目して欲しい情報をトップに表示・今回のアプリケーションでは「Dojo のChart」を使ってグラフを表示

・「セクション」を使って閉じることが可能

・普段よく利用するアプリケーションへのリンクを配置・「タブ付き」で画面を切り替え

・通達やホームページの情報などを「Dojo アコーディオン」と「繰り返し」を使って表示・折り畳めるアコーディオンはサイドバーにも最適・画像を表示したり記事へのリンクを配置

上段

下段

中段

19

Demo

20

よく使うレイアウト系のコントロールの説明

• サイドバーは狭い領域なのでレイアウト系のコントロールを使う必要があります

– セクション（ノーツと同じ）

– タブ付きパネル

– アコーディオン（数種類あり）

21

セクションの説明

• ノーツのセクションと設計方法はほぼ同じ

• デザインは、オプションのセクションタイプで設定可能

展開省略

22

タブ付きパネルの説明（１）

• タブをクリックしてコントロールを配置

• タブの順番を入れ替えたいときはオプションで設定

23

タブ付きパネルの説明（２）

• タブを挿入、追加したい場合は、コントロールの上で右クリック！「タブを挿入」「タブの追加」メニューが表示されます。

Wikiはこちら↓http://p.tl/s5-E

– プロパティからはできないのでどこで設定すればよいのか最初は迷います・・・削除はプロパティからできるのに・・・

24

アコーディオンの説明（１）

• メニュー作成に便利なアコーディオンには2種類あります– １） 「Dojo レイアウト」の「Dojo アコーディオンコンテナ」と「

Dojo アコーディオンペイン」• コンテナの配下にペイン（複数）を配置します• ペインの中に表示するコントロールを配置します。ラベルやリンク以外にもイメージなど様々なコントロールが配置できます

• コントロールの配置や確認はアウトラインビューで行うのが楽です

25

アコーディオンの説明（２）

– ２） 「拡張ライブラリ」の「アコーディオン」• 「Dojo アコーディオン」とは違って、1つのコントロールで表現します• 「すべてのプロパティ」の「基本」の「treeNodes」でリンクなどを設定します

Wikiはこちら↓http://p.tl/f-RQ

26

アコーディオンの説明（３）

• アコーディオンではないけど工夫次第では似たような使い方ができるコントロール– ３） 「拡張ライブラリ」の「ウィジェットコンテナ」

• アコーディオンと同様に展開／省略が可能• 複数領域を展開／省略可能• タイトルバー右端にプルダウンメニューを表示可能• 注意

– 配置する場合、上下の外側の余白を 0 に設定– 省略／展開可能のオプション「collapsible」を「true」に設定

– アプリケーションのテーマを「OneUI V2.1」に設定

27

アコーディオンの説明（４）

• まとめ– リンク以外の様々なコンテンツを表示したい場合は、１） 「Dojo レイアウト」の「Dojo アコーディオンコンテナ」と「Dojo アコーディオンペイン」

– シンプルなメニューを表示したい場合は、２） 「拡張ライブラリ」の「アコーディオン」

– 複数の領域を自由に展開／省略、タイトバーにメニューを表示したい場合は、３） 「拡張ライブラリ」の「ウィジェットコンテナ」

28

その他によく使うコントロールや機能（１）

• 「ビュー」コントロール– ノーツのビューを XPages で表現するには定番！– 「繰り返し」や「データ表」コントロールでも同じようなことが可能

• 「スクリプトの出力」コントロール– クライアント JavaScript を記述したい場合に利用– dojo Chating などもここで記述

• 今回のアプリケーションではその他に「ラベル」「リンク」「イメージ」 「計算結果フィールド」 「ページの組

み込み」を使っています。

29

その他によく使うコントロールや機能（２）

• notes URLリンク– ノーツのデータベースをクライアントで開くのに利用– 「notes://」で始まる URL– 文書のプロパティの「ヘッダー情報」の「識別子」の欄で確認– XPages以外でも使用可能。ノーツ以外のシステムからノーツクライアントを起動して特定の文書などを開くことが可能

30

サイドバーへの登録方法（１）

• ＜ファイル＞－＜設定＞から[ウィジェット]を開き、「ウィジェット・ツールバーおよびマイ・ウィジェット・パネルを表示」を有効にする

• この操作は初回のみ

31

サイドバーへの登録方法（２）

• 画面を表示してからツールバーの「現在のコンテキストからウィジェットを構成…」をクリックします。

32

サイドバーへの登録方法（３）

• [ウィジェットの動作を選択]– 「この XPages を開く]

• [ウィジェット名]– 任意

• [ウィジェットに対する処理の選択]– 「パネルとして表示」

33

サイドバーへの登録方法（４）

• メールで配信– ウィジェットを選択して、右クリックメニューから「E メールの送信」

• メールを受け取ったユーザーは、サイドバーのマイウィジェットに添付ファイルをドラッグ＆ドロップするだけで登録完了！

34

サイドバーへの登録法（５）

• 全社的に運用する場合の配信方法– 「ウィジェットカタログ」と「デスクトップポリシー」が使えます– ウィジェットカタログに登録したカテゴリを指定してポリシー設定可能。

35

補足（１）

• 問１：パネルを閉じてしまった！– マイ・ウィジェット・パネルから該当ウィジェットを再度パネルで開くことができます。

右クリックメニューから＜開く＞－＜パネル＞

36

補足（２）

• 問２：サイドバーをマウスで開くのは面倒！– ショートカットがあります。

• 開く– Ctrl + 9

• 閉じる– Ctrl + 0

• アイコン表示– Ctrl + 8

37

補足（３）

• 問３：サイドバーって実際に使っているユーザーはいるの？– XPages では無くノーツのビューやフォームを利用しての開発ですがあります！

「BPnet SPECIAL 連載企画三浦奈保子が IBM Notes/Domino の活用事例をレポート」

• http://p.tl/5tWR

38

まとめ

• 癖があるサイドバーですが、ちょっとした工夫が活かせる場所です。

• スタンダード版のクライアントを導入しているなら使わないのは勿体ない！

• いろいろなアイデアを試してみてください！

XPagesが苦手な方はまずノーツのビューやフォームを使ったアプリ作成にチャレンジするのも手かも?

39

XPages Extension Library Japan プロジェクト

• OpenNTF.orgの Xpages Extension Library を日本に展開するためのプロジェクト– http://bit.ly/WS5FTP

• サンプルアプリケーション、コントロールの日本語化• 開発者向け日本語ドキュメントの整備• 日本市場に特化した機能の実装

– 5月末にリリース１（8.5.3版）を公開– 現在リリース２（9.0版）のβ１を公開中

40

おまけ：DOMINO-SSO 認証（１）• ウィジェット登録時にWeb ページとして登録する場合、SSO の仕組みが無いと起動時にパスワードを入力する必要が出てきます。

• その際は、DOMINO-SSO認証を利用するのも一つの方法です。– サーバー文書の[インターネットプロトコル]－[Domino

Web Engine]の[HTTPセッション]のセッション認証が「複数サーバー（SSO）」である必要があります。

41

おまけ：DOMINO-SSO 認証（２）• <ファイル＞－＜設定＞から

[アカウント]を開き、新規アカウントを追加します。

• これでクライアント認証時にドミノサーバへも認証されるようになります。

42

参考文献（Xpages開発初級者向け）

• 【developerWorks】一週間で学ぶ XPages開発入門 (初級編)

• ノーツ技術者の方がはじめて XPages での開発を体験するのに

最適です。簡単なノーツの掲示板アプリケーションを難しいロジックは用いずにとりあえず Xpages化することを主目的にしていま

す。

• http://p.tl/ys4k

43

ご清聴ありがとうございました！