PowerPoint プレゼンテーション

Transcription

1 データベースを活用した動画投稿大型キャンペーン 必要な契約エビリー様と契約 SPIRAL 基本契約 SPIRALAPI オプション ( 分間 10 件以上動画の投稿が想定される場合 ) 必要なスキル HTML Javascript PHP 作業工数 1 営業日 1

2 手順 1. 必要な契約の準備 2.SPIRAL の設定 (1)SPIRAL API 発行 (2) 動画管理 DB 発行 (3) 動画投稿フォーム発行 (4) 動画投稿完了フォーム発行 (5) 動画一覧発行 3. ミルビィの設定 (6) ミルビィ連携情報を取得 4. 連携設定 (7) 動画投稿フォーム設定 (8) 動画投稿完了フォーム設定 (9) 動画一覧設定 2

3 手順 当手順では以下のフローを作成します 動画投稿フォーム SPIRAL 入力ページ確認ページサンキューページ 面白動画投稿 ( 個人情報入力 ) 面白動画投稿 ( 個人情報確認 ) 面白動画投稿 ( 個人情報確認 ) ミルビィ 動画データと投稿 ID( ) を POST 投稿管理 DB の主キー *** *** *** *** *** *** *** *** hoge@example.com 砂原太郎 東京都 区 登録 *** *** *** *** hoge@example.com 砂原太郎 東京都 区 動画管理 DB 動画投稿完了フォーム 更新 入力ページ 面白動画投稿 完了しました アップロード完了した動画情報を取得 SPIRAL API を使用し 動画管理 DB を更新 面白動画一覧 面白動画 動画再生用の Script を埋め込み ********** ********** ********** 3

4 手順 1. 必要な契約の準備 2.SPIRAL の設定 (1)SPIRAL API 発行 (2) 動画管理 DB 発行 (3) 動画投稿フォーム発行 (4) 動画投稿完了フォーム発行 (5) 動画一覧発行 3. ミルビィの設定 (6) ミルビィ連携情報を取得 4. 連携設定 (7) 動画投稿フォーム設定 (8) 動画投稿完了フォーム設定 (9) 動画一覧設定 4

5 (1)SPIRAL API 発行 1 開発 をクリック 2 スパイラル API をクリック 3 トークン発行 をクリック 4 タイトル を入力 後続の 4. 連携設定 (8) 動画投稿完了フォーム設定 (P.40 ) で使用する値となります 5 発行する をクリック 6 一覧へ戻る をクリック 5

6 手順 1. 必要な契約の準備 2.SPIRAL の設定 (1)SPIRAL API 発行 (2) 動画管理 DB 発行 (3) 動画投稿フォーム発行 (4) 動画投稿完了フォーム発行 (5) 動画一覧発行 3. ミルビィの設定 (6) ミルビィ連携情報を取得 4. 連携設定 (7) 動画投稿フォーム設定 (8) 動画投稿完了フォーム設定 (9) 動画一覧設定 6

7 (2) 動画管理 DB 発行 A. 基本設定 1 DB の + ボタンをクリック 2 通常 DB をクリック 7

8 (2) 動画管理 DB 発行 3 名前 タイトル レコード を入力 4 構成設定 をクリック 8

9 (2) 動画管理 DB 発行 5DB の構造を設定 本ページ下部のテーブルを参照して DB を設計してください 詳細手順は下記 URL を参照してください 赤枠部分の差替えキーワードはプログラム部分で利用しますので本サンプルと同じ名称で設定してください 10 桁連番 フィールドに自動的に値を生成する機能の設定仕様です 設定方法は次ページで解説します 当作業手順では 動画投稿時 動画ファイル以外に 動画タイトル 投稿者名 メールアドレス を取得し スパイラルの DB へ格納します 実際にご利用される場面にあった項目を設定ください 9

10 (2) 動画管理 DB 発行 B. 動画投稿 ID(10 桁連番 ) を設定 1 動画管理 ID の歯車マークをクリック 2 フィールド値自動生成トリガ の 動作 は 値が存在する場合何もしない を選択 3 生成する値で システム ID 10 桁 を選択 接頭文字列は任意の英字を入力 4 詳細を閉じる をクリック 10

