この山の様な作業依頼が今すぐ全部まっさらになったら良いのに。開発するつもりが、日々メンテとバグつぶしに奔走する毎日。Web プログラマの現状でしょうか。そんな鬱憤を晴らしてくれるスクリプトが最近話題です。

HTML 崩壊 meltdown.js – KAZUMiX memo

こちらで提供されている、HTML がバラバラ崩れて行くスクリプトが爽快です。Bookmarklet が用意されており、これであちこち崩壊させられます。作業依頼の板など、まさに「依頼がゴミのようだ！」とあっと言う間にまっさらにしてくれます。なかなか先に進めない時にやると、気分が 3 倍くらいすっきりします（当社比・個人差があります）。

ただ、KUZUMiX さんの用意されている Bookmarklet は、KUZUMiX さん鯖の js ファイルを読みに行くようになっており、プログラマ的には、とっても微妙な気がします。なので、ダウンロードして、自分の鯖に置いてと、、、それだと何なので、先日紹介した、JSActions にでも突っ込んで使いましょう。右クリックでいろんなページを崩壊させることが出来ます。アホみたいにあちこちのページを崩壊させまくって喜べます。仕事は減らず、あっと言う間に時間がなくなって行きます。危険ですね。

さて、話はちょっとだけ逸れて、私の働いているネクストでは、エンジニアには、20% ルールがありまして、毎週金曜日は、好きに使って良い日となっています。好きに使って良い他、勉強会のようなこともやっており、今、JavaScript の勉強会他が開かれています。で、そんな JS な中、この HTML 崩壊スクリプトが話題になりました。そこで、

これがコナミコマンドで発動したらアレですね。

と誰かが言ったとか言わなかったとか。そうそう、そう言えば、コナミコマンドあったよね。今日アジアシリーズを制したドラゴンズのヘルメットにも KONAMI って書いてあったし。で、

• お知らせ:「コナミコマンド」を実装しました
• JavaScript で波○拳を繰り出すことはできるか？

を参考に HTML 崩壊スクリプトとコナミコマンドのマッシュアップ！

ですが、私、HHKB Pro を使ってまして、矢印キーがないので、コナミコマンド発動出来ないんですね。えぇ。でで、やっぱり崩壊は、「バルス」で発動して欲しいということで、そのように実装しました。

このサイトで、おもむろに「BALSE」とタイプしてみてください。

崩壊が始まります。大文字でなくても OK です。目がぁぁぁ目がぁぁぁぁぁ！

ご自分のサイトに設置したい場合は、

こちらをダウンロードして head の中で読み込んでください。他にすることはありません。

せっかくだし、グリモンで使えるようにしようかと思いましたが、先祖還りということでやめました。欲しい欲しいと誰かが言うなればってとこですが。私、JavaScript なまら苦手なんですが、こういうのは、結構燃えちゃうたちでして。。

という訳で、「BALSE で HTML 崩壊させて楽しい」Hack。気に入ったら、今すぐ BALSE とタイプしてみてくださいねー☆

なお、ネクストではこんなおかしな事ばかりやっている訳では決してございませんが、こんな事もちょこちょこやっています。ネクストでは技術者を大募集しておりますので、一緒に働いてみたくなった人は、こちらから。その際、倉林のブログを見てと一言添えていただけると良いかも知れません。

便利に使いたい Bookmarklet はいっぱいあるじゃないですか。All-in-One Gesture で使えるのは 2 つだけ。そこまで使わないけど、使いたい Bookmarklet はどうしましょう。そんな時は、これ。

JavaScript Actions

これは、右クリックメニューの中から各種スクリプトを実行できるようにしてくれる Firefox の機能拡張です。使い方も簡単。インストールしたら再起動。

• jsactions
  • global : 右クリック時
  • image：画像クリック時
  • link：リンク右クリック時
  • selection：選択して右クリック時
  • startup：起動時

と言った感じで、適当にディレクトリを作って、Firefox で JSActions の設定からそのディレクトリを指定。欲しいスクリプトを適当に置いて、再起動。これで右クリックが変わります。ディレクトリ置き場はどこでも良いかと。

では、試しに作ってみましょう。以前作った「アルく」でも移植してみましょうか。

global ディレクトリに アルく.js を作成。内容は以前と一緒で、下記の通り。

Sel=document.getSelection();
if (!Sel) {
void(Sel=prompt(’type keywords:’,”))
}
if(Sel){
window.location=’http://eow.alc.co.jp/’+Sel+’/UTF-8/’;
}

以上。 これで、右クリックメニューの中の Actions の中に「アルく」が出来ると思います。出来てなかったら、再起動してみてください。今日は、テンションが低いので、スクリーンショットはなしの方向で。アルく.js をアップしようかと思いましたが、あまりにもたいしたものじゃないので、やめます。

出来たら右クリックで実際に起動してみると、ホントにちゃんと動くことが分かると思います。こんな感じで、どんどん利用頻度の高い Bookmarklet 達を移植して行くと Firefox が 3 倍くらい便利になります（当社比・個人差があります）。

ちなみに、この JavaScript Actions の一番良いところは、

ブラウザの URL 長制限に関係ないので、長くて複雑な Script も使えるところです。

使いようによっては Bookmarklet 以上に便利です。ブラウザで実行する個人的なスクリプトと言うと簡単な Bookmarklet 程度になってしまいがち？ですが、それだけだと、もったいなお化けが出るぞ。と。

という訳で、「 JSActions で右クリックからスクリプトを実行する」Hack。気に入ったら試してみてくださいねー☆

Web の開発をする場合、未発表のサービスならまだしも、それをビジネスとしてやっている場合など特に、本番環境でテストするなんて事はないですよね？個人でやっている場合、

• テスト環境
• 本番環境

複数人で開発している場合は、

• ユニット環境
  個々の開発者が開発を行う環境
• テスト環境
  結合環境。同時進行中の様々なプログラムが入り乱れる環境
• プール環境
  本番に反映するものだけをアップして動作確認する環境
• 本番環境
  表に出る本番環境

などが存在すると思います。呼び方や環境の数は様々だと思いますが、まぁ 1 つのサービス（ドメイン）に対して、少なくとも 2 つ以上の環境があるかと思います。うちは 4 つ。更に、サービスをたくさん開発している場合、開発環境、サブドメやドメインの組み合わせで、かなりの数の環境を行ったり来たりすることになる人もいるかと思います。私は、、、、数十程度ありますかね。

これをいちいち覚えて、ってたいしたルールじゃないでしょうが、環境を変更したい時に、ロケーションバーを直接いじるなんて、とてもじゃないけど、やってられません。やってる人もいますけど、私のような無精者には絶対無理です。

そこで、スイッチ 1 つで環境をころころ切り替えられるものがあったら良いと考えました。あったら良いというか、なきゃ無理と。

スイッチは Bookmarklet で良いでしょう。

で、私、 JavaScript 苦手なもんで、というか、こんなにたくさんを Bookmarklet だけで処理するのは辛そうなので、PHP にやってもらおうかと。PHP の処理の流れはこんな感じ。

• 変更したいURI 、どの環境に変えたいのか、あんた誰？を受け取る。
• 変更したい URI はどのサービスなのかを判別
• 行き先の環境にドメインを書き換えてリダイレクト

これだけ。ついでに Bookmarklet がなければ使えないので、パラメタを受け取らない場合は、Bookmarklet ジェネレータを表示するという出血大サービス。さらに、このツールの開発用に？debug モードを搭載。リダイレクトしないで、表示する。（あれ？この機能いらない？？）という訳で、出来たのがこちら。

• env_changer.txt（ソース）
• env.ini（設定ファイル）

ソースをダウンロードして拡張子を “.php” に変更して使ってくださいませ。で、env.ini の中に自分の使う環境をびしばし追加してスクリプトと同じ場所に置く。セクションは 4 つに別れていますが、 必要ない・足らない場合は適宜追加してください。

ちなみに、このプログラム、ユニット環境は、必ず

“xxx-unit-hoge.xxx.xx.xx”

となることを前提に書かれていますので、違う人は、そこ適当に書き換えてください。その他に設定することは、

• Bookmarklet ジェネレータを使うなら、ソースの下の方にある $a_1 の中の URI を自分が置く場所に書き換える。
• env.ini のユニット名は、hoge にする。実際には unit-hiroshi とか unit-kura とかなっても設定ファイルは hoge にする。
• もっと便利に使いたければ All-in-One Gesture のロッカージェスチャに登録しておく。

こんな感じで、使ってみればその強烈な便利さを実感出来ると思います。社内でも評判です。なきゃやってられない位。どんなサービスでもこの Bookmarklet で環境変更出来てしまうのがものすごく便利。自画自賛。

ロケーションバーを自分で書き換えるのに 10 秒かかったとして、ロッカージェスチャなら 0.1 秒程度。環境を変更するのにかかる時間を 1/100 に短縮出来ます（当社比・個人差があります）。今日は 3 倍じゃありませんよ。自信作なので。

という訳で、「環境変更ツールでサクサク環境変更する」Hack。たまにはプログラマっぽい Hack を。気に入ったら試してみてくださいねー☆とっても気に入ったら色んな人に広めてくれると良いかも知れません。

ちなみに、私が使用しているものは、これを色々拡張させた感じになっています。ここで公開しているものとはだいぶ違うよ。

