読書をできるだけ壊さない読書メモアプリ「Cocoas（ココアス）」を作った
この記事は95%程度AIによって書かれています。
はじめに
本を読むのが、とにかく好きだ。
コーヒーを片手に、お気に入りの椅子に座って、ページをめくる。
その瞬間が、私にとって何よりも大切な時間。
でも、ずっと悩んでいたことがある。
読書中、心に響くセリフや新しい学びに出会ったとき、
「これは覚えておきたい」と思って、スマホでメモアプリを開く。
すると、なんだか現実に引き戻されてしまう。
さっきまでいた物語の世界から、急に日常に戻されたような、感覚になる。
既存の読書管理アプリも試してみた。
でも、SNS機能やら、読書チャレンジやら、レビュー投稿やら...。
正直、疲れてしまった。
僕はただ、自分の読書体験を静かに記録したいだけなのに。
ある日、ふと思った。
「ないなら、作ればいいんじゃないか？」
そうして生まれたのが、
読書をできるだけ壊さない読書メモアプリ「Cocoas（ココアス）」 だった。
作ったもの：Cocoas（ココアス）
温かみのあるココア色のデザインで、大切な本を管理
名前を決めるとき、読書の時間を包み込むような、温かいものにしたかった。冬の夜、本を読みながら飲むココアのような。そんなアプリになればいいなと思って、この名前にした。
どんなアプリ？
作りたかったのは、読書のメモは取れるけどできるだけ読書の邪魔をしないアプリ。
まるで、そばにそっといるかのような空気感のもの。
手書き風メモ機能
読んでいて「これ知らなかった。勉強になったな。」とか「あ、この台詞素敵だな。」って思った瞬間に、何も考えずとりあえず気軽にメモしておける。
できるだけ手書きの温かさを再現したかったから、リングノートをイメージしたUIで
本の世界から離れずに記録できるようにした。
AI要約機能
読み終わった後、散らばったメモたちをAIがそっとまとめてくれる。
自分の読書体験を、優しく整理してくれる相棒みたいな存在。
このおかげでメモは雑でOKになった。
ナレッジグラフ
これは少し実験的な機能。
自分が読んだ本たちが、どんな風につながっているのかを可視化してみた。
意外な発見があって、結構お気に入り。
美しい本棚
「これから楽しむ本」「今読んでいる本」「読み終えた本」「お気に入りの本」。
シンプルに、でも愛着を持って管理できるようにした。もちろん、ココア色で。
Vibe Coding
このアプリはVibe Codingで全て作った。
とりあえず壁打ち
「読書中に感じたことを即座にアウトプットしたいが、スマホを操作したくない」という課題
「読書が好きなすべての人」を対象にとChatGPTに伝えた。
読書中に感じたことをアウトプットしたいけど、
スマホをいじると読書の没入が損われる。このジレンマをどう解決するか。
壁打ちしていたら「雑にメモして後からAI要約」のアイデアが出た
こんな感じで、読書の最中に浮かんだことを、その場でメモしたい。
ChatGPTは、そんな私の思いを理解してくれた。
「読書ジャーナル」形式での読書ログのフォーマットも提案してくれた。
- タイムスタンプ付きのメモ
- ハイライト&コメント
- 関連付け（過去の読書メモとの関連を示して、読書の知識をつなげる）
これって、まさに今の「ナレッジグラフ」機能の原型だ。
要件決まったらあとはプロンプトを投げ続け
ChatGPTが作ったプロンプトをそのままCursorやClaudeCodeに投げた
初めはCursorだったがその後、Claude Codeを使うようになって、開発がさらに加速した。
ChatGPTとの壁打ちで生まれたアイデアを、そのまま伝えるだけで、コードになる。
まるで魔法のようだった。
技術の話もしようか
Deno Deployを使いたかった
正直に言うと、Denoを使ってみたかった。それだけ。
でも使ってみたら、Deno KVがすごく良かった。
// Deno KVのシンプルな使い方
const kv = await Deno.openKv();
// メモの保存
await kv.set(["memos", userId, memoId], {
bookId,
content,
createdAt: new Date().toISOString(),
});
// メモの取得
const memo = await kv.get(["memos", userId, memoId]);
データベースの設定とか、SQLを書くとか、そういうのは今回すっ飛ばした。
Key-Valueストアのシンプルさがぴったりだった。
「このキーに、この値を保存」「このキーの値を取得」。ただそれだけ。シンプルっていいな。
ココア色のUIを作る
モバイルアプリはReact Native (Expo)で、UIはTamaguiで作った。
// Tamaguiでココアテーマを定義
export const cocoaTheme = {
colors: {
cocoaMain: '#D2B48C', // メインのココア色
cocoaDark: '#8B6F47', // 濃いココア色
cocoaLight: '#F5E6D3', // 薄いココア色
cocoaBg: '#FDFBF8', // 背景色
cocoaText: '#5D4E37', // テキスト色
},
};
このココア色のテーマを作るのが、地味に楽しかった。
「もう少し茶色を濃くして...いや、ちょっと明るすぎるか」みたいな感じで、何度も色を調整した。
これまたAIの作ったアイコンを元に直し続けた。
結果として、温かくて優しい、自分でも気に入ったデザインになった。
Vibe Codingって、すごい
今回の開発で一番感じたのは、AIとの「Vibe Coding」の可能性。
「Vibe」っていうのは、ただの技術的なやり取りじゃなくて、一緒に「いい感じ」を作っていくプロセス。
- ChatGPTには、ひたすら相談した。「読書の邪魔をしないアプリってどう作る？」
- Claude Codeには、そのVibeをそのまま伝えた。「温かみのある手書き風のUIで」
一人で開発しているようで、一人じゃない。AIと一緒に「いい感じ」を探しながら作る。そんな不思議で楽しい体験だった。
おわりに
「読書をできるだけ邪魔しない読書メモアプリ」
そんなアプリを作った。
読書が好きで、でも読書の時間を大切にしたい人のために。そして、私自身のために。
もし、あなたも「本を読んでいるときは、ただその世界に没入したい」と思うタイプなら、
きっと気に入ってもらえると思う。
あなたの読書体験が、少しでも豊かになりますように。
Cocoas - 読書メモアプリ
読書好きな人と話すのが好きです。
もし使ってみたら、感想を聞かせてください。
それでは、よい読書タイムを。
Discussion