Labomartの軌跡

Labomartの軌跡。構想から運用まで

はじめに🤖

このnoteは学生エンジニア (?) が一つのサービスを構想し、プロトタイピングを繰り返して実際に運用を開始するまでの長い道のりを書き綴ったものです。誰かに何かを伝えたいわけではなく、Project Labomartの歴史を書き記しておきたかったが故の記事になっています。そのため大変長い文章になるのを了承ください。

読んで得られるかもしれないもの💖
開発のモチベーション・個人開発で気にすべき知見・おま誰・Labomartについて
読んでも得られる事は無いであろうもの💔
すごい素晴らしい技術的な知見・勉強方法や自己啓発的な何か

自己紹介🧐

はじめまして、おとべです。フロントエンドエンジニア兼学生をやっております。
TwitterInstagramGitHubnote等を@unotoviveというIDでやっているので気になる人はこちらものぞいてみてください。

エンジニアリングとデザイン🔧
フロントエンドエンジニアを主として活動しています。現在株式会社ゆめみでアルバイトをしており、Vue.jsやReact.jsなどを利用したアプリケーションの作成・よくあるLPのコーディング等を行っています。他にも独学ですがデザイナーとして作業をすることも多く、家には技術書よりもデザイン系の本のほうが多く積まれています。

学生🏫
2019年現在、都内の大学に通う大学4年生もやっております。芸術という授業の単位が取れれば20卒として社会に投げ出される予定です。

趣味とか
そんなにありませんが、逆になんにでも手を出すので面白そうなことがあれば誘っていただければと思います。最近は海にダイビングをしました。次はスカイからダイビングをする予定です。

本題に入る前に、Labomartって?🤔

Labomartは一言で表すと無人コンビニのシステムです。
置いてある商品をスキャンして顔をかざすと事前にチャージしておいた残高から購入することができます。特徴は小規模コミュニティ向けであることと、顔さえあれば決済が完結するというところです。

Labomartの構想💡

残留生活とLabmart🛁

今から約1年半前、一足先に研究室へと通うようになっていた僕は、初めての残留(学校に泊まる事)を経験します。徐々に残留する日数は増え、多いときは1週間ずっと学校に泊まっているような時期もありました。そんな時に大変お世話になったのが、当時の先輩がやっていたLabmart。これはいたってシンプルで、商品を取ったらその分の小銭を瓶に入れるというものでした。残留頻度の高い僕と同期の@aj1m0nは当然その利用頻度も高く、常連客と化していました。

あんじー(@aj1m0n)🤯

ここで僕と一緒に残留していたあんじーを紹介すると、彼は現在のProject Labomartにおける唯一の共同開発者であり、優秀な機械学習エンジニアです。某N○○データで時給換算88円のアルバイトをしたりしています。

Labmartのダメなところ😵

常連客と化していると、そのサービスの悪いところは顕著に見えてきます。
僕が個人開発をするにあたって、一番の動機は「あったらいいな」という気持ちです。あっても使わないサービスは作り甲斐もありません。
さて、Labmartの何がいけなかったのかというと、大きく2つ挙げられます。

1つに、決済の利便性の欠如です。現金とLINE Payのみ対応していた決済、当然システム化されているわけではないので、送金忘れの頻発、丁度良く小銭がない、いちいち面倒、いちいち面倒と、利便性に大きく欠ける状態でした。これがProject Labomart始動の最大の動機であったでしょう。

もう1つに管理の杜撰さが挙げられます。在庫数、仕入れ値、販売値、売り上げ等のデータは一切の管理をされていませんでした。運用をしていたのは先輩なので、当時は正直どうでもよかったです。しかし先輩が卒業し、運用を引き継ぐとなるとそうも言ってられません。(物理的に)空気の悪い研究室、なぜ生きてこれたレベルで管理がずさんな指導教員。空気は関係ありませんが、盗難等を抑止するために最低限のデータ管理は必要です。
(データによって盗難の抑止は出来ても防止は出来ません。なので小規模コミュニティ向けになっています。)

既存のLabmartはこのような大きな問題を抱えていました。

企画の始動🥳

幸いにも僕らはエンジニアであり、学生であったため、この問題を技術で解決する能力と時間がありました。そこで、Project Labomartが始動しました。解決すべきは上記2つの問題。これらを解決するためにシステムの全貌をうっすらと思い描きます。

1. 顔認識による簡易決済
2.決済システムに連動した在庫・売上管理システム

この2つを当初の目標として、開発へと着手します。あんじーは機械学習エンジニアなので顔識別部分。僕はフロントエンドエンジニアなのでアプリケーション全般のフロントエンドとバックエンドとデータベースを担当することになりました。企画の段階では上記に書いてある2項目のみが要件として挙げられていました。

個人開発の良いところはこのように適当に開発を開始できることだと痛感しています。企業案件であれば、仕様書、工数計算、アサイン、マネジメント、その他もろもろの余計な時間がかかってしまします。

※気づいている人もいるかもしれませんが、既存のサービス名称はLabmart新規システムの名前はLabomartと、Oが一文字追加されています。

プロトタイプの量産🏭

プロトタイプ第一弾の作成🚀

上述した着想と開発の開始は3年生の秋ごろから行いました。各々で開発をやりたいときにやり、第一弾のプロトタイプを冬ごろに完成させることが来ました。当時完成したプロトタイプは大変突っ込みどころの多いもので、UI等も優れているとは言えませんでした。

・デバイスが大きく、タッチパネル付きノートPCにカメラが3台ついていた
・顔識別の制度が決済に使えるほど高くはなかった
・アカウントからの事前チャージをしての決済であったが、チャージの方法が用意されていない。(直接DBを弄っていた)
・UIが終わってた

自分で羅列してて悲しくなってきましたが、多大なる問題点を抱えていたプロトタイプは、最終的な完成形からしてみると5%程度の完成度でした。

プロトタイプがもたらすもの🌈

しかしながらプロトタイプの作成は、目指すところと必要なものを明瞭にするという点で大きな進歩であったといえるでしょう。

プロトタイピング → 出来上がった物の精査 → 情報の整理

このサイクルを繰り返し、実運用が出来る部分まで持っていきます。本来であれば、スクラムマスターが情報を管理し、デザイナーなどと連携してイイ感じのアジャイル開発を行いたいところですが、これは個人開発です。納期もなければ仕様にうるさいPOもいません。作って、試して、改善する。無駄があるように思えますが、これは「面倒な事」から解放された開発手法であり、個人開発でしか出来ない所業です。

勿論、個人開発以外でもプロトタイピングの恩恵は大きいです。

プロトタイプ第二弾以降の作成🚧

Project Labomartのメンバー、といっても2人ですが、僕たちは大変怠惰でした。具体的な納期がなければまともに開発が進みません。
というわけで、今後の各プロトタイプの完成は様々な納期を前にすることになります。

・オープンキャンパス
・MFT2019 への出展
・僕の学会発表

これらのイベントがあるたびに、5日ぐらい前から研究室に泊まり込みで開発をしていました。個人開発とはいえど期日がいかに人を動かすのかを思い知らされます。

オープンキャンパスが終了して以降は、これまでとのシステムとは一新したアーキテクチャのLabomart-v2へと移行しています。技術的な変化はこのようになっています。

フロントエンド - Store側
Electron + Vue.js製のWindowsアプリケーション → Vue.jsによるSPA

フロントエンド - Client側
無 → Vue.js製のSPA

バックエンド - 基幹・決済・商品管理システム
node.js - express 製のREST API → Firebase cloud functions

バックエンド - 顔識別システム
フロントエンドと同じPC上で動いていたカメラ直接起動型のPython製 → APIとしてBase64形式で画像を受け取るPython製 API

データベース全般
SQLiteによるRDB → Firebase Cloud Firestore / Firebase Storage.

大規模改修というよりもはや別物ですが、僕の学会発表の頃に作成されていた物はプロトタイプというよりもスクラム開発中のサービスという感じになっていました。つまりはある程度基礎が出来上がり、いろいろな機能を追加している段階という事です。

実装やプロトタイプ等、すべての関連リポジトリは11個にも上りました。(現状稼働しているサービスで必要なのは4つ)
各プロトタイプからインスピレーションを得られ、実装に至った物は多くあります。これを語ることはLabomartの機能説明書になってしまうので割愛しますが、プロトタイプのお陰で間違いなくより良い物へと作り替えられていきました。

完成へ近づくにつれて湧き上がる問題たち🚨

現金の移動を含むシステムとして公開準備を進めると、多くの壁が立ちはだかりました。

資金決済に関する法律🚓
送金などの金融取引は銀行業などに限る的な法律がある。おそらくマネーロンダリング等を防止するためのものだが、うかつに現金をチャージさせてその残高を送金するなどをしてしまうと、法律に引っかかてしまう。
LINE Payとかはどうしているのかというと、法人として資金移動業者という登録を受けることで少額に限りそれが可能になる。もちろん個人なので登録は出来ないため、法律の範囲内で機能を決定し、その実装をしなければいけなかった。この制限について簡単に説明すると現金に換金できる可能性が無ければまぁ大丈夫ということのようで、そこを目指した機能設計を行った。

決済における安全性の保障👨‍👨‍👦
ユーザーは現金を消費してチャージするわけで、まかり間違っても他人に自分の残高を使われてはいけないはずです。現状の顔識別システムの精度は高いとはいえ、顔写真等を使えばユーザの偽装が出来てしまいます。
プロトタイプでは大した問題ではなかったのですが、実運用するとなるとそこは当然大きな問題となります。
そこでLabomartでは、顔識別後にユーザにPIN認証を求めることで安全性を担保しています。これらは顔識別APIとは別のAPIで管理されており、適切なトークン交換によりセキュアな認証が実施されるようになっています。

ここにPIN認証を挟むということは、Labomartのウリであるシームレスな簡易決済という点において、若干のウィークポイントとなってしまうでしょう。ユーザの操作としては、PINを入力して決定を押す5タップで約4秒のロスがあります。また、任意の番号を思い出す思考のコストもかかるため、ないに越したことはありません。
小規模コミュニティ向けであるため、悪意のあるユーザーは居ない(居たとしてもコミュニティの責任)で良いという意見から、当初は実装を中止する案もありました。
しかしながら僕らの作成したシステムは完璧でしょうか?たとえユーザに悪意がなくとも、システムの誤識別によって人のお金を使ってしまう可能性があります。(勿論テスト段階でも現在でも誤識別の例はありませんが)そのような可能性と4秒のロスを天秤にかけ、PIN認証を実装したというストーリーがあります。

個人開発に限らずですが、開発以外も自分で行う個人開発では特に、自身の責任範囲と起こりうる問題への適切なアプローチを常に検討し続ける必要があると言うことを学びました。

商品登録、価格設定、その他の雑務🐣
お店屋さんごっこをするわけなので、商品がないと始まりません。商品はどこかで購入してLabomartに登録、陳列というフローを踏む必要があります。
これらはシステムで自動化されるべきですが、購入部分等は未だに手動で行っています。ほかにも、実入金の管理等は僕の個人口座に来るので、管理をしなければなりません。

このような問題へは、実運用を開始した現在でもアプローチを続けています。
プロトタイプの作成を続ける→実運用ができる再提言のラインに達すると実運用開始→その後も継続的にアップデートをしていく。個人開発においてこのフローはやる気を継続する上で大変有用な選択でした。

研究室内での実運用の開始⏰

プロトタイプの作成を繰り返し、上に記述した運用可能な最低ラインを超えたため、研究室内での実運用を開始しました。

最低ラインとは?Labomartの機能🧶

さて、最低ラインを超えた、というはだいぶ漠然としていますが、具体的には何をもって実運用可能とするのか。重要な判断基準として3つが挙げられます。

・基本的な機能を網羅している事
・このサービスにおいて最もウリにしている部分の完成度
・システムの不備によって利用者が不利益を被る可能性(脆弱性)

基本的な機能を網羅しているという点は、チャージ、決済、履歴の確認という点をクリアしている時点で申し分ないでしょう。続いてサービスの完成度ですが、これは顔識別APIのアップデートにより、速度、精度ともに申し分ない結果が得られたため、クリアしていると言えます。最後に、脆弱性ですが、様々な対策をしていることもあり、悪意のないユーザーしか存在しない世界であれば、申し分のないクオリティへと仕上がっています。しかしながら、悪意のあるユーザーによる不正なデータ改ざん等の対策は未熟な部分もあるため、改修が必要な状況です。今回は研究室内のリリースという事でこちらは考慮しませんでした。

本番環境はやはり、何かが起こる🃏

研究室内で周知を行い、運用を開始しました。後述のキャンペーンの効果もあり、多くの人に登録してもらうことに成功したのですが、ここで問題が発生します。

幾度となくテストを繰り返し、たとえ何か一時的なエラーが発生したとしてもシステム全体の運用に影響を及ぼさない作りをしていたつもりでいました。発生した問題は、何故か特定の状態の顔写真を学習させると、顔識別APIがいかなるリクエストにもエラーを返してしまうという問題でした。このエラー、正味わけがわからず、現在にいたるまで具体的な原因は究明されていません。

しかし運用を開始した直後に全く使えないのはサービスとして話にならないので、応急処置で対応することにしました。具体的には特定のエラーの原因となっている顔写真を橋本環奈に置き換えることで、エラーを回避することに成功しました。いくら動的型付けの高水準言語、Pythonとはいえ橋本環奈を相手にエラーを出すなど出来るはずがありません。

