先日AppleでHTML 5はこんなんだぜ！みたいなページが公開されていましたが、今度はGoogleが「HTML5Rocks」というHTML 5のリソースサイトを公開されたようですね（って、これも今知った）。

中身についてはまだ見れてませんが、Twitterを眺めていたら目に入ったので簡単にお知らせまで。頑張りましょう（何を）。

こちらのサイトにURLを入れてチェックすると、YSlow!とPage Speedでのチェック結果が表示されます。それに加えてHTTPリクエストの数やロード時間、ウォーターフォールチャートも出るわで至れり尽くせりです。チェック項目の解説なんかも用意されています。

便利です。ありがとうございます（笑）。

Ver. 2βのダッシュボードのロゴがchartbe[ta]なんて洒落てます。

ダッシュボードのみてくれもそうですが、機能もいろいろ追加されてるようなので、簡単に試した感じをレポート。

リアルタイムの他に過去にさかのぼれる

chartbeatの特徴のひとつであるリアルタイム解析に加えて、過去をさかのぼって任意の時間帯の様子をリプレイするモードが追加されています。

これまでもHistoryとして簡単な統計は出ていましたが、時間をさかのぼってその時の様子を見ることができるようになっていますね。年がら年中こんな画面を見ているわけにもいきませんのでありがたいことです。

各パネルの詳細が確認できる

ダッシュボード全体のデザイン変更はもちろんですが、それぞれのパネルをクリックすることで、それに応じた詳細画面が表示されるようになりました。

例えば、Active Visitsだとこんな感じ。
時間帯毎の同時アクセス数がグラフで表示されているのがわかります。

ページのロード時間なども個別に表示されます。

ページ毎の統計結果も表示できるようになってます

これまではどのページにアクセスがあって読まれているとかは確認できましたが、ダッシュボードに表示されているページをクリックすることで、そのページの履歴を個別に確認できるようになっています。

と、こんな感じで任意のページの履歴が確認できると。ロード時間などもページそれぞれで統計結果が表示されますね。

まだβ版ということですが、以前のものよりはいろいろ見やすくなったり拡張されていて良い感じです。ちなみにこの画面、ちゃんと見るにはGoogle Chromeを使った方が最良の結果が得られるようです。詳しい変更点などはchartbeatのブログで。

It’s a very early look at the web browser, and consequently it has little in the way of a user interface. There’s no toolbar of any kind and no built-in security. The preview is instead meant to show off the IE9 platform, which includes Microsoft’s new JavaScript rendering engine (codenamed “Chakra”), and early support for emerging web standards like HTML 5, CSS3, and SVG2.

Microsoft unveils Internet Explorer 9 developer preview with HTML5 support

→ http://ietestdrive.com/

一番上にダウンロードのリンク、サイトの真ん中あたりにデモ用のコードというかサンプルページが用意されていますので、興味のある方はどうぞ。

HTML5やCSS3あたりの話題もちょこちょこ出始めていますが、そんな焦らなくてもとりあえずこのブラウザが正式リリースされてからのんびり始めても十分間に合うと思っていたりするんですけどねえ…。

1サイトあたり52USDの有償のCMSですが、サイトで動くかどうかの「Compatibility Suite」も用意されているので購入前に試すことが可能です。ちなみに動作に必要なシステム条件は、PHP 5.x以上、MySQL 4.1.x以上になっています。

では、簡単に導入までのプロセスを。

設置は簡単2分で終わる

Perchのライセンスの購入は、必要事項を入力してPayPalで支払えば終わりです。自動的に自分のアカウントページに移動するので、そちらでライセンスの番号などを確認します（稼働サイトのドメインやテストサイトのドメインを入力する）。あとは配布ファイルをダウンロードして解凍後、中にある「perch」のディレクトリをサーバのルートディレクトリあたりに放り込むだけです。

放り込んだディレクトリにアクセスするとインストール作業の開始です。あらかじめDBを一個作ってMySQLの接続情報とPerchのシステムにログインするためのアカウント情報などを入力します。それが終われば、表示された初期設定のコードをconfig.phpにコピペしてお終い。setup用のディレクトは削除してしまいましょう。

編集対象を追加する

