2015/08/10

プログラマに伝えるためのIssue(バグレポート)の書き方【GitHub編】

GitHubでアプリケーションを公開してから、Todoの代わりとしてIssueを書きたくなった。
ということで、プログラマに伝えるためのIssue(バグレポート)の書き方をまとめてみた。
ついでに、前職の炎上プロジェクトで多くのバグ報告を書いて、対応してきたので、そのときの経験も踏まえて書いておく。

Title


タイトルを書くときのポイントは次のとおり。
  • 簡潔であること
  • バグの内容が把握できること
  • 設計要素の名称を書くこと
  • 発生した状況がわかること
例:【伝票検索画面】キーワードを入力し検索ボタンを押下するとエラー

タイトルの先頭に【優先度】や【機能名】のように、隅付き括弧で目印を書くことが多い。

2015/08/05

リンクをバックグラウンドで開いたときにタブ情報を取得する方法

Chrome Extensions(拡張機能)では、Content Script・Background間で通信するときに「sendMessage」と「onMessage」をつかう。

Content ScriptからBackgroundへの通信は、特別なことをしなくてもできる。
しかし、BackgroundからContent Scriptへの通信は、ブラウザのどのタブに送信するかを示すタブIDが必要になる。


通常であれば、次のような実装ができる。
// background.js
  chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        // いろんな処理
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {
            // いろんな処理
            }, callback);
    }
);
しかし、ミドルクリック(ホイールクリック)などで、リンクをバックグラウンドで開いた場合、先にあげた実装方法では対処できない。


バックグラウンドで開いているため、タブがアクティブにならずchrome.tabs.queryではタブ情報が取得できないからだ。そのため、tabs[0].idの部分で次のようなエラーが発生してしまう。

Error in response to tabs.query: TypeError: Cannot read property 'id' of undefined

※ 「バックグラウンドで開く」とは、リンクを新しいタブで開くがアクティブにならないことを指す。もう少し補足すると、リンクを開いたときに表示されるタブが現在閲覧しているタブのままで、開かれたタブに移動しないということ。


2015/08/04

onsubmit="return false"にしているのにsubmitされてしまう

photo by Alex Proimos

Chrome Extensions(拡張機能)を開発しているときに、submitの無効化でつまづいたのでまとめておく。

submitが無効化できない


Extensions用のページで<form onsubmit=”return false;”>と書いているのに、なぜかページが更新されてしまった。

3時間くらい悩んで、コンソールに一瞬だけエラーが表示されていることに気づいた。
エラー内容は次のようなもの。

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash('sha256-....'), or a nonce ('nonce-...') is required to enabled inline execution.

インラインでJavaScript書いちゃダメだよ!というエラー。

Chrome Extensionsは、HTMLに<script type="text/javascript"></script>とか<form onsubmit=”return false;”>とは書かずに、すべて外部ファイルにまとめなければならない。


2015/08/03

文章の構成を考えるための専用エディタ『PlotEditor』

文章の構成を考えるためのエディタ『PlotEditor』をつくってみた。

Plot Editor

いくつかのテキストエリアに分かれており、それを付箋のように入れ替えたり、追加したり、消したりしながら作れるエディタ。
 

つくったもの


Plot Editor



文章の構成を考えるためのエディタ。

文章を考えるとき、いくつかのプロットを書き、組み立てながら仕上げていく。
その工程をサポートするためのエディタが『PlotEditor』

イメージとしては、付箋に書いて、入れ替えたり、追加したり、捨てたりできるエディタ。