JavaScript連載第14回とデベロッパーツール特集

デベロッパーツール特集は最終回、クロスブラウザJavaScriptのほうは第14回が公開されています。
デベロッパーツールの最終回は細かいネタを集めた感じに。個人的な一押しはChrome6から実装された about:about です。about:〜って2年前から何度かネタにされていると思いますが、そこそこ有用で使えるヤツはこのabout:aboutでカバーされているはずです。ただ、一部ミドルクリックから開かないと機能しなかったり、ブランクページが表示されるものがあったりしますが…。もちろん、Chrome7ならabout:labsも追加されていますよ。

クロスブラウザJavaScriptは基礎編に戻ってprototypeについて。あんまりクロスブラウザしてないけど、まあ折角なのでこのままthisとかcallとかについてかなり詳しく解説していこうと思います。
うーん、書こうと思えばいくらでも書けそうなほどネタはあるはずなんだけど、書くペースがなかなか上がらない、むしろ落ちている…。頑張らねば。

HTML5ガイドブック

Google API Expertが解説するHTML5ガイドブック

インプレスさんより、Google API Expertが解説する HTML5ガイドブックという本が2010/09/16に発売されます。
@futomiさん(Canvas、Drag&drop、FileAPI)、@Shumpeiさん(ApplicationCache、WebSocket、WebWorker)、@openspcさん(Video&Audio、Geolocation)に私(SVGと付録でECMAScript5とCSS3 Transitions)の4人での共著です。
内容はHTML5、というよりHTML5の関連APIについてです。HTML5の仕様自体についてはそれほど触れていません(特に私は…)。
というのも、HTML5の仕様自体というのは、これまでDOM Level0と呼ばれていたような各ブラウザで大体同じような動きをするけど仕様にはなっていなかったところや、間違ったHTMLについてブラウザはどう解釈するべきかとか、ブラウザを実装する側向けに定義された部分が少なからずあります。もちろんそれ以外にも色々ありますが、基本的に細かいトピックスの集合です(大きいトピックスは分離される傾向がありますし)。
多くのウェブ開発者にとって興味があると思われる新しいAPI(CanvasとかWebWorkerとかWebSocketとか色々)についてはHTML5の関連APIと呼ばれていて、HTML5自体の仕様ではないものが多いです。で、今回のHTML5ガイドブックはそういった新しいAPIを中心にした解説本です。多くの方にとって興味があるのはそういった新しいAPIだと思いますので、(安心して？)手にとって頂ければと思います。
ただ、新しいAPIと書きましたが私が担当したのはSVGだったりします…。SVG自体はどこも新しくないんですよね。ただ、HTML5(の仕様)でHTML中に直接SVGを書けるようになる(IE9やFirefox4にChrome7では既に実現済み)ので、今後はHTMLとの連携がポイントになってくるってところをネタに書きました。で、ご察しの通り特集：スタートアップ SVG｜gihyo.jp … 技術評論社とテーマ的にも時期的にも被っています…。
ただ、SVG以外にECMA-262 5th Edition(ECMAScript5)についても付録として書きました。ECMAScript5はまだ解説記事が少ない(と思う)ので、結構しっかり書いたつもりです。特にECMAScript5では読み取り専用属性などを定義できるようになったりと、大規模開発を意識した改訂が加えられています。HTML5でウェブアプリケーションが高度になっていくのに関連して、ECMAScript5もそれに適した言語へと進化しようとしています。そのあたりを是非チェックして頂ければと！
では、HTML5ガイドブックをよろしくお願いいたします。

デベロッパーツール特集第3回

Google Chrome版Firebug：デベロッパーツール取扱説明書の第3回はウェブサイトの最適化です。
Timelineパネル、Auditsパネルの使い方を解説しました。正直なところ、こういう最適化が必要なケースってあんまり少ないんじゃないかなーと思わないこともないのですが、知らずにやるのと知ってて無視するのとでは何かあったときに致命的な違いにもなり得るので、どういうものか見て頂ければと。
記事では「こういったツールの結果は参考にしつつも過信しないようにしましょう。」と締めているのですが、「これらのツールを使ってサイトをガンガン高速化しちゃいましょう！」みたいに締める方が「よくある」んだと思います。自分がそういうやり方が好きじゃないので意図的にそうしてますが、デベロッパーツールに関してはもっと受ける(釣れる)ようにしてとにかく広めることを目的にしても良いんじゃないかと思ったりもしています。(タイトルを取扱説明書なんて控えめにしないで、「まだFirebugをお使いですか？」みたいな。やらないけどね。)

JavaScript連載第13回

クロスブラウザJavaScript入門の第13回です。今回は簡単なアプリケーションの作成ってことで、これまでのまとめ・復習的な内容になっています。ただ「簡単な」と書きましたが、あんまり簡単じゃないかも…。
JavaScript部分は特に問題はなかったんですが、やはりCSS周りで少々手こずりました。IE6がposition:fixedに対応していないので、ページ全体としてはスクロールバーを出さずに、部分的にスクロールさせることでposition:fixed相当の表示をする方法を試してみました。IEがなんとかなったと思ったらOperaが…とか。

短縮URLの展開に使っているのは以前書いたAPI(ソース)です。Access-Control-Allow-Originヘッダをつけてあります。ちなみにこのAPIで一度に複数のURLを受け取らないのは、このサーバーから大量のリクエストを投げてしまうようなことがないように、という意図があったりします(気分的な話です)。

デベロッパーツール特集第2回

Google Chrome版Firebug：デベロッパーツール取扱説明書の第2回JavaScriptのデバッグとチューニングが公開されています。
前回は適当に使ってても大体わかるような基本的な使い方が多かったですが、今回は調べないとわからないだろうと思ったところを取り上げてみました。記事中でもリンクしていますが、id:monjudohさんのFirebugで元のJavaScriptのコードに手を入れずにdebug用のconsole出力を入れる方法 - 文殊堂のネタも取り上げました。
console.logはFirebug版と同じく、printfライクな機能を備えていますが、桁揃えみたいなフォーマット機能はサポートしていないのでイマイチ使い道がなかったり…。
WebInspectorの場合、console.logかconsole.dirのどちらか(DOMを解析したい場合にdirを使う)で事足りるでしょう。

プログラミングに最適なConsolasとかInconsolataとか

でInconsolataだけが紹介されているので、おまけ情報を少々。
Inconsolataというのは、Windows Vista/7 に標準で付属しているConsolasフォントに感銘を受けた作者がConsolasを意識して作ったフォントです。
ConsolasのほうはVista/7だけでなく、Visual Studioに付属してたりもします。一応、こちらからダウンロードもできるようです。
Download: Consolas Font Pack - Microsoft Download Center - Download Details

Windows(少なくとも7では)ではConsolasのほうがより(ClearTypeの効きが)綺麗だと思います。というか、InconsolataはWindowsだとどうも今一つ…、ただMacやLinuxではWindowsでのConsolasと同じくらいに綺麗みたいです。
Consolas:
Inconsolata:

もうひとつ、InconsolataはGoogle Font APIでも提供されています。
Inconsolata Font Family – Google Font Directory
そのため、

<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<style type='text/css'>
pre{
  font-family: 'Consolas', 'Inconsolata', monospace;
}
</style>

のようにすることでウェブ上でもInconsolataを手軽に利用できます(Consolasはお好みで)。

参考:yebo blog

JavaScript連載12回とデベロッパーツールの特集開始

これでできる！ クロスブラウザJavaScript入門の第12回として、XMLHttpRequest入門が、Google Chrome版Firebug：デベロッパーツール取扱説明書として、詳説：デベロッパーツールの使い方が公開されています。
デベロッパーツールというのはWebKitのWebInspectorのことで、FirefoxのFirebugに当たるブラウザベースのデバッグツールです。って、まあこのブログを読んでくださっている方には今更感があるとは思いますが。ただ、Firebugを始めWebInspector、Dragonfly(Opera)、さらにIEの開発者ツールにいたっても、すごい勢いで改良が進められていて、高機能化してきています。もはや、これらのデバッグツールなしでウェブ開発をするなんて考えられないでしょう。同時に使い方がわかり難くなってきている面もあるので、画像大盛りの解説にしてみました。
あと、WebInspectorはFirebugと機能的にはほとんど差がないし、なんといっても軽いので、もっとみんな使ってみてほしいなーと思っています。
# この前、id:secondlifeさんにWebInspectorだってCookieの編集くらいできますよと自慢げに話してしまったんですが、記事書いてて削除しかできないことに気が付きました。死にたい。localStorageは編集もできるんだけどね。
コンソールで複数行モードがないのが惜しいんですが、改行を含むコードをコピペすれば編集はできるので…。