そのままPerchにログインしても何も表示されませんので、既存のサイトのコンテンツで編集対象を設定します。

.phpの拡張子だけでなく.htmlで利用したければ、.htaccessのAddTypeを使ってHTMLをphpとして動作させましょう。

AddType application/x-httpd-php .php .phtml .html

コンテンツにPerch側で編集可能なエリアを設定するには、対象ファイルの冒頭（HTMLだったら頭のDOCTYPEの前とか）に以下の記述を追加します。

<?php include('perch/runtime.php'); ?>

Perchのインストールディレクトリは適当に置き換えてください。で、上記のinclude文を追加したら、ページ内で編集対象にしたい箇所を以下の記述で置き換えます。

<?php perch_content('編集対象のラベル'); ?>

「編集対象のラベル」の部分が管理画面の中で編集対象のラベルになりますので、例えば「NewsSection」とか適当な名前に置き換えてください。これをページ内で編集対象にしたい箇所を必要な分だけこのコードに置き換えます。

設定はこれでお終い（笑）。

編集対象ブロックを定義する

Perchの管理画面にログインすると、編集対象に設定した箇所のリストが表示されて「New」のマークが表示されます。

この画面は設定後に撮ってしまったのですが、追加した編集対象のラベルをクリックすることでその部分に入るコンテンツの種別を設定し、中に入るテキストなどを編集して保存できるようになります。

例えば、こんな感じで特定のdiv要素内をまとめてコードブロックとして設定してHTMLを書くこともできます。もちろん、こんな使い方ではなく、任意のタグの中のテキスト1文だけを編集可能にしたり、画像だけを差し替えるようなこともできます（何ができるかはマニュアルで）。

また、この編集対象は特定ページだけで使う以外に、それをシェアすることでサイト内の複数ページにわたって内容を使い回すこともできるようになっています。ページの構成次第では一箇所変えれば、すべてに適用されるってことですね。

これぐらいシンプルな方がいいでしょう、きっと

MovableTypeやらWordPress、それ以外のCMSを導入するまでもないサイトはいっぱいあるはずです。かといって、Cotributeだと領域設定や使い方教えたりも必要になりますし、下手にFTPとか空けてガンブラーにやられても困るでしょう（笑）。既存のページの特定箇所だけを編集可能にするのはこれが一番簡単ですね。

サイトの更新をクライアントの担当者の方がおこなうと考えた場合、MTやWPのような複雑な画面だとContribute以上に操作説明が大変です。このぐらいシンプルな管理画面でやることが明確な方がいいですよね。PerchはAdmin権限とEditor権限の2種類のロール設定が可能なので、更新担当のアカウントはEditor権限にして必要な項目だけ表示させれば間違いもおきません。

インストールに2分、設定に3分で簡単なCMSができあがります。
ものは使いようってことですね（笑）。

キーワードの選定にあたっては、「来場いただく皆さんの求めてるものは何だろうなぁ…」といろいろ考えるのですが、なんせWebといっても幅が広すぎます。新しい技術的なものなのか、制作手法や考え方に関わることなのか、Web業界を取り巻くトレンドなのかと、1時間弱という枠で話せることも限りがありますし。どこに絞った方がいいかを直前まで悩んだ挙げ句、あのようなごった煮的なものになっていたというわけですね。

補足情報をちょこっと

web creators編集長の佐藤さんのブログでプレゼンデータなどが公開されているので、既にご覧になった方もいらっしゃると思いますが、ボクの担当した内容に関する補足をいくつか。

リアルタイムWebやソーシャルメディアの話

Googleなどの検索においても、ブログやTwitterの書き込みなどが数秒後、数分後には表示されているというのをお話しました。

実際にあった話をひとつ書いてみましょう。ここ数週間一部で盛り上がってる「Zen-Coding」。たまたま検索したタイミングでボクがやっていたUSTREAMのライブデモへのリンクが含まれるつぶやきがあらわれて、生で放送を見ることができたという方もいらっしゃいます。

これまでは「検索して表示された結果からブログを辿って、そこに書かれた情報を仕入れてまた別のサイトへ移動する」といった流れが一般的だったと思います。しかし、ブログやTwitterの書き込みがリアルタイムで表示されることをうまく利用すれば、タイミング次第では自サイトへうまく誘導することだってできる、と。

