ishinao.net

今どきのAIコーディングの実際。amplessによるテーマカスタマイズの場合

【読むのに約 4 分】

前の記事で、ishinao.net を ampless CMS で復旧した話を書いた。そのあと自分で記事ページを開いてみたら、投稿日、タグ、パーマリンク、X共有などの、ブログでよくある機能が見当たらなかった。本文は読める。読めるのだけれど、ブログの記事ページとして見ると少し物足りない。あとから自分で見返したときにも、いつ書いたものなのか、どこから共有するのかがすぐに分からない。

そこで、そのままスマホから Codex に投げた。PCの前に座ってエディタを開き、テーマのファイルを探し、CSSを読み、ローカルで確認する、という作業はしていない。電車の中からスマホ越しに「投稿日、タグ、パーマリンクとかを足したい」「文末に置きたい」「TwitterじゃなくてXね」「URLは露出しなくていい」と言っていった。

最終的には、ampless のテーマファイルを直し、ローカル開発環境で表示を見て、スクリーンショットを撮り、ビルドを通し、main に push してリリースするところまで進んだ。この記事は、そのときに何をしたかのメモである。

だいたいこんな感じだった

変更前は、本文が終わったらそこで終わり、という見た目だった。投稿日や共有リンクの存在感はほとんどない。厳密な過去の本番キャプチャではないが、同じ実サイトを読み込んで今回追加した文末メタだけを非表示にすると、だいたいこの画面になる。

変更前の雰囲気。記事本文の末尾にメタ情報がない。

記事ページとして読めなくはない。ただ、ブログならこのくらいあって当然、という情報が足りない。投稿日、タグ、パーマリンク、共有リンク。個人サイトであっても、記事の文末にはそのくらい置いておきたい。

最初の指示はかなり雑だった

最初はこのくらいの指示だった。

個別記事ページにブログでよくある投稿日、タグ、パーマリンクとかの表示がない？ これはテーマのカスタマイズで追加できるかな？ あとXへの intent リンクとかも追加したい。記事名、サイト名、概要を投稿する感じ。

この時点では、わたし自身も完成形を決めていない。「ブログっぽいメタ情報がほしい」くらいの話である。

Codex はリポジトリを読み、ampless の投稿ページが themes/my-blog/pages/post.tsx にあることを見つけた。そこに投稿日、タグ、パーマリンク、X共有リンクを足した。

ただ、最初に出てきたものはタイトル下にメタ情報が並んでいた。実際に画面で見ると、本文に入る前から情報量が多い。これは違うな、と思ったので、追加でこう言った。

記事のメタ情報は文末に移動したい。また横並びで表示したい。あとTwitterじゃなくてXね。リンクは文字じゃなくてXアイコンだけあればいい。

さらに、X intent の文面も直した。

X intent のテキストをフォーマットして。

"タイトル" - ishinao.net

概要

パーマリンク

そのあと、実際にXの投稿画面でどう見えるかを考えて、URLの扱いも変えた。投稿テキストの先頭に ishinao.net が入ると、X側がトップページのOGPを拾ってしまう。なので最終的には、記事URLは url パラメータに渡し、本文側にはタイトルと概要だけを入れるようにした。

パーマリンクはURLを露出する必要はない。パーマリンクというテキストにリンクを貼っておくだけでいい。

このへんは、プログラミングというより普通にデザイン調整だ。出てきたものを見て、「ここは上じゃない」「文字リンクじゃなくてアイコンがいい」「URLは本文に出さない」と言って直していく。最初から完璧な仕様を書いたわけではない。

実際にこうなった

スマホ表示では、記事の文末に published、tags、Xアイコン、permalink が横並びで入るようになった。

変更後のスマホ表示。本文末尾に published、Xアイコン、permalink が並んでいる。

記事の冒頭はこんな感じ。本文そのものは前の記事で書いたものだが、テーマ側で足したメタ情報も出る。

実際の ishinao.net のスマホ表示。

デスクトップでは、文末の横並びにもう少し余裕がある。

実際の ishinao.net のデスクトップ表示。文末に記事メタが横並びで表示されている。

触ったのはテーマの1ファイルだけ

今回おもしろかったのは、CMS本体には手を入れていないところだ。触ったのは themes/my-blog/pages/post.tsx だけである。

