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」とかかれたボタンを押す事で、フォームの入力に反映させる事ができます。

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



堀 悟大

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

エントリーリスト

カテゴリーリスト

タグクラウド