Corredor

ウェブ、プログラミングの勉強メモ。

アンケートサイトの色々な回答に一気に答えるブックマークレットを作った

これまで何回かに分けて作ってきた「アンケートサイト自動回答ブックマークレット」だが、その総まとめを作ってみた。

CodePen によるサンプル

まずはこの総まとめツールでどんなことができるか、という CodePen のサンプルを見せる。

See the Pen Survey Helpers Test by Neos21 (@Neos21) on CodePen.

見出し右側の「Execute」ボタンを押すと、各フォームに自動回答できる。

ブックマークレットを発表

この自動回答ができるブックマークレットは以下のとおり。

javascript:((d,s,e)=>{e=()=>{SurveyHelpers({cityName:'東京',districtName:'足立',age:25,ageRange:20,birthYear:1993,birthMonth:2,birthDate:24,gender:'女',marriage:'未婚',jobRegExp:'正社|社員'},{loop:5})};s=d.createElement('script');s.onload=e;s.src='http://let.st-hatelabo.com/neos21/let/hLHUwLzfytkR.bookmarklet.js';d.body.appendChild(s)})(document);

改行すると以下のとおり。

javascript:((d,s,e)=>{
  e=()=>{
    SurveyHelpers({
      cityName:'東京',
      districtName:'足立',
      age:25,
      ageRange:20,
      birthYear:1993,
      birthMonth:2,
      birthDate:24,
      gender:'女',
      marriage:'未婚',
      jobRegExp:'正社|社員'
    },{
      loop:5
    })
  };
  s=d.createElement('script');
  s.onload=e;
  s.src='http://let.st-hatelabo.com/neos21/let/hLHUwLzfytkR.bookmarklet.js';
  d.body.appendChild(s)
})(document);

大体分かると思うが、SurveyHelpers() の第1引数に書いた諸々の個人情報を、上手いことフォームに適用している、という仕組み。個人情報部分を任意の内容に変えたら、1行にまとめてブックマークレットとして登録すれば良い。

ブックマークレットの仕組み

このブックマークレットは、Hatena::Let というサービスを利用して作成している。

Hatena::Let は、「はてラボ」と呼ばれる「はてな」の実験的サービスの一つで、ブックマークレットを投稿できるサービスだ。ココに SurveyHelpers() の本体を投稿している。ソースコードは以下で確認できる。

script 要素を生成してこのコードを示す URL を指定し、bodyappendChild() することで有効にしている。ただしこのブックマークレットは関数を定義するだけなので、script 要素の onloadSurveyHelpers() を呼ぶ処理を付与してある、という仕組みだ。

script 要素を生成して外部サイト上の .js ファイルを読み込むことでブックマークレットを実行する、というアイデアは多くあるが、ブックマークレットに特化した投稿サービスが上手いことあって助かった。外部ファイルにしてあるので、改行やインデントを入れっぱなしでも使える。可読性が高く、更新しやすいスクリプトを運用できるので、メンテナンスもしやすいだろう。

一応、以下の Gist にソースコードのバックアップを用意しておいた。Hatena::Let がもし終了してしまった時は、このスクリプトをどこか別のところでホスティングすれば良いかな。


以上。ぜひご利用ください。