console.blog(self);

技術、読んだ本、いろいろ。

開発者のためのChromeガイドブック (Google Expert Series)

「開発者のためのChromeガイドブック」を読了した。著者のひとりである吉川徹さんから頂きました。ありがとうございます。著者全員のサインももらっちゃった。

本書は Chrome 使っているなら、手元にあるとても便利な1冊だと思う。

Chrome APIChromeウェブストアを利用しない、普通のWeb開発者でもデベロッパーツールの章は役に立つ。普段からデベロッパーツールを使っているけど、知らないことがたくさんあった。

内容紹介

Googleの考えるウェブの未来、それは「ウェブはアプリケーションプラットフォームである」ということです。 Chromeブラウザにはウェブアプリケーションで従来の制約にとらわれない機能を実現するためのAPIが数多く用意されています。

加えて、Chromeウェブストアでは開発者がウェブアプリケーションを公開・配布できます。

また、Chromeデベロッパーツールを利用すればこれらの開発/デバッグ環境として使用することさえ可能です。

本書はそのすべてを解説する史上初の書籍です!

本書は大きく3つの章がある。どれも日本語のまとまった資料が少ないので、こうやって1冊にまとまってるとうれしい。

  1. Chrome API
  2. Chromeウェブストア
  3. デベロッパーツール

Chrome API

Chrome API」では Chrome拡張機能(Chrome Extension)の作り方や、Chrome アプリの作り方が、サンプルアプリとともに紹介されている。

僕は Chrome Extension を作ったことがあるけど、初めて作るとそれなりに大変だった。 基本的なHTMLやJavaScriptはわかるんだけど、自分のやりたいことを実現するために、ChromeのどんなAPIを使えばいいのか、そもそもExtensionのファイル構成はどうなっているのか、というのがわからなかったから。

例えば、こういうこと。

  • content script と background page のどっちに何を書けばいいの?
  • 情報を取ってきてポップアップを出したいんだけど、どこにコード書いて、取ってきた情報をどうやって埋め込めばいいの?

もちろんちゃんとドキュメント読めばできるけど。

本書では、Extensionの仕組みから、実際にどうやって書いていけばいいのか、までちゃんと書いてある。

Chrome ウェブストア

Chrome ウェブストア、使ってる人ってどれくらいいるんだろう。僕はCodeGridを購読しているくらい。

Chrome ウェブストア自体の概要や、アプリケーションの登録の仕方が丁寧に解説されている。 テスターアカウントという仕組みがあるのは初めて知った。テスターアカウントを作ることで、クローズドβテストもできる。

Chrome ウェブストアの魅力は、マネタイズの方法がちゃんと準備さていることだと思う。アプリ自体の販売には、Chromeウェブストア決済が利用できる。拡張機能Chromeウェブストア決済ができない。

この Chromeウェブストア決済 の手順などが、本書では詳しく解説されている。こういうお金が絡むところは、けっこう複雑だり、全体の流れがわかりにくかったりするので、Chromeウェブストア決済を利用したいのであれば、とても参考になると思う。

デベロッパーツール

個人的にはいちばん参考になった。デベロッパーツールは毎日のように使っているけど、Chromeのアップデートとともにどんどん新しい機能が増えているから、知らないことも多かった。たくさんある機能を、ちゃんと使っていかなくては。

地味だけど知って嬉しかったこと。

  • 表示位置設定ボタンを長押しすると、縦・横・新しいウィンドを選べる

縦と新しいウィンドは知っていたけど、長押しできたとは…。なんか一時期横にしか出なくなって、困ってた。初期設定が変わったか、知らないうちに長押ししてたんだろうな。

普通の検索はよく使っていたけど、全文検索があったこと自体知らなかった…。当たり前だけど、これは便利だ。

こういうの、知ってる人はたくさんいると思うけど、知らなければ知らないまま使っていけちゃう。でも知ってるとぜんぜん違う。いろいろな機能が紹介されているので、デベロッパーツールをよく使っている人でも、知らないものもいくつかあるんじゃないかな。

地味だけどよく使うのはこんな機能。

  • 適用されているスタイルを表示する Computed Style
  • Styleの右上にあるボタンを押すと :hover や :focus なんかの状態を指定できること
  • JavaScriptデバッグで、要素が変更されたときにブレークするDomブレークポイント
  • ミニファイされたコードの整形

JavaScriptデバッグの章では、いろいろなブレークポイントの使い方が書いてあって参考になる。あるのは知ってたけど使ったことのないものも多くて、こんなふうに使えばいいのか、ということがわかった。

あとは普段あまり使わない Timelineパネル の使い方も参考になった。そんなにごりごり動くようなJavaScriptは書かないので。

Profileパネルは使うんだけど、なんとなく見ていてい、それぞれの項目の意味をちゃんと理解していなかった。あと関数のフォーカスとか非表示とか、あまり使ったことなかったけど、使ったら便利そう。

まとめ

最近いちばん使っているツールは、Chrome と SublimeText2。触れる時間の長いものほど、効率的に使えれば効果が高い。

ツールはどんどん進化していくから、それを使う側もいろいろ覚えていかなくてはいけない。Chromeについて、これほどまとまった情報はないと思う。

この本のお陰で、これまでよりもっと Chrome を使いこなせそう。


開発者のためのChromeガイドブック (Google Expert Series)
吉川 徹 あんどうやすし 田中 洋一郎 小松 健作
インプレスジャパン
売り上げランキング: 12,502