動画用の動的サイトを作ってみた 〜簡単に更新する仕組み。

以前は、もう少し左脳右脳のバランス良く、ITをやったり音楽を作ったりしていたのですが、最近は、ITや動画関係に偏っています。そろそろもとのバランスに戻したいとは思っていますが。どうなることか。

動的サイトとは

今回は、動画用に、動的サイトなるものを作ってみました。

具体的に画面レイアウトで示すと以下です。

Google図形描画

さらに、具体的な動画自体はこれです。→動画🎥

だから何?ということでしょうね。見ただけではわからないです。

静的サイトは、こうした動画ページを構成するための情報を、一つのhtmlの中に、直接書き込んでガチガチに固めてしまいます。動画ファイルもhtmlと同じサーバーにアップロードします。それは高速に処理ができて安定しているわけです。しかし、何度も修正したい、差し替えたい、そうなると面倒でたまらない、そういうことになるわけです。

そこで、情報は、出来る限り外に置く。それを差し替えて使う。つまり、昔からみんなやっていることで、CDやDVD、カセットをプレーヤーに差し込む。そういうやり方です。こういうのをモジュール化する、と言います。

動的サイトとは、こうしたモジュール化をすることにより、WordPressのダッシュボードを開くことなく、外側からデータ、パラメータを送り込むことによって、動画サイトを生成するやり方、ということになります。下が全体の流れです。

Google図形描画

全部を細かく説明するのは、ちょっと骨が折れるので、5つのポイントの説明と、サンプルのファイル、スクリプトをリンクします。

ポイント解説

 GoogleSシートで、ファイルのレイアウトを決める。

こういったミニシステムを作るとき、決め手となるのは、ファイルのレイアウト、つまり、Sシートでの列の決め方、になります。今回の場合は、2つのファイルを用意します。1つのトランザクションファイル(動画idファイル)と、1つのマスターファイル(動画関係付けファイル)です。

(1)動画idファイルのレイアウト

下の表は、説明上、タテ書きにしてありますが、Sシートでは、項目名は、列の名前です。

シート1:

項目名(列の名前)説明
公開状況選択肢は、公開、非公開だけにします。初期設定は公開。公開である行だけ、JSONファイルへ書き込みます。
更新状況TRUEとFALSEのみが入るようにします。JSONファイルの更新を実行するときは、TRUEにします。具体的にはAppSheetで更新ボタンを押します。JSONファイルの更新が済んだら、全行をFALSEにします。
動画id重複を避けて、自由に英数文字で設定します。但し、vimeoの場合は、vimeoが採番したidになります。動画所在場所に基づきidの範囲を割り付けることはありません。表示タイプによりphpを切り替えます。
題名自由に記入。
動画所在場所今のところ、vimeo dropbox youtube wordpressサーバー 自宅サーバー その他。動画関係付けファイルからリンクします。
初期画像ファイルURL(*1)所在場所は、共有リンクが取得できる場所で、ブラウザからダウンロード操作なしで読み込み可能なリンクかチェックすること。
初期画像ファイルパス(*2)Macの場合は、ファイルパスを選択して右クリック→サービス→Finderに表示、により直接ファイルの修正可能。Windowsの場合は、ファイルパスをコピー→エクスプローラーへコピーして移動。
動画ファイルURL(*1)と同じ。
動画ファイルパス(*2)と同じ。
字幕ファイルURL_vtt(*1)と同じ。
字幕ファイルパス(*2)と同じ。
字幕一覧ファイルURL_txt(*1)と同じ。
字幕一覧ファイルパス(*2)と同じ。
説明ファイルURL_txt(*1)と同じ。
説明ファイルパス(*2)と同じ。
更新日時AppSheetでEditされたとき、=now()で更新されるように設定。

シート2:

項目名(列の名前)説明
JSONファイル生成日時GASにより記述します。JSONファイルの生成が終了したら、その日時を下行に追加します。
(2)動画関係付けファイルのレイアウト

 名前関係付け:

項目名(列の名前)説明
動画所在場所キー項目です。今のところ、vimeo dropbox youtube wordpressサーバー 自宅サーバー その他。動画idファイルへリンクします。
フォルダ名動画所在場所をグループ化する時、必要かと思いましたが、現在使っていません。
再生パス再生URLの一部となり、https://xxxxxx.com/yy?id=zzzzzzz、のyyに当たる部分です。このyyは固定ページのパーマリンクです。phpテンプレートと1対1対応します。
idパラメータ再生URLの一部となり、https://xxxxxx.com/yy?id=zzzzzzz、のidに当たる部分です。これを変更するとphpテンプレートの記述も変更が必要です。
再生URLの形式https://xxxxxx.com/yy?id=、までの部分を確認の意味で生成しています。

