LIFULL Creators Blog

LIFULL Creators Blogとは、株式会社LIFULLの社員が記事を共有するブログです。自分の役立つ経験や知識を広めることで世界をもっとFULLにしていきます。

トップ > フロントエンド > モバイルでのタップ成功率を可視化するツールの開発

モバイルでのタップ成功率を可視化するツールの開発

フロントエンド 業務効率化 開発事例

こんにちは。エンジニアの小林建太です。

今回はフロントエンド業務での課題をChrome拡張機能で解決を試みた事例をご紹介させていただきます。

LINEヤフー Techから2024年1月に公開された「Tappy」というツールにインスパイアされた拡張機能「Tap Analyzer」を開発し、公開しました。 chromewebstore.google.com

Tappyとは

Tappy（https://twitter.com/lycorptech_jp/status/1752587301564436593 より）
Tappyは、LINEヤフー Techが開発したスマートフォンのウェブサイトでのタップ操作の成功率を可視化するツールです。URLを入力するだけで、そのページに含まれるボタンやリンクなどのタップ可能な要素のサイズを分析し、指で操作しやすいかどうかを判定して可視化します。現在はiOS端末の解像度のみ対応しています。

tappy.yahoo.co.jp

Tappyの課題と着想

私はLIFULLにおいて認証が必要なページを開発していますが、UIについてはデザイナーが作成するデザインを実現するのみで定量的な評価ができていません。特にモバイルの利用者が多いため、ユーザビリティの分析を定量的に行えないかと考えていました。

Tappyで提供される「ウェブサイトでのタップ操作の成功率」はユーザビリティ（使いやすさ）とアクセシビリティ（情報に到達できるか）のどちらにも関わる指標としてある程度有用でしょう。 しかし、サーバー側で処理を行うため、動作にCookieやセッション情報が必要なページでは使用できません。

そこで、Tappyと同様の機能をクライアントサイドで実現するChrome拡張機能を開発することにしました。

ユーザビリティについては以下のIPAの資料が参考になります。 www.ipa.go.jp

アクセシビリティについては以下のMDNの資料が参考になります。 developer.mozilla.org

開発した機能

作成したChrome拡張機能は、以下の機能を備えています。

拡張機能「Tap Analyzer」が動作している様子

  • ウェブページ上のタップ可能な要素(ボタン、リンクなど)の大きさを解析
  • 要素のサイズからタップの成功率を算出
  • タップ成功率に応じてタップ可能な要素に色付けして可視化

技術

技術選定

拡張機能の作成にはPlasmoを利用しました。 Plasmoはブラウザ拡張機能専用のReactフレームワークです。 テストや自動デプロイするための機能なども提供しておりオールインワンなフレームワークです。

Chrome拡張機能はクセが強いChrome APIを利用して作成する必要がありますが、Plasmoはそれらの面倒なポイントを抽象化してくれます。 主な特徴は以下の通り。

  • React＋Typescript
  • ライブリローディング + React HMR
  • .env ファイルサポート
  • ゼロコンフィグで開発できる

競合としてCRXJSなども挙げられますが、こちらはViteをBundlerにした開発をスムーズにしてくれるもので、Chrome APIの抽象化などはしてくれません。

crxjs.dev

開発

chrome debugger API

私はこれまでに Webpack + Vue.js、CRXJS + Reactなどの構成で拡張機能を作成した経験はあるため、概ね苦労することはありませんでした。

その中で今回初めて触れたのがchrome debugger APIです。

chrome.debugger  |  API  |  Chrome for Developers

大雑把に説明するとChrome Dev Toolsで提供している機能をAPI経由で利用するものになります。 1 つ以上のタブにアタッチし、ネットワーク インタラクションの測定、JavaScript のデバッグ、DOM や CSS の変更などを行います。

今回の拡張機能のウィンドウサイズの変更に利用しています。

chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      if (tabs[0]?.id) {
        chrome.debugger.attach(
          {
            tabId: tabs[0].id
          },
          "1.3",
          function () {
            void chrome.debugger.sendCommand(
              {
                tabId: tabs[0]?.id
              },
              "Emulation.setDeviceMetricsOverride",
              {
                width: newDevice.getWidth(),
                height: newDevice.getHeight(),
                deviceScaleFactor: newDevice.getViewport().deviceScaleFactor,
                mobile: true,
                fitWindow: true
              }
            )
          }
        )
      }
︙
})

このように chrome.tab で現在のタブの情報を取得し、そのtab idに対してchrome.debuggerをアタッチしてウィンドウサイズを変更しています。

また、スクリーンショットの取得もchrome.debuggerを利用しています。

chrome.debugger.sendCommand(
            { tabId: tabs[0]?.id },
            "Page.captureScreenshot",
            params,
            (result) => {
              if (result) {
                // 画像保存
                const downloadEle = document.createElement("a")
                downloadEle.href = "data:image/png;base64," + result.data
                downloadEle.download = "screenshot.png"
                downloadEle.click()
              }
            }
)

LLMの利用

拡張機能開発の本筋ではありませんが、こういった試験的な開発を行いたい時に困るのがデザイン面です。 今回の開発においては拡張機能アイコンとポップアップウィンドウのUIのデザインをどう解決するか迷いました。

結果的に拡張機能アイコンはChatGPTのデザイン系のGPTsで作成し、UIのCSSはCopilotで適当なものを作成してもらい、完成としました。

ChatGPTで作成したアイコン画像

活用のメリット

この拡張機能を活用することで、以下のようなメリットが期待できます。

  • モバイル向けUIのタップ領域の適切なサイズを検討できる
  • 既存のページについて操作性を重視してUIを最適化できる
  • アクセシビリティの観点からも適切な設計ができる
  • Cookieやセッションが必要なページでもTappyの機能を利用可能

今後の展望

現在は一部の機能しか実装されていませんが、利便性を高めていきたいと思っています。

  1. 様々な解像度の端末への対応（現在はChrome Dev Toolsでデフォルト設定されたモバイル端末にのみ対応）
  2. UIの色分け以外の可視化方法の検討
  3. ユーザビリティの向上

個人で開発したため、個人のRepositoryとして公開しております。 是非、皆さまの貴重な知見やコードをコントリビュートしていただき、一緒にモバイルUIの改善に貢献していきましょう。

github.com

LIFULLでは共に成長できるような仲間を募っています。 よろしければこちらのページもご覧ください。

hrmos.co

hrmos.co