11 (2) 動画管理 DB 発行 C. 登録状況 を設定 審査結果 も同様に設定してください ( 当手順書では使用しません ) 1 登録状況 の歯車マークをクリック 2 + ボタンを 1 回クリック 31 に 個人情報入力完了 2 に 動画投稿完了 の文言入力 4 詳細を閉じる をクリック 11

12 (2) 動画管理 DB 発行 5 新規作成 をクリック 6 OK をクリック 12

13 手順 1. 必要な契約の準備 2.SPIRAL の設定 (1)SPIRAL API 発行 (2) 動画管理 DB 発行 (3) 動画投稿フォーム発行 (4) 動画投稿完了フォーム発行 (5) 動画一覧発行 3. ミルビィの設定 (6) ミルビィ連携情報を取得 4. 連携設定 (7) 動画投稿フォーム設定 (8) 動画投稿完了フォーム設定 (9) 動画一覧設定 13

14 (3) 動画投稿フォーム発行 A. 基本設定 1 + をクリック 2 フォーム をクリック 14

15 (3) 動画投稿フォーム発行 3 動画管理 DB を選択し 新規作成 をクリック 4 名前 タイトル を入力 5 新規作成 をクリック 6 引き続き設定を行う をクリック 15

16 (3) 動画投稿フォーム発行 7 使用フィールドをクリック 16

17 (3) 動画投稿フォーム発行 8 動画管理 ID EMBEDKEY 審査結果 は 使用しない を選択 10 変更をクリック 9 登録状況 コンテンツ ID は 固定値 を選択 設定方法は 19 ページで紹介します 11 変更内容をフォームに反映 をクリック 17

18 (3) 動画投稿フォーム発行 B. 必須項目を設定 1 フィールド別チェック をクリック 2 フィールド名 より必須項目にしたいフィールドを選択 3 入力必須 の チェックする を選択 4 変更 をクリック 5 変更内容をフォームに反映 をクリック 18

19 (3) 動画投稿フォーム発行 B. 固定値を設定 < 登録状況 > 1 フィールド名 より 登録状況 を選択 2 個人情報入力完了 を選択 個人情報は登録したが 何らかの理由で動画のアップロードに失敗した 等の登録状況を格納する項目となります ミルビィ API を実行する際のパラメータとしては不要です 3 変更 をクリック 4 変更内容をフォームに反映 をクリック 19

20 (3) 動画投稿フォーム発行 < コンテンツ ID> 5 フィールド名 より コンテンツ ID を選択 6 dummyid( 任意の値 ) と入力 動画アップロード完了後 アップロードした動画に紐づくコンテンツ ID を取得することができます 動画投稿フォームでは 固定値を設定します 7 変更 をクリック 8 変更内容をフォームに反映 をクリック 20

21 手順 1. 必要な契約の準備 2.SPIRAL の設定 (1)SPIRAL API 発行 (2) 動画管理 DB 発行 (3) 動画投稿フォーム発行 (4) 動画投稿完了フォーム発行 (5) 動画一覧発行 3. ミルビィの設定 (6) ミルビィ連携情報を取得 4. 連携設定 (7) 動画投稿フォーム設定 (8) 動画投稿完了フォーム設定 (9) 動画一覧設定 21

22 (4) 動画投稿完了フォーム発行 1 + をクリック 2 フォーム をクリック 22

23 (4) 動画投稿完了フォーム発行 3 動画管理 DB を選択し 新規作成 をクリック 4 名前 タイトル を入力 5 新規作成 をクリック 6 引き続き設定を行う をクリック 23

24 (4) 動画投稿完了フォーム発行 7URL をメモ 8 使用フィールドをクリック 後続の 4. 連携設定 (8) 動画投稿完了フォーム設定 (P.40 ) で使用する値となります 9 全て使用しない をクリック 10 変更内容をフォームに反映 をクリック 24

