PowerPoint プレゼンテーション

データベースを活用した

動画投稿大型キャンペーン

◆必要な契約

エビリー様と契約

SPIRAL基本契約

SPIRALAPIオプション（分間10件以上動画の投稿が想定される場合）

◆必要なスキル

HTML、Javascript、PHP

◆作業工数

1営業日

１．必要な契約の準備

２．SPIRALの設定

（１）SPIRAL API発行

（２）動画管理DB発行

（３）動画投稿フォーム発行

（４）動画投稿完了フォーム発行

（５）動画一覧発行

３．ミルビィの設定

（６）ミルビィ連携情報を取得

４．連携設定

（７）動画投稿フォーム設定

（８）動画投稿完了フォーム設定

（９）動画一覧設定

手順

手順

SPIRAL

ミルビィ

動画管理 DB 面白動画投稿 （個人情報確認） *** *** *** *** [email protected] 砂原太郎 東京都●●区…… 03-1111-…… 面白動画投稿 完了しました。 面白動画投稿 （個人情報入力） *** *** *** *** 面白動画投稿 （個人情報確認） *** *** *** *** [email protected] 砂原太郎 東京都●●区…… 登録 更新 動画データと投稿ID（※）をPOST ※投稿管理DBの主キー アップロード完了した動画情報を取得。 SPIRAL API を使用し、動画管理DBを更新。

動画投稿フォーム

動画投稿完了フォーム

入力ページ 確認ページ サンキューページ 面白動画一覧 面白動画 ＊＊＊＊＊＊＊＊＊＊ ＊＊＊＊＊＊＊＊＊＊ ＊＊＊＊＊＊＊＊＊＊ 動画再生用のScriptを埋め込み

当手順では以下のフローを作成します。

入力ページ

１．必要な契約の準備

２．SPIRALの設定

（１）SPIRAL API発行

（２）動画管理DB発行

（３）動画投稿フォーム発行

（４）動画投稿完了フォーム発行

（５）動画一覧発行

３．ミルビィの設定

（６）ミルビィ連携情報を取得

４．連携設定

（７）動画投稿フォーム設定

（８）動画投稿完了フォーム設定

（９）動画一覧設定

手順

（１）SPIRAL API発行

①「開発」をクリック ②「スパイラルAPI」をクリック ③「トークン発行」をクリック ④「タイトル」を入力 ※後続の「４．連携設定（８）動画投稿完了フォーム設定」（P.40〜） で使用する値となります。 ⑤「発行する」をクリック ⑥「一覧へ戻る」をクリック

１．必要な契約の準備

２．SPIRALの設定

（１）SPIRAL API発行

（２）動画管理DB発行

（３）動画投稿フォーム発行

（４）動画投稿完了フォーム発行

（５）動画一覧発行

３．ミルビィの設定

（６）ミルビィ連携情報を取得

４．連携設定

（７）動画投稿フォーム設定

（８）動画投稿完了フォーム設定

（９）動画一覧設定

手順

（２）動画管理DB発行

①「DB」の「＋」ボタンをクリック

②「通常DB」をクリック

（２）動画管理DB発行

④「構成設定」をクリック

（２）動画管理DB発行

⑤DBの構造を設定。本ページ下部のテーブルを参照して DBを設計してください ※詳細手順は下記URLを参照してください http://support.smp.ne.jp/function/35 10桁連番…フィールドに自動的に値を 生成する機能の設定仕様です。 設定方法は次ページで解説します 赤枠部分の差替えキーワードはプログラム部分で利用し ますので本サンプルと同じ名称で設定してください

（２）動画管理DB発行

①「動画管理ID」の歯車マークをクリック ②「フィールド値自動生成トリガ」の「動作」は 「値が存在する場合何もしない」を選択 ③生成する値で 「システムID」「10桁」を選択、 接頭文字列は任意の英字を入力

B. 「動画投稿ID（10桁連番）」を設定

（２）動画管理DB発行

②「＋」ボタンを1回クリック ①「登録状況」の歯車マークをクリック ③１に「個人情報入力完了」 ２に「動画投稿完了」の文言入力

C. 「登録状況」を設定

※「審査結果」も同様に設定してください。（当手順書では使用しません）

⑤「新規作成」をクリック

⑥「OK」をクリック

１．必要な契約の準備

２．SPIRALの設定

（１）SPIRAL API発行

（２）動画管理DB発行

（３）動画投稿フォーム発行

（４）動画投稿完了フォーム発行

（５）動画一覧発行

３．ミルビィの設定

