効率的なブックマークレット開発方法

みなさん、ブックマークレットを開発したことはありますでしょうか?ブックマークレットはURLにJavaScriptを書くことで命令を実行してくれるものなのですが、この開発が凄く大変です。
まずは、ブックマークレットを開発する順番を説明したいと思います。

1.即時関数でJavascriptを記述

即時関数とは、関数を()で括ることによって式として評価され、すぐに実行される関数のことです。

(function(){
    //ここに処理を記述
})();

このような書き方をします。

2.記述したJavascriptを圧縮

ブックマークレットとして実行するには一行に圧縮されたJavascriptでなければなりません。これはgulpなどのツールを使って圧縮してあげましょう。

3.先頭にjavascript:を記述

無名関数の直前にjavascript:を記述します

javascript:(function(){/*処理*/})();

このようなソースになります。これらの操作をした後にブックマークに登録するという作業をしなければなりません。簡単なブックマークレットならいいのですが、100行以上もあるながいブックマークレットになってくると、これらの作業をデバックの度に繰り返すのはたいへんですよね?
そこでブックマークレットを作る行程を効率化する方法を考えてみました。
それが下の図になります。


図を解説しますと、毎回ブックマークレットのjsを生成して、それをブックマークに登録し直すのがめんどうなわけです。なので、jsを書くと自動でブックマークレットに変換し、そのブックマークレットを実行するための別のブックマークレットをブックマークに登録します。ややこしいですね。そのブックマークレットをクリックすると、localhostにある、はきだされたブックマークレットがかわりに実行されるというわけです。

ソースにすると下のソースのようになりますね。

javascript:(function(){var newScript = document.createElement('script');newScript.src='https://localhost:8002/formChecker.js?hoge='+ Math.random();document.body.appendChild(newScript);})();

これらの処理を自動化してくれるgulp製のプロジェクトをgithubに公開しました。是非使ってください。


使い方

1. npm installで依存ファイルをインストール

まずはプロジェクトのディレクトリに移動していただき、npm installで依存ファイル等をインストールしてください。

2. package.jsonに必要な情報を記述

package.jsonのsettingsに必要な情報を記述します

下のソースは、formChecker.jsというブックマークレットを作成する一例です。

"settings":{
		"port":"8002",//jsをポート番号8002に設置
		"src":"src",//ブックマークレットを開発するディレクトリ
		"dest":"dest",//ブックマークレットの形式に変換されたjsが保存されるディレクトリ
		"https":false,//httpsで使用するか
		"js":"formChecker.js"//ブックマークレットの名前
}

3. srcフォルダ、destフォルダを作成し、ブックマークレットを編集する


githubからダウンロードしたフォルダには、srcフォルダおよび、destフォルダがないので、作成してください。あなたの作業環境は左の図のようになります。


4. gulpを実行し、bookmark.jsをブックマークに登録


次にgulpを実行してください。コンソールでgulpと入力するだけでOKです。
すると、bookmark.jsが自動で書き出されるので、それをブックマークに登録してください。

5. あとは開発するだけです。

あとはあなたのブックマークレットを開発してください。destに吐き出されたブックマークレットをわざわざブックマークに登録し直さなくても、事前に登録したbookmark.jsが自動で、destにあるブックマークレットを代わりに実行してくれます。


堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →