自宅サーバー | imakat.com https://imakat.com 工夫と改善で人生をちょっと豊かに Tue, 10 Mar 2026 06:41:30 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://i0.wp.com/imakat.com/wp-content/uploads/2023/07/cropped-80d64ecd340db4e2ca3224859b04caed.png?fit=32%2C32&ssl=1 自宅サーバー | imakat.com https://imakat.com 32 32 160909258 【WordPress】ヘッダーの背景画像を曜日で変える https://imakat.com/2024/11/07/24072/ Wed, 06 Nov 2024 23:24:53 +0000 https://imakat.com/?p=24072 今回の小改善ですが、おそらく、プラグインの中に出来るものがあるとは思いますが、割と簡単なので、ChatGPTに依頼しながらphpで作成することにします。

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

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

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

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

imakat_header_imageフォルダに各曜日の画像.pngを保存する。

3つの更新方法

No１　＜単純に、外部WordPressサーバーへFTP更新する＞XserverにあるWordPressサーバーへ、FTPで更新する。Hazelでimakat_header_imageフォルダ(フォルダ名は任意)を監視して、更新されたら、Transmit5アプリでFTPを起動させて、Xserverへ更新することも可能。phpの構造は３方法とも同じで、URLが異なるのみ。URLは、XserverにあるWordPressサーバーに登録したhead-insert.phpの中に書き込む。
画像のURL：https://imakat.com/……/imakat_header_image/monday_image.png

No２　＜自宅WordPressサーバーのフォルダを更新する＞自宅のSynologyNASにあるWordPressサーバーのimakat_header_imageフォルダをCloudSyncでDropbox同期する。Macのimakat_header_imageフォルダをDropbox同期する。Mac上で曜日別画像.pngの更新を行うと自宅WordPressサーバーも更新される。phpの構造は３方法とも同じで、URLが異なるのみ。URLは、XserverにあるWordPressサーバーに登録したhead-insert.phpの中に書き込む。
画像のURL：https://imakat.synology.me/……./imakat_header_image/monday_image.png

No３　＜Dropboxの画像ファイルを更新する＞フォルダの中に作ったimakat_header_imageフォルダの中の曜日別画像.pngのDropboxリンクを取得する。phpの構造は３方法とも同じで、URLが異なるのみ。但しこのDropboxのURLは共有トークンリンクURLで非常に長いランダムな文字列になっている。URLは、XserverにあるWordPressサーバーに登録したhead-insert.phpの中に書き込む。
画像のURL：https://www.dropbox.com/scl/fi/xxxxx…xxxxxx/monday_image.png?rlkey=yyyy…..yyyyy&raw=1

以上ですが、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になります。

以上です。

]]> 24072 Dropboxの動画をWordPressへ貼り付ける方法 https://imakat.com/2024/01/22/18942/ Mon, 22 Jan 2024 01:19:00 +0000 https://imakat.com/?p=18942 2024.5.20変更：www.dropbox.comはそのままで、dl=0→raw=1へ変更しました。
2024.5.5変更：
Dropboxリンクの書き換え方法を、www.dropbox.com→dl.dropbox.com、dl=0→raw=1へ変更しました。

改めて、災害時の損失を抑え復旧を速やかに行うことが大切と感じています。自宅サーバーを今すぐ撤去するつもりはありませんが、自宅サーバーに依存しない方向、自宅サーバーは選択肢の一つにする方向、そちらへ舵を切りたいと思います。動画再生方法のいくつかの選択肢をテストする中で、その選択肢を更に使いやすくする方法を作ってみます。なお、Google単独は、GoogleドライブからWordPressプレーヤーへ動画と字幕を同期させて引き込む方法は、基本的には困難なようですので、対象から除きました。

No1　Vimeo単独

VimeoはYouTubeと同様にトランスコードされてストリーミング再生されるので、停滞が非常に少ないです。Vimeoは、動画の、まるごと差し替えがOK、何回でも上書きアップロードができます。

動画ファイル字幕ファイル初期画面ファイル
Vimeo◎◎
(Vimeoサイトに
アップロードする)		◎
(動画からショットするか、
Vimeoにアップロードする)
Dropbox
Google
自宅サーバー
外部サーバー
(Xserver)

注：動画の中で、書き換え方法を、dl=0→raw=1としていますが、www.dropbox.com→dl.dropbox.com dl=0→raw＝1へ変更しています。

動画を別ページで表示します(ここをクリック)。

字幕一覧(クリック)

