多くの方が既に参加レポートをあげてくださっていますが、ボクはボクなりに今回のWordCampの話を書き綴っておこうかと思います。

今回登壇するにいたるまで

@naokomcさんから「WordCamp Tokyoやるから出てくんない？」と打診をいただいたのが10月初旬。普段あまりWordPressのコミュニティに貢献しているわけでもないので、「こんなボクで何かお役に立てることならやりますよ」とオッケイを。実はもともと彼女とは旧知というか、世の中でブログが流行り始めた頃からその存在を知っていましてね。そう、皆さんご存じないと思いますが、ボクは日本で二番目にブログの本を出してまして、今や見る影もありませんがその昔はブロガー的な立ち位置だったのです（笑）。

と、そんなことはどうでもいいのですが、その後今回のWordCampの実行委員長の@waviaeiさんと三人集まって、都内某所で何を話すか会議を（というかご飯をｗ）。今回参加された皆さんはお分かりいただけたかと思うのですが、イベントに参加される皆さんのWordPressとの接し方は多岐にわたります。参加される皆さんひとりひとりをすべて満足させられるような話はできませんし、他のスピーカーの皆さんのこともあります。とりあえず、その場は何が良いんだろうね？ってトコからある程度の方向性だけを決めて、後日「レスポンシブネス」な話でいきましょうか、ということになった、と。

うまく枠にはめてきましたねｗ

10月中旬にはそういった方向性だけは決まっていたものの、その時点では他のスピーカーの方はもちろんタイムテーブルも出ていません。まぁその辺が決まってから話の内容や構成を考えようかな、とのんびり構えていました。「レスポンシブネス」といってもその指し示すところは広いわけで、実のところ「あまり視覚的な表現に振れない方向で」ということは言われてました。Webデザイン業界でいま話題になっている「Responsive Web Design」的なものは、多様なデバイスへの対応が前面に出ているので割と視覚的な部分と捉えられがちです。

で、他のスピーカーやタイムテーブルが明らかになるにつれ、「この人たちうまいこと枠にはめてきたなぁ…」と感心しました（笑）。ボクのセッションをお聞きになった方は、最後の最後で次のセッションへの案内を出したことでお分かりいただけたかと思うのですが、ボクの話は次のお三方のセッションすべてに繋がる導入セッションだったのですね。パブリッシング・プラットフォームとして、Webコンテンツに限らないレスポンシブなWordPressの使い方で、と考えたのです。

実際、後のお三方がどのようなお話をされるかは、タイトルと概要を見て判断するしかないのですが（すり合わせることはできるけどしていない 笑）、長谷川さんやたにぐちさんは普段からブログや講演をなさってますし、高橋さんは既にWordCamp Kobeで電子書籍の話をされています。幸いそんな感じで、皆さんがどういった内容を話されるかはある程度の想像が付いたので、そこに繋がるような構成で今回のボクのセッションの骨子ができあがりました。

でも、前日まで何もしていませんでした

とはいうものの、30分という限られた枠の中で講演内容を詰めていくというのは実は大変な作業です。ライトニングトークみたいな短時間なら勢いでどうにかできますし、45分や1時間ぐらいの枠であればデモを含めながらの講演も考えられます。でも、技術的な話をする場合の30分って実はすごく微妙な時間なんです。詰め込みすぎて時間オーバーするのもダメだし、かといって内容を薄くしたり早口になりすぎて早く終わりすぎてもダメ…。ましてやデモなんて、トラブったらそこで終わり…。百戦錬磨なはずの皆さんからも「30分なんだよなぁ…」と（笑）。

そんな30分をどう使うか、ということをずっと考えていたので、骨子ができた後も全然スライドに手がつきません。結局、スライドを作り始めたのは前日の夜。ある程度形になってから一回寝て、起きてからあらためて見直してまた修正。練習なんて一度もすることもなく、朝会場へ向かう電車の中でもう一度確認。でも、新宿から品川シーサイドまでの移動は20分で話す時間より短く、iPhoneに入れたPDFを使ってイメトレどころじゃない（笑）。会場について、機材チェックを終えてから控え室にこもって、ホントに直前までスライドを修正していました。つまり、正直なところ練習一度もなしのぶっつけ本番で挑んでしまいました、ごめんなさい。

聴講いただいた皆様にお礼を

当日午前中のデザイナートラックのお二方は満員御礼の大盛況。出番が近づくにつれ、変なプレッシャーがおそってきます（笑）。「おいおい、デザイナートラックなのに一枚も絵がないよ」「コードすらないじゃん」みたいな状態からは脱したものの、内容はデザイナー向けと言って良いのか？みたいなところもあって、「全然デザインの話ないじゃん！」とか言われちゃうんじゃないかと、ハラハラドキドキどうなることかと思ってました。幸いにも若干の空席はあったものの、多くの方に聞いていただいてホッとしました。

そんな練習すら一度もしていないボクのセッションをご覧くださった皆様、あらためてこの場を借りてお礼を申し上げます。ここまで登壇に至った経緯からそのバッググラウンドを書き連ねてきましたが、今回WordCamp Tokyoのボクのセッションでは、デザインのことも技術的なことも表面をなぞるぐらいしか触れていません。即効性のあるツールの使い方やちょっとしたTipsといったウケる話ではありませんでしたが、ひとりでも多くの方にこれからのコンテンツ制作、そしてコンテンツ配信の未来を考える何かしらのきっかけや気づきを与えられていたら幸いです。ありがとうございました。

＃もともと人前に出て話をすることどころか、結構な人見知りなもので懇親会なども端っこにいて交流もしなくてスミマセン（笑）。お会いして名刺交換などしていただいた皆さん、ありがとうございました。

あ、いっこ言い忘れてた

いろんな閲覧環境がますます増えていくことが想像できますから、見た目の同一性とかあんま細かいことにこだわりすぎない方がいいですよ（笑）。

それと、最後にいろいろ宣伝…

えっと、今回内容的には「Responsive Web Design」「HTML5」「電子書籍（ePub）」、そして「WordPress」とこれからのWeb技術などを織り交ぜて展開しましたが、実はいずれについても現在書籍を執筆中です。正確な発売時期や書名などは全然決まっていませんが、来年早々には書店に並ぶのではないか、と。また、この11月からアクティブ・カレッジさんで、HTML5の基礎講座、電子書籍の基礎講座、スマートフォン制作の基礎講座などを担当しておりますので、それらの技術に興味のある方はそちらもよろしくお願いいたします。

「電子書籍が売れてない」だの「Amazonがついに日本に」だのと話題も出ておりますが、世の中いろいろと移り変わっておりましてね。

どんどん、ePubへの流れが加速中なんです

最近の話題だと、あのYahoo! JAPANさんが電子書籍フォーマットのグローバルスタンダードともいえる「ePub」形式を採用されて「Yahoo! ブックストア」をオープンされましたし、オンラインショッピング大手の楽天さんもカナダの「Kobo」という会社を買収されました。Koboで読めるフォーマットは、PDFとePubだったりします（もちろんHTMLとかも）。

再生デバイスが限られる特殊なフォーマットで電子書籍を展開する場合、その売り上げは市場に出ているデバイスの規模に左右されます。つまり、現状の流れとこの先の未来を見据えた場合、専用のリーダーがいらない（というか、好きな環境で読みやすい）ePubを採用し、HTML5を採用した「ePub3」に照準をしぼるのがいいのではないでしょうか。津田大介さんも最近メルマガをePubで配信されていたりもしますね（笑）。

次の未来も見据えてね

ePubの中身はほぼHTMLですから、この先遠くない未来にWebブラウザで閲覧するような時代が来ても大した問題ではありません。それを流用すればいいだけの話です。前出のAmazonも現在はオリジナルのフォーマットを採用していますが、Kindleの次期フォーマットは「HTML5とCSS3」がベースとなるようです。

ePubの自体はツールを使って変換することもできます。でも、ツールを使ったからといってそのまま使えるわけではなくて、やはり人の手で多少修正する必要もあります。電子書籍制作には、「デバイスへの対応を含めた最先端のWebサイト制作の知識やテクニック」も欠かせません。

