momochitama

momochitama.com

自分のための創作と、AIについて

AI でブログを作った

Cursor の Plan Mode と Opus 4.5 を使用。

後述するプロンプトで指示して、いくつかの細かい質疑応答、Vercel と Supabase のちょっとしたセットアップ、あとはセキュリティ面とスタイリング面をいくつか指摘するだけでほぼ完了。

管理画面がマジでシンプルで、かなり気に入っている。

管理画面

プロンプト

はじめに

これから「私が投稿、公開するためだけの超シンプルなマイクロブログ」をこのプロジェクトで作っていきましょう。

ツールとしてのコンセプトは「とにかく投稿に一切の手間がかからず、瞬時に公開できること」です。少しでも投稿が面倒になると絶対すぐに飽きます。このブログは読んでもらう以上に「自分のために続ける」ことが大事です。

スマホから管理画面をパッと開いて、殴り書きやつぶやきと同等のスピード感で投稿できること、それでいてSNSと異なり繋がりを必要としないことが一番大事です。

さて、現時点で考えている要件を説明します。一緒に設計をブラッシュアップしていきましょう。

前提

  • Next.js で作成し、Vercel でデプロイする
  • 認証、記事の保存、画像ストレージとして supabase を使う

という技術要件をなんとなく立てていますが、全部「金と手間がかからなければなんでもいい」という気持ちでの仮決めなので「この機能要件ならもっとミニマルで楽なやつあるよ」という提案大歓迎です。強いて言えばReactを使い慣れてるので、そこは別にReact以外を選ぶ理由はないと思っているくらいです。

スタイリング

tailwindcssとかで、シンプルなスマホファーストの見た目にしてくれればいいです(PCビューは、無難な最大幅を決めてスマホビューを単に横に広げるとかで十分です)。

見た目をかわいくしたくなったらそれは私が勝手にやるので、あなたは

  • 無彩色で
  • ミニマルで余計な装飾を一切廃した
  • クセがなく一般的で、読みやすい
  • スマホ/PC環境で崩れない
  • あとあと私がスタイリングするうえで面倒にならない

スタイリングだけをしてください。ただし、セマンティックなマークアップだけはちゃんとやってください。

view

投稿一覧画面と投稿画面の2ページだけです。

投稿画面には認証が必要で、supabaseの管理画面からあらかじめ直接登録した管理者(私)によるログインだけができます(新規登録は一切できなくていいです、というかできてはいけません)。

投稿一覧画面

私以外のユーザーはここしか見れません。

ヘッダーにはタイトル(momochitama.com)と、表示の新しい順、古い順を切り替えるトグルがついています。デフォルトは新しい順です。

適度な件数ごとに(プラクティスに従ってください)投稿が読み込まれる無限スクロールビューとしたいです。

記事単体のページは機能上は別にいらないのですが、SEO的にはあったほうがいいですか?

投稿ひとつひとつは先頭に作成日(これが一般的なブログにおけるタイトルの代わりです)、続いてmarkdownパースされた本文が表示されます。(ここはブログよりツイッターのイメージで、このページをスクロールするだけでサイトに存在する全文が読めることが望ましいです。折りたたみ等も必要ありません)。

投稿画面

認証が必要なページです。でっかいtextareaが1つと画像アップロードボタン、保存ボタンだけがあります。

画像の埋め込みをとにかく楽にしたいです。 textareaに画像をドラッグアンドドロップした場合、もしくは画像アップロードボタンを押した場合は、

  • 画像をストレージにアップロードする
  • さっきまでテキストのカーソルがあったところに、アップロードされた画像を参照するmarkdown記法での埋め込みが入る

とかがいいと思います(githubのコメントエディターと同じです)。

投稿画面にはmarkdownエディタやプレビュー機能は一切いりません。markdown記法のプレーンテキストをそのままぶち込める、で十分です。

投稿画面にアクセスしたときにログインしてない場合はログインを要求する必要がありますが、どうやるかは考えていませんし、こだわりもありません。ログイン画面のviewを一枚置くとか、マジで何でもいいです。

管理者(私)の操作が面倒にならない範囲で一番ミニマルな実装にしてください。

記事データ

タイトル不要で、必要ならidと、プレーンテキストで保存される本文、createdAtだけを持ちます。

記事の編集(更新)や削除はsupabase管理画面を触らない限りは一切できなくてよく、管理画面からは新規追加だけができます。

画像ストレージ

画像のアップロードと記事への埋め込み機能は必須なので、これは必要です。

SEO/AIO

頑張ってハックしたりするつもりはないですが、一応気にしています。だからSSRは必要なのかな?とは思ってます(最近あんまそのへん意識することないので認識が古いかも)

お行儀のよい的確なマークアップがされていること、設定しておくべき内容がちゃんと設定されていること、その他一般的なプラクティスが達成できていること。

おわりに

以上です。要件に記載されてない、やったほうが便利になることはどしどし提案してください。ただし、頼んでいないことをやるときは絶対に事前に聞いてください。

足りない情報は聞いてください。