どうも、まさとらん（@0310lan）です！
今回は、Webサイトで不具合があった際に、誰でも簡単にバグレポートをつくってシェアできる無料のChrome拡張機能をご紹介します！
1クリックするだけで、通信の異常やJavaScriptのエラーなど多彩なログをWebページとして生成してくれます。そのままシェアも可能なうえ、AIによるデバッグ機能も提供されているのが大きな特徴です。
ご興味のある方はぜひ参考にしてください！
■「Jam」の使い方！
それでは、「Jam」をどのように使えばよいか詳しく見ていきましょう！
まずは無料のユーザー登録を済ませるために、サイトのトップページからメールアドレスを入力してボタンをクリックします。
登録したメールアドレス宛に送付された「認証リンク」をクリックしましょう。
Chrome拡張機能のページに遷移するので、上部にある「追加ボタン」をクリックしてください。
拡張機能がインストールされたら、ログイン画面が表示されるので先ほど登録したメールアドレスを入力しましょう。
次に、「Jam」の拡張機能をブラウザのメニューバーに表示させて、使いやすくしておきましょう。
拡張機能アイコンを選択したあとに、「Jam」の横にある「ピン」アイコンをクリックしてください。
以下のように表示されていればOKです。
あとはいつでも「Jam」のアイコンをクリックするだけで、バグレポートを作成してシェアできるようになります。
■バグレポートを作成してみよう！
「Jam」はクリック1つで起動する簡単な操作が特徴で、どんなWebページであってもすぐにバグレポートを自動生成してくれます。
そこで、任意のでWebページを開いた状態で「Jam」の拡張機能をクリックしてみましょう。ポップアップウィンドウが表示されるので、「Capture Screenshot」を選択してください。
マウスのドラッグで指定した範囲を画像として保存できます。
次に、以下のような編集エディタが表示されます。
編集ツールを使って画像を加工できる機能が提供されています。
画像にラクガキをしたり、テキストや矢印などを簡単に挿入できます。
右側には任意のテキストを入力できるボックスがあるので、たとえば不具合の詳細を記述したりができます。
ちなみに、メールやSlackなどの別サービスへ直接シェアできる機能もあります。
最後に【Create】ボタンをクリックすれば、レポートの作成は完了です！
最終的に固有のURLで以下のようなログページが生成されます。
このページには保存した画像やテキストだけでなく、そのときに発生していた不具合情報などのログも一緒に保存されています。
つまりこのページをシェアするだけで、誰でもログ情報にアクセスできるようになるわけです（閲覧者を限定する機能もあります）。
■ログ情報を確認してみよう！
先ほど作成したログ情報のページを、もう少しだけ詳しく見ていきましょう。
ページの右下にはいくつかのタブが表示されており、たとえば【Info】タブにはバグレポートを作成したときの端末情報が確認できます。
PCの環境やブラウザのバージョンなど、いくつかの詳細を確認できるようになっています。
【Console】タブは一般的なコンソールログと同等な情報を確認できます。
JavaScriptの実行でエラーが発生していれば、その情報も確認可能です。
【Network】タブは、ページを表示する際に読み込まれたファイルなどを確認できます。
こちらも同じように、ファイルの読み込み時にエラーなどが発生していればその詳細を確認できるので便利です。
このようにログページをチェックするだけで、さまざまなエラーの原因を調査できるのが大きな特徴です。
ログページの基本的な使い方について、公式の動画チュートリアルも公開されているのであわせて参考にしてみてください。
ちなみに、ページ上部にある【Invite】ボタンをクリックすると、シェアするときの挙動を設定できます。
メールアドレスを登録して閲覧者を限定したり、誰でも閲覧できるように公開するような設定が可能です。
■AIを利用したデバッグアシスタントについて！
「Jam」のログページは、何か不具合があったときの情報を得るだけでなく、AIを利用して問題の分析やコードの改善をサポートしてくれる機能があります。
使い方は簡単で、【JamGPT】タブを開くだけです。
AIがチャットで会話を始めるので、サポートを受けたい場合は「Yes」を選んでください。
すると、現在起きている問題を自動で分析した結果を箇条書きで教えてくれます。
日本語に翻訳すると以下のようになります。
Uncaught ReferenceError: " txt is not defined "というエラーメッセージは、"txt "という名前の変数が使用されているが、定義されていないことを示唆しています。 以下、いくつかのポイントを紹介します： 1, " txt "が使用されている箇所がないか、コードを確認してください。使用される前に定義されていることを確認する。 2, 変数のスコープを確認する。関数内で定義されている場合、その関数の外で使用されていないことを確認する。 3, 変数名のスペルや大文字小文字をダブルチェックする。
この情報だけだとわかりにくい場合は、該当のコードをチャットへコピペしてみましょう。
すると、コードの内容を分析して正しいコードに変換してくれます。
コードが変換される場合も、何をどのように変えたのかチャットで教えてくれるので便利です。
AIを利用したデバッグのチュートリアル動画も公開されているので、あわせて参考にしてみてください！
プログラミングゲーム『異能な僕らと異常な世界』を公開！
近未来の東京。一部のエンジニアが【ギフトコード】によって異能の力を手に入れ凶悪犯罪を起こした。エンジニアを危険視した政府は全エンジニアを犯罪者予備軍と見なして隔離法案を制定。
この異常な世界から東京を取り戻せるのは、同じく異能の力を手に入れた善良なエンジニア組織だけ。異能の力はプログラミング力に応じて強さが変わる。今こそプログラミング力で凶悪犯罪を阻止せよ！
Java、PHP、Ruby、Python(2.x系)、Python(3.x系)、Perl、C、C++、C#、JavaScript、Objective-C、Scala、Go、Swift、Kotlinなどのプログラミング言語に対応しています。
■まとめ
今回は、誰でも簡単にバグレポートを作成＆シェアできるChrome拡張機能をご紹介しました！
とにかく使い方が簡単なうえ、AIを活用したデバッグも実現できるのは類似のサービスにはない大きな特徴だと感じました。
ほかにも動画として保存する機能も提供されていて、今後もさまざまなバージョンアップがおこなわれる予定です。ぜひみなさんも実際に試しながら、バグレポートの作成に挑戦してみてください。
＜参考リンク＞
・「Jam」公式サイト
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