1) Dropboxの動画をWordPressに貼り付ける
2) はい。それでは今からDropboxにある動画を、WordPress へ貼り付ける方法について紹介します。
3) まず結論からですが、Vimeoの代用にDropboxを使うことにします。　
4) 私の場合は元ネタの動画だとか写真はですね、ほぼ全部Dropboxの中にありますので、
5) それを、簡単に加工して送信できればいいわけです。
6) 2つ目に、Dropboxですけれども、そのスピードはもちろん、その動画配信サービスの、
7) YouTubeだとかVimeoには劣りますけども、
8) 自宅サーバーよりは速いです。
9) 3番目に、同じクラウドサービスに、Google ドライブがあります。
10) Googleドライブを使う方法を調べたが、
11) 字幕ファイルの同期の方法がよくわかりません。
12) GoogleとしてはYouTubeを利用すればいいと考えているのかなと感じます。　
13) そういった意味で、私にとってはですね、
14) このDropbox対Googleについては、
15) Dropboxが使いやすそうです。
16) それでは、使うための準備を進めます。
17) まず、Dropboxリンクは、そのままWordPressへ貼り付けても動かないです。
18) 手直しする必要があります。
19) Dropboxリンクですけれども、
20) この以下のこの長いURLになってます。
21) 2023年ですね、12月からですね、この、rlkeyというものが加わってとても長くなりました。
22) この2行目からのこの部分ですね、
23) まあ、過剰な負荷だとか、安全対策が強化されたようです。
24) これに伴って、2023年12月以降は、WordPress用の貼り付けコードも変わってきています。
25) 残念ながらこのままでは、WordPressは再生できません。
26) この赤い部分ですね、dl=0の部分を、raw=1で置き換えます。
27) すなわち、以下のような形です。
28) これを作成します。
29) これをですね、マウスの操作だけで行うクイックアクションを作成します。AppleScriptを使います。
30) 以下のように作るのですが、
31) このスクリプトについては、ブログへ添付しますのでご覧ください。
32) このスクリプトについては、ブログへ添付しますのでご覧ください。
33) それで、作ったクイックアクションを実行して、置き換えが正しいかどうか確認します。
34) 動きをご覧ください。
35) 確認するテスト画像ですね、これです。
36) その上で右クリックをして、Dropboxリンクをコピーします。
37) それをメモにペーストします。
38) ペースト、
39) でその上で、左クリックを3回、
40) で、右クリックをして、
41) サービスの中から、DropboxリンクをWordPress用に変換する、を選びます。
42) コピーされます。OK。
43) でそれを、
44) メモにペーストします。
45) こういった出来上がりになります。
46) 変えられた部分は、dl=0が、
47) raw=1に変わっています。
48) それではこの出来上がったものをクリックして確認してみましょう。
49) 確かに画像が出ます。
50) これだけでも、ですね、
51) このクイックアクション、汎用に使えるんですけれども、
52) もう一つAppleScriptのアプリケーションを組み合わせて、WordPressへの動画貼り付けコードを生成したいと思います。
53) 3番目、
54) WordPressへの動画貼り付けコードを生成します。
55) これはまた同じく、AppleScriptのスクリプトですけれども、スクリプトエディターで作ります。
56) 以下のような内容です。この内容もブログへ添付しますので、
57) コピーしてお使いください。
58) その結果のですね、
59) アプリケーションの実行の様子をご覧ください。
60) 最初にアプリケーションを起動させます。
61) それで、
62) 開始画面の画像URLを入れてください、ということで、最初にその画像ファイル、
63) を選び、その上で右クリックして、Dropboxリンクをコピーします。
64) それを、ダイアログボックスのところにペーストします。
65) その上で、左クリック3回、右クリック、サービスから、
66) 変換アクション、
67) コピーがされたらそれを、
68) ボックスに貼り付けます。
69) OK。
70) 次に、
71) 動画本体のURLを、
72) 変換します。
73) 目的の、
74) ファイルを選びます。
75) どれだ、
76) はい、右クリックして、Dropboxリンクのコピーして、
77) それを、ダイアログボックスにペーストして、
78) 左クリック3回、
79) 右クリック、
80) サービスの中からアクションを選び、変換したものを、
81) 置き換えます。
82) OK。
83) 次に、字幕ファイルのURLです。
84) 探します。
85) vttファイルです。
86) 右クリックして、
87) リンクをコピーして、
88) ダイアログボックスにペーストします。左クリック3回、右クリック、
89) サービスの中からアクションを起動して、
90) 出来上がったコードを、
91) 貼り付けます。
92) OK。
93) 最後に動画の説明を記入します。
94) 何入れてもいいんですが、先頭の文字に小文字の不等号カッコ、これはダメです。
95) で、出来上がったものがこういった形でですね、コードが出来上がります。
96) OK。
97) クリップボードにコピーされますのでそれをWordPressへペーストします。
98) カスタムHTMLコードへ、
99) ペーストします。プレビューを押します。
100) 起動してみます。
101) ちゃんと動いてますね、
102) はい、正しくできています。
103) それでは以上で、Dropboxにある動画を、WordPressへ貼り付ける方法の説明を終わります。
104) ありがとうございました。

No2　Dropbox単独

Dropboxは、ブログを補足するための短い簡潔なビデオが適しています。ニッチに役立つことが目的なので、集中アクセスは殆どないと想定しますが、一般向けの内容の場合はVimeoを使います。Dropboxの再生のスムーズさは、WiFi環境であれば、少々待ち時間はありますが、問題なく視聴できると思います。但しスマホで4Gセルラーでの視聴は、時間帯によっては困難かも知れません。特に昼休み。仕事場でWiFiや有線LANでパソコンを使っていた人が、昼休みになると一斉にスマホを使い出すので、昼休みは困難かも知れません。この動画は476MBと大きいサイズです。更新方法は、MacにあるDropboxにリンクしたローカルファイルを上書き保存するだけです。

動画ファイル字幕ファイル初期画面ファイル
Vimeo
Dropbox○
dl=0 → raw=1
www.dropbox.com →dl.dropbox.com		◎
dl=0 → raw=1
www.dropbox.com →dl.dropbox.com
Google
自宅サーバー
外部サーバー(Xserver)◎
直接アップロード
字幕ファイルは、WordPressブログを発信しているサーバー内に置く。

注：動画の中で、書き換え方法を、dl=0→raw=1としていますが、www.dropbox.com→dl.dropbox.com dl=0→raw＝1へ変更しています。