ひとまず対策ができたので大事には至りませんでしたが、やはり本番環境というのは予想もつかないようなエラーが発生するものです。開発中とはユーザーの数がまず大きく違ってくるため、予期せぬエラーの原因となります。また、想定していない操作をユーザーが行う可能性もあります。その辺はいかにUIでカバーできるかにかかっていますが、そのような操作が発生した場合でも問題の内容にシステムを設計する必要があります。

ファーストインプレッションと継続性📝

なんだかんだ、晴れて運用を開始したLabomartは、まず使ってもらわなければ意味がありません。そこでLabomartでは、キャンペーンを実施しました。リリースから1週間以内に登録してくれたユーザーには300円分の残高をチャージし、利用可能な状態にしました。つまり登録するだけで300円分タダで飲食できるというわけです。ファーストインプレッションとしては上々の出来で、28名の方に登録していただけました。これは研究室内の90パーセントの人数に当たります。問題は、ここからいかに継続して利用してもらえるか、というところです。運用開始から2か月たった現在、現金の合計チャージ金額は16000円となりました。一見すると順調な運用が出来ているように見えますが、そうではありませんでした。詳細なデータを参照すると、そのユーザーたちを以下のように分類することができます。

・登録後、キャンペーン残高すら消費しない → 10人(36%)
・登録後、キャンペーン残高のみ使用 → 13人(46%)
・登録後、現金をチャージして継続利用 → 5人(18%)

この分類で多くあってほしいのは、勿論継続利用のユーザーです。しかしながら実際はどうでしょう。継続利用のユーザーはたった5人、全体の18パーセントでしかありません。問題があるのか、魅力性が無いのか、使っていない人たちを分析して原因を知ることが、今後のLabomartの発展に向けての欠かせない工程であるといえるでしょう。

お金の動きと収益💰

先ほど、現在のチャージ金額の合計は16000円と記載しましたが、実際の収益はどうなっているのかも確認しておきましょう。
Labomart開始から現在まで、Amazonで購入した商品の合計金額は25940円です。キャンペーン分は事前に指導教員から頂戴しているため、僕の不利益にはなりませんが、支払いシステムの都合上、上述の16000円のうち2000円しかまだ手元に来ておりません。手痛い。一応Amazonの購入金額に数パーセントを上乗せした金額で販売していますが、パントリー手数料や、各サービス群を全て動かしているFirebaseの費用もかかるため、赤字か黒字かはギリギリなラインでしょう。
収益に関してはもっと具体的に、計算された値を閲覧したいため、近日そのシステムもLabomartに実装する予定です。

Labomartの未来🛒

Labomartでは色々な未来が実現可能であると考えています。

引継ぎ🎓
1つに引継ぎという選択肢です。研究として、あるいは研究室内の便利システムとして引き継いでもらう未来があります。サービスは運用されていてこそのサービスなので、それが卒業と同時に終わってしまうのでは寂しいです。とはいえ運用自体もそこそこ面倒、さらには口座情報やFirebaseの情報など、引継ぎ自体のコストは馬鹿になりません。そのコストを払ってまで運用、改善をしたいというCPSのB3は是非、名乗りを上げてくれたらと思います。

サービスの外部公開👟
もう一つの未来として、着手当初から思い描いていたサービスの外部公開があります。起業をするかしないかは置いておいて、研究室以外の小規模コミュニティへの進出ができると、Labomartとしては大きな前進と言えるでしょう。もちろん、Labomartの秘めたる可能性も広がることになります。
これに関しては上述の引継ぎよりもよっぽどコストがかかります。卒業までの残り3か月でそれが実現するのか、はたまた卒業後もかかわっていくことになるのか、正直僕にもわかりません。しかし是非、Labomartには可能性を広げて欲しいと考えています。他人事のように書いていますが、それをするのは僕たちなので頑張りたいと思っています。

最後に🧷

大変長ったらしい文章が出来上がりましたが、これで最後になります。

個人開発においてサービスを作成し、実運用まで行うという事は、様々な観点において大変難しいことであると感じています。しかし、技術的な知見は勿論、サービスを運用開始できた時の達成感や、サービスへの愛着など、多くの点で得られるものも大きかったでしょう。
個人開発を進めるコツは、期限と残留(せざる負えない環境に身を置くこと)にあります。CPSのB3は是非積極的に残留していってほしいです。
最後まで読んでいただいた皆様、どうもありがとうございます。

この記事が気に入ったらサポートをしてみませんか?