いろいろとリアルタイム系のアクセス解析サービスを試したりしてるんですけど、新しくコードを追加したり既存のコードに手を加えずに、自分の管理下にあるサイトは全部適用されるので素敵です。ココに表示される内容は、今のところ他のサービスと同じような感じになってます。

まだ申し込み窓口はあいてます

まだこのリアルタイム解析のことを書いてあるブログの記事には、アーリーアクセスの申し込みのページへのリンクも残ってるようなので、興味のある方は登録してみるといいですね。繰り返しますが、何も追加しなくてよいのは楽です（笑）。

GAのブログにも書いてありますけど、ソーシャルメディア使ったりキャンペーン打ったりとかしてるんだったら、リアルタイムにその効果が見える方がいいと思いますよ。どこから流入してきてるとか反応は即座に確認できるので。

そんなわけで、今日は数多ある拡張機能の中からボクが選んだ入れておくと便利かもしれない拡張機能を33＋1コ集めてみました。前半は多くの人を対象に日常のブラウジング体験を快適にするもの、後半はWebサイトの開発系でちょっと役立つものといった感じでジャンル分けしてお届けします。ま、あくまでもボクが普段使ってるものベースですが…、キャプチャ中の★やユーザー数も参考に。

いくら拡張機能が便利だって言っても、入れすぎたらそれは重くなるだけですからね。適当に取捨選択して入れるなり、使う時だけオンにするなりしましょう。では、33＋1コいってみましょう。

日常のブラウジングを快適にする拡張機能

緊急地震速報 by Extension

震災以降、さすがに入れておこうかと思ったのが地震速報系のアプリ。スマートフォンにも一応入れてはいますが、仕事中はほったらかしだったりもするし…ということで、こちらの「緊急地震速報 by Extension」を。必ず動作するという保証がないのは同じですが、他の通知系よりも速いので重宝しています。ちなみに今震源地を表示するβ版がテスト中です。

Offline Google Mail

ボクはあまりGmailのヘビーユーザーではないのですが、「Offline Google Mail」は入れておくと便利な人が多いかもしれませんね。その名の通りで、オフラインでGmailを読むためのものです。必ずしもネットに繋がった環境にいるとも限りませんからね。備えあれば、嬉しいな、アハハハで。

Google Calendar

Googleさん謹製の「Google Calendar」、こちらはGoogleカレンダーをパッと起動するもの。Googleカレンダーの設定でオフラインユースを有効にすればオフラインモードで開きます。ボクは便利だと思いながらも、Googleさんにさほど依存してないのでほぼ使っていません…。

AutoPagerize

いや、これは大事でしょう。先日もOS Xアプリの記事後半のSafariの機能拡張で紹介した「AutoPagerize」。もうこれがない生活なんて、続きのない連続ドラマですよ（なんだそれ）。検索ポータルの検索結果や「次ページへ」といったリンクがあるサイトの次のページを取得して自動的に繋げてくれます。

Fittr Flickr

ガラッと目的は変わりまして、「Fittr Flickr」は写真共有サイトであるFlickrの閲覧をしやすくするものです。しやすくというか、かゆいところに手が届く感じのカスタマイズをしてくれます。あまりいろいろ詰め込んでもなんなので、Flickrの閲覧を便利にするものはこれだけ入れてます。

Readability Redux

ページの両脇ならともかく、「なぜ記事の本文中に嫌がらせのように広告が入ってるんだろう？」と思ったことはありませんか？、きっとありますよね（笑）。「Readability」はSafariのリーダーの元になったサービスで閲覧中のページから余計な装飾要素を全排除して表示してくれます。こちらの「Readability Redux」は公式ではありませんが同様のことができるんです。

Cloud Save

公開されているコンテンツには著作権がありますし、そんな頻繁に使うとは思えませんが、サイト中の画像をクラウドなストレージサービスに保存する拡張機能が「Cloud Save」。参考資料になりそうな画像とか、ちょっと後から見たい時に役立ちます。だって、Dropboxとかに直接保存できるんですもん。

Screen Capture (by Google)

見ているブラウザの画面をキャプチャして、一言書いて友達に渡したい！って時に重宝するのが、こちらの「Screen Capture」。画面ショットを撮影して手書きで何か書き足して保存したり、Google+（というかPicasa）に送ったりすることができます。似たようなのに「Awesome Screenshot」とかもありますね。

Stylebot

「Stylebot」は、任意のドメインの下にあるコンテンツのCSSをカスタマイズしてしまう拡張機能です。たとえば、Twitterの右側に出てくる流行ってるキーワードとかこの人知ってるかも系のブロックを見えなくしてしまうことができます。Stylebot Socialというサイトもあって、有志がカスタマイズして公開しているサイト毎のCSSをインストールすることもできます。

ソーシャルメディア系な拡張機能

PBTweet+

ボクは、Twitterのタイムラインは普通にブラウザで見てるんです。で、こちらの「PBTweet+」は、Webブラウザで見るTwitterの画面にいろいろな機能を追加してくれる拡張機能です。タイムラインで見たくないキーワードを指定したり、一時的に任意のユーザーを非表示にしたりね。「#」とか非公式RTを排除する「RT」とか追加しておくとスッキリ（笑）。

Facebook Like Button

「Facebook Like Button」はその名の通り、FacebookのLikeのボタンです。ツールバーのトコに「いいね！」のアイコンと見ているページのLike数が表示されます。もちろんここから「いいね！」することもできますよ。

bitly | a simple URL shortener

「bitly」は、長ったらしいURLを短縮してくれるサービスの拡張機能です。アカウントを登録してツールバーのフグみたいなボタンをポチッとすれば、自分のTwitterやらFacebookのアカウントにいま見ているサイトのタイトルとURLに何か一言付け加えて放り投げることができます。

Buffer for Chrome

Tweetを指定時刻に自動でおこなうサービスである「Buffer」の公式の拡張機能です。前述のbit.lyと同じように即時に放り投げることもできるし、アカウントを登録して時刻を指定しておけば、投稿リストに保存しておくことも可能です。Bufferは、RT数などでどれぐらいの範囲に拡まったか（まぁ、理論値というかただの合計ですが）もトラックできます。ソーシャルメディアをフル活用して宣伝とかしたい方は、無料で使えるこのサービスは使った方がいいですね（謎）。

Klout (beta)

ソーシャルメディアにおける発言者の影響力をはかるサービスで有名な「Klout」の公式拡張機能です。残念ながら、発言の内容までは精査されないので、Kloutスコアが高くても…ってことも往々にしてあります。人のネタぱくっててもRTとかされたら数値高くなりますからね（笑）。ただ、コレ入れておくとTwitterの画面にみんなのスコアが表示されます。