掲示板とかで、よくこんなリンク見かけるじゃないですか。

ttp://www.lifehackslite.com/

これって普通には開けませんよね。会社の掲示板でリファラを残したくないとか、そんな理由だったりすることが多いですが、まぁとにかく不便。解決方法としては、

1. “ttp://” より後をコピーして、ロケーションバーに貼り付ける
2. “ttp://” より後をコピーして、マウスジェスチャ（ Firefox の機能拡張 AiO ）で開く
3. サイトへGO という素敵な Bookmarklet を利用する

の 3 つくらいをパッと思いつきそうですが、Firefox の機能拡張で、もうちょっと便利なものがあります。

テキストリンク

なる機能拡張。

Webページに書かれたURI文字列を、ダブルクリックするだけで読み込めるようにします。

だそうです。 通常 URL を開くのにある 4 ステップくらいが、なんと 1 ステップで開けます。

URI文字列をダブルクリックする。するとFirefoxがそれを読み込む。ハッピーな気分になれる。

ハッピーな気分にもなれるなんて素敵な機能拡張ですね。 設定でリファラを消すことも出来るみたいです。その名もステルスモード。

起動のトリガは、他の機能とかぶらないように。かぶるときっとおかしなことになると思います。これで、ttp などに関わらずテキストで書かれた URL に 3 倍くらい素早くアクセス出来ます（当社比・個人差があります）。と言う訳で、「テキストリンクを使ってハッピーな気分になれる」 Hack。気に入ったら試してみてくださいねー☆

これ、英語で言ったら何だっけ？とかこの英単語、どういう意味だっけ？と思ったら、ネットの英語辞書で調べますよね？Google とスペースアルクは蜜月な関係にあり？、Google 検索のオプションで、「和英検索」と「英和検索」があります。ググり方は、こんな感じ

• 和英 ライフハック
• 英和 life hacks

そうすると、こんな感じで英辞郎での検索結果へのリンクが出てきます。

さて、これだけで、かなりライフハック臭が漂いますが、今日は「英辞郎 on the Web β 版」が大公開中というのを記念して、これよりも 3 倍便利な英語の検索方法（当社比・個人差があります）をご紹介します。ちなみに、昨日作りました。

マウスで選択して反転したものを直接、英辞郎の検索結果へ、選択されたものがなければ入力する窓を立ち上げる Bookmarklet があったら便利じゃないですか。それがこれ。

アルく

非 IE の人は、上記リンクをブックマークツールバーなどにズズいっとドラッグ＆ドロップすれば使えるようになります。Firefox でしか動作確認してません。中身は至ってシンプルです。

javascript:
Sel=document.getSelection();
if (!Sel) {
void(Sel=prompt(‘type keywords:’,”))
}
if(Sel){
window.location=’http://eow.alc.co.jp/’+Sel+’/UTF-8/’;
}

視認性を上げるため、改行してあります。IE で使うためには、違うコードを書かないといけないんですが、今時 IE を使ってる人なんていないと思うので、今日は華麗に切り捨てますｗ これを使うことで、

• 「英和」とか「和英」とか打つ手間が省けます。
• 出てきたリンクをクリックする手間が省けます。

そんな感じで、超便利じゃね？と、昨日一人で盛り上がりました。特に「英和」の場合、英和の後に打つ単語は英語で、入力を変換するのが面倒だと常々思っていたので、かなり便利です。

この「アルくで英語を一発検索する」Hack。スペースアルクがこういう使い方をしろとも言ってないし、こういう使い方をして良いとも言っていなく、β 版だからいつ使えなくなる日が来るか来ないか、分かりませんが、気に入ったら試してみてくださいねー☆ IE の方は、これを機に Firefox を使い始めてみてはいかがでしょうか？

なお、この Bookmarklet の形は私の十八番で、他にもたくさんあるので、今度まとめて上げます。

1 行のコードで確実にクラッシュするという IE6 は使うの止めて、みんな Firefox 使えば良いのに。

さて、Firefox には機能拡張という大変便利なものがあります。文字通り機能が拡張できます。色々あるんですが、Firefox をインストールしたら真っ先に入れる機能拡張が All-in-One Gesture です（以下、AiO）。Firefox のバージョンは 1 も 2 もサポートしています。素晴らしい！

この AiO ですが、マウス操作に色々な役目を与えてくれるものなんですが、IE しか知らない人には、かなり衝撃的のようです。「お前、ミッキーマウスかよっ！（Disney のファンタジア）」みたいな感じです。

AiO は、それだけでかなり便利なんですが、ジェスチャをカスタマイズできます。

Firefox のメニューバーの「ツール」 ＞ 「機能拡張」 ＞ 「All-in-One Gesture」を選んで「設定」 ＞ タブの「ジェスチャのカスタマイズ」

