Rails × PWA で作る、 自分専用のスマホアプリ Wakaterb#7

Wakate.rb #7での登壇です！
https://wakate-rb.connpass.com/

Transcript

1. WAKATE.RB / LIGHTNING TALK Rails × PWA で作る、 自分専用のスマホアプリ しかも、AI エージェントを組み込んでみた たてけん GMOペパボ・新卒1年目 01 / 18
2. 自己紹介 たてけん GMOペパボ・新卒1年目 @tateken_create zenn.dev/tateken 所属 GMOペパボ 技術部 ／ エンジニア （新卒1年目） 出身 愛知県 Ruby／Web 歴 Ruby は Rails チュートリアルを一周 （5日間）、Web は研修で絶賛勉強中 趣味 旅行 / お笑い / アニメ / イラスト 興味のあること AI エージェントを使った開発／マジック／DJ 「どすこい」さんに誘われて来ました　初めての外部コミュニティで緊張しています 02 / 18
3. なぜ作ったか 何を発表するか、とても悩んだ → → 同期が、打刻防止のために「PWA」でスマホアプリのような Web サービスを作っていた これなら、色々できそう！ 03 / 18
4. PWA とは Web サイトを“アプリ”に格上げする Progressive Web App。HTTPS ＋ manifest があれば成立し、専用言語もストアもいらない ホーム画面に追加 1タップで起動 ブラウザのバーも消え る インストール不要 審査なし URL を開くだけ オフライン対応 キャッシュを保持 電波が弱くても開ける プッシュ通知 ロック中でも届く 開いていなくても気づけ る 04 / 18
5. PWA の挙動 Web サイトが、ホーム画面の“アプリ”になる 例：connpass を iPhone のホーム画面に追加してみる ① Safari でサイトを開 く → ② 共有 →「ホーム画面 に追加」 → ③ 「Web アプリとして 開く」で追加 → ④ 全画面のアプリとし て起動 05 / 18
6. Rails 7.2 × PWA rails new した時点で、PWA 用ファイルが生成される 自分で用意するのではなく、Rails 7.2 が PWA の土台ファイルを最初から置いてくれる app/views/pwa/manifest.json.erb マニフェストホーム画面のアプリ名・アイコン・テーマ色・全画面表示（standalone） を定義 app/views/pwa/service-worker.js Service Workerブラウザの裏で常駐し、オフライン・キャッシュ・プッシュ通知の受 け取りを担う config/routes.rb + rails/pwa 配信ルート＋専用コントローラコメント済の2行を外すと、組み込みの rails/pwa が両ファイルを返す Rails も 7.2 から PWA に対応していた　土台が用意されているなら、これは作れそう！ 06 / 18
7. 作ったもの 自分OS 単体アプリにするほどじゃない「小さな不便」を、ひとつの Rails アプリに集約した生活補助 PWA 打刻リマインド 打刻忘れを防ぐリマインド　日別の 履歴も確認できる 有料列車ログ 月の回数・合計金額・理由・疲労度を記 録 渋谷ランチログ 価格・満足度・混雑・再訪フラグで絞り 込み 趣味コーナー 予定とメモをカテゴリ付きで保存 ダッシュボード 今日の打刻・列車・ランチ・趣味を一覧 表示 アプリ内 AI チャット 自然文で相談 → AI が返してくれる （後述） 07 / 18
8. 画面紹介 スマホのホーム画面から、1タップで ダッシュボード 「AI に相談」がいつでも届く位置に 右上から、自然文でアプリに話しかけられ る NEXT ACTION ＝ まず打刻 毎日使う出勤・退勤を最上段に固定 列車・ランチ・趣味をサマリー表示 今月の回数や直近の記録をひと目で 下部ナビでネイティブアプリ風 ホーム・打刻・列車・ランチ・趣味を行き来 08 / 18
9. 全体像 Rails を本体に、PWA で“アプリのように”届ける データも画面も PWA の定義も Rails が持つ。スマホはそれを開くだけ、公開先は Render スマホ側 ホーム画面アイコン Rails が配信するアプリを、ブ ラウザ／全画面で開くだけ → 本体 Ruby on Rails 7.2 データ・画面・AI 連携、PWA 定義 （manifest / service worker）まで 持つ → 公開先 Render main に push で自動デプロ イ／DB は PostgreSQL AI エージェント連携を含む詳しい図は、最後に補足として掲載 09 / 18
10. 実装 — Ruby / Rails 周り 「アプリ風」にするために、Rails でやったこと 派手なことはしていない　Rails のレールに乗って、土台を一つずつ PWA 化 manifest.json.erb を整え、service-worker を有 効化、routes のコメントを外す データ設計（ActiveRecord） WorkDay / PaidRide / LunchLog などのモデルを generator ＋マイグレーションで 画面（controller ＋ ERB） 各記録の CRUD を Rails の作法で作り、ダッシュボ ードに集約 スマホ最適化 Turbo / Stimulus で素の JS は最小限　下部ナビ・ safe area を調整 10 / 18
11. 補足機能（Push・AI） ＋αで、Push 通知と AI も足してみた ここは軽く　Rails の上に、2つの機能を乗せた Web Push 通知 アプリを閉じていてもスマホに通知が届く仕組み設定 でかなりハマったが、本番のスマホ通知まで通した アプリ内 AI チャット 自然文を AiMessage に保存 → 署名付き Webhook で AI エージェントへ → 結果をアプリに反映詳しくは次 で 11 / 18
12. AI 活用の例 「機能を追加して」と頼むと、本当に増える コードを自分で書かなくても、AI エージェントが書いてアプリに反映してくれる ① チャットで「並び替えを追加して」と頼む AI が実装 ② 並び替えメニューが実際に増えている 12 / 18
13. Hermes Agent の使い方 AI の頭脳は Hermes Agent に任せる アプリは「自然文を投げて、結果を受け取る」だけ。思考とコード生成は Hermes 側で動く どう連携しているか 1 自然文を AiMessage に保存 2 署名付き Webhook で Hermes へ （callback_url ＋ action_url 同梱） 3 返信をポーリングで表示（待機中はト ークン未消費） Rails 側を薄く保てる AI の実行環境・モデル管理は Hermes にオフロード。アプリはデ ータと画面に集中 操作は Rails が許可制 Hermes は action_url の許可済み operation だけを呼ぶ。境界 を自分で持てる コード変更まで頑める 機能追加もチャットから。話しかけるだけでアプリを育てられる 13 / 18
14. やってみて — Rails で一番良かったこと 実装を AI に任せても、 「どこに何があるか」が分からなくならない 実装の多くを AI に任せても、Rails には決まった置き場所（レール）がある　AI が足したコードも必ず 定位置に収まり、Ruby をほぼ書けない自分でも追えて、直せた 例：アプリ内 AI チャットを足したときも、各パーツが Rails の定位置に Model app/models/ ai_message.rb データと状態 Controller app/controllers/ hermes_replies 返信の受け口 Service app/services/ hermes_..._notifier 外へ送る処理 View app/views/ ai_chats チャット画面 14 / 18
15. ちょっと宣伝 ロリポップ！AI エージェントクラウド 自分OS が連携している Hermes Agent は、ここで動かせます lolipop.jp/ai/agent-cloud/　※ 本機能は Hermes Agent の公式サービスではありません 15 / 18
16. 感想・まとめ 01 Ruby 歴ほぼゼロでも、生活アプリが形になった 打刻リマインド・列車・ランチ記録を PWA でスマホから 02 大きなものを、作らなくていい 「自分の小さな不便」を集めたダッシュボードだけで十分 03 チャットで頼めば、アプリが育つ 「並び替えを追加して」——自分専用だから AI に大胆に任せられる そして、こういう場に誘ってくれる外部コミュニティに感謝 16 / 18
17. THANK YOU 自分のためのアプリは、 作っていて楽しい @tateken_create zenn.dev/tateken 17 / 18
18. APPENDIX ｜ 補足資料 18 / 18