ローソンデジタルイノベーション テックブログ

ローソンデジタルイノベーション(LDI)の技術ブログです

Flutterでサクッと作成したWebアプリケーションのシステム構成を紹介します!

ローソンデジタルイノベーション(LDI)でPMを担当している畑沢です。

本日は、社内向けに開発した在宅勤務報告システムとその構成についてご紹介いたします。

在宅勤務報告システムとは?

在宅勤務報告システムとは、在宅勤務を行うための申請と日々の業務報告を行うための社内向けシステムです。

LDIでは以前から在宅勤務ができる制度と環境は整っていましたが、新型コロナウィルス感染拡大を機に在宅勤務の利用者が増えました。

申請と報告をメールで行うルールになっていましたが、下記の課題がありました。

  • 申請、業務報告をメールで行うことが手間
  • 誰がいつ在宅勤務をしているのかの把握が難しい

課題解決のためのシステム構築の相談を受け、どうせなら社内のエンジニアで作ってしまおう!ということで、システム開発に至りました。

開発メンバーと開発のモチベーション

開発は私を含めたローソンアプリ開発チームの有志で行っています。

元々、今のローソンアプリの開発フレームワークとは別に、新たなフレームワークを学ぼうという動きがありまして、そこにタイミングよくシステム開発の話が降りてきたので、勉強しつつプロセス改善ができて一石二鳥では!?となり、開発がスタートしました。

ローソンアプリの開発フレームワークの記事はこちら

techblog.ldi.co.jp

システム構成

システム開発にあたり、どのように作りたいかのディスカッションからスタートしました。

せっかくシステム開発できるのであれば、今まで触れたことの無いサービスを利用してみようとなり、以下の構成になりました。

システム構成図

Firebase Hosting

Flutterで実装したWebアプリケーションのフロントエンドをホスティングしています。

Cloud Firestore

本システムに関わるデータを保存しています。

Cloud Functions for Firebase

Webアプリケーションのバックエンド側です。Node.jsで実装しています。

Firebase Authentication

ユーザー認証を行います。本システムではMicrosoft Entra IDと連携しています。

Microsoft Entra ID(旧Azure Active Directory)

ユーザーのアカウントを管理しています。

Microsoft Graph

ユーザーの属性情報をMicrosoft Graph経由で取得しています。

Sentry

フロントエンドでエラーが発生した場合のログ出力先として利用しています。

Bitrise

フロントエンドとバックエンドのデプロイを行っています。

また、フロントエンドのエラー解析のため、SourceMapをSentryに保存する処理も一連の流れで行っています。

最後に

開発中に学びになったことが多くあり、それらを記事にまとめ始めています。

開発メンバーが続々と投稿する予定なので、興味がある方は是非「読者になる」をお願いします!