LIFF アプリを活用したシステム設計・インフラ構築・UI/UX デザインまでをワンストップで提供。自治体の地域通貨 LINE アプリ開発

TOPPANデジタル株式会社

https://www.digital.toppan.com/ja/

システム開発

TOPPANデジタル株式会社

自治体キャッシュレス決済プラットフォーム「地域Pay®」
https://solution.toppan.co.jp/toppan-digital/service/areapay.html

お客様の課題

  • 地域通貨アプリ開発にあたり、システム設計・インフラ構築・UI/UX デザインまでを一気通貫で対応可能なパートナーを探していた。

対応と結果

  • アイレットがワンストップで対応し、開発効率やコスト最適化を図りながら LINE アプリと連携した地域通貨アプリをローンチ。

TOPPANデジタル株式会社様(以下、TOPPANデジタル様)は、自治体の地域通貨アプリをアイレットと開発しました。本プロジェクトの背景にある課題や目的、具体的な開発内容をご紹介します。

既存の地域通貨システムと LINE アプリを連携させるため、LINE アプリの開発に強いパートナーが必要に

TOPPANデジタル様は、「Expanding the Digital Potential 未来に挑む。世界を変える。」をビジョンに掲げ、TOPPAN グループ全体の DX 事業戦略策定、DX 事業の創出・推進、DX に関わる研究・開発、IT インフラの提供等を行なう企業。市場ニーズを先取りしてサービス開発を行ない、継続的に質を高めてお客様に提案する「創注型」のビジネスを推進しています。

同社は地方自治体のスマートシティ事業の一環として、地域通貨サービス「地域Pay®」を提供。本プロジェクトはTOPPANデジタル様が提供している地域Pay®に LINE アプリをつなぎ込む必要があるため、LINE アプリの設計からインフラ構築、デザインまで一気通貫で対応できるパートナーを探していました。そのような経緯から、以前に LINE を活用した地域通貨アプリの開発プロジェクトで協働したことがあるアイレットにお声がけいただきました。

AWS マネージドサービスをフル活用し、開発効率やコスト最適化を図りながらプロジェクトを推進

アイレットは LINE が提供する Web アプリケーション開発のプラットフォーム「LIFF アプリ」の設計から参画。月額の運用コストをなるべく抑えたいというご要望を受けて、運用負荷の削減を図れるサーバーレス構成を採用しました。さらに AWS マネージドサービスのみを使用することで、運用コストの最適化を目指しました。

今回は検証環境と本番環境で AWS アカウントが分かれていたため、検証環境に AWS CodeCommit を使用し、ブランチ発生時にトリガーを設定することにより、本番環境へのデプロイを自動化しています。また、アプリケーションとコンテンツのビルド/デプロイにも AWS マネージドサービスを採用。コンテンツのビルドには AWS CodeBuild を使用し、JavaScript のパッケージ管理ツールである Yarn を活用することで開発効率を高めています。もともとコンテンツのデプロイは AWS CodePipeline の機能を用いて対象の S3 バケットへデプロイすることを想定していましたが、検証過程で AWS CodePipeline のリソース情報がコンテンツのタグに付与されてしまうことが発覚。そこでデプロイの構成を見直し、AWS CodeBuild でビルドしたコンテンツを S3 に配置するように変更しました。

TOPPANデジタル様が保有する地域通貨システムとの連携には Amazon EventBridge を活用。対向先の環境でアクセスキーなどを用いてデータを連携する予定でしたが、ヒアリングを重ねる中で対向先でも AWS を使用していることが分かったため、IAM Role を使用した認証をご提案し、実装いたしました。

本プロジェクトは地域通貨システムと LIFF アプリを連携するだけでなく、既存の LINE 公式アカウントに LIFF アプリを追加する要件だったため、サーバーサイドとフロントサイドで仕様が異なる部分がありました。そのような中でも技術的な調整を重ねることで、スマートフォンのバーコードをコードリーダーで読み取って決済する CPM(Consumer Presented Mode)方式と、二次元コードをスマートフォンでスキャンして決済する MPM(Merchant Presented Mode)方式の双方を LIFF アプリ上で実現しています。

エンドユーザーが使用する画面は、TOPPANデジタル様が作成した構成図をもとにアイレットがデザインを担当しています。幅広い年齢層のユーザーが使うことを想定し、文字サイズや色数、デザインの種類などに配慮したシンプルで使いやすい UI/UX を追求。なるべく学習コストがかからない、分かりやすさを重視したデザインとなっています。

アプリケーションの機能要件が増える中でも、お客様と一緒に実装する機能の優先順位を付けることで、当初の予定通りの期日にローンチを実現。今後も引き続き機能を拡充していく予定です。

アイレットは、官公庁や自治体、独立行政法人などの公共・行政機関や、大学、研究所などの教育研究機関のシステム・アプリケーション開発、グラフィック・UI/UX デザイン制作、インフラ構築・運用をワンストップで提供し、社会を支える公共サービスのさらなる向上をご支援いたします。今後もこれまでに積み重ねてきた実績やノウハウを活かしながら、地域社会の発展に貢献してまいります。

(システム構成図)
TOPPANデジタル株式会社構成図

(使用プロダクト)

■アプリケーション

  • AWS WAF
  • Amazon CloudFront
  • Amazon S3
  • Amazon API Gateway
  • AWS Lambda
  • Amazon RDS Proxy
  • Amazon RDS

■バッチ

  • Amazon EventBridge
  • AWS Lambda

■CD/CI

  • AWS CodeCommit
  • AWS CodeBuild
  • AWS CodePipeline
  • AWS CloudFormation

■その他

  • AWS IAM
  • Amazon Route 53
  • AWS Systems Manager Parameter Store
  • AWS Secrets Manager

Credit

クライアントTOPPANデジタル株式会社

Recent Cases