はじめに
こんにちは、ビジネスdアプリ開発チームの露口・德原です。
これまでモバイル端末向けに展開してきた「ビジネスdアプリ」の社内報機能に、PCブラウザ版が加わりました。本記事では、その社内報PCブラウザ版の開発についてご紹介します。
ビジネスdアプリについては過去の記事をご覧ください。
・サーバレスをフル活用したビジネスｄアプリのアーキテクチャ（前編）
・サーバレスをフル活用したビジネスｄアプリのアーキテクチャ（後編）
目次
社内報機能の概要
ビジネスdアプリの「社内報」は、管理者から従業員へタイムリーな情報共有ができる社内周知用サービスです。単なる掲示板ではなく、従業員に確実に情報を届けて閲覧状況を確認するための機能を備えています。
(画像はPCブラウザ版のものです)
主な機能の紹介
- プッシュ通知機能(通知はモバイルアプリ版のみ)
- 閲覧状況の確認
- リマインド機能(通知はモバイルアプリ版のみ)
- タスクの完了確認
その他にも記事のソート・フィルター機能、公開期限の設定、詳細な権限管理など、投稿管理に欠かせない機能を網羅しています。
今回のPCブラウザ版リリースで、記事を投稿する際はPCを利用し、受け取る側は状況に合わせてPCやモバイル端末で確認するといった事ができるようになりました。
本記事では、主にPCブラウザ版の開発についてご紹介します。
リソースを最小限に抑える2つの工夫
すでに運用していたモバイルアプリ版の社内報に加え、PCブラウザ版を開発するにあたって「いかに新規リソースを作らずに実現するか」という観点でUI/UXの設計しました。 具体的なアプローチは以下の2点です。
フロントエンド：CSS（@media）によるレスポンシブ対応への一本化
1つめの工夫は、PCブラウザ版専用のコードを極力作らないという点です。 通常、PCブラウザ版とモバイルアプリ版でUIが大きく異なる場合、コードを分けることも検討されますが、今回は元々あったモバイルアプリ版（WebView）のコードをベースに開発を進めました。 具体的には、画面サイズに応じて制御するCSSのメディアクエリ（@media）を採用しました。
- 共通コンポーネントの活用: ベースとなる構造はモバイルアプリ版と共有。
- 表示の制御: PCブラウザの画面幅を検知し、CSSで上書き調整。
これにより、ロジック部分は基本的に共通化し、スタイル定義の追加中心でPCブラウザ対応を実現しました。
バックエンド：既存APIレスポンスに合わせたUI設計
2つめの工夫は、APIサーバー等のバックエンドリソースもモバイルアプリと共有したことです。 社内報は元々モバイルアプリの1つの機能であり、モバイルアプリでの表示を前提としたAPIを作成していました。このAPIのレスポンスをそのまま活かせるUIをPCブラウザ版でも採用するというアプローチをとりました。 これにより、バックエンド側の開発工数を抑えることができました。
GTMによるログ分離の実装
今回のPCブラウザ版リリースにあたって、モバイルアプリ版と分けてログを収集するため、新たにGoogle Tag Manager（GTM）をベースとした行動ログ収集基盤を構築しました。
Google Tag Manager導入にあたって以下3点のメリットがありました。
グラフィカルユーザーインターフェース（GUI）による迅速なタグ管理
通常、Google Analytics 4（GA4）のイベントを追加・変更するにはソースコードの修正とデプロイが必要ですが、GTMなら管理画面（GUI）上でタグの設定が可能です。例えば開発者以外のサービス企画やマーケティング担当者も、タグの設定(追加・変更・削除)を管理画面（GUI）上で行う事が可能になります。
高精度なトリガー条件の設定
ページ単位の計測はもちろん、特定のURL、ボタンのクリック要素、フォームの送信など、細かな条件を開発不要で設定可能です。
プレビュー機能
ブラウザ上で実際に操作しながら、「どのタグがどのタイミングで発火したか」をリアルタイムでデバッグできます。検証時間を短くする事が可能になります。
デバイス判定と分析の仕組み
モバイルアプリ（WebView）版とPCブラウザ版のログを正確に識別するため、以下のロジックを実装しています。
- モバイルアプリ版かPCブラウザ版かの判定は、モバイルアプリ内のWebViewコンポーネントかどうかで判断し、 WebViewコンポーネントではない(＝PCブラウザ等である)と判断された場合にPCブラウザ版の行動ログを送信しています。
- 収集したデータはBigQueryへエクスポートし、分析しています。以下のフィールドを組み合わせて参照することで、モバイルアプリ版かPCブラウザ版かの行動情報を切り分けています。
- device.category: 端末の種類（mobile, desktopなど）
- device.web_info.browser: 利用されているブラウザの種類
GTMを中心とした基盤構築し、モバイルアプリ版とのログ分離を実現しました。これにより運用・検証コスト削減にも繋がっています。
終わりに
スマホとPC、どちらでも利用できるビジネスdアプリの社内報の開発についてご紹介しましたが、いかがでしたでしょうか。 私たちはこれからも、ビジネスの現場をより便利に変えていくサービスや機能の開発にチャレンジしていきたいと思います。
これからもビジネスdアプリをよろしくお願いいたします。
※ 私たちが開発しているビジネスdアプリに興味を持った方は、是非公式ページをご覧ください。 今回ご紹介した社内報やその他の機能について、私たちが開発している機能一覧が記載されています。
