PowerPoint プレゼンテーション - PDF 無料ダウンロード

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(7) 動画投稿フォーム設定 4accesskey 生成処理を追加 <!DOCTYPE html> の上に以下の PHP プログラムを追加  <?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 を参照してください http://support.miovp.com/direct_form_upload.html 37

(7) 動画投稿フォーム設定 5form タグ追加 <body> タグ内に以下 <form> タグを追加画面デザイン文言はご自由に変更ください <form method="post" action="https://ccs.miovp.com/create_video" enctype="multipart/form-data"> <input type="file" name="file">  <input type="hidden" name="accesskey" value="<? echo $accesskey;?>">  <input type= hidden name= return_url value= (P.21 で発行したフォーム URL) &vcid=%val:usr:msvideocontrolid%">  <input type="hidden" name="parent_id_contents" value= 1">  <input type="hidden" name="common_id_recipe" value="1">  <input type="hidden" name="name" value="%val:usr:videotitle%">  <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 を参照してください http://support.miovp.com/direct_form_upload.html 38

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

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

(8) 動画投稿完了フォーム設定 4 動画情報取得動画管理 DB 更新処理追加 <!DOCTYPE html> の上に以下の PHP プログラムを追加  <?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

(8) 動画投稿完了フォーム設定 /** * チケットを返す */ function getticket() { // ログイン $url = "https://capi.miovp.com/login"; // 変更必要ホスト名 ( クライアント固有コード ) $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

(8) 動画投稿完了フォーム設定 /** * embedkey を返す */ function getembedkey($ticket, $id_contents){ $url = "https://capi.miovp.com/tag/make_embedkey"; // 引数 $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

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

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

(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="https://d1euehvbqdc1n9.cloudfront.net/001/eviry/js/eviry.player.min.js"></script> 4 単票のソース編集画面に動画を表示したい箇所に上記 script タグを貼付 5 保存をクリック 48