字幕一覧(クリック)

(00:00:00) Dropboxの動画をWordPressに貼り付ける
(00:00:04) はい。それでは今からDropboxにある動画を、WordPress へ貼り付ける方法について紹介します。
(00:00:17) まず結論からですが、Vimeoの代用にDropboxを使うことにします。　
(00:00:26) 私の場合は元ネタの動画だとか写真はですね、 ほぼ全部Dropboxの中にありますので、
(00:00:35) それを、簡単に加工して送信できればいいわけです。
(00:00:43) 2つ目に、Dropboxですけれども、そのスピードはもちろん、その動画配信サービスの、
(00:00:50) YouTubeだとかVimeoには劣りますけども、
(00:00:55) 自宅サーバーよりは速いです。
(00:01:01) 3番目に、同じクラウドサービスに、Google ドライブがあります。
(00:01:07) Googleドライブを使う方法を調べたが、
(00:01:13) 字幕ファイルの同期の方法がよくわかりません。
(00:01:17) GoogleとしてはYouTubeを利用すればいいと考えているのかなと感じます。　
(00:01:26) そういった意味で、私にとってはですね、
(00:01:30) このDropbox対Googleについては、
(00:01:36) Dropboxが使いやすそうです。
(00:01:41) それでは、使うための準備を進めます。
(00:01:50) まず、Dropboxリンクは、そのままWordPressへ貼り付けても動かないです。
(00:01:59) 手直しする必要があります。
(00:02:08) Dropboxリンクですけれども、
(00:02:13) この以下のこの長いURLになってます。
(00:02:19) 2023年ですね、12月からですね、この、rlkeyというものが加わってとても長くなりました。
(00:02:29) この2行目からのこの部分ですね、
(00:02:36) まあ、過剰な負荷だとか、安全対策が強化されたようです。
(00:02:43) これに伴って、2023年12月以降は、WordPress用の貼り付けコードも変わってきています。
(00:02:54) 残念ながらこのままでは、WordPressは再生できません。
(00:03:01) この赤い部分ですね、dl=0の部分を、raw=1で置き換えます。
(00:03:14) すなわち、以下のような形です。
(00:03:22) これを作成します。
(00:03:31) これをですね、マウスの操作だけで行うクイックアクションを作成します。AppleScriptを使います。
(00:03:43) 以下のように作るのですが、
(00:03:46) このスクリプトについては、ブログへ添付しますのでご覧ください。
(00:03:52) このスクリプトについては、ブログへ添付しますのでご覧ください。
(00:04:00) それで、作ったクイックアクションを実行して、置き換えが正しいかどうか確認します。
(00:04:09) 動きをご覧ください。
(00:04:16) 確認するテスト画像ですね、これです。
(00:04:22) その上で右クリックをして、Dropboxリンクをコピーします。
(00:04:31) それをメモにペーストします。
(00:04:36) ペースト、
(00:04:38) でその上で、左クリックを3回、
(00:04:44) で、右クリックをして、
(00:04:48) サービスの中から、DropboxリンクをWordPress用に変換する、を選びます。
(00:04:59) コピーされます。OK。
(00:05:05) でそれを、
(00:05:07) メモにペーストします。
(00:05:10) こういった出来上がりになります。
(00:05:14) 変えられた部分は、dl=0が、
(00:05:23) raw=1に変わっています。
(00:05:29) それではこの出来上がったものをクリックして確認してみましょう。
(00:05:39) 確かに画像が出ます。
(00:05:48) これだけでも、ですね、
(00:05:53) このクイックアクション、汎用に使えるんですけれども、
(00:05:57) もう一つAppleScriptのアプリケーションを組み合わせて、WordPressへの動画貼り付けコードを生成したいと思います。
(00:06:12) 3番目、
(00:06:14) WordPressへの動画貼り付けコードを生成します。
(00:06:20) これはまた同じく、AppleScriptのスクリプトですけれども、スクリプトエディターで作ります。
(00:06:29) 以下のような内容です。この内容もブログへ添付しますので、
(00:06:40) コピーしてお使いください。
(00:06:44) その結果のですね、
(00:06:47) アプリケーションの実行の様子をご覧ください。
(00:06:55) 最初にアプリケーションを起動させます。
(00:07:11) それで、
(00:07:15) 開始画面の画像URLを入れてください、ということで、最初にその画像ファイル、
(00:07:26) を選び、その上で右クリックして、Dropboxリンクをコピーします。
(00:07:33) それを、ダイアログボックスのところにペーストします。
(00:07:40) その上で、左クリック3回、右クリック、サービスから、
(00:07:48) 変換アクション、
(00:07:53) コピーがされたらそれを、
(00:07:57) ボックスに貼り付けます。
(00:08:00) OK。
(00:08:03) 次に、
(00:08:06) 動画本体のURLを、
(00:08:10) 変換します。
(00:08:14) 目的の、
(00:08:19) ファイルを選びます。
(00:08:23) どれだ、
(00:08:31) はい、右クリックして、Dropboxリンクのコピーして、
(00:08:39) それを、ダイアログボックスにペーストして、
(00:08:46) 左クリック3回、
(00:08:51) 右クリック、
(00:08:53) サービスの中からアクションを選び、変換したものを、
(00:09:02) 置き換えます。
(00:09:05) OK。
(00:09:09) 次に、字幕ファイルのURLです。
(00:09:14) 探します。
(00:09:18) vttファイルです。
(00:09:23) 右クリックして、
(00:09:26) リンクをコピーして、
(00:09:29) ダイアログボックスにペーストします。左クリック3回、右クリック、
(00:09:38) サービスの中からアクションを起動して、
(00:09:42) 出来上がったコードを、
(00:09:46) 貼り付けます。
(00:09:48) OK。
(00:09:51) 最後に動画の説明を記入します。
(00:09:55) 何入れてもいいんですが、先頭の文字に小文字の不等号カッコ、これはダメです。
(00:10:05) で、出来上がったものがこういった形でですね、コードが出来上がります。
(00:10:23) OK。
(00:10:25) クリップボードにコピーされますのでそれをWordPressへペーストします。
(00:10:33) カスタムHTMLコードへ、
(00:10:37) ペーストします。プレビューを押します。
(00:10:47) 起動してみます。
(00:10:55) ちゃんと動いてますね、
(00:11:14) はい、正しくできています。
(00:11:19) それでは以上で、Dropboxにある動画を、WordPressへ貼り付ける方法の説明を終わります。
(00:11:29) ありがとうございました。

