たいよう

2014.10.02

WEBサービスのフロントエンドのテストする際に便利なブックマークレット5選

ガジェット大好き岩本です。
以前、Leap Motion で遊んでいるという事を書きましたが、今回は、ようやく Ring が10月に発送される事が決定し、到着が待ち遠しくワクワクしてます!

さて、本題です。
最近は自社のWEBサービスのプロダクトマネージメントをしており、新機能をリリースする時や不具合の修正時にフロントエンドのテストをする事が多く、その時に多用している便利なブックマークレット5選を紹介したいと思います。
テストをする時以外でも使えるブックマークレットもあるので、最後まで読んで頂けますと幸いです。

ちなみにブックマークレットの登録は、それぞれのブックマークレットのリンクをブックマークバーやお気に入りにドラッグ&ドロップしてください。

1. URLの階層を1階層上がる

WEBサービスのテストをする際、決められたボタンやリンクを辿るだけでなく、ディレクトリ階層をダイレクトに上がって確認したりしますよね?
そんな時、いちいちURLを修正して確認するより、このブックマークレットを呼び出すと、簡単に1階層づつ上がる事ができます。

javascript:(function(){U=location.href.split(‘/’);P=U.pop();if(!P){U.pop()}T=U.join(‘/’)+’/’;location.href=T})()

ブックマークレット

2. http と https を切り替える

WEBサービスのテストで欠かせないのが、http と https でアクセスした時のテスト。
https でアクセスしなければならいURLに http でアクセスできてしまったりすると大問題ですね。
そんなテストをする時、このブックマークレットを呼び出すと、いちいちURLを修正する事なく、元が http ならば https に、https ならば http に切り替えてアクセスします。

javascript:(function(){U=location.href;location.href=U.match(/^http:/)?U.replace(/^http:/,’https:’):U.replace(/^https:/,’http:’)})()

ブックマークレット

3. パスワードを生成する

WEBサービスのテストをしているとパスワードを生成する必要がある場合がありますよね。
テスト以外でもランダムな文字列でパスワード生成する場合ありますよね。
そんな時このブックマークレットを呼び出すと、生成したいパスワードの長さを聞かれるので長さを入力すると、その長さのパスワードを生成します。
ちなみに、人間の判読がややこしい ‘1’ ‘I’ ‘l’ ‘0’ ‘O’ はパスワードに入れないようにしてます。

javascript:(function(UCL,PL,P){PL=prompt(‘password length’,PL);if(PL<UCL.length){while(PL–){PT=UCL.charAt(Math.floor(Math.random()*UCL.length)+1);if(P.indexOf(PT)==-1){P+=PT}else{PL++}};prompt(‘password created’,P)}}(‘abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789’,8,”))

ブックマークレット

4. マスクされたパスワードを調べる

WEBサービスのテストをしていてブラウザにIDとパスワードを記憶させていると、password属性でマスクされたパスワードを忘れてしまう事がありますよね。特にランダム生成したパスワードは。。
そんな時にこのブックマークレットを呼び出すとpassword属性でマスクされたパスワードを表示します。

javascript:(function(){var p=document.getElementsByTagName(‘input’);for(i=0;i<p.length;i++){if(p[i].type.toLowerCase()==’password’)p[i].type=’text’}})()

ブックマークレット

5. ダミー画像を生成する

WEBサービスのテストをしていると、画像のアップロードが必要になって、画像を用意しなければならい時ありますよね。用意するのが面倒ですね。しかもアップロードする画像のサイズが固定されていると更に面倒ですね。
そんな時にこのブックマークレットを呼び出すと、サイズや色、画像フォーマットを変えた画像を生成できます。
表示された画像をダウンロードして使ってください。
※画像の生成には Dynamic Dummy Image Generator という外部サービスを利用しています。

javascript:(function(w,s,b,c,e,t){w=window;s=w.prompt(‘image size’,s);if(s){b=w.prompt(‘background color code’,b);if(b){c=w.prompt(‘text color code’,c);if(c){e=w.prompt(‘image type : gif / jpg / png’,e);if(e){t=w.prompt(‘display text’,t);if(t!=null){location.href=’http://dummyimage.com/’+s+’/’+b+’/’+c+’.’+e+’/’+s+’_’+b+’_’+c+’_’+t+’?text=’+t}}}}}})(”,’320×240′,’ccc’,’555′,’png’,”)

ブックマークレット

以上、テストする際に便利なブックマークレット5選、如何だったでしょうか?
ちょっとした事で便利になったり効率化されたりすると気持ちが良いですね。
是非、ご活用ください!

それでは、また!