企業のWebサイトの担当者の方であれば、ソーシャルメディア系のサイトにおける自社製品のクチコミなどを調べたいと思うこともあるでしょう。海外のようにもう既にそれが盛んなところでは、アクセスログによる定期的な解析に加えてリアルタイムな解析の仕組みやサービスを取り入れていることが多いと思います。

先日話題になったリアルタイム解析の「Chartbeat」、以前紹介した「Viralheat」や「SWIX」といったサービスなどいろいろあります。いろんなものが半年や一年近く前からあるのに、日本で話題になるのはいつも遅い（笑）。ちなみにこのSWIXが先日世界レベルのブランドのソーシャルマーケティングの取り組みをまとめた簡単なレポートを公開しています。

いまどきのんびりと構えてログをみて「ここに手を入れて」「次は何を出そうか」なんて言ってる場合ではなくて、盛り上がってるタイミングで何かを投下するといったことぐらいやった方がいいんじゃないかと。企業側でももはやそういう体制作りが必要になってきてるんじゃないでしょうかねえ…。

Zen-Codingなんか良い例です。リアルタイムログを眺めていれば、どこかで話題になってアクセスが増え始めてるなんてすぐわかります。そのタイミングでここぞとばかりにそれに関する記事を増やしてみたり、内容に修正を加えたり、USTREAMのライブデモをやってみたりという策を打つことで人を集められます。

それが結果として、Twitterのフォロワー数やサイトのフィードの購読者数にも反映されると。企業やブランドに例えて大げさに言えば新たなファン層の獲得にも繋がるってわけです。もうその土台はできています。

このような業界全体の流れは、とっとと掴んでバンバン試した方が良いんじゃないかと。先に入手して機が熟すのを待つのは結構。でも、その存在すら知らず、手を打たないでいたらみすみす魚を逃がしていることもありますから。

くれぐれも昨年ぐらいからTwitter始めて、Twitterマーケティングがどうしたとかほざいてるような人たちには騙されないでくださいね（笑）。相談するなら、少なくとも2年以上動向を見てきたような人に頼みましょう。

Webサイトの表示パフォーマンスの話

GoogleさんやAlexaの基準では、今のところ「3秒」が標準的な速度になっているようです。日本のWebサイトはそれに比べて遅いねえ…と言ったわけですが、視覚的な表現も大事ですし画像を一杯使ったりすることもあるでしょう。必ずしも速くしなければならない、とは言いませんが、できれば速い方が見る側にとってはありがたいです。今後Googleさんのアルゴリズムに組み込まれる可能性はありますしね（なぜWebmaster toolsで結果を見れるようにしてるのか、と）。

ブロードバンド環境が整いつつありますが、その一方ではデバイス環境の多様化もあります。閲覧するための回線も必ずしも速いわけではありません。いろんな環境に対してできるだけストレスを与えないで閲覧できるようなWebサイト作りが今後求められるんではないでしょうか。アクセシビリティは身体的なことばかりではありません。境さんがおっしゃった「FlashとHTML 5」の話も同じ事です。

これまでのような「制作サイド目線でのWebサイト作り」はそろそろ意識を変える時期なのではないかな、とボクは思っています。いくら綺麗なもの面白いものを作っても、それを見てもらえなければ何も始まりません。

大人の事情もあるとは思いますが、まずは自分の置かれた環境で「できること、できないこと」を洗い出してみて、できることからやってみてはいかがでしょうか。大人の事情なんて制作側の身勝手な都合でしょ？（笑）。

（余談）SEOなんかも同じで、付け焼き刃では効果はしれてます。Googleさんのアルゴリズムからリンクポピュラリティがなくなるとは思えませんが、仮になくなった瞬間に終了宣言されるサイトなんて腐るほどありますからね、日本のサイトは（謎）。ボクは「何とか最適化」ってのが嫌いです（言葉として文中で使いはしますが 笑）。何かに特化して施策を打つことがダメとは言いませんが、すべては相互に繋がっていているものです。もう少しトータルで考えた方がいいんじゃないかな？と。

モバイルの話

