アイレット株式会社のクラウドを活用した導入事例
複数の iPad を連動させたインタラクティブなコンテンツ展示が可能に！イベントディスプレイ用 Flutter アプリ開発
掲載日：2024年1月12日
課題
- イベントの集客増加や顧客体験向上の手段としてディスプレイ・デジタルサイネージ活用が進む中、アイレットの技術力を生かした次世代型イベントディスプレイのソリューション創出を目指していた。
対応と結果
- イベントディスプレイ用の iPad アプリを開発。複数の iPad を同期させた映像表現やインタラクティブ展示が可能に。
アイレット株式会社（以下、アイレット）は、イベントディスプレイ用 iPad アプリを新規開発いたしました。本プロジェクトの背景にある課題や目的、具体的な開発内容をご紹介します。
イベント/スペースの集客増加や顧客体験向上につながる、次世代型イベントディスプレイのアプリ開発に挑戦
アフターコロナへの転換に伴いリアル回帰が進む中、イベント/スペースの集客増加や顧客体験向上の手段として、ディスプレイやデジタルサイネージを活用した新たな体験創出に注目が集まっています。
アイレットは、ディスプレイやデジタルサイネージ領域における最新技術やクラウドを活用した価値提供に取り組んでまいりました。そこで、これまでに培ってきた技術やノウハウを生かし、次世代型イベントディスプレイの新規ソリューション開発に着手いたしました。
今回企画したのは、複数の iPad を用いた映像表現やインタラクティブなコンテンツ展示。それを実現すべく、iPad アプリのインフラ・サーバー・フロントエンド開発を AWS 環境で行ないました。
端末ごとの通信ラグ低減や、オフライン環境下での動作など、イベント会場での活用を想定した設計
インフラ開発では、会場別・顧客別に運用することを想定し、AWS 環境をテンプレート化。システム冗長化を考慮して Amazon RDS と AWS Lambda のマルチ AZ 構成を採用しています。また、CI/CD（継続的インテグレーション/継続的デリバリー）環境を構築し、GitHub と AWS CodePipeline、AWS CodeDeploy を連携した管理画面の自動デプロイを実現。これにより、ソフトウェアの品質向上や安定した素早い対応が可能になります。
サーバー開発では、Web アプリケーションフレームワークの Django を使用。複雑なセットアップや構成は不要で、管理画面の自動生成もできるため、迅速なアプリケーション開発が可能になります。管理画面ではコンテンツファイルの一括アップロードも可能です。アップロード途中に失敗した場合でも失敗分のみアップロードし直せるよう設計しています。
フロントエンド開発では、WebSocket による通信を採用。各端末で通信時に発生するラグの影響を軽減すべく、加重平均を用いて同期するタイミングを調整しました。また、イベント会場で使用することを想定しているため、事前にコンテンツを同期しておくことで、ネットワークの輻輳発生時やオフライン環境下でもイントラネットを通じて動作が可能となります。さらに、セキュリティ面ではモバイルデバイス管理（MDM）ソフトウェアの Jamf Pro を使用し、iPad 端末の機能を制限するキオスクモード（Single App Mode）を設定しています。
そのほか、iPad 端末1台にサーバーの役割を付与することでサーバー機が不要になるため、搬出入・設営時の手間を減らせる点、複数端末の輝度を一括調整できる点など、イベント会場での運用を考慮した設計を行なっています。
設営時のネットワーク
複数の iPad がシームレスに連動した映像表現により、通常のディスプレイとは異なるインパクトを創出
開発したアプリでは各 iPad に表示されたメニューや画像などを操作できる「インタラクティブモード」や、複数の iPad を同期させた動画を再生する「映像モード」、インタラクティブモードから一定時間経過後に自動的に起動する「スクリーンセーバーモード」を搭載。
インタラクティブモード
動画モード
スクリーンセーバーモード
複数の iPad を配置することで、ユニークで新しいコンテンツ体験を提供することが可能になります。長方形や正方形に限らず配置することもできるため、より自由な表現の可能性が広がります。
デモンストレーションでは32台の iPad を同期し、シームレスに連動した一つの映像を再生することで、通常のディスプレイとは異なるインパクトを生み出しました。UI/UX にもこだわり、シンプルなタッチ操作による大胆なアニメーション動作とイメージ創出を実現しています。
アプリケーション開発には、単一のコードから複数のプラットフォーム開発が可能な Flutter を使用しているため、iOS だけでなく Android でも動作します。たとえば、社内で使用していない iPad 端末にアプリケーションをインストールして使用することも可能です。
今後もアイレットではデジタル技術やクラウドに関する豊富なノウハウと開発力を掛け合わせ、新たな価値創出を通じてお客様のビジネス成長に貢献してまいります。
システム構成図
使用プロダクト
・AWS Lambda
・Amazon API Gateway
・Amazon VPC
・Amazon RDS
・Amazon EC2
・Amazon S3
・Amazon CloudFront
・AWS Secrets Manager
・AWS CodePipeline
・AWS CodeDeploy
使用技術
・Flutter
・riverpod + hooks
・WebSocket
| 案件名 | 複数の iPad を連動させたインタラクティブなコンテンツ展示が可能に！イベントディスプレイ用 Flutter アプリ開発 |
|---|---|
| クライアント | アイレット株式会社 |
関連カテゴリー
お気軽にご相談ください。