2008.09.25
google が Chrome を発表し、なんだか最近はブラウザのスピード競争がホットな話題になっている。
不思議というか、面白いのが「ブラウザの速度」=「Javascriptの処理速度」というのがいつの間にか当たり前のようになっていることだ。
個人的には Javascript の処理速度よりも、サクっと起動して、メモリ消費量が少なく、滅多に落ちない方が嬉しかったりするのだが…
とはいえ、Javascript（以下、js）の処理速度がそれこそ何十倍も早くなってくると、jsをバリバリと活用したサイトが増えてくるだろう。
jsはなんとも不思議な言語で、何しろ様々なブラウザ上で動作するために、逆に言えば同じコードでも「あっちでは動くけど、こっちでは動かない」といった事が多発する。
そのために、Prototype や jquery といったフレームワークという「枠」を越えて言語そのものを拡張してしまったかのようなライブラリも広く普及している。
こんな展開を見せている言語は他にない気がする。
そこでプログラミング（開発）には欠かせない、jsの「デバッグ」というテーマを取り上げてみよう。
かの有名な小飼弾さんが「まだまだ私にも落とすべき目の鱗がいくらでもあることを教えてくれた」と評していた Head First JavaScript の 11章 に載っているサンプルコードを使って、それぞれのブラウザがどんなエラーメッセージを表示するのか比較してみた。
◆参考図書：Head First JavaScript
サンプルコードは 25行目 に
else if average < 50 {
というコードミスがあるものだ。正しくは
else if (average < 50) {
である。ブラウザは全て WindowsXP 上で確認している。 (more…)
2008.09.22
今、javascriptが熱いですね。特に、Google Chromeの登場で、javascriptの性能競争に拍車がかかっています。Chromeのjsエンジンv8では、JITコンパイラ方式を用いており、まさに次世代といった感じです。実際、使ってみるとその速さに驚きます。ブログ界隈をみると、そんなに速くなってない部分もあるようですが、実際どうなのでしょうか？開発中のクラウドマップは今はflashで作られているのですが、今後javascriptで書き換えることも考えています。ここでは、その際に必要になってくるDOM要素のアニメーションに関する性能をブラウザ毎に調べてみようと思います。
まず、簡単なベンチマークサイトを作ったので見てください。
こちら
ボタンをクリックすると多数のDOMが横一列に動きます。個々の要素をそれぞれ動かしてるのではなく、親要素のみを動かしています。アニメーションが終わると、経過時間が表示されます。
各要素は、シンプルなもの(primitive)と、ありがちなシチュエーションとして、各丸ボックスにしたもので評価しました。各丸ボックスはさらに、div要素を多数用いて表現するもの(div corners)、画像1枚で表現するもの(1 image)、4枚のコーナー画像を用いて表現するもの(4 images)で、評価しました。要素のCSS操作にはjQueryを用いています。
以下、いくつかのブラウザで各々評価した結果です。Bestは赤で、Worstは青で示してあります。
Firefox 3.0.1
1.3s (primitive)
12.0s (div corners)
1.3s (1 image)
5.5s (4 images)
Chrome 0.2.149.30
1.0s (primitive)
1.6s (div corners)
1.0s (1 image)
1.0s (4 images)
Internet Explore (IE) 8.0
1.6s (primitive)
4.3s (div corners)
1.6s (1 image)
1.7s (4 images)
Opera 9.51
1.6s (primitive)
2.3s (div corners)
1.6s (1 image)
1.6s (4 images)
（使用したマシンはdualcore 2.2GHz程度です。パラメタはベンチマークサイトにある初期値で設定したものです。ただし、ここでは厳密性はあまり求めていないので、数回の試行平均を取っただけの結果です。また、アニメーションの強制Delayがあるので、純粋な性能評価ではないです）
これを見ると、やはりChromeがダントツに速いです。
要素別で見ると、
primitive<1image<4images<div corners
の順で全体的に速くなっています。
また、Firefoxが、要素の子にdiv要素が多数ある場合(div cornersと4images)に極端に遅くなるという結果になりました。primitiveや1imageではFireFoxのほうがIEやOperaより速いのに、div cornersや4imagesではその逆で、しかも圧倒的に悪いです。これはもう、Firefoxの次期バージョンのエンジン（tracemonkey）に期待するしかないのでしょうか…
2008.09.12
ECMAScript3.1標準化の動きやGoogle Chrome リリース等
更にJavaScriptableな世界になりつつある昨今、いかがお過ごしでしょうか？
そんな激流の中でも、基礎的な部分に関する知識が最も大事ということで
今回はブックマークレットの仕組みについてをまとめさせていただきました。
特に、ブックマークレットについて
・セキュリティ的に非常に危険なシステム
・いつブラウザ側の規制で無くなってもおかしくないシステム
このようなイメージを持っていない方は、読んでいただけるといいかなーと思います。
記事は以下のPukiWikiページ（外部）にまとめました。
→ ブックマークレットの解説
それでは See you arguments.callee!!
2008.09.04
SEO等でよく耳にするページランクですが、その理論を知っている人って意外と少ないのではないかと思って勉強会のネタに取り上げてみました。下は、とりあえずその数学的な面白さが分かってもらえるように作った資料です。
(more…)
2008.09.01
webサイトを構築する上で、情報を暗号化しサーバとのやりとりすることは当然のようになってきていますが、
具体的には、どのようになる？、どのようにするなど？わからない方のためおさらいしてみます。
httpsなどでよく聞くことは
「サーバとブラウザ間の通信を暗号化し、プライバシーに関わる情報やクレジットカード番号などを
安全にやり取りすることができる。」
上文を読んでよくわからない、しっくりこない方は、
まず、httpとhttpsの違いについてですが、
HTTPの通信は、暗号化されない。
HTTPSはHTTPにSSL（Secure Socket Layer）を組み込むことで、
通信の暗号化、データの改ざん防止、通信相手の認証を
可能としている。
よって、
上図のようなことも可能となります。
http通信で、特に個人情報のやり取りなどをするときなど要注意。
httpsの設定は特に難しくありません。（サーバのOS、SSL構築などで検索）
webに構築方法など多数手順が公開されていますので、
チャレンジすることをオススメします。
また、いいサービスを提供する方は、使ってもらうユーザの安全を守ることも
いいサービスの1つです。
いいサービスを作成する際にセキュリティーにもこだわってみては・・・
