ソース解説
このサイトのコードを、実際のファイルを開きながら説明する連載です。全体の地図、目次の組み立て、同意の仕組み、取得層、RSSとサイトマップ、スクロールの扱い、検索の正規化、関連記事の選び方、本文の加工、明暗の切り替えまで。
全10回のうち、5本を公開しています。残り5本は順次公開します。
技術系ソース解説(1) 全体の地図と、境目の引き方
このサイトの作りについては何度か書きましたが、中のコードそのものには触れていませんでした。 ここから何本かに分けて、実際のファイルを開きながら説明していきます。まずは全体の地図と、読むために知っておいたほうがいい前提から […]
Next.jsReactTypeScriptソース解説
技術系ソース解説(2) 目次は本文から作る
本文が文字列として届くこと、そこから見出しを拾う方法、既にあるidを勝手に変えてはいけない理由、そして読んでいる位置をどう追いかけているかです。
Next.jsReactUI設計ソース解説
技術系ソース解説(3) 旗を折るのではなく、読み込まない
クッキー同意のバナーは、置くこと自体は難しくありません。難しいのは、「同意していない人には何も送っていない」と自分で言い切れる形にすることでした。 今回はその部分のコードを読んでいきます。保存する形、版番号を持たせた理由 […]
GTMアクセス解析セキュリティソース解説
技術系ソース解説(4) 速くしたら、デプロイが止まった
記事のデータは、共用サーバー上のWordPressから取ってきています。この部分は2回作り直しました。 最初は「常に最新を取る」形。速度の問題が出て、キャッシュする形へ。すると今度は、デプロイが止まるようになりました。 […]
Next.jsWPGraphQLキャッシュソース解説
技術系ソース解説(5) 文字列を自分で組み立てる場所
このサイトで、HTMLを文字列として自分で組み立てている場所は2つあります。RSSフィードとサイトマップです。 画面に出るページは、部品を組み合わせれば勝手に出来上がります。この2つは違います。1行ずつ並べて、最後に文字 […]
Next.jsSEOソース解説トラブルシューティング