のように展開していくと、そこで出来ます。この「ジェスチャのカスタマイズ」の中にとても気になるものがあります。

この「お気に入りのブックマーク #1/2 を開く」。気になりますよね。これにお気に入りの Bookmarklet なんか割り当てられたら便利だと思いません？「きっと出来るんだろうなー。でもやり方分かんないしー。」という方に、その方法をご紹介。

割り当てたいBookmarkやBookmarkletのプロパティを開いて、「キーワード」にAiO1とか書く。#2の方はAiO2。それだけ。

簡単でしょ？私は、プログラムするときの開発環境と、結合環境を切り替える社内用 Bookmarklet を割り当てて、普通の人の 3 倍は速く環境を変更しています（当社比・個人差があります）。

今日は、ここで終わりません。更に更に便利な使い方を。よく分からないマウスジェスチャの機能でロッカージェスチャっていうのがあるじゃないですか。ジェスチャのカスタマイズの一番下あたりに。

これはマウスのクリック操作で実行できるというヤツで、デフォルトだと

履歴を戻る ロッカージェスチャ（右→左）
履歴を進む ロッカージェスチャ（左→右）

と割り当てられていますが、どっちかを選んで「機能割り当て編集」を押して、上の方のどれかをクリックすることで、機能を切り替えることが出来ます。

こんな感じ。使い方はとっても簡単で、

右クリック→左クリックの順でクリックする
左クリック→右クリックの順でクリックする

だけです。こつは

最初にクリックした方をはなさないようにする

デス。という訳で、「All-in-One Gesture のジェスチャをカスタマイズしてサクサク開発を進める」Hack。ぶっちゃけ、開発環境を切り替える Bookmarklet そのものが社内的には相当な伝説の Life Hacks なんですが、何せ秘伝のタレでして公開出来ませんから、ご自分で作ってください。AiO のロッカージェスチャ、気に入ったら試してみてくださいねー☆

【追記】 Bookmarkletがうまく動かないようなので、一両日中に直します！ちょっと待ってて！！
【追記】 直りました！「%」がね。。（7/29）

「ルーチンは自動化するかゲームにしてしまう」というのがライフハックの重要な考え方のひとつとしてあります。この考え方は今後もたびたび取り上げていくと思うのですが、今日は、軽いものをひとつ。

会社の同僚が、毎日帰るときに「えきから時刻表」で今出たら何分の電車？というのを調べていました。会社の最寄り駅も自宅の最寄り駅も変わることは滅多にないので、入力するのが面倒じゃないですか。でも、日付や時間の関係上ブックマークにしてしまうのは無理。ということで、JavaScriptを使って現在時刻を取得して欲しい結果を得るというBookmarkletを作りました。

帰りの電車検索

このリンクを Firefox のブックマークにずずずいっとドラッグアンドドロップすると使えるようになります。IEでは使えません。呼び元の文字コードによって文字化けしたり、駅が見つかりませんなんて怒られることがありますが、そういった場合は、もう一回 Bookmarklet を押すってことで。

なお、駅が「勝どき」から「東中野」になっていて Bookmarklet を押して検索してから10分後以降の電車を検索するようになっているので、そこはご自分の環境にあったものに変えちゃってください。そんなの和かんねーよ！という方はコメントください。作ります。

javascript:
var from = ‘勝どき‘;
var to = ‘東中野‘;
var walktime = 10;
theDate = new Date();
month = theDate.getFullYear()*100+theDate.getMonth() + 1;
day = theDate.getDate();
min = theDate.getMinutes() + walktime;
if (min >= 60) {hr = 1}else{hr = 0};
min2 = min % 10;
min1 = (min – min2 – hr*60)/10 ;
hour = theDate.getHours() + hr;
url = ‘http://ekikara.jp/cgi-bin/route/route.cgi?check=off&intext=’ + from + ‘&outtext=’ + to + ‘&month=’ + month + ‘&day=’ + day + ‘&hour=’ + hour + ‘&min1=’ + min1 + ‘&min2=’ + min2 + ‘&airplane=on&sprexprs=on&utrexprs=on&max=5&half=on&cut=on&direct=on’;
location.href = url;

こんなソースになっているので、斜体の赤いところをご自分のものに変えてください。from に会社の最寄り駅、to に自分の家の最寄り駅、walktime にPCを落として最寄り駅に着くまでの時間（分）を入れてください。

そんなわけで、帰りの電車検索をBookmarkletで自動化して、いつもの 3 倍くらいラクして調べられるこの Hack（当社比・個人差があります）。気に入ったら試してみてくださいねー☆

ちなみに、私は、0：11 もしくは 0：21 って決まってるんで使ってません。