やさいバス「やさいバス八百屋アプリ」開発舞台裏

タビアンはやさいバス株式会社さまの「やさいバス八百屋」への開発協力を行いました。やさいバス株式会社は、地域の農家から農産物を集荷し、地元の消費者に直接配送することで、新鮮な農産物を流通させる物流サービスを提供している企業です。

やさいバス株式会社は、東京都が実施する東京産農産物の流通促進事業に採択され、東京都内の畑で生産された農産物を東京都内の企業の事業所に直送して販売することで、地産・地消を促進する新たな事業を始めようとしていました。タビアンは事業実現のパートナーとしてプロジェクトに参画し、やさいバスが実現しようとする世界観を本事業に落とし込む役割を担いました。配送先の事業所に勤める従業員から「購買予約」を登録してもらうことで需要を明確にし、集荷・配送する農産物の数量を事前に明確化するプロダクトを開発しました。本記事ではプロジェクトマネージャーの梶原、エンジニアの伊藤、小林に実際のプロジェクトの舞台裏を伺いました。

登場人物

梶原飛鳥 プロジェクトマネージャー・メインエンジニアとしてプロジェクト全体の進行管理、マネジメント、機能開発を担当。

伊藤碧央 エンジニアとして技術調査と機能開発を担当。

小林 エンジニアとして技術調査・納品資料作成を担当。

ーまずはプロジェクトの背景やタビアンの役割を簡単にお伺いできますか。

梶原 東京都内で生産された農産物を仕入れ、東京都内の企業の事業所に配送・販売することで、地産・地消の新たな取り組みを行うためのプロダクト開発を行いました。東京都が実施する東京産農産物の流通促進事業に採択されたプロジェクトになります。

タビアンは事業実現パートナーとして参画し、プロダクトの開発を担いました。プロジェクトは2023年7月からスタートし、アプリの開発を行って11月に納品を行い、現在はPoC（概念実証）を回して実際の現場で検証されながら実験的に活用されている段階です。プロジェクトは企画・UXリサーチフェーズから始まり、私は開発フェーズのプロジェクトマネージャー（以下、PM）兼メインエンジニアとして実装に携わりました。開発フェーズが始まる前の技術調査や納品フェーズでは伊藤さん、小林さんが携わっています。

ー今回はどのような機能を開発したのでしょうか。

梶原 ユーザーが使うアプリ側と管理画面2種類の開発を行いました。アプリ側は主に野菜を買うエンドユーザー向けの機能です。ユーザー認証とログインを行う機能、登録をしてくれたユーザーにメッセージを自動送信する基盤の開発、ユーザー招待機能、やさいバス八百屋の開店情報の閲覧機能、販売商品の確認や取り置き・受け取り機能があります。

管理画面はやさいバス社の方がログインし、取り置きできる日時を制御するスケジュール制御機能、ユーザーのアクションをデータベースに残すアクションログ機能が求められました。

企画・要件定義フェーズを経て、ユーザー側は「LINE公式アカウント」を活用したLIFF（LINE Front-end Framework）アプリで、管理画面はスクラッチで開発することに決定しました。ユーザーに登録してもらうハードルを最小にしたかったのと、通知を送ることがプロダクトの重要な要素だったため、LIFFアプリを選定しました。

使用技術についても詳しく紹介します。ユーザーが使う画面も管理画面もIonic Frameworkを使い、言語はTypeScriptとNuxt 3を使っています。インフラやバックエンドなど一連のホスティング先はAWS Amplifyを使っています。細かい部分だと、認証基盤は「LINEログイン」を「Amazon Cognito」に連携しログインさせるようになっています。これは今回のプロジェクトで初めてチャレンジした技術になります。データベースは「Amazon DynamoDB」、ストレージは「Amazon S3」を使い、サーバレスコンピューティングはタビアンでもよく使っている「AWS Lambda」を取り入れています。

やさいバス八百屋の開店日が決定すると、「LINE公式アカウント」に登録してくれたユーザーに向けてメッセージを送信します。トーク画面の下部には、画像と組み合わせたボタンを実装できるリッチメニューが表示され、開店日を確認したり、開店日に販売される農産物を「取り置き」して購買予約する流れとなっています。リッチメニューのボタンをタップすると、LIFFアプリが表示される仕組みですね。画像を埋め込んだリッチメッセージを送信するのですが、送信先のユーザーを事業所ごとに変える必要があるため、LINE公式アカウントマネージャーからは送信できません。一方、リッチメッセージの作成と送信を行うエディタを開発するのはToo muchだったため、私がやさいバス八百屋の業務担当の方から画像をもらって、JSONで設定を書いて、直接APIを叩いて送信するオペレーションを保守フェーズで行っていました。最終的には手順書にまとめ、やさいバス社のエンジニアの方に引き継いでいます。