今回のこの講座では電子書籍界隈の基礎知識から、HTMLをベースとした実際の制作手法、他のフォーマットへの変換などを解説します（あ、もちろんハンズオンです）。出版関係の皆さんはもちろん、現在Web制作をおこなっている皆さんも新しいビジネスのひとつとして、世の中の動きに乗り遅れないように今のうちから準備をしてみませんか？

→ 詳細、受講のお申し込みはこちらから

その一発目は「HTML5でどう変わる？どう作る？」と題して、HTMLによるサイト制作経験のある方を対象にしたHTML5の基礎講座になっています。最近ではスマートフォンに対応したサイトなども増えてきましたし、今すぐとはいいませんがHTML5をベースにしたサイト制作の機会も徐々に増えていくことでしょう。

それ以外にも、たとえば今話題の電子書籍だとePub3.0からはHTML5がベースになっていますし、日本参入が噂されているAmazonのKindleの新しいフォーマットであるKindle 8もHTML5を使ったものになるようです。

現在動いているサイトがすぐに移行しなくとも、この新しい技術仕様を使ったコンテンツ制作の流れというのが生まれていますので、いまのうちにHTML5の基本をおさえておくことが、皆さんの新しいビジネスに繋がるかもしれません。

一回目の講座は、11月5日（土）に開講予定です。受講料は当初告知されていた金額から大幅にダウンして、講座オープン記念として19,800円になりました。よろしければ、土曜日の昼から夕方まで一緒にHTML5の勉強をしてみませんか？

→ クリエーター向けスキルアップスクール！アクティブカレッジ

今回のこちらの書籍は、谷 拓樹さん、石本光司さん、いちがみトモロヲさんとの共著です。私は前振りみたいなもんで極めて基礎的なことしか書いていませんが、他のお三方はそれぞれの得意とする分野で各章を担当し、内容をまとめてくださっています。

• 序章　スマートフォン向けサイト制作をはじめる前に
• 第1章　スマートフォン制作のための基礎知識
• 第2章　制作・テスト環境のセットアップ
• 第3章　スマートフォンサイトの企画、構造設計
• 第4章　スマートフォン向けのパーツ制作
• 第5章　HTML5による実装
• 第6章　CSS3によるレイアウトと装飾
• 第7章　JavaScriptを使ったインタラクション
• 第8章　フレームワークやオーサリングツールを使ったサイト制作
• 第9章　パフォーマンスの最適化
• 付録　スマートフォン各機種　画面解像度一覧表

本書では最近話題になりつつある制作手法のひとつ「レスポンシブ・ウェブデザイン」については軽く触れる程度になっていますが、欄外にはサイト制作のヒントになるような参考資料の紹介はもちろん、モバイル系の制作に関する最新情報もギリギリまでねばって入れてみました。

これからスマートフォン向けのサイト制作をおこなわなければならない、やばい！勉強しなきゃ！と考えてる皆さんの一助になれば幸いです。

→ iPhone & Android スマートフォンサイト制作の教科書（Amazon）
→ iPhone & Android スマートフォンサイト制作の教科書（impress Direct）

（追記）スマートフォンサイトのパフォーマンス最適化については、いわゆるPC向けの最適化手法の多くも採り入れることができます。本書では石本さんのライフワークでもあるパフォーマンス最適化について誌面の都合上もあってモバイルに特化した内容で書いていただいてます。その他の方法の詳細が知りたい場合は、あわせてこちらのパフォーマンスの章もご覧いただくと良いかと…（こちらを書いてるのは私ですが、重ねて宣伝しておきます 笑）。

→ HTML+CSSコーディング　ベストプラクティス（Amazon）

「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

「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

とはいえ、時代は「ソーシャルメディアを使ってうんたら」みたいな流れでもあります。後日解析レポートを見て施策をすることも大事ですが、こんな時代だからこそ自サイトをリアルタイムに観察し、それに応じて動線（導線）を追加したり効果的にコンテンツを投下することも大事なんじゃないかな？と思います。

で、これまでも何度か取り上げていますがあらためてまとめてみました、リアルタイムのアクセス解析のサービス。こういうサービス調べるのが仕事兼趣味なので、今回は世界中のサイトで比較的よく見かけるものをチョイスしています。

すべて使って試してるわけではないですが、何かのご参考になれば。

Woopra

リアルタイムのアクセス解析の中でも老舗の部類に入るだろうWoopraは、世界中のWebサイトでも多く使われています。残念ながらボクは使ったことないですが、ECナビさんで一ヶ月使われた感想がレポートとしてまとまってます。

CLICKY

CLICKYもまた世界中のWebサイトによく仕込まれているアクセス解析のサービスです。オンラインデモもあるので、それ触ってみるといいですね。ココにある他社のサービスとの比較表をみるといろいろ拾えることがわかります。

Chartbeat

このブログでも何度も何度も取り上げてますが、リアルタイムにサイトへのアクセス数だけでなく、ページのどこまで読み進めたかとかページのロード時間なども見れるサービスです。キーワード指定してTwitterのつぶやきをトラックもできます。あと、一定のアクセス数を超えたりサーバの反応がなかったら、iPhoneアプリにアラートを出せますので便利です。最近では大手のサイトにもこのChartbeatが仕込んでるところが増えてますね。もうしばらくするとEコマース向けのサービスも始まるみたいです。

Reinvigorate

MediaTempleのグループ会社が運営している知らぬ間にWebTrends系になっていたReinvigorateは、リアルタイムアクセス解析に加えて、ページ内の要素のどこをクリックしてるかといったヒートマップもくっついてるのがひとつの売りでしょうか。何回目の訪問とかそんなのも表示されますし、必要であればユーザーごとにタグをつけてトラックできるのでサイト内での動向を追えます。

mixpanel

mixpanelもまたよく見かけるリアルタイムアクセス解析のサービスです。有名どころではQuoraとかPosterousなんかでも使ってますね。一通りの機能はもちろんですが、他と違うのはEメールの開封率とかも解析できることですかね。

Mint

Mintは、サーバにインストールするタイプのアクセス解析ソフトウェアです。これもうちのブログで使ってるので過去に紹介したかもしれません。ドメインごとにお安くライセンスされる形です。プラグインを使って、必要に応じて解析内容を拡充することができるのが特徴です。

StatCounter

StatCounterも結構よく見かけます。機能は豊富そうですが、デモを試すと他と比べて画面がみにくい…。画面は結構大事です（笑）。

W3Counter

W3Counterもまたよく仕込まれているアクセス解析のサービスです。たまにネットに流れてくるブラウザの使用率レポートとかは、ここのレポートが多いんじゃないでしょうか。ボクは使ったことないですが、Twitterのメンションとかも拾えるようです。あ、あとWordPressのプラグインもあるみたいです。

Histats

この記事を書くにあたってサービスを調べていて見つけたHistatsも面白そうです。ちょっとゴチャゴチャしている感はありますが、機能は豊富そうですし、なんとFreeで使えるようです。デモやビデオもサイトにあるので見てみましょう。

Piwik

Piwikは、Google Analyticsの置き換え的な位置づけのオープンソース・ソフトウェアです。で、GAにはないリアルタイムアクセスがチェックできる、と。アクセス解析サービスはCDNとか使ってるので、ネットワーク障害とかが発生するとアウトだったりするので自前でインストールするのもいいですね。

CrazyEgg

最後はおまけです。リアルタイムアクセス解析ではありませんが、サイト内のどこをクリックしてるかがわかるヒートマップや、リンクされている要素のクリック数などを視覚的に確認できるアクセス解析のサービスがCrazyEggです。ボクもサイト公開後のチェックでたまに使ったりしています（意図したところが押されてるか、みたいなｗ）。これも結構使ってるトコありますね。

複数使い分けるのもいいですよ

といった感じで、リアルタイムアクセス解析といっても機能はまちまちですし、中には専用のiPhoneアプリなどが公開されていて便利に使えるものもあります。アクセス解析といってもGoogle Analyticsとか一個だけで完結せず、こういったリアルタイムアクセス解析もいくつか入れておくと分析も楽しくなります（笑）。

無償だと機能制限がかかったり一定のアクセス数までといったことがありますが、有償といっても膨大なアクセスがなければそんなビックリするような額にはならないので、一度リアルタイムアクセス解析試してみるといいと思います。きっと、通常のアクセス解析では得られなかった情報が得られるでしょう。