Webサービスの開発・運営のノウハウを公開します。Chromeのアドオン10個カテゴリ:ツール紹介Tweetディレクターの渡邉雄介です。Chromeをメインで使っている人が増えてきた気がします。いうことで、今後のWeb開発においてはChromeの存在も無視できない存在になってきたのではないでしょうか。Life私自身も1年ほど前にメインで使うブラウザをFirefoxからChromeに変えました。ありませんでしたが、2011年5月にChromeウェブストアがスタートしたり、現在はFirefoxに負けないぐらいアドオンが充実してきた印象です。Chromeウェブストアはアドオンだけでなく、ブラウザ内で動作するアプリケーションやゲーム、見た目を変更できるテーマなどが豊富にまとめられています。そこで今回は、ディレクターの日常業務に役立つChromeのアドオンを10個ほど紹介していきます。Pendule「Pendule」はデザイナー向けのWeb開発ツールを統合したアドオンですが、ディレクターが日常業務で使える機能も多く、Webページの検証をするときは欠かせないアドオンのひとつになっています。私が主に使っているのは、おおまかに下記4つの場面です。使うとWebページ内で選択した箇所の色をRGB10・16進数で抽出。クリップボードにコピーできます。測るルーラー以外のエリアはlightboxのように暗くなります。用意されているのは10種類。sizeの入力も可能。ひと通りの検証はできます。それぞれ個別の機能を持ったアドオンも存在しますが、Penduleひとつでこれらの作業はできます。DeveloperのChrome版もあり、こちらもおすすめです。ChromeTM「Firebug」はHTML/CSS/JavaScriptなどをブラウザ上でリアルタイムに編集できるアドオンです。本家Firefox版と違ってHTMLの編集ができないなど一部制限はありますが、HTML/CSSのナビゲート機能は健在です。使用機会は多そうです。私がFirebugをよく使用する場面は2つあり、ひとつは本来の用途通り、HTML/CSS/JavaScriptの調整をするとき。ひとつは、Webページの検証結果をデザイナーやプログラマーにフィードバックするときで、下記のようにFirebugでバナーを入れたい箇所のスペースを空けた後、スクリーンキャプチャ→注釈を付けてメール添付といったことをすると、まず間違いは起こりません。企画書に貼り付ける画像でキャプチャが必要なときも、Firebugで適宜編集して余計な要素を削ってからスクリーンキャプチャ→企画書に挿入、といった使い方もしています。Menu」は、Chromeの右クリックメニューから選択した画像の詳細を表示してくれるアドオンです。Propertiesを選択すると、画像URLやサイズ、容量などが詳しく確認できます。Menuは特定の画像だけピンポイントで見ることができるので、補足的に利用しています。Google)」はその名の通りGoogle謹製のスクリーンキャプチャのアドオンで、単にスクリーンショットを撮るだけではなく、キャプチャのサイズ指定はもちろん、注釈・矢印や図形の挿入など仕上げの部分までこのアドオンひとつで完結できます。キャプチャのサイズは3パターンの中から自由に選択できます。(自動スクロールします)また、キャプチャした後に注釈や線・図形も入れられるため、Firebugとの併用で重宝しています。Screenshot」というアドオンはブラウザ画面を拡大表示にしたままキャプチャできたり、PNG以外でも様々な形式で保存できるため、さらに細かく調整したい場合はこちらもおすすめです。SwitchProxy!「SwitchProxy!」はプロキシを自動的に切り替えるアドオンです。最大の特長はホワイトリスト形式でURLを事前に登録しておくことで、そのURLにアクセスすると自動的にプロキシが切り替わります。この辺は、FirefoxアドオンのFoxyProxyやSwitchProxyと同じ感覚で使用できます。いった、わかりやすい名前を付けて管理することができます。拡張」を入れておくことで、どのページでもこれらの数値を一目で見ることができます。よって最後にツイートされた日時、すなわち現時点で盛り上がっているかがわかります。数だけでなく、同じページを「いいね!」したFacebookフレンドも表示されます。拡張Webページがはてブに登録された後、一定期間経つとコメント付きだけの表示に切り替わるのが地味に便利。自分の担当サービスはもちろん、日々検索してアクセスする様々なWebページでも、そこに書かれている内容だけでなく、ソーシャルメディアでの影響・反響を第三者の視点として考慮しつつ自分の中にインプットしていくために、この3つのアドオンの数値はよく見ています。Link」はクリップボードへのURLだけでなく、WebページのタイトルやHTML(a)タグなども合わせて取り込むことができます。Linkとほぼ同様です。カスタマイズも非常に簡単で、ペースト先のフォーマットをあらかじめ登録していけば、いちいち整形剃る必要もありません。私は、スクリーンキャプチャを撮った後、元のURLとタイトルを補足する用途でもよく使用しています。(Windows限定)。事前にIEで閲覧したいURLを登録しておくことで、アクセス時に自動で切り替わります。IEでの見え方をさっと確認したいときは非常に便利なのですが、しっかり検証・動作確認しなければならないときは純正のIEを使用した方がいいでしょう。以上、有名どころのアドオンを中心に10個ほど取り上げてみましたが、今やChromeはFirefoxに負けず劣らずの拡張性があり、便利なアドオンも上げるとキリがありません。自分に合ったアドオンを見つけて使いこなせれば作業効率も大きく上がります。いったことは割と日常茶飯事です。仕事の合間に探してみてはいかがでしょうか。