「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

そこでちょっと調べてみたらありました。コマンドラインですが、特定フォルダ内の画像（JPGかPNG）を一発で最適化してしまう「imgopt」なる素敵ツールがあるじゃないですか。ということで、簡単ですがインストールして使うまでをまとめておきます。

（追記: 2011.07.03）なんか大阪にいる心優しい人が教えてくれましたよ、OS XのGUI版「imageoptim」。以下の準備が面倒な人はこれですな。Windowsな人はこの辺になんかあるかも。

※ただし、OS Xのやり方なのでWindowsな方はどうにかしてください（笑）。

imgoptのインスコローリング

まずは「imgopt」のソースファイルをダウンロードしましょう。

とりあえずtar.gzを解凍して、適当なディレクトリに置いときます。ここからはターミナルの操作になりますので、配布ファイルのREADMEに書かれてるとおりにすれば大丈夫です。

解凍した「 imgopt」のディレクトリに移動して以下のコマンドを入力。

cp imgopt /usr/local/bin/ && chmod a+x /usr/local/bin/imgopt

なんですが、たぶん「パーミッションが…」とか言われると思うので、その時は「sudo」コマンドを使ってやりましょう。

sudo cp imgopt /usr/local/bin/ && chmod a+x /usr/local/bin/imgopt

すると「/usr/local/bin/imgopt」ができて準備オッケイ。次に同じディレクトリにある「jfifremove.c」をコンパイルしてインストールしましょう。

gcc -o jfifremove jfifremove.c

これで「jfifremove」ができるので「/usr/local/bin」に移しちゃいます。

mv jfifremove /usr/local/bin/

うまくいかなかったら、例のsudoつきで。

sudo mv jfifremove /usr/local/bin/

ここまでやれば、以下のコマンドを実行するだけで最適化できるんじゃないかと（※環境は人によって違うので、うまくいかない場合はREADMEを読んだり配布先のコメント欄を見てくださいね）。

imgoptで最適化するコマンド

特定ディレクトリ内の画像を一気に最適化したい場合は、ターミナルから以下のように入力すればオッケイ。

imgopt *

「*」はワイルドカードなので全部。

imgopt *.png（pngの場合）
imgopt *.jpg（jpgの場合）

特定のファイル形式だけまとめるならこうですね。簡単です。

あれがねえ、これがねえ、と言われるのが気になるなら

READMEに書かれてるインストールの方法の2番までやればおそらく上記のようにして使えるんですけど、実行中に「pngoutがねえ、advpngがねえ、optipngがねえ」とか言われるはずです（笑）。

これらをインストールするのも同じようにソースファイルをそれぞれダウンロードしてインストールします。pngoutはこちら、advpngは「AdvanceCOMP」の中、optipngはこちらでそれぞれ公開されています。

pngoutのインストール

pngoutはすでにバイナリの形で配布されているので、単に「/usr/local/bin」にコピーすれば良いでしょう。

cp pngout /usr/local/bin/ && chmod a+x /usr/local/bin/pngout

例によって、うまくいかない場合は「sudo」つけてください。

advpngのインストール

advpngはコンパイルから始めないといけません。ターミナルで解凍したディレクトリに移動して、

./configure

ってやるとツラツラと画面が流れていきます。終わったら、

make
make install

これでまた「/usr/local/bin」にインストールされます。パーミッションが…っていわれたら「sudo」つけて実行してください。

optipngのインストール

こちらも同様にmakeしてインストールします。解凍したディレクトリ内にある「src」ディレクトリに移動します。

cd optipng-0.5/src

で、以下を実行。

make -f scripts/gcc.mak

するとsrcの中に「optipng」ができるので、それを「/usr/local/bin」にコピーする、と。

cp optipng /usr/local/bin/ && chmod a+x /usr/local/bin/optipng

おそらくこんな感じで大丈夫でしょう。

結果はこんな感じです

一応結果を載せておきますね。

左がやる前、右やった後。ちゃんと減ってますね。

さ、レッツまとめて最適化（笑）。

＃こういうのはサーバ側に入れておくと楽ちんですね。

一部の島の中にいると周りがみんなそうなので錯覚しがちですが、その大半を世間に持っていったところで多くの人は知りません。mixiぐらいになって初めて認知されはじめたと言えるんじゃないかと…。

