お菓子神社を技術で幸せにしてみた 〜アーキテクチャ編〜

こんにちは。エンジニアの南です。

このエントリーでは「お菓子神社を技術で幸せにしてみた 〜UX編〜」の続編としてお菓子神社を支える技術について紹介したいと思います。

お菓子神社のアーキテクチャについて

まず全体のアーキテクチャを下図にまとめました。

以下それぞれの補足を行います。

React Native

今回はReact Nativeで実装したスマホアプリをiOSとAndroidの両プラットフォーム同時に社内向けにリリースしました。

お菓子神社プロジェクトのメンバーはiOSアプリエンジニアとWebエンジニアの自分の2名体制ですが、React Nativeを採用した理由としては

  • iOSとAndroidアプリを同時に開発できるので開発コストが低いと言われているが実際のところどうなのか確かめたい
  • Reactを業務で利用しているWebエンジニアの自分としてはSwiftやKotlinで書くより圧倒的に学習コストが低そうだった
  • iOSアプリエンジニアとしては単にSwiftで書くよりReact Nativeで挑戦して技術の幅を広げたい

ということが挙げられます。

Firebase

その他のポイントとしてはモバイル・Webアプリ向けに様々なサービスを提供しているFirebaseをフル活用しています。

お菓子神社だけでも下記のサービスを利用しています。これらが全て無料(Sparkプラン)で賄えるなんて太っ腹すぎます。

  • Firebase Authentication:ユーザー認証機能。今回はGoogleアカウントでのログインに利用。
  • Firebase Cloud Firestore:柔軟でスケーラブルなNoSQLデータベース。全てのクライアントでリアルタイムでデータが同期・反映される。(例:新しいお菓子をデータベースに登録するとアプリ側で即座に商品が反映される)
  • Firebase Storage:ファイルストレージサービス。Androidのapkファイルを社内向けに共有する際に利用。
  • Firebase Cloud Functions:外部から呼び出し可能なサーバーレスのスクリプトを記述できる。使用金額集計やお菓子のデータベース登録など、お菓子神社の運営に必要なスクリプト用に利用。

Google Apps Script(GAS)

Cloud Functions同様サーバーレスでスクリプトを実行できます。

Cloud Functionsとの違いとしてはGoogleのサービス(スプレッドシートなど)との連携が非常に簡単にできます。

今回はスプレッドシートに登録したお菓子のリストをGASで取得しにいき、Cloud Functions経由でFirestoreに保存する際に利用しました。

Slack App

Slack AppはSlackで入力されたコマンドに応じてPOSTリクエストが投げられるスラッシュコマンドなど便利な機能を提供しているSlackの拡張機能です。

今回はIncoming WebhooksInteractive Componentsを使ってユーザーがアプリにお金をチャージした際に管理者(神主)にメンションを付けてチャンネルに通知し、その通知のボタンをクリックすることで支払いステータスが支払い済みに変えられるようにする機能を実装しました。両機能ともGASに記述しました。

機能ごとの処理フロー

次に機能ごとにどのように処理が流れているか説明します

お菓子神社アプリの主な機能は以下の通りです。

  • お菓子の登録
    • 神主が入荷したお菓子をFirestoreに登録する
  • お金のチャージ
    • ユーザーがお金をアプリにチャージしたら神主にSlackで通知が飛ぶ
    • 上記のチャージ金額を神主に現金等で支払い、神主が該当Slack通知で「集金完了」をポチるとチャージ履歴が支払い済みステータスになる
  • お菓子の購入
    • チャージしたお金でお菓子を購入できる(Firestoreのデータを更新するだけなので説明は割愛)

神主(管理者)が入荷したお菓子をFirestoreに登録する

お金のチャージ → Slackで通知 → 支払いステータス更新

実装してみての所感

以上ざっくりとお菓子神社の技術構成について説明してきましたが、ReactとFirebaseの実装経験がある人であればReact Native×Firebaseの構成で非常にスムーズに両OSでアプリを開発できると思います。

またReact Native × Firebaseの組み合わせはライブラリやドキュメントも比較的充実していいたのですごく助かりました。(他の言語に比べると英語が多いですが)

ライブラリのインストール、依存関係の解消で詰まったり、一部XcodeとAndroid Studioでの対応、OS毎の処理の書き分けが発生しましたが、それでもゼロからSwiftやKotlinで書くより開発コストは抑えられたと思います。

と同時に、今回は非常にシンプルなアプリでしたが、機能が増えてきたり、カメラ、センサー、Push通知等を実装しようとすると課題もでてきそうなので、そのあたりの機能も利便性向上に繋がるのであれば今後実装しながら技術面の検証をしていければと思います。

さいごに

今回はTABI LABOで採用している10%ルールを活用してアプリを実装しました。

10%ルールとは業務時間の10%(=1週間で半日)を技術力向上に繋がる活動に使うことができる制度です。

この制度を始めとしてTABI LABOでは中長期で開発力向上に繋がる投資や新技術を積極的に採用できるカルチャーがあるのでエンジニアにとって働きやすい環境が整っています。

少しでも興味を持って頂いた方は是非Wantedlyの採用ページもご覧ください!