伊藤 リッチメニューやLIFFアプリは、プロジェクト序盤の技術調査のフェーズで「LINE Messaging API」と「LIFF v2 API」を実際に使いながら調査を進めました。特に、「LINEログイン」をAWSの認証基盤「Amazon Cognito」に連携するプロセスが複雑で苦労しましたが、プロジェクトメンバーと都度チャットで参考情報や記事を共有し合ったり、ペアプログラミングをする時間を増やしたりしながら進めました。

小林 調査段階でわからなかったことは一人で調べるだけでなく、各々で調べて知見を集めて、最終的に擦り合わせていくような進め方をしていました。一人で悩む時間が少なく、開発メンバーで協力し合いながら効率よく進められたと思います。

梶原  LINEアプリやLIFFの調査はもちろん、ボタンやフィールドなどの画面の構成要素となるコンポーネントの実装は伊藤さんと小林さんに進めてもらいました。APIやLINEログイン認証の仮実装や調査にはとても助けられましたね。技術調査の結果がスプレッドシートに整理されていたためスムーズに開発に入れました。

ープロジェクトではどのような点を意識しましたか。

梶原 補助金事業のプロジェクトのため、納品前のドキュメント制作フェーズを確保しながらスケジューリングすることを意識していました。

また、LINEアプリやLIFFを活用したプロダクト開発がタビアンとしては初の試みでした。そのため技術調査にかなり時間をかけましたね。調査を行う人と開発・実装をする人でメンバーを分けることで、滞りなくプロジェクトを進められたように思います。LIFFでの開発は複雑だった一方で、LINEアプリは非常にAPIが充実していて、痒いところに手が届くようなAPIは大体用意されていました。そのため、機能としてはAPIを活用して実現できることも多く、今回のプロダクト以外でも有効活用できるケースが多そうだなと感じましたね。

伊藤 LIFFとAmplifyの相性が良いと感じました。LIFFでアプリ開発を行う際も、WebベースのアプリをLINEアプリ上に立ち上げることになりますが、Amplifyの素早い開発体験でリリースできたなと。

小林 納品フェーズではクライアントからの要求仕様書に対して、実際に開発した機能を記載する完成仕様書を作成し、資料として納品を行いました。完成仕様書は開発した画面と機能を網羅し、納品物として細部までわかりやすい資料を意識しました。

ープロジェクトを通してどのような知見や学びが得られましたか。

梶原 繰り返しになりますが、LIFFアプリを使ったプロダクト開発はタビアンとして初めての試みです。少人数チームでのプロジェクトとなりましたが、技術調査や実際の開発フェーズを経てタビアンの開発の知見やノウハウも増えたように思います。

小林 技術調査では自分自身も多くの知見を得られたと思います。また、少人数チームだったからこそ、メンバー全員で会話する機会を作りやすく、エンジニア同士で連携しながら効率良くプロジェクトに取り組めたと感じています。

伊藤 これまでに経験がなかった領域に対して、技術調査の段階から携わり複雑で苦戦した部分もありましたが、自分自身のノウハウが増えたことはもちろん、チームとして団結しながら進められました。調査段階では本当にチームメンバーに助けられたと思っています。

終わりに

やさいバス社の「やさいバス八百屋」事業は、「東京産農産物の地産地消」を目的とした、非常に社会的意義のある事業です。やさいバス八百屋開店時に農産物を購入した方も地産地消に共感をしてくれる方が多く、開発終了後の評判も非常に良かったという声をいただいています。また、LIFFアプリでの開発はタビアンとしても初の試みとなり、プロジェクトメンバーは技術調査からコミットし、ソフトウェアエンジニアとしての知見を広げられたように思います。タビアンとしてのエンジニアリング・ケイパビリティをさらに広げ、経験を積むことができたプロジェクトになりました。

タビアンでは一緒に働く仲間を募集しています。プロジェクトの内容や開発体制について、より詳しく知りたい方はぜひお気軽に、カジュアル面談へのご応募をお待ちしております。