以前は、もう少し左脳右脳のバランス良く、ITをやったり音楽を作ったりしていたのですが、最近は、ITや動画関係に偏っています。そろそろもとのバランスに戻したいとは思っていますが。どうなることか。
動的サイトとは
今回は、動画用に、動的サイトなるものを作ってみました。
具体的に画面レイアウトで示すと以下です。
さらに、具体的な動画自体はこれです。→動画🎥
だから何?ということでしょうね。見ただけではわからないです。
静的サイトは、こうした動画ページを構成するための情報を、一つのhtmlの中に、直接書き込んでガチガチに固めてしまいます。動画ファイルもhtmlと同じサーバーにアップロードします。それは高速に処理ができて安定しているわけです。しかし、何度も修正したい、差し替えたい、そうなると面倒でたまらない、そういうことになるわけです。
そこで、情報は、出来る限り外に置く。それを差し替えて使う。つまり、昔からみんなやっていることで、CDやDVD、カセットをプレーヤーに差し込む。そういうやり方です。こういうのをモジュール化する、と言います。
動的サイトとは、こうしたモジュール化をすることにより、WordPressのダッシュボードを開くことなく、外側からデータ、パラメータを送り込むことによって、動画サイトを生成するやり方、ということになります。下が全体の流れです。
全部を細かく説明するのは、ちょっと骨が折れるので、5つのポイントの説明と、サンプルのファイル、スクリプトをリンクします。
ポイント解説
❶ GoogleSシートで、ファイルのレイアウトを決める。
こういったミニシステムを作るとき、決め手となるのは、ファイルのレイアウト、つまり、Sシートでの列の決め方、になります。今回の場合は、2つのファイルを用意します。1つのトランザクションファイル(動画idファイル)と、1つのマスターファイル(動画関係付けファイル)です。
(1)動画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)と同じ。字幕ファイルについては、WordPressサーバー内のwp-contentフォルダ以下に置く必要があります(Windowsで必要になる)。下記❺のFTP自動更新はWordPressサーバーへの更新なので、この対象フォルダの中に、字幕ファイルを入れておくようにします。従って、URLは例えば、 “https://xxxxx.com/wp-content/uploads/gd_wp_data/vttdata/yyyyy.vtt”という記述になります。 |
(K)字幕ファイルパス | (*2)と同じ。 |
(L)字幕一覧ファイルURL_txt | (*1)と同じ。 |
(M)字幕一覧ファイルパス | (*2)と同じ。 |
(N)説明ファイルURL_txt | (*1)と同じ。 |
(O)説明ファイルパス | (*2)と同じ。 |
(P)更新日時 | AppSheetでEditされたとき、=now()で更新されるように設定。 |
※1:
シート2:
項目名(列の名前) | 説明 |
(A)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=、までの部分を確認の意味で生成しています。 |
マニュアル:
項目名(列の名前) | 説明 |
タイトル | マニュアルの見出しです。 |
URL | Googleドキュメントなどを共有設定、閲覧者、にして、URLを貼り付けておきます。 |
(3)リンク
❷ 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)リンク
❹ WordPressテンプレート用phpを作成する。
動的サイトを置く場所は、WordPressの固定ページにしました。今のところ、WordPressプレーヤーを組み込んだ固定ページを2パターン、vimeoのプレーヤーを組み込んだ固定ページを1パターン、計3パターンのテンプレート用phpを作りました。固定ページ自体は、ほぼ空っぽで、URLでの指示に対応するテンプレートphpに、形式の全ての情報が入っています。
YouTubeの難儀さ
YouTubeを組み込む場合は、同じようにYouTube用のphpを作ることになります。ただしYouTubeは、ピクチャーインピクチャー(PIP)といいますが画面を分離して外に表示する方法を使うのが非常に厄介です。つまり、動画の目的がブログ記事の補強である場合は、ブログを読みながら動画を見るわけです。パソコンであればウインドウ分離したりブラウザを2つ使うなど、何らかの工夫ができますが、スマホでは画面が小さくてそうはいきません。スマホなら、動画を上にPIPで表示して、下でブログをスクロールしながら読む、そういう使い方になります。そのような使い方をYouTubeでやろうと思うと、ブログを発信している側の工夫では困難で、受信者側、視聴者側に、アプリやプラグインを入れるなりの面倒をかける事になります。これは私としてはやりたくない事です。したがって、YouTubeを選択肢に入れるかどうかはYouTube側への改善期待です。今のところ、Vimeo、Dropbox、自宅サーバーを使うので、受信者は誰でも問題なくPIPが使えるはずです。
Mac、iPhoneは反面教師
最近感じる事ですが、WindowsやAndroidは、AppleのOSと比べると遜色なく進歩している、と思います。しかし、セキュリティについてはAppleの方がしっかりしている、と思います。ですので、WindowsやAndroidでは動くのにAppleでは動かないことがままあります。逆に、Appleで動く場合は大抵WindowsやAndroidでも動くということです。何が言いたいのかというと、最初に、高いハードルであるAppleで動作するようにしておけば、あとがラクになる可能性が高いと思います。いやあくまで傾向としてです。
(1)リンク
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円/月、ということで、ちょっと高過ぎます。無料版でも、うまく質問をすれば、プログラミングもやってくれます。分からないことをザックリ理解するのに、便利です。活用をお勧めします。
手元でデータをサクッと変更できることが一番嬉しいこと!
確かに、最近、自動文字起こし、翻訳と便利になってきている一方、人間側として、表記の間違い、漢字の間違い、ほか、間違いの点検が面倒になり、その修正が億劫になっていると思います。そこで、こうした手元でサクッと、ほぼリアルタイムで修正できる仕組みは、とても助かるのではと思います。
以上