（６）ミルビィ連携情報を取得

４．連携設定

（７）動画投稿フォーム設定

（８）動画投稿完了フォーム設定

（９）動画一覧設定

手順

（３）動画投稿フォーム発行

②「フォーム」をクリック

①「＋」をクリック

（３）動画投稿フォーム発行

③「動画管理DB」を選択し、 「新規作成」をクリック ⑤「新規作成」をクリック ⑥「引き続き設定を行う」をクリック ④「名前」「タイトル」を入力

（３）動画投稿フォーム発行

⑧「動画管理ID」「EMBEDKEY」「審査結果」は 「使用しない」を選択 ⑩変更をクリック ⑨「登録状況」「コンテンツID」は「固定値」を選択。 設定方法は19ページで紹介します。

（３）動画投稿フォーム発行

①「フィールド別チェック」をクリック ③「入力必須」の「チェックする」を選択 ②「フィールド名」より 必須項目にしたいフィールドを選択 ④「変更」をクリック

B. 必須項目を設定。

（３）動画投稿フォーム発行

① 「フィールド名」より「登録状況」を選択 ②「個人情報入力完了」を選択 ※個人情報は登録したが、何らかの理由で動画のアップロード に失敗した、等の登録状況を格納する項目となります。 ミルビィAPIを実行する際のパラメータとしては不要です。 ③「変更」をクリック

B. 固定値を設定。

（３）動画投稿フォーム発行

④「変更内容をフォームに反映」をクリック

＜登録状況＞

（３）動画投稿フォーム発行

⑤「フィールド名」より「コンテンツID」を選択 ⑥「dummyID（任意の値）」と入力 ※動画アップロード完了後、アップロードした動画に紐づく コンテンツIDを取得することができます。 動画投稿フォームでは、固定値を設定します。 ⑦「変更」をクリック

＜コンテンツID＞

１．必要な契約の準備

２．SPIRALの設定

（１）SPIRAL API発行

（２）動画管理DB発行

（３）動画投稿フォーム発行

（４）動画投稿完了フォーム発行

（５）動画一覧発行

３．ミルビィの設定

（６）ミルビィ連携情報を取得

４．連携設定

（７）動画投稿フォーム設定

（８）動画投稿完了フォーム設定

（９）動画一覧設定

手順

（４）動画投稿完了フォーム発行

②「フォーム」をクリック

③「動画管理DB」を選択し、 「新規作成」をクリック ⑤「新規作成」をクリック ⑥「引き続き設定を行う」をクリック ④「名前」「タイトル」を入力

（４）動画投稿完了フォーム発行

⑧使用フィールドをクリック

（４）動画投稿完了フォーム発行

⑨「全て使用しない」をクリッ ク ⑦URLをメモ。 ※後続の「４．連携設定（８）動画投稿完了フォーム設定」（P.40〜） で使用する値となります。

１．必要な契約の準備

２．SPIRALの設定

（１）SPIRAL API発行

（２）動画管理DB発行

（３）動画投稿フォーム発行

（４）動画投稿完了フォーム発行

（５）動画一覧発行

３．ミルビィの設定

（６）ミルビィ連携情報を取得

４．連携設定

（７）動画投稿フォーム設定

（８）動画投稿完了フォーム設定

（９）動画一覧設定

手順

（５）動画一覧発行

②「一覧表」をクリック

（５）動画一覧発行

③「新規作成」をクリック ④「新しい一覧表」の歯車マークをクリックして表示 されるメニューの「設定」をクリック ⑤一覧表として表示したい項目、アクセス権限は必要に応じて変えてくだ さい。 ※詳細手順は下記URLを参照してください http://support.smp.ne.jp/function/63

１．必要な契約の準備

２．SPIRALの設定

（１）SPIRAL API発行

（２）動画管理DB発行

（３）動画投稿フォーム発行

（４）動画投稿完了フォーム発行

（５）動画一覧発行

３．ミルビィの設定

（６）ミルビィ連携情報を取得

４．連携設定

（７）動画投稿フォーム設定

（８）動画投稿完了フォーム設定

（９）動画一覧設定

手順

（６）ミルビィ連携情報を取得

①マスター管理者でログイン

②「ユーザー情報」をクリック

（６）ミルビィ連携情報を取得

③「種別」が「管理者」の”ID”をメモ

※後続の「４．連携設定（７）動画投稿フォーム設定」（P.35〜） で使用する値となります。

（６）ミルビィ連携情報を取得

①一般管理者でログイン

B. フォルダのコンテンツIDを取得

（６）ミルビィ連携情報を取得

