24年3月「動的サイトを作ってみた」、同12月「動画ショートコード」を作成し、動画配信のためのデータ作成方法を解説してきました。

その後、少し手直しを行ったため、改めて「動画パッケージの作り方」の解説をします。

なお「動画パッケージ」は、自作のメディアライブラリの中の一つのメニューです。

1　スクリプトの変更点

ファイルパス入力を不要に：

当初は、各URLファイルを入力した後、そのファイルパスを別途手で入力していました。これは手間なので、事前にメディアライブラリの中にメディアアセットとして登録済みの場合は、再生URLを登録するだけで、spreadsheetに対して、存在するファイルパスが自動的に呼び出されるよう改良しました。

２　アプリ運用変更点　

個別指定による再生サーバーの優先：

第3章で説明したように、再生URLに対しては個別に指定された再生サーバーが優先されます。個別指定がなければ、拡張子別の選択番号が適用されます。

メディアアセットごとにこの再生選択番号が設定され、例えば、以下のようになります。

拡張子別サーバー選択：

現状、下のように、３：Xserver(WordPress)、４：pCloud、を選択しています。

所在場所に「dynamic」を追加：

次に、動画パッケージの設定に入ります。以前にも説明した通り、動画はいくつかのメディアアセットを集めて作ります。このライブラリでは、初期画像ファイルURL、高画質動画ファイルURL、低画質動画ファイルURL、字幕ファイルURL、字幕一覧ファイルURL、説明ファイルURLの6種類です。基本的には、これらの再生URLを登録します。

動画パッケージの設定では、各URLを登録すると同時に再生サーバーも自動決定されます。例えば、初期画像はpCloudから表示、動画はDropboxから表示、字幕はXserverから表示、字幕一覧はpCloudから表示、説明はXserverから表示といったように、自由に設定が出来ます。動的に自由に場所が変更可能なので、呼び名をdynamicとしました。
ただし、字幕vttファイルについては、WordPressサーバーの中に置くようにします(そうしないと、Windowsの場合は字幕が表示されません)。

なお、再生URLを入力せずに、サーバー別のURLを直接入力することもできます。その場合は、個別選択、拡張子別選択の影響は受けずに、再生されます。

基礎情報として、いくつかに分類してありますが、この意図は、埋め込みコードの形式の違いをはっきりさせるためです。dynamic、wordpressサーバー、は、いずれもWordPressサーバーのHTML5動画プレーヤーを使用しますので、どれを選んでも同じ結果になります。Vimeo、YouTubeはそれぞれの動画プレーヤーを使うのでhtmlスクリプトも異なります。

３　ショートコードの生成

WordPressの投稿には、

• カスタムHTMLブロックに埋め込む方法
• ショートコードブロックに記載する方法
  

の二つがあり、表示される内容は同じです。

phpスクリプト

動画ショートコードの生成(WordPressサーバー内)

指定された videoid に基づいて videoembed.json を取得し、対応するレコードの embedCode を実行して動画を埋め込む。videoid が指定されていない、JSONが取得できない、または該当レコードが見つからない場合は「動画はまだ準備中です。」と表示する。

４　動画を使う目的に応じて選択する

動画のグルーピングは、広く公開したいときは、Vimeo、YouTubeを選択する、ブログの記事用については、ブログは文章や画像で説明を済ませたいところですが、実際の作業や動きを見せて補強した方がいい時は多々あります。その時はdynamicを使う、といった使い分けになります。大事なのは、視聴者の立場で考えること。例えば、ブログ記事の補強で動画を使う場合、大抵は、数分〜10分程度におさまると思いますが、内容が数分程度のものを見てもらうのに、その前に広告を長々と見てもらうというのは、それはむごいこと、ある意味失礼なことだと、私は、感じます。だから、そうした動画はdynamic、長くなった場合はVimeoを選びます。
YouTubeは、やむを得ない場合使う、という順位に考えています。

5　マイライブラリを２ページ並べる

動画パッケージを作成する手順は、最初に、メディアアセットをマイライブラリに登録することから始めます。次に、その登録されたアセットの再生URL(rd.phpの文字列のある)を、動画パッケージに登録します。この作業は、画面を２分割して、左側に「メディアアセット情報」、右側に「動画パッケージ」を配置すると便利です。それをクリックで表示するAppleScriptを紹介します。

SafariでAppSheetの2つのURLを左右に並べて表示するAppleScript。メインディスプレイのサイズを取得し、画面を左右に分割して各URLをそれぞれの位置に開く。Safariを起動後、左側に1つ目のURLを新規ウインドウで開き、続いて右側に2つ目のURLを開く。もし新規ウインドウが作成されずタブ化された場合は、システムイベント経由で新規ウインドウを強制的に生成し、右側に配置する。

