ブログ
依存の中の依存
脆弱性の警告が29件。数字だけ見ると手のつけようがないが、分類すると実質3つの問題だった。自動で出てくる更新PRの危険度の見分け方と、直接の依存を上げたのに警告が消えなかった理由。
追従する目次と、画面の取り合い
PCで右側に追従させていた目次を、スマホでは上部に貼り付けた。ところが貼り付くものは画面を占め続けるため、本文を読む場所が足りなくなる。情報を消さずに縦を横へ並べ替えた話と、「飛んだ先がバーの裏に隠れる」という副作用への対処。
GTMの設定は誰でも読める
コンテナIDをURLに打ち込むと、どんなタグがどんな条件で発火するかが誰でも読める。これは不具合ではなく、そうでなければ動かない仕組み。ブラウザで動くものに秘密は持てないという前提と、そこから導かれる「書いてはいけないもの」の話。
推測させるのをやめる
sitemap.xml・robots.txt・構造化データ。バラバラの施策に見えて、やっていることは同じだった。これまで相手に推測させていたことを、こちらから明示的に伝える。そして実装中に見つけた、一覧用のクエリを流用すると21本目から静かに漏れ始めるという落とし穴。
所有権をどう証明するか
Search Consoleが提示する5つの確認方法は、それぞれ証明している中身が違う。ファイルやHTMLタグは「サイトの中身に手が届く」ことしか示さないが、DNSのTXTレコードだけは「ドメインそのものを支配している」ことを示す。そして実作業では、正しい値を書いたのに反映されなかった。参照されていない管理画面に書いていたためで、「保存できた」は「効いている」ではないという話。
wwwのあるなしで、別のサイトになる
kisaku.site と www.kisaku.site はどちらを開いても同じ画面が出る。しかし機械から見ると別のサイトになる。apexドメインにCNAMEを置けない理由と、Search Console・GA4・OGPの3か所すべてで同じホスト名に揃えなければならなかった話。
「読み終えた」をどう数えるか
GA4にはスクロール距離の計測が最初からある。それでも使わなかった。スクロール率が測っているのは「画面が下まで移動したか」であって、「読み終えたか」ではないから。サイトにすでにある読了状態を使って、未読から読了に変わった瞬間だけを送るまでの記録。
「来なかった人」を見るために
アクセス解析は来た人しか教えてくれない。検索結果に出たのに押されなかった、そもそも出ていない——それを見るのがSearch Console。プロパティ種別と所有権の確認方法を、5つの選択肢から選ぶまでの判断。
ページを10枚見ても「1」と数えられる問題
Next.jsはページを読み込み直さない。表示は速いが、計測から見ると「ずっと同じページを見ている」ようにしか映らない。Googleタグマネージャーを挟んでページ内遷移を拾い、さらに初回だけ二重に数えられる問題を止めるまで。
GA4を入れる前に決めたこと
サイトを公開してから一度も、誰が何を見ているかを確認していなかった。Googleアナリティクス4を導入するにあたって、手順よりも先に決めたことがある。何を見るか、そして何を追わないか。プロパティ設計と測定IDまでの記録。
速くしたら、壊れた — 表示1.7秒を0.03秒にするまでと、その代償
サイトの表示が遅い、という話から始まった作業です。結果として最初の1バイトが返るまでの時間は約1.7秒から0.03秒になりました。50倍以上です。 ただしこの記事の本題は、その数字ではありません。速くしたことで、別の場所 […]
自分のブログに記事が投稿できない — WAFの誤検知と、渡し方を変える解決
自分のブログに、自分で書いた記事が投稿できなくなりました。 原因はサーバーのWAF（Webアプリケーションファイアウォール）でした。記事の本文に含まれるコードが、攻撃と誤検知されて遮断されていたのです。回避を4種類試して […]
読む体験をつくる — 目次の自動生成から読了状態の保存まで
記事を5本公開したあと、読む側の体験を作り込みました。目次の自動生成、追従する目次、読了状況の表示と保存、スマートフォンのメニュー、読了目安の時間。あわせて、トップページの見た目も見直しています。 この記事は、その実装記 […]
書いた記事をWordPressに届けるまで — CORS・nonce・CSSの壁
「作った」と「届いた」は違う ここまでの作業記録を記事にまとめ、HTMLファイルとして書き出しました。CSSも当て、ブラウザで開けばきちんと読める状態になっていました。私はそこで「記事の作成は完了した」と考えていました。 […]
公開したあとの話 — 脆弱性検知と監視の仕組みを作る
ポートフォリオサイトを本番公開したあと、運用のための仕組みを整えました。脆弱性の検知、稼働の監視、依存パッケージの更新です。 公開までの記事は「動かすまで」の話でしたが、今回は「動き続けさせる」ための話になります。地味な […]
本番公開でつまずいた11のこと — 仕組みから解説
前回、ローカルで作ったサイトを本番公開するまでの記録を書きました。今回はその中で出てきた仕組みを、初めて触る人向けに整理して解説します。 作業記録だけだと「こう直した」で終わってしまい、次に似た場面で応用が効きません。な […]
ローカルのサイトを本番公開するまでにハマった話
ローカルのパソコンで作ったWebサイトを、世界中から見られる状態にする——いわゆる「本番公開」の作業をしました。手順書に沿えば1時間で終わるはずが、実際には丸一日かかっています。今回はその全過程を、途中で出てくる用語をひ […]
なぜこの構成にしたのか — ヘッドレスWordPress + Next.js の技術選定
ポートフォリオサイトを、素のHTMLで書かれた静的サイトから「ヘッドレスWordPress + Next.js」という構成に作り直しました。前回までの記事では、実際にやった作業と、そこでつまずいた内容を書いてきました。 […]
ポートフォリオサイトをヘッドレスWordPress+Next.jsで作り直した話 (4) デザイン調整・ブログ機能追加編
シリーズ最終回です。データがきちんと表示できるようになった後、「もとのサイトとだいぶ印象が違う」というフィードバックをもとに行ったデザイン調整と、このブログ機能を追加した経緯についてまとめます。 もとのサイトの雰囲気に近 […]
ポートフォリオサイトをヘッドレスWordPress+Next.jsで作り直した話 (3) Next.js実装編
シリーズ3回目です。今回はNext.js側の実装と、そのなかで実際に踏んだ不具合について書きます。 データ取得の流れ WordPress側にWPGraphQLでAPIを用意したので、Next.js側はそれを叩くだけ…なの […]
ポートフォリオサイトをヘッドレスWordPress+Next.jsで作り直した話 (2) WordPress構築編
「サイト制作の流れ」シリーズ2回目です。前回は全体の設計方針を書いたので、今回は実際にWordPress側をどう構築したかをまとめます。 Docker Composeでローカル環境を用意する まず、ローカル開発用にDoc […]
ポートフォリオサイトをヘッドレスWordPress+Next.jsで作り直した話 (1) 企画・設計編
このブログを含む「KiSAKU Portfolio」を、静的なHTMLサイトから ヘッドレスWordPress + Next.js という構成に作り直しました。せっかくなので、企画から実装、デザイン調整までの流れを何回か […]
日本語スラッグの投稿がNext.jsで404になった話
WordPressの投稿スラッグを日本語のままにしていたら、Next.jsの動的ルートで404になった原因と対処法
ポートフォリオサイトをヘッドレスWordPress + Next.jsでリニューアルしました
サイトをヘッドレスWordPress + Next.js構成に作り替えた話