【WordPress】動画用の動的サイトを作ってみた。 〜AppSheet GAS phpの利用〜

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

動的サイトとは

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

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

さらに、具体的な動画自体はこれです。→シンプルな例🎥

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

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

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

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

この上の図表も、投稿の中の一種の動的パーツと言ってもいいかも知れません。この図表は、Google図形描画です。Google図形描画の公開埋め込みが表示されています。クリックすると、そこにGoogle図形描画の編集ページがリンクしています。読者は別画面で表示して拡大して閲覧できるわけですが、私にとっては直接に編集できるわけで、それが非常に便利です。

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

ポイント解説

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

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

（１）動画idファイルのレイアウト

下の表(クリックしてください)は、説明上、タテ書きにしてありますが、Sシートでは、項目名は、列の名前です。

（２）動画関係付けファイルのレイアウト

（３）リンク

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

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

❷　AppSheetの設定を行う。

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

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

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

❸　GASを作成する。

GoogleSシートの列については、以下のように、GASの中で、列名を直接に指定しているため、基本的には、列の追加変更削除は行わないようにしてください。
それでは次に、GASを使って、JSONファイルを生成するプログラムを作成します。

初めてのGAS 約10分(動画🎥)

（１）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 　イベントのソースを選択：スプレッドシートから　イベントの種類を選択：変更時　エラー通知設定；毎日通知を受け取る。

（２）リンク

JSONファイル生成のGAS

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

22動的サイトを置く場所は、WordPressの固定ページにしました。今のところ、WordPressプレーヤーを組み込んだ固定ページを２パターン、vimeoのプレーヤーを組み込んだ固定ページを2パターン、dropbox利用のものを2パターン、YouTube利用のものを2パターン、計8パターンのテンプレート用phpを作りました。固定ページ自体は、ほぼ空っぽで、URLでの指示に対応するテンプレートphpに、形式の全ての情報が入っています。

YouTubeの難儀さ

YouTubeを組み込む場合は、同じようにYouTube用のphpを作ることになります。ただしYouTubeは、ピクチャーインピクチャー(PIP)といいますが画面を分離して外に表示する方法を使うのが非常に厄介です。つまり、動画の目的がブログ記事の補強である場合は、ブログを読みながら動画を見るわけです。パソコンであればウインドウ分離したりブラウザを2つ使うなど、何らかの工夫ができますが、スマホでは画面が小さくてそうはいきません。スマホでは、動画を上にPIPで表示して、下でブログをスクロールしながら読む、そういう使い方になります。そのような使い方をYouTubeでやろうと思うと、ブログを発信している側の工夫では困難で、受信者側、視聴者側に、アプリやプラグインを入れるなりの面倒をかける事になります(→方法)。したがって、私としては、それを前提とは考えたくないです。その意味で、YouTubeを選択肢に入れるかどうかはYouTube側への改善期待です。今のところ、Vimeo、Dropbox、自宅サーバーを使うつもりなので、視聴者は何も用意することなくPIPが使えるはずです。

なお、Googleドライブに入れた動画をWordPressで表示する方法は、GASやAppSheetが同じドライブ内で動作するので非常に生産性が高そうなのですが、今のところ、ユーザーの自由にさせてもらえない制約があり残念です。

Mac、iPhoneは反面教師

最近感じる事ですが、WindowsやAndroidは、AppleのOSと比べると遜色なく進歩している、と思います。しかし、セキュリティについてはAppleの方がしっかりしている、と思います。ですので、WindowsやAndroidでは動くのにAppleでは動かないことがままあります。逆に、Appleで動く場合は大抵WindowsやAndroidでも動くということです。何が言いたいのかというと、最初に、高いハードルであるAppleで動作するようにしておけば、あとがラクになる可能性が高いと思います。いやあくまで傾向としてです。

（１）リンク

一応、YouTubeも再生できるように、phpを作成しておきました。

vimeo vm5 WordPressリンク用　繰り返し再生なし　php

vimeo vm6 WordPressリンク用　繰り返し再生あり　php

dropbox dr5 動画枠内字幕　WordPressリンク用php

dropbox ds5 動画枠外字幕　WordPressリンク用php

自宅サーバー_mh2_動画枠内字幕_WordPressリンク用php

自宅サーバー_mh1_動画枠外字幕_WordPressリンク用php

youtube yt1 繰り返し再生なし php

youtube yt2 繰り返し再生あり php

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

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

tell application "gd_wp_dataアップロード"
	activate
end tell

但し、Macの起動が必要なので、宅外の場合は、iPhoneのFTPアプリで手動で更新します。

Transmit5(外部サイト)

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

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

Hazelの工夫：
Hazelですが、自分のフォルダ直下の変化とサブフォルダ内の変化に対して、アクションを起動させるようにするためには、先頭のルールで、「Kind is Folder」Do the following…で「Run rules on folder contents」を設定します。次のルール以降で、アクションを設定していきます。今回は、「Extensionがvttのファイルは、それをvttdataフォルダへコピーする」かつ「Transmit5(FTPアプリ)によりWordPressサーバーへ更新する」アクションになります。

上記の方法は、常にMacが起動している環境があれば、悩みは減ります。現在Mac miniを使っていますが、最近のMac miniは発熱も少なく、常時稼働用に向いているでしょう。遅かれ早かれこんな形が良さそうです。

その他

（１）ローカルパスを記録しておくことが必要：

この投稿で書くと埋もれてしまうので、いずれ別の投稿にしますが、Dropboxなどクラウドサーバーで提供されるアクセストークン型リンクURLですが、何らかの理由で変更されてしまうリスクがあります。そのトラブルの修復のためには、「リンク元であるローカルファイルの場所」がすぐに特定されることが、必須です。その場所のことをローカルパスと言いますが以下では簡単にパスと称しています。

具体的には、動画web AppSheetでは、動画の構成には、初期画面、動画、字幕、字幕一覧、説明の５種類のファイルを使えるようにしていますが、それらのURLとパスの両方を登録するようにしています。パスの上で右クリックして、Finder内で表示して、内容を確認できます。

そしてこれらの、動画を構成するために使われたファイルのパスの一覧表を更新するアプリをGASで作成しています。

パス一覧表作成のGAS

投稿の内容が多過ぎなので、いずれ別の投稿にしますが、
字幕を、スマホなど小さい画面で見る時、文字が被らないようにする方法に、2つあって、1つは、字幕を動画の枠外に表示することです。これは、上に既に紹介済みです。あと一つは細かいことですが、動画の枠内の字幕の背景を透過させることです。WordPressプレーヤーを使用する場合は、以下の方法で、デフォルトで透過率を設定することができます。

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

手元でデータをサクッと変更できることが一番嬉しいこと！
確かに、最近、自動文字起こし、翻訳と便利になってきている一方、人間側として、表記の間違い、漢字の間違い、ほか、間違いの点検が面倒になり、その修正が億劫になっていると思います。そこで、こうした手元でサクッと、ほぼリアルタイムで修正できる仕組みは、とても助かるのではと思います。
動的サイトの欠点は、探し出す時間が欲しいので、どうしても表示が遅れることでしょう。まあ、ネットはそうでなくても遅延は多いので、気にならなくなると思います。

以上