25 手順 1. 必要な契約の準備 2.SPIRAL の設定 (1)SPIRAL API 発行 (2) 動画管理 DB 発行 (3) 動画投稿フォーム発行 (4) 動画投稿完了フォーム発行 (5) 動画一覧発行 3. ミルビィの設定 (6) ミルビィ連携情報を取得 4. 連携設定 (7) 動画投稿フォーム設定 (8) 動画投稿完了フォーム設定 (9) 動画一覧設定 25

26 (5) 動画一覧発行 1 + をクリック 2 一覧表 をクリック 26

27 (5) 動画一覧発行 3 新規作成 をクリック 4 新しい一覧表 の歯車マークをクリックして表示されるメニューの 設定 をクリック 5 一覧表として表示したい項目 アクセス権限は必要に応じて変えてください 詳細手順は下記 URL を参照してください 27

28 手順 1. 必要な契約の準備 2.SPIRAL の設定 (1)SPIRAL API 発行 (2) 動画管理 DB 発行 (3) 動画投稿フォーム発行 (4) 動画投稿完了フォーム発行 (5) 動画一覧発行 3. ミルビィの設定 (6) ミルビィ連携情報を取得 4. 連携設定 (7) 動画投稿フォーム設定 (8) 動画投稿完了フォーム設定 (9) 動画一覧設定 28

29 (6) ミルビィ連携情報を取得 A. 管理者の ID を取得 1 マスター管理者でログイン 2 ユーザー情報 をクリック 29

30 (6) ミルビィ連携情報を取得 3 種別 が 管理者 の ID をメモ 後続の 4. 連携設定 (7) 動画投稿フォーム設定 (P.35 ) で使用する値となります 30

31 (6) ミルビィ連携情報を取得 B. フォルダのコンテンツ ID を取得 1 一般管理者でログイン 2 コンテンツ をクリック 31

32 (6) ミルビィ連携情報を取得 3 HOME の () 内の数字をメモ例 )1 後続の 4. 連携設定 (7) 動画投稿フォーム設定 (P.35 ) で使用する値となります アップロードした動画の保存先となります 用途によってフォルダ分けしたい場合 1 親フォルダとして指定したいフォルダをクリック 2 ボタンをクリック 3 新規作成 画面で フォルダ名を入力し OK をクリックの流れでフォルダを作成ください 32

33 (6) ミルビィ連携情報を取得 C. 埋め込みコードを取得 事前に埋め込みコードを作成してください 1 一般管理者でログイン 2 埋め込みコード をクリック 33

34 (6) ミルビィ連携情報を取得 3 作成した埋め込みコードの () 内の数字をメモ例 )5 後続の 4. 連携設定 (8) 動画投稿完了フォーム設定 (P.40 ) で使用する値となります 34

35 手順 1. 必要な契約の準備 2.SPIRAL の設定 (1)SPIRAL API 発行 (2) 動画管理 DB 発行 (3) 動画投稿フォーム発行 (4) 動画投稿完了フォーム発行 (5) 動画一覧発行 3. ミルビィの設定 (6) ミルビィ連携情報を取得 4. 連携設定 (7) 動画投稿フォーム設定 (8) 動画投稿完了フォーム設定 (9) 動画一覧設定 35

36 (7) 動画投稿フォーム設定 1 動画アップロードフォーム の歯車マークをクリックして表示されるメニューの 設定 をクリック 2 サンキューページ をクリック 3 ソースデザイン をクリック 36