日本の携帯電話の場合、国内の三大キャリアさんが出している携帯電話のシェアが圧倒的に多いことは言わなくてもわかります。キャリア公式などのコンテンツに限らず非公式のコンテンツであっても、どうしてもこのキャリアさんの仕様にがんじがらめになってしまう傾向があります。端末の発売時期で画面解像度は違うわ、使えるHTMLやCSS、Flashのバージョンが違うわとか、まぁ大変です（笑）。

予算が潤沢にある場合は、専用の携帯サイトを作ったりすると思いますが、すべてのプロジェクトでそれができるわけでもありません。しかし、さすがに携帯電話の所有率を考えればまるで無視するわけにはいかないと思いますので、せめてそのような端末でも最低限の情報が閲覧できるような抜け道を作っておくのが良いんじゃないか、と。

映画のサイトのように全面Flashで展開するのは考えものです。携帯電話向けにはリダイレクトされて専用のページが出るかもしれませんが、iPhoneとかで閲覧すると何も見れません。上映劇場の情報だけが知りたいのにリンクがFlashの中にあるとか、もうアホかバカかと（結局それはポップアップするから普通のHTML 笑）。

Flash使っててもいいから、せめて利用者が必要としているだろう情報ぐらいはページのどこかにHTMLのリンクを入れるとかね。それが優しさ（アクセシビリティの向上）だったり、ホスピタリティってことでしょう。

iPhoneやAndroid端末といったスマートフォンにあたるデバイスの所有率は、いわゆる国内の携帯電話に比べればかなり低いものでしょう（東京の遭遇率は異常 笑）。でも、世界レベルで見てみるとスマートフォンを含むモバイル用に最適化されたページが表示されるサイトが増えています。別にiPhoneに限ったわけではなく、スマートフォンに採用されているブラウザがモバイルデバイス用のCSSだけでもいけるのが大きいのかな、と。

イベント中に紹介したギャラリーサイトで見せ方の研究をしたり（ソースは見れますからね 笑）、実際に「Mobify」などのモバイルサイトの構築サービスを試したり（他にもいろいろ）、iPhoneのデベロッパーサイトに掲載されているモバイルSafari向けの情報を見ながらHTML 5やCSS 3の先取りをしてみるのも良いかもしれません。

国内の携帯電話事情は今の延長線な気がしますし、スマートフォンが国内で流行るかどうかは別として、場合によっては最適化されたサイトが必要にもなります。何よりこの類のものは、聞くよりも自分で試行錯誤しながらでもやった方が早いです。

情報収集の話

RSSリーダの活用は一回やめたけど、最近「Feedly」を使って読むようになったと言いました。FeedlyはGoogle Readerと連携するRSSリーダになります。iPhoneでは今のところ「Reeder」が読みやすいので使っていますが、前述のFeedlyがそろそろiPhoneアプリを出すようなので期待しています。

また、普段ボクが見ているサイトは「Netvibes」というiGoogleのようなスタートページに集約されています（これもRSSリーダといってしまえばそうですが）。先日のエントリーにリンクを入れておきましたが（そろそろ消すのでお早めに消しましたｗ）、普段見ているのはあんな感じでタブ分けした世界中の情報です。英検4級のボクでも見てます（笑）。あとそれ以外には、先日伝え忘れていた「Hacker News」をちょこちょこ見ています。他にもあるけどあとは内緒（笑）。あ、国内の情報はほとんど見ません。

ここで「読む」と言わないで「見る」と言ってるのには訳があります。ああやって表示されたサイトの情報を逐一読んでるわけではありません。どちらかと言えば、「見出しを見て、興味があるものをピックアップする」→「全体を眺めて、大まかな内容を掴む」→「必要であれば、後でじっくり読むためにDeliciousなどのブックマークに登録しておく」といった流れで集めています。

自分はいらないけどTwitterでフォローしてくださってる同じ業界の方の参考になればということで、英文の情報ですけどそのままリンクを流してみたりといったこともしています。ボクのアカウント（@cipher）でたまに英文とURLが出てくるのはそういう意図です（ブックマーク専用のアカウントは、@proteanbm に移行してますので必要であればフォローしてください。結構うざいと思うので、Listがオススメ 笑）。

