Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
【A-3】サイドバー用アプリを
XPages で開発してみよう!

株式会社ソルクシーズ
吉田 武司
2013年11月6日

1
サイドバーって?(1)
• Notes 8.X の Standard 版で利用可能になった右
側のプラグインやウィジェットの表示領域
– 標準では、以下の機能が表
示されます
• Sametime 連絡先
• フィード
• 1日の予定

– 他...
サイドバーって?(2)
• 最近のPCはワイドになったけれど全画面表示で使うには横
に広すぎる・・・その余った部分を有効活用してみませんか?
• メインの画面を作業中の状態のまま
で使える
– 現在の作業を閉じずに済む。
– 見比べたりできる。...
サイドバーって?(3)
• 詳しい説明は、ブログ(ノーツと。。。)にまとめてい
ます。ぜひいろいろと試してみてください!
– サイドバーを使ってみよう(1)
紹介 http://p.tl/b7bI

– サイドバーを使ってみよう(2)
RSS ...
なぜサイドバーアプリケーション?
③ サイドバーア
プリは単機能で
よい
② とは言っても何か
目的を持って勉強し
ないとやり辛い

① 複雑なアプリ
開発はまだ不安

④ 時間もあまりな
いし・・・

⑤ サイドバー
アプリは規模も
小さい
...
というわけで・・・
• XPages の学習を始める時、最初からワークフローな
ど複雑なアプリケーションを開発するのは大変です。
• そこでサイドバー用の小さなアプリケーション開発を
通じて少しずつ学習していってはどうでしょうか?との
提案です...
サイドバーを使用する際の注意点
• 画面が狭い。特に幅が・・・
– その為、ダイアログなどが表示できない

画面に
表示しきれない!
7
サイドバーアプリケーションの例
ミニメール
伝言メモ
ニュース配信
マスターやマニュ
アル、ヘルプ
• グラフ
• Web サービス

•
•
•
•

• ポータル
8
例1
• ミニメールアプリケーション
– 作業中の画面はそのままですぐにメ
ールが送れる
– 宛先はダイアログが使えないので入
力補完機能(タイプアヘッド)で実装

9
「メールの送信」シンプルアクション
– Notes/Domino 9.0 から
XPages にもメール送信のシン
プルアクションが追加されまし
た。簡単にメール送信の機能
が実装できて大変便利です!
– この機能の練習にミニメールア
プリケー...
例2
• 伝言メモなどのメールアプリケーション
– メールを伝言メモなどに特化させる
のもよいかも?

11
例3
• プロフィール風?ニュース配信アプリケーション
– ノーツの文書(ニュース)をビューから
取得(投稿日付の降順でソート)
– XPages(Web)ならノーツのビューと
違って顔写真や画像も表示可能

プロフィールほどリアルタイム性は必...
メール受信DBへのニュース投稿
– メール受信 DB にしておけば既存システムにメール投稿
機能を追加するだけで手軽にニュースを投稿可能

部門掲示板DB
部門掲示板DB

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

通達DB

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

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

15
例6
• Web サービス
– 社内、社外で利用できる Web サー
ビスと組み合わせる
• 社外の Web サービスを利用する場合
使用料などが発生することがあります。
ご利用サイトの規約をよく確認上ご注
意下さい。(Google Maps ...
例7
• ポータルアプリケーション
– 様々な情報
• 日々の営業情報
• 通達
• 個人の購読情報

等々

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

今回はこのアプリ...
・注目して欲しい情報をトップに表示
・今回のアプリケーションでは「Dojo の
Chart」を使ってグラフを表示
・「セクション」を使って閉じることが可能

上段

中段
・通達やホームページの情報などを「Dojo
アコーディオン」と「繰り返し...
Demo

19
よく使うレイアウト系の
コントロールの説明
• サイドバーは狭い領域なのでレイアウト系のコントロ
ールを使う必要があります
– セクション(ノーツと同じ)
– タブ付きパネル
– アコーディオン(数種類あり)

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

省略

展開

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

21
タブ付きパネルの説明(1)
• タブをクリックしてコントロールを配置

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

22
タブ付きパネルの説明(2)
• タブを挿入、追加したい場合は、コントロールの上で
右クリック!「タブを挿入」「タブの追加」メニューが表
示されます。
– プロパティからはできないのでどこ
で設定すればよいのか最初は迷い
ます・・・削除はプロパテ...
アコーディオンの説明(1)
• メニュー作成に便利なアコーディオンには2種類あります
– 1) 「Dojo レイアウト」の「Dojo アコーディオンコンテナ」と「
Dojo アコーディオンペイン」
• コンテナの配下にペイン(複数)を配置します...
アコーディオンの説明(2)
– 2) 「拡張ライブラリ」の「アコーディオン」
• 「Dojo アコーディオン」とは違って、1つのコントロールで表現します
• 「すべてのプロパティ」の「基本」の「treeNodes」でリンクなどを設定
します

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