コミットとしては、最初の追加と、そのあと文末へ移動した修正で2回に分かれた。

  • 309fea9 Add post metadata and share links
  • 6b84767 Move post metadata below article

そのあと、X intent のURL指定も直している。

  • b57940b Use URL parameter for X share links

最終的な差分の要点はこういう形になった。

+function buildXShareUrl(articleUrl: string, title: string, excerpt?: string | null) {
+  const text = [`"${title}"`, excerpt].filter(Boolean).join('\n\n') + '\n'
+  const params = new URLSearchParams({ url: articleUrl, text })
+  return `https://x.com/intent/tweet?${params.toString()}`
+}

記事URLは url パラメータに入れる。投稿本文はタイトルと概要を中心にする。X側に記事URLをURLとして渡せるので、OGPも記事ページのものを拾いやすい。

文末メタは、React の JSX と Tailwind のクラスを書き足しているだけだ。

+const tags = (post.tags ?? []).filter(Boolean)
+
+<footer className="my-blog-mono mt-12 flex flex-wrap items-center gap-x-6 gap-y-3 border-y border-white/10 py-4 text-[0.58rem] uppercase text-[#71807b]">
+  {post.publishedAt && <time dateTime={post.publishedAt}>...</time>}
+  {tags.length > 0 && <div>...</div>}
+  <a href={xShareUrl} aria-label="Xで共有">...</a>
+  <a href={articleUrl}>permalink</a>
+</footer>

こうして見ると、やっていること自体は普通である。ampless のテーマは Next.js / React のコードなので、AIエージェントがファイルを読み、差分を作り、ブラウザで確認する。最後にビルドして git push。特別な裏技ではない。

AIに丸投げした、という話ではない

一発で理想の形になったわけではない。最初はタイトル下に表示された。共有リンクも文字リンクだった。パーマリンクURLもそのまま見えていた。X intent のテキストも、一度作ったあとで直している。

ただ、その都度「文末に」「横並びに」「Xに」「アイコンだけに」「URLは出さず permalink だけに」と言えば、作業が進む。エディタでCSSを探し、クラス名を追い、ブラウザで確認して、またCSSに戻る。そういう細かい往復を、会話の形で進められるのが楽だった。

AIコーディングというと、大きな機能を一気に作らせる話になりがちだ。けれど個人サイトのテーマカスタマイズでは、もっと小さい調整が多い。表示して、気になるところを言う。直してもらう。もう一度見る。そのくらいの使い方のほうが、むしろ出番が多い気がする。

ampless で作業しやすかったところ

ampless では、テーマのコードは themes/<name>/ 以下に置く。今回触ったのも themes/my-blog/ という自分用テーマである。公式テーマやCMS本体ではなく、自分のサイト用テーマだけを直せばよい。

もうひとつ大きいのは、AIエージェント向けの作業メモがリポジトリに置かれていることだ。amplessで作ったサイトには、AGENTS.md や、そこからリンクされた THEMES.md がある。そこには、公式テーマを直接触らないこと、カスタマイズは themes/my-* を使うこと、テーマを直したらブラウザで表示確認すること、Markdownの見え方も確認すること、などが書かれている。

人間ならREADMEや過去の作業経験でなんとなく判断するところだが、AIエージェントは最初にリポジトリの手がかりを読む。どのファイルを見ればよいか。どこを触るとまずいか。テーマを直したあと何を確認するべきか。そういう情報が最初から置いてあると、作業が変な方向へ行きにくい。

この流れだと、本文はMCP経由で投稿し、見た目はテーマコードを直し、ローカル開発環境や実サイトでスクリーンショットを撮り、最後はgit pushでデプロイできる。実際に今回もそうした。

まとめ

今回の変更は小さい。記事の文末に、投稿日、タグ、パーマリンク、X共有アイコンを足しただけである。

それでも、スマホからCodexに指示するだけで、テーマ実装、表示確認、ビルド、mainへのpushまで進められた。途中で撮ったスクリーンショットも、実際の差分も、そのまま記事の材料になる。

個人サイトは今どき流行りではないかもしれない。でも、こうやって思いついたところを少しずつ直せるなら、完全にフルカスタムできる個人Webサイトはまだ面白い。投稿日をどこに置くか、共有リンクを文字にするかアイコンにするか、パーマリンクのURLを見せるか隠すか。そういう細かいところを、自分の好きな形にできるのがいいのだと思う。