【WordPress】ブロックエディタの不具合とCDNの話
WordPress にブロックエディタ(Gutenberg)が導入されたのは、2018年の年末にリリースされた Ver 5.0 からです。もう４年以上前の話になります。
最初に少しだけ試してみましたが、 Enter を押して改行するだけで個別のブロックにわかれるという挙動になじめず、ずっと従来のクラッシックエディタを使用してきました（ブロック内改行は shift + Enter で可能です）
しかし最近になって、ブログに目次を加える必要を感じて調べたところ、ブロックエディタであれば簡単であるという情報を得て、やっとブロックエディタに入門することにしました。
ブロックエディタ所感
クラッシックエディタは、ワープロのように上から文章を入力していくノーマルなスタイルでした。
それに比べてブロックエディタは、ブロックというかたまりを積み上げて（下げて？）画面を作っていく感覚です。入力の前提として常にブロックを意識しなければならないところが、とっつきにくさを感じさせるのかもしれません。
本腰を入れて使ってみると、様々なブロックが用意されているのが便利ですね。これまでであればプラグインに頼るか、ショートコードや CSS を追加する必要があった内容でも、再利用ブロックで実現できる場合があります。
例えば下記のような表示も、既存ブロックの組み合わせだけで簡単に実現できます（Custom CSS を若干追加）
- 材料一覧（トピックブロックの中にテーブルブロックを配置）
- カラムブロック（材料一覧と写真の自動配置＝PCだと横並び、スマホで縦並びになるレスポンシブル対応になる）
| パスタ | 300g |
| ベーコン | 70g |
| ニンニク | ひとかけ |
| オリーブオイル | 大さじ１ |
| ★辛子 | 小さじ２ |
| ★みりん | 小さじ２ |
| ★醤油 | 小さじ２ |
| ★水 | 50ml |
| オリーブオイル | 大さじ２ |
| 塩 | 小さじ1/2 |
| 水 | 600ml |
またブロックの移動（入れ替え）も地味に便利ですね。
ただ、導入当初はとても動作が不安定でした。クラッシックエディタに戻さないと投稿が作成できない状況にもなりました。
しかし今現在は安定して使用できるようになっています。今回は、その顛末の話です。
編集画面が真っ白
最初は問題なかったのですが、あるタイミングで編集画面が真っ白になるようになりました。ブラウザをリロードしても変わりません。
すぐにググってみると、この現象はとてもポピュラーなようで、たくさんヒットします。一番多く見受けられた解決策が「ブラウザのキャッシュを削除する」です。
サーバー上にある php ファイルの修正間違いなどで起きる「画面が真っ白で、私は真っ青😱」現象とは違い、今回はブラウザ上の Javascript での不具合と思われますので、ブラウザのキャッシュをクリアするのは至極まっとうな対策です。
実際にブラウザのキャッシュを削除してみると、見事になおりました！
と喜んだのも束の間、しばらく使っているとまた真っ白になりました。しかも今度はキャッシュをクリアしてもなおりません。
何をしてもなおらないので、仕方なしにクラッシックエディタを使います。
試行錯誤
いまだに不安定なのかとブロックエディタへの移行を諦めかけたところで、思い付いて他のブラウザで試すことにします。
いつもは Chrome を使っています。久しぶりに Safari を起動しました。
おお、ブロックエディタが動く！と喜んでも、しばらく経つとまた真っ白に。FireFox をダウンロードしてきて試しても結果は同じです。
数日クラッシックエディタを使い、しかしここで諦めるのもしゃくなので、本気で調べてみることにしました。
疑われるのは、やはりキャッシュが悪さをしているということです。WordPress に影響するキャッシュは複数あるとのことで
- ブラウザのキャッシュ
- プラグインが提供するキャッシュ
- ホスティングサーバーが提供するキャッシュ
確認してみると
- クリアは試した
- 該当するプラグインはありません
- 利用していません
それでも調べていくと、第４のキャッシュが存在したのでした。
4. CDN（コンテンツ・デリバリー・ネットワーク）
CDNは、「コンテンツ配信ネットワーク（Content Delivery Network）」の略称です。Webサイトのコンテンツを世界中に分散した配信拠点にコピー（キャッシュ）して、オリジナルのWebサイト（オリジンサーバ）の代わりにコンテンツを届けるネットワークや、その仕組みのことを指します。
コンテンツをCDNで複数の配信拠点にキャッシュすることで、ユーザに近い拠点から配信できるため、スピーディにストレスなくコンテンツを届けることができます。具体的には、アクセス集中による表示遅延やサーバダウンを防ぐことができます。
引用元：https://www.accelia.net/column/beginners/4173/
このブログは何年も前から Cloudflare の CDN を利用しています。
なるほど！という感じです。
少し前に、vercel にデプロイしたサービスをこのブログのサブドメインに登録するために、 Cloudflare のダッシュボードはいじっています。Cloudfrare のキャッシュクリアを試してみます。
Cloudflare のキャッシュクリアの仕方
1. ログインする
2. ウェブサイトを選択
3. キャッシュをパージ
4. すべてパージ
結果
CDN のキャッシュをクリア後、これまでのところ真っ白画面の不具合は再発していません。
と書いたところで Gutenberg のアップデートがきたので適用したところ、真っ白画面が再発し、ギクッとしたのですが、今のところブラウザのキャッシュクリアでなおっています🤗
今回の不具合では、よくある現象でありながら、WordPress + CDN の組み合わせが比較的まれなこともあり、解決までなかなかたどり着けませんでした。ブログの投稿として残すことで、どこかで誰かのお役に立てれば幸いです。
つい先ほど、こんなツイートがありました。
あの中島聡さんのツイートなので内容が気になりますが、説明がちんぷんかんです。対象となる読み手にわかりやすく、をモットーとする中島さんですから、これはその方面のプロ向けのサービスだということがわかります。
それでも気になります。この頃では、こういうときはまず「ChatGPT」ですね。
ChatGPT の凄いところは、内容の説明レベルを簡単に調整できることです。
リアルな「対話感」を持つこのようなチャットAIは、ネットから情報を引き出すツールではありながら、今までの検索サービスとはまったくの別ものだと感じています。今の段階では、情報が正しいかどうかをググって検証する必要がありますが、それでも ChatGPT で問い合わせる時間は着実に増えています（特にプログラミング関連）なぜなら、その方が断然に「楽しい」からです。
私のパソコンとの付き合いは、インターネットが普及する以前の、パソコン通信・BBS の時代にまでさかのぼります。インターネットの興隆を目の当たりにしてきたわけですが、これほどエキサイティングな出来事はありませんでしたね。
さあ、こらからどうなっていくのでしょう。
ちなみに次にエキサイティングだった出来事は、日本に海外製のAT互換機が上陸して（DOS/V や Windows の登場で日本語を表示するのに漢字 ROM が必要なくなったので）、それまで国内では一強独占だったNECのPC98 が跡形もなく駆逐されたときです。あの頃のパソコン業界は熱かったですね。
最近の投稿です
過去7日間でアクセスの多い投稿です