アコーディオンと同様に展開/省略が可能
複数領域を展開/省略...
アコーディオンの説明(4)
• まとめ
– リンク以外の様々なコンテンツを表示したい場合は、
1) 「Dojo レイアウト」の「Dojo アコーディオンコンテナ」と「Dojo アコ
ーディオンペイン」

– シンプルなメニューを表示したい場合は...
その他によく使う
コントロールや機能(1)
• 「ビュー」コントロール
– ノーツのビューを XPages で表現するには定番!
– 「繰り返し」や「データ表」コントロールでも同じようなことが
可能

• 「スクリプトの出力」コントロール
– ...
その他によく使う
コントロールや機能(2)
• notes URLリンク
–
–
–
–

ノーツのデータベースをクライアントで開くのに利用
「notes://」で始まる URL
文書のプロパティの「ヘッダー情報」の「識別子」の欄で確認
XPa...
サイドバーへの登録方法(1)
• <ファイル>-<設定>から[ウィジェット]を開き、「
ウィジェット・ツールバーおよびマイ・ウィジェット・パ
ネルを表示」を有効にする
• この操作は初回のみ

30
サイドバーへの登録方法(2)
• 画面を表示してからツールバーの「現在のコンテキ
ストからウィジェットを構成…」をクリックします。

31
サイドバーへの登録方法(3)
• [ウィジェットの動作を選択]
– 「この XPages を開く]

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

• [ウィジェットに対する処理の
選択]
– 「パネルとして表示」
32
サイドバーへの登録方法(4)
• メールで配信
– ウィジェットを選択して、右クリックメニューから「E メールの送信」

• メールを受け取ったユーザーは、サイドバーのマイウィジェッ
トに添付ファイルをドラッグ&ドロップするだけで登録完了!
3...
サイドバーへの登録法(5)
• 全社的に運用する場合の配信方法
– 「ウィジェットカタログ」と「デスクトップポリシー」が使えます
– ウィジェットカタログに登録したカテゴリを指定してポリシー設
定可能。

34
補足(1)
• 問1:パネルを閉じてしまった!
– マイ・ウィジェット・パネルから該当ウィジェットを再度パネ
ルで開くことができます。

右クリックメニューから
<開く>-<パネル>
35
補足(2)
• 問2:サイドバーをマウスで開くのは面倒!
– ショートカットがあります。
• 開く
– Ctrl + 9
• 閉じる
– Ctrl + 0
• アイコン表示
– Ctrl + 8
36
補足(3)
• 問3:サイドバーって実際に使っているユーザ
ーはいるの?
– XPages では無くノーツのビューやフォームを利用しての
開発ですがあります!
「BPnet SPECIAL 連載企画 三浦奈保子が IBM
Notes/Domin...
まとめ
• 癖があるサイドバーですが、ちょっとした工夫が活
かせる場所です。
• スタンダード版のクライアントを導入しているなら使
わないのは勿体ない!
• いろいろなアイデアを試してみてください!

XPages が苦手な方はまずノーツのビュ...
XPages Extension Library
Japan プロジェクト
• OpenNTF.org の Xpages Extension Library を日
本に展開するためのプロジェクト
– http://bit.ly/WS5FTP
•...
おまけ:DOMINO-SSO 認証(1)
• ウィジェット登録時に Web ページとして登録する場
合、SSO の仕組みが無いと起動時にパスワードを
入力する必要が出てきます。
• その際は、DOMINO-SSO 認証を利用するのも一
つの方法...
おまけ:DOMINO-SSO 認証(2)
• <ファイル>-<設定>から
[アカウント]を開き、新規アカ
ウントを追加します。
• これでクライアント認証時に
ドミノサーバへも認証される
ようになります。

41
参考文献(Xpages 開発初級者向け)
• 【developerWorks】
一週間で学ぶ XPages 開発入門 (初級編)
• ノーツ技術者の方がはじめて XPages での開発を体験するのに
最適です。簡単なノーツの掲示板アプリケーショ...
ご清聴ありがとうございました!

