自宅webサーバーの作り方については、以前の投稿でも説明しました。その中でも触れたように、自宅サーバーは、かつてブームになったものの衰退した歴史があるわけで、その衰退の理由に、主に、コストメリットが低いこと、災害に弱いことが挙げられます。しかし、そうしたデメリットを取り除いてみれば、DIYで産直配信を行うことの楽しさは相変わらずあるわけです。

よくメリット、デメリットを比較してデメリットが大きいので、やめてしまうことがあります。費用対効果、効果より費用が大きいのでやめてしまうことがあります。しかし、今後費用は下がる、今後デメリットは減ることが見通せるならどうでしょう。あるいは費用には労働力も入るわけですが、自分が頭や手足を使うことで出費が減らせる、あるいは、そうした作業が趣味や楽しみに転換できるなら、一挙両得という話になります。

2020年頃からそこへ、AppleシリコンMacMiniという、低電力高性能、常時稼働向きの、周辺機器なしの見た目サーバーのコンピュータが登場しました。しかも非常に小さくなってきました。コンビを組むNASも大容量のSSDが挿せるようになりどんどん小型化してきています。注目する技術→📄

明るい光を感じますね。

クラウドにするだけでなくポータブルにする

それで将来イメージを見通すと。。キャンピングカー、移動販売車のようになるだろうと。

MacMiniがもっと小さくなる。NASがもっと小さくなる。一緒に持ち運べるようになる。

そう。NASとMacMiniへwebサーバーとファイル管理を積み込むのは、今はまだ自宅に固定された大袈裟なサーバーです。だからクラウドストレージの方が優れていると直ぐに思ってしまいます。しかし、バッテリー駆動のポケットサイズ、ポータブルにできれば、災害にも強いです。問題は解決します。技術的にそれほど難しくはないでしょう。

ですから、自宅サーバーの構造思想は廃れるものではない、そう思えてくるのです。

さて、そんな枠組みの中で、今回の小さなテーマは、「短縮URL」作りです。

再生用URL 4種類

(A)

Dropboxリンク型　

(B)

自宅サーバーパス記述型  日本語を直接解読できないのでエラーになる。

(C)

日本語エンコード型　

(D)

「画像ライブラリー作成」を行なって、外部サーバー短縮型URLを作る

(E)

マッピング更新を行って、自宅サーバー短縮型URLを作る。

以上4種類がありますが、(B)は表示が不可能になりやすいので除くと3種類になります。

この中で、WordPress投稿内で使用するのに適しているのは、どれか。

それは、(D)です。

この3種類の中で、動的URLは(D)だけです。カートリッジ型です。

それで(D)を採用しました。

なお、配信サーバーの切り替えについては、別の投稿で説明します。

ランダム文字列の扱い

ところで、この8桁のランダム文字列ですが、1234e678などの数字とeで構成されていると、数字と解釈されてしまいます。openssl rand -hex4と記述すると、1234e678のような科学表記になる可能性があります。cat /dev/urandom | tr -dc ‘a-zA-Z0-9’ | fold -w 8 | head -n 1を使って、英数字混合にすることで純粋な文字列として扱うことにしました。

以上です。

動画画像ライブラリー第３弾です。

Dropboxリンクは目立たないようにしたい。

これまで画像のURLリンクもDropboxを使えばいいと考えていて、Finderで右クリックして「Dropboxリンクをコピー」で得られたリンクを、そのリンクの末尾のdl=0をraw=1に置き換えて使えば、それだけでいい。そのように思ってきました。

Dropboxリンクの例は、下のようになります。

(A)

このDropboxリンクが安全性に優れている点は、クリックしてから実際に再生する時は更にワンタイムトークンリンクに変換されてからブラウザで再生されます。(B)のように形を変えます。ブラウザへURLをコピペするとこうなります。しかもこのURLは一定の時間が経過すると無効になります。

(B)

WordPressの画像ブロック→URLから挿入→(A)を挿入→HTMLとして編集を選ぶと、以下のコードが記述されています。

(C)

これで構わないとすれば、それまでのことですが、ブラウザからページのソースを読めば、上のコードは丸見えになります。Dropboxとすれば、(A)の情報が知れ渡るのは、あまり嬉しくないでしょう。「頭隠して尻隠さず」状態ということですからね。