No3　自宅単独
動画ファイル字幕ファイル初期画面ファイル
Vimeo
Dropbox
Google
自宅サーバー○◎
外部サーバー
(Xserver)		◎
直接アップロード
字幕ファイルは、WordPressブログを発信しているサーバー内に置く。

Dropboxより非力です。過去の投稿で紹介してきた通り、一般には、476MBという大きい動画を扱うのは無理クリですが、あえて掲載しました。WiFi環境で、高速度なら、視聴できるかも知れません。場合によってはDropboxよりサクサク動くこともあります。更新方法は、MacにあるDropboxにリンクしたローカルファイル(実はWordPressフォルダとも同期させている)を上書き保存するだけです。

注：動画の中で、書き換え方法を、dl=0→raw=1としていますが、www.dropbox.com→dl.dropbox.com dl=0→raw＝1へ変更しています。

字幕一覧(クリック)

(00:00:00) Dropboxの動画をWordPressに貼り付ける
(00:00:04) はい。それでは今からDropboxにある動画を、WordPress へ貼り付ける方法について紹介します。
(00:00:17) まず結論からですが、Vimeoの代用にDropboxを使うことにします。　
(00:00:26) 私の場合は元ネタの動画だとか写真はですね、 ほぼ全部Dropboxの中にありますので、
(00:00:35) それを、簡単に加工して送信できればいいわけです。
(00:00:43) 2つ目に、Dropboxですけれども、そのスピードはもちろん、その動画配信サービスの、
(00:00:50) YouTubeだとかVimeoには劣りますけども、
(00:00:55) 自宅サーバーよりは速いです。
(00:01:01) 3番目に、同じクラウドサービスに、Google ドライブがあります。
(00:01:07) Googleドライブを使う方法を調べたが、
(00:01:13) 字幕ファイルの同期の方法がよくわかりません。
(00:01:17) GoogleとしてはYouTubeを利用すればいいと考えているのかなと感じます。　
(00:01:26) そういった意味で、私にとってはですね、
(00:01:30) このDropbox対Googleについては、
(00:01:36) Dropboxが使いやすそうです。
(00:01:41) それでは、使うための準備を進めます。
(00:01:50) まず、Dropboxリンクは、そのままWordPressへ貼り付けても動かないです。
(00:01:59) 手直しする必要があります。
(00:02:08) Dropboxリンクですけれども、
(00:02:13) この以下のこの長いURLになってます。
(00:02:19) 2023年ですね、12月からですね、この、rlkeyというものが加わってとても長くなりました。
(00:02:29) この2行目からのこの部分ですね、
(00:02:36) まあ、過剰な負荷だとか、安全対策が強化されたようです。
(00:02:43) これに伴って、2023年12月以降は、WordPress用の貼り付けコードも変わってきています。
(00:02:54) 残念ながらこのままでは、WordPressは再生できません。
(00:03:01) この赤い部分ですね、dl=0の部分を、raw=1で置き換えます。
(00:03:14) すなわち、以下のような形です。
(00:03:22) これを作成します。
(00:03:31) これをですね、マウスの操作だけで行うクイックアクションを作成します。AppleScriptを使います。
(00:03:43) 以下のように作るのですが、
(00:03:46) このスクリプトについては、ブログへ添付しますのでご覧ください。
(00:03:52) このスクリプトについては、ブログへ添付しますのでご覧ください。
(00:04:00) それで、作ったクイックアクションを実行して、置き換えが正しいかどうか確認します。
(00:04:09) 動きをご覧ください。
(00:04:16) 確認するテスト画像ですね、これです。
(00:04:22) その上で右クリックをして、Dropboxリンクをコピーします。
(00:04:31) それをメモにペーストします。
(00:04:36) ペースト、
(00:04:38) でその上で、左クリックを3回、
(00:04:44) で、右クリックをして、
(00:04:48) サービスの中から、DropboxリンクをWordPress用に変換する、を選びます。
(00:04:59) コピーされます。OK。
(00:05:05) でそれを、
(00:05:07) メモにペーストします。
(00:05:10) こういった出来上がりになります。
(00:05:14) 変えられた部分は、dl=0が、
(00:05:23) raw=1に変わっています。
(00:05:29) それではこの出来上がったものをクリックして確認してみましょう。
(00:05:39) 確かに画像が出ます。
(00:05:48) これだけでも、ですね、
(00:05:53) このクイックアクション、汎用に使えるんですけれども、
(00:05:57) もう一つAppleScriptのアプリケーションを組み合わせて、WordPressへの動画貼り付けコードを生成したいと思います。
(00:06:12) 3番目、
(00:06:14) WordPressへの動画貼り付けコードを生成します。
(00:06:20) これはまた同じく、AppleScriptのスクリプトですけれども、スクリプトエディターで作ります。
(00:06:29) 以下のような内容です。この内容もブログへ添付しますので、
(00:06:40) コピーしてお使いください。
(00:06:44) その結果のですね、
(00:06:47) アプリケーションの実行の様子をご覧ください。
(00:06:55) 最初にアプリケーションを起動させます。
(00:07:11) それで、
(00:07:15) 開始画面の画像URLを入れてください、ということで、最初にその画像ファイル、
(00:07:26) を選び、その上で右クリックして、Dropboxリンクをコピーします。
(00:07:33) それを、ダイアログボックスのところにペーストします。
(00:07:40) その上で、左クリック3回、右クリック、サービスから、
(00:07:48) 変換アクション、
(00:07:53) コピーがされたらそれを、
(00:07:57) ボックスに貼り付けます。
(00:08:00) OK。
(00:08:03) 次に、
(00:08:06) 動画本体のURLを、
(00:08:10) 変換します。
(00:08:14) 目的の、
(00:08:19) ファイルを選びます。
(00:08:23) どれだ、
(00:08:31) はい、右クリックして、Dropboxリンクのコピーして、
(00:08:39) それを、ダイアログボックスにペーストして、
(00:08:46) 左クリック3回、
(00:08:51) 右クリック、
(00:08:53) サービスの中からアクションを選び、変換したものを、
(00:09:02) 置き換えます。
(00:09:05) OK。
(00:09:09) 次に、字幕ファイルのURLです。
(00:09:14) 探します。
(00:09:18) vttファイルです。
(00:09:23) 右クリックして、
(00:09:26) リンクをコピーして、
(00:09:29) ダイアログボックスにペーストします。左クリック3回、右クリック、
(00:09:38) サービスの中からアクションを起動して、
(00:09:42) 出来上がったコードを、
(00:09:46) 貼り付けます。
(00:09:48) OK。
(00:09:51) 最後に動画の説明を記入します。
(00:09:55) 何入れてもいいんですが、先頭の文字に小文字の不等号カッコ、これはダメです。
(00:10:05) で、出来上がったものがこういった形でですね、コードが出来上がります。
(00:10:23) OK。
(00:10:25) クリップボードにコピーされますのでそれをWordPressへペーストします。
(00:10:33) カスタムHTMLコードへ、
(00:10:37) ペーストします。プレビューを押します。
(00:10:47) 起動してみます。
(00:10:55) ちゃんと動いてますね、
(00:11:14) はい、正しくできています。
(00:11:19) それでは以上で、Dropboxにある動画を、WordPressへ貼り付ける方法の説明を終わります。
(00:11:29) ありがとうございました。