マニュアル:

項目名(列の名前)説明
タイトル マニュアルの見出しです。
URLGoogleドキュメントなどを共有設定、閲覧者、にして、URLを貼り付けておきます。
(3)リンク

GoogleSシート 参考 動画idファイル

GoogleSシート 参考 動画関係付けファイル

 AppSheetの設定を行う。

のファイルレイアウトを、今一度、お目通ししていただくとして、AppSheetの設定に入っていきます。あちこち設定する場所が移るので、動画で解説します。動画内では参考2としていますが、参考、と読み替えてください。

動画用動的webサイトのためのAppSheetの作成 25分 (動画🎥)

「AppSheetの作成」補足〜動画所在場所refについて(動画🎥)

 GASを作成する。

GoogleSシートの列については、以下のように、GASの中で、列名を直接に指定しているため、基本的には、列の追加変更削除は行わないようにお願いします。

(1)JSONファイルの生成条件

1) “シート1″のB列に、一つでもTRUEがある場合は、下記のJSONファイルの上書きを実行して、上書きが終了したら、B列の値を全てFALSEに置き換える。

2) JSONファイルの先頭に”[“、末尾に”]”を入れる。

3) “シート1″のA列の値が”公開”の場合、C F H J L N列のデータを書き込む。無しの場合は空欄””。

4) 全てのデータの書き込みが終わったら、”シート2″のA列に、その日時を入れた行を追加する。

5) GASは、トリガー設定、実行関数:generateJSON  イベントのソースを選択:スプレッドシートから イベントの種類を選択:変更時 エラー通知設定;毎日通知を受け取る。

(2)リンク

JSONファイル生成のGAS

 WordPressテンプレート用phpを作成する。

動的サイトを置く場所は、WordPressの固定ページにしました。今のところ、WordPressプレーヤーを組み込んだ固定ページを2パターン、vimeoのプレーヤーを組み込んだ固定ページを1パターン、計3パターンのテンプレート用phpを作りました。固定ページ自体は、ほぼ空っぽで、URLでの指示に対応するテンプレートphpに、形式の全ての情報が入っています。YouTubeを組み込む場合は、またYouTube用のphpを作ることになりますが、YouTubeはvimeoのような分かりやすいidではなく、Dropboxのような生成ユニークidを使用しているので、Dropboxに近い作り方になると思います。YouTubeもこの仕組みを使えば、擬似的に、差し替え自由な形を作れると思います。が、しかしYouTubeの狙いとはズレています。

(1)リンク

vimeo vm5 WordPressリンク用php

dropbox dr5 字幕一覧あり WordPressリンク用php

dropbox ds5 字幕一覧なし WordPressリンク用php

 JSONファイルの自動FTPを組み込む。

一応、JSONファイルの自動FTPを組み込みました。具合よく有り合わせです。多少、ギクシャクしたりクラッシュすることもあります。まず、Transmit5でFTP更新がアプリ起動だけで動くようにAutomatorでアプリ化、次にHazelでフォルダ監視をして、フォルダが変化したらアプリが起動するようにしました。決め手は、HazelにAppleScriptが組み込み可能なところです。
但し、Macの起動が必要なので、宅外の場合は、iPhoneのFTPアプリで手動で更新します。

Transmit5(外部サイト)

Transmitの設定

MacのAutomatorについて(外部サイト)

Automatorの設定

Hazelの説明のサイトは、丁寧な日本語でのものが見当たりませんが、ちょっと古いがこれでしょうか。(外部サイト)

Hazelの設定

その他

私は、ChatGPTをよく使いますが、3.5の無料版です。有料版は日本円で約2700円/月、ということで、ちょっと高過ぎます。無料版でも、うまく質問をすれば、プログラミングもやってくれます。分からないことをザックリ理解するのに、便利です。活用をお勧めします。

手元でデータをサクッと変更できることが一番嬉しいこと!
確かに、最近、自動文字起こし、翻訳と便利になってきている一方、人間側として、表記の間違い、漢字の間違い、ほか、間違いの点検が面倒になり、その修正が億劫になっていると思います。そこで、こうした手元でサクッと、ほぼリアルタイムで修正できる仕組みは、とても助かるのではと思います。

以上

↑広告-Google AdSense-