2024.1.23更新：
DropboxリンクのURLの変換方法が変更になっています。こちらのブログをご覧ください。
Gutenbergを使い始めます。
１２月初旬。突然、WordPressのエディターがGutenbergとなりました。
” グーテンベルク “、名前はオシャレですね。
活版印刷を発明した人ですが、当時１５世紀、まだノーベル賞はありませんでした。
タイトルが異常にデカイ
＜Googleの図形描画を利用したリンク表示について＞
上のイメージはGoogle図形描画から、直接リンクしています。
WordPressでの利用も簡単です。
＜１＞ 「図形描画」の「ファイル」から「ウエブに公開」を選ぶ。
＜２＞ 「公開」を押す。
＜３＞「埋め込む」からコードをコピー。
＜４＞ Wordpressの画像ブロックを選ぶ。
＜５＞ 「URLから挿入」へ＜３＞のコードをペースト。
最初の感想として、Gutenbergは、大変、使いにくいと感じます。ブロックの扱いが慣れません。
タイトルが異常にデカいです。
当面は、前のものに戻したいなら、Classic Editorとのプラグインが用意されている、とのことです。
まあ、年度が変わろうとしている時だから、ちょうどいい頃かも知れません。
コツコツとGutenbergを習得していこうと思います。
最初に、Dropboxから試してみます。
さて、写真動画の貼り付け利用についてです。
これを機会に、写真動画を、基本的には、外部のクラウドから貼り付けようと思います。
DropboxをMacで使っていますが、下図のように、マウスの右クリックで、Dropboxフォルダに入っている写真動画から、直接、リンクをコピーして貼り付けることが出来ます。
＜方法＞
MacのDropboxフォルダの写真を「Dropboxリンクをコピー」で取り込みます。
- MacのDropboxフォルダの写真を「Dropboxリンクをコピー」で取り込みます。
- 例えば、
- “https://www.dropbox.com/s/978xmu45frbpzry/2018-12-04%2020.08.46.jpg?dl=0″
- 次に、
- “www.dropbox.com”を”dl.dropboxusercontent.com”へ置き換えます。
- さらに、“?dl=0” を削除します。
- 結果は、
- “https://dl.dropboxusercontent.com/s/978xmu45frbpzry/2018-12-04%2020.08.46.jpg“
これを、Wordpressの画像ブロックへペーストします。動画についても、同じやり方です。
上の写真、また下の写真および動画は、その方法で表示しています。
Dropboxの評価と問題点
- 写真については、簡単な扱い、表示画質、スピードなど、全く問題ない。
- 動画については、画質をキープしたまま、ある分量ダウンロードされた時点から再生が開始するため（HTTPプログレッシブダウンロード）、モバイルを屋外で使用した場合、再生が開始しないような場合が起きる。ビデオ撮影の元データのままでは、重すぎて、使える場所が限定的。
- 動画については、iPhoneなどモバイル機器の、SafariやChromeなどブラウザのキャッシュが満杯の理由もあり得る。Safariの場合は「履歴」の削除でスムーズになることが多い。
- 動画については、サムネイル画面の登録が必要。これはYouTube,vimeoでも同様。
- 動画については、ビデオ録画は、1080pHD/60fps以上であっても、Web公開は、ファイル上で右クリックで「ビデオファイルのエンコード」→720p 互換性重視」などでファイルサイズを圧縮すれば自ずと、スムーズになり問題ないかも知れない。※このエンコードの選択肢に480pがあり実行してみたが、再生されない。プログラムのバグか。他のメーカーのエンコーダーがあれば使って480pくらいまで落とした方が、いいかも知れない。
次にGoogleを試してみます。
GoogleをMacから使う場合、画像動画ファイルの上で、マウスを右クリックしても、「リンクをコピー」は出てきません。これが欠点。Webを使うしかありません。
＜写真をリンクする方法＞
- まずコードの基本形を用意します。
- <iframe src=”https://drive.google.com/file/d/********/preview” width=”640″ height=”480″></iframe>
- Googleドライブから、「共有リンクをコピー」してその中の、上記********に対応する”1HUqgDZOcPJP8WW8j763YpVSiFeMniahm“を得る。
- 当てはめる。
- <iframe src=”https://drive.google.com/file/d/1HUqgDZOcPJP8WW8j763YpVSiFeMniahm/preview” width=”640″ height=”480″></iframe>
- カスタムHTMLブロックへペーストする。
＜動画をリンクする方法＞
基本的には、写真の場合と、同じです。
- まずコードの基本形を用意します。音声をミュートにします。
- <iframe src=”https://drive.google.com/file/d/********/preview” width=”640″ height=”480″ event.target.mute></iframe>
- Googleドライブから、「共有リンクをコピー」してその中の、上記********に対応する”18OJQuQSE5NvQMfyW5UyVn9-Mravo4XoO“を得る。
- 当てはめる。
- <iframe src=”https://drive.google.com/file/d/18OJQuQSE5NvQMfyW5UyVn9-Mravo4XoO/preview” width=”640″ height=”480″ event.target.mute></iframe>
- <iframe src=”https://drive.google.com/file/d/18OJQuQSE5NvQMfyW5UyVn9-Mravo4XoO/preview” width=”640″ height=”480″ event.target.mute></iframe>
- カスタムHTMLブロックへペーストする。
Googleの評価と問題点
- まずコードの基本形だが、他の方のブログを参考にさせていただいたが、これが間違っているかも知れない。これをWordpressが受け付けないのかも知れない。
- どうも、埋め込むためのファイルにユニークなコードを取得するまでの手順が複雑過ぎると感じる。
- つまりGoogleは、Dropboxのように、Macに存在するファイルから右クリックでリンクを取得することが出来ず、WebからGoogleドライブにアクセスして、さらに奥に何段階か入り込んで、リンクを取得する、という面倒なステップになっている。
- 写真についても、iframeの貼り付けがうまく行かない。モバイルでの初期画面が表示されない。
- 動画については、ひょんな時に、再生が出来た瞬間があったが、再現できない。Invalid parametersとなって動かない。
- Googleについて、まだ、このコード記述について研究不足だと思うが、他の方の研究を参考にさせていただこうと思う。
- 現段階では、勝手ながら、Dropboxの勝ち、とする。
現時点の総合評価
Dropboxの勝ち！
- Macユーザーだけの長所かも知れないが、Dropboxを使えば、Finderに表示されるDropboxのファイルを右クリックして、リンクコピーを取得、それをWordpressへペーストしながらコード修正。この作業で済む。
- Dropboxについて、対象の動画が重すぎる場合は、右クリックで「ビデオファイルのエンコード」→720p 互換性重視」などで、ファイルサイズを圧縮する、この作業もファインダの操作で済む。※480pまでは圧縮できるが、それより圧縮したいなら別にエンコーダーが必要。
- YouTubeのような画質の自動調整（トランスコード）はないため、モバイルでの4G通信での視聴では、困難な場合がある。
- モバイル機器のブラウザのキャッシュが満杯である可能性もあり、履歴の削除を行うことにより改善されることも多い（今回、これが最大の原因だった）。
- 有料のDropbox plusを使っているので、ファイル当りの最長時間は60分。そんなに長いものは作らないので問題ない。
- シンプルな操作性は秀逸である。当面、写真動画ともに、Dropboxを使うことにする。
- 動画の、待ち受け初期画面は、何か作る。
- Google図形描画はじめ、Googleのアプリは、Web公開機能がシンプルなものが多い。これらは大いに活用する。
以上です。