もっと魅力的なプロダクトにしたい！
前回の記事で「Notion一言日記を言語解析するアプリ」について紹介しました。
こちらのアプリ、解析したいときに自分でVSCodeを立ち上げて設定・解析実行のコマンドを叩いていたのですが、少し不便に感じていました。
そこで、ブラウザ上のアプリで完結させたら便利なのではないか、と思い、開発を次のステップへ進めることにしました。
今回も技術の宝箱です。技術を総結集してプロダクトを作る時のワクワク感に勝るものはありませんね。
それではやっていきましょう。
1. システム構成
自前のサーバーを用意するのは大変 (ですしもはやそんな時代ではない)ので、Renderというホスティングサービスを利用することにしました。
他にもHerokuやVercelといったサービスもあるようですが、Herokuは近年有料サービスに移行したこと、VercelはNode.js向けだということでRenderを選びました。
2. Renderでのホスティング
RenderはGitHubのコードをベースにWebページとして公開してくれるホスティングサービスです。
環境変数はRender側が保持してくれるので安心です。
ちなみに、無料版だとしばらくアプリを立ち上げていないとサーバーが休眠状態に入ります。再度アクセスすればすぐに立ち上がるのですが、立ち上げまで30秒、長い時で3分くらいかかるようです。
3. StreamlitでのWebアプリ化
PythonアプリをWebブラウザで提供するには、Streamlitというフレームワークを使いました。簡単なコードで高度なUIを作ることができるので、Python版 Reactといったところでしょうか。
注) ReactはJavaScriptのWebアプリケーション用ライブラリです
4. Supabaseを使ってデータをDBで管理
このアプリケーションでは、個人のストップワードなど、GitHub上のローカルなリポジトリに保存しておきたくないデータがあります。こういったデータは別途データベース (DB)に保存しておくのが鉄則で、今回はSupabaseというクラウドサービスを用いました。
総括
完成したプロダクトがこちら。
今でこそ覚えたので楽々できるようになりましたが、やっぱり初めて画面が表示された時は嬉しいです。Streamlitの虹色っぽいUI良いですね。
登録していないIDとパスワードだとログインできないようになっている
コマンドラインでやっていた機能をそのままブラウザ上へ映した感じになっている
普段はバックエンドのシステム開発をしているので、Streamlitを活かしたフロントエンド開発やSupabaseでのDB管理といった分野になじみがなく、少し苦労しました。
特にRenderが難しかったです。一度デプロイするとすぐには手元のコードを弄れないので、何度もコードを書き直しては再ビルド...を繰り返していました。
Renderを使えるようになったので、これでフロントエンドのアプリを色々作れそうですね。夢が広がります。
今度はフロントエンド要素を活かしたゲームに挑戦してみたいです。