xpagesday 2016 「開発事例 - xpages で作る動画閲覧サイト」

2016【開発事例】 XPages で作る動画閲覧サイト

エームサービス株式会社IT 推進部　マネジャー小野　誠

B-03

2

免責事項

本資料は私自身の見解です。ここでの情報を元にメーカー等に問い合わせたりする事は避けてください。

また、サンプルコード等を利用する場合は、利用者の責任の元で十分に利用者環境での動作確認や影響度などについて検討の上、ご利用ください。

本資料で掲載されているソフトウェア、およびファイルの使用、または使用不具合等により生じたいかなる損害に関しましては一切責任を負いません。

全て利用者の自己責任でお願いします。

本資料に掲載された製品名または会社名等はそれぞれ各社の商標または登録商標です。

3

アジェンダ自己紹介　 / 　会社紹介

動画閲覧サイト？？

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

XPages に組み込んでみよう！

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

まとめ

4

自己紹介

NotesR4.5 からずっと携わっています。「えっ？！これ Notes ？」と言われるような、Notes らしくないアプリ開発を心がけています。

休日はほとんどの確率でサッカーとフットサルやってます。ポジションは FW （フォワード）ときどき CB （センターバック）。活動範囲は千葉を中心に、東京・神奈川・埼玉・茨城。

小野　誠　（おの　まこと） - エームサービス株式会社　業務： Notes 開発、ＩＴサポート

5© AIMSERVICESCO.,LTD. 　 All rights reserved.

５０％株主 ５０％株主

本社所在地東京都港区赤坂 2 丁目 23 番 1 号 アークヒルズフロントタ

ワー

代表者 代表取締役社長　山村 俊夫

設立年月日 １９７６年５月６日 事業所数約３ , ８００ヵ所

売　上　高１ , ６６３億１８百万円

従業員数約４１ , ０００名

三井物産株式会社 米国アラマーク社

＊ 2016 年 3 月期 連結

エームサービス会社概要

6© AIMSERVICES CO.,LTD. All rights reserved.

ＢＤＳ ＨＳＳ

ＣＲＳＲ Ｓ

Ｃ＆Ｅ

Ｐ Ｄ Ｓ＆Ｓ

Ｃ＆Ｃフード＆サポートサービスの提供

ビジネスダイニングサービス

ヘルスケアサポートサービス

リフレッシュメント　　　　　　　サービス

カンファレンス＆レクリエーションサービス

コミッサリー＆コレクショナルサービス

　 コンセッション＆エンターテイメント

パブリックダイニング

スクール＆スポーツ

エームサービス事業領域

7

動画閲覧サイト？？

8

突然ですが・・・

このことわざ知っていますか？

9

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

10

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

11

キャベツの千切り方法

12

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

※この写真はエームサービスとは関係ありません

13

※この動画はエームサービスとは関係ありません

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

14

写真では伝わりにくいことでも、動画（動き）を見て理解しやすいことがあります。

動画を見せることにより、経験問わずわかりやすく確実に伝えることが可能です。

動画で人に伝えるシステムを・・・XPages で簡単に作ってしまいましょう！

15

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

16

Domino 9.0.1 （このデモでは使用していません）

Domino Designer 9.0.1

Internet Explorer 11

MP4 の動画

開発環境

17

さっそく作成

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

18

サンプル HTML5 をコピペする

HTML5 では＜ video＞タグを書きます。

この＜ video＞タグを流用して作成します。

19

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

20

これらのオプションを書き足す

赤枠部分を先ほどの <video> タグに追加します。

21

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

22

※繰り返しコントロールを使う理由としては、 source を複数セットする場合があるから。

ここも compositeDataで定義します。

23

ここも compositeDataで定義します。

24

属性設定方法

プロパティ定義＞新規プロパティで定義します。

25

＜ video＞タグ属性一覧を追加していきます

有効 /無効を定義していきます。

26

各属性設定方法（ 1/4 ）

名前 / 表示名 エディタ パラメータ その他

width -height -autoplay コンボボックス autoplay|有効

|無効loop コンボボックス loop|有効

|無効poster -

27

各属性設定方法（ 2/4 ）

