インタラクティブなアプリガイドの構築
サポートチームは、一度もインストールしたことのないアプリの操作に苦労することがよくあります。
スクリーンショットを載せたPDFが標準的な解決策ですが、ほとんどの人はPDFを読みません。私はもっと良いものを作りたいと考えました。実際のアプリのような感覚で使えるガイドです。ホーム画面が表示され、ボタンをクリックすると次の画面が現れる、といった体験です。
実際のスクリーンショットとクリック可能なホットスポットを使用して、インタラクティブなガイドを構築しました。
仕組み
画像にはFirebase Storageを、ロジックにはバニラJavaScriptを使用しました。外部ライブラリは使用していません。
- 各画面は1枚のフル画像です。
- 画像の上に「ホットスポット」と呼ばれる不可視の長方形を配置します。
- これらのホットスポットは、ピクセルではなくパーセンテージを使用しています。これにより、ウィンドウサイズが変わっても位置がずれません。
- シンプルなステートマシンがナビゲーションを制御します。各画面には、ID、画像、およびホットスポットのリストが含まれています。
エディタ
座標を手動で測定するのは時間がかかります。プロセスを高速化するために、スタンドアロンのHTMLエディタを構築しました。
- スクリーンショットをアップロードする。
- マウスをドラッグしてホットスポットを描画する。
- ホットスポットをターゲットの画面にリンクさせる。
- コードを直接エクスポートする。
デザインの選択
すべての画面に完全なナビゲーションがあるわけではありません。混乱を防ぐため、クリック可能なエリアに青いパルス状の光（グロー効果）を追加しました。これにより、ユーザーはどこをタップできるのかを正確に把握できます。
主な技術的教訓
- Firebase Storage: URLを手動で構築しないでください。SDKの
getDownloadURLメソッドを使用してください。これには、セキュリティルールをバイパスするために必要な認証トークンが含まれています。 - CSS Flexbox: カラムレイアウトで
flex: 1を使用する場合、親要素には明示的な高さが必要です。オーバーフローを防ぐには、子要素にmin-height: 0を設定してください。 - パフォーマンス: クリックのたびにFirebaseを呼び出すと遅延が発生します。インメモリキャッシュを実装し、モーダルが開いたときにすべての画像をプリロードするようにしました。これにより、ナビゲーションが瞬時に行えます。
- スケーリング: CSSの
transform: scale()プロパティを使用します。これにより、画面サイズに関わらず、画像とホットスポットが完全に一致したまま保たれます。
結果
- 実際のスマートフォンのように操作できる20個の画面。
- 視覚的な手がかりを持つ52個のホットスポット。
- プリロードとキャッシュによる瞬時の読み込み。
- あらゆるモーダルサイズに適応するレスポンシブデザイン。