こんにちは。システム開発第二事業部の中野滉紀です。
主に、WEBアプリケーション開発のフロントエンドをメインに、状況によってバックエンド作業も含め幅広く担当しています。
この記事では、AIアシスタント「Gemini」との対話を通じて開発されたLINEアプリ『Sync』の開発プロセスを詳しく紹介しています。支払管理の新しい形を提供するこのアプリの誕生秘話や、AIの力を借りた開発の革新性について、その開発の舞台裏を、ぜひご覧ください。
目次
- はじめに：僕の隣に、最高の相棒ができた
- 第1章：設計編 - 確かな構想とAIによるブラッシュアップ
- 第2章：開発編 - AIナビと共に進む実装の道
- メイン機能の開発と動作確認
- 第3章：改善編 - ユーザー体験へのこだわり
- おわりに：
- アプリについて
- テコテックの採用活動について
はじめに：僕の隣に、最高の相棒ができた
「AIに聞けば、何でもできる」そんな言葉をよく耳にするようになりました。
しかし、それは本当なのでしょうか？
ネット検索の代わりになるだけでなく、アイデア出しから、設計、実装、そしてデプロイまで、一つのプロダクトをゼロから作り上げる「相棒」にAIはなり得るのか？
そんな疑問を胸に、今回、AIアシスタントGeminiとの対話だけで、一つのLINE公式アカウントアプリを開発する、という挑戦をしてみました。
この記事では、その過程で生まれた友人や恋人向けの支払差額管理アプリ『Sync』の開発ストーリーをお届けします。
AIとの二人三脚で、アイデアが形になっていくリアルな軌跡、そしてAIプログラミングの驚くべき可能性を感じていただければ幸いです。
第1章：設計編 - 確かな構想とAIによるブラッシュアップ
すべての始まり：「LINEで割り勘アプリを作りたい」
プロジェクトの始まりは、シンプルなアイデアでした。
「友人や恋人間で、広告も無くいちいち外部アプリも開かずに、いつも使うLINEで簡単にお金の貸し借りを管理したい」。
この核となるコンセプトをGeminiに伝えると、私たちの対話は始まりました。
的確だった初期要件定義と、AIとの対話で見えた本当のニーズ
驚いたことに、私が最初に提示した要件定義は、Geminiに「完璧な要件定義です」と言わせました。 さらに、AIとの対話を通じて、アプリの本質的な価値がさらに明確になっていく様子は、まさに「壁打ち」そのものでした。
(実際の会話の様子)
このように、的確な初期構想をAIが肯定し、さらにそこから対話を通じて「支払差額管理アプリ」という、より本質的なコンセプトへと昇華させることができました。
UI/UX設計：ユーザーの状態に合わせた最適なメニューを考える
公式ラインアカウントでは、トーク画面に表示されるボタンなどのUIが必要です。 前回の要件定義に沿って、まずはどのラインアカウントとデータを共通参照させるかというデータ連携を進めました。
初回設定時に必要な「データ作成」や「連携」ボタンは、一度使えば不要になります。
この課題に対し、Geminiは「ユーザーの状態に応じてリッチメニューを切り替える」というベストプラクティスを提案。 未登録（データ連携前）、連携済み（支払い管理機能）、設定画面、という3つのステータスに合わせてそれぞれのメニューを用意/切り替えることで、ユーザーが常に迷わず操作できる、洗練されたUIの骨格が固まりました。
アプリ概要
ーーーーーーーーーーーーーーーーーーーーーーーー
アプリ名： Sync
アプリについて
友達、彼女/彼氏の二人間の支払いが ≒ になるように管理するアプリです
同期するというキーワードからGeminiが「Sync」というアプリ名を命名しました
アプリ詳細
2ユーザー間で連携キーの生成/登録を行います
ユーザーAとBの支払い額を加算/減算し、次にどちらがいくら支払えば平等になるのかを出力します
基本情報
言語：Python
サーバー：Render（フリープラン）
DB：PostgreSQL
ーーーーーーーーーーーーーーーーーーーーーーーー
第2章：開発編 - AIナビと共に進む実装の道
設計が終われば、次はいよいよ実装です。
LINE公式アカウント開設からサーバーデプロイまですべてを行います。
私は事前情報を何も調べていないので、ここでもGeminiに必要な作業や手順を確認しながら進めます。
LINE Developersコンソールでの設定から、Pythonを使ったローカル開発環境の構築まで、Geminiはまるで経験豊富な先輩エンジニアのように、一つずつ丁寧に手順をガイドしてくれました。
ミニマムスタートで「オウム返し」ボットを作成
開発の最初のマイルストーンは、LINEで送ったメッセージがそのまま返ってくる「オウム返しボット」の実装です。
私が知っている言語だとGeminiに聞かずとも進めてしまうので、今回は知見の無いPythonで進めることにしました。
Geminiに言われるままリポジトリを作り、ngrok(※)というツールを使って、自分のPCとLINEサーバーにてローカル起動を行いました。
公式ラインアカウントとローカル環境が初めて繋がった瞬間は、このプロジェクトが本当に実現可能だと確信するに十分な体験でした！
※ ngrok：ローカルの開発サーバーをインターネット上に公開するトンネリング/リバース・プロキシツールです
メイン機能の開発と動作確認
オウム返しボット完成後、いよいよ本機能の実装に入ります。
前回同様、基本はGeminiにコードを生成してもらい、私がテストし調整するという流れです。
2ユーザーで利用するための連携機能から始めました。 Aユーザーで連携キーを生成、Bユーザーが共有された連携キーを公式ラインアカウントに送信という形で2ユーザーを関連付けます。
連携さえ終われば、「私が払う」 | 「相手が払う」の各ボタン押下後に送信される金額をA/Bの支払額に加減算するだけのシンプル機能なので省略します。
Geminiが生成したコードをテストし、エラーやバグの箇所をGeminiに共有, 改善コードでテストを繰り返し、あっさりと連携機能, 支払い管理機能ともに完成しました。
データベース選定から本番環境（Render）へのデプロイ
当初は手軽なSQLiteで開発を進めましたが、本番環境を見据え、クラウドデータベースのPostgreSQLへ移行。
数々のエラーログも、Geminiに見せれば即座に原因と修正案を提示してくれました。まるで隣に凄腕のデバッガーがいるかのようでした。
無料プランでという指示のもとRenderというサーバーをおすすめされ登録。
RenderはGithubのリポジトリと連携することで、対象ブランチが更新されると自動デプロイが行われます。
CICDの設定は特になく、secretsなどの各種変数を登録するとすぐにデプロイが開始されました。
デプロイ中に発覚するエラーもGeminiと壁打ち&コード更新をしてデプロイ完了まで進めます。
最低限のアプリ完成と多くの改善点の存在
一番不安要素が大きかったサーバー周りも難なく終わり、この時点で公式ラインアプリとして利用が可能になりました！！
要件定義からデプロイまでGeminiの指示で戸惑うことはなく、当初の「AIに聞けば、何でもできる」という疑問は肯定に変わります。
ただし、数日使ってみて色々と改善点も見えてきます。（次へ）
「サーバーを眠らせるな！」スリープ防止機能とエラーとの戦い
Renderの無料プランには「15分でスリープする」という大きな壁がありました。
コンビニなどで支払い後にアプリを利用するとスリープ中のため起動まで数分待たされる状態です。
有料プランは避けたい、でも快適さは譲れない。そんな悩みをGeminiにぶつけてみました。
(実際の会話の様子)
この提案に基づき、10分ごとに自分自身にアクセスする機能を実装。これにより、広告なし・完全無料で24時間いつでも即座に応答してくれるアプリとなります。
第3章：改善編 - ユーザー体験へのこだわり
アプリが完成すると、「リセット機能」や「履歴機能」など、新しい機能を追加したくなるものです。
Geminiに「次は何をするべき？」と聞くと、迷わず追加機能提案をされましたが、私はあえて基本機能のブラッシュアップを選択しました。
Geminiはアプリを使えないので操作感がわかるのはユーザーである私だけです。
このアプリは毎日使うツールだからこそ、日常の操作が少しでも快適であることが、何よりも重要だと考えたからです。
表示のズレと数字のリンク化をFlex Messageで解決
まずは見た目の問題です。
支払い額を送信したあとに、二人の総支払額と次に払うべきユーザーの金額が送信されてきます。
しかし、ユーザー名の文字幅の違いで表示がズレたり、5桁以上の数字が電話番号と誤認されてリンク化したり、という細かな問題がありました。
これに対し、Geminiはレイアウトを固定できるFlex Messageと、リンク化を防ぐゼロ幅スペースという技を提案。 この修正で、アプリの完成度は劇的に向上しました。
■実機画像
●befor
●after
この基本機能改善により、一気にアプリっぽくなり、見やすさも格段にアップしました。
LINE名の動的取得で実現した "二人だけのアプリ"
最後の仕上げは、ハードコーディングされた名前を、LINEのプロフィール名から動的に取得する機能の実装です。
当初、はライン名を取得するという仕様がなかったため、「Aボタン = ユーザー1 | Bボタン = ユーザー2」という固定状態でした。
ラインAPIを利用し、「ユーザー1(連携キー発行者)が払う | ユーザー2(連携キー送信者)が払う」という固定ボタンから「自分が払う」「相手が払う」という「自分」が使うユーザーによって変わる状態を整備しました。
これにより、『Sync』は「ユーザー1とユーザー2」ではなく、どんな友人や恋人間でも使える、パーソナルなツールへと進化を遂げました。
AIによるアプリアイコン生成とアプリの完全完成
最後にアプリアイコンの作成です。
「同期する」というイメージから「シーソーと天秤をモチーフにしたアイコンを作って」という最後の依頼。
どういう画像がほしいかを数回壁打ちし、次のアイコンでアプリを飾ることにしました。
（実際のアプリアイコン）
整備したアカウント詳細画面
これにて、サーバースリープにも悩まされない、アプリが完成しました。 トータル4日ですが、1日の作業時間は2時間程度です。
おわりに：
ここまで読んでいただき、ありがとうございます。 実は、この記事の構成案から文章のほとんどの部分まで、Geminiが私たち二人の対話ログを元に執筆したものです。 （言い回しや説明不足な箇所は補足しています）
アプリ開発の要件定義を固め、エラーを解決していったのと同じように、
- 「まずは目次を固めましょう！」
- 「こんなブログを書きたい」
- 「この部分は対話形式で見せたい」
と私が伝え、Geminiが形にしてくれました。
今回の本題である「一つのプロダクトをゼロから作り上げる「相棒」にAIはなり得るのか？」という点においては、利用者が開発者という点はありますが、十分なり得ることがわかりました。
ただし、AIを使う人間の前提知識、セキュリティ的な視点、情報の取捨選択/正誤判断のスキルは必須という点は再認識しました。 提案の01も、的確な指示出しも、プロジェクトの舵を切るのも人間の役目です。 私が最初に提示した要件定義や、新機能より基本機能の改善を優先するという判断がなければ、使い勝手の悪い消えゆくアプリが完成していたと思います。
しかし、その過程で生まれる無数の課題やエラー、そして「もっとこうしたい」というアイデアの壁打ち相手として、Geminiは最高の相棒でした。 アプリ実装の総日数は1~2人日程度ですが、一人ではもっと時間がかかったでしょう。
この記事が、AIを「使う」のではなく、「共に創る」新しい開発スタイルの面白さを伝えるきっかけになれば、これ以上嬉しいことはありません。
最後までお読みいただき、本当にありがとうございました。
アプリについて
今回Geminiとの対話のみで作成したアプリです
2ユーザー以上の差額管理に対応していない、1人と連携すると他の人と連携できない、連携解除出来ないなど、基本機能以外は未実装です。。。
それでもご興味があれば仲の良い人と使ってみてください！
時間とやる気が出たときに少しずつ拡張します
感想もお待ちしております。
テコテックの採用活動について
テコテックでは新卒採用、中途採用共に積極的に募集をしています。採用サイトにて会社の雰囲気や福利厚生、募集内容をご確認いただけます。ご興味を持っていただけましたら是非ご覧ください。