43
Upcoming SlideShare
Loading in …5
×

サイドバー用アプリを XPages で開発してみよう!

0 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

サイドバー用アプリを XPages で開発してみよう!

  1. 1. 【A-3】サイドバー用アプリを XPages で開発してみよう! 株式会社ソルクシーズ 吉田 武司 2013年11月6日 1
  2. 2. サイドバーって?(1) • Notes 8.X の Standard 版で利用可能になった右 側のプラグインやウィジェットの表示領域 – 標準では、以下の機能が表 示されます • Sametime 連絡先 • フィード • 1日の予定 – 他にもいろいろ利用できます • IBM Connection • Google ガジェット • Web サイト 等々 2
  3. 3. サイドバーって?(2) • 最近のPCはワイドになったけれど全画面表示で使うには横 に広すぎる・・・その余った部分を有効活用してみませんか? • メインの画面を作業中の状態のまま で使える – 現在の作業を閉じずに済む。 – 見比べたりできる。 • 作業中でも画面端に表示されている ので他の作業中でも気づける この部分! 3
  4. 4. サイドバーって?(3) • 詳しい説明は、ブログ(ノーツと。。。)にまとめてい ます。ぜひいろいろと試してみてください! – サイドバーを使ってみよう(1) 紹介 http://p.tl/b7bI – サイドバーを使ってみよう(2) RSS Feed Generator についての補足 http://p.tl/8kVV – サイドバーを使ってみよう(3) マイ・ウィジェット・パネルの表示 http://p.tl/ZQuR – サイドバーを使ってみよう(4) ノーツのビューをサイドバーへ登録 http://p.tl/2XBH 4
  5. 5. なぜサイドバーアプリケーション? ③ サイドバーア プリは単機能で よい ② とは言っても何か 目的を持って勉強し ないとやり辛い ① 複雑なアプリ 開発はまだ不安 ④ 時間もあまりな いし・・・ ⑤ サイドバー アプリは規模も 小さい 5
  6. 6. というわけで・・・ • XPages の学習を始める時、最初からワークフローな ど複雑なアプリケーションを開発するのは大変です。 • そこでサイドバー用の小さなアプリケーション開発を 通じて少しずつ学習していってはどうでしょうか?との 提案です。 • 今回は以下を中心にご説明します。 – サイドバーアプリケーションのアイデア – よく使うコントロールの説明 • 環境は、Notes/Domino 9.0 です。 6
  7. 7. サイドバーを使用する際の注意点 • 画面が狭い。特に幅が・・・ – その為、ダイアログなどが表示できない 画面に 表示しきれない! 7
  8. 8. サイドバーアプリケーションの例 ミニメール 伝言メモ ニュース配信 マスターやマニュ アル、ヘルプ • グラフ • Web サービス • • • • • ポータル 8
  9. 9. 例1 • ミニメールアプリケーション – 作業中の画面はそのままですぐにメ ールが送れる – 宛先はダイアログが使えないので入 力補完機能(タイプアヘッド)で実装 9
  10. 10. 「メールの送信」シンプルアクション – Notes/Domino 9.0 から XPages にもメール送信のシン プルアクションが追加されまし た。簡単にメール送信の機能 が実装できて大変便利です! – この機能の練習にミニメールア プリケーションはちょうどよいか と思います 10
  11. 11. 例2 • 伝言メモなどのメールアプリケーション – メールを伝言メモなどに特化させる のもよいかも? 11
  12. 12. 例3 • プロフィール風?ニュース配信アプリケーション – ノーツの文書(ニュース)をビューから 取得(投稿日付の降順でソート) – XPages(Web)ならノーツのビューと 違って顔写真や画像も表示可能 プロフィールほどリアルタイム性は必要ではな いけれど、様々な情報を手軽に発信したい! 12
  13. 13. メール受信DBへのニュース投稿 – メール受信 DB にしておけば既存システムにメール投稿 機能を追加するだけで手軽にニュースを投稿可能 部門掲示板DB 部門掲示板DB サイドバー用 ニュース配信DB 通達DB 13
  14. 14. 例4 • マスターやマニュアル、ヘルプなどの参照系 アプリケーション – 顧客情報や商品マスター、 業務でよく使うマニュアルや ヘルプなど参照することが多 い情報をサイドバーから素早 く検索して表示 14
  15. 15. 例5 • グラフ – 営業の成績や商品の在庫、 プロジェクトの進捗状況など をグラフで表示 15
  16. 16. 例6 • Web サービス – 社内、社外で利用できる Web サー ビスと組み合わせる • 社外の Web サービスを利用する場合 使用料などが発生することがあります。 ご利用サイトの規約をよく確認上ご注 意下さい。(Google Maps など) 16
  17. 17. 例7 • ポータルアプリケーション – 様々な情報 • 日々の営業情報 • 通達 • 個人の購読情報 等々 – よく使うアプリケーションへのリンク • ワークスペースからアイコンを探すのに 苦労している方は楽になるかな? 今回はこのアプリケーションで使用し ているコントロールを中心にご紹介 17
  18. 18. ・注目して欲しい情報をトップに表示 ・今回のアプリケーションでは「Dojo の Chart」を使ってグラフを表示 ・「セクション」を使って閉じることが可能 上段 中段 ・通達やホームページの情報などを「Dojo アコーディオン」と「繰り返し」を使って表示 ・折り畳めるアコーディオンはサイドバーに も最適 ・画像を表示したり記事へのリンクを配置 下段 ・普段よく利用するアプリケーションへのリ ンクを配置 ・「タブ付き」で画面を切り替え 18
  19. 19. Demo 19
  20. 20. よく使うレイアウト系の コントロールの説明 • サイドバーは狭い領域なのでレイアウト系のコントロ ールを使う必要があります – セクション(ノーツと同じ) – タブ付きパネル – アコーディオン(数種類あり) 20
  21. 21. セクションの説明 • ノーツのセクションと設計方法はほぼ同じ 省略 展開 • デザインは、オプションのセクションタイプで設定可能 21
  22. 22. タブ付きパネルの説明(1) • タブをクリックしてコントロールを配置 • タブの順番を入れ替えたいときはオプションで設定 22
  23. 23. タブ付きパネルの説明(2) • タブを挿入、追加したい場合は、コントロールの上で 右クリック!「タブを挿入」「タブの追加」メニューが表 示されます。 – プロパティからはできないのでどこ で設定すればよいのか最初は迷い ます・・・削除はプロパティからでき るのに・・・ Wiki はこちら↓ http://p.tl/s5-E 23
  24. 24. アコーディオンの説明(1) • メニュー作成に便利なアコーディオンには2種類あります – 1) 「Dojo レイアウト」の「Dojo アコーディオンコンテナ」と「 Dojo アコーディオンペイン」 • コンテナの配下にペイン(複数)を配置します • ペインの中に表示するコントロールを配置します。ラベルやリンク以外 にもイメージなど様々なコントロールが配置できます • コントロールの配置や確認はアウトラインビューで行うのが楽です 24
  25. 25. アコーディオンの説明(2) – 2) 「拡張ライブラリ」の「アコーディオン」 • 「Dojo アコーディオン」とは違って、1つのコントロールで表現します • 「すべてのプロパティ」の「基本」の「treeNodes」でリンクなどを設定 します Wiki はこちら↓ http://p.tl/f-RQ 25
  26. 26. アコーディオンの説明(3) • アコーディオンではないけど工夫次第では似たよう な使い方ができるコントロール – 3) 「拡張ライブラリ」の「ウィジェットコンテナ」 • • • • アコーディオンと同様に展開/省略が可能 複数領域を展開/省略可能 タイトルバー右端にプルダウンメニューを表示可能 注意 – 配置する場合、上下の外側の余白を 0 に設定 – 省略/展開可能のオプション「collapsible」を「true」に設 定 – アプリケーションのテーマを「OneUI V2.1」に設定 26
  27. 27. アコーディオンの説明(4) • まとめ – リンク以外の様々なコンテンツを表示したい場合は、 1) 「Dojo レイアウト」の「Dojo アコーディオンコンテナ」と「Dojo アコ ーディオンペイン」 – シンプルなメニューを表示したい場合は、 2) 「拡張ライブラリ」の「アコーディオン」 – 複数の領域を自由に展開/省略、タイトバーにメニューを 表示したい場合は、 3) 「拡張ライブラリ」の「ウィジェットコンテナ」 27
  28. 28. その他によく使う コントロールや機能(1) • 「ビュー」コントロール – ノーツのビューを XPages で表現するには定番! – 「繰り返し」や「データ表」コントロールでも同じようなことが 可能 • 「スクリプトの出力」コントロール – クライアント JavaScript を記述したい場合に利用 – dojo Chating などもここで記述 • 今回のアプリケーションではその他に「ラベル」「リン ク」「イメージ」 「計算結果フィールド」 「ページの組 み込み」を使っています。 28
  29. 29. その他によく使う コントロールや機能(2) • notes URLリンク – – – – ノーツのデータベースをクライアントで開くのに利用 「notes://」で始まる URL 文書のプロパティの「ヘッダー情報」の「識別子」の欄で確認 XPages 以外でも使用可能。ノーツ以外のシステムからノー ツクライアントを起動して特定の文書などを開くことが可能 29
  30. 30. サイドバーへの登録方法(1) • <ファイル>-<設定>から[ウィジェット]を開き、「 ウィジェット・ツールバーおよびマイ・ウィジェット・パ ネルを表示」を有効にする • この操作は初回のみ 30
  31. 31. サイドバーへの登録方法(2) • 画面を表示してからツールバーの「現在のコンテキ ストからウィジェットを構成…」をクリックします。 31
  32. 32. サイドバーへの登録方法(3) • [ウィジェットの動作を選択] – 「この XPages を開く] • [ウィジェット名] – 任意 • [ウィジェットに対する処理の 選択] – 「パネルとして表示」 32
  33. 33. サイドバーへの登録方法(4) • メールで配信 – ウィジェットを選択して、右クリックメニューから「E メールの送信」 • メールを受け取ったユーザーは、サイドバーのマイウィジェッ トに添付ファイルをドラッグ&ドロップするだけで登録完了! 33
  34. 34. サイドバーへの登録法(5) • 全社的に運用する場合の配信方法 – 「ウィジェットカタログ」と「デスクトップポリシー」が使えます – ウィジェットカタログに登録したカテゴリを指定してポリシー設 定可能。 34
  35. 35. 補足(1) • 問1:パネルを閉じてしまった! – マイ・ウィジェット・パネルから該当ウィジェットを再度パネ ルで開くことができます。 右クリックメニューから <開く>-<パネル> 35
  36. 36. 補足(2) • 問2:サイドバーをマウスで開くのは面倒! – ショートカットがあります。 • 開く – Ctrl + 9 • 閉じる – Ctrl + 0 • アイコン表示 – Ctrl + 8 36
  37. 37. 補足(3) • 問3:サイドバーって実際に使っているユーザ ーはいるの? – XPages では無くノーツのビューやフォームを利用しての 開発ですがあります! 「BPnet SPECIAL 連載企画 三浦奈保子が IBM Notes/Domino の活用事例をレポート」 • http://p.tl/5tWR 37
  38. 38. まとめ • 癖があるサイドバーですが、ちょっとした工夫が活 かせる場所です。 • スタンダード版のクライアントを導入しているなら使 わないのは勿体ない! • いろいろなアイデアを試してみてください! XPages が苦手な方はまずノーツのビューやフォームを 使ったアプリ作成にチャレンジするのも手かも? 38
  39. 39. XPages Extension Library Japan プロジェクト • OpenNTF.org の Xpages Extension Library を日 本に展開するためのプロジェクト – http://bit.ly/WS5FTP • サンプルアプリケーション、コントロールの日本語化 • 開発者向け日本語ドキュメントの整備 • 日本市場に特化した機能の実装 – 5月末にリリース1(8.5.3版)を公開 – 現在リリース2(9.0版)のβ1を公開中 39
  40. 40. おまけ:DOMINO-SSO 認証(1) • ウィジェット登録時に Web ページとして登録する場 合、SSO の仕組みが無いと起動時にパスワードを 入力する必要が出てきます。 • その際は、DOMINO-SSO 認証を利用するのも一 つの方法です。 – サーバー文書の[インターネットプロトコル]-[Domino Web Engine]の[HTTPセッション]のセッション認証が「複 数サーバー(SSO)」である必要があります。 40
  41. 41. おまけ:DOMINO-SSO 認証(2) • <ファイル>-<設定>から [アカウント]を開き、新規アカ ウントを追加します。 • これでクライアント認証時に ドミノサーバへも認証される ようになります。 41
  42. 42. 参考文献(Xpages 開発初級者向け) • 【developerWorks】 一週間で学ぶ XPages 開発入門 (初級編) • ノーツ技術者の方がはじめて XPages での開発を体験するのに 最適です。簡単なノーツの掲示板アプリケーションを難しいロジッ クは用いずにとりあえず Xpages 化することを主目的にしていま す。 • http://p.tl/ys4k 42
  43. 43. ご清聴ありがとうございました! 43

×