ま、そんな「今何してる？」で繋がるTwitterは、いろいろな方向に使い道もシフトしているようですが、特定の単語などをフィルタリングして世界中の人たちのつぶやきの断片をつなぎ合わせる（というか可視化）する「twistori」というサイトがあります。

で、ここが「twistori Desktop Edition」なるものをβとして公開しています（OS Xだけのようですが）。試しにダウンロードして使ってみたのですが、特定の単語を使ったオリジナルのクラスタとか設定できるので、ある意味フィルタリングの機能の付いたクライアントとしても利用できます。フルスクリーンでの表示もできるので、スクリーンセーバー代わりにダラダラ流しておくと良い感じです（スクリーンセーバー版もちゃんと用意されてます）。

＃ま、世界各国の人たちのつぶやく「love」も「hate」もたいしたことないなぁと思ったりしてるわけですが、生の英語の勉強にはもってこいです（笑）。

今ならアーリーアダプターのお試し価格として$12で購入できます。

※このエントリーは2007年の5月に書いたものをBloglinesのキャッシュを使って引っぱり出して若干修正しつつ再エントリーしています。しかし、使用ソフトのバージョンなどは古いままですのでご注意下さい。

まずはこの写真をみてもらいましょう。

サンプルとしてはよくないかもしれませんが、左から順番に「撮りっぱなし」「HDRI化したもの」「HDRI化したものをさらに追加補正したもの」になってます（*1）。

一番左の撮りっぱなしのは、左側やテーブルの下の陰なんかが黒くつぶれているようにみえます。こんな元写真をJPGなんかで保存しちゃった場合は、記録されるデータ量も少ない&圧縮もされるわで、どんなに頑張ってPhotoshopのトーンカーブを弄ろうがちょっとぐらいしか出てきません（*2）。
データ（記録）として残ってないものはないんです。

そこで16bitのRAWやTIFFの出番となります。JPGと違って画像の劣化なしに保存できたり、後から露光量を変えたりできるというのは実にありがたい（極端にやっちゃダメだけど）。16bitの情報量を保持しているデータの露出を変えることで黒くつぶれていた部分に隠れている（画面で見ただけでは見えてなかった）ものが出てきます。これは白く飛んでるように見えてる部分も同様。パッと見て黒つぶれや白飛びしてようが、RAWなどで保存しておけば実際にデータとしては記録されているわけです。

ここで書いてるHDRI化するってことは、露出の異なる同じ写真を重ねることで普通に写真撮っただけではレンジの関係で表現できてない部分を引っぱり出してきて、人間の目で見た時と同じように合成することができる、って考えるとわかりやすいかもしれません。

（2008.09追記）最近のデジカメでは、「ダイナミックレンジ補正」とかって機能がつき始めていて、これに近い処理をカメラ内部でできるようにもなってます。

で、真ん中の写真はPhotomatixの機能を使い、一枚の16bitのデータをベースにして自動的に生成した画像です。より細かくやるなら露出の異なる5枚ぐらいの写真を使ってHDR合成をした方が良い結果が生まれます（ブラケット撮影ができない場合は、一枚のRAWデータなどから複数の露出を変えたファイルを保存すれば良いでしょう）。Photomatixの場合は、最終的にHDR合成された画像にトーン・マッピングと呼ばれる機能を使って適用具合を調整して保存していくような加工過程でしょうか（Photoshop用のプラグインもあるので、PhotoshopでHDR合成して適用ってのもあるでしょう）。

最後、一番右の写真は真ん中のHDRI化した写真を16bitのTIFFで保存し、さらに細かく階調を補正したものになります。真ん中と右はそんなに違いがあるようには見えませんが、よーく目をこらしてみるとテーブル下の陰の部分とかが違うことに気付きます。

以上、誰も知りたいなんて言ってませんが、超簡略版の「HDRIができるまで」でした。手順も何も解説しないという最低な内容ですね（笑）。
16bitのRAWやらTIFFで保存できるデジカメがあるともう一個楽しみができます。最近はコンデジでも保存できるものありますし、次に買うならその辺りも念頭に入れておくといいかもしれませんね。

