Allied ArchitectsAllied ArchitectsEngineer Blog

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

2014/10/2 JavaScript

ガジェット大好き岩本です。
以前、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選、如何だったでしょうか?
ちょっとした事で便利になったり効率化されたりすると気持ちが良いですね。
是非、ご活用ください!

それでは、また!

たいよう
  • たいよう
  • マネージャー
  • 現在の主な仕事はプロジェクトマネジメントです。 Tips情報等、ライトな話題を中心に書いて行ければと思っています。

RELATION ENTRY

システム開発合宿 2014 冬 in 相模原

システム開発合宿 2014 冬 in 相...

2014/03/3 開発合宿

少し前の話になるのですが、2月7日~2月9日の3日間、7回目となるシステム開発合宿へ行ってきました。 今回の合宿の地は、ホテルウイングインターナショナル相模原! 今までは、河口湖、伊東、熱海など、比較的遠方の旅館へ行っていたのですが、人数も多くなり、宿を取るのが大変という事情で、今回は近場のビジ...

続きを読む

jQueryを使ってインクリメンタルサーチを実装してみる

jQueryを使ってインクリメンタルサー...

2013/11/26 jQuery

最近、社内では狩りが流行っているようですが、そんな事には目もくれず、自宅で Leap Motion を使っている姿を子供に見られて怪しまれている岩本です。(ウソ) ですが、Leap Motion で遊んでいるのはホントなので、別の機会で記事にでもしたいと思います。 さて、今回は、過去に書いた...

続きを読む

たいようの記事一覧へ

ページTOPへ