広告系のアレとかソレを無効化する拡張機能

Adblock Plus for Google Chrome™ (Beta)

実はボク、数年前コレ系の話題でAERAにインタビューされてます（笑）。いや、ページ内に広告は入れるのはいいんですが、できれば邪魔にならないトコに入れて欲しい…だけなんですがね。「Adblock Plus」は、入れるだけでサイト内の広告を非表示にしてくれます。もちろん、特定の配信サーバを指定することもできます、はい。ま、それ以前に右端とかは視界にいれませんがｗ

Google Analytics Opt-out Add-on (by Google)

「Google Analytics Opt-out」は、Googleさんのアクセス解析であるGoogle Analyticsに余計なデータを送らないようにするための拡張機能です。別にアクセスしたことぐらいは教えてもいいんですけど（笑）。この後紹介するChromeblockは、GA以外のトラッキング系もまるごとブロック、必要に応じてサイト毎にオンオフできます、はい。

Opt-Out（オプトアウト）って何だよ、って方はこちらをどうぞ。
→ オプトアウトとは【opt-out】：IT用語辞典

IBA Opt-out (by Google)

これまた排除系です。「IBA」ってのは Interest-Based Advertisingの略、つまるところインタレストマッチな広告を永続的に無効化するための拡張機能で、説明文を見る感じではGoogleさんのDoubleClick系のを無効化してくれる、と。

Keep My Opt-Outs

「Keep My Opt-Outs」はCookieを使ったオンライン広告のカスタマイズを永続的に無効化するための拡張機能。ココとか見ると、今自分がどの程度カスタマイズされた広告を出されてるかわかります。ちなみにiPhone 4専用だけど、こんなサイトもあります（これはiAd）。

Chromeblock

似たようなのをいくつも紹介してますが、Webサイトってのは皆さんがあずかり知らないところで行動履歴というか何をクリックしたかをチェックしてます。「Chromeblock」は、そういったアクセス解析というかトラッキング系をがっつりブロックしてくれます。同じAbineの「Abine TACO」はKeep My Opt-Outsみたいなのです。

セキュリティ的なものが心配なあなたへ、な拡張機能

Vanilla Cookie Manager

「Vanilla Cookie Manager」は、接続しているサイトのドメインのCookieを管理するための拡張機能。ブラウザ自体の機能で十分というか、サードパーティ製のCookieを無効化するとかで良い気はしますが、接続中のドメインのCookieを個別に受け入れる受け入れないを簡単に管理したければどうぞ。

NotScripts

インストールするのにちょっと手間がかかるのですが、閲覧中のサイトにおけるJavaScriptの実行を「許可する・許可しない」ってのをドメインごとに指定できる拡張機能です。Firefoxで有名な「NoScript」と同じようなものです。たまに JavaScriptをトリガーにしてイタズラされたりしますしね（笑）、一時的に特定のサイトだけJavaScriptを無効化するといった使い方ができるので便利です。

FlashBlock

ボクはMac側で元からFlashプラグインを遮断する別の「FlashBlock」を入れているんですけど、こっちの「FlashBlock」は特定のサイトだけFlashコンテンツを有効にすることができる拡張機能です。許可するサイトをドメイン毎にコントロールできます。

KB SSL Enforcer

「KB SSL Enforcer」は、強制的に「https」でサイトに繋ぐ拡張機能です。今となっては割とどのサービスも「常にhttpsで接続する」みたいなオプションができてますが。公衆無線LANとかで接続する人は入れておいても損はないですかね。この機能のオンオフをツールバーからできるようにする「KB SSL Enforcer Browser Button」もあります。

Webデザイン、開発とかでお役立ちな拡張機能

Pendule

「Pendule」は、なにげに便利です。機能的には若干後述のWeb Developerとかぶる部分がありますが、これにしかできないもの、他に足りないものを補ってくれます。たとえば、MinifyされたCSSを読みやすい形に戻したり、カラーピッカーが付いていたり、ルーラーなんかもあります。機能別に複数の拡張機能をいれるぐらいならコレ一個でも。

Web Developer

言うまでもなく、表示しているWebサイトの情報をもろもろチェックできる素敵な拡張機能ですね。Chrome版もちゃんとあります。

Firebug Lite for Google Chrome™

こちらも説明の必要がないですね。Web開発者必携ともいわれる有名な拡張機能「Firebug」のChrome版。Firefox版のアドオンはメモリ食いとして一部でささやかれたりしますが（参考資料: Firebugのとこ見てください）、こちらはそれほどでもないんですかね。たまにFirefoxを速くするとかって記事で「Firebugを入れる」とか書いてあったりしますが、むしろ逆で「使う時だけオン」にした方が良いと思ってます…（笑）。

Chrome Sniffer

表示しているWebサイトで使われている技術というか、サービスとかライブラリみたいなのを表示してくれる拡張機能が「Chrome Sniffer」。アドレスバーのとこに各種サービスとかのアイコンが出てくるので、何が仕込まれているかよくわかります（笑）。サイトの研究のために入れておいても損はありません。

Page Speed

数年前からGoogleさんのサイト表示スピードへのこだわりはすごいんですが、「Page Speed」は任意のサイトの構成要素をチェックしてパフォーマンスをあげるための改善点を提示してくれる拡張機能です。インストールして使うためには、アドレスバーに「chrome:flags」と入れて「試験運用版の拡張機能 API」を有効にしなければなりません（詳しいことはこちらに）。

面倒くさかったら、「Page Speed Online」でチェックしましょう（PC向けもモバイル向けもチェックできます）。

YSlow

「YSlow」は、Yahoo!さんのページパフォーマンスチェックツールですね。チェック項目はGoogleさんのそれとは微妙に異なりますが、チェックすれば改善点を教えてくれます。まぁ、GoogleのソレとYahoo!のソレ、同時にやりたかったらオンラインサービスの「GTmetrix」でどうぞ。

Speed Tracer (by Google)

GoogleさんのPage Speedはチェックして改善点を教えてくれますが、「Speed Tracer」はページを読み込んでから何がおこなわれているかを事細かに教えてくれる拡張機能です。以前は、Windowsでしか使えませんでしたが、最近はOS Xでも「ChromeWithSpeedTracer」というアプリを入れて、そこからChromeを起動すれば使えます（ただし、Chromeはβ版とかにしないとダメです）。詳しい話はこの辺に。

Google Analytics Debugger (by Google)

