今回の投稿ですが、以前投稿した、「動画用の動的サイトを作ってみた」の続編の位置付けです。以前作った動的サイトは、”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)の部分を書き換えれば、動画がサクッと置き換わるようになります。
以下が実際のショートコード貼り付けによる動画です。
字幕が邪魔の場合、動画の外側に表示します(ここをクリック)。
1) 〜水槽給水 ナチュラルフローパイプの利用〜字幕一覧(クリック)
2) 以前は、むき出しのパイプのままでしたが、水流が強過ぎました。
3) そこで、ご覧の、エーハイムのナチュラルフローパイプを着けました。
4) 上向きに出すと、ソフトに高速で水を供給できます。
5) 以上です。
自分が作成した動画、YouTubeから探し出した動画などにidをつけて、動画webに登録しておけば、あとは利用が簡単です。
ポイント解説
それでは、この動画ショートコードの作成について、手順を説明します。下に全体図を掲載します。全部で４ステップになります。
❶ サーバーごとに埋め込みコードテンプレートを作成する。
現在、用意しているのは、Dropbox、Vimeo、YouTube、自宅サーバーの４つになりますが、埋め込みコードの書き方は、それぞれ違いがあります。Dropboxと自宅サーバーは、WordPress動画プレーヤーの使用方法に従って記述し、Vimeo、YouTubeはサイトで提供される貼り付け、埋め込みコードを参考にして記述して、それらのテンプレートを作成します。
Dropbox 埋め込みテンプレートの生成📄
Vimeo 埋め込みテンプレートの生成📄
YouTube 埋め込みテンプレートの生成📄
自宅サーバー 埋め込みテンプレートの生成📄
❷ 動画idごとに埋め込みコードを生成する。
動画idファイル(spreadsheet)のS列(19列)に埋め込みコードを追記します。この埋め込みコードは、そのままWordPressのカスタムhtmlブロックへコピペすれば使えます。まず、その状態を作ります。
❸ 埋め込みコードをJSONに書き込み、WordPressサーバーへ送る。
埋め込みコードをコピペするだけでも便利ではありますが、欠点もあります。ソースコードは見る人が見れば外から丸わかりなのでURLをコピーできます。巡回ロボットを使えばもっと簡単です。それを拡散できるわけですが、やたら拡散されてしまうことは非常に迷惑なことですので避けたいです。「漠然とした拡散は迷惑である」とするこの感覚が、SNSとの決定的な違いになります。
その意味で、「動的サイト」や「動画ショートコード」には、動画のURLまでは表記しませんので、やや、安全になります。埋め込みコードの欠点のあと一つは、複数箇所に書き込んでいて、もし動画他のURLを差し替えようとした時、複数箇所の修正をする必要があること、当たり前のことではありますが、これが結構ストレスになります。この点、動画webサイトをメンテナンスすれば全部変更されます。
videoembed.jsonファイルは、gd_wp_dataに書き出されます。gd_wp_dataフォルダはHazelによって監視されており変化した場合はTransmit5のFTPにより数分以内にXserverにあるWordPressサーバーへ更新されます。
❹ 動画ショートコードphpを作成する。
WordPressサーバー側では、投稿で記述されたショートコードとマッチするvideoembed.jsonファイル内の埋め込みコードに基づき、動画を再生します。
その処理を行うphpを、Cocoon childのfunctions.phpに追記します。
動画ショートコード起動php📄
まとめ
まとめになりますが、この動画ショートコードは、以前に投稿した、動的サイトの運用とセットになります。ぜひ、そちらもご一読ください→「動画用の動的サイトを作ってみた」。
以上です。