③「HOME」の（）内の数字をメモ 例）１ ※後続の「４．連携設定（７）動画投稿フォーム設定」（P.35〜） で使用する値となります。

※アップロードした動画の保存先となります。

用途によってフォルダ分けしたい場合、

①親フォルダとして指定したいフォルダをクリック

②

ボタンをクリック

③「新規作成」画面で、フォルダ名を入力し、「OK」をクリック

の流れでフォルダを作成ください。

（６）ミルビィ連携情報を取得

①一般管理者でログイン

C. 埋め込みコードを取得

※事前に埋め込みコードを作成してください。

http://support.miovp.com/embedcode.html

②「埋め込みコード」をクリック

（６）ミルビィ連携情報を取得

③作成した埋め込みコードの（）内の数字をメモ 例）５

※後続の「４．連携設定（８）動画投稿完了フォーム設定」（P.40〜） で使用する値となります。

１．必要な契約の準備

２．SPIRALの設定

（１）SPIRAL API発行

（２）動画管理DB発行

（３）動画投稿フォーム発行

（４）動画投稿完了フォーム発行

（５）動画一覧発行

３．ミルビィの設定

（６）ミルビィ連携情報を取得

４．連携設定

（７）動画投稿フォーム設定

（８）動画投稿完了フォーム設定

（９）動画一覧設定

手順

（７）動画投稿フォーム設定

①「動画アップロードフォーム」の歯車マークをクリ ックして表示されるメニューの「設定」をクリック ②「サンキューページ」を クリック ③「ソースデザイン」をクリック

<!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}"; ?>

④accesskey生成処理を追加

【変更必要】が記載されている3つの項目を差替え $clientid …契約時に提供される「クライアントID」をご指定ください。 $id_user …登録を行うミルビィ上のユーザーのid_user。 （P.29「①管理者のIDを取得」でメモした値） $secretkey …契約時に発行された署名用秘密キーです。 外部に知られないように保持する必要があります。 ※詳細手順は下記URLを参照してください http://support.miovp.com/direct_form_upload.html

（７）動画投稿フォーム設定

<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; ?>">

<!--【変更必要】アップロード完了後に遷移する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">

<input class="submit" type="submit" name="submit" value="動画投稿"> </form>

⑤formタグ追加

【変更必要】が記載されている２つの項目を差替え name=“return_url” …動画アップロード完了後に遷移する画面を指定します。 アップロード完了後に、動画情報を動画管理DBへ更新したいため、 キーとなるID（%val:usr:msVideoControlID%）をパラメータとして指定します。

（P.21でメモしたフォームURL）

_{&vcid=%val:usr:msVideoControlID%}

name=“parent_id_contents” …フォルダのコンテンツID（P.31「②フォルダのコンテンツIDを取得」でメモした値） ※type=fileのname値は「file」としてください。 ※詳細手順は下記URLを参照してください

（７）動画投稿フォーム設定

<body>タグ内に以下<form>タグを追加 ※画面デザイン、文言はご自由に変更ください。

⑦「変更」をクリック

⑧「変更内容をフォームに反映」をクリック

（７）動画投稿フォーム設定

１．必要な契約の準備

２．SPIRALの設定

（１）SPIRAL API発行

（２）動画管理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（応募 完了） ) ); }

④動画情報取得・動画管理DB更新処理追加

（８）動画投稿完了フォーム設定

/** * チケットを返す */ 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-form-urlencoded'));

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に紐づくパスワード

（８）動画投稿完了フォーム設定

/**

* 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-form-urlencoded'));

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"]; } ?> 【変更必要】が記載されている１つの項目を差替え id_tag …埋め込みコードID（P.33「③埋め込みコードを取得」でメモした値）

（８）動画投稿完了フォーム設定

（８）動画投稿完了フォーム設定

⑥「変更」をクリック

⑦「変更内容をフォームに反映」をクリック

１．必要な契約の準備

２．SPIRALの設定

（１）SPIRAL API発行

（２）動画管理DB発行

（３）動画投稿フォーム発行

（４）動画投稿完了フォーム発行

（５）動画一覧発行

３．ミルビィの設定

（６）ミルビィ連携情報を取得

４．連携設定

（７）動画投稿フォーム設定

（８）動画投稿完了フォーム設定

（９）動画一覧設定

手順

（９）動画一覧設定

①「動画一覧」の歯車マークをクリックして表示され るメニューの「設定」をクリック

②「動画一覧」が選択されていることを確認

（９）動画一覧設定

<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> ④単票のソース編集画面に