<?xml version="1.0" encoding="UTF-8"?> <rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:xhtml="http://www.w3.org/1999/xhtml" ><channel><title>gaspanik weblog &#187; chrome</title> <atom:link href="http://blog.gaspanik.com/tag/chrome/feed" rel="self" type="application/rss+xml" /><link>http://blog.gaspanik.com</link> <description>beat one&#039;s brain</description> <lastBuildDate>Thu, 15 Dec 2011 23:53:18 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=</generator> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/tag/chrome/feed" /> <atom:link rel='hub' href='http://blog.gaspanik.com/?pushpress=hub'/> <cloud domain='blog.gaspanik.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' /> <item><title>便利な人には便利なChromeの拡張機能 33＋1コ</title><link>http://blog.gaspanik.com/chrome-extensions-for-better-browsing</link> <comments>http://blog.gaspanik.com/chrome-extensions-for-better-browsing#comments</comments> <pubDate>Thu, 22 Sep 2011 22:42:08 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[lifehacks]]></category> <category><![CDATA[scribbling]]></category> <category><![CDATA[browser]]></category> <category><![CDATA[chrome]]></category> <category><![CDATA[extensions]]></category> <category><![CDATA[services]]></category> <category><![CDATA[tools]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=6467</guid> <description><![CDATA[皆さんの普段使いのWebブラウザはなんですか？ ここ最近のボクはといえば、GoogleさんのChromeをメインブラウザとして使っています。Chromeも公開されているアプリや拡張機能を追加して、自分なりのブラウジング環境を作れます。そのまま使うか、拡張機能でカスタマイズするかはあなた次第です。そんなわけで、今日は数多ある拡張機能の中からボクが選んだ入れておくと便利かもしれない拡張機能を33＋1コ集めてみました。]]></description> <content:encoded><![CDATA[<p>皆さんの普段使いのWebブラウザはなんですか？ ここ最近のボクはといえば、GoogleさんのChromeをメインブラウザとして使っています。Chromeも公開されているアプリや拡張機能を追加して、自分なりのブラウジング環境を作れます。そのまま使うか、拡張機能でカスタマイズするかはあなた次第です。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-extensions-000.jpg" alt="chrome-extensions-000" title="chrome-extensions-000" width="450" height="253" class="alignnone size-full wp-image-6473" /></p><p>そんなわけで、今日は数多ある拡張機能の中からボクが選んだ入れておくと便利かもしれない拡張機能を33＋1コ集めてみました。前半は多くの人を対象に日常のブラウジング体験を快適にするもの、後半はWebサイトの開発系でちょっと役立つものといった感じでジャンル分けしてお届けします。ま、あくまでもボクが普段使ってるものベースですが…、キャプチャ中の★やユーザー数も参考に。</p><p>いくら拡張機能が便利だって言っても、入れすぎたらそれは重くなるだけですからね。適当に取捨選択して入れるなり、使う時だけオンにするなりしましょう。では、33＋1コいってみましょう。</p><p><span id="more-6467"></span></p><h3>日常のブラウジングを快適にする拡張機能</h3><h4 id="byextension"><a href="http://bit.ly/efzPnX">緊急地震速報 by Extension</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-001.jpg" alt="chrome-ext-001" title="chrome-ext-001" width="450" height="253" class="alignnone size-full wp-image-6494" /></p><p>震災以降、さすがに入れておこうかと思ったのが地震速報系のアプリ。スマートフォンにも一応入れてはいますが、仕事中はほったらかしだったりもするし…ということで、こちらの「<a href="http://bit.ly/efzPnX">緊急地震速報 by Extension</a>」を。必ず動作するという保証がないのは同じですが、他の通知系よりも速いので重宝しています。ちなみに今震源地を表示するβ版がテスト中です。</p><h4 id="offlinegooglemail"><a href="http://bit.ly/qYLJkW">Offline Google Mail</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-002.jpg" alt="chrome-ext-002" title="chrome-ext-002" width="450" height="253" class="alignnone size-full wp-image-6495" /></p><p>ボクはあまりGmailのヘビーユーザーではないのですが、「<a href="http://bit.ly/qYLJkW">Offline Google Mail</a>」は入れておくと便利な人が多いかもしれませんね。その名の通りで、オフラインでGmailを読むためのものです。必ずしもネットに繋がった環境にいるとも限りませんからね。備えあれば、嬉しいな、アハハハで。</p><h4 id="googlecalendar"><a href="http://bit.ly/qFjb3M">Google Calendar</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-003.jpg" alt="chrome-ext-003" title="chrome-ext-003" width="450" height="253" class="alignnone size-full wp-image-6496" /></p><p>Googleさん謹製の「<a href="http://bit.ly/qFjb3M">Google Calendar</a>」、こちらはGoogleカレンダーをパッと起動するもの。Googleカレンダーの設定でオフラインユースを有効にすればオフラインモードで開きます。ボクは便利だと思いながらも、Googleさんにさほど依存してないのでほぼ使っていません…。</p><h4 id="autopagerize"><a href="http://bit.ly/qJIShg">AutoPagerize</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-004.jpg" alt="chrome-ext-004" title="chrome-ext-004" width="450" height="253" class="alignnone size-full wp-image-6497" /></p><p>いや、これは大事でしょう。先日もOS Xアプリの記事後半のSafariの機能拡張で紹介した「<a href="http://bit.ly/qJIShg">AutoPagerize</a>」。もうこれがない生活なんて、続きのない連続ドラマですよ（なんだそれ）。検索ポータルの検索結果や「次ページへ」といったリンクがあるサイトの次のページを取得して自動的に繋げてくれます。</p><h4 id="fittrflickr"><a href="http://bit.ly/nsTggi">Fittr Flickr</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-005.jpg" alt="chrome-ext-005" title="chrome-ext-005" width="450" height="253" class="alignnone size-full wp-image-6498" /></p><p>ガラッと目的は変わりまして、「<a href="http://bit.ly/nsTggi">Fittr Flickr</a>」は写真共有サイトである<a href="http://flickr.com/">Flickr</a>の閲覧をしやすくするものです。しやすくというか、かゆいところに手が届く感じのカスタマイズをしてくれます。あまりいろいろ詰め込んでもなんなので、Flickrの閲覧を便利にするものはこれだけ入れてます。</p><h4 id="readabilityredux"><a href="http://bit.ly/mfCAR7">Readability Redux</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-006.jpg" alt="chrome-ext-006" title="chrome-ext-006" width="450" height="253" class="alignnone size-full wp-image-6499" /></p><p>ページの両脇ならともかく、「なぜ記事の本文中に嫌がらせのように広告が入ってるんだろう？」と思ったことはありませんか？、きっとありますよね（笑）。「<a href="http://readability.com">Readability</a>」はSafariのリーダーの元になったサービスで閲覧中のページから余計な装飾要素を全排除して表示してくれます。こちらの「<a href="http://bit.ly/mfCAR7">Readability Redux</a>」は公式ではありませんが同様のことができるんです。</p><h4 id="cloudsave"><a href="http://bit.ly/nsuInN">Cloud Save</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-007.jpg" alt="chrome-ext-007" title="chrome-ext-007" width="450" height="253" class="alignnone size-full wp-image-6500" /></p><p>公開されているコンテンツには著作権がありますし、そんな頻繁に使うとは思えませんが、サイト中の画像をクラウドなストレージサービスに保存する拡張機能が「<a href="http://bit.ly/nsuInN">Cloud Save</a>」。参考資料になりそうな画像とか、ちょっと後から見たい時に役立ちます。だって、Dropboxとかに直接保存できるんですもん。</p><h4 id="screencapture"><a href="http://bit.ly/ntVYzH">Screen Capture (by Google)</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-008.jpg" alt="chrome-ext-008" title="chrome-ext-008" width="450" height="253" class="alignnone size-full wp-image-6501" /></p><p>見ているブラウザの画面をキャプチャして、一言書いて友達に渡したい！って時に重宝するのが、こちらの「<a href="http://bit.ly/ntVYzH">Screen Capture</a>」。画面ショットを撮影して手書きで何か書き足して保存したり、Google+（というかPicasa）に送ったりすることができます。似たようなのに「<a href="http://bit.ly/oPnPPf">Awesome Screenshot</a>」とかもありますね。</p><h4 id="stylebotext"><a href="http://bit.ly/pfL0oq">Stylebot</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-009.jpg" alt="chrome-ext-009" title="chrome-ext-009" width="450" height="253" class="alignnone size-full wp-image-6502" /></p><p>「<a href="http://bit.ly/pfL0oq">Stylebot</a>」は、任意のドメインの下にあるコンテンツのCSSをカスタマイズしてしまう拡張機能です。たとえば、Twitterの右側に出てくる流行ってるキーワードとかこの人知ってるかも系のブロックを見えなくしてしまうことができます。<a href="http://stylebot.me/">Stylebot Social</a>というサイトもあって、有志がカスタマイズして公開しているサイト毎のCSSをインストールすることもできます。</p><h3>ソーシャルメディア系な拡張機能</h3><h4 id="pbtweet"><a href="http://bit.ly/lqxBjV">PBTweet+</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-010.jpg" alt="chrome-ext-010" title="chrome-ext-010" width="450" height="253" class="alignnone size-full wp-image-6503" /></p><p>ボクは、Twitterのタイムラインは普通にブラウザで見てるんです。で、こちらの「<a href="http://bit.ly/lqxBjV">PBTweet+</a>」は、Webブラウザで見るTwitterの画面にいろいろな機能を追加してくれる拡張機能です。タイムラインで見たくないキーワードを指定したり、一時的に任意のユーザーを非表示にしたりね。「#」とか非公式RTを排除する「RT」とか追加しておくとスッキリ（笑）。</p><h4 id="facebooklikebutton"><a href="http://bit.ly/qgRpBj">Facebook Like Button</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-011.jpg" alt="chrome-ext-011" title="chrome-ext-011" width="450" height="253" class="alignnone size-full wp-image-6504" /></p><p>「<a href="http://bit.ly/qgRpBj">Facebook Like Button</a>」はその名の通り、FacebookのLikeのボタンです。ツールバーのトコに「いいね！」のアイコンと見ているページのLike数が表示されます。もちろんここから「いいね！」することもできますよ。</p><h4 id="bitlyasimpleurlshortener"><a href="http://bit.ly/ne2QYt">bitly | a simple URL shortener</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-012.jpg" alt="chrome-ext-012" title="chrome-ext-012" width="450" height="253" class="alignnone size-full wp-image-6505" /></p><p>「<a href="http://bit.ly/ne2QYt">bitly</a>」は、長ったらしいURLを短縮してくれるサービスの拡張機能です。アカウントを登録してツールバーのフグみたいなボタンをポチッとすれば、自分のTwitterやらFacebookのアカウントにいま見ているサイトのタイトルとURLに何か一言付け加えて放り投げることができます。</p><h4 id="bufferforchrome"><a href="http://bit.ly/mT3j7c">Buffer for Chrome</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-013.jpg" alt="chrome-ext-013" title="chrome-ext-013" width="450" height="253" class="alignnone size-full wp-image-6506" /></p><p>Tweetを指定時刻に自動でおこなうサービスである「<a href="http://bufferapp.com">Buffer</a>」の公式の拡張機能です。前述のbit.lyと同じように即時に放り投げることもできるし、アカウントを登録して時刻を指定しておけば、投稿リストに保存しておくことも可能です。Bufferは、RT数などでどれぐらいの範囲に拡まったか（まぁ、理論値というかただの合計ですが）もトラックできます。ソーシャルメディアをフル活用して宣伝とかしたい方は、無料で使えるこのサービスは使った方がいいですね（謎）。</p><h4 id="kloutbeta"><a href="http://bit.ly/jvuh4e">Klout (beta)</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-014.jpg" alt="chrome-ext-014" title="chrome-ext-014" width="450" height="253" class="alignnone size-full wp-image-6507" /></p><p>ソーシャルメディアにおける発言者の影響力をはかるサービスで有名な「<a href="http://klout.com">Klout</a>」の公式拡張機能です。残念ながら、発言の内容までは精査されないので、Kloutスコアが高くても…ってことも往々にしてあります。人のネタぱくっててもRTとかされたら数値高くなりますからね（笑）。ただ、コレ入れておくとTwitterの画面にみんなのスコアが表示されます。</p><h3>広告系のアレとかソレを無効化する拡張機能</h3><h4 id="adblockplus"><a href="http://bit.ly/r3UfHZ">Adblock Plus for Google Chrome&#8482; (Beta)</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-015.jpg" alt="chrome-ext-015" title="chrome-ext-015" width="450" height="253" class="alignnone size-full wp-image-6508" /></p><p>実はボク、数年前コレ系の話題でAERAにインタビューされてます（笑）。いや、ページ内に広告は入れるのはいいんですが、できれば邪魔にならないトコに入れて欲しい…だけなんですがね。「<a href="http://bit.ly/r3UfHZ">Adblock Plus</a>」は、入れるだけでサイト内の広告を非表示にしてくれます。もちろん、特定の配信サーバを指定することもできます、はい。ま、それ以前に右端とかは視界にいれませんがｗ</p><h4 id="googleanalyticsopt-out"><a href="http://bit.ly/rnBIgD">Google Analytics Opt-out Add-on (by Google)</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-016.jpg" alt="chrome-ext-016" title="chrome-ext-016" width="450" height="253" class="alignnone size-full wp-image-6509" /></p><p>「<a href="http://bit.ly/rnBIgD">Google Analytics Opt-out</a>」は、Googleさんのアクセス解析であるGoogle Analyticsに余計なデータを送らないようにするための拡張機能です。別にアクセスしたことぐらいは教えてもいいんですけど（笑）。この後紹介するChromeblockは、GA以外のトラッキング系もまるごとブロック、必要に応じてサイト毎にオンオフできます、はい。</p><p>Opt-Out（オプトアウト）って何だよ、って方はこちらをどうぞ。<br /> &rarr; <a href="http://bit.ly/apxfV6">オプトアウトとは【opt-out】：IT用語辞典</a></p><h4 id="ibaopt-outbygoogle"><a href="http://bit.ly/p2qlgg">IBA Opt-out (by Google)</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-017.jpg" alt="chrome-ext-017" title="chrome-ext-017" width="450" height="253" class="alignnone size-full wp-image-6510" /></p><p>これまた排除系です。「IBA」ってのは Interest-Based Advertisingの略、つまるところインタレストマッチな広告を永続的に無効化するための拡張機能で、説明文を見る感じではGoogleさんのDoubleClick系のを無効化してくれる、と。</p><h4 id="keepmyopt-outs"><a href="http://bit.ly/mXulpB">Keep My Opt-Outs</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-018.jpg" alt="chrome-ext-018" title="chrome-ext-018" width="450" height="253" class="alignnone size-full wp-image-6511" /></p><p>「<a href="http://bit.ly/mXulpB">Keep My Opt-Outs</a>」はCookieを使ったオンライン広告のカスタマイズを永続的に無効化するための拡張機能。<a href="http://www.aboutads.info/choices/">ココ</a>とか見ると、今自分がどの程度カスタマイズされた広告を出されてるかわかります。ちなみにiPhone 4専用だけど、<a href="http://oo.apple.com">こんなサイト</a>もあります（これはiAd）。</p><h4 id="chromeblock"><a href="http://bit.ly/qaR084">Chromeblock</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-020.jpg" alt="chrome-ext-020" title="chrome-ext-020" width="450" height="253" class="alignnone size-full wp-image-6513" /></p><p>似たようなのをいくつも紹介してますが、Webサイトってのは皆さんがあずかり知らないところで行動履歴というか何をクリックしたかをチェックしてます。「<a href="http://bit.ly/qaR084">Chromeblock</a>」は、そういったアクセス解析というかトラッキング系をがっつりブロックしてくれます。同じAbineの「<a href="http://bit.ly/oBjqpF">Abine TACO</a>」はKeep My Opt-Outsみたいなのです。</p><h3>セキュリティ的なものが心配なあなたへ、な拡張機能</h3><h4 id="vanillacookiemanager"><a href="http://bit.ly/osfkXj">Vanilla Cookie Manager</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-021.jpg" alt="chrome-ext-021" title="chrome-ext-021" width="450" height="253" class="alignnone size-full wp-image-6514" /></p><p>「<a href="http://bit.ly/osfkXj">Vanilla Cookie Manager</a>」は、接続しているサイトのドメインのCookieを管理するための拡張機能。ブラウザ自体の機能で十分というか、サードパーティ製のCookieを無効化するとかで良い気はしますが、接続中のドメインのCookieを個別に受け入れる受け入れないを簡単に管理したければどうぞ。</p><h4 id="notscripts"><a href="http://bit.ly/rv1dnF">NotScripts</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-022.jpg" alt="chrome-ext-022" title="chrome-ext-022" width="450" height="253" class="alignnone size-full wp-image-6515" /></p><p>インストールするのにちょっと手間がかかるのですが、閲覧中のサイトにおけるJavaScriptの実行を「許可する・許可しない」ってのをドメインごとに指定できる拡張機能です。Firefoxで有名な「NoScript」と同じようなものです。たまに JavaScriptをトリガーにしてイタズラされたりしますしね（笑）、一時的に特定のサイトだけJavaScriptを無効化するといった使い方ができるので便利です。</p><h4 id="flashblock"><a href="http://bit.ly/mWMMow">FlashBlock</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-023.jpg" alt="chrome-ext-023" title="chrome-ext-023" width="450" height="253" class="alignnone size-full wp-image-6516" /></p><p>ボクはMac側で元からFlashプラグインを遮断する別の「FlashBlock」を入れているんですけど、こっちの「<a href="http://bit.ly/mWMMow">FlashBlock</a>」は特定のサイトだけFlashコンテンツを有効にすることができる拡張機能です。許可するサイトをドメイン毎にコントロールできます。</p><h4 id="kbsslenforcer"><a href="http://bit.ly/pADzGf">KB SSL Enforcer</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-024.jpg" alt="chrome-ext-024" title="chrome-ext-024" width="450" height="253" class="alignnone size-full wp-image-6517" /></p><p>「<a href="http://bit.ly/pADzGf">KB SSL Enforcer</a>」は、強制的に「https」でサイトに繋ぐ拡張機能です。今となっては割とどのサービスも「常にhttpsで接続する」みたいなオプションができてますが。公衆無線LANとかで接続する人は入れておいても損はないですかね。この機能のオンオフをツールバーからできるようにする「<a href="http://bit.ly/nQtie8">KB SSL Enforcer Browser Button</a>」もあります。</p><h3>Webデザイン、開発とかでお役立ちな拡張機能</h3><h4 id="pendule"><a href="http://bit.ly/lFvGJO">Pendule</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-025.jpg" alt="chrome-ext-025" title="chrome-ext-025" width="450" height="253" class="alignnone size-full wp-image-6518" /></p><p>「<a href="http://bit.ly/lFvGJO">Pendule</a>」は、なにげに便利です。機能的には若干後述のWeb Developerとかぶる部分がありますが、これにしかできないもの、他に足りないものを補ってくれます。たとえば、MinifyされたCSSを読みやすい形に戻したり、カラーピッカーが付いていたり、ルーラーなんかもあります。機能別に複数の拡張機能をいれるぐらいならコレ一個でも。</p><h4 id="webdeveloper"><a href="http://bit.ly/q2kz4J">Web Developer</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-026.jpg" alt="chrome-ext-026" title="chrome-ext-026" width="450" height="253" class="alignnone size-full wp-image-6519" /></p><p>言うまでもなく、表示しているWebサイトの情報をもろもろチェックできる素敵な拡張機能ですね。Chrome版もちゃんとあります。</p><h4 id="firebuglite"><a href="http://bit.ly/qm8G6B">Firebug Lite for Google Chrome&#8482;</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-027.jpg" alt="chrome-ext-027" title="chrome-ext-027" width="450" height="253" class="alignnone size-full wp-image-6520" /></p><p>こちらも説明の必要がないですね。Web開発者必携ともいわれる有名な拡張機能「Firebug」のChrome版。Firefox版のアドオンはメモリ食いとして一部でささやかれたりしますが（<a href="http://kb.mozillazine.org/Problematic_extensions">参考資料</a>: Firebugのとこ見てください）、こちらはそれほどでもないんですかね。たまにFirefoxを速くするとかって記事で「Firebugを入れる」とか書いてあったりしますが、むしろ逆で「使う時だけオン」にした方が良いと思ってます…（笑）。</p><h4 id="chromesniffer"><a href="http://bit.ly/rd3pay">Chrome Sniffer</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-028.jpg" alt="chrome-ext-028" title="chrome-ext-028" width="450" height="253" class="alignnone size-full wp-image-6521" /></p><p>表示しているWebサイトで使われている技術というか、サービスとかライブラリみたいなのを表示してくれる拡張機能が「<a href="http://bit.ly/rd3pay">Chrome Sniffer</a>」。アドレスバーのとこに各種サービスとかのアイコンが出てくるので、何が仕込まれているかよくわかります（笑）。サイトの研究のために入れておいても損はありません。</p><h4 id="pagespeed"><a href="http://bit.ly/q9pRh6">Page Speed</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-029.jpg" alt="chrome-ext-029" title="chrome-ext-029" width="450" height="253" class="alignnone size-full wp-image-6522" /></p><p>数年前からGoogleさんのサイト表示スピードへのこだわりはすごいんですが、「Page Speed」は任意のサイトの構成要素をチェックしてパフォーマンスをあげるための改善点を提示してくれる拡張機能です。インストールして使うためには、アドレスバーに「chrome:flags」と入れて「試験運用版の拡張機能 API」を有効にしなければなりません（<a href="http://code.google.com/speed/page-speed/docs/using_chrome.html">詳しいことはこちらに</a>）。</p><p>面倒くさかったら、「<a href="http://pagespeed.googlelabs.com/">Page Speed Online</a>」でチェックしましょう（PC向けもモバイル向けもチェックできます）。</p><h4 id="yslow"><a href="http://bit.ly/nwWDHA">YSlow</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-030.jpg" alt="chrome-ext-030" title="chrome-ext-030" width="450" height="253" class="alignnone size-full wp-image-6523" /></p><p>「<a href="http://bit.ly/nwWDHA">YSlow</a>」は、Yahoo!さんのページパフォーマンスチェックツールですね。チェック項目はGoogleさんのそれとは微妙に異なりますが、チェックすれば改善点を教えてくれます。まぁ、GoogleのソレとYahoo!のソレ、同時にやりたかったらオンラインサービスの「<a href="http://gtmetrix.com">GTmetrix</a>」でどうぞ。</p><h4 id="speedtracer"><a href="http://bit.ly/p9Z3sq">Speed Tracer (by Google)</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-031.jpg" alt="chrome-ext-031" title="chrome-ext-031" width="450" height="253" class="alignnone size-full wp-image-6524" /></p><p>GoogleさんのPage Speedはチェックして改善点を教えてくれますが、「<a href="http://bit.ly/p9Z3sq">Speed Tracer</a>」はページを読み込んでから何がおこなわれているかを事細かに教えてくれる拡張機能です。以前は、Windowsでしか使えませんでしたが、最近はOS Xでも「ChromeWithSpeedTracer」というアプリを入れて、そこからChromeを起動すれば使えます（ただし、Chromeはβ版とかにしないとダメです）。詳しい話は<a href="https://code.google.com/webtoolkit/speedtracer/get-started.html">この辺</a>に。</p><h4 id="googleanalyticsdebugger"><a href="http://bit.ly/phrPcp">Google Analytics Debugger (by Google)</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-032.jpg" alt="chrome-ext-032" title="chrome-ext-032" width="450" height="253" class="alignnone size-full wp-image-6525" /></p><p>「<a href="http://bit.ly/phrPcp">Google Analytics Debugger</a>」は、その名の通りでGoogle Analyticsが送っているデータをデバッグするための拡張機能です。有効にしてサイトにアクセスすると、何を拾い上げてるのとかがわかります。あ、Webインスペクタの画面の下に出てきます。使う時は、GAのOpt-Outsの拡張機能とか入れてる人は無効にしてくださいね、じゃないと表示されませんから（笑）。</p><h4 id="imagepropertiescontextmenu"><a href="http://bit.ly/oOUm1N">Image Properties Context Menu</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-033.jpg" alt="chrome-ext-033" title="chrome-ext-033" width="450" height="253" class="alignnone size-full wp-image-6526" /></p><p>前述したPenduleには、ページ内で使用している画像の一覧を取得する機能がありますが、こちらは任意の画像を右クリックして新しいウィンドウで表示してくれる便利な拡張機能です。サイト内に一杯画像あると探すのも大変ですからね。右クリックで情報が拾えるのはありがたいです。</p><h4 id="corporateipsum"><a href="http://bit.ly/pemI3T">Corporate Ipsum</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-034.jpg" alt="chrome-ext-034" title="chrome-ext-034" width="450" height="253" class="alignnone size-full wp-image-6527" /></p><p>これを便利だと思う人はかなり限られているとは思いますが…。よくあるLorem Ipsumなテキストを会社的な文章で作ってくれる拡張機能です。といっても、英語なんですけどね。大体どれぐらいのワード数でみたいなことができるので、ラフ作る時のダミーテキストとして使えるんじゃないでしょうか。</p><h3>最後に、拡張機能のオン・オフを簡単にする拡張機能</h3><p>冒頭にも書きましたが、何でもかんでも入れればいいというわけでもなく、入れたら入れた分だけメモリを使います。非力な環境であれば、使う時だけ必要な機能をオンにする方がいいですね。拡張機能がどれぐらいメモリとか使ってるかは、「タスクマネージャ」で確認できます。</p><h4 id="extensionsmanagerakaswitcher"><a href="http://bit.ly/ruYwtf">Extensions Manager (aka Switcher)</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-035.jpg" alt="chrome-ext-035" title="chrome-ext-035" width="450" height="253" class="alignnone size-full wp-image-6528" /></p><p>オンオフは「拡張機能」メニューからも変更できますが、この「<a href="http://bit.ly/ruYwtf">Extensions Manager</a>」でツールバーから簡単に切り替えられます。これが一番メモリ食ってる気もしますがｗ</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-036.jpg" alt="chrome-ext-036" title="chrome-ext-036" width="450" height="253" class="alignnone size-full wp-image-6529" /></p><p>こんな感じです。</p><h3>ま、あとは自分で選んでくださいｗ</h3><p>機能が重複しているのもいくつかありますが、日々の使い勝手をちょっと改善するものからWeb制作関係のお仕事に従事されてる方に役立ちそうなものを集めてみました。以上、なにかのご参考まで。</p><p>＃たしかに変なタイトルですね。「人によっては便利な〜」です（笑）。</p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/chrome-extensions-for-better-browsing/feed</wfw:commentRss> <slash:comments>1</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/chrome-extensions-for-better-browsing" /> </item> <item><title>Chrome + Stylebot + Twitter Extender + Twitter Filter = ?</title><link>http://blog.gaspanik.com/customized-new-twitter-ui-with-chrome</link> <comments>http://blog.gaspanik.com/customized-new-twitter-ui-with-chrome#comments</comments> <pubDate>Thu, 07 Oct 2010 01:45:47 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[lifehacks]]></category> <category><![CDATA[scribbling]]></category> <category><![CDATA[chrome]]></category> <category><![CDATA[css]]></category> <category><![CDATA[extensions]]></category> <category><![CDATA[tools]]></category> <category><![CDATA[twitter]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=3861</guid> <description><![CDATA[かねてから噂になっていた（というか、比較的新しめのユーザーから適用されていた風な）Twitterの新しいユーザーインターフェイスがようやく自分のアカウントにも適用されました。うちにあるMacBookの片方はFirefox [...]]]></description> <content:encoded><![CDATA[<p>かねてから噂になっていた（というか、比較的新しめのユーザーから適用されていた風な）Twitterの新しいユーザーインターフェイスがようやく自分のアカウントにも適用されました。うちにあるMacBookの片方はFirefoxで正常に見れているのですが、もう片方でエラーを吐きまくって表示されません…。この新しいUIは好きなんですけども…。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2010/10/newTwitter.png" alt="New Twitter UI" title="newTwitter" width="450" height="253" class="alignnone size-full wp-image-3860" /></p><p>そこで、「Chromeで見ようかな」と思ってるのですが、以前からTwitterのUIのフォントサイズが嫌いで、それは新しくなってもやっぱり（日本語で見てるってのもあるのですが、全体的にフォントサイズのバランスが微妙に悪いんじゃないかと…）。</p><p>他のブラウザは文字サイズだけの拡大縮小ができるけど、Chromeの場合はページ全体の拡大縮小しかできないんですよね。読みたいサイズに縮小するとレイアウトも小さくなる（笑）。よく「<strong>文字が小さいと見えない</strong>」とか言われますが、その逆に「<strong>大きすぎて読みにくい</strong>」って人もいるのです、世の中には。覚えといてください。</p><p>で、拡張機能をいくつか追加して、見た目と使い勝手をカスタマイズした記録です。</p><p><span id="more-3861"></span></p><h3>StyleBotでCSSを微調整</h3><p>先日からぽろぽろ話題に出てるみたいですが、Chromeで見るWebページのCSSをカスタマイズできる拡張機能で「<a href="http://stylebot.me/">Stylebot</a>」ってのがあります。</p><p>これを入れるとURLのバーのところに「CSS」って書かれたボタンが出てきます。それをクリックしてダイアログを出して、ページ内の任意の箇所をクリックしてそこを指定しているセレクタにスタイルを追加することができます。</p><p>で、それで主たるテキスト部分（テキストエリアとかつぶやきのリストなど）の文字サイズと行高を変更して、「Who to follow」とか「Trends」みたいな要らないものを非表示に変えました。それが上のキャプチャです。</p><p>これで自分が読みやすい感じに変更できました。ぱちぱち。</p><h3>Twitter Extenderでボタンを追加</h3><p>非公式RT（というか、オールドスタイルなRT）は、自分のつぶやきを再掲したりとかでたまに使うこともあるので、それをやりやすくするために「<a href="http://bit.ly/bOZaf3">Twitter Extender</a>」という拡張機能を追加しました。</p><p>もともと「<a href="http://powertwitter.me/">PowerTwitter</a>」という拡張機能（Firefox用もSafari用もあり）を入れて、非公式RTのリンクの追加、つぶやき内の画像や動画、短縮URLなどが自動展開されるようになっていましたが、それがまだ新しいUIに対応していないので応急措置で。</p><p>で、そのTwitter Extenderをいれると、それぞれのつぶやきのReplyなどと並んで「Reply to all」と「RT」、「DM」のボタンが追加されます。いやいや、これは地味に便利です。非公式RTとか使わなくてもまとめて返信したい時があるでしょう？</p><p>とまぁ、新しいUIがイヤだとか言ってる人もいますが、そんなこんなでカスタマイズもできたことでボクは大好きです（笑）。</p><h3>追記: Twitter FIlterで特定のワードやユーザーをフィルタする</h3><p>まぁTwitterをやってると、時としてタイムラインに複数のユーザーによる特定のハッシュタグ付きの実況的なつぶやきが溢れたり、そもそもの発言数の多いユーザーもいます（ボクみたいなね）。</p><p>実況が流れ始めたら見ないのが一番だし、発言数の多いのがイヤならアンフォローすればいいだけですが、まぁそこまでしなくても…という気もするわけで。専用のクライアントなどでは、以前から特定のキーワードやユーザーをミュートする機能がついてるんですが、Webをブラウザで見ている限りはその機能はありません。</p><p>「<a href="http://bit.ly/9mqLYF">Twitter Filter</a>」は、そんな特定のキーワードやユーザー名をカンマ区切りで指定してタイムラインから非表示にすることができる拡張機能です。新しいUIだとMentionsやListsなんかのタブの並びに追加されます。そこで、一時的にでもオフにしたいハッシュタグなどを設定すれば、精神衛生上楽になります。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2010/10/twitter-filter.png" alt="twitter-filter" title="twitter-filter" width="450" height="253" class="alignnone size-full wp-image-3903" /></p><p>こんな感じでフィルタしているユーザーとかが右に表示されます（笑）。</p><p>＃特定の人のRTがいらない場合は、Twitter公式の機能としてその人のページに行けばオフにできますからそれを使いましょうね。</p><p>＃FirefoxなどUserScriptを追加できる場合は、以下の2つを入れることで同じことが実現できるかと（試してません、ごめんなさい）。<br /> &rarr; <a href="http://userscripts.org/scripts/show/65467">Twitter add RT button</a> （<a href="http://mitukiii.jp/labs/twitter-add-rt-button/">説明</a>）<br /> &rarr; <a href="http://userscripts.org/scripts/show/87289">Filter Tweets</a> （<a href="http://blog.varunkumar.me/2010/10/how-to-filter-out-tweets-on-new-twitter.html">説明</a>）</p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/customized-new-twitter-ui-with-chrome/feed</wfw:commentRss> <slash:comments>0</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/customized-new-twitter-ui-with-chrome" /> </item> <item><title>その後追加したChrome拡張機能たち</title><link>http://blog.gaspanik.com/recent-installed-chrome-extensions</link> <comments>http://blog.gaspanik.com/recent-installed-chrome-extensions#comments</comments> <pubDate>Thu, 14 Jan 2010 08:25:48 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[lifehacks]]></category> <category><![CDATA[scribbling]]></category> <category><![CDATA[addons]]></category> <category><![CDATA[browsers]]></category> <category><![CDATA[chrome]]></category> <category><![CDATA[extensions]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=2065</guid> <description><![CDATA[先日書いた「Web制作者向けなChromeの拡張機能＋α」がそこそこな反響があるようなのですが、残念ながらそこに書かなかった拡張機能もいくつかあります。 今回は趣旨と異なるために前回のリストから漏れていた拡張機能を紹介し [...]]]></description> <content:encoded><![CDATA[<p>先日書いた「<a href="http://blog.gaspanik.com/chrome-extensions-for-web-developer">Web制作者向けなChromeの拡張機能＋α</a>」がそこそこな反響があるようなのですが、残念ながらそこに書かなかった拡張機能もいくつかあります。</p><p>今回は趣旨と異なるために前回のリストから漏れていた拡張機能を紹介します。Chromeを使ってブラウジング効率を高めるとかそんなのは他のサイトに任せて、ボクが単に必要としているものだけ紹介したいと思いますので、あしからず。</p><p><span id="more-2065"></span></p><h3>Feedly</h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2010/01/chrome-extension2-001.png" alt="chrome-extension2-001" title="chrome-extension2-001" width="450" height="253" class="alignnone size-full wp-image-2062" /></p><p>「Feedly」は、Google Readerをベースに雑誌風にレイアウトを変更してくれるオンラインのサービスです。しばらくRSSの購読をやめていたボクがこれなら読んでも良いかな？と思わせてくれました。Chrome版では、FirefoxのアドオンにあるRSSの追加ボタンがないようですが、とりあえずは入れておこうかと。<br /> &rarr; <a href="https://chrome.google.com/extensions/detail/ndhinffkekpekljifjkkkkkhopnjodja">Feedly</a></p><h3>Secbrowsing &#8211; plugin version checker</h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2010/01/chrome-extension2-002.png" alt="chrome-extension2-002" title="chrome-extension2-002" width="450" height="253" class="alignnone size-full wp-image-2061" /></p><p>最近巷では「Gumblar」なるAcrobatの脆弱性を突いたウィルスさんが猛威をふるってますが、何にしたってアップデートしてないとそんなことは起こりえます（対策されなきゃ意味はないですが 笑）。この「Secbrowsing」はプラグインのバージョンをチェックする拡張機能です。悪いことは言いません、入れておきましょう。<br /> &rarr; <a href="https://chrome.google.com/extensions/detail/pgkcfihepeihdlfphbndagmompiakeci">Secbrowsing &#8211; plugin version checker</a></p><h3>Google Apps Shortcuts</h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2010/01/chrome-extension2-003.png" alt="chrome-extension2-003" title="chrome-extension2-003" width="450" height="253" class="alignnone size-full wp-image-2060" /></p><p>読んでその名の通りGoogleの各種サービスへのショートカット集です。設定で普段使うサービスだけに限定することもできますし、任意のGoogle Appsのドメインも追加できるようになってます。Googleさんへの依存はほどほどに。<br /> &rarr; <a href="https://chrome.google.com/extensions/detail/bjcpobipejlbogodeiendpdgcdambjgo">Google Apps Shortcuts</a></p><h3>AdThwart</h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2010/01/chrome-extension2-004.png" alt="chrome-extension2-004" title="chrome-extension2-004" width="450" height="253" class="alignnone size-full wp-image-2063" /></p><p>前回紹介した中に「FlashBlock」があったように、Webサイトのコンテンツのロードの妨げになるようなものが嫌いです（笑）。「AdThwart」は俗に言うAd Blockerの類ですが、フィルタをベースに何もしなくても消してくれるので助かってます。<br /> &rarr; <a href="https://chrome.google.com/extensions/detail/cfhdojbkjhnklbpkdaibdccddilifddb">AdThwart</a></p><h3>gleeBox</h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2010/01/chrome-extension2-005.png" alt="chrome-extension2-005" title="chrome-extension2-005" width="450" height="253" class="alignnone size-full wp-image-2064" /></p><p>今日見つけたばっかりの拡張機能「gleeBox」は、キーボードのショートカットを使って閲覧中のページ内のリンクをおっかけたりその他の操作を楽にしてくれるものです。こちらも<a href="http://thegleebox.com/">Firefoxのアドオン</a>が公開されてます。<br /> &rarr; <a href="https://chrome.google.com/extensions/detail/miinkdcjglbkbanpkghnkgkgbamdkgji">gleeBox</a></p><p>詳しい使い方は<a href="http://thegleebox.com/manual.html">マニュアルページ</a>を読んでいただきたいのですが、キーボードの「g」キーを押して、任意の文字列やコマンドを入力することでいろんな操作が可能です。一部取り上げると…。</p><h4>任意の文字列を入力</h4><p>gleeBoxを表示して任意の文字列を入力すれば、文字列にリンクが貼られていればその場所にジャンプできます。仮にリンクがなければ、そのままEnterで検索エンジンに放り投げることができます（日本語はダメですかね）。</p><h4>?hを入力してh要素だけ、?aですべてのリンクを拾い上げる</h4><p>マウスや矢印キーを押していちいちページをスクロールするのも面倒な場合は、gleeBoxを呼び出して「?h」と入力すれば、h1、h2、h3の要素を上から順番にTabキーで遷移できます。同様に「?a」と入力することですべてのリンクを対象にすることができます。</p><h4>YubNubのコマンドで特定の操作を</h4><p>「<a href="http://yubnub.org/">YubNub</a>」というコマンドラインの検索インターフェイスのコマンドが使えるようになってます。たとえば、Twitter検索をしたければ「:tw キーワード」の形で入力してEnter、Wikipediaだったら「:wp」とか「:wpjp」、Amazonだったら「:am」とか「:amzj」とかです。gleeBoxから日本語渡すとこけますけど…（笑）。</p><h4>!マーク付きのコマンドで他のサービスへ</h4><p>閲覧中のページを指定された「!」付きのコマンドを入力すれば、他のサービスへその内容を持っていくことができます。たとえば、「!tweet」でTwitter、「!rss」でGoogle Reader、「!shorten」でbit.lyといった具合です。他にもInstapaperと連動させるとかもできます。</p><p>といった感じです。</p><p>なんだか最後はgleeBoxの使い方になってしまいましたが、前回紹介しきれなかったというか趣旨が異なったために省いていたChromeの拡張機能のリストでした。ちゃんちゃん。</p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/recent-installed-chrome-extensions/feed</wfw:commentRss> <slash:comments>0</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/recent-installed-chrome-extensions" /> </item> <item><title>Web制作者向けなChromeの拡張機能＋α</title><link>http://blog.gaspanik.com/chrome-extensions-for-web-developer</link> <comments>http://blog.gaspanik.com/chrome-extensions-for-web-developer#comments</comments> <pubDate>Sat, 09 Jan 2010 12:48:23 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[lifehacks]]></category> <category><![CDATA[scribbling]]></category> <category><![CDATA[browsers]]></category> <category><![CDATA[chrome]]></category> <category><![CDATA[extensions]]></category> <category><![CDATA[google]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=1935</guid> <description><![CDATA[OS X用のChromeでもDev版でようやくエクステンション（拡張機能）が使えるようになったので、Web制作に役立ちそうなものをピックアップしてみました。せっかくなんで、おまけとして人によってはありがたいだろうものも載 [...]]]></description> <content:encoded><![CDATA[<p>OS X用のChromeでもDev版でようやくエクステンション（拡張機能）が使えるようになったので、Web制作に役立ちそうなものをピックアップしてみました。せっかくなんで、おまけとして人によってはありがたいだろうものも載っけておきます。</p><p><span id="more-1935"></span><br /> とにもかくにもChromeのDev版をダウンロードしましょう。「あくまでも開発者向けなので…」とか言いたいとこですが、別にマシンがぶっ壊れるようなことはないので大丈夫（笑）。ちっちゃいことは気にすんな、ワカチコ。</p><p>ただし、Googleからは直接ダウンロードできませんので、Chromium Projectsの「<a href="http://dev.chromium.org/getting-involved/dev-channel">Early Access Release Channels</a>」からどうぞ。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2010/01/chrome-extensions-001.png" alt="chrome-extensions-001" title="chrome-extensions-001" width="450" height="253" class="alignnone size-full wp-image-1941" /></p><p>真ん中あたりに「<strong>Dev Channel: GoogleChrome.dmg</strong>」ってリンクがありますので、ダウンロード&amp;レッツらインスコローリングです。</p><p>肝心のエクステンションは、Googleさんが立ち上げてる「<a href="https://chrome.google.com/extensions">Google Chrome Extensions</a>」からダウンロードできます。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2010/01/chrome-extensions-002.png" alt="chrome-extensions-002" title="chrome-extensions-002" width="450" height="253" class="alignnone size-full wp-image-1942" /></p><p>※実は、他にも<a href="http://www.chromeextensions.org/">同名のサイト</a>があっていろいろリストされてるんですが、ものがものなので今回はGoogleさんの方でダウンロードできるものを紹介します。</p><h3>Firebug Lite</h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2010/01/chrome-extensions-003.png" alt="chrome-extensions-003" title="chrome-extensions-003" width="450" height="253" class="alignnone size-full wp-image-1945" /></p><p>今さら説明の必要はないと思いますが、既にChrome用が公開されています。<br /> &rarr; <a href="https://chrome.google.com/extensions/detail/bnbbfjbeaefgipfjpdabmpadaacmafkj">Firebug Lite</a></p><h3>Pendule</h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2010/01/chrome-extensions-004.png" alt="chrome-extensions-004" title="chrome-extensions-004" width="450" height="253" class="alignnone size-full wp-image-1944" /></p><p>「Pendule」というエクステンションはご覧の通り、W3Cのバリデータや画像の表示非表示、CSSの無効化のようなちょっとしたチェックに役立つものが呼び出せます。<br /> &rarr; <a href="https://chrome.google.com/extensions/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi">Pendule</a></p><h3>Chrome Sniffer</h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2010/01/chrome-extensions-005.png" alt="chrome-extensions-005" title="chrome-extensions-005" width="450" height="253" class="alignnone size-full wp-image-1943" /></p><p>直接制作に役立つというより、Webサイト研究に役立つんじゃないかという「Chrome Sniffer」は、Webサイトで用いられているフレームワークやJavaScriptライブラリをリストしてくれるエクステンションです。<br /> &rarr; <a href="https://chrome.google.com/extensions/detail/homgcnaoacgigpkkljjjekpignblkeae">Chrome Sniffer</a></p><h3>Window Resizer</h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2010/01/chrome-extensions-006.png" alt="chrome-extensions-006" title="chrome-extensions-006" width="450" height="253" class="alignnone size-full wp-image-1937" /></p><p>その名の通りウィンドウをリサイズする「Windows Resizer」。世の中の人たちは、そんな大きなモニタでフルスクリーンで閲覧なんかしてませんから。<br /> &rarr; <a href="https://chrome.google.com/extensions/detail/kkelicaakdanhinjdeammmilcgefonfh">Window Resizer</a></p><h3>他にもあるでよ、Windows専用とかだけど</h3><p>残念なことにOS Xでは使えないその他のエクステンションもいくつかあります。Firefoxでおなじみの「<a href=""><a href="https://chrome.google.com/extensions/detail/hehijbfgiekmjfkfjpbkbammjbdenadd">IE Tab</a></a>」、Googleがリリースしてる「<a href="https://chrome.google.com/extensions/detail/ognampngfcbddbfemdapefohjiobgbdl">Speed Tracer</a>」なんかは、Windows環境の方は入れておくと良いかもしれませんね。</p><h3>おまけ</h3><p>では、ここからはおまけ。どうしてもこれがないとボクは生きていけないというか、ボクの生活ではこれが必要かな？ってものをあげておきます。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2010/01/chrome-extensions-007.png" alt="chrome-extensions-007" title="chrome-extensions-007" width="450" height="253" class="alignnone size-full wp-image-1940" /></p><p>「FlashBlock」は、Safariの「<a href="http://rentzsch.github.com/clicktoflash/">ClickToFlash</a>」とかFirefoxの「NoScript」みたいにFlashコンテンツをブロックするエクステンションです。嫌いなんです、いきなりでかいのとか出されたり、ブログパーツ的なものが（笑）。<br /> &rarr; <a href="https://chrome.google.com/extensions/detail/gofhjkjmkpinhpoiabjplobcaignabnl">FlashBlock</a></p><p><img src="http://content.gaspanik.com/wp-content/uploads/2010/01/chrome-extensions-008.png" alt="chrome-extensions-008" title="chrome-extensions-008" width="450" height="253" class="alignnone size-full wp-image-1938" /></p><p>「Fittr Flickr」は、Flickrにアップされている写真のEXIFを表示したり、各種サイズのファイルへのリンクを付け足してくれるエクステンションです。カメラっ子なFlickrユーザーなら迷わずといったとこでしょうか。<br /> &rarr; <a href="https://chrome.google.com/extensions/detail/fhaledancjhefginmkkondfjpnkhdglh">Fittr Flickr</a></p><p><img src="http://content.gaspanik.com/wp-content/uploads/2010/01/chrome-extensions-009.png" alt="chrome-extensions-009" title="chrome-extensions-009" width="450" height="253" class="alignnone size-full wp-image-1939" /></p><p>最後はもうこれなしのWebブラウジングなんて考えられない（というか、面倒でやってられない 笑）、「AutoPagerize for Chrome」です。ご存知の方には今さら説明の必要はありませんが、ページを自動的に継ぎ足して表示してくれる素敵なエクステンションです。助かります、ありがとうございます。<br /> &rarr; <a href="https://chrome.google.com/extensions/detail/igiofjhpmpihnifddepnpngfjhkfenbp">AutoPagerize for Chrome</a></p><p>といった感じで、とりあえずOS XのChromeでも拡張機能が使えるようになったのでいくつかピックアップしてみました。何かのご参考までに。</p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/chrome-extensions-for-web-developer/feed</wfw:commentRss> <slash:comments>2</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/chrome-extensions-for-web-developer" /> </item> <item><title>Google Chrome Frameを入れてみたよ</title><link>http://blog.gaspanik.com/preparation-for-googlewave-by-google-chrome-frame</link> <comments>http://blog.gaspanik.com/preparation-for-googlewave-by-google-chrome-frame#comments</comments> <pubDate>Tue, 22 Sep 2009 23:18:57 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[scribbling]]></category> <category><![CDATA[browser]]></category> <category><![CDATA[chrome]]></category> <category><![CDATA[google]]></category> <category><![CDATA[ie]]></category> <category><![CDATA[plugins]]></category> <category><![CDATA[safari]]></category> <category><![CDATA[webkit]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=1261</guid> <description><![CDATA[GoogleさんがマイクロソフトのInternet ExplorerでHTML 5のcanvasのタグなどをサポートするプラグイン「Google Chrome Frame」をリリースしました。これがないと近々リリースされ [...]]]></description> <content:encoded><![CDATA[<p>GoogleさんがマイクロソフトのInternet ExplorerでHTML 5のcanvasのタグなどをサポートするプラグイン「<a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a>」をリリースしました。これがないと近々リリースされるであろう<a href="http://wave.google.com/">Google Wave</a>が、IEのほとんどすべてで使えないだろうからそのためなんでしょう。</p><p>このプラグインを入れたIEは、metaに特定の指示詞があればそのページのレンダリングエンジンをWebKitにし、JavaScriptのエンジンもChromeに入ってるものが使われるようです。ようはそこだけChromeになるってことですね。</p><p><a href="http://content.gaspanik.com/wp-content/uploads/2009/09/google-chrome-frame1.jpg" rel="lightbox[googlechromeframe]"><img src="http://content.gaspanik.com/wp-content/uploads/2009/09/google-chrome-frame1-240x153.jpg" alt="google-chrome-frame1" title="google-chrome-frame1" width="240" height="153" class="alignnone size-medium wp-image-1267" /></a></p><p>同意してインストールすれば終わりです。</p><p>ただこれは何もGoogle Waveに限った話ではなく、普段IEをお使いの皆さんが導入してくれれば、FirefoxやSafari、Chrome、Operaといったブラウザに最適化して作っておいても、見た目も崩れずスクリプト系も動くってことになると、その違いに頭を悩ませている開発者にとっても恩恵があるんじゃないかと思われます。</p><p>利用者側に促して入れてもらう必要はあるわけですが、「IEなんかなくなれ」とか「ウィンドウ内にアナログってだす」とか「サポートしません」というよりはいいかもしれませんね。日本のいくつかのサイトのように「<strong>IEしかサポートしません</strong>」っていつまでも言ってるのはどうかと思うんだけどね…（笑）。</p><p>自分のページというかテストをする際は、head要素内に以下を記述してアレコレ試してみましょう。現状「file://〜」で始まるローカルのものは処理しないようです。詳しいことは、Googleさんの用意している<a href="http://code.google.com/chrome/chromeframe/developers_guide.html">ドキュメント</a>を見てください。</p><p><code>&lt;meta http-equiv="X-UA-Compatible" content="chrome=1"&gt;</code></p><p>Google Chrome FrameがインストールされたIEをリンク先のページで強制的にそのモードでレンダリングさせるには、「cf:http://〜」みたいにしてリンクを記述しておくとhead要素のmetaがなくてもそれで動くようです。</p><p>ものは試しで一番手っ取り早いかなぁと思って、「<a href="http://www.satine.org/archives/2009/07/11/snow-stack-is-here/">Snow Stack</a>」という名で有名なWebKitの3Dエフェクトとかを実装された<a href="http://www.satine.org/">satine.org</a>さんとこの実際のテストページにリンクしてみました。</p><p>&rarr; <a href="cf:http://www.satine.org/research/webkit/snowleopard/snowstack.html">Snow Stack demo</a>（for IE with Google Chrome Frame）<br /> &rarr; <a href="http://www.satine.org/research/webkit/snowleopard/snowstack.html">Snow Stack demo</a>（for Safari 4 / Chrome / Webkit Nightly）</p><p><a href="http://content.gaspanik.com/wp-content/uploads/2009/09/google-chrome-frame2.jpg" rel="lightbox[googlechromeframe]"><img src="http://content.gaspanik.com/wp-content/uploads/2009/09/google-chrome-frame2-240x153.jpg" alt="google-chrome-frame2" title="google-chrome-frame2" width="240" height="153" class="alignnone size-medium wp-image-1268" /></a></p><p>こんな感じで動きました。</p><p>ただ、「cf:」付けちゃうと他のブラウザではリンクが辿れませんから、仮にそれを使うならそこはアレコレしてブラウザ毎にリンク先を振り分ける必要がありますね。</p><p>まだまだ新しい技術なので今すぐどうこうではないですけど、IEの次期バージョンの前にこれが浸透してくれたら少しだけIEの存在に頭を悩ませている開発者のストレスがなくなったり、帰宅時間が早くなったりするかもしれません（笑）。</p><p>＃あ、そうそう。世の中には「<a href="http://www.browserscope.org/">Browserscope</a>」っていうブラウザの実装状況みたいなのが公開されているサイトもあります。</p><p><span id="more-1261"></span></p><h3>WebKitになってるってことは…</h3><p>ちょっと試しに簡単なの用意してみました（CSSの角丸だけ）。</p><p style="width:auto;height:auto;border: 1px solid #222;padding:20px;-webkit-border-radius: 0.5em;-moz-border-radius: 0.5em;">FirefoxやSafari、Chrome、Google Chrome Frameの入ったIEなら角丸の矩形になり、それ以外のブラウザはただの角張った矩形になってるはず</p><p>ということですね。<br /> ちなみにこれ（上のmetaをいれても）、Internet Explorer本体でのみ動作してそれ以外には影響しないよう（というか、IE 8に入れたので単なるアドオン扱い）で、Expression Web Super PreviewとかIE Testerでは素のIEの状態で描画されるようです。</p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/preparation-for-googlewave-by-google-chrome-frame/feed</wfw:commentRss> <slash:comments>0</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/preparation-for-googlewave-by-google-chrome-frame" /> </item> <item><title>GoogleさんのChromeを使ってみたよ</title><link>http://blog.gaspanik.com/surfin-with-google-chrome</link> <comments>http://blog.gaspanik.com/surfin-with-google-chrome#comments</comments> <pubDate>Wed, 03 Sep 2008 00:52:25 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[scribbling]]></category> <category><![CDATA[browser]]></category> <category><![CDATA[chrome]]></category> <category><![CDATA[css]]></category> <category><![CDATA[google]]></category> <category><![CDATA[html]]></category> <category><![CDATA[javascript]]></category> <category><![CDATA[webkit]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=112</guid> <description><![CDATA[福田さんの子供みたいな辞任会見でスタートした9月ですが（笑）、インターネッツな世界ではGoogleさんがブラウザを出すということで持ちきりでした。で、さっそく深夜にリリースされてたのでインスコローリングしてみました。今の [...]]]></description> <content:encoded><![CDATA[<p>福田さんの子供みたいな辞任会見でスタートした9月ですが（笑）、インターネッツな世界ではGoogleさんがブラウザを出すということで持ちきりでした。で、さっそく深夜にリリースされてたのでインスコローリングしてみました。今のところ何も考えないで、パッとインストールできるのはWindowsのみです（*1）。</p><p>さて、数ヶ月ぶりにVistaを起動した私はいろんなもののアップデートでまた時間を費やしたわけですが（んな私のこたどうでもいいですね 笑）、終わったとこで<a href="http://www.google.com/chrome">GoogleのChromeのページ</a>からインストーラをダウンロード。</p><p>※「エラーでインストーラが起動すらしない」って人は、インストールをネットワーク経由でおこなうのでアンチウィルスソフトによっては、そこでチェックが入って落ちてる可能性があります。オフにしてやってみましょう。</p><p><a href='http://content.gaspanik.com/wp-content/uploads/2008/09/chrome-01.jpg' rel="lightbox[chrome]"><img src="http://content.gaspanik.com/wp-content/uploads/2008/09/chrome-01-240x150.jpg" alt="chrome-01" title="chrome-01" width="240" height="150" class="alignnone size-medium wp-image-116" /></a></p><p>起動してみると極限までそぎ落とされたシンプルなインターフェイスが出てきます。ブラウザウィンドウ内に表示されるWebサイトなりアプリケーションだけを使えるような配慮でしょうね。今、英語モードにしてるので英語のメニューですけど、普通にインストールすれば日本語になりますのでご安心を。</p><p>HTML部分のレンダリングエンジンは<a href="http://webkit.org/">Webkit</a>ってことなので、Safariとかと同じで表示も速いですし、普通に作ってあるWebサイトなら別に問題もなく表示されます。Web作ってる人たちの間で新しいブラウザがリリースされるとかいう話になると気になることでしょうが、某MSさんのアイツみたいな心配はいらないってことです（笑）。で、Webkitがベースということは「-webkit-border-radius」みたいな「-webkit-」付きのCSS3の先行実装みたいなプロパティが効くんでしょう（*2）。</p><p>一応インスペクタとかも搭載されてますが、まだResourcesのタブが<del datetime="2008-09-03T04:38:14+00:00">うまく動いてないような…</del>動いてた（笑）。Safariの開発メニューにあるものと同じような感じですね。</p><p>JavaScriptのエンジンの方は「<a href="http://code.google.com/p/v8/">v8</a>」ってのになってるそうで、早速いろいろ試している方の話では、実行速度が速いとかIE用のBookmarkletとかも修正なしで動いてるとかそんな話もちらほら。</p><p>Chromeはいわゆるタブブラウザなのですが、それぞれのタブは独立して動くような設計になってるらしく、どれかのタブが固まって全部が落ちてしまうということはないようです。そのためか、メニューの中にはタスクマネージャなんてものが用意されています。試しにタスクを落としてみたら下のような画面が出てきました（笑）。</p><p><a href='http://content.gaspanik.com/wp-content/uploads/2008/09/chrome-02.jpg' rel="lightbox[chrome]"><img src="http://content.gaspanik.com/wp-content/uploads/2008/09/chrome-02-240x150.jpg" alt="chrome-02" title="chrome-02" width="240" height="150" class="alignnone size-medium wp-image-115" /></a></p><p>で、ついでなのでfacebook.comに繋いだらwww.facebook.comに飛ばされずこんな画面がでてきました（笑）。エラーの画面もシンプルです（笑）。</p><p><a href='http://content.gaspanik.com/wp-content/uploads/2008/09/chrome-03.jpg' rel="lightbox[chrome]"><img src="http://content.gaspanik.com/wp-content/uploads/2008/09/chrome-03-240x150.jpg" alt="chrome-03" title="chrome-03" width="240" height="150" class="alignnone size-medium wp-image-114" /></a></p><p>ちなみにURLとか検索キーワード入れる上の入力欄に「about:memory」っていれると使用量とかが出てくるのは使ってると気付くのですが、それ以外にも「about:」とか「about:cache」とかあるようです。</p><p>あと、ちょっと気になったカラーマネジメントあたりはどうだろうかとチェックしてみました。下の画面は、左がカラーマネジメントを有効にしたFirefox 3、右がChromeでAdobe RGBのプロファイルが埋め込まれたJPGを表示した例です。ご覧の通り色が違ってるので、カラーマネジメントの機能までは入ってないようです（笑）。</p><p><a href='http://content.gaspanik.com/wp-content/uploads/2008/09/chrome-04.jpg' rel="lightbox[chrome]"><img src="http://content.gaspanik.com/wp-content/uploads/2008/09/chrome-04-240x150.jpg" alt="chrome-04" title="chrome-04" width="240" height="150" class="alignnone size-medium wp-image-113" /></a></p><p>とまぁ早速入れてみたわけですが、Chromeはこれからどんどん形になっていくんでしょうね。表示とかその辺の心配もないでしょうし今後が楽しみであります。</p><p>*1: 元になってる「Chromium」については<a href="http://dev.chromium.org/Home">こちら</a>にいろいろ書いてあるようです。テストでOS XとかLinuxでホゲホゲする人なんかはチェックしてみては？</p><p>*2: 後から気付いたのですが、<a href="http://www.google.com/chrome/intl/ja/webmasters.html">Google ChromeのWeb開発者向けの情報はこちらのページ</a>に掲載されてます。良かったですね、珍しく日本語版があって（笑）。<br /> また、Chromeやそれ以外のブラウザのサポートしているセレクタは、evotech.netの「<a href="http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/">Google Chrome Browser CSS Selector Support</a>」という記事でさっそく表になって公開されています。</p><hr /><p>最後に全然関係ない冒頭の話ですが、誰かに何かをしてもらう（協力してもらう）ためには自分が人に対して真摯な姿勢で動いてないと…というか、人のことを思いやりながら生きていかないと誰も何もしてくれませんよ…。「あの人がやってくれなかった」とかなんとか子供みたいなこと言ってちゃね…、それは「自分がちゃんとしてなかった」ということですよ、元総理（笑）。愛と一緒で求めるだけじゃだめっす。</p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/surfin-with-google-chrome/feed</wfw:commentRss> <slash:comments>1</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/surfin-with-google-chrome" /> </item> </channel> </rss>
<!-- Served from: blog.gaspanik.com @ 2012-02-04 15:52:47 by W3 Total Cache -->