「Google Analytics Debugger」は、その名の通りでGoogle Analyticsが送っているデータをデバッグするための拡張機能です。有効にしてサイトにアクセスすると、何を拾い上げてるのとかがわかります。あ、Webインスペクタの画面の下に出てきます。使う時は、GAのOpt-Outsの拡張機能とか入れてる人は無効にしてくださいね、じゃないと表示されませんから（笑）。

Image Properties Context Menu

前述したPenduleには、ページ内で使用している画像の一覧を取得する機能がありますが、こちらは任意の画像を右クリックして新しいウィンドウで表示してくれる便利な拡張機能です。サイト内に一杯画像あると探すのも大変ですからね。右クリックで情報が拾えるのはありがたいです。

Corporate Ipsum

これを便利だと思う人はかなり限られているとは思いますが…。よくあるLorem Ipsumなテキストを会社的な文章で作ってくれる拡張機能です。といっても、英語なんですけどね。大体どれぐらいのワード数でみたいなことができるので、ラフ作る時のダミーテキストとして使えるんじゃないでしょうか。

最後に、拡張機能のオン・オフを簡単にする拡張機能

冒頭にも書きましたが、何でもかんでも入れればいいというわけでもなく、入れたら入れた分だけメモリを使います。非力な環境であれば、使う時だけ必要な機能をオンにする方がいいですね。拡張機能がどれぐらいメモリとか使ってるかは、「タスクマネージャ」で確認できます。

Extensions Manager (aka Switcher)

オンオフは「拡張機能」メニューからも変更できますが、この「Extensions Manager」でツールバーから簡単に切り替えられます。これが一番メモリ食ってる気もしますがｗ

こんな感じです。

ま、あとは自分で選んでくださいｗ

機能が重複しているのもいくつかありますが、日々の使い勝手をちょっと改善するものからWeb制作関係のお仕事に従事されてる方に役立ちそうなものを集めてみました。以上、なにかのご参考まで。

＃たしかに変なタイトルですね。「人によっては便利な〜」です（笑）。

「Charlesを使えば何ができるか」についての解説は、当日イベントに参加いただいた皆様の特典ということにして、Charlesを使ったアレでソレするための方法を簡単ですがまとめておきます。

Charles のインストールと設定

公式サイトからファイルをダウンロードし、解凍後インストールします。

起動するとこのような画面が現れますので、Proxyの設定をおこないましょう。

MacもWindowsもおそらく同じメニュー構成になっていると思います。

まずは、「Proxy → Proxy Settings…」を選択して、動かすプロキシサーバの設定をおこないます。

「Proxies」タブを選択して、「Port」の欄にプロキシサーバが使用するポート番号を入力します。たとえば、ここでは「8888」が入力されていますが、これは「1024」以降の番号で空いているネットワークのポートで構いません。よくあるプロキシサーバのポートは、1080（Socks）、8080、10080とかですね。

念のため「Enable transparent HTTP Proxy」にもチェックを。

Macの場合は「Mac OS X」のタブで「Enable Mac OS X Proxy」にチェックをして、「Use HTTP Proxy」にもチェックを入れましょう。Windowsの方も同じようなメニューがあると思います。ちなみにこの項目はProxyメニューからもアクセスできます。

これでメインウィンドウの上段にある日の丸みたいな「Start / Stop」ボタンがオンになります。これらには、Proxyメニューからも直接アクセスできますので、なんかあったらそのメニューを開きましょう。チェックが入ってる項目が現在有効になっている機能です。

これでiPadやiPhoneから接続するための準備が整いました。

Charlesを使ったネットワークアクセスについて

あとは、iPadやiPhoneなどのネットワーク設定を変更して、Charles 経由でインターネットに接続するだけですが、その前に簡単ですがネットワーク接続の様子を図式化してみました（図はクリックで拡大します）。

通常、iPadとPCはそれぞれがWi-Fiでルーターに接続されています。そのままでは、ネットワーク全体を流れるデータをキャプチャでもしない限りは他のデバイスでやりとりされるデータまでは拾えません。

CharlesのProxyを有効にした場合は、iPadやiPhoneのようなデバイスにCharlesを動かしているPCのIPとポート番号を指定することで、そのマシンを経由してインターネットに接続している、と。だから、デバイスでやりとりされるデータを拾い集められるのです。

iPadやiPhone、その他のデバイスのネットワーク設定

このような仕組みなので、Charlesの設定が終わったらiPadやiPhoneなど使いたいデバイスのネットワーク設定を変更します。

iPadやiPhoneの場合は、初期設定のネットワークで接続しているWi-Fiを指定して接続設定を変更します（リストに並んでいる名前の右矢印をタップ）。一番下に「HTTP Proxy」の項目があるので「マニュアル」を選んで、Charlesの動くマシンのIPアドレスと指定したポート番号を入力します。

たとえば、IPアドレスが「192.168.0.6」CharlesのHTTP Proxyを動かしているポート番号が「8888」だったらこのように入力しましょう。認証部分はオフのままで大丈夫です。

で、あとはCharlesのHTTP Proxyをオンにして日の丸ボタンをクリックして記録をスタートさせて、iPadとかからSafariなどを起動して接続すればオッケイ。

このように左側に接続中のホスト名が出てきますから、みたいものをクリックして内容を確認してみましょう。HTML、CSS、JSはもちろんのこと、画像なんかもそのまま表示できます。

Charlesを使った回線シミュレーションのやり方

セッション中にも触れましたが、Charlesは回線のシミュレーションも可能です。

回線のシミュレーションは「Throttling」という機能を有効にします。回線速度などの設定は「Proxy → Throttling Setting…」にあります。

「Enable Throttling」にチェックを入れれば機能が有効になります。設定画面には、今時あまり使うこともないモデム並の速度や3Gなどのプリセットが複数用意されています。回線速度がない場合は、ダイアログ内に任意の数値をいれて設定しても良いでしょう。

終わったら、Proxyメニューを見るとThrottlingが有効になっているのが確認できます。このオンオフもメニューから切り替えられます。

というわけで

今回のセッションは、HTML5による電子書籍ということでしたので、直接それに関係の無いCharlesはおまけ程度に紹介するつもりでした。知っておくと便利なツールであることは間違いないですからね。でも、予想以上の反響でｗ

Firefoxの「LiveHTTP header」とかSafariやChromeのWebインスペクタ、そのようなHTTPプロトコルを流れるデータのやりとりをチェックするツールはあります。しかし、それはあくまでもブラウザに流れてくるデータだけです。

今回セッション中でふれた使い方はもちろん、回線速度シミュレーションもできるソフトは限られています。実はこのCharles、9月26日発売予定の「スマートフォン制作の教科書」にも、簡単ですが必携ツールのひとつとして紹介しています。その他、内容も盛りだくさんなのでこちらもよろしくお願いします（笑）。

追記

OS Xをお使いの皆さんは、こちらもどうでしょうか。
→ MacでWebデザイン、あると便利なアプリ48＋2

今回もまた懲りずに、Macに乗り換えようかなと思ってる方や乗り換えたばっかりの方、MacBookなんちゃらを使ってカフェやコワーキングスペースなどをノマド気味にウロウロしてる方のために、ボクがMBPにインストールしたアプリを22個紹介したいと思います。

MacBookをお使いの方もそうでない方も。今回はジャンル分けはしてませんが、アレコレと多岐にわたっています。あと、最後の方には日常のブラウジングを少し快適にするだろう Safariの機能拡張もおまけでいくつか。

では、ちょっと短めですがいってみましょうか。

Alfred App

MacBookのようなノート単体だったり、マウスを使えるスペースがない場合は、Dockに並んだアイコンをクリックするか、LionのLauchpadを呼び出してアプリを起動することになります。いちいちマウス操作も面倒なので、できればキーボードショートカットで呼び出せるランチャーがあると便利です。

定番といえば「Quicksilver」だったりしましたが、最近はランチャーもいろいろ豊富にそろってます。今回はアプリの起動ぐらいができればいいかな、と「Alfred App」にしてみました（でも、一応有償のPower Pack込）。他にも「Launcher」とか良さそうですね、そのまま辞書ひけるし。

Sparrow

元はといえば、Gmailのメーラーとして登場したはずの「Sparrow」は、だいぶ進化をしたようですね。無償のLiteはGmailのアカウントひとつしか使えませんが、有償版であればマルチアカウントはもちろん、その他のメールサーバ（IMAP）にも対応してます。様子見でいまはLite使ってます。

CloudApp

クラウドを使ってちょっとしたファイル共有やメモをやりとりするのに、DropboxやEvernoteを使ってる方も多いでしょう。ボクはDropboxは使ってますが、ちょっとしたファイルの送付やURLのメモには「CloudApp」を。スクリーンショットやブラウザで表示しているURLはショートカットで送れます。Dropboxで似たようなことやるなら、「DropIn」ですかね。Twitterクライアントの「Tweetbot」がCloudAppに対応しています。

Flash Block

出先でMacBook使ってるとバッテリーの残りが気になります。いや、それでなくても非力なマシンでFlashコンテンツを再生し始めるとブンブンうるさくなったり熱持ったりします。これまではブラウザごとにFlashコンテンツを無効化するプラグインを入れていたのですが、起動していることに変わりはなし（笑）。

ブラウザごとに異なるプラグインで抑止するのは面倒だしいろいろ問題もあるので、今回はブラウザを選ばず元から絶つ、みたいな「Flash Block」という常駐アプリを入れることにしました。Chromeだけは元々組み込み済みなので、ひょっとしたら「chrome:plugins」で止めないといけないかも。

App Tamer

だから、バッテリーの残りが大事なんですよ（笑）。この「App Tamer」は、指定したアプリがバックグラウンドにある時は止めちゃうものです。止めるって言っても、一時停止状態にして無駄なCPUを使わせないという仕組みですから、前に出せばすぐ使えます。MacBookを外で使う人にはオススメです。

Chromeみたいなブラウザは勝手に登録されると思いますが、バックグラウンドで実行しながら定期的にネットに接続するようなアプリは指定しない方がいいですかね。アプリケーションごとに止める止めないは指定できます。

Isolator

ノマドとかいう仕事スタイルが流行っているらしいですね（笑）。「そんなの何年も前から俺やってたわー」って誰かさん風に言ってもいいのですが、出先で仕事するのはいいんだけどたまに覗き込まれたり、背後から視線を感じることもあります。「Isolator」は、一番前の画面以外を塗りつぶして見えなくすることができるもの。出先で作業する人は入れておいて損はないです。

Growl

「Growl」は、通知をしてくれるアプリというかシステム環境設定に放り込まれるもので定番ですね。いろいろなアプリケーションと連動するので、何かイベントが発生するごと（たとえば、ダウンロードが終わったよー、メールが届いたよー、とか）に通知が欲しい場合は入れておくと良いですね。有効にするしないは、アプリごとに設定できますのでうざかったらオフにすればいいです。

Wallet for Mac

シリアルやパスワード、暗証番号の類の管理には「1 Password」を使ってる方が多いかもしれませんが、ボクは「Wallet for Mac」をずっと使っています。機能的には似たようなもんです。MobileMeとかDropboxと同期できるし、iPhoneアプリからも確認できます。

iPhone Explorer

「iPhone Explorer」は、iPhoneやiPodなんかをUSBで直結してドライブとしてマウントさせることができます。つまるところ、写真のデータとかをフォルダごとごっそり転送するのが簡単です。iPhotoとか使って管理してない（OSが古いとそもそも拾えないのがあったりするし）、ただバックアップしたいだけって人には便利ですよ。MacもWinも対応してます。

壊れたり水没する前に定期的に拾い上げる癖をつけましょう（笑）。

namebench

「ネットの接続を速くする」みたいな記事で、よく GoogleのPublic DNSにすれば速くなるとか書いてる人がいますけど、アレはそもそも海の向こうを対象に数年前に始まったものです。日本国内からそれを指定しても、必ずしも速くなるとは限りません。確かに速いは速いけど、それは気のせいかもね…（笑）。

自分の接続環境から本当に速いDNSを探すのであれば、この「namebench」を入れてチェックしてみましょう。GoogleのDNSよりも国内の別のサーバの反応の方が良かったりしますから。テストが終わったら、オススメされた3つのDNSを環境設定の「ネットワーク」で登録しましょう。

それでもGoogleのPublic DNSが速いのならそれにすればいいでしょう。

Galleried

さて、話はガラッと変わりますが、ボクの本業はWebサイトのあれこれをやる仕事なので、海外のデザイン系のサイトを見る機会も多いです。「Galleried」は、海外のクリエイターSNSの「Dribbble」だったり、ギャラリー系の「creattica」「css mania」「folio focus」などを一気にまとめて見れるものです。DribbbleなんかはiPhoneやiPadのアプリもありますが、ちまちまサイトに行ってなんか見てられないですからね。オススメです。

InstaDesk

どうも、今となっては日本で何番目なのかわかりませんが、実はフォロワー数35,000弱のInstagramer、こもり（@cipher）です。フォローしていただいてる皆さんありがとうございます。で、そのInstagramをMacから見る時に便利なのがこちらの「InstaDesk」。他にも「Carousel」とかありますね。入れておくとブラウザ起動しなくてもいいです。

MPlayerX

こないだの記事にも書きましたが、ムービー系のファイルってのはコーデックっていうのがありまして、拡張子が名のしれたものでもその中の映像と音声のコーデックによっては再生できなかったりします。Windowsだと問題ないのかもしれませんがね…。で、そんな特殊なコーデックでも再生できるプレーヤーが「MPlayerX」です。次に紹介する「VNC（Video LAN）」も同じようなもの。

VideoLAN

前述のように「VideoLAN」も映像の再生アプリケーションです。似たようなのをなぜ並べているかというと理由があります（笑）。「HandBrake」というDVDリッパーでDVDの中身をぶっこ抜いて、iPadやiPhoneで再生できるようにエンコードしようとするとこの VNCが必要になってます。なので、あわせて入れておくと何でもできるんですね〜（謎）。

Adium

ボク個人は最近ではまったく使うこともなくなったメッセンジャーのサービス、古くはICQ、AOL、MSN、JabberにGTalk…。おぅ、挙げればアカウントだけはちゃんと持ってます（笑）。で、その辺のメッセンジャー系のサービスを一元管理できるクライアントが「Adium」で、もう説明の必要もないぐらい有名ですね。アイコンもメンバーリストもチャットウィンドウ、エモーティコンなども自分の好みでカスタマイズ可能です。

Skype

ごめんなさい、入れてるものの「Skype」も使っていません（笑）。世間様では他のメッセンジャーサービスよりもこっちの方が人気なんですかね。とりあえずバージョンアップのたびウィンドウがでかくなってるのは気のせいでしょうか…。あ、ボクへの連絡はTwitterのDMとかFacebookのメッセンジャーが確実です。

SkypeStyles

使ってないSkypeなんですが、見た目を変更する「SkypeStyles」ってのもあります。ファイルをダウンロード後、解凍してダブルクリックでインストールされます。あと、本家Skypeでも「Create a Skype for Mac chat style」というコンテスト？が始まってますね。

Kindle for Mac

日本国内の電子書籍市場は混沌としてますが、海外ではKindleやePub、PDF、mobiでのファイルの提供が盛んです。特にボクは洋書で勉強することが多いので「Kindle for Mac」は入れています。iPhone、iPad、Kindleと同期できるから便利なんですよね。あ、mobiのファイルとかも読めます。

Zinio Reader

こちらは書籍というよりは雑誌ですね。これまで何度も出してますが、もうZinioでいいじゃないかと。国内の出版社も古いモノからちょこちょこZinioに出てるみたいですけど。海外の雑誌を読むなら、書店で買うよりははるかに安いしきれいだし、すぐ読めてテキストだけ抽出したりもできます（ものによるけど）。

calibre

ePubリーダーはなかなか決定版がありません。「calibre」は指定されたCSSなんかもちゃんと反映されていいんですが、いちいち動作が重いのが難点です。ただ、Adobeさんの「Digital Editions」はLionだとシステム要件を満たしてないとかでインストールできないし、仮にインストールできたとしてもリーダーとしては…なので、我慢してcalibreを。あ、作るなら「sigil」が便利ですよ。

Mobile Mouse

えー、来週の17日（土）にもイベントで登壇する予定なのですが、ボクはたまに人前でしゃべることがあって、この「Mobile Mouse」を入れています。これ入れておくと、iPhoneをマウス代わりにMacが操作できます。イカのにぎり寿司みたいなマウスがない時とか家の中でも（笑）。

Mouseposé

やはりこれもどちらかというとイベントだったり、Ustreamの放送だったりで使うのですが、マウスのクリックでピカッと光らせたり、ポインタの場所だけを明るく表示してくれるユーティリティです。ショートカットでパッと切り替えながらプレゼンできると、オーって言われるかもしれません。そういう歓声が欲しい方は入れておきましょう（笑）。

Safari Extensions Gallery

さて、ここからはおまけコーナー。ボク個人は仕事の関係もあって、日常的なブラウジングには GoogleさんのChromeを使っているのですが、Safariでブラウジングする時に入れておくと便利な機能拡張（Extensions）を紹介しておきますね。直接機能拡張へのリンクができないので、ギャラリーから探してください。

AdBlock

「AdBlock」は言うまでもありません。Webサイトを見ていてうざったい広告を何もしないで非表示にしてくれるモノです。オプションで個別に登録もできますが、自動的にリストを拾ってそれを反映してくれるので楽です。特にほら、MacBookで出先で回線が細い時とか邪魔でしょ？（笑）。

Facebook Cleaner

「Facebook Cleaner」は、Facebookの右側に出てる広告とかPokeとかを非表示にしてくれます。右側のカラムがスッキリして気分もよろしゅうございます。

AutoPagerize

「AutoPagerize」を知らない方もまだまだ多いかもしれませんね。えっと、ページが連続するもの、たとえばGoogleの検索結果とかで数字とか「次へ」をクリックしてなくても、自動的に次のページを取得して繋げてくれる機能拡張です。Safariだけでなく、いろいろなブラウザで使えます。ありがたや…。

Stop/Reload Button

ページをリロードしたければ Cmd＋Rのショートカットでいいわけですが、昔のブラウザみたいにツールバーに出しておきたければこちらの「Stop/Reload Button」を。

JavaScript Blacklist

いまの世の中、 JavaScriptがないと動かない（見れない）サイトもあったりしますが、たまにそれが原因でイタズラされちゃったりもしますからね。「JavaScript Blacklist」を入れておけば、特定のドメインのJavaScriptを実行しないようにできます。何かサイトにアクセスすることで問題がおきた時のために。

Google Analitics Opt-out

最後はSafariのギャラリーからはインストールできない「Google Analitics Opt-out」を。そのままです、サイトにアクセスした情報を取得・解析するGoogle Analyticsにデータを送信しないようにするものですね（別にアクセスした情報ぐらいはいいんですけどｗ）。他のブラウザだと、広告系も排除するプラグインが配布されているのですが、残念ながらSafariはこれだけしか提供されていません。

というわけで、次回は…

おまけを入れたら長くなっちゃいました（笑）。ま、そんなわけで、今回は日常生活をちょっと便利にするかもしれないアプリケーションを紹介してみました。いかがでしたかね？ ちなみにソーシャル系のサービスのクライアントは何一つ入れていません。画面の上とか下でチコチコお知らせされたりしても気になるだけなので、何か見たくなったらブラウザで繋いでます。

次回は、またWebデザイナーさん向けに、Google Chromeの拡張機能でも紹介してみましょうか。

「Web制作といえば、AdobeのCreative Suite」みたいな人も多いでしょうが、サブスクリプションプランが始まったとはいえ、いきなりウン十万もソフト含め投資できないこともありますからね（会社が買ってくれるならいいですｗ）。別にそれがなくても、他で代用すれば仕事はできるから大丈夫です。

いま現在MacでWeb制作をしている皆さんには定番なのも多く含まれますが、ちょうどこないだLionデビューして環境整備がてらまとめたので、最後まで流し読むと「え？何それ」みたいなのがあるかもです。

今回は各種ブラウザとサーバ関係なんかは入れてません。では、48（＋2）個いってみましょうか。

グラフィック関係のエディタやツール

Lineform

「Lineform」は、Illustratorの置き換えになるというか、パスを使ってイラストを描いたりとかっていうベクタードローイングアプリケーション。

Sketch

「Sketch」もまたベクタードローイングアプリケーション。App Storeのレビューではバグがあるとか書いてありますが、比較的安価なのと書き出しのフォーマットが多いのでいいかな、と。

Drawit

Sketchを出しているところのもう一個のアプリ「Drawit」は、ベクターデータをビットマップ風に扱えるもの。フィルターかけたりとか。Web制作だと、UIとかアイコンとか作ったりもしますからね。

Inkscape

Illustratorの置き換えになるアプリケーションとして有名な「Inkscape」は、オープンソースで開発されています。SVGベースになってますが、.aiファイルとかを読み込んだり.epsで書き出したりといったことも（開けないのもあるとは思う）。

Adobe Photoshop Elements

Webデザインにおいて、ゴリゴリとレイヤー重ねてイメージを作るって用途ではなく、簡単に写真を修正・加工するぐらいなら「Photoshop Elements」で十分じゃないかと。実際、ボクは一番使ってました（一応過去形）。

Pixelmator

Photoshopの完全なる置き換えにはならないと思いますが、安価で一通りの画像編集ができることで有名な「Pixelmator」。App Storeでも2,600円です。桁は間違っていません（笑）。パスがないとか、そのぐらいですか？

ImageOptim

Webサイトの表示に時間がかかる原因のひとつは、サイトで使ってる画像の量やサイズだったりもします。そんなJPGやPNGの画像は、最適化すればもっと軽くなるわけで。最近「jpegmini」というとんでもないサービスが話題ですが、それはそれとして「ImageOptim」は入れとかないと。

Quick Sprites for Mac OS X

CSS Sprite作るのって、画像を並べるだけなら簡単なんだけど（笑）、それからCSSを作ってとかって作業がちょっと面倒。そんな作業を簡略化してくれるのが、この「Quick Sprites」です。デモの動画がサイトにありますよ。

OmniGraffle

ダイアグラムやフローチャートといった図を作れるアプリケーションとして有名な「OmniGraffle」は、ワイヤーフレームとか作るのにも重宝します。海外に目を向けると、Webサイトやスマートフォンサイト用のOmniGraffle用のステンシル（拡張パックみたいなのね）が沢山公開されています。

Review

「Review」は、MacからpsdをiPhoneに飛ばして、実機でモックアップを確認できる代物のようです。もちろんRetinaも古いのも対応。なにげに初期段階では便利ですよね、きっと。似たようなので「Prototypes」ってのもあって、こっちはボタンの指定なんかもできちゃったり。

テキストエディタとかコーディング系

Coda

いまさら説明の必要もない気はしますが、Dreamweaverの置き換え的にコードの入力補完機能やサイト管理機能などが充実しているアプリケーションが「Coda」です。最新版はSubversionにも対応してます。

Sublime Text 2

ボクは普段 TextMateというエディタを使ってるんですが、今回 Lionにするにあたって最近日本語が使えるようになったという「Sublime Text 2」に。いろいろな言語に対応したテキストエディタです。省略形からコードを展開する機能はデフォで搭載されていて、Windows版とかもあります。

Sublime 2 ZenCoding

Sublime 2は、HTMLとかJSなら省略形から展開してくれるんですが、さすがにZen-Codingになれた指先にはCSSを展開してくれないのが困るわけで…。欧米の皆さんは仕事が速くて助かります、こちら Sublime 2用のZen-Codingプラグインです。

Byword

「Byword」はテキストエディタの一種で、Markdownでテキストを編集できる素敵アプリ。Markdownは、サイト内の記事をHTML込みで書くときとか便利で、いちいちマークアップしなくてよくて書き出せばHTMLになります。iA Writerでも使えるのかな？ フルスクリーンにも対応しているので書くことにも集中できます。

Jedit X

日本語のテキストエディタの定番「Jedit X」。テキストだけを集中して書く、文字数とかを気にしながら書くといった時だけでなく、送られてきたテキスト原稿の「全角・半角」を統一する時、複数ファイルに含まれるテキストの検索・置換とかにも重宝します。ないと困ります。

TextExpander

「Text Expander」はテキストの入力支援というか、登録した文字列を任意の文字入力で呼び出すアプリケーションです。IMEの単語登録だと文字数の限界とかもありますから、ちょっとしたコードなどをスニピットとして登録して呼び出す、みたいな使い方ができます。HTMLコードのスニピットとかも公開されてます。

HTTP、FTP、その他のクライアントとか

WebKit

「Webkit」は、SafariやChromeのレンダリングエンジンとして有名ですね。オープンソースで開発されています。で、なぜWebkitまでっていうと、電子書籍のフォーマットであるePub 3.0の確認用として入れてます。縦書きとかその辺もあるんで（Chromeでも見れるかな、いまは）。

Transmit

Codaを出しているPanicさんが、古くから単体のFTPクライアントとして出しているのが「Transmit」です。Mac用のFTPクライアントには、CyberduckやForkLift、FileZillaなんかもありますけど、対応しているプロトコルの多さとタブで複数サイトに接続できるのが決め手ですかね。ずっと使ってます。

Interarchy

なんか久しぶりに名前を聞いた気がするんですが、「Interarchy」もFTPクライアントのひとつです。これをなんで取り上げるかというと、Transmitでも対応していないサーバ（Google Storage、Rackspace Cloud Files）もオッケイと。いざという時のために。

Tower

ボクは普段ひとりで自己完結してる仕事が多くて、Gitとか使うこともないんですが一応。「Tower」はゲームじゃなくて、GitのGUIクライアントです。Gitのクライアントは他にもいろいろあります。

GitHub for Mac