そんなTwitterに関しては、イベントでも言ったように半分以上が情報収集の目的なので、自分のリスト（@cipher/inbox）に海外サイトのアカウントを登録しておいて眺めるようにしています。彼らは、自分のサイトの古い記事とかもテコ入れする感じで流してきますので、新しいのかどうなのか見極める必要がありますけど、中には有益なものもありますのでまぁ良しとしてます（同じようにすれば、我々もフォロワーの皆さんに昔の記事を読んでもらえるってことですけどね 笑）。

あと、最近はMashableやReadWriteWebといったIT系の情報を扱う有名サイトのiPhoneアプリがリリースされています。Hacker Newsもオフィシャルではないようですがありますね。それとつぶやきの集積サービスであるTweetmemeのアプリなんかも入れてます。移動中などで暇な時は、それらを見ながらTwitterに流してみたり、興味のあるものは直接ブックマークしたりといったことをしています（こういうサイトの情報を出すと嫌がる人いるだろうなぁ… 笑）。

ボクの場合、こういうWeb制作の考え方や技術に関すること、企業やブランドのサイトの運営や施策に関わること、原稿執筆といったようにジャンルを問わずいろいろ仕事をしている手前、情報は一次発信源に近いところで拾ってその真偽を確かめたり、誰かに伝える前には自分で試したりしています。性格上、そのまま受け流しは嫌なので。

イベントでも言いましたが、時差が2年出ることもあるわけです。2年あったらそこに向けて、種をまいたり知識を蓄えることもできます。未来がどうなるかわかりませんが、プライベートの時間を潰してでも、先を予想したり必要なものを見極めながら貪欲に仕入れていくぐらいの気持ちが、これからの時代を生き抜くために必要なのかな？って思ってます（というか、これまでもそうしてきましたから 笑）。

会社勤めだと自分の業務だけでいっぱいになることも多いと思います。でも、好きこそものの何とかです。覚えたい、自分のものにしたいと考えるのなら、どれだけ多くの時間やプライベートを犠牲にできるかでその後の成長は大きく変わってきます。当然、そうすれば失うものも増えます（笑）。

アホみたいにやってる人がかけてる時間と同じ時間をのほほんと過ごしてたらいつまで経っても追いつけません。第一線で活躍するプロスポーツの選手だって、生まれつきの天才以外は見えないところできっと自分の時間を潰してるはずです。

時代は情報過多です。何でも拾えばいいってわけではありませんし、自身のフィルターの精度が悪ければ間違えた情報に流されてしまうこともあります。気をつけましょう。信用できるソースをいくつか見つけておけば、時間の節約にもなりますし余計な時間は取られませんので。

最後に

web creatorsさんは紙媒体からオンラインへ移行します。今後も関わらせていただくかどうかわかりませんけど（笑）、こちらでも定期的に皆様のお役に少しでも立てるような情報をエントリーしたり、ゲリラ的にUSTREAMで喋ったりしますので頭の片隅、登録フィードの片隅にでも置いておいていただければ幸いです。

いや、ちょっと前にYouTubeで見たOmniGraffleを使ったワイヤーフレーム作成のビデオがかっこよかったので、ついつい真似っこしてしまいました（笑）。

切って貼ったしただけですが、Vimeoにおいてます

切って貼っただけのお遊びとはいえ、音がないと寂しいというか、音が入ることで何だかかっこよく見えちゃうんじゃないの？ってことで、CreativeCommonsの楽曲を探しまして、それを後ろのトラックとして利用させていただいております。

WebDevelopment with TextMate and Zen-Coding
from komori, masaaki on Vimeo.

あえて天津木村風に言うなれば（古）、

「いま使っているエディタにぃ〜〜いぃ〜〜〜ぃ、Zen-Codingを入れたらぁあ〜〜〜あぁ〜〜〜ぁ、何だかできそうな気がするぅ〜〜〜〜〜ぅ」
「あると思います！」

できる気がしてきました（謎）。

（おまけ）

諸外国のTextMateユーザーなどもTwitterで紹介してくださってるようで、意図せずView数が増えております。で、気分を良くしたボクはiPhone用のm4vを用意しちゃいました（笑）。必要であれば下記からダウンロードください。

→ WebDevelopment with Textmate and Zen-Coding（.zip/24MB）