amplessで、コードを書くようにブログを書く
【読むのに約 4 分】
2本目の記事を書いたあとで、これはもう一段ネタになるな、と思った。
2本目は、ampless のテーマをAIコーディングで直した話である。個別記事ページに投稿日、タグ、パーマリンク、X共有アイコンを足した。スマホから指示して、テーマファイルを直し、表示を確認し、ビルドして、main に push した。
ただ、その記事自体も Codex 上で作っていた。
構成を考える。実際の ishinao.net を開く。スクリーンショットを撮る。変更前の画面が残っていなかったので、同じページを読み込んで文末メタだけを隠し、だいたい変更前の見た目を再現する。PNGをWebPに変換する。MCPでメディアをアップロードする。テーマ差分を確認して、記事の中に入れる。本文を投稿する。あとから不要になったPNGを探して削除する。
こうして並べると、ブログ記事を書く作業というより、かなり普通にサイト制作の作業である。
文章だけを書いていたわけではない
ブログを書くというと、管理画面のテキストエリアに本文を打ち込むところを想像しやすい。
もちろん本文は書く。タイトルも決める。概要も直す。タグも付ける。だが、実際に記事として公開するまでには、文章以外の作業がけっこうある。
今回の2本目の記事では、まずこういう話をした。
今回のテーマカスタマイズ指示から実装、デプロイ、修正、デプロイはスマホ越しのCodexの指示で完結した。これを完全にAIコーディングでテーマカスタマイズができるという例として2番目の記事にまとめたい。実際のCodex上のやり取りや画面キャプチャーなども組み合わせて。構成を考えてみて。
この時点では、本文を書く前の相談である。何を見せれば話が通じるか。実際のやり取りをどこまで出すか。画面キャプチャーを入れるか。テーマ差分を入れるか。
普通のチャットUIでも、構成案くらいは出せると思う。そこまでは大差ない。
違いが出るのは、そのあとだ。
画面を見に行くところから任せる
記事にスクリーンショットを入れたい、となると、ふつうは人間がブラウザを開く。ページを表示する。スマホ幅にする。スクリーンショットを撮る。ファイル名を整える。画像をアップロードする。
今回はそのへんも、AIコーディングエージェント側で進めた。
実際の ishinao.net にアクセスして、変更後の画面を撮る。ローカル開発環境を起動して、スマホ幅とデスクトップ幅で確認する。Playwright MCPのようなブラウザ操作ツールを使えば、ページを開く、画面サイズを変える、スクリーンショットを撮る、というところまでエージェントに頼める。
2本目の記事で少し困ったのは、変更前の画面が残っていなかったことだ。途中のスクリーンショットはある。でも、本当に変更前の本番画面は撮っていない。
そこで、こう聞いた。
画面キャプチャー、途中のものはあるけど事前のものはないはず。適当に加工して再現できる？
最終的には、実際のページを読み込んで、今回追加した文末メタだけをDOM上で隠し、変更前っぽい画面を撮った。もちろん、それは過去の本番そのものではない。だから記事中でも「厳密な過去の本番キャプチャではない」「だいたいこの見た目になる」と書いた。
こういう事実の扱いは、人間が判断するところだと思う。AIに作業を頼めるからといって、再現画像を本物の過去キャプチャのように書くのは違う。
画像を作って、アップロードして、片づける
スクリーンショットは最初PNGでできる。だが、ブログに載せるには少し重い。
そこで、使う画像はWebPに変換した。変更前風のスマホ表示、変更後のスマホ表示、変更後のデスクトップ表示。そういう画像を用意し、MCPの upload_media でamplessにアップロードする。返ってきたURLを本文のMarkdownに貼る。
ここで一度、PNGもアップロードしてしまった。あとからWebPだけでよいと分かったので、PNGは不要になる。
そのあと、メディア操作用のMCPツールを増やして、search_media と delete_media で使っていないPNGを探して削除した。
ブログを書く作業の中に、画像形式の判断、メディアアップロード、不要ファイル削除が混ざっている。手でやると地味に面倒なところだ。記事本文だけなら数分でも、周辺の作業で手が止まることはよくある。
diffもそのまま材料になる
2本目の記事には、実際のテーマ差分も入れた。
実際のテーマ差分diffとかもいれたほうがテーマカスタマイズの実態がわかっていいかもね
これは、コーディングエージェントで作業していると扱いやすい。
テーマファイルは themes/my-blog/pages/post.tsx だった。X intent のURLを作る関数、文末メタを表示する footer、タグを並べる部分。そういう差分を確認し、記事に載せるために短く切り出す。
「AIでテーマを直した」とだけ書くと、どう直したのかが分からない。実際のdiffを少し出すと、amplessのテーマカスタマイズが普通のReactコンポーネント編集として行われていることが見える。
ここは、amplessでやりたかったことにも近い。テーマはコードで触れる。記事本文はCMSで管理する。その両方を、AIエージェントから同じ作業の流れで扱える。
今回はCodexだったが、Codexだけの話ではない
今回はCodexを使った。普段はClaude Codeを使うことも多い。今回Codexにしたのは、たまたまClaude Code側がレートリミットに当たっていたからである。
人によっては、AntigravityやCursorなどを使っているかもしれない。ツール名は何でもいい、というと少し雑だが、ここで言いたいのはCodexだけが特別という話ではない。
コードベースを読める。ローカル環境を起動できる。ブラウザを操作できる。MCP経由でCMSに記事やメディアを投稿できる。そういう作業場所としてAIエージェントを使うと、プログラミング以外の作業もかなり同じ土俵に乗る。
スマホ越しに指示できるのも、その一部だ。これはCodexだけの特徴ではないし、Claude Codeでもやり方はある。ただ、今回のように外出中に文章を読み返して、タイトルを直す、概要を長くする、タグを変える、不要なメディアを消す、といった細かい手入れを投げるには、Codexのリモート操作はやりやすかった。
チャットではなく、作業場所として使う
今回やったことをざっと並べると、こうなる。
- 記事の構成を考える
- 実際のサイトを開く
- ローカル開発環境を起動する
- スマホ幅とデスクトップ幅でスクリーンショットを撮る
- 変更前っぽい画面を再現する
- PNGをWebPに変換する
- MCPで画像をアップロードする
- テーマのgit diffを確認する
- MCPで記事を作成、更新する
- 公開ページを確認する
- 不要なメディアを検索して削除する
こうして見ると、LLMに文章を書かせた、というだけではない。ブログ記事を公開するために必要な細かい作業を、同じ場所で進めている。
もちろん、全部をAIに任せっぱなしにしたわけではない。変更前キャプチャーの扱い、文章の言い回し、タイトル、タグ、X intent の文面。そういうところは、画面を見たり本文を読んだりしながら人間が判断している。
ただ、手を動かす場所はかなり減る。ブラウザ、画像変換、CMS、git、記事本文。あちこちを行き来する代わりに、エージェントに「次はこれ」と渡していける。
ブログを書くことも、サイトを作ることの一部になる
ブログを書くことは、文章を書くことだけではない。
何を書くかを決める。材料を集める。画面を撮る。画像を整える。リンクを確認する。公開する。表示を見て直す。不要なファイルを片づける。
それらは全部、サイトを作る作業の一部である。
amplessなら、テーマカスタマイズやプラグイン開発のようなコード作業だけでなく、記事作成やメディア管理もMCP経由で扱える。そこにAIコーディングエージェントをつなぐと、コードを書く作業とブログを書く作業の距離がかなり近くなる。
コードを書くようにブログを書く。
少し大げさな言い方かもしれないが、今回やっていたことはだいたいそういうことだった。