ま、そんなわけなので GitHubを使うこともないわけですが（笑）、いざ使わなければならないという時のために、GitHubのGUIクライアント「GitHub for Mac」もね。

Versions

DreamweaverやCodaでもSubversionはサポートしてますが、他にもSubversionのGUIクライアントがいくつかあります。そのひとつがこの「Versions」。余談ですが、こちらの開発元はこないだFacebookに買収されました。

Terminal

これがあるとないとでは大違いなのが、OS Xに標準搭載されている「ターミナル」です。いや、ないと困ります。直接サーバにログインしてファイル操作したり、いざとなったらこれからSFTPするぐらいの勢いで。この中では「vi（vim）」とか使います。

Alkaline

「Alkaline」は、MacでWindowsのIEの確認を…というか、URLを入力して指定したブラウザのバージョンでプレビューできるアプリケーション。LitmusというEメールのプレビューサービスとか解析をやってる会社のです。無償だと制限がありますが、HTMLメールの確認とかも必要であればいいかも。

Better Link Tester

「Better Link Tester」はリンクチェッカー。404とか出てないかとか、ちまちま確認とかしてられないですからね。Dreamweaverとか使ってない方へ。

Charles Web Debugging Proxy

普通に表向きのWebデザインだけやってるとあまり用はないかもしれませんが、「Charles」はWebサイトのデバッグ用のプロキシアプリです。これがあると、リクエストに応じて何（どういうデータ）が戻ってきてるとかわかるし、回線速度のシミュレートができます。ふふふ（謎）。

ファイルのやりとり、原稿表示・確認系ツール

Dropbox

「Dropbox」は説明の必要もないですよね。ファイルのやりとりする時には、メールで添付する以外の選択肢としてオンラインストレージとか使うと便利です。ローカルのファイルのやりとりでも便利なので、ちょっとしたファイルを移動する時はバックアップ代わりに使っています。

iWork ’09（Keynote / Numbers /Pages）

いわゆるMac版のオフィスアプリケーション「iWork ’09」。Keynoteはプレゼン用途だけでなく、ワイヤーフレームを作ったりもできますからね。Keynote用のパーツとかも海外では公開されていますよ。

OpenOffice

オープンソースで開発されているオフィススイートといえば「OpenOffice」が有名ですね。これをMacに最適化した「NeoOffice」もありますが、いろいろあってこっち入れてます（謎）。

Preview

これもOS X標準搭載のアプリケーションですが…（笑）、「Preview」は送られてくる原稿のちょっとした確認に重宝しています。フォルダをドラッグすれば中のファイルが一個にまとまったり、簡単な編集もできるし便利っす。

GraphicConverter

これで開けない画像形式とかあるのかな？って思うぐらい、多種多様なフォーマットに対応したグラフィックエディタが「GraphicConverter」です。いまではPhotoshopにもバッチ処理とかありますけど、これのバッチ処理とかも強力です。開けない画像はとりあえずコレにドラッグ。

メディア系プラグイン、映像編集・コンバートなど

Adobe Flash Player

いや、Creative Suite入れれば入りますけど、Lionからは標準でインストールされてないようで（笑）。Flashコンテンツ見るためには必要ですからね…。あ、そうそう、Chromeの中のFlash Playerは別であらかじめ組み込み済みです。Flash Playerに脆弱性があったとしても、先に更新されちゃったりします（笑）。

Windows Media player for Mac（Flip4Mac WMV）

「Flip4Mac WMV」は、無償で利用できるWMV用のQuickTimeコンポーネントです。無償版は見るだけですけど、元がWMVのファイルをコンバートしないといけない時とかもあります。ライセンスを買って入力するだけで、書き出しできるバージョンへ切り替わります。

Microsoft Silverlight

Microsoftさんの「Silverlight」も閲覧用になりますが、念のため入れておきましょう。なくて困ったことはほとんどないのですが…（笑）。

Miro Video Converter

ボクは仕事の関係上、動画を扱うことが多かったのもありますが、世のWebデザイナーさんもこれから動画を掲載しなければ…とかあるかもしれません。映像にはコーデックというややこしいものがあるんですが、これを入れておくと多様なフォーマット（MP4 / WebM / Ogg Theora）に変換できます。

QuickTime 7 Pro

OS X LionになってからQuickTime Xになってしまって、一部の形式を除いてファイルの書き出しとかができなくなってしまい…。仕事だと何かあった時にちょっと困るので、Lionにも入れられるSnow Leopard対応の7.6.6を入れてPro版に。

Final Cut Pro X

普通のWebデザイナーさんだと動画編集までしないかもしれませんけど（笑）。以前は、簡単な動画編集用としてFinal Cut Expressがありましたが、統合されて「Final Cut Pro X」になってましてね…、これからはコレで。

Ustream Producer

やはり普通に生活していると動画配信とかもやることはないでしょうが、ボクは仕事でやる機会がゼロとは言えないので、最近はUstreamでしょうねってことで「Ustream Producer」。

CamTwist

Ustream Producerだけでも十分ですが、テロップ入れたりとかするのに重宝する「CamTwist」も入れておけば万全ですね。

圧縮、解凍、その他ツール

MacWinZipper（WinArchiver）

ファイルのzip圧縮なら選択して右クリックで「〜を圧縮」でいいんですけど、世の中には「Thumbs.db」入れてくる割には「.DSstore」を嫌う人もいますからね（笑）。Windowsの方にもそうでない方にもクリーンなzipを送るために。あと、日本語のファイル名をつける人は文字化けしないアーカイブになります。

The Unarchiver

zipはダブルクリックで展開されるし、他の圧縮形式を解凍するなら後述のStuffit Expander一個あればどうにかなりはするものの、.lhaだとフォルダ付きが全部一カ所に展開されるとか不具合もあって、こちらの「Unarchiver」を入れてます。

StuffIt Expander

前述のUnarchiverは、.sitにも対応しているみたいですが、開けないのとかあっても困るので、念のため「Stuffit Expander」も用意しておきましょう。いまどきあんまり見かけませんよね、サイトを見ても昔の勢いは感じられません（笑）。

システム関係のアプリケーションなど

MenuPop

MBPとかMBAとかで作業してる人はショートカットの達人かもしれませんが、ショートカットがなければトラックパッドでえっちらほっちらメニューまで…。大きなモニタの人も似たようなもんですね。「MenuPop」は、任意のキー入力でメニューをカーソルの位置に表示します。便利です、はい。

AppCleaner

アンインストーラーのないことで有名なOS Xです。アプリケーションをゴミ箱に捨てればそれはなくなりますけど、関連ファイルまでは消去されません。そこで「AppCleaner」とかを入れておくわけですね。ドラッグすれば関連ファイルも一網打尽。ゴミ箱に入れれば勝手にやってくれるオートデリートみたいな機能は初期設定で有効にできます。

