動画画像ライブラリー第３弾です。
Dropboxリンクは目立たないようにしたい。
これまで画像のURLリンクもDropboxを使えばいいと考えていて、Finderで右クリックして「Dropboxリンクをコピー」で得られたリンクを、そのリンクの末尾のdl=0をraw=1に置き換えて使えば、それだけでいい。そのように思ってきました。
Dropboxリンクの例は、下のようになります。
(A)
| https://www.dropbox.com/scl/fi/xxxxxxxxxx/v3_imakat.png?rlkey=xxxxxxxxxx&raw=1 |
このDropboxリンクが安全性に優れている点は、クリックしてから実際に再生する時は更にワンタイムトークンリンクに変換されてからブラウザで再生されます。(B)のように形を変えます。ブラウザからURLをコピペするとこうなります。しかもこのURLは一定の時間が経過すると無効になります。
(B)
| https://uce9dafc269d365818926846419f.dl.dropboxusercontent.com/cd/0/inline/Chthco4Tzn_2sCYS-ARStjz7FpZwTL9NkufD8Tw7M9-_bhwZ_g2zr2Qpz438qIwJbXdcAGwNaCcLlodnarQYoFRBZ9CrxJbNUHldMJX15qcEWuIQ1oz_T3QPgWrfmc-gB74/file# |
WordPressの画像ブロック→URLから挿入→(A)を挿入→HTMLとして編集を選ぶと、以下のコードが記述されています。
(C)
| <figure class=”wp-block-image size-large”><img src=”https://www.dropbox.com/scl/fi/xxxxxxxxxx/v3_imakat.png?rlkey=xxxxxxxxxx&raw=1″ alt=””/></figure> |
これで構わないとすれば、それまでのことですが、ブラウザからページのソースを読めば、上のコードは丸見えになります。Dropboxとすれば、(A)の情報が知れ渡るのは、あまり嬉しくないでしょう。「頭隠して尻隠さず」状態ということですからね。
そこで、以下のように、AppSheetで、動的な画像サイトを作ることにしました。
(D)
| https://imakat.com/im.php?id=7a7914b9 |
これを、画像ブロック→「URLから挿入」に入れます。こうすると、(A)の部分は、WordPressに表示されなくなります。(C)から分かるように、メディアはDropboxから読み込んでいるのですが、読者からは、どこから読み込まれているのか分かりません（そのようにしたいわけです)。
簡単に代替URLへ移行したい。
画像サイト(D)を作るもう一つの目的が、 メディアのソースを、Dropboxリンクから自宅サーバーへ、簡単に、切り替えられるようにすることです。
なぜって？やはりDropboxにもトラブルは起こりうるからです。
こうした移行は、一般的には、プラグインを使って、WordPressのソースに書き込まれているURLを、直接に、置き換える方法が取られると思います。
しかし、ソースにDropboxリンクを使っている場合はそうはいきません。Dropboxリンクはファイル名やローカルパスが外から分からないようにランダム文字列に置き換えられていますので、ローカルパスだけをサクッと置き換えることは出来ないのです。
1点1点、Dropboxリンクと自宅サーバーURLを対応させた、マッピングファイルを作成する必要があります。丁寧にいうと、Dropboxリンクとローカルパスと自宅サーバーURLの3つをマッピングさせたレコードを作成する、それをファイル上で右クリックしてあといくつかのクリック操作だけで済むようにしているところが、ポイント解説にて紹介するAppleScriptの特徴です。
そしてこのマッピングファイル(Google spreadsheet)をJSONファイルとして、WordPressに送り込むようにします。マッピングファイルの更新は1日一回夜中に行います。
ここまで書いてきて、私が、動的サイトの使いやすさにこだわる理由が分かっていただけたでしょうか。
それでは次は、ポイント解説です。
ポイント解説
すみません。説明で使う素材を2024-11-28_15.50.35.pngに変更します。
1 画像ライブラリー作成AppleScript
Dropboxリンクをコピーした後に、クイックアクションの中から「画像ライブラリー作成」を選びます。
」」ポイントは、必ず「Dropboxリンクのコピー」を行った後で、クイックアクションに入り、「画像ライブラリー作成」を選ぶことです。いきなりクイックアクションに入ると、その段階では、古いクリップボードが残ったままになっています。
そこで、一応、ポカよけとして、以下をメッセージ表示します。
| cutjp_fileName: 2024-11-28_15.50.35.png 【注意】Dropboxリンクのコピーが行われていない可能性があります。再度Dropboxリンクのコピーを実行してください。 |
ここはひとまずOKを押して終了します。
改めて、Dropboxリンクのコピーを実行した後で、クイックアクションの「画像ライブラリー作成」を選ぶと、
| https://www.dropbox.com/scl/fi/xxxxxxxxxx/_2024-11-28_15.50.35.png?rlkey=xxxxxxxxxx&dl=0 に関するデータを、csvファイルの1行として追加します。 |
と表示されます。
ここでOKを押せば行追加が実行されます。
日本語のファイル名の時の注意喚起
ファイル名に日本が混じる時、Dropboxリンクは日本語は削除されます。リンクはランダム文字列で作られますので、日本語が削除されてもユニークなリンクにはなりますが、日本語だけで出来たファイル名ですと、リンクを見ても、どのファイルか、想像すら出来ません。特に、複数の日本語だけのファイルが続きますと、どこまで処理したか、分からなくなります。そこで、日本語だけのファイル名を扱う時は、必ず、Dropboxリンクの取得が済んでいるか注意喚起をします。
| https://www.dropbox.com/scl/fi/xxxxxxxxxx/.png?rlkey=xxxxxxxxxx&dl=0は、ファイル名が全て日本語のため、Dropboxリンクのコピーが済んでいるか否かが判別できません。自信がない場合は、キャンセルを押して、リンクのコピーを再実行ください。自信があればOKを押してcsvを追加ください。 |
ただ、出来れば日本語だけのファイル名は避けるのがいいです。
AppleScriptの中では、wp_photo_library.csvへ行を追加しています。更に、link_mapping.csvにも行を追加します。
2 追加したデータをWordPressで扱えるようにする
画像ライブラリー用のデータは、クイックアクションで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 まとめ
このシリーズは、３回までで動画および画像を外部から読み込んで表示する方法、動的サイトの構築について説明してきました。次は、その動的サイトの醍醐味である代替URLへの切り替え、具体的には、Dropboxリンクから自宅サーバーへ切り替える方法について、紹介します。
以上です。