この記事は MICIN Advent Calendar 2025 の 20日目の記事です。
前回は小野さんの、「2025年版: 開発環境のツールまとめ」 でした。
はじめに
MICIN 情報セキュリティチームの Kotaro です。
MICIN では、オンライン医療をはじめ、デジタルセラピューティクス事業、保険事業など様々なサービスを多くの方に提供しています。
そんな中、昨年のオフィス移転を機に、MICIN が提供している価値を可視化し社内でも共有できる仕組みを作ろうという話が挙がり、その方法として社員が見られる社内サイネージを導入することになりました。
こんな感じでオフィスの壁面に設置しています
今回は完全無料のサイネージアプリケーションを作るまでの汗と涙の結晶を書き記したいと思います。
後で自分でも振り返るためにストーリー部分が多めですが大目に見てください。
今回の開発に至った背景
先述の通り、MICINが提供する価値の可視化のためにサイネージが導入されたわけですが、可視化の手段としてひとまずは静的コンテンツで賄おうという話になっていました。
イメージとしては、例えばお客様からの声を紹介するスライドを作ってそれを画像 or 動画化したものをサイネージに表示するといった感じです。
一旦要件をまとめてみます。
サイネージの要件
- 公開範囲は社内限定
- 動画がループ再生できること
- 画像の表示ができること
- （ゆくゆくは）Slackの投稿を表示するなど、外部サービスとの連携ができること
動画や画像といった静的コンテンツの再生だけであれば、PCを用意してローカルの動画再生プレイヤーをサイネージディスプレイに表示するようにすれば実現できそうです。
ただしその場合、コンテンツの更新のためにはオフィス内の表示用PCを直接触る必要ありますが、MICINでは出社とリモートのハイブリッドワークのため、出社した時しか更新できないという柔軟性の低さや手間が発生します。
また、外部サービスとの連携といった今後の拡張性も加味すると、今回の要件に対してはあまりイケてない結果になってしまいます。
ほんならクラウド型のサイネージアプリじゃいってことで調べてみると実際そのようなサービスはありますが当然お金がかかります。
が、今回は社内用というのもあり基本的に費用はあまりかけずに実現する必要があったので自前で作ってしまおうという話になりました。
試行錯誤
1: Google Workspace + Google Apps Script （GAS）アプリケーション
まずパッと思いついたのは、(ほぼ)Google Workspace内のリソースで作ってしまう方法でした。
構成の概要とメリットは以下です。
構成
| 分類 | 使用技術 |
|---|---|
| フロントエンド | GAS 上で動く React アプリ |
| バックエンド | Google Apps Script |
| データベース | Google Spread Sheet |
| コンテンツストレージ | Google Cloud の Cloud Storage |
メリット
- 普段からGASはよく触っているのである程度わかる
- GASアプリケーションは公開範囲を社内（Google Workspaceの組織内）に閉じることができるので、つまり何もしなくてもGoogleアカウントでのログインが必要という認証機能をゲットできる
なぜダメだったか
Cloud Storageから動画を取得して再生する際のデータ転送でお金がかかっていました。
いわゆるエグレス料金というやつです。
エグレス料金は1GBの転送で○○円というような料金体系になっており、今回のように動画をループ再生し続けるアプリケーションには一番不向きな使い方でした。
数日動かしたあと、1日3,000円ほどかかっていたことが発覚しすぐに停止。
（このまま再生し続けていたら月10万円ほどかかるところでしたね…）
ちなみにS3でもエグレス料金はかかるので、詰みの状況かと絶望…。
そんな中、一筋のオレンジ色の光が差してきました。
2: Google Workspace + GASアプリケーション + Cloudflare R2
オレンジ色の導きの正体はCloudflareでした。
CloudflareにはR2というストレージサービスがあり、なんと「エグレス料金無料」を謳っているではありませんか。
先述の件でエグレス料金とは必然としてかかるのが世の真理だと思っていたので、目を疑っておそらく3度見ぐらいしましたが間違いありませんでした。
こういう発見をしたときの静かでアツい喜びっていいですよね。
というわけで次に試したのは前回の構成のうち、ストレージをR2に置き換えた構成です。
再度整理します。
構成
| 分類 | 使用技術 |
|---|---|
| フロントエンド | GAS 上で動く React アプリ |
| バックエンド | Google Apps Script |
| データベース | Google Spread Sheet |
| コンテンツストレージ | Cloudflare R2 ←NEW! |
メリット
- 普段からGASはよく触っているのである程度わかる
- GASアプリケーションは公開範囲を社内（Google Workspaceの組織内）に閉じることができるので、つまり何もしなくてもGoogleアカウントでのログインが必要という認証機能をゲットできる
- 動画再生に費用が掛からない ←NEW!
「勝った。」
しかし人生はそうも上手くいきません。
なぜダメだったか
先述の通り、前提としてサイネージアプリにアクセスするためには組織内Googleアカウントでのログインが必要です。
そのセッションが7日間で自動的に切れてしまい、ログイン画面に遷移してアプリケーションが止まってしまう現象にハマりました。
（おそらくこれ？↓）
外部ユーザー タイプと「テスト」の公開ステータス用に OAuth 同意画面が構成された Google Cloud Platform プロジェクトには、7 日後に期限切れになる更新トークンが発行されます。
https://developers.google.com/identity/protocols/oauth2?hl=ja#expiration
回避策として、アプリケーションを外部公開し、Googleでの認証を不要にする代わりにBasic認証の実装することも検討しました。
しかしながらGoogle Workspaceの設定によりそもそもアプリケーションを外部公開できなかったので、今回の構成も諦めその夜は枕を濡らしました。
最終形態 Cloudflare内リソースで構成
改めてこれまでに浮かび上がってきた実装の要件を整理すると以下です。
- エグレス料金が無料
- 勝手にログアウトされないよう外部公開しつつ、認証機能を導入
そもそもエグレス料金無料の条件を満たすためにCloudflare R2を使うことは確定していたので、他のリソースもCloudflareに合わせようということで最終的に以下の構成になりました。
それぞれの用途についても少し捕捉します。
| 分類 | 使用技術 | 用途 |
|---|---|---|
| フロントエンド | Cloudflare Pages ←NEW! | ・コンテンツ表示画面とコンテンツ管理画面のホスティング |
| バックエンド | Cloudflare Workers ←NEW! | ・コンテンツ表示用の署名付きURL取得 ・Basic認証 ・KVの更新 |
| データベース | Cloudflare Workers KV ←NEW! | ・表示するコンテンツをプレイリストとして格納 |
| コンテンツストレージ | Cloudflare R2 | ・動画、静止画を置いておく箱 |
完成イメージ
コンテンツの表示画面です↓
動画・静止画がループ再生されます
コンテンツ管理画面です↓
R2内の動画・静止画が右側にリスト化され、左のプレイリストに追加するとサイネージディスプレイに表示されます。
ポイントとしては、R2の無料枠は容量10GBまでなのでそれを超えないように使用量を可視化しました。
Geminiさんありがとう
Cloudflareを使ってみて思ったこと
今回R2を入り口に、初めてCloudflareを触ってみました。
まずは何といってもエグレス料金無料がデカいです。本当にありがとうございます。
もうCloudflareに足を向けて寝られません。
その他についても無料枠が大きいため、今回のように小規模なアプリケーションであれば完全無料で動かすことができます。
これを機にプライベートでも触ってみようかなと思いました。
次にサービス利用の手軽さです。
各種サービスが見やすくまとまっていたり、全体的にシンプルなUIになっているので操作にあまり困らない等、「うっ」となる要素が少ない印象でした。
例えばCloudflare管理画面のタブはこんな感じ
おわりに
ここまで長い道のりでしたが、最後まで読んでいただきありがとうございました。
何度か壁にぶつかりましたが今は元気にサイネージが動いていてホッとしています。
また、今回の開発の中で新しい技術・サービスにも触れることができました。
学びは楽しいものですね。
サイネージアプリを開発するとなってから初めて気づきましたが、意識して街中を見てみると至る所にサイネージが存在します。
駅の中の広告、カフェのメニューなどなど。
ということは、もしかするとあなたもサイネージアプリを開発する日がくるかもしれませんし、開発しているからこの記事を見てくださったかもしれません。
本記事がそんな方のヒントになれば幸いです！
MICINではメンバーを大募集しています。
「とりあえず話を聞いてみたい」でも大歓迎ですので、お気軽にご応募ください！
Discussion