37 (7) 動画投稿フォーム設定 4accesskey 生成処理を追加 <!DOCTYPE html> の上に 以下の PHP プログラムを追加 <!-- SMP_DYNAMIC_PAGE DISPLAY_ERRORS=ON NAME=SAMPLE_UPLOAD_VIDEO_THANKS --> <?php /** * accesskey 作成 */ // 変更必要 クライアント ID 契約時に提供される クライアント ID をご指定ください $clientid = xxxxxx ; // 変更必要 登録を行うミルビィ上のユーザーの id_user 管理画面の ユーザー管理 メニューより 種別 が " 管理者 " の ID を指定してください $id_user = 1; // 変更必要 事前に発行された署名用秘密キーです 外部に知られないように保持する必要があります $secretkey = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ; // accesskey 作成 $expire = time() + (30 * 60 * 60); $sign = sha1("{$clientid}/{$id_user}/{$expire}/{$secretkey}"); $accesskey = "v1,{$clientid},{$id_user},{$expire},{$sign}";?> 変更必要 が記載されている 3 つの項目を差替え $clientid 契約時に提供される クライアント ID をご指定ください $id_user 登録を行うミルビィ上のユーザーの id_user (P.29 1 管理者の ID を取得 でメモした値 ) $secretkey 契約時に発行された署名用秘密キーです 外部に知られないように保持する必要があります 詳細手順は下記 URL を参照してください 37

38 (7) 動画投稿フォーム設定 5form タグ追加 <body> タグ内に以下 <form> タグを追加 画面デザイン 文言はご自由に変更ください <form method="post" action=" enctype="multipart/form-data"> <input type="file" name="file"> <!-- アクセスキー --> <input type="hidden" name="accesskey" value="<? echo $accesskey;?>"> <!-- 変更必要 アップロード完了後に遷移する URL --> <input type= hidden name= return_url value= (P.21 で発行したフォーム URL) &vcid=%val:usr:msvideocontrolid%"> <!-- 変更必要 フォルダのコンテンツ ID --> <input type="hidden" name="parent_id_contents" value= 1"> <!-- エンコード設定の ID --> <input type="hidden" name="common_id_recipe" value="1"> <!-- 名前 ( 入力された動画タイトルを指定 ) --> <input type="hidden" name="name" value="%val:usr:videotitle%"> <!-- 1 を指定した場合 変換完了後に自動公開を行います --> <input type="hidden" name="autocommit" value="1"> </form> <input class="submit" type="submit" name="submit" value=" 動画投稿 "> 変更必要 が記載されている 2 つの項目を差替え name= return_url 動画アップロード完了後に遷移する画面を指定します アップロード完了後に 動画情報を動画管理 DB へ更新したいため キーとなる ID(%val:usr:msVideoControlID%) をパラメータとして指定します (P.21 でメモしたフォーム URL)&vcid=%val:usr:msVideoControlID% name= parent_id_contents フォルダのコンテンツ ID(P.31 2 フォルダのコンテンツ ID を取得 でメモした値 ) type=file の name 値は file としてください 詳細手順は下記 URL を参照してください 38

39 (7) 動画投稿フォーム設定 6 前ページで編集したソースを貼付 7 変更 をクリック 8 変更内容をフォームに反映 をクリック 39

40 手順 1. 必要な契約の準備 2.SPIRAL の設定 (1)SPIRAL API 発行 (2) 動画管理 DB 発行 (3) 動画投稿フォーム発行 (4) 動画投稿完了フォーム発行 (5) 動画一覧発行 3. ミルビィの設定 (6) ミルビィ連携情報を取得 4. 連携設定 (7) 動画投稿フォーム設定 (8) 動画投稿完了フォーム設定 (9) 動画一覧設定 40

41 (8) 動画投稿完了フォーム設定 1 動画投稿完了フォーム の歯車マークをクリックして表示されるメニューの 設定 をクリック 2 入力ページ をクリック 3 ソースデザイン をクリック 41

