以前は、もう少し左脳右脳のバランス良く、ITをやったり音楽を作ったりしていたのですが、最近は、ITや動画関係に偏っています。そろそろもとのバランスに戻したいとは思っていますが。どうなることか。
動的サイトとは
今回は、動画用に、動的サイトなるものを作ってみました。
具体的に画面レイアウトで示すと以下です。
さらに、具体的な動画自体はこれです。→動画🎥
だから何？ということでしょうね。見ただけではわからないです。
静的サイトは、こうした動画ページを構成するための情報を、一つのhtmlの中に、直接書き込んでガチガチに固めてしまいます。動画ファイルもhtmlと同じサーバーにアップロードします。それは高速に処理ができて安定しているわけです。しかし、何度も修正したい、差し替えたい、そうなると面倒でたまらない、そういうことになるわけです。
そこで、情報は、出来る限り外に置く。それを差し替えて使う。つまり、昔からみんなやっていることで、CDやDVD、カセットをプレーヤーに差し込む。そういうやり方です。こういうのをモジュール化する、と言います。
動的サイトとは、こうしたモジュール化をすることにより、WordPressのダッシュボードを開くことなく、外側からデータ、パラメータを送り込むことによって、動画サイトを生成するやり方、ということになります。下が全体の流れです。
全部を細かく説明するのは、ちょっと骨が折れるので、５つのポイントの説明と、サンプルのファイル、スクリプトをリンクします。
ポイント解説
❶ GoogleSシートで、ファイルのレイアウトを決める。
こういったミニシステムを作るとき、決め手となるのは、ファイルのレイアウト、つまり、Sシートでの列の決め方、になります。今回の場合は、２つのファイルを用意します。１つのトランザクションファイル（動画idファイル)と、１つのマスターファイル（動画関係付けファイル）です。
（１）動画idファイルのレイアウト
下の表は、説明上、タテ書きにしてありますが、Sシートでは、項目名は、列の名前です。
シート1：
| 項目名（列の名前） | 説明 |
| (A)公開状況 | 選択肢は、公開、非公開だけにします。初期設定は公開。公開である行だけ、JSONファイルへ書き込みます。 |
| (B)更新状況 | TRUEとFALSEのみが入るようにします。JSONファイルの更新を実行するときは、TRUEにします。具体的にはAppSheetで更新ボタンを押します。JSONファイルの更新が済んだら、全行をFALSEにします。 |
| (C)動画id | 重複を避けて、自由に英数文字で設定します。但し、vimeoの場合は、vimeoが採番したidになります。動画所在場所に基づきidの範囲を割り付けることはありません。表示タイプによりphpを切り替えます。 |
| (D)題名 | 自由に記入。 |
| (E)動画所在場所 | 今のところ、vimeo dropbox youtube wordpressサーバー 自宅サーバー その他。動画関係付けファイルからリンクします。 |
| (F)初期画像ファイルURL | (*1)所在場所は、共有リンクが取得できる場所で、ブラウザからダウンロード操作なしで読み込み可能なリンクかチェックすること。 |
| (G)初期画像ファイルパス | (*2)Macの場合は、ファイルパスを選択して右クリック→サービス→Finderに表示、により直接ファイルの修正可能。Windowsの場合は、ファイルパスをコピー→エクスプローラーへコピーして移動。 |
| (H)動画ファイルURL | (*1)と同じ。 |
| (I)動画ファイルパス | (*2)と同じ。 |
| (J)字幕ファイルURL_vtt | (*1)と同じ。 |
| (K)字幕ファイルパス | (*2)と同じ。 |
| (L)字幕一覧ファイルURL_txt | (*1)と同じ。 |
| (M)字幕一覧ファイルパス | (*2)と同じ。 |
| (N)説明ファイルURL_txt | (*1)と同じ。 |
| (O)説明ファイルパス | (*2)と同じ。 |
| (P)更新日時 | AppSheetでEditされたとき、=now()で更新されるように設定。 |
シート2：
| 項目名（列の名前） | 説明 |
| (A)JSONファイル生成日時 | GASにより記述します。JSONファイルの生成が終了したら、その日時を下行に追加します。 |
（２）動画関係付けファイルのレイアウト
名前関係付け：
| 項目名（列の名前） | 説明 |
| 動画所在場所 | キー項目です。今のところ、vimeo dropbox youtube wordpressサーバー 自宅サーバー その他。動画idファイルへリンクします。 |
| フォルダ名 | 動画所在場所をグループ化する時、必要かと思いましたが、現在使っていません。 |
| 再生パス | 再生URLの一部となり、https://xxxxxx.com/yy?id=zzzzzzz、のyyに当たる部分です。このyyは固定ページのパーマリンクです。phpテンプレートと１対１対応します。 |
| idパラメータ | 再生URLの一部となり、https://xxxxxx.com/yy?id=zzzzzzz、のidに当たる部分です。これを変更するとphpテンプレートの記述も変更が必要です。 |
| 再生URLの形式 | https://xxxxxx.com/yy?id=、までの部分を確認の意味で生成しています。 |
マニュアル：
| 項目名（列の名前） | 説明 |
| タイトル | マニュアルの見出しです。 |
| URL | Googleドキュメントなどを共有設定、閲覧者、にして、URLを貼り付けておきます。 |
（３）リンク
❷ AppSheetの設定を行う。
❶のファイルレイアウトを、今一度、お目通ししていただくとして、AppSheetの設定に入っていきます。あちこち設定する場所が移るので、動画で解説します。動画内では参考2としていますが、参考、と読み替えてください。
動画用動的webサイトのためのAppSheetの作成 25分 (動画🎥)
「AppSheetの作成」補足〜動画所在場所refについて(動画🎥)
❸ GASを作成する。
GoogleSシートの列については、以下のように、GASの中で、列名を直接に指定しているため、基本的には、列の追加変更削除は行わないようにしてください。
（１）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 イベントのソースを選択：スプレッドシートから イベントの種類を選択：変更時 エラー通知設定；毎日通知を受け取る。
（２）リンク
❹ WordPressテンプレート用phpを作成する。
動的サイトを置く場所は、WordPressの固定ページにしました。今のところ、WordPressプレーヤーを組み込んだ固定ページを２パターン、vimeoのプレーヤーを組み込んだ固定ページを１パターン、計３パターンのテンプレート用phpを作りました。固定ページ自体は、ほぼ空っぽで、URLでの指示に対応するテンプレートphpに、形式の全ての情報が入っています。YouTubeを組み込む場合は、またYouTube用のphpを作ることになりますが、YouTubeはvimeoのような分かりやすいidではなく、Dropboxのような生成ユニークidを使用しているので、Dropboxに近い作り方になると思います。YouTubeもこの仕組みを使えば、擬似的に、差し替え自由な形を作れると思います。が、しかしYouTubeの狙いとはズレています。
（１）リンク
dropbox dr5 字幕一覧あり WordPressリンク用php
dropbox ds5 字幕一覧なし WordPressリンク用php
❺ JSONファイルの自動FTPを組み込む。
一応、JSONファイルの自動FTPを組み込みました。具合よく有り合わせです。多少、ギクシャクしたりクラッシュすることもあります。まず、Transmit5でFTP更新がアプリ起動だけで動くようにAutomatorでアプリ化、次にHazelでフォルダ監視をして、フォルダが変化したらアプリが起動するようにしました。決め手は、HazelにAppleScriptが組み込み可能なところです。
但し、Macの起動が必要なので、宅外の場合は、iPhoneのFTPアプリで手動で更新します。
Hazelの説明のサイトは、丁寧な日本語でのものが見当たりませんが、ちょっと古いがこれでしょうか。(外部サイト)
その他
私は、ChatGPTをよく使いますが、3.5の無料版です。有料版は日本円で約2700円/月、ということで、ちょっと高過ぎます。無料版でも、うまく質問をすれば、プログラミングもやってくれます。分からないことをザックリ理解するのに、便利です。活用をお勧めします。
手元でデータをサクッと変更できることが一番嬉しいこと！
確かに、最近、自動文字起こし、翻訳と便利になってきている一方、人間側として、表記の間違い、漢字の間違い、ほか、間違いの点検が面倒になり、その修正が億劫になっていると思います。そこで、こうした手元でサクッと、ほぼリアルタイムで修正できる仕組みは、とても助かるのではと思います。
以上