バグ・エラー・不具合を動画と画像とメタデータで再現可能にして開発者とサクッと簡単にブラウザの拡張機能で共有できる「Jam」レビュー

「Jam」はボタン一発でスクリーンショットや動画の撮影を行い、OSやブラウザのバージョンなどのメタデータと一緒にまとめて共有できる状態にしてくれるChrome・Edge・Arc・Brave・Operaなど各ブラウザ向けの拡張機能です。ユーザーからのバグ報告を受けるのに便利そうだったので実際に使い勝手を試してみました。

Jam | Build a bug-free product.
https://jam.dev/

Jamの公式サイトにアクセスし、「Get Jam for Free」をクリック。

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリック。

アカウントの作成を求められます。今回はGoogleアカウントを使用するので「Continue With Google」をクリック。

ログインに使用するアカウントをクリックします。

「次へ」をクリック。

Jamを開きやすいよう、拡張機能画面からJamのピン止めをオンにします。

ウェブサイトでバグを見つけたら、Jamをクリックして「Capture Screenshot」をクリック。「Ctrl＋Shift＋S」というショートカットも用意されています。

画面のうち、スクリーンショットに収めたい範囲をドラッグ＆ドロップで選択。

画像の編集画面が開きます。フリーハンドで線を引けるほか、四角や丸、矢印、線という図形を挿入したり、コメントを画像内に追加したり、画像の一部にぼかしを入れる加工が可能です。右にコメントを記入し、「Create」をクリックします。

共有用のページが開きました。右上の「Copy link」をクリックし、コピーされたURLを開発者に共有すればOK。

開発者側はURLにアクセスするとログイン不要で内容を確認できます。左にスクリーンショットが表示されており、右上に送信者の名前とコメント、右下にURLや送信者の端末情報などのメタデータが記載されています。

スクリーンショットは選択した範囲だけでなく画面全体のものも用意されており、「ユーザーが実は切り抜く場所を間違えていた」という場合でも大丈夫。

右下のメタデータ欄では開発者ツールで確認できる「Console」や「Network」の情報だけでなく、「Actions」としてクリックやリロード・タブの切り替えなどユーザーのタブ内でのアクション一覧を確認可能です。

Sentryを使用するとバックエンドとの連携も可能とのこと。バックエンドと連携するには月額50ドル(約7800円)のビジネスプランを契約する必要があります。

また、「JamGPT」としてチャットAIが用意されており、バグの内容を分析して修正点や推奨事項を表示してくれるとのこと。

スクリーンショットは即時撮影のほか、「3秒後」「6秒後」という選択肢が用意されています。

また、「Record tab」「Record desktop」「Instant replay」では動画を撮影することが可能です。

「Record tab」では録画開始まで数秒のカウントダウンが入ります。

録画開始後は画面下部に下図のようなコントロールが出現。「Record desktop」ではいきなりこの状態になります。左端の停止マークをクリックすれば録画を終了できます。

動画の場合、画像のように記号や文字を追加することはできませんが、代わりに「何秒から何秒までの範囲を送信するか」を選択可能。その後のコメントを書いてJamを作成し、開発者に共有する流れは画像の場合と同様です。

「あ！今バグが発生していたのに撮り逃した！」というシーンは多いものですが、Jamの「Instant replay」には常に過去2分間の動画が保存されており、「Instant replay」をクリックすると過去2分間の動画の中から必要なシーンを抜き出して開発者に送信できます。

「バグを撮影・録画して共有する」というJamの基本機能は永久に無料で使用できるとのこと。その他、無料プランでも2人までのチーム機能が使用できるほか、Slackとの連携やJamGPTの使用が可能となっています。

月額8ドル(約1250円)のProプランではIssueトラッカーとの連携が可能になり、月額50ドルの(約7800円)のビジネスプランではセキュリティやアクセスコントロール、バックエンドとの連携機能、10人までのチーム機能が利用可能。さらにエンタープライズプランではデータをオンプレミスで保存したりシングルサインオンに対応したりすることができると価格のページに記載されていました。