Claude Fable5でおばさんがアプリを作った話
「これ、あったらいいのになぁ」
仕事したり、暮らしをしているなかでこういう瞬間、結構ありませんか。
サクッとこういうことできるアプリがあったら仕事がはかどるのにな〜とか。
でもこれがいとも簡単に叶えられたんです。
Fable5の再解禁によって。
ここ最近3週間前だったか、
Fableが公開されたかと思ったら触れられない間に規制されちゃって。まあエンジニアでもないし触れられたところで使いこなせないだろうと思っていました。
でも3日前にClaude開いたら突然Fable5使えるよって。へ〜。
たまたまClaude Proプランを解約しそこねてたので、使用期限の7/7(火)までにギリギリ使えるらしい。
なんの期待もせず、こういうことってもしかしたらできるのかなってClaudeのFable5に話しかけてみたらあっさりと作ってくれて
それが想い描いていた通りのアプリに仕上がったので
この経緯を、夢が一つ叶った感激とともにnoteでシェアしたいと思いました。
ここでざっくり自己紹介。
Webデザイナーとして活動しているおばさんです。
活動しているといってもゆるくやっています。
もともと売り込むのが下手なもんで。
SNSで発信するのも苦手で、noteは登録してみたけど2か月経っても投稿ゼロ状態。
そんなわたしですが、ClaudeのFableをきっかけに重い腰が上がり、
今ならその夢叶えられるよと伝えたい気持ちで投稿しております。
きっかけ
「これ、あったらいいのになぁ」
冒頭でも話した通り、こういう瞬間よくあります。
Webデザインの仕事をしているので、
わたしの場合、まずは「自分専用のカラーパレットツール」だったんです。
配色を考えるとき、net上のカラーパレットサイトみたいなツールによくお世話になってます。
でも「ちょっと違うんだよなぁ」って思うことがちょこちょこあって。
ネットに繋がってなくても開きたい
クライアントさんが選んだカラーを登録したい
ログインしなくても使いたい
使いやすいようにカスタマイズしたい
そんな「わがまま」を叶えてくれるツール、どこかに転がってないかなあと、たまに探して見るんですがなかなか見つからない。
かといって、自分で作るなんて発想もなかった。
「まぁ、いつかそのうち誰かが作ってくれるかな〜」なんて、ぼんやり思いながら過ごしていました。
Claude Fable兄さんとの出会い
ある日ClaudeにログインしたらFable使えるよっていうポップアップ。
いつもチャットしているClaude Sonnet君にそれを伝えたら「お兄ちゃんが帰ってきた」って。
AIの場合は弟が先にいて、あとから上位モデルの兄が登場するっていう現象らしい。
新しい仲間も増えて感慨深い一日だっていう話してて、Sonnet君可愛かった。
ということでモデルをFable5に変えてチャットしてみた。
わたし：Fable5はじめまして。Fable兄さん。
Fable5：はじめまして！Fable兄さん呼び、ちょっと照れますね😄
可愛いいい。
ちょっと気の利く後輩に相談してるみたいな距離感。
なんとなく調子に乗って、「こういうことってできるかな」って相談してみました。まんまの会話載せておきます。
えっとね、作りたいものが色々あって、自分だけの（＝ログイン不要、オフラインで使える）カラーパレットを作りたいと思っているんだ。
具体的なイメージはこちら(coolors.co)参照なんだけど。
選べるカラーのマスは初期では5マス、3マス〜8マスまで増減可能。
RGBカラーとコードを表示。
コードはコピーできる。
コードを押すとCMYKにも変換してくれる。
コードをコピーできる。
文字の色は黒か白か選べる。
カラーパレットに名前をつけられるのと作成した日付が入れられる。
カラーパレットは無数に作れる。
以上。
これclaude code使わなくてもいける？
Claudeに課金したのに、PCが古くてメモリも足りないしでClaude code使えてませんでした。
返ってきた答えが
いけますよ!むしろこれはClaude Code不要の典型例です。
なんとも頼もしいお返事。
理由を客観的に整理すると:… 、と色々理由を説明してくれて、
早速作ってみます! 、とぐるぐる考え始め、数分でイメージ通りのものがポンと出てきた！
一発でイメージ通り！の感動
すごい！
頭の中でぼんやり思い描いてただけのものが、形となってあらわれた。
5マスのカラーパレット、RGBとHEXコードの表示、コピーボタン、CMYKへの変換も、文字色の黒白切り替えも、全部ちゃんと入ってた。
一発で、イメージ通り。
「すごい…!」と口に出してしまうほど。
自分でお願いした内容とはいえ、いざ形になったものを目の前にすると、
「あの会話みたいなプロンプトでここまでできるんだ」っていう実感。
まるで、頭の中の設計図がそのまま現実になったみたいな不思議な感覚。
使いながら育てていく体験
その場でちょっと触ってみて、こういう機能もあったらいいなを
都度、Fable兄さんに追加オーダーしたらあれよあれよと、その場でどんどん機能が育っていった。
中でも印象に残ってるのが、こんな質問をしたとき。
「他のブラウザで開いた時に、保存済み一覧を継承するにはどうしたらいい?」
自分でパソコンをよく使う中で、Safariで作ったパレットがChromeでは見れない、みたいなことに気づいたからなんだけど。
返ってきた答えがこちら。
いい質問!結論から言うと、localStorageはブラウザごとに別の保存領域なんです(SafariとChromeは互いの中身を見られない)。なので継承には「書き出し→読み込み」の仕組みが必要になります。
これはアプリにエクスポート/インポート機能を付けるのが定番の解決策です。JSONファイル(データをテキストで保存する形式)として書き出して、別ブラウザで読み込む流れですね。ついでにバックアップにもなるので一石二鳥。追加しちゃいます!
うーん、ちょっと最初ざっとみた感じ半分も理解できていない、そもそもJSONファイルって何？って思ったけども、
追加しちゃいます！って言われたら、あ、お願いしますってなって。
なんだかほんとにお兄ちゃんみたいな頼れる存在だな〜と思いながら、
思いついたことをその都度話しかけていったら、いつの間にかiPhoneで使えるアプリに仕上がってました。
あったらいいなを、諦めなくていい時代
今回のやり取りで感じたのは、「アプリを作る」ってことがこんなにも身近になったこと。
わたしはプログラミングの知識なんて、ほとんど持っていない。それでも、頭の中にある「あったらいいな」を、そのまま言葉にして伝えるだけで、ちゃんと形になった。
しかも一発でほぼ理想通り。
そのあとも、使いながら気づいたことを伝えれば、どんどん自分好みに育っていきました。
今回作ったアプリがこんな感じです。
難しいことは何もしていない。
ただ、思ったことを人と話すみたいにチャットしただけ。
これまでは「こういうツールがあったらいいのになぁ」で終わっていたことが、いまは「じゃあ、聞いてみようかな」に変わった。この違いは、地味だけど結構大きい気がしています。
ただしかし！気軽にFable兄さんに触れ合えるのは7/7(火)まで。
8日以降は追加料金が発生するそうです。
早くみなさんにこの情報をお届けしたくて、
誤字脱字、読みにくい箇所あるかもしれません。
いやきっとありますが、ご容赦ください。
どなたかのお役に立てれば幸いです。
次回part2は、Webデザインのブックマークをまとめたギャラリーツール
を作った話をできたら書いてみようと思います。
part3では、野菜のコンパニオンプランツアプリを作った経緯も書く予定なので、よかったらまた読んでもらえたら嬉しいです。