No1~No3と比較してきましたが、現在、安定度に優れるのはNo1のVimeoが第１位、No2のDropbox単独が第2位です。扱い易さは、圧倒的にNo3の自宅単独です。実はこの3つ以外にも、Dropbox(動画、字幕) と自宅(初期画面)、Dropbox(動画、字幕) とGoogleフォト(初期画面)、Dropbox(動画、字幕) と外部(初期画面)についてテストをしましたが、今一つ不安定なことと操作が複雑になることから割愛しました。
しかし、今回、改めて考察するキッカケになった災害リスク。これを考えると、自宅のWebサーバーに比重を置くのは問題といえるでしょう。

従って、今回、「No2 Dropbox単独を採用していきます。10分未満の簡単編集でマニアックなものはDropbox、ファイルが重そうな10分以上あるいは一般向け配信のものはVimeoという使い分けをイメージしています。さあどうかな。

Google図形描画

ポイント解説

１　動画の中に登場するAppleScriptの紹介

（１）Dropboxの共有リンクをWordPress貼り付け用に変換するクイックアクションのAppleScriptは、以下です。

コード変換の方法は、

URLの記述の中の

“www.dropbox.com” を”dl.dropbox.com”へ置き換える。

“dl=0” を”raw=1″へ置き換える。

を使っています。なお、拡張子に関係なく扱えています。

DropboxのURLを変換するAppleスクリプト

「AppleScriptを実行」を挿入

-- DropboxのURLを変換するスクリプト

-- ３−１　ベースとなるDropboxの共有URLを一時的に保管する。
set baseURL to the clipboard
set tempURL to ""

-- 共有URLが存在するか確認
if baseURL is not equal to "" then
	
	-- ３−1　クリップボードの結果をtempURLへ置き換える。
	set tempURL to baseURL
	
	-- ３−２　URLの記述の中の "www.dropbox.com" を "dl.dropbox.com" へ置き換える。
	-- set tempURL to replaceText("www.dropbox.com", "dl.dropbox.com", baseURL)
	
	-- ３−３　URLの記述の中の "dl=0" を"raw=1"へ置き換える。
	set tempURL to replaceText("dl=0", "raw=1", tempURL)
	
	-- ３−４　クリップボードに保管する。「クリップボードにWordPress貼り付け用URLをコピーしました。」と表示する。
	set the clipboard to tempURL
	display dialog "クリップボードにWordPress貼り付け用URLをコピーしました。"