終わりに

ここまで、メディアライブラリの作成から活用までの流れを説明してきました。

基本の考え方は「ひとつの場所に依存しない」です。脱YouTube、脱Dropboxです。

どうしても、人は、「この指とまれ」「このボール、あなたなら奪えるよ」と誘われると、群がる習性があります。そこを狙ったが如く、突然、天災、人災は起こり、その集まりを破壊します。あるいは、物事は、新しく生み出されてしばらくすると、それが普及して大衆化します。大衆化した次は飽和して衰退します。万物同じ原理で動いています。YouTubeは今は儲かっているでしょうが類似のサービスは間違いなく拡大します。YouTubeが未来ずっと存在することは難しいでしょう。

➡ 第１章へ戻る

🔗 目次ページへ戻る

しかしもっと簡単に考えて、まず、”38″の部分は自分で自由に設定できる動画idです。その動画idにどのサーバーにあるメディアをくっつけるかを決めます。ただし、VimeoやYouTubeの場合は、VimeoやYouTube側でidを発行するので、私がそれと別のidをさらに付けるのも管理を複雑にするだけなので、やめます。その結果、例えば、”38″はDropbox、”alt_38″は自宅サーバー、”885196700”はVimeo、”SRpWDu7gFC4″はYouTubeと動画idを決めることができます。重要なのは、動画idはユニークなキーであることです。

以下のようにショートコードブロックに、ショートコードを埋め込むようにして、””のvideoid(動画id)=の部分を書き換えれば、動画がサクッと置き換わるようになります。

以下が実際のショートコード貼り付けによる動画です。

[videoembed videoid="40"]

自分が作成した動画、YouTubeから探し出した動画などにidをつけて、動画ライブラリに登録しておけば、あとは利用が簡単です。

ポイント解説

それでは、この動画ショートコードの作成について、手順を説明します。下に全体図を掲載します。全部で４ステップになります。

❶　サーバーごとに埋め込みコードテンプレートを作成する。

現在、用意しているのは、Dropbox、Vimeo、YouTube、自宅サーバーの４つになりますが、埋め込みコードの書き方は、それぞれ違いがあります。Dropboxと自宅サーバーは、WordPress動画プレーヤーの使用方法に従って記述し、Vimeo、YouTubeはサイトで提供される貼り付け、埋め込みコードを参考にして記述して、それらのテンプレートを作成します。

Dropbox 埋め込みテンプレートの生成📄
Vimeo 埋め込みテンプレートの生成📄
YouTube 埋め込みテンプレートの生成📄
自宅サーバー 埋め込みテンプレートの生成📄

❷　動画idごとに埋め込みコードを生成する。

動画idファイル(spreadsheet)のS列(19列)に埋め込みコードを追記します。この埋め込みコードは、そのままWordPressのカスタムhtmlブロックへコピペすれば使えます。まず、その状態を作ります。

動画idごとに埋め込みコードを生成GAS📄

❸　埋め込みコードをJSONに書き込み、WordPressサーバーへ送る。

埋め込みコードをコピペするだけでも便利ではありますが、欠点もあります。ソースコードは見る人が見れば外から丸わかりなのでURLをコピーできます。巡回ロボットを使えばもっと簡単です。それを拡散できるわけですが、やたら拡散されてしまうことは非常に迷惑なことですので避けたいです。「漠然とした拡散は迷惑である」とするこの感覚が、SNSとの決定的な違いになります。

その意味で、「動的サイト」や「動画ショートコード」には、動画のURLまでは表記しませんので、やや、安全になります。埋め込みコードの欠点のあと一つは、複数箇所に書き込んでいて、もし動画他のURLを差し替えようとした時、複数箇所の修正をする必要があること、当たり前のことではありますが、これが結構ストレスになります。この点、元となる動画webサイトをメンテナンスすれば全部変更されます。

埋め込みコードJSON生成GAS📄

videoembed.jsonファイルは、gd_wp_dataに書き出されます。gd_wp_dataフォルダはHazelによって監視されており変化した場合はTransmit5のFTPにより数分以内にXserverにあるWordPressサーバーへ更新されます。

❹　動画ショートコードphpを作成する。

WordPressサーバー側では、投稿で記述されたショートコードとマッチするvideoembed.jsonファイル内の埋め込みコードに基づき、動画を再生します。

その処理を行うphpを、Cocoon childのfunctions.phpに追記します。

動画ショートコード起動php📄

まとめ

まとめになりますが、この動画ショートコードは、以前に投稿した、動的サイトの運用とセットになります。ぜひ、そちらもご一読ください→「動画用の動的サイトを作ってみた」。

以上です。