名前 / 表示名 エディタ パラメータ その他

controls コンボボックス controls|有効|無効

muted コンボボックス muted|有効|無効

preload コンボボックス auto|autometadata|metadatanone|none|無効

28

各属性設定方法（ 3/4 ）

名前 / 表示名 エディタ パラメータ その他

source※表示名なし

- - 新規グループで作成複数インスタンスも可

source source

- - 新規グループ内で作成

source type

- - 新規グループ内で作成

ネストさせるイメージ

29

各属性設定方法（ 4/4 ）

名前 / 表示名 エディタ パラメータ その他

noHTML5 - - デフォルト値にこのブラウザには対応していません

完成イメージ

30

おさらい

31

おさらい

32

「新規グループ」を追加。ネストする感じです。

チェックをつける

おさらい

33

XPages に組み込んでみよう！

34

動画ファイルの設定

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

35

新規 XPage の作成

新規 XPage を作成する。

36

埋め込みたい場所にドラッグ

XPages に組み込む

37

controls:有効height ： 350 （任意）source>source:db 名 /mp4 ファイル名type:video/mp4

カスタムコントロールを選択

Video カスタムコントロールの設定

38

プレビューで見てみると・・・

Poster に設定していない場合は黒い画面が表示される

39

プレビューで見てみると・・・

動画が無事に再生

40

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

41

完成イメージ

時間の都合上、こちらを中心に説明します。

42

フォームを作成

フィールド名 種類 用途

SortNo テキスト ソート NoCategory 複数値可、テキスト カテゴリ

Title テキスト 動画タイトル

Comment テキスト 動画コメント

MovieURL テキスト 動画 URLPoster リッチテキスト ポスター画像ファイル

※すべて編集可能にしてあります

43

フォームを作成

44

ビューを作成

ビュー名 用途

Notes管理用 クライアントで管理するためのビュー

XPages参照用 ブラウザから参照するためのビュー

カテゴリ別 ブラウザから参照するためのビュー

完成イメージの右側に使用するビュー

45

ビューを作成

完成イメージの右側に使用する View 。

46

XPages を作成１

今回は手軽な Bootstrap で構築します。

47

js ファイルの取り込み忘れずに！

ファイルリソースのインポートから取り込む。

48

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

XPages を作成１

49

XPages を作成１

バインディングを忘れずに！

50

XPages を作成１（左側）

必要箇所をコントロールに変更しフィールド名をバインドしていく。

51

Video カスタムコントロールを追加。

XPages を作成１（左側）

52

必要なオプションの値を設定。

XPages を作成１（左側）

53

XPages を作成１（右側）

所定の位置にパネルコントロールを設置。

54

XPages を作成１（右側）

パネルコントロールの中に繰り返しコントロールを設置。

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

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

57

動作確認

58

動画が無事に再生

動作確認

59

動作確認

動画が切り替わる

60

Notes クライアントで登録

Notes文書に登録するのは URL のみ

61

最低限のシステムは出来ました。

デザインや機能等は別のセッションをご参考に・・・

62

まとめ

63

まとめ

• XPages ではじめからガッツリ作るのではなく、　使えるサンプル HTML 等を利用して少しずつ改修してみる。　私のように技術が乏しくても勉強しながら構築できます。

• 流行に近いデザインを利用すると、説明をしなくても使い方が伝わる。

• 今回のデモはまだ完成品ではありません。　工夫次第で皆様の業務に役立つシステムになるかも？！

64

不慣れなスピーカーによるプレゼンに最後までお付き合い頂き、ありがとうございました。

これからも大好きな Notes をもっと勉強して、皆様に少しでも役に立つ情報を提供できたらと思います。

今回の動画閲覧サイトを参考にして、今後の業務に役立つツールに仕上げてみてください！

今後ともよろしくお願いいたします。

65

参考文献• w3schools.comhttp://www.w3schools.com/

• HTML5 Video Custom Control for IBM XPages 　ChrisToohey

http://www.dominoguru.com/pages/html5_video_customcontrol_ibm_xpages.html

• 困ったときはここに聞いてみよう！http://qa.xpages.jp/QA/qa.nsf/

66