else
	display dialog "共有URLが見つかりません。"
end if

-- 文字列中の指定されたテキストを置き換える関数
on replaceText(find, replace, sourceText)
	set text item delimiters to find
	set sourceText to text items of sourceText
	set text item delimiters to replace
	set sourceText to sourceText as text
	set text item delimiters to ""
	return sourceText
end replaceText

（２）WordPress動画貼り付けコード生成用アプリのAppleScriptは以下です。

-- スクリプトのテンプレート
set scriptTemplate to "<figure class=\"wp-block-video aligncenter\">
<video controls
poster=\"%poster%\"
src=\"%video%\" 
playsinline=\"\">
<track default=\"\" 
src=\"%subtitles%\" 
label=\"日本語\" srclang=\"ja\" kind=\"subtitles\">
</video>
<figcaption>%videoDescription%
</figcaption>
</figure>
[dynamic_external_html url=\"%subtitle_list%\"]"

-- ダイアログでユーザーに入力を求める
set posterURL to text returned of (display dialog "<WordPress動画貼り付けコードを生成> 開始画面の画像のURLを入力してください(省略可)。" default answer "")
set videoURL to text returned of (display dialog "<WordPress動画貼り付けコードを生成> 動画本体のURLを入力してください(省略可)。" default answer "")
set subtitlesURL to text returned of (display dialog "<WordPress動画貼り付けコードを生成> 字幕ファイルのURLを入力してください(省略可)。" default answer "")
set videoDescription to text returned of (display dialog "<WordPress動画貼り付けコードを生成> 動画の説明を記入ください(省略可)。※先頭の文字に小文字の< >は不可。" default answer "")
set subtitleListURL to text returned of (display dialog "<WordPress動画貼り付けコードを生成> 字幕一覧のURLを入力してください(省略可)。" default answer "")

-- スクリプトのテンプレートをユーザーの入力で置き換える
set customHTML to scriptTemplate
set customHTML to my replaceText(customHTML, "%poster%", posterURL)
set customHTML to my replaceText(customHTML, "%video%", videoURL)
set customHTML to my replaceText(customHTML, "%subtitles%", subtitlesURL)
set customHTML to my replaceText(customHTML, "%videoDescription%", videoDescription)
set customHTML to my replaceText(customHTML, "%subtitle_list%", subtitleListURL)

-- 置換用の関数
on replaceText(originalText, searchString, replacementString)
	set AppleScript's text item delimiters to searchString
	set textItems to text items of originalText
	set AppleScript's text item delimiters to replacementString
	set replacedText to textItems as text
	set AppleScript's text item delimiters to ""
	return replacedText
end replaceText

-- 結果を表示
display dialog customHTML

-- 結果をクリップボードにコピー
set the clipboard to customHTML
display dialog "この内容をクリップボードにコピーしました。"

なお、後日、字幕一覧のデータの投稿内引き込みを追加しました。WordPressのfunction.phpへ以下を追加ください。

<?php
// 外部テキストを取得する関数
function fetch_dynamic_external_html_content($atts) {
    // ショートコードの引数を定義
    $attributes = shortcode_atts(array(
        'url' => '' // URLを指定する
    ), $atts);

    $url = $attributes['url'];
    
    // URLが指定されていない場合の処理
    if (empty($url)) {
        return 'URLが指定されていません。';
    }

    // 外部URLからデータを取得
    $response = wp_remote_get($url);

    // エラーチェック
    if (is_wp_error($response)) {
        return 'テキストの読み込みに失敗しました。';
    }

    // 取得したデータの処理
    $body = wp_remote_retrieve_body($response);
    return $body; // HTMLとしてそのまま返す
}

// ショートコードを作成
function display_dynamic_external_html($atts) {
    return fetch_dynamic_external_html_content($atts);
}
add_shortcode('dynamic_external_html', 'display_dynamic_external_html');

?>

上の２つのAppleScriptは、汎用性があります。

例えば、自宅サーバー用のWordPressのカスタムhtml記述については、URLはランダムな文字列を埋め込むことなく、素直なディレクトリの記述になっているので、（２）だけ使います。

２　ChatGPTの活用

上のAppleScriptですが、実は、ChatGPT（無料版の利用）の力を借りています。私は、「指示書を書いて、結果を検証して、間違いを指摘して訂正を求める」だけです。ChatGPTは、プログラミングは得意な分野だと思います。私は、特に活用法をどこかで学んだことはありませんが、質疑応答を、「解決して欲しい問題を書く、何を使って、どのような手順で（手順１　手順２　、、）、プログラミング記述して欲しいかを書く」という流れで繰り返すことができます。但し、即座に正しい解法になることはまずありません。出てきたエラーをそのまま伝えて、訂正を依頼する、それを、５〜６回繰り返して、辿り着く感じです。隘路に入ったためスタートに戻ることも、ままあります。

３　マウスの左を３回クリック

動画の中で登場する、マウスの左３回クリック、トリプルクリックは、このブログをご覧の方はご存知のことと思いますが、紹介します。

＜マウスの左を３回クリック＞

４　2023年12月にDropboxリンクの構造が変更。個々のコンテンツ単位で制限管理ができる仕組みへ移行。

DropboxリンクのURLですが、以前は”https://……..？”まででした。2023年12月にrlkey=以降が追加になっています。トラッキング追跡のためか何らかの異常回避、情報収集のためでしょうか。ファイル単位でアクセス制限ができるようになるのかも知れません。いずれにしても、何らかの安全対策だと思います。　自宅サーバーは、サーバー単位か、そこまで細かく出来ていないので、Dropboxは一歩も二歩も進んでいます。

Dropboxヘルプセンターにrlkeyを導入すること及び利用方法(レンダリングの強制 )の説明があります。この中で、ブラウザで直接画像を表示するには、つまりWordPressなどでリンク表示する場合は、raw=1を使ってリダイレクトをさせて使用するように指示が書かれています。まだ移行が完了したとはしていないので、今後とも何らかの仕様の変更があるかも知れません。ウオッチする必要があります。

５　Dropboxリンクを使うならファイル名は英数字で作るのが基本。

Dropboxリンクは、ファイル名を変えても、フォルダを移動しても、変わりません。”https://ランダムな文字列/ファイル名?rlkey=ランダムな文字列“となっています。このファイル名のところですが、日本語の部分が削除されます。ですから、ファイル名は、英数字だけでユニークな文字列をまず書いて、私は年月日プラス連番がいいと思いますが、そこに少しだけ短く日本語を加える書き方がよさそうです。

６　ダウンロードを要求される問題。

Dropboxリンクの末尾をraw=1に置き換えたURLを、WordPressの投稿中の文字列にリンクして再生しようとすると、ダウンロードを要求される場合があります。Dropboxはクラウドストレージが本業であって、データを受け渡すのが本業。だから、動画や画像も、ビジネス上のファイルのやり取りと同様に、利用者が一度自分のフォルダへダウンロードして、その後で、そのファイルを再生する。それが基本だろうと思います。しかしながら私のように、個人のWeb配信に使う場合は、ダウンロードを要求されるなら、それは不便過ぎて利用できないです。そこで、そのような個人的な小規模の発信者に対して、ランダム生成した非常に長いURLアドレスへリダイレクトするなら利用を可能にする、アクセスが集中するようなら視聴制限を加える、そうした条件の下で利用を許可しているということになります。

ともかく、間違いないのは、Dropbox動画ごとに、それを貼り付けた独立ページ（固定ページ）を自分で作ることです。そしてその独立ページをWordPressの文字列にリンク。そうすればWindows/Macほかでもダウンロードを要求されないでしょう。

７　動的トグル

小さな工夫の紹介ですが、上のスクリプトのところで、「字幕一覧のデータの投稿内引き込みを追加した….」と記述しましたが、これの具体例が、以下のトグルです。

字幕一覧(クリック)

(00:00:00) Dropboxの動画をWordPressに貼り付ける
(00:00:04) はい。それでは今からDropboxにある動画を、WordPress へ貼り付ける方法について紹介します。
(00:00:17) まず結論からですが、Vimeoの代用にDropboxを使うことにします。　
(00:00:26) 私の場合は元ネタの動画だとか写真はですね、 ほぼ全部Dropboxの中にありますので、
(00:00:35) それを、簡単に加工して送信できればいいわけです。
(00:00:43) 2つ目に、Dropboxですけれども、そのスピードはもちろん、その動画配信サービスの、
(00:00:50) YouTubeだとかVimeoには劣りますけども、
(00:00:55) 自宅サーバーよりは速いです。
(00:01:01) 3番目に、同じクラウドサービスに、Google ドライブがあります。
(00:01:07) Googleドライブを使う方法を調べたが、
(00:01:13) 字幕ファイルの同期の方法がよくわかりません。
(00:01:17) GoogleとしてはYouTubeを利用すればいいと考えているのかなと感じます。　
(00:01:26) そういった意味で、私にとってはですね、
(00:01:30) このDropbox対Googleについては、
(00:01:36) Dropboxが使いやすそうです。
(00:01:41) それでは、使うための準備を進めます。
(00:01:50) まず、Dropboxリンクは、そのままWordPressへ貼り付けても動かないです。
(00:01:59) 手直しする必要があります。
(00:02:08) Dropboxリンクですけれども、
(00:02:13) この以下のこの長いURLになってます。
(00:02:19) 2023年ですね、12月からですね、この、rlkeyというものが加わってとても長くなりました。
(00:02:29) この2行目からのこの部分ですね、
(00:02:36) まあ、過剰な負荷だとか、安全対策が強化されたようです。
(00:02:43) これに伴って、2023年12月以降は、WordPress用の貼り付けコードも変わってきています。
(00:02:54) 残念ながらこのままでは、WordPressは再生できません。
(00:03:01) この赤い部分ですね、dl=0の部分を、raw=1で置き換えます。
(00:03:14) すなわち、以下のような形です。
(00:03:22) これを作成します。
(00:03:31) これをですね、マウスの操作だけで行うクイックアクションを作成します。AppleScriptを使います。
(00:03:43) 以下のように作るのですが、
(00:03:46) このスクリプトについては、ブログへ添付しますのでご覧ください。
(00:03:52) このスクリプトについては、ブログへ添付しますのでご覧ください。
(00:04:00) それで、作ったクイックアクションを実行して、置き換えが正しいかどうか確認します。
(00:04:09) 動きをご覧ください。
(00:04:16) 確認するテスト画像ですね、これです。
(00:04:22) その上で右クリックをして、Dropboxリンクをコピーします。
(00:04:31) それをメモにペーストします。
(00:04:36) ペースト、
(00:04:38) でその上で、左クリックを3回、
(00:04:44) で、右クリックをして、
(00:04:48) サービスの中から、DropboxリンクをWordPress用に変換する、を選びます。
(00:04:59) コピーされます。OK。
(00:05:05) でそれを、
(00:05:07) メモにペーストします。
(00:05:10) こういった出来上がりになります。
(00:05:14) 変えられた部分は、dl=0が、
(00:05:23) raw=1に変わっています。
(00:05:29) それではこの出来上がったものをクリックして確認してみましょう。
(00:05:39) 確かに画像が出ます。
(00:05:48) これだけでも、ですね、
(00:05:53) このクイックアクション、汎用に使えるんですけれども、
(00:05:57) もう一つAppleScriptのアプリケーションを組み合わせて、WordPressへの動画貼り付けコードを生成したいと思います。
(00:06:12) 3番目、
(00:06:14) WordPressへの動画貼り付けコードを生成します。
(00:06:20) これはまた同じく、AppleScriptのスクリプトですけれども、スクリプトエディターで作ります。
(00:06:29) 以下のような内容です。この内容もブログへ添付しますので、
(00:06:40) コピーしてお使いください。
(00:06:44) その結果のですね、
(00:06:47) アプリケーションの実行の様子をご覧ください。
(00:06:55) 最初にアプリケーションを起動させます。
(00:07:11) それで、
(00:07:15) 開始画面の画像URLを入れてください、ということで、最初にその画像ファイル、
(00:07:26) を選び、その上で右クリックして、Dropboxリンクをコピーします。
(00:07:33) それを、ダイアログボックスのところにペーストします。
(00:07:40) その上で、左クリック3回、右クリック、サービスから、
(00:07:48) 変換アクション、
(00:07:53) コピーがされたらそれを、
(00:07:57) ボックスに貼り付けます。
(00:08:00) OK。
(00:08:03) 次に、
(00:08:06) 動画本体のURLを、
(00:08:10) 変換します。
(00:08:14) 目的の、
(00:08:19) ファイルを選びます。
(00:08:23) どれだ、
(00:08:31) はい、右クリックして、Dropboxリンクのコピーして、
(00:08:39) それを、ダイアログボックスにペーストして、
(00:08:46) 左クリック3回、
(00:08:51) 右クリック、
(00:08:53) サービスの中からアクションを選び、変換したものを、
(00:09:02) 置き換えます。
(00:09:05) OK。
(00:09:09) 次に、字幕ファイルのURLです。
(00:09:14) 探します。
(00:09:18) vttファイルです。
(00:09:23) 右クリックして、
(00:09:26) リンクをコピーして、
(00:09:29) ダイアログボックスにペーストします。左クリック3回、右クリック、
(00:09:38) サービスの中からアクションを起動して、
(00:09:42) 出来上がったコードを、
(00:09:46) 貼り付けます。
(00:09:48) OK。
(00:09:51) 最後に動画の説明を記入します。
(00:09:55) 何入れてもいいんですが、先頭の文字に小文字の不等号カッコ、これはダメです。
(00:10:05) で、出来上がったものがこういった形でですね、コードが出来上がります。
(00:10:23) OK。
(00:10:25) クリップボードにコピーされますのでそれをWordPressへペーストします。
(00:10:33) カスタムHTMLコードへ、
(00:10:37) ペーストします。プレビューを押します。
(00:10:47) 起動してみます。
(00:10:55) ちゃんと動いてますね、
(00:11:14) はい、正しくできています。
(00:11:19) それでは以上で、Dropboxにある動画を、WordPressへ貼り付ける方法の説明を終わります。
(00:11:29) ありがとうございました。

上の3つの動画の下部に挿入した字幕一覧のトグルと同じものです。このtxtファイルは、Dropboxの中にあります。上に掲載のfunction.phpをコピペしたあと、

[dynamic_external_html url=""]

上をカスタムhtmlに記述して、url=””のところに当記事で説明した方法で変更したDropboxリンクを挿入します。Dropboxにあるこのtxtファイルを変更すると、全てのこの字幕一覧の表示が変更されます。当たり前といえばそうなのですが、なかなか便利です。動的トグルと呼んでおきます。

８　直接リンクには3つのサーバーがあるが、不安定であり、モニタリング要。

Dropboxから画像を直接リンクする方法は、正直、不安定です。以下に、同じ画像を、DropboxのURLをwww.dropbox.com（変更なし)の場合、dl.dropbox.comの場合、dl.dropboxusercontent.comの場合、を並べます。数日様子を見ていますが、www.dropbox.com(変更なし)がほぼ常に表示されています。これの特徴は、別のトークンURLに書き換えられて表示されるという２段階になっています。状況をウオッチしていきます。
2024.5.5時点で、www.dropbox.com raw=1は表示不可、dl.dropbox.com raw=1は表示可能となっています。

https://dl.dropbox.com/scl/fi/vqp3klbp7ii4io0bzt8pq/240119_test.JPG?rlkey=p2redrolq8klhrovdpk3c1wa5&raw=1
https://dl.dropboxusercontent.com/scl/fi/vqp3klbp7ii4io0bzt8pq/240119_test.JPG?rlkey=p2redrolq8klhrovdpk3c1wa5&raw=1
https://www.dropbox.com/scl/fi/vqp3klbp7ii4io0bzt8pq/240119_test.JPG?rlkey=p2redrolq8klhrovdpk3c1wa5&raw=1
]]> 18942