はじめに
AIを使った逆引き系のサービスを作れないかなと考えていまして、目標から過程(そこに到達するまでのステップ)を提案するようなWebアプリを作ってみました。
ロードマップや学習教材などを作ってくれるサービスは既にいくつかあるので、とにかくシンプルに、ライトに使える感じにしています。
作ったもの
The Nine Steps
ホーム画面に追加することでアプリのようにお使いいただけます。
※ホーム画面への追加の仕方
https://support.bccks.jp/faq/pwa_2020/
※ReflexでPWA化する方法
https://qiita.com/papasim824/items/1e3bfd3984b7af155ade
目標、やりたいこと等を入れてボタンを押すと
9つのステップをAIが提案してくれます。(すでに生成されているテーマは再利用されます。)
各ステップを押すと詳細が表示され
キーワードからGoogle検索、Amazon書籍検索、Youtube検索を行うことができます。
地味にそのままシェアもできます。
全く馴染みのないことについて調べてみると意外と面白かったりします。(面白いのが出たら是非シェアしてください。)
いくつかサンプル
あくまでAIによる自動生成ですので、内容の正確性については保証できません。
技術まわりの話
フレームワーク
Reflex
PythonだけでWebアプリが作れる系のフレームワークです。
裏ではNext.js＋FastAPIの構成に変換されています。
UIデザインにはChakra-UI、Radix-UI、Tailwind CSSが採用されており、通常のCSSパラメータも指定可能です。
また、npmで公開されている任意のReactコンポーネントを取り込むことができるのも便利です。
データベース
Supabase
いわゆる BaaS (Backend As A Service) ですが、今回は純粋にRDBMSのみを利用しています。WebUIが抜群に使いやすいです。
※ReflexではDB情報を設定することでalembicを使ったマイグレーションや、ORMとしてSQLAlchemyが利用可能です。
以下の記事がわかりやすいです。
テキスト生成
OpenAI API
現時点で最新の
gpt-4o-2024-08-06を利用しています。
ホスティング
Reflex Hosting Service
Reflexが公式でサポートしているホスティングサービスです。
CLIからの操作になりますが、reflex initでプロジェクトを作っていれば、reflex deployだけで完了できます。（環境変数の設定など若干めんどくさいですが、shellを作っておけばそこまで面倒ではないかなという印象です。VercelやFly.ioのようにリッチなWebUIはないので好みがわかれるかも。）
※Next.jsとFastAPIとしてビルドされるので、それぞれコンテナに詰めてデプロイすればどこでもホスティングはできるようです。
モックアップ画像
技術的な内容ではないんですが、サービスのモックアップ画像（PCとiPhoneにサービス画面をはめ込んでいる画像）は以下で作成しています。
おわりに
思いつきからリリースまで3日ほどでできてしまうReflexの凄さを感じました。
ただ、公式のホスティングサービスには5個までしか公開できないようなのでご注意ください。