2019年3月31日バグ報告が楽にできるウェブサービスを公開しました今回は前から個人的に開発をしていた、バグ報告が楽にできるウェブサービスを公開したので、開発経緯を記事にしたいと思います。【追記:2019.03.31】残念ながらあまり利用されなかったのでBugGUIは閉鎖することにしました。ご利用いただいた方々、どうもありがとうございました!(リンクは全て削除しましたが、せっかくなのでこの記事自体は残しておきたいと思います。合わせて読みたいなぜつくったか?プログラマーあるあるなのかもしれないですけど、いや、バグの状況をもっと詳しく教えてくだせぇ・・・(切実)という場面に遭遇することって結構あると思うんです。これって結構やっかいで、こっちの環境で再現ができない場合、まずそこから特定しないといけません。1.不具合を再現2.バグを修正という流れですね。バグ修正はなくすことはできないんで、せめて不具合の再現をショートカットできないだろうか??と考えました。不具合の再現するために必要な3つの要素まず、不具合を再現するためには、以下の3つが重要だと思います。1.不具合の説明2.スクリーンショット3.送信データ(GET/POST/Cookieなど)この中の、1番目「不具合の説明」は基本中の基本で、不具合を発見した人ができるだけ詳しく開発者に内容を伝えるべきなのですが・・・・・・バグチェックをする人が必ずしもプログラマーではない場合があるという事実があります。エラーが発生していないか?ファイルのロードができているか?などを確認するわけです。バグチェックをしてる人がプログラマーじゃなければそんなことはしません。そもそも開発者ツールも知識がなければ何が問題かも分かりません。1番の不具合の説明は今回ターゲットからは外すことにしました。次にスクリーンショットです。画像は文章と比べると情報量が多いので、不具合が発生した時スクリーンショットをとってくれているだけで再現がとても楽になります。発見した人がそもそもパソコンに詳しくない場合もあるわけです。その場合はスクリーンショットをとる方法を知らないかもしれません。最後に送信データ(GET/POST/Cookieなど)です。言って、バグの特定はURLと送信データが揃っていれば再現は簡単ですが、これもプログラマーでなければ、POSTとGETの違いから説明する必要がでてきます。スクリーンショットも送信データも、ワンクリックで送信できるよ!というプログラムで解決できるんじゃないか、と。そこで策として出てきたのが、ブラウザの拡張機能(アドオン)です。文章は自動では作れません(今後AIが実現するかもですが・・・)が、スクリーンショットと送信データは、拡張機能を使って開発者に送信してやればいいわけです。いうライブラリを使ってブックマークレットで実現をしようとしていました。このパッケージはとてもすばらしいんですけど、完全なスクリーンショットをつくることができない場合あり、うまくいきませんでした。送信データを保持するにはブックマークレットではワンテンポ遅れてしまいます。拡張機能を作成することにしました。流れは以下のようになっています。ウェブサイトへ移動3.GitHubなどのプロジェクト管理サイトへバグを報告その例が冒頭でも紹介した動画になります。おわりにこれからは私自身のクライアントさん方たちにもこのシステムの利用をお願いしていこうと思っています。試してみてくださいね。以下からインストールできます。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。