【WordPress】「動画ショートコード」を作ってみた。〜動画画像ライブラリ2〜

今回の投稿ですが、以前投稿した、「動画用の動的サイトを作ってみた」の続編の位置付けです。以前作った動的サイトは、”https://imakat.com/ds5?drid=38“の形式になっており、どこにでもリンクができる便利モノです。この”ds5″の部分は、再生方法の違いの意味を持たせ、”drid”の部分は、再生サーバーの違いの意味を持たせました。

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

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

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

→(スマホ向き) = 低画質・字幕位置選択はこちら =

字幕一覧(クリック)

(00:00:19) 1) それでは今日は動画webという動画のライブラリーですね。
(00:00:30) 2) それを手作りしましたのでそれを紹介していきます。
(00:00:36) 3) まず基礎情報としてですね。
(00:00:38) 4) ご覧のように有名な配信サーバーの名前がありますけど、
(00:00:45) 5) 動画をですね。まず分類しておきます。
(00:00:50) 6) 私としてはですね。
(00:00:52) 7) Vimeo Dropbox YouTube あと 自宅サーバーですね、
(00:01:01) 8) この自宅サーバーというのは自宅WordPressサーバーです。
(00:01:08) 9) 以上Vimeo Dropbox YouTube
(00:01:14) 10) 自宅サーバーと、この四つを主にですね、使っています。
(00:01:23) 11) 次に、それに基づいて作成した動画が、
(00:01:31) 12) 例えばこんな形でライブラリーになってます。
(00:01:37) 13) この動画idっていうのが、IDコードですね。
(00:01:41) 14) 個別の動画に対して振ったナンバー記号です。
(00:01:49) 15) この39というのを例えば見てみますと
(00:01:52) 16) これはDropbox、
(00:01:55) 17) それと次にalt_38というのがこれが自宅サーバー、
(00:02:03) 18) それからこの辺に、数字で長い、
(00:02:08) 19) 長い数字になってるものが、Vimeo
(00:02:16) 20) それからこの辺にあるランダム文字列ですね。
(00:02:21) 21) 英数字のランダム文字列のものは、
(00:02:24) 22) YouTube、というような形で動画idを振っております。
(00:02:35) 23) それで例えばこの最初のですね、39を見てみますけども
(00:02:44) 24) Editでどういう情報を登録しているかと言いますと、
(00:02:48) 25) まず初めに動画idを振ります。
(00:02:51) 26) それから題名をつける、動画の所在場所を選択します。
(00:03:01) 27) ついにその動画の初期画像ファイルですね、それを入れます。
(00:03:05) 28) 基本的にその動画サーバーと同じ位置になります。
(00:03:12) 29) この場合はDropboxの、
(00:03:14) 30) Dropboxリンクを入れてあります。
(00:03:19) 31) あとそのファイルの物理的な所在位置を記録しておきます→後日、自動登録に改善→字幕一覧にリンク。
(00:03:26) 32) あとそれとサムネイルとしての初期画像、
(00:03:30) 33) 次に、これがメインである動画ファイルURL、
(00:03:38) 34) これもこの場合はdropboxリンクです。
(00:03:43) 35) その動画のファイルパス、次に字幕ファイルです
(00:03:52) 36) ただしこの字幕ファイルにおいてはですね、
(00:03:56) 37) WordPressの制約で、
(00:03:59) 38) 配信するWordPressサーバーの中に置くということが、
(00:04:04) 39) 条件になってますので、自分の外部配信サーバーの中にですね、
(00:04:14) 40) vttファイルを置いているという例です。
(00:04:20) 41) それから次にこれは字幕ファイルのパスです。
(00:04:25) 42) ローカルパスです。次がその字幕一覧ファイルですね。
(00:04:30) 43) 字幕を外側に一覧表として掲示するものです。
(00:04:35) 44) これはDropboxリンクです。
(00:04:39) 45) 次はそのパスですね、
(00:04:43) 46) あとそれから必要ならば、説明のための文章、
(00:04:47) 47) テキストファイルでくっつけるという形になっています。
(00:04:52) 48) 普通はその公開しますので、公開を選びます。
(00:04:59) 49) こうして作った情報をsaveしますと、
(00:05:02) 50) キャンセルしますけども、既にあるので、そうすると
(00:05:10) 51) そうするとこのようにですね、出来上がるわけですね。
(00:05:14) 52) このJSON更新というのを押しますと
(00:05:17) 53) そのファイルが外部のWordPressサーバーの方に飛んでいきます。
(00:05:32) 54) これを具体的に再生してみたいと思います。
(00:06:03) 55) このように出来上がっています。
(00:06:09) 56) それから再生URLと合わせてですね、
(00:06:13) 57) 投稿の中でも紹介していますが
(00:06:16) 58) WordPressのショートコード、
(00:06:19) 59) WordPressのショートコードブロックへ記入するものですけれども、
(00:06:25) 60) このようにここに掲載してあります。以上です。

自分が作成した動画、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📄

まとめ

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

以上です。