42 (8) 動画投稿完了フォーム設定 4 動画情報取得 動画管理 DB 更新処理追加 <!DOCTYPE html> の上に 以下の PHP プログラムを追加 <!-- SMP_DYNAMIC_PAGE DISPLAY_ERRORS=ON NAME=SAMPLE_UPLOAD_VIDEO_END --> <?php // 変更必要 API トークンタイトル $SPIRAL->setApiTokenTitle( P.5 で発行した API トークンタイトル ); // コンテンツ ID $id_contents = $_GET["id_contents"]; // 動画管理 ID( 動画管理 ID 更新キー ) $msvideocontrolid = $_GET["vcid"]; // エラーコード $error = $_GET["error"]; // エラーでない if (empty($error)){ // チケット取得 $ticket = getticket(); // 動画情報を取得 $embedkey = getembedkey($ticket, $id_contents); // 動画管理 DBを更新 // 変更必要 動画管理 DBのタイトル $db = $SPIRAL->getDataBase( msvideocontroldb ); $db->addequalcondition("msvideocontrolid", $msvideocontrolid); $db->doupdate(array( "id_contents" => $id_contents, // コンテンツID "embedkey" => $embedkey, // EMBEDKEY resiststatus => 2 完了 ) ) ); } // 登録状況 2( 応募 変更必要 が記載されている 2 つの項目を差替え $SPIRAL->setApiTokenTitle( P.5 で発行した API トークンタイトル ); $db = $SPIRAL->getDataBase( P.6 で発行した動画管理 DB のタイトル ); 次ページへ続きます 42

43 (8) 動画投稿完了フォーム設定 /** * チケットを返す */ function getticket() { // ログイン $url = " // 変更必要 ホスト名 ( クライアント固有コード ) $host = xxxxxx ; // 変更必要 ユーザー ID $userid = xxxxxx"; // 変更必要 パスワード $password = xxxxxxx"; // 引数 $postdata = array( "host" => $host, "userid" => $userid, "password" => $password ); $ch = curl_init($url); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_HTTPHEADER, array('conotent-type:application/x-www-formurlencoded')); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_POSTFIELDS, $postdata); } $result = curl_exec($ch); curl_close($ch); // デコード $resultdec = json_decode($result, true); // チケット取得 $ticket = $resultdec["ticket"]; // チケット返却 return $ticket; 変更必要 が記載されている 3 つの項目を差替え $host 契約時に提供される クライアント ID $userid 一般ユーザー の ユーザー ID $password 上記ユーザー ID に紐づくパスワード 次ページへ続きます 43

44 (8) 動画投稿完了フォーム設定 /** * embedkey を返す */ function getembedkey($ticket, $id_contents){ $url = " // 引数 $postdata = array( ticket => $ticket, // チケット id_tag => 5, // 変更必要 埋め込みコードID "id_contents" => $id_contents // 動画コンテンツのID ); $ch = curl_init($url); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_HTTPHEADER, array('conotent-type:application/x-www-formurlencoded')); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_POSTFIELDS, $postdata); $result = curl_exec($ch); curl_close($ch); }?> // デコード $resultdec = json_decode($result, true); // embedkey 返却 return $resultdec["embedkey"]; 変更必要 が記載されている 1 つの項目を差替え id_tag 埋め込みコード ID(P.33 3 埋め込みコードを取得 でメモした値 ) 44

45 (8) 動画投稿完了フォーム設定 5 前ページで編集したソースを貼付 6 変更 をクリック 7 変更内容をフォームに反映 をクリック 45

46 手順 1. 必要な契約の準備 2.SPIRAL の設定 (1)SPIRAL API 発行 (2) 動画管理 DB 発行 (3) 動画投稿フォーム発行 (4) 動画投稿完了フォーム発行 (5) 動画一覧発行 3. ミルビィの設定 (6) ミルビィ連携情報を取得 4. 連携設定 (7) 動画投稿フォーム設定 (8) 動画投稿完了フォーム設定 (9) 動画一覧設定 46

47 (9) 動画一覧設定 1 動画一覧 の歯車マークをクリックして表示されるメニューの 設定 をクリック 2 動画一覧 が選択されていることを確認 3 単票の 設定 をクリック 47

48 (9) 動画一覧設定 <script type="text/javascript">var Eviry=Eviry {};Eviry.Player (Eviry.Player={});Eviry.Player.embedkey="%val:usr:embedkey%";</scri pt> <script type="text/javascript" src=" 4 単票のソース編集画面に動画を表示したい箇所に上記 script タグを貼付 5 保存 をクリック 48