で、その新しいプロフィール画面のタイムライン表示なのですが、リンクやいいね！したページなどの表示のされ方がこれまでとは扱いが変わっています。コメントとは別枠表示であることは従来と同じなのですが、ちゃんと枠どりされて表示されるようになっています。

流れていくフィードはもちろんですが、このプロフィールのエリアでシェアやいいね！されたリンク先の情報を綺麗に見せるためには、OGPの設定をちょっと見直した方がいいかな？ということでちょっと調べてみました。

「og:image」はサイズを「横幅100px × 高さ116px」、日本語の場合は「og:description」を80〜90文字以内ぐらいにおさめるのが良さそうです。Macでしかみてないのですが、ご参考までに。

多くの方が既に参加レポートをあげてくださっていますが、ボクはボクなりに今回の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の基礎講座、電子書籍の基礎講座、スマートフォン制作の基礎講座などを担当しておりますので、それらの技術に興味のある方はそちらもよろしくお願いいたします。

前回は「WordPressのパフォーマンス改善あれこれ」みたいな話をしましたが、今回はガラッと方向性を変えてデザイナートラックの午後一発目に「レスポンシブ・パブリッシング」というお題で30分ほど話をさせていただきます。

WordPress を使ったオンラインコンテンツも多様なデバイスに「レスポンシブ」に対応できることが望まれる昨今。視覚的な対応はもちろん、コンテンツそのものをさまざまな形態で柔軟に配信するための考え方や手法を紹介します。

というわけで、多様化していくデバイスやコンテンツ形態を見据え、これから先WordPressをどう使いこなしていけばいいか、といった内容になる予定でございます。視覚的なマルチデバイスへの対応は、後に続くたにぐちさんでも扱われると思うのでそこそこにしておきます（笑）。

当日のタイムテーブルをご覧いただくとおわかりいただけると思うのですが、多様なセッションが目白押しの1日となっております。まだ、参加登録は受付中ですので、日曜日の品川でお会いしましょう。

→ WordCamp Tokyo 2011 | 2011年11月27日（日）

＃ちなみに今回の公式サイトのトップの写真は、ボクが昨年の横浜で撮影したものです。手タレとして出ていただいてるお二方、ありがとうございます。

今頃公開するな、と言われそうですが去年のです。ごめんなさい。

今回こちらのパフォーマンスの話は別の切り口から@wokamotoさんが講演されます。その予習程度にご覧いただくといいかもしれません。

「電子書籍が売れてない」だの「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の勉強をしてみませんか？

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

ということで、今日はその舞台裏というか、コレがアレでこうなってできているよ、って話をしてみようかと思います。なにかの参考になれば幸いです。

Responsive Web Design の簡単な説明

インターネットに接続できるデバイスが増えています、というか多様化しています。画面サイズや画面解像度はまちまちです。日本の場合は10年ぐらい前からいわゆる携帯電話で接続できてましたが、それらもやはり同じような問題を抱えていました。そのような個別の端末に対して、画面解像度や技術仕様などをベースにコンテンツを最適化して配信するということは大変ことです。

さらに、今時はスマートフォン向けのサイト制作などもあります。今後ますます増えていくであろう端末に対して、情報をどのように出していくか、ということを考えなければいけません。デバイスに完全に最適化するのか、ある程度の見栄えを維持したままワンソースで展開していくか、ってなことです。

ま、そういう手法のひとつがこの「Responsive Web Design」や「Adaptive Web Design」などと呼ばれているものです。厳密に言えば、二つの意味するとこは異なると思いますが、端末の画面サイズや利用可能な技術、仕様にあわせて、最適化というより適合させていくという考えです。

たとえば、カラムのレイアウトは流動的に変化するように「%」ベースで幅を指定する、画像や映像のサイズもそれにあわせて変化させる、といったテクニックを駆使します。そこで使われる技術としては、CSS3はもちろんMediaQueriesやJavaScriptなども含まれます。

ただし、この方法もやはり万能とは言い切れません。たとえば、ブログやニュースのような文字が主体のコンテンツには向いてますが、Webアプリや視覚的な情報も含んだコンテンツなどではコンテンツそのものの見せ方を考えなければならないかもしれません。要は向き不向きがあるってことです。

WordPressのテーマ「Skeleton」を使ってみた

ま、そんなわけで今回作ったサイトは、「書籍や誰かのインタビューなどで気になる発言を引用してメモしておく」という内容です。文字ベースになるのは明白ですし、個別のデバイスに対応する意味もあまり感じられないので、レスポンシブな感じにしてみようと思ったのですね。

そこで採用したのが（自分で作れよって話ですが）、こちらの「Skeleton WordPress Theme」です。Skelton という名前からピンと来る方もいらっしゃる方も多いかもしれませんが、このテーマの元になっているものは「Skelton」というフレームワークです。

「Beautiful Boilerplate for Responsive, Mobile-Friendly Development 」というタイトルになってるように、多様な端末での見栄えをサポートしてくれるフレームワーク。HTML5ベースで主要な要素などがシンプルにスタイリングされたものなので電子書籍などでも使える感じです。これは、カラム幅は % 指定するのではなく、960pxをベースにしたpx指定となっています。

テーマの方はWordPress以外のCMSをサポートしていたりしてるので不要なファイルなども含まれていますが、ファイルをダウンロードしてテーマのディレクトリにアップすれば使えます。いらないCSSのコードもできれば抜いた方が軽くなるでしょう（そのままだと60kぐらいになるので）。

とまぁ、SkeltonがベースのWordPressのテーマをいれて楽はしてるのですが、そのままではちょっと使えないというか、ところどころに凡ミスもあるのでその辺を修正しながら「quoted」ができています。ブラウザのサイズを変えたりiPhoneやiPadなどのデバイスでご覧いただければ、と。

（追記）iPadを縦方向にすると横幅がぴっちりになるのもやはり単純な記述ミスだと思われますが、修正する場合は「skelton.css」の「#Tablet (Portrait)」のcontainerの横幅を748pxに変更しましょう。デフォルトでは左右のマージンが10pxずつ、16カラムがベースなので.sixteenは728px、たとえば「one＋fifteen＝728px」じゃないと話がおかしくなります。

それ以外にやっていること

それと今回は、Web fontも使ってみようかな？と思って「Google Web Fonts」をタイトル部分に使っています。CSS版で入れました。

あと、FacebookのOGPはシンプルに「WP Facebook Open Graph protocol」をベースにちょっとだけ改良。デフォルトイメージの登録、「og:description」には本文先頭の160文字かexcerptを抜いてくれるので楽ですね。

それ以外には、いわゆるサイトパフォーマンス高速化の手法をあれやこれやと。例によって「W3 Total Cache」を入れてCDNのオプションを有効にし、CSSやJS、ちょっとした画像などは別サイトから配信といった感じになっています。

参考までにGTmetrixのデータはこちらです。
→ Latest Performance Report for: http://q.gaspanik.com/

以上、これからWordPressを使ってレスポンシブ・ウェブ・デザインで何か…と、お考えの皆さんの参考になればと幸いです。

「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