この1月から、思うところあってこのブログのシステム(WordPress)を大幅に刷新しています。暇を見つけて長期に渡って取り組んでいるので、自分でも忘れてきてしまいました😅。備忘録と今後に向けた整理を兼ねて、読者の皆さんに関係のある部分についてまとめてみます。
SSLによるサイト全体の暗号化
一番大きな変更点は、SSLによる暗号化通信(https)に対応したことです。特に秘匿性のある情報を取り扱うサイトではありませんが、コメント投稿時にメールアドレスを入れていただくなどの際に、暗号化されていなかったことをお気にされている方もいらしたかもしれません。今後はコンタクトフォームのようなものも設けようかと思っています。
見出しや目次による記事の構造化
記事に関係するところでは、見出しや目次を入れられるようになりました。もちろん、これまでも手動でhtmlタグを入れれば可能だったのですが、面倒くさくてほとんどやっていませんでした。この記事にも目次を入れています。適切に見出しを追加して、より読みやすい記事をお届けできると考えています。
これは記事執筆にmarkdownという記述フォーマットを利用できるようにしたことで自動化が実現しました。以下のプラグインを使わせていただきました。
(追記2023-01-18:その後、自前のmarkdownプラグインに変更し、以下のソフトウェアの使用は終了しました)
(GitHub)GitHub - makotokw/wp-gfm: WordPress Plugin for PHP-Markdown and GitHub Flavored Markdown
このプラグインでは脚注機能も提供されていたので、以下の記事では脚注を使って、文章の流れ上それほど重要でない参照リンクを脚注で紹介しています。
(実装例)日本最古のリゾートホテル「日光金谷ホテル」|番外編
記事レイアウトの追加
ブログ記事の多様化を目指して、この記事がそうですが、シンプルなレイアウトを混在できるようにしました。今後は、過去に裏ブログで書いていたようなホテル活用にとどまらない幅広い話題を取り上げていく考えです。
OpenStreetMapによる地図の埋め込み
(追記:2024-01-27)Google Map APIを正式に利用しはじめたため、OpenStreetMapの利用は停止し、埋め込み地図も削除しました。文章はそのままになっています。(追記終わり)
上の金谷ホテルの記事では、OpenStreetMapを使ってインタラクティブな地図の埋め込みをしています。これも今回のシステム強化で試験的に導入したものです。以下の地図を操作すると、金谷ホテルが日光東照宮のそばに立地していることがよく分かると思います(拡大ボタンを使ったり地図をドラッグして移動したりしてみてください)。
これまでも同様の試みをしたことがありましたが、利用していた地図サービスがサービス終了になることが複数回ありました。今回の実装ではOpenStreetMapから地図タイルのみを供給してもらって、それ以外の部分は自前で実装しています。OpenStreetMapは今後もずっと提供されるはずですので、今後はリンク切れなしに操作可能な地図を埋め込むことができる見通しです。
Googleとは少し距離を置いたほうがよいと考え、Googleマップは採用しませんでした。しかしながらGoogleマップの機能は素晴らしいものがあるので、別窓でGoogleマップを開けるようにしています。ご自身の判断でご利用ください。
また、地図上に経路(ルート)を描画した高度な表現にもチャレンジしたいと思います。以下は実験的な実装で、以前の記事で紹介したルートを地図上に描画したものです(やればできることはわかりましたが、自前システムのため設定が面倒くさいので、経路の描画はきっとあまりやらないでしょう…)。
(関連記事)プチ観光モデルコース(嵯峨・嵐山)|エクシブ京都八瀬離宮/サンメンバーズ京都嵯峨
こうした様々な地図の描画には、「Leaflet」というJavsScriptライブラリを使っています。これは地図情報を取り扱う研究目的でもよく利用されるもののようで、ネット上には学生向けの教材を多く見かけます。
(Leaflet公式)Leaflet - a JavaScript library for interactive maps
(参考情報)Leafletの使い方 | オープンソースWeb地図ライブラリ | 谷謙二研究室
もっとも、僕はサクッとWordPressプラグインを利用して、それを改良して使っているだけなんですが。
(WordPress公式)Leaflet Map – WordPress plugin | WordPress.org
画像配信のモダン化
最後は画像関係の話題です。
画像のレスポンシブ対応
ちょっと専門的すぎる話になりますが、画像のレスポンシブ対応を意識するようにしました。このブログは2005年から公開しているインターネット老人会的サイトなので、画像の取り扱いが歴史的経緯で少々混乱しています。そのため、ここ数年のWordPressで当たり前になったsrcset属性による複数画像を使った解像度最適化手法を利用できていませんでした。
この点を少し反省しまして、トップ面や各記事の最初の画像などの要所要所で、複数の解像度から画像ファイルをブラウザーが選べるようにしました。これによって多少の高速化が図られたと思います。
もう少し具体的に書くと、トップ面や記事の一番最初の大きめの画像については、横幅1200ピクセルのものと(5年以上前の古い記事では1024ピクセル)、横幅600ピクセルのものから、ブラウザーが自身の環境に応じて適切な方を選んで取得するようになりました。例えば、以下の画像がそうなっています。
ついでに言うと、メイン(最初)の写真以外は遅延読み込み(専門用語ではLazy Load)をするようにしたので、遅い回線でも快適に見られるようになっていると思います。
WebP形式の採用
別の記事でも書きましたが、試験的に写真の配信でWebP形式をメインフォーマットとして導入開始しました。従来より少ない容量で、よりきれいな画像が提供されるようになる見通しです。もし写真が見えないようなら、恐ろしくPC環境が古いということですので、ご了承ください。
SVG形式の採用
線画についてはSVG形式を標準としたいと考えています。ロゴもSVGで描き直して刷新しました。コロナ禍なのでコーヒーを紙コップにしてみました。クリックすると拡大します。
SVGなのでスケーラブル(数学的に記述しているので拡大してもきれい)になりました。ChromebookのInkscape(フリーなベクターグラフィックスソフト)で描いたのですが、このロゴファイルは13KBほどあります。イラレとかで普通に作ると40KBくらいになりそうです。XMLタグを工夫して9KBくらいになることは確認できているのですが、あまり切り詰めるとWebサーバーがSVGと見なしてくれません(調査中)。仕方なく一般的なヘッダを付加しています(圧縮大魔王としてはまだまだ研究の余地があります🤔)。
画像の拡大
上のロゴの拡大でも使いましたが、せっかくスケーラブルなSVGを本格導入したので、見やすくするためにいわゆるLightbox風の拡大表示をできるようにしました。しかしながらスマホの縦画面ではほとんど意味がありません…。これがベストとは思わないので、引き続き検討します。以下は実装例です。クリックすると拡大します。
スライドショー
最後にスライドショー(ギャラリー)です。レストランの紹介記事などで、お料理の写真を続けざまに載せることがあります。自分はファミレスも大好きだし、シティホテルを使うときにもちょっとひねった使い方(貧乏くさい使い方とも言う)をすることが多いです。
読者の方にはそんな細かな情報提供が不要(お呼びでない🥱)なケースもあると思い、写真が多くても記事の話題をさっと確認できるように、スライドショー形式の表現を試験的に導入しています。例えば、以下のように。実装例はデニーズでのお食事の例。
しかし、このスライドショーはプラグインなどではなく自前の実装なので、上で触れたsrcset対応がなされていません。そのうち実装し直して現状のものはボツにするつもりです。
細かい話ですがこのスライドショーのサムネイル部分のCSSはモダンな実装になっていて、ブラウザの幅を変えるとわかりますが、グリッドのカラムが増えたり減ったり、その場に応じて再計算していい感じに変化します。単にスマホ画面で縦積みになるだけではないので注目してください。
各種の機能追加をしていますが、JavaScriptを軽量化したりCSSのモダン化も同時に行っているので、むしろサイトの動作は軽快🚀になっているはずです。このページは機能てんこ盛りなので軽量とは言い難いですが、それでも世間一般の商業重量サイトとは比較にならないくらい軽快に動作すると思います。もちろん、安価🪙なレンタルサーバーですので限界はありますが。
以上、長々と細かすぎて伝わらない話で失礼しました。
ブログ開設17年目でまだまだ成長し続ける当サイトを今後ともどうぞよろしくお願いいたします!
写真が表示されなくなりました。ipadです
キーチンさん、ご報告をありがとうございます。
僕の把握している範囲では、2020年9月リリースのiOS 14以降(iPadOS 14以降)でwebpフォーマットがサポートされるようになっています。iOS 14は以下の機種(およびこれらより新しい機種)で利用可能です。
iPhone 11 Pro/11 Pro Max
iPhone 11
iPhone XS / XS Max
iPhone XR
iPhone X
iPhone 8 / 8 Plus
iPhone 7 / 7 Plus
iPhone 6s / 6s Plus
iPhone SE(第2世代)
iPhone SE(第1世代)
12.9インチiPad Pro(第1世代)
12.9インチiPad Pro(第2世代)
12.9インチiPad Pro(第3世代)
12.9インチiPad Pro(第4世代)
11インチiPad Pro(第1世代)
11インチiPad Pro(第2世代)
10.5インチiPad Pro
9.7インチiPad Pro
iPad Air(第3世代)
iPad Air 2
iPad(第7世代)
iPad(第6世代)
iPad(第5世代)
iPad mini(第5世代)
iPad mini 4
iPod touch(第7世代)