自宅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📄

まとめ

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

以上です。