こんにちは。フリーランス・コンサルタント＆エンジニアの 今回は前から個人的に開発をしていた、
バグ報告が楽にできるウェブサービス
を公開したので、開発経緯を記事にしたいと思います。
【追記：2019.03.31】残念ながらあまり利用されなかったのでBugGUIは閉鎖することにしました。ご利用いただいた方々、どうもありがとうございました！
（リンクは全て削除しましたが、せっかくなのでこの記事自体は残しておきたいと思います。m_ _m）
バグ報告を効率化 – BugGUI
なぜつくったか？
プログラマーあるあるなのかもしれないですけど、
いや、バグの状況をもっと詳しく教えてくだせぇ・・・（切実）
という場面に遭遇することって結構あると思うんです。
これって結構やっかいで、こっちの環境で再現ができない場合、まずそこから特定しないといけません。
つまり、
１．不具合を再現
２．バグを修正
という流れですね。
でも、バグ修正はなくすことはできないんで、せめて不具合の再現をショートカットできないだろうか？？と考えました。
不具合の再現するために必要な３つの要素
まず、不具合を再現するためには、以下の３つが重要だと思います。
１．不具合の説明
２．スクリーンショット
３．送信データ（GET／POST／Cookieなど）
この中の、１番目「不具合の説明」は基本中の基本で、不具合を発見した人ができるだけ詳しく開発者に内容を伝えるべきなのですが・・・・・・
バグチェックをする人が必ずしもプログラマーではない場合がある
という事実があります。
つまり、もしプログラマーがバグを発見したら、開発者ツールを立ち上げて、JavaScript でエラーが発生していないか？ファイルのロードができているか？などを確認するわけです。
でも、バグチェックをしてる人がプログラマーじゃなければそんなことはしません。そもそも開発者ツールも知識がなければ何が問題かも分かりません。
なので、１番の不具合の説明は今回ターゲットからは外すことにしました。
では、次にスクリーンショットです。
画像は文章と比べると情報量が多いので、不具合が発生した時スクリーンショットをとってくれているだけで再現がとても楽になります。
ただ、これもさっきの理由と似ていて・・・・・・
不具合を発見した人がそもそもパソコンに詳しくない場合もある
わけです。その場合はスクリーンショットをとる方法を知らないかもしれません。
そして最後に送信データ（GET／POST／Cookieなど）です。
正直言って、バグの特定はURLと送信データが揃っていれば再現は簡単ですが、これもプログラマーでなければ、POSTとGETの違いから説明する必要がでてきます。
ただ、ここで考えました。
スクリーンショットも送信データも、
ワンクリックで送信できるよ！
というプログラムで解決できるんじゃないか、と。
そこで策として出てきたのが、ブラウザの拡張機能（アドオン）です。
ブラウザの拡張機能でバグ報告を実現
文章は自動では作れません（今後AIが実現するかもですが・・・）が、スクリーンショットと送信データは、拡張機能を使って開発者に送信してやればいいわけです。
ちなみに、以前は今回のサイトは html2canvas.js というライブラリを使ってブックマークレットで実現をしようとしていました。
でも、このパッケージはとてもすばらしいんですけど、完全なスクリーンショットをつくることができない場合あり、うまくいきませんでした。
しかも、送信データを保持するにはブックマークレットではワンテンポ遅れてしまいます。
そこでブラウザの拡張機能として、手始めに Google Chrome の拡張機能を作成することにしました。流れは以下のようになっています。
１．拡張機能をつかってスクリーンショット自動化
２．BugGUI のウェブサイトへ移動
３．GitHubなどのプロジェクト管理サイトへバグを報告
その例が冒頭でも紹介した動画になります。
おわりに
これからは私自身のクライアントさん方たちにもこのシステムの利用をお願いしていこうと思っています。
無料で提供してますので、もしバグ報告を効率化したいクライアントさん、より詳しいバグ報告がほしい開発者の方々もぜひ BugGUI を試してみてくださいね。
以下からインストールできます。
BugGUI の拡張機能
ではでは！