CleanApp

「CleanApp」もアンインストーラーの一種なんですが、こちらはファイルのインストールのログとかも記録できたり、長期間使ってないファイルの表示、使わない言語を削除したりもできます。これはこれで便利なんですよね。あ、有償です。似たような別のだとCleanMyMacとか。

Launchpad-Control

OS X Lionから搭載されたLaunchpadですが、何のためにあるのかいまいちわかりません（笑）。別にLaunchpadになくてもいい、インストールしたアプリもずらずら並んでいくのでかえって使いづらいというね…。そんなLaunchpadのアプリの表示非表示をコントロールするのがこの「Lauchpad-Control」です。

ClamXav（w/ ClamXav Sentry）

OS Xはゼロとは言いませんが、いわゆるウイルス的なものの数はさほど多くはありません。とはいえ、アンチウイルスソフトも入れておきましょう。市販のアプリもいくつかありますが、ボクはサーバにも使ってたりしたコレを入れてます。なお、App Store版は常駐監視してくれるClamXav Sentryが入ってません。

Fontcase

OS Xに標準搭載されているFont Bookでも十分な気はしますが、フォント管理ソフトが必要であれば「Fontcase」とか「Font Explorer X」とか入れておくといいですかね。ちょっとバグとかあるみたいですけどｗ

Memory Sweeper Pro

メモリの空き容量を増やしてくれるお掃除アプリ。この類のアプリはいろいろあります。しかし、どれもこれもアイコンとか表示とかがダサいというか、美しさのかけらも感じられない。で、この「Memory Sweeper Pro」を。

Name Mangler

ファイルのリネームとか膨大な数だと気が狂いますね…、拡張子の変更とかそういうの含め。「Name Mangler」は、フォルダ内のファイル名を検索置換したり、連番に変えたりで重宝します。リネーム系のソフトはいろいろあります。

といった感じでどうでしょうか？

AdobeさんのCSなど定番中の定番はのぞいて、できるだけ安価で用意できそうなものを中心にしてみましたがいかがでしたでしょうか。テキストエディタなどは好みなんかもあるので、必ずしもココにあるものがいいとは言いませんが（笑）。ま、それ以外はインストールしないまでも頭の中に覚えておけば、いずれ使う時がくるかもしれません。

ひとつのアプリケーションでの作業に固執すると、作業内容によっては無駄に時間もかかることもあります。やりたいことにあわせて適材適所で切り替えるのが仕事効率化のコツです。では、Macで良いWeb制作ライフを。

→ MacBook Proに入れたアプリ22個＋おまけ | gaspanik weblog
→ 人によっては便利なiPadアプリあれこれ | gaspanik weblog

Stanzaのような電子書籍ビューアでも同じで、ePubを入れただけでは単に読めるってだけ（強制的にCSSを適用する方法はあるとはいえ）。そういう面では PDFも読めるiBooksがよかったりするんですが、いちいちiTunesで同期したりダウンロードとかでデータを追加するのはちょっと面倒…。

そこで登場するのがこちらの「DocStorm」。

転送はWiFiだけど…。一通りの機能は備えるDocStorm

DocStormは、ドキュメントを読むことに特化したリーダーアプリです。

対応しているフォーマットは「PDF/TEXT/ePub」しかありませんが、PDFの場合はサムネイルも表示されますし、ePubの場合はちゃんとその中に指定されたCSSによるレイアウト・デザイン情報がちゃんと反映されます（Webkit使ってるのかな？）。

輝度調整の機能、ブックマーク機能、TwitterやFacebookを使った共有機能などもちゃんと用意されていて、その辺はまるでKindle for iPad。

PDFを開いた時は、埋め込まれた目次からはもちろんですが、画面下の方をタップしてサムネイルから読みたいページを選択することができます。サムネイルから読みたいトコにジャンプ。この辺はZinioみたいな感じですね。

ePubの場合は、さすがにその仕様上サムネイルは表示されることはありませんがスライダで移動できますし、フォントサイズの調整も当然のことながらできます。もちろん日本語のePubでも問題ありません。ひょっとしたら縦書きのePubもいけるかもしれませんね（試してはいませんが 笑）。

画面が暗くキャプチャされていまってるんですが、ePub内にCSSが含まれレイアウトやデザインが適用されていればご覧のとおり、よくあるePubリーダーみたいな地味な表示ではなく、ちゃんとそれが適用された状態で閲覧できます。この辺はiBooksも同じですね。

データの登録は、現時点ではiTunesを使った転送以外にWiFiでアプリに直接アップロードという二通りの選択肢しかありません。ePubの場合は「めくった感」という余計なギミックがありますが、これがオン・オフできるようになったり、Dropboxとかから転送できるようになったらもっと便利になるんでしょうね。

今後に期待です。

→ DocStorm for iPad on the iTunes App Store

なんでも、このWebPuttyはオンラインのCSSエディタでありながら、CSSのファイルのホスティングも兼ねているようです。さらには「Sass」や「Compass」もサポートしているらしく、そっち系を使ってらっしゃる方でも使える、と。ちなみに、公開時のファイルはちゃんとMinify & Gzipされるようです。

何はともあれ、Googleアカウントでログインだ

登録に特別なことは必要なく、Googleアカウントでログインできます。

ログインするとこんな画面。左が保存されたCSS、右に新規サイトの登録のボタンが並んでいます。右上の「HELP」を押せばいろいろ教えてくれます。

こんな感じですね。で、開いてみると…。

左ペインにプレビュー画面（公開されてる画面）、右ペインにCSSのソースコードが表示されます。表示はCSSのソースコードの上のボタンで変えれるのかな。

CSSのサンプルソースの上にSassの書き方でもOKよ、とかCompassの@importとかが入ってますね。参考にしてください。

で、編集が終わったらPublishをポチッと。そんな流れ。

link要素とscript要素をHTMLにペタッと

新規サイト登録時には特に何も言われないのですが（サイト登録とユーザー管理ぐらい）、編集したCSSはWebPuttyの用意しているホスティングからMinify & Gzipされて配信されます。HTML側には、指定されたコードを貼り付けておけば良いみたいですね。

読み込みのコードを確認するには左ペインの上のボタンをクリック。

こいつをHTMLに貼っておくわけですね。

どうでしょう。割と動作も軽快ですし、Sassのセットアップもいりません。日本語サイトのプレビューまでは試していませんが、WebPuttyいかがでしょうか？