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

  • Published on
    26-Jan-2017

  • View
    638

  • Download
    0

DESCRIPTION

【開発事例】XPagesで作る動画閲覧サイト 【開発事例】XPagesで作る動画閲覧サイト エームサービス株式会社 IT推進部 マネジャー…

Transcript

【開発事例】XPagesで作る動画閲覧サイト 【開発事例】XPagesで作る動画閲覧サイト エームサービス株式会社 IT推進部 マネジャー 小野 誠 B-03 2016 2 免責事項 本資料は私自身の見解です。 ここでの情報を元にメーカー等に問い合わせたりする事は避けてください。 また、サンプルコード等を利用する場合は、 利用者の責任の元で十分に利用者環境での動作確認や影響度などについて 検討の上、ご利用ください。 本資料で掲載されているソフトウェア、およびファイルの使用、 または使用不具合等により生じたいかなる損害に関しましては一切責任を負いません。 全て利用者の自己責任でお願いします。 本資料に掲載された製品名または会社名等は それぞれ各社の商標または登録商標です。 3 アジェンダ 自己紹介 / 会社紹介 動画閲覧サイト?? Videoカスタムコントロールを作成する XPagesに組み込んでみよう! 動画閲覧サイトを作成する まとめ 4 自己紹介 NotesR4.5からずっと携わっています。 「えっ?!これNotes?」と言われるような、 Notesらしくないアプリ開発を心がけています。 休日はほとんどの確率でサッカーとフットサルやってます。 ポジションはFW(フォワード)ときどきCB(センターバック)。 活動範囲は千葉を中心に、東京・神奈川・埼玉・茨城。 小野 誠 (おの まこと) -エームサービス株式会社  業務:Notes開発、ITサポート 5 © AIMSERVICESCO.,LTD. All rights reserved. 50%株主 50%株主 本社所在地 東京都港区赤坂2丁目23番1号 アークヒルズフロントタワー 代表者 代表取締役社長 山村 俊夫 設立年月日 1976年5月6日 事業所数 約3,800ヵ所 売 上 高 1,663億18百万円 従業員数 約41,000名 三井物産株式会社 米国アラマーク社 *2016年3月期 連結 エームサービス会社概要 6 © AIMSERVICES CO.,LTD. All rights reserved. BDS HSS CRS R S C&E P D S&S C&C フード&サポート サービスの提供 ビジネス ダイニング サービス ヘルスケア サポート サービス リフレッシュメント        サービス カンファレンス& レクリエーション サービス コミッサリー &コレクショナルサービス   コンセッション &エンターテイメント パブリック ダイニング スクール &スポーツ エームサービス事業領域 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タグを と の間に貼り付けます。 20 これらのオプションを書き足す 赤枠部分を先ほどのタグに追加します。 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|auto metadata|metadata none|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 テキスト ソートNo Category 複数値可、テキスト カテゴリ Title テキスト 動画タイトル Comment テキスト 動画コメント MovieURL テキスト 動画URL Poster リッチテキスト ポスター画像ファイル ※すべて編集可能にしてあります 43 フォームを作成 44 ビューを作成 ビュー名 用途 Notes管理用 クライアントで管理するためのビュー XPages参照用 ブラウザから参照するためのビュー カテゴリ別 ブラウザから参照するためのビュー 完成イメージの右側に使用するビュー 45 ビューを作成 完成イメージの右側に使用するView。 46 XPagesを作成1 今回は手軽なBootstrapで構築します。 47 jsファイルの取り込み忘れずに! ファイルリソースの インポートから取り込む。 48 今回は短時間で作成するために Bootstrapを使用して作成。 ダウンロードしたBootstrapから 参考になるHTMLをコピペ。 XPagesを作成1 49 XPagesを作成1 バインディングを忘れずに! 50 XPagesを作成1(左側) 必要箇所をコントロールに変更し フィールド名をバインドしていく。 51 Videoカスタムコントロールを追加。 XPagesを作成1(左側) 52 必要なオプションの値を設定。 XPagesを作成1(左側) 53 XPagesを作成1(右側) 所定の位置に パネルコントロールを設置。 54 XPagesを作成1(右側) パネルコントロールの中に 繰り返しコントロールを設置。 55 繰り返しコントロール内にTableタグと イメージコントロール、計算結果コントロールを追記 XPagesを作成1(右側) 56 XPagesを作成2 先に作成したXPages参照用のビューをバインドして Title列から読み込みモードで開くように設定 57 動作確認 58 動画が無事に再生 動作確認 59 動作確認 動画が切り替わる 60 Notesクライアントで登録 Notes文書に登録するのはURLのみ 61 最低限のシステムは出来ました。 デザインや機能等は別のセッションをご参考に・・・ 62 まとめ 63 まとめ XPagesではじめからガッツリ作るのではなく、  使えるサンプルHTML等を利用して少しずつ改修してみる。  私のように技術が乏しくても勉強しながら構築できます。 流行に近いデザインを利用すると、説明をしなくても使い方が伝わる。 今回のデモはまだ完成品ではありません。  工夫次第で皆様の業務に役立つシステムになるかも?! 64 不慣れなスピーカーによるプレゼンに最後までお付き合い頂き、 ありがとうございました。 これからも大好きなNotesをもっと勉強して、 皆様に少しでも役に立つ情報を提供できたらと思います。 今回の動画閲覧サイトを参考にして、 今後の業務に役立つツールに仕上げてみてください! 今後ともよろしくお願いいたします。 65 参考文献 w3schools.com http://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

Recommended

View more >