• *1: 書き出す条件を同じにするため最終的にAdobeのLightroomで書き出しました。クリックして拡大写真が出たらキーボードの矢印で遷移できます。
• *2: 8bitの写真を元にしてもできなくはないですが、所詮8bitなので限界があります。Silkypixとか使って擬似的に16bitにしてみたところで結果はたいして変わらないでしょう。

これじゃあんまりなので使っているソフトだけでも書いておきましょうね。
※全てMacintosh/Windows版があります。

• Adobe Lightroom: http://www.adobe.com/jp/products/photoshoplightroom/
• Photomatix: http://hdrsoft.com/
• LightZone: http://www.lightcrafts.com/

特にLightZoneは中にはいるとビデオがおいてあって、ZoneMappingの使い方がみれます。それを見ると単なるRAWの扱える画像補正ソフトでないというのがおわかりいただけるかもしれません。

と、まぁ若干内容も古くなったりしてますが、Photomatixの日本語版が発売されるということなので過去記事を掘り出してみました。気が向いたら改めてやり方とか書いてみますよ（笑）。

HDRI化しはじめると、過度にトーンマッピングをかけて異空間みたいな写真（ジャングルさんの街写真みたいなのね 笑）を作りたがる人が多いと思うのですが、HDR化はうまく適用することでホントにそこで見ているかのような写真に仕上げることも可能です。そんな異空間的なHDRと区別するため、最近は「TTHDR -True Tone High Dynamic Range image」という言葉もあります。参考までに。

Photomatix PRO 3.0

posted with amazlet at 08.09.16

ジャングル (2008-10-09)
売り上げランキング: 2732

Amazon.co.jp で詳細を見る

このSilverback、OS Xのマシンにインストールしておいて内蔵のiSightでユーザーの視線などをキャプチャしつつ、画面内に表示されたWebページなどをブラウジングしてもらいその様子もムービーとしてキャプチャすることができます。そして最終的にその「視線の動き＋クリックした箇所（動作の一部始終）」を一つのQuickTime Movieにミックスして落とすことができるという代物です。
つまりユーザビリティのチェックができるってことですね。

Silverbackのオフィシャルサイトにはクイックツアー的なムービーが用意されてますがまぁ英語ですので、簡単に使い方などを動画ではなく静止画で解説してみましょうか。
長くなるので、続きは下のリンクをクリックしてください。

まずは、ダウンロードして解凍し適当なとこにコピーしてから起動します。

シルバーバックなゴリラがお出迎えしてくれるので、左上の「New Project」で新規のプロジェクトを作ります。

プロジェクトを作ったら、被験者を追加するために「New Session」をクリックして必要な情報を入力します。Notesのとこには日本語も使えます。右下の方には、iSightから出力される被験者の顔が表示されます。寝癖頭でこれをやっていたので、もちろん見苦しい私の顔はモザイク付きでお届けします（笑）。

で、右下のそのウィンドウのところに「Start Session」って赤い丸の付いたボタンがあるので、それをクリックすると録画の準備が始まり、画面が暗転したらスペースキーを押すと録画がスタートします。クリックする前にブラウザを出しておくなど準備しておきましょう。

で、録画が終わったらメニューバーの上にあるゴリラのメニューから「STOP」を選ぶか、最近のMacについてるあのリモコンみたいなのでも一時停止や停止ができるようですね。

録画が終わったら画面が切り替わるので、右下にある「Export」をクリックします。

iSightのキャプチャのサイズとか表示位置などは調整可能です。書き出すサイズや品質などを決めたら任意の場所に保存すれば終了です。
あとはQuickTimeで再生しましょう。

再生するとこんな感じでクリックした箇所が次々とポワーンポワーンと連続で色付き表示されます。被験者の方も視線の動きとかが再生されますので何を見てるとかわかるんじゃないかと。もちろん音声も撮れます。

とまぁ、こんな感じでQuickTimeの中で再生されるというわけです。

さて、このSilverbackの気になるお値段ですがなんと約$50です。5、6千円でこれなら一個ぐらい買ってMacBookに入れておいてその場にいる人に使ってもらうなんてこともできますね。早速買っちゃおうっと。

＃ちなみにこの売り上げの10%はゴリラの救済にあてられるようです。