JavaScript始めました

プログラマーという職業上、さまざまなプログラムに触れる機会がありますが、たまにびっくり（いい意味で）することがあります。新人のころはGDB等のデバッガで動作中のプロセスにアタッチできることを知りびっくりしたり、ちょっと前ではRuby on RailsのActive Recordが便利でびっくりしたり。そして、ここ最近で、びっくりすることが多いのはJavaScriptネタです。

実はちょっと前まで、私の中では「JavaScriptは邪道」という偏見たっぷりのレッテルが張られていたので、ここ数年のJavaScriptの情報は無意識にフィルタリングされ弾かれていたのですが、最近、Web上のプログラムをいろいろ見ているうち「JavaScriptすげー」と思うようになってきました。

たとえば、以下のリンク（クリックするといきなり動作します）。

HTML崩壊

「人をびっくりさせる」という要素はプログラミングの醍醐味のひとつだと思いますが、「Pro*Cの非マルチスレッドで野良DBコネクションプーリングを作ったぞ」などと非常に地味なネタの場合、自慢してみても反応してくれる人が殆どいなくて逆に凹む（私の実話）ケースが多いでしょう。うちは、金融系の通信ゲートウェイ開発に定評がある会社…、ということもあり、C等で地味に、TCP/IPで独自プロトコルのソケット通信処理を書いていたりすることが結構多いのですが、渋さ満点な一方、人をびっくりさせるプログラムとの距離がかなりあります。

そんな鬱積した気持ちを吹き飛ばしてくれるのがJavaScriptです。うまくするとこのBlogにスクリプトが書けるのでは？と思い、恐る恐る見よう見まねでサンプルを書いてみることにしました。とはいえ、JavaScript初心者で技術的に高度なことや、趣味の良いものも思い浮かばないので、とりあえずBlog上部の顔写真をどんどん大きくしてみたいと思います。試してみたら不細工な顔がどんどん大きくなっていてすごい恥ずかしかったのですが、まぁ勢い重視で（IEだと広告が押し出されてしまうのもとりあえず見なかったことに…）。

ブックマークレット:

恥ずかしいけど大きな顔

ソース:

</p> <p>javascript:(function() {</p> <p> var ZOOM = 1.03;</p> <p> var MAX_WIDTH = window.innerWidth||document.body.clientWidth;</p> <p> var imgs = document.getElementsByTagName("img");</p> <p> for (i = 0; i < imgs.length; i++) {</p> <p> if (imgs[i].src.match(/thumb\-170\.jpg/)) {</p> <p> var img = imgs[i];</p> <p> var timer = setInterval(function() {</p> <p> img.height *= ZOOM; img.width *= ZOOM; </p> <p> if (img.width >= MAX_WIDTH) {clearInterval(timer);}}, </p> <p> 200);}}})()</p> <p>

# ちなみにブックマークレットの書き方はdankogaiさんのが

# 見やすかったのでパクらせて頂きました（idまで…）。

スクリプトの内容ですが、document.getElementsByTagName()でimageを一式とってきて、画像ファイル名の一部で顔画像を検索し、あとはsetInterval()でじわじわと画像サイズを大きくしているだけです。ただし、正攻法で行くとtextareaの中身にbrタグが入ってしまう（MTだから？）ので「こんにゃろー」とblockquoteタグで囲んでいます。なお、FirefoxとIE6だけしか動作確認していません。他のブラウザなどで見れなかった方、残念がるほどのものでは全然ないですが、一応ごめんなさい。

とまぁ、JavaScriptだと派手なスクリプトが簡単にかけてしまうし、Blogツールによっては中に埋め込めるので、「人をびっくりさせる」プログラムを書くにはとても使い勝手が良いと思います。そんなプログラムをどんどん作っていくことで本格的にプログラムが好きになってもらえたらとても素晴らしいなぁ、と思うのでした。プログラマとして軸がぶれまくっている自分自身に後ろめたさを感じながら…

※このエントリはZDNetブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet編集部の見解・意向を示すものではありません。