以前は、もう少し左脳右脳のバランス良く、ITをやったり音楽を作ったりしていたのですが、最近は、ITや動画関係に偏っています。そろそろもとのバランスに戻したいとは思っていますが。どうなることか。
動的サイトとは
今回は、動画用に、動的サイトなるものを作ってみました。
字幕が邪魔の場合、動画の外側に表示します(ここをクリック)。
1) それでは今日は動画webという動画のライブラリーですね、字幕一覧(クリック)
2) それを手作りしましたのでそれを紹介していきます。
3) まず基礎情報としてですね。
4) ご覧のように有名な配信サーバーの名前がありますけど、
5) 動画をですね。まず分類しておきます。
6) 私としてはですね。
7) Vimeo Dropbox YouTube あと
自宅サーバーですね、
8) この自宅サーバーというのは自宅WordPressサーバーです。
9) 以上Vimeo Dropbox YouTube
10) 自宅サーバーと、この四つを主にですね、使っています。
11) 次に、それに基づいて作成した動画が、
12) 例えばこんな形でライブラリーになってます。
13) この動画idっていうのが、IDコードですね。
14) 個別の動画に対して振ったナンバー記号です。
15) この39というのを例えば見てみますと
16) これはDropbox、
17) それと次にalt_38というのがこれが自宅サーバー、
18) それからこの辺に、数字で長い、
19) 長い数字になってるものが、Vimeo
20) それからこの辺にあるランダム文字列ですね。
21) 英数字のランダム文字列のものは、
22) YouTube、というような形で動画idを振っております。
23) それで例えばこの最初のですね、39を見てみますけども
24) Editでどういう情報を登録しているかと言いますと、
25) まず初めに動画idを振ります。
26) それから題名をつける、動画の所在場所を選択します。
27) ついにその動画の初期画像ファイルですね、それを入れます。
28) 基本的にその動画サーバーと同じ位置になります。
29) この場合はDropboxの、
30) Dropboxリンクを入れてあります。
31) あとそのファイルの物理的な所在位置を記録しておきます。
32) あとそれとサムネイルとしての初期画像、
33) 次に、これがメインである動画ファイルURL、
34) これもこの場合はdropboxリンクです。
35) その動画のファイルパス、次に字幕ファイルです
36) ただしこの字幕ファイルにおいてはですね、
37) WordPressの制約で、
38) 配信するWordPressサーバーの中に置くということが、
39) 条件になってますので、自分の外部配信サーバーの中にですね、
40) vttファイルを置いているという例です。
41) それから次にこれは字幕ファイルのパスです。
42) ローカルパスです。次がその字幕一覧ファイルですね。
43) 字幕を外側に一覧表として掲示するものです。
44) これはDropboxリンクです。
45) 次はそのパスですね、
46) あとそれから必要ならば、説明のための文章、
47) テキストファイルでくっつけるという形になっています。
48) 普通はその公開しますので、公開を選びます。
49) こうして作った情報をsaveしますと、
50) キャンセルしますけども、既にあるので、そうすると
51) そうするとこのようにですね、出来上がるわけですね。
52) このJSON更新というのを押しますと
53) そのファイルが外部のWordPressサーバーの方に飛んでいきます。
54) これを具体的に再生してみたいと思います。
55) このように出来上がっています。
56) それから再生URLと合わせてですね、
57) 投稿の中でも紹介していますが
58) WordPressのショートコード、
59) WordPressのショートコードブロックへ記入するものですけれども、
60) このようにここに掲載してあります。以上です。
具体的に構造で示すと以下です。
静的サイトと呼ばれるものは、こうした動画ページを構成するための情報を、一つのhtmlの中に、直接書き込んでガチガチに固めてしまいます。動画ファイルもhtmlと同じサーバーにアップロードします。それは高速に処理ができて安定しているわけです。しかし、何度も修正したい、差し替えたい、そうなると面倒でたまらない、そういうことになるわけです。
そこで、コンテンツは、出来る限り外に置く。それを差し替えて使う。つまり、昔からみんなやっていることで、CDやDVD、カセットをプレーヤーに差し込む。そういうやり方です。こういうのをモジュール化する、と言います。
動的サイトとは、こうしたモジュール化をすることにより、WordPressのダッシュボードを開くことなく、外側からデータ、パラメータを送り込むことによって、動画サイトを生成するやり方、そういうことになります。下が全体の流れです。
この上の図表も、投稿の中の一種の動的パーツと言ってもいいかも知れません。この図表は、Google図形描画です。Google図形描画の公開埋め込みが表示されています。クリックすると、そこにGoogle図形描画の編集ページがリンクしています。読者は別画面で表示して拡大して閲覧できるわけですが、私にとっては直接に編集できるわけで、それが非常に便利です。
さて、全部を細かく説明するのは、ちょっと骨が折れるので、赤丸で示した５つのポイントの説明と、サンプルのファイル、スクリプトをリンクします。
ポイント解説
❶ GoogleSシートで、ファイルのレイアウトを決める。
こういったミニシステムを作るとき、決め手となるのは、ファイルのレイアウト、つまり、Sシートでの列の決め方、になります。今回の場合は、２つのファイルを用意します。１つのトランザクションファイル（動画idファイル)と、１つのマスターファイル（動画関係付けファイル）です。
（１）動画idファイルのレイアウト
下の表(クリックしてください)は、説明上、タテ書きにしてありますが、Sシートでは、項目名は、列の名前です。
| 項目名（列の名前） | 説明 |
| (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()で更新されるように設定。 |
| (Q)補足説明 | 任意に記入。備忘欄。 |
| (R)再生URL | [動画所在場所].[再生URLの形式]&[動画id] |
| (S)完成埋め込みコード | 動画作成の順番として、先に、「動的サイト」を作って、その次にWordPressへの埋め込みコードを、ここに集約される各項目をもとに、この「完成埋め込みコード」を作るためのGASを作る。 |
| (T)初期画像サムネイル | 動画webアプリから動画を探しやすいように、初期画像ファイルをここへドラッグ＆ドロップする。 |
| 項目名（列の名前） | 説明 |
| (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=、までの部分を確認の意味で生成しています。 |
| 補足説明 | 任意に記入。 |
| 埋め込みコード | WordPressへカスタムhtmlで埋め込むための埋め込みコード。パラメータ化。 |
| 対応条件 | 例えば”eee”の文字列を動画ipファイルの[シート1]の3列目にある文字列と置き換える場合は{“eee”:”3″}と表現します。 |
| 項目名（列の名前） | 説明 |
| ID記事 | 自動的にランダムな文字列が入ります。キーに指定します。 |
| タイトル | マニュアルの見出しです。 |
| URL | Googleドキュメントなどを共有設定、閲覧者、にして、URLを貼り付けておきます。 |
| 表示順 | 数字を記入。 |
| 項目名（列の名前） | 説明 |
| 更新フラグ | 更新後の状態はTRUE、更新を指示するときはFALSEに変えます。 |
| 更新日時 | パス一覧表の更新が終了した日時となります。 |
| 項目名（列の名前） | 説明（ここは一覧表の表示のみです。編集はできません。) |
| 動画id | 動画idです。 |
| 題名 | 動画の題名です。 |
| 動画保存場所 | 動画の保存場所です。 |
| コンテンツURL | WordPress他で表示する初期画面、動画、字幕、説明のURLです。 |
| パス | ローカルにあるパスです。 |
（３）リンク
❷ AppSheetの設定を行う。
❶のファイルレイアウトを、今一度、お目通ししていただくとして、AppSheetの設定に入っていきます。あちこち設定する場所が移るので、動画で解説します。動画内では参考2としていますが、参考、と読み替えてください。
動画用動的webサイトのためのAppSheetの作成 25分 (動画🎥)
「AppSheetの作成」補足〜動画所在場所refについて2分(動画🎥)
❸ GASを作成する。
GoogleSシートの列については、以下のように、GASの中で、列名を直接に指定しているため、基本的には、列の追加変更削除は行わないようにしてください。
それでは次に、GASを使って、JSONファイルを生成するプログラムを作成します。
（１）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のプレーヤーを組み込んだ固定ページを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
❺ JSONファイルの自動FTPを組み込む。
一応、以下のように、JSONファイルの自動FTPを組み込みました。多少、ギクシャクしたりクラッシュすることもあります。まず、Transmit5でFTP更新がアプリ起動だけで動くようにAutomatorでアプリ化、次にHazelでフォルダ監視をして、フォルダが変化したらアプリが起動するようにしました。決め手は、HazelにAppleScriptが組み込み可能なところです。
Hazelに組み込んだAppleScript：
tell application "gd_wp_dataアップロード"
activate
end tell
但し、Macの起動が必要なので、宅外の場合は、iPhoneのFTPアプリで手動で更新します。
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で作成しています。
（２）出来れば代替URLも登録しておく。
VimeoやYouTubeの使用には全く気にしないことですが、私の場合は、その多くがDropboxリンクです。リンク切れ他何らかのトラブルで、再生不可になる可能性は否定はできません。その時の一時的な切り替え先として自宅サーバーを考えています。従って、（１）のローカルパスに加えて代替URLも登録しておく方がいいと思っています。ここについては後日、投稿します。
訂正前の終了点：
訂正後の開始点：
パス一覧表からマッピング表への変更：
パス一覧表ですが、コンセプトがちょっと中途半端でしたので、目的を代替対策に絞って、そのためのデータとして、マッピング表を作ることにしました。以下の4つの条件を満たすことにしました。
（１）動画や画像を収めるローカルフォルダを決めておくこと。
（２）使いやすいようにライブラリーを作ること。
（３）そのフォルダ自体を、配信可能なクラウドストレージ例えばDropboxと同期させて、Dropboxリンクが取得できるようにしておくこと。
（４）Dropboxのトラブル時の代替として、別の配信可能なサーバーに、そのフォルダをバックアップしておくこと。
こちらの記事をお読みください。
訂正後の終了点：
さて、投稿の内容が多過ぎなので、いずれ別の投稿にしますが、
字幕を、スマホなど小さい画面で見る時、文字が被らないようにする方法に、2つあって、1つは、字幕を動画の枠外に表示することです。これは、上に既に紹介済みです。あと一つは細かいことですが、動画の枠内の字幕の背景を透過させることです。WordPressプレーヤーを使用する場合は、以下の方法で、デフォルトで透過率を設定することができます。
ちょっと横道に外れます。私は、ChatGPTをよく使いますが、3.5の無料版です。有料版は日本円で約2700円/月、ということで、ちょっと高過ぎます。無料版でも、うまく質問をすれば、プログラミングもやってくれます。分からないことをザックリ理解するのに、便利です。活用をお勧めします。
手元でデータをサクッと変更できることが一番嬉しいこと！
確かに、最近、自動文字起こし、翻訳と便利になってきている一方、人間側として、表記の間違い、漢字の間違い、ほか、間違いの点検が面倒になり、その修正が億劫になっていると思います。そこで、こうした手元でサクッと、ほぼリアルタイムで修正できる仕組みは、とても助かるのではと思います。
動的サイトの欠点は、探し出す時間が欲しいので、どうしても表示が遅れることでしょう。まあ、ネットはそうでなくても遅延は多いので、気にならなくなると思います。
以上