そこで、以下のように、AppSheetで、動的な画像サイトを作ることにしました。

(D)

これを、画像ブロック→「URLから挿入」に入れます。こうすると、(A)の部分は、WordPressに表示されなくなります。(C)から分かるように、メディアはDropboxから読み込んでいるのですが、読者からは、どこから読み込まれているのか分かりません（そのようにしたいわけです)。

簡単に代替URLへ移行したい。

画像ライブラリ(D)を作るもう一つの目的が、 メディアのソースを、DropboxリンクからXserver、pCloudなど他のサーバーへ、簡単に、切り替えられるようにすることです。

なぜって？やはりDropboxにもトラブルは起こりうるからです。

こうした移行は、一般的には、プラグインを使って、WordPressのソースに書き込まれているURLを、直接に、置き換える方法が取られると思います。

しかし、ソースにDropboxリンクを使っている場合はそうはいきません。Dropboxリンクはファイル名やローカルパスが外から分からないようにランダム文字列に置き換えられていますので、ローカルパスだけをサクッと置き換えることは出来ないのです。

1点1点、Dropboxリンクと自宅サーバーURLを対応させた、マッピングファイルを作成する必要があります。丁寧にいうと、DropboxリンクとローカルパスとXserverサーバーURLの3つをマッピングさせたレコードを作成する、それをファイル上で右クリックしてあといくつかのクリック操作だけで済むようにしているところが、ポイント解説にて紹介するAppleScriptの特徴です。

そしてこのマッピングファイル(Google spreadsheet)をJSONファイルとして、WordPressに送り込むようにします。マッピングファイルの更新は1日一回夜中に行います。

link_mapping.csvの重複レコードの整理について📄

ここまで書いてきて、私が、動的サイトの使いやすさにこだわる理由が分かっていただけたでしょうか。

それでは次は、ポイント解説です。

ポイント解説

すみません。説明で使う素材を2024-11-28_15.50.35.pngに変更します。

1 画像ライブラリ作成AppleScript

画像ライブラリ作成 AppleScript📄

Dropboxリンクをコピーした後に、クイックアクションの中から「画像ライブラリー作成」を選びます。

ポイントは、必ず「Dropboxリンクのコピー」を行った後で、クイックアクションに入り、「画像ライブラリ作成」を選ぶことです。いきなりクイックアクションに入ると、その段階では、古いクリップボードが残ったままになっています。

そこで、一応、ポカよけとして、以下をメッセージ表示します。

ここはひとまずOKを押して終了します。

改めて、Dropboxリンクのコピーを実行した後で、クイックアクションの「画像ライブラリ作成」を選ぶと、

と表示されます。

ここでOKを押せば行追加が実行されます。

日本語のファイル名の時の注意喚起

ファイル名に日本が混じる時、Dropboxリンクは日本語は削除されます。リンクはランダム文字列で作られますので、日本語が削除されてもユニークなリンクにはなりますが、日本語だけで出来たファイル名ですと、リンクを見ても、どのファイルか、想像すら出来ません。特に、複数の日本語だけのファイルが続きますと、どこまで処理したか、分からなくなります。そこで、日本語だけのファイル名を扱う時は、必ず、Dropboxリンクの取得が済んでいるか注意喚起をします。

日本語のファイル名の時の注意喚起📷

ただ、出来れば日本語だけのファイル名は避けるのがいいです。

AppleScriptの中では、wp_photo_library.csvへ行を追加しています。更に、link_mapping.csvにも行を追加します。

2 追加したデータをWordPressで扱えるようにする

importAndBackupCSV GAS📄

createPhotoJson GAS📄

im.php JSONから画像を表示　php📄

画像ライブラリ用のデータは、クイックアクションでwp_photo_library.csvに追記されます。このデータを動画画像idのシート3に書き込みます。ファイルURLおよび画像idはユニークです。シート3へ書き込んだ後、wp_photo_library.csvにあったデータは、backup_wp_photo_library.csvへ追記した後、wp_photo_library.csvはクリアします。新たに作った画像サイトは、今作業中のブログにすぐに使いたいので、１分おきの更新にします。

少し待ちますが、新たに登録された場合は、AppSheetの動画画像ライブラリの画像メンテの先頭に、情報が表示されます。この中から、再生URLを取得して、WordPressの画像ブロック→URLから挿入するなど、利用します。

3 まとめ

このシリーズは、３回までで動画および画像を外部から読み込んで表示する方法、動的サイトの構築について説明してきました。次のシリーズでは、Dropboxリンクから複数のサーバーへ切り替える方法について、紹介します。

以上です。

しかしもっと簡単に考えて、まず、”38″の部分は自分で自由に設定できる動画idです。その動画idにどのサーバーにあるメディアをくっつけるかを決めます。ただし、VimeoやYouTubeの場合は、VimeoやYouTube側でidを発行するので、私がそれと別のidをさらに付けるのも管理を複雑にするだけなので、やめます。その結果、例えば、”38″はDropbox、”alt_38″は自宅サーバー、”885196700”はVimeo、”SRpWDu7gFC4″はYouTubeと動画idを決めることができます。重要なのは、動画idはユニークなキーであることです。

以下のようにショートコードブロックに、ショートコードを埋め込むようにして、””のvideoid(動画id)=の部分を書き換えれば、動画がサクッと置き換わるようになります。

以下が実際のショートコード貼り付けによる動画です。

[videoembed videoid="40"]

自分が作成した動画、YouTubeから探し出した動画などにidをつけて、動画ライブラリに登録しておけば、あとは利用が簡単です。

ポイント解説

それでは、この動画ショートコードの作成について、手順を説明します。下に全体図を掲載します。全部で４ステップになります。

❶　サーバーごとに埋め込みコードテンプレートを作成する。

現在、用意しているのは、Dropbox、Vimeo、YouTube、自宅サーバーの４つになりますが、埋め込みコードの書き方は、それぞれ違いがあります。Dropboxと自宅サーバーは、WordPress動画プレーヤーの使用方法に従って記述し、Vimeo、YouTubeはサイトで提供される貼り付け、埋め込みコードを参考にして記述して、それらのテンプレートを作成します。

Dropbox 埋め込みテンプレートの生成📄
Vimeo 埋め込みテンプレートの生成📄
YouTube 埋め込みテンプレートの生成📄
自宅サーバー 埋め込みテンプレートの生成📄

❷　動画idごとに埋め込みコードを生成する。

動画idファイル(spreadsheet)のS列(19列)に埋め込みコードを追記します。この埋め込みコードは、そのままWordPressのカスタムhtmlブロックへコピペすれば使えます。まず、その状態を作ります。

動画idごとに埋め込みコードを生成GAS📄

❸　埋め込みコードをJSONに書き込み、WordPressサーバーへ送る。

埋め込みコードをコピペするだけでも便利ではありますが、欠点もあります。ソースコードは見る人が見れば外から丸わかりなのでURLをコピーできます。巡回ロボットを使えばもっと簡単です。それを拡散できるわけですが、やたら拡散されてしまうことは非常に迷惑なことですので避けたいです。「漠然とした拡散は迷惑である」とするこの感覚が、SNSとの決定的な違いになります。

その意味で、「動的サイト」や「動画ショートコード」には、動画のURLまでは表記しませんので、やや、安全になります。埋め込みコードの欠点のあと一つは、複数箇所に書き込んでいて、もし動画他のURLを差し替えようとした時、複数箇所の修正をする必要があること、当たり前のことではありますが、これが結構ストレスになります。この点、元となる動画webサイトをメンテナンスすれば全部変更されます。

埋め込みコードJSON生成GAS📄

videoembed.jsonファイルは、gd_wp_dataに書き出されます。gd_wp_dataフォルダはHazelによって監視されており変化した場合はTransmit5のFTPにより数分以内にXserverにあるWordPressサーバーへ更新されます。

❹　動画ショートコードphpを作成する。

WordPressサーバー側では、投稿で記述されたショートコードとマッチするvideoembed.jsonファイル内の埋め込みコードに基づき、動画を再生します。

その処理を行うphpを、Cocoon childのfunctions.phpに追記します。

動画ショートコード起動php📄

まとめ

まとめになりますが、この動画ショートコードは、以前に投稿した、動的サイトの運用とセットになります。ぜひ、そちらもご一読ください→「動画用の動的サイトを作ってみた」。

以上です。

WordPressのテーマに無料のCocoonを使用していますが、使い続けさせていただき感謝を申し上げる次第ですが、とても分かりやすくできているので初めての人でもすぐに馴染めます。子テーマへは、自分なりのカスタマイズも行えるようになっており中級者にも満足いけるものと思います。

ページのデザインには、たくさんの着替えが選べるようになっています。

ブログで一番目立つ場所は、やはりヘッダーだろうと思います。このヘッダーには、ロゴやキャッチフレーズが自由に差し替えられます。ヘッダーの背景画像も差し替えが出来ます。

そこで思ったのは、このヘッダーの背景画像が自動的に差し替えが出来たらいい、というか、手元の、Macやパソコンの画像ファイルを書き換えたら、そのままWordPressの更新がされたらラク、そう考えました。ちなみに、キャッチフレーズも日替わりはどうかと考えてみましたが、SEOに悪影響がありそうなのと、そもそもあまり面白味がないので、やめました。

3つの更新方法

以上ですが、No１はオーソドックスな方法で、間違いは少ないです。No２は、自宅サーバーがある場合は、Macのフォルダに画像ファイルを更新するだけで、Web配信まで連動していくのでシンプルです。No３はMacのDropboxフォルダにある画像ファイルを更新するだけで、Web配信まで連動していくので、一見、シンプルですがしかし画像のURLは複雑なトークンリンクになっています。

No３のデメリット

No３のデメリットを言います。No１とNo２は、URLからフォルダ階層が明示されるので迷子にならないですが、No３はURLは暗号化された文字列でありフォルダ階層も分かりません。従って、URLとファイルパスをコンビにしてどこかに記録しておかないと迷子になります。上書きは結構、頻繁に行うことになると思います。もし、上書きに失敗して新規にリンク取得となると、また、head-insert.phpを書き換える必要が生じます。これは起こり得ることだと思います。

当面は、No２を利用

No３を別の寸評をすると「壊れやすい華奢」。No１とNo２は「少々乱暴でも壊れない」。

私としては、ブログは、読みこみ許可、書き込み禁止で公開するのを基本と考えていまして、ファイルの所在位置が分かってしまうことは問題ではありません。それゆえ２を選択することにします。

具体的な設定

URLで共有できるメディアサーバーがあれば、その中にxxxxx_header_imageフォルダを設定します。パーミッションを、管理者以外は読み込みのみ、URLを知っている人全員可、に設定します。

日本時間での曜日の変更になります。

画像は、pngでもjpgでも問題ありません。画像のサイズは、ヘッダーのデザインによりますが、0.5MB程度に調整するのがいいと思います。

header-insert.phpへの記述

Cocoonの場合は、テーマCocoon child→tmp-user→head-insert.phpになります。

Cocoonの場合は、テーマCocoon child→tmp-user→head-insert.phpになります。

以上です。

動的サイトとは

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

具体的に構造で示すと以下です。

静的サイトと呼ばれるものは、こうした動画ページを構成するための情報を、一つの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を作成する。

動的サイトを置く場所は、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：

但し、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

（２）出来れば代替URLも登録しておく。

VimeoやYouTubeの使用には全く気にしないことですが、私の場合は、その多くがDropboxリンクです。リンク切れ他何らかのトラブルで、再生不可になる可能性は否定はできません。その時の一時的な切り替え先として自宅サーバーを考えています。従って、（１）のローカルパスに加えて代替URLも登録しておく方がいいと思っています。ここについては後日、投稿します。

訂正前の終了点：

訂正後の開始点：

パス一覧表からマッピング表への変更：

パス一覧表ですが、コンセプトがちょっと中途半端でしたので、目的を代替対策に絞って、そのためのデータとして、マッピング表を作ることにしました。以下の4つの条件を満たすことにしました。

（１）動画や画像を収めるローカルフォルダを決めておくこと。
（２）使いやすいようにライブラリーを作ること。
（３）そのフォルダ自体を、配信可能なクラウドストレージ例えばDropboxと同期させて、Dropboxリンクが取得できるようにしておくこと。
（４）Dropboxのトラブル時の代替として、別の配信可能なサーバーに、そのフォルダをバックアップしておくこと。
こちらの記事をお読みください。

訂正後の終了点：

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

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

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

以上