XPagesDay 2016 B03 エームサービス株式会社小野誠さんによる開発事例とその技術紹介です。

1. 【開発事例】XPagesで作る動画閲覧サイト
エームサービス株式会社
IT推進部 マネジャー
小野 誠
B-03

2. 2
免責事項
本資料は私自身の見解です。
ここでの情報を元にメーカー等に問い合わせたりする事は避けてください。
また、サンプルコード等を利用する場合は、
利用者の責任の元で十分に利用者環境での動作確認や影響度などについて
検討の上、ご利用ください。
本資料で掲載されているソフトウェア、およびファイルの使用、
または使用不具合等により生じたいかなる損害に関しましては一切責任を負いません。
全て利用者の自己責任でお願いします。
本資料に掲載された製品名または会社名等は
それぞれ各社の商標または登録商標です。

3. 3
アジェンダ
自己紹介 / 会社紹介
動画閲覧サイト？？
Videoカスタムコントロールを作成する
XPagesに組み込んでみよう！
動画閲覧サイトを作成する
まとめ

4. 4
自己紹介
NotesR4.5からずっと携わっています。
「えっ？！これNotes？」と言われるような、
Notesらしくないアプリ開発を心がけています。
休日はほとんどの確率でサッカーとフットサルやってます。
ポジションはFW（フォワード）ときどきCB（センターバック）。
活動範囲は千葉を中心に、東京・神奈川・埼玉・茨城。
小野 誠 （おの まこと）
-エームサービス株式会社
業務：Notes開発、ＩＴサポート

5. 5© AIMSERVICESCO.,LTD. All rights reserved.
５０％株主 ５０％株主
本 社 所 在 地 東京都港区赤坂2丁目23番1号 アークヒルズフロントタワー
代 表 者 代表取締役社長 山村 俊夫
設 立 年 月 日 １９７６年５月６日 事 業 所 数 約３,８００ヵ所
売 上 高 １,６６３億１８百万円 従 業 員 数 約４１,０００名
三井物産株式会社 米国アラマーク社
＊2016年3月期 連結
エームサービス会社概要

6. 6
© AIMSERVICES CO.,LTD. All rights reserved.
ＢＤＳ ＨＳＳ
ＣＲＳＲ Ｓ
Ｃ＆Ｅ
Ｐ Ｄ Ｓ＆Ｓ
Ｃ＆Ｃ
フード＆サポート
サービスの提供
ビジネス
ダイニング
サービス
ヘルスケア
サポート
サービス
リフレッシュメント
サービス
カンファレンス＆
レクリエーション
サービス
コミッサリー
＆コレクショナルサービス
コンセッション
＆エンターテイメント
パブリック
ダイニング
スクール
＆スポーツ
エームサービス事業領域

7. 7
動画閲覧サイト？？

8. 8
突然ですが・・・
このことわざ知っていますか？

9. 9
百聞は一見に如かず
百聞は一見にしかずとは、
百回聞くよりも、たった一度でも自分の目で見たほうが確かだということ。

10. 10
例えばこんな時に使えます

11. 11
キャベツの千切り方法

12. 12
キャベツをねこの手の形で押さえ、親指は
伸ばします。
親指で包丁が左に進むのを押さえる感じで
親指だけずらしてトントン・・・とリズム
よく切ります。
包丁が人差し指にぶつかりそうになったら、
左手全体を左にずらします。
※この写真はエームサービスとは関係ありません

13. 13
※この動画はエームサービスとは関係ありません
キャベツをねこの手の形で押さえ、親指は
伸ばします。
親指で包丁が左に進むのを押さえる感じで
親指だけずらしてトントン・・・とリズム
よく切ります。
包丁が人差し指にぶつかりそうになったら、
左手全体を左にずらします。

14. 14
写真では伝わりにくいことでも、
動画（動き）を見て理解しやすいことがあります。
動画を見せることにより、
経験問わずわかりやすく確実に伝えることが可能です。
動画で人に伝えるシステムを・・・
XPagesで簡単に作ってしまいましょう！

15. 15
Videoカスタムコントロールを作成する

16. 16
Domino 9.0.1（このデモでは使用していません）
Domino Designer 9.0.1
Internet Explorer 11
MP4の動画
開発環境

17. 17
さっそく作成
カスタムコントロールを作成します。
今回の名前は「ccVideoHTML」とします。

18. 18
サンプルHTML5をコピペする
HTML5では＜video＞タグを書きます。
この＜video＞タグを流用して作成します。

19. 19
作成したカスタムコントロールをソース表示にして
サンプルのVideoタグを
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">と
</xp:view>の間に貼り付けます。

20. 20
これらのオプションを書き足す
赤枠部分を先ほどの<video>タグに追加します。

21. 21
各属性をcompositeDataで定義します。

22. 22
※繰り返しコントロールを使う理由としては、
sourceを複数セットする場合があるから。
ここもcompositeDataで定義します。

23. 23
ここもcompositeDataで定義します。

24. 24
属性設定方法
プロパティ定義＞新規プロパティで定義します。

25. 25
＜video＞タグ属性一覧を追加していきます
有効/無効を定義していきます。

26. 26
各属性設定方法（1/4）
名前/表示名 エディタ パラメータ その他
width -
height -
autoplay コンボボックス autoplay|有効
|無効
loop コンボボックス loop|有効
|無効
poster -

27. 27
各属性設定方法（2/4）
名前/表示名 エディタ パラメータ その他
controls コンボボックス controls|有効
|無効
muted コンボボックス muted|有効
|無効
preload コンボボックス auto|auto
metadata|metadata
none|none
|無効

28. 28
各属性設定方法（3/4）
名前/表示名 エディタ パラメータ その他
source
※表示名なし
- - 新規グループで作成
複数インスタンスも可
source
source
- - 新規グループ内で作成
source
type
- - 新規グループ内で作成
ネストさせるイメージ

29. 29
各属性設定方法（4/4）
名前/表示名 エディタ パラメータ その他
noHTML5 - - デフォルト値に
このブラウザには対応していません
完成イメージ

30. 30
おさらい

31. 31
おさらい

32. 32
「新規グループ」を追加。
ネストする感じです。
チェックをつける
おさらい

33. 33
XPagesに組み込んでみよう！

34. 34
動画ファイルの設定
※今回はデモ用のため、DB内に保存しています。
リソース＞ファイルにインポートしてください。

35. 35
新規XPageの作成
新規XPageを作成する。

36. 36
埋め込みたい場所にドラッグ
XPagesに組み込む

37. 37
controls:有効
height：350（任意）
source>source:db名/mp4ファイル名
type:video/mp4
カスタムコントロールを選択
Videoカスタムコントロールの設定

38. 38
プレビューで見てみると・・・
Posterに設定して
いない場合は黒い画面が表示される

39. 39
プレビューで見てみると・・・
動画が無事に再生

40. 40
動画閲覧サイトを作成する

41. 41
完成イメージ
時間の都合上、こちらを中心に説明します。

42. 42
フォームを作成
フィールド名 種類 用途
SortNo テキスト ソートNo
Category 複数値可、テキスト カテゴリ
Title テキスト 動画タイトル
Comment テキスト 動画コメント
MovieURL テキスト 動画URL
Poster リッチテキスト ポスター画像ファイル
※すべて編集可能にしてあります

43. 43
フォームを作成

44. 44
ビューを作成
ビュー名 用途
Notes管理用 クライアントで管理するためのビュー
XPages参照用 ブラウザから参照するためのビュー
カテゴリ別 ブラウザから参照するためのビュー
完成イメージの右側に使用するビュー

45. 45
ビューを作成
完成イメージの右側に使用するView。

46. 46
XPagesを作成１
今回は手軽なBootstrapで構築します。

47. 47
jsファイルの取り込み忘れずに！
ファイルリソースの
インポートから取り込む。

48. 48
今回は短時間で作成するために
Bootstrapを使用して作成。
ダウンロードしたBootstrapから
参考になるHTMLをコピペ。
XPagesを作成１

49. 49
XPagesを作成１
バインディングを忘れずに！

50. 50
XPagesを作成１（左側）
必要箇所をコントロールに変更し
フィールド名をバインドしていく。

51. 51
Videoカスタムコントロールを追加。
XPagesを作成１（左側）

52. 52
必要なオプションの値を設定。
XPagesを作成１（左側）

53. 53
XPagesを作成１（右側）
所定の位置に
パネルコントロールを設置。

54. 54
XPagesを作成１（右側）
パネルコントロールの中に
繰り返しコントロールを設置。

55. 55
<table class="table">
<tbody>
<xp:panel>
<xp:this.data>
<xp:dominoView var="view1" viewName=“V_CategoriesXPages”
keys="#{javascript:document1.getItemValueString('Category')}">
</xp:dominoView>
</xp:this.data>
<xp:repeat id="repeat1" rows="30"
value="#{view1}" var="viewEntry">
<tr><td>
<xp:image id=“image1” url="#{javascript:viewEntry.getColumnValue('Poster')}"
style="max-with:auto;height:80px"></xp:image>
</td>
<td>
<xp:text escape=“false” id="computedField3" value="#{viewEntry.$10}">
</xp:text>
</td></tr>
</xp:repeat>
</xp:panel>
</tbody>
</table>
繰り返しコントロール内にTableタグと
イメージコントロール、計算結果コントロールを追記
XPagesを作成１（右側）

56. 56
XPagesを作成２ 先に作成したXPages参照用のビューをバインドして
Title列から読み込みモードで開くように設定

57. 57
動作確認

58. 58
動画が無事に再生
動作確認

59. 59
動作確認
動画が切り替わる

60. 60
Notesクライアントで登録
Notes文書に登録するのはURLのみ

61. 61
最低限のシステムは出来ました。
デザインや機能等は別のセッションをご参考に・・・

62. 62
まとめ

63. 63
まとめ
• XPagesではじめからガッツリ作るのではなく、
使えるサンプルHTML等を利用して少しずつ改修してみる。
私のように技術が乏しくても勉強しながら構築できます。
• 流行に近いデザインを利用すると、説明をしなくても使い
方が伝わる。
• 今回のデモはまだ完成品ではありません。
工夫次第で皆様の業務に役立つシステムになるかも？！

64. 64
不慣れなスピーカーによるプレゼンに最後までお付き合い頂き、
ありがとうございました。
これからも大好きなNotesをもっと勉強して、
皆様に少しでも役に立つ情報を提供できたらと思います。
今回の動画閲覧サイトを参考にして、
今後の業務に役立つツールに仕上げてみてください！
今後ともよろしくお願いいたします。

65. 65
参考文献
• w3schools.com
http://www.w3schools.com/
• HTML5 Video Custom Control for IBM XPages
ChrisToohey
http://www.dominoguru.com/pages/html5_video_custo
mcontrol_ibm_xpages.html
• 困ったときはここに聞いてみよう！
http://qa.xpages.jp/QA/qa.nsf/

66. 66