Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

フォームの自動入力に便利なBookmarkletを作った

フォームをテストするのに毎回同じデータを入力するのってめんどくさいですよね?
そこで、フォームに一度入力した値をlocalStorageに保存し、次回からはそのデータを自動入力するためのBookmarkletを作りました。


使い方


まずは、サイト「http://steelydylan.github.io/FormCompleter/」にアクセスし、上の図のようにオレンジのボタンをブックマークバーにドラックし、ブックマークレットとして登録します。


次に自動入力したいフォームのあるページに移動し、普段通りフォームに値を入力します。


次に、登録したブックマークレットをクリックすると、「FormCompleter」が出現します。最初に上の図のように自動入力したいフォームをQuery Selectorの方式で入力します。たいていフォームはformタグで出来ていますので、defaultでは「form」がセレクターとして設定されていますが、例えば、ページにフォームが二つ存在する時等は、「.form1」、「.form2」などのように指定することができます。


次に「Get Code」というボタンを押す事でフォームのデータがシリアライズ化されます。


シリアライズ化されたデータを「Save」というボタンを押す事で、ローカルストレージに保存できます。


ローカルストレージに保存された、シリアライズ化されたデータは、「Load」というボタンを押す事で呼び出す事ができます。


呼び出されたデータを、「Auto Fill」とかかれたボタンを押す事で、フォームの入力に反映させる事ができます。

使い方は以上になります。下のリンクよりダウンロードできますので、皆さん是非使ってみてください。



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

みなさん、ブックマークレットを開発したことはありますでしょうか?ブックマークレットは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の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド