画像投稿テスト
投稿者: 槌本 裕二
えっとワークのシステムを作っています。
WordPress 6.3ごろから、管理画面に’Updates may take several minutes to complete. If there is no feedback after 5 minutes, or if there are errors please refer to the Help section above.’ 「アップデートが完了するまで数分かかる場合があります。5分経ってもレスポンスがない場合やエラーが発生する場合は、上のヘルプセクションを参照してください。」という警告が表示されていて、実害はないけど解決しないなあ、と思っていたら、これは通常の表示なんですね。
「更新が行われている」と書かれてはいなかったけど、自動更新で何か問題が起こって5分以内に終わっていないのかと勘違いしていた…

WordPress 6.7
WordPress 6.7 へアップデートしてしまいました。
一部のブロックが非推奨や変更になっているようです。
投稿画面などに不具合がありましたがご連絡ください。
2024年7月のシステム更新
2024年7月に、比較的大きなシステム更新がありました。
基本的に、従来のコンテンツはそのまま継続して公開できるようにしていますが、一部互換性が失われる事があるかも知れません。お困りの際は個別にお問い合わせください。
WordPress 6.6
基幹システムであるWordPressのバージョンが6.6に更新されました。一番大きな更新として、複数の編集者が同時に同じコンテンツを編集しようとした際に、不整合が起きにくくなりました。コンテンツの執筆を複数人で分業しやすくなりました。
また、これは6.6以前から継続していますが、幾つかのブロックウィジットが追加されています。
Eikai 2024 テーマ
WordPressの集合知である標準テーマ twentytwentyfour をベースに、日本語固有の問題や互換性の問題を独自に修正したテーマです。
環境に依らず同じ見た目を提供する2020テーマとは異なるコンセプトで設計されており、旧来のリッチなメニューなどを実現します。2020と切り替えて試すことができます(元に戻すこともできます)が、一部のプロパティは引き継がれないかもしれません。設定の「外観」から選択してください。
過去に行ったSNSへの自動投稿の調整が、固定ページの一覧を取得する際に起こしていた副作用に対処しました。
アクセス統計など一部のプラグインが動作しなかった問題を修正しました。
画像アップロード時の再圧縮
画像をアップロードしたときに、より効率の良い画像圧縮フォーマットであるwebpに自動変換していましたが、その際に、幾つかの異なる解像度のサブセットを生成するようになりました。
JPEGは現在でも優秀な画像フォーマットで、写真などの自然画の不可逆圧縮が得意ですが、JPEGが登場してから四半世紀が経過し、より圧縮効率の高い画像フォーマットが幾つか登場しています。現在ほぼ全てのブラウザが対応しているwebpに変換し、適切な解像度に整えることで、モバイル環境における転送の効率を高め、閲覧者の「ギガ」の消費を抑えます。
この変換はアップロード時に自動的に行われるため、みなさんは特別に意識する必要がありません。また、拡大表示などで解像度の高い画像が必要になったときには、必要な解像度の画像が自動的にロードされます。
既にアップロードされているコンテンツは変更されませんので、以前のコンテンツに大きなJPEG画像がある場合は、再度アップロードして差し替えることで、この恩恵を受けることができます。
現在、webpの次のフォーマットとしてavifが使われ始めています。環境が整えば、avifへ移行します。
画像配信方法変更による 高速化と画質向上
etto.workは、この度、画像配信方法を変更し、サイト閲覧速度の向上と画像品質の改善を行いました。
変更内容
従来、画像配信にはコンテンツプロバイダ(CDN)を利用していました。しかし、近年主流となっているHTTP/2やHTTP/3技術では、同一ストリームでHTMLと画像を連続送信することができるようになりました。etto.workの転送プロトコルを更に最適化していくうち、画像だけCDNを経由するよりも、単一ストリームを利用する方が、特に小さなページでは転送が早く終わるようになりました。
そこで、etto.workでは、以下の変更を行いました。
- 画像配信方法をCDNから同一ストリーム配信に変更
- 画像圧縮方法をWebP形式に変更
変更による効果
- サイト閲覧速度の向上
- 画像品質の向上
- データ転送量の削減
WebP形式による画質向上とデータ転送量削減
WebP形式は、従来のJPEGやPNG形式に比べ、ファイルサイズを大幅に削減しながらも、同等の画質を維持できる画像フォーマットです。
etto.workでは、画像アップロード時にWebP形式への変換と最適化を行うことで、画質を維持しながらデータ転送量を削減し、ページ読込完了までの時間短縮を目指しました。
CDNに頼らないコンテンツ配信の制御
CDNを使わないことで、以下のメリットも享受できます。
- コンテンツ配信の完全な制御: CDNを使わない場合は、コンテンツ配信を、より完全に制御することができます。
- キャッシュによる問題の回避: CDNによるコンテンツのキャッシュ期間の問題が発生しなくなります。
- セキュリティの向上: CDNを経由しないため、セキュリティリスクを軽減できます。
ユーザーへの影響
今回の変更により、etto.workユーザーは以下のメリットを享受できます。
- より快適なサイト閲覧体験
- 高画質な画像の閲覧
- ページ読込時間の短縮
- 通信量の削減
- コンテンツ制御の向上
今回の配信方法変更は、日本国内からのアクセスに最適化されています。海外からのアクセスは、コンテンツプロバイダを利用していたときよりも遅くなることがあります。
今後もetto.workは、ユーザーにとってより快適なサービス提供を目指して、最適な環境整備に取り組んでまいります。
Webサイトの見た目は ユーザが決める時代に
ギミックや派手な効果にこだわるよりも、ユーザビリティとアクセシビリティを重視したデザインを提案します。
Webサイトのデザインにおける変化
Webサイトを初めてオープンさせる時は、誰もがこだわりのデザインと、色々なギミックを詰め込みたくなるものです。わたしも最初に作ったWebサイトには、知ってる全てのギミックを組み込みました。
それから四半世紀。HTML は HTML5 と CSS3 の時代になり、構造と見た目の分離が進んでいます。また、ユーザ環境でも時計端末から大型テレビまで様々な環境が入り交じるようになりましたし、通信環境も、以前からの有線回線に加えて、比較的不安定な無線回線も幅広く用いられるようになりました。
Webサイトのデザインにおいて、ギミックや派手な効果は依然として魅力的ですが、ユーザビリティとアクセシビリティに重点を置くことも重要です。ユーザがサイトをスムーズにナビゲートし、目的の情報や機能に簡単にアクセスできるようにする必要があります。
HTML5とCSS3の利点
HTML5とCSS3の進歩により、構造とデザインが完全に分離されました。これにより、コードのメンテナンス性が向上し、異なるデバイスやブラウザに対して柔軟に対応することができます。レスポンシブデザインの採用も重要であり、さまざまな画面サイズに対応することでユーザビリティを向上させます。
また、アクセシビリティも重要な要素です。特に視覚や身体に制約を持つユーザにとって、適切なマークアップやアクセシブルなデザインは利用のしやすさを保証します。意味のあるタグや属性の選定、適切な見出しの使用など、アクセシビリティのガイドラインに従うことが必要です。
ユーザのニーズと目的に合わせたデザイン
最も重要なのは、ユーザのニーズと目的を理解し、それに合わせたデザインを提供することです。デザインは一種のコミュニケーションツールであり、情報の伝達やブランドのイメージ構築に大きな影響を与えます。洗練されたデザインと必要な機能のバランスを取りながら、ユーザが求める利便性とエンゲージメントを追求することが重要です。
新しいWebサイトをオープンさせる際にはなかなか気が回らないのですが、過度なギミックに固執せず、ユーザビリティとアクセシビリティを考慮したデザインをオススメしたいと思っています。
ユーザスタイルのカスタマイズ
HTML5とCSS3の進歩により、ユーザスタイルのカスタマイズがさらに簡単になりました。ユーザスタイルは、ユーザが好みの色合いやフォントでWebページを表示するための仕組みです。ユーザは自分の好みに合わせてデザインをカスタマイズできるため、より快適な閲覧体験を得ることができます。
また、最近ではダークモードの人気が上昇しています。ダークモードは、明るい背景色に比べて疲れにくく、目の疲れを軽減するためのモードです。多くのユーザがダークモードを好んで使用しており、Webサイトのデザインにも対応することが求められています。ダークモードに対応することで、ユーザは自分の好みに合わせてWebページを閲覧できるだけでなく、目の負担を軽減することもできます。
さらに、リーダーモードも人気があります。リーダーモードは、コンテンツをより読みやすくするためのモードで、文字の大きさや行間などの要素を調整します。特に視覚に困難さのあるユーザにとっては重要な機能であり、アクセシビリティに配慮したデザインを提供する必要があります。
Webサイトのデザインはユーザが決める
これらの新しいトレンドでは、こだわりのデザインはほとんど無視されます。多くの閲覧者は、制作者のこだわりよりも、自分に心地よい閲覧がしたいのです。ユーザビリティとアクセシビリティを重視して、様々な需要をもっている方それぞれに向けて、最適なコンテンツを届ける事が大事です。
さらに、モバイル回線の発達により、どこでWebサイトを閲覧されるか分からない時代になりました。無線通信は年々高速化されていますが、それでも応答や速度は有線通信に比べて不安定で、ビルの谷間や地下鉄での移動など、一時的に通信が途切れたりする環境で閲覧されることもあります。そうしたケースでも素早く最初の画面が出てくることが重要です。一般的に、6割のユーザは2秒ロード画面が続くと次のコンテンツに言ってしまうと言われています。本サービスは、ユーザの操作に素早く反応して、見たいページを0.01秒でも早く表示するために最適化されています。
GA4 で 電話リンクタップをコンバージョンに設定する
Google AnalyticsがGA4になって1年以上経ちました。スマホサイトからの「電話リンクタップ」をコンバージョンに設定するには、Google Tag Manager (GTM) を利用する方法が公式マニュアルにも紹介されていますが、これだけのためにGTMを読み込ませると、ページの読み込み時間が無駄に長くなってしまいます。しかも、モバイルベンチマークでは 600ms 前後と、かなり重量級の外部スクリプトがロードされます。
最初のページが開くまでの時間は0.1秒でも早くしたいものですし、GA4とGTMの連携設定も面倒だと思っていました。今回GA4だけで完結する設定が出来たので、簡単に紹介します。
Google Analytics (GA4) で、カスタム定義を作成し、クリック先の URL を取得出来るようにする

link_url が取得出来るようになったので、link_url に tel: を含む click をイベントに設定する

端末でページを開き、念のため再起動したあと、リンクをタップして電話をかけるフリをする(通話アプリを起動すればOK)
リアルタイムレポートを開いて、phone_call イベントが発生したことを確認

24時間ぐらいすると、GA4 のイベント一覧に「phone_call」が出てくるので「コンバージョンに設定する」をONにします。

これで、GTMを使わなくても、Webサイトからの電話をコンバージョンとして設定できるようになるはずです。分かる方はお試し下さい。
WordPress 6.2
WordPress を 6.2 に更新しました。投稿エディタや見た目に少し変更があるかも知れません。
投稿やコメントなどができないなどの不具合があればご連絡ください。
これまで WordPress アプリから投稿などが行えていましたが、そのアプリの開発とサポートが終了するそうです。
今後は、同じ WordPress チームが開発している Jetpack アプリを使って、これまで同様の投稿やアクセス数の確認をしてください。
移行可能な環境では WordPress アプリのほうに移行の案内が出ているはずなので、そちらの指示に従ってください。
WordPress 6.1
本日 2023年3月17日早朝、ブログシステムである WordPress を 6.1 に更新いたしました。少し大きな更新ですので、少し使い勝手などが変わっているかもしれません。
投稿やコメントなどができないなどの不具合があればご連絡ください。
また、これに合わせてシステムの更新を行いました。以前より応答が悪くなった、など、更新後に継続した不具合があれば、お手数ですがご連絡ください。