では、また来年ｗ

どうぞ、今後ともよろしくお願いいたします。

来年のことを言うと鬼も笑うそうですが、もう来年みたいなもんなのでいいでしょう。来年は年初から「CSS Nite LP, Disk 26」を皮切りに「amplifizr Vol.4」、JAGATの「PAGE 2013」と講演の機会をいただいております。また、昨年末からロクナナワークショップで「次世代Webデザイン講座」を担当しております。来年の開講スケジュールについても既にいくつか決定しておりますので、興味のある方は是非。

最後に。来年から雑誌への寄稿や書籍執筆を自粛する方向で考えております。通常業務と並行することで出版社の皆さんはもとより、その他の関係各位にご迷惑をかけることが多くなったこと、執筆内容が紙でリリースするにはもうサイクルとして成立しにくいなどの理由があります。そういう方向で考えているということで、一足先にご報告を。

では、来年もまたがんばりましょう。

いまどきのWebサイト制作は、これまでのようにPCのみを対象とするわけにはいきません。スマートフォンにタブレット、そしてこれから出てくるであろう未知なるデバイス、嗚呼アタマが痛くなりそうです（笑）。最近なんだかレスポンシブなんとかが話題になることも多いのですが、今日はそんな制作効率をあげるためのツール「Jolly」を紹介したいと思います。

多様なデバイスでの見た目や操作感を確認するのに、Adobeさんが「Edge Inspect」なるものをリリースしていますが、こちらCreative Cloudの契約とデバイス側にアプリが必要です。これでも良いのですが、今のところの最大の弱点はバーチャルホストの設定が簡単にできないのと、「file:///」ではじまるローカルのファイルをプレビューできないこと（いずれ改良されるでしょうけど）。

バーチャルホストの設定はこちらの記事にもあるように37signalsのxip.io使う方法とか、うちでも紹介しているCharles Debugging Proxyを使う方法なんてのがありますが、そこはほらわかる人にしかわからないという…。

そんな面倒なことをしなくても、簡単にローカルのファイルをその場で編集しながらいろんなデバイスでもプレビューできるのが、このJolly（900円の有償アプリ）というわけです。でも、このJollyがまたマニュアルとかヘルプの類が一切ありません（笑）。とはいっても、実のところ別に難しいわけでもないので簡単に説明を。

Jollyの使い方

Jollyを起動すると黒いUIが出てきます。インターフェイスはこれだけで設定もありません。とりあえず何も追加しないことには始まらないので、左下の「＋」ボタンをクリックします。

上の方にデータの所在を追加するエリアが出てくるので、歯車ボタンから追加しましょう。ここで追加するのは、Webサイトのドキュメントルートにあたる場所ですね。やることはこれだけ。

で、ブラウザで開きます。

他のデバイスからアクセスする場合は、URLのとこの「ローカルマシン名.local:XXXXX」をブラウザに入れてあげましょう。あとはファイルを編集すれば、自動的にリロードされるという仕組み。

簡単でしょ？

ただ残念なのは、PCで遷移したからといって他のデバイスも同時にページを移動するみたいなことはありません。そこは手動でページを遷移しましょう（※直接ファイル名をいれたかったら、ブラウザではなくJollyのロゴ横にあるアドレスバーに）。

追記: たとえばローカルでWordPressとかを動かしてる場合はどうもうまくいかないようです。静的なものであれば「example.local」みたいなサブドメイン使うとかもいけるんですが。

あ、そうだ。忘れてた。これOS X版しかありません（笑）。というかですね、いまどきのWeb制作はOS Xの方が良いですよ、真面目な話…。

このたび「WordPress 高速化＆スマート運用必携ガイド」が発売されました。昨年の夏頃、WordPressのプラグインを公開したり最近話題のNginxのことにも詳しい@wokamotoさんにバックエンドの高速化を担当してもらって、フロントエンドの方はボクが書いてWordPressの高速化について書けば面白いんじゃないかな？と思い立ちましてね。

ボクの原稿の進みが遅いのもあって発売が今頃になってしまったのですが、この書籍はWordPressを中心にすえつつフロントエンドとバックエンドの双方の面からWebサイトのパフォーマンス改善について書いたものになっています。

これまで、2009年の12月に「Webサイトの高速化的な話をWD誌で」、2010年の夏には同じくMdNさんから「HTML+CSSコーディング ベストプラクティス」の中の一部の章で高速化について書いています。それから2年弱経ちましたが、まわりを見渡しても日本ではまだまだパフォーマンスを考慮したサイトの数は多くありません。世界レベルでみたWebコンテンツの平均値はこのような感じです。
→ HTTP Archive – Trends http://bit.ly/zaiu4W

ちょうどいい事例があったので…

こういうことを書くとDisってると誤解されるのであまりよくはないのですが、先日おこなわれた東京マラソンの公式サイトもどうやらWordPressで構築されています。大量のアクセスが想定されるなか前日には見事に落ちてましたが、これが落ちた一因はそのサイトの作り方にあるんじゃないかなぁ…と。普通に閲覧してる分には「そんな遅くもないじゃん」と思われるかもしれませんが、大量にアクセスが集中した場合には結構大変な作りになっているんですよね。

現在もそのままで公開されていますので、ちょっとHTMLソースを覗いてみましょう。レガシーブラウザへの対応のためか、CSSは頭のとこで＠importを使って読み込まれていますが、そこには再度読み込み指示があって19個のCSSが記述されています。またサイトの描画に必要なのか、JavaScriptも7つほど（うち1つはGoogleから）参照されるようになっています。

CSSにしてもJavaScriptにしても、HTMLがロードされたらそこに記述された内容を整形するために必要でしょうから、最初にロードされてきます。バックエンドがどうなってるかわかりませんが、同じサーバから出てくるのが合計25個。最初の段階でこれじゃダメですよね…。

HTMLの整形に必要なファイルをこれだけ多くのファイルに分割してリクエストを出していたら、ブラウザの1ドメインあたりのコネクション数を食いつぶします。これらが落ちないことにはどうレイアウトしていいかもわからないわけですから、表示にさえ至らないということになりますね。このサーバへリクエストしてからページができるまでのデータの流れを図式化したのが以下のものです。

→ データのウォーターフォールチャート（フルサイズ: 1.3MB）
→ データのウォーターフォールチャート（ミニサイズ: 880K）

どうでしょうか。海外からのリクエストなので秒数は多少さっぴいて考えたとしても、4秒ぐらいまではCSSとJavaScriptのリクエストです。それらが落ちて開放されない限り他の画像などの要素も落ちてきませんので、それ以降のリクエストが繋がるの待ち状態（青緑のバー）。ブラウザの並行ダウンロードが仮に6個ずつだとして…、表示が完成するまでにはこのような流れになってしまう。ブラウザ側へ落ちなければサーバ側も開放されません。つまり、大量のアクセスがあった場合は最初の段階で完全に止まってしまってもおかしくないわけです。

こういうのはフロントエンド側でもっと大量かつ高速にさばけるような改善もできるし、インフラをちょっと変えてあげてさらなる高速化をはかることもできます。要は作り方なのです。そんなことがこの青い本に書いてあります。

VPSのことについても書いてあります

本書はWordPressのことがやや多いものの、内容は多くのWebサイトの高速化にも役立つものだと思います。特にこれまでホスティングの自由度が高くないため、泣く泣く諦めてたかもしれないWebデザイナーさんたちのために、VPSの導入からサーバのインストールや設定についても書かれています。これまでパフォーマンスを意識したことがなかったWebデザイナーさん、バックエンドは得意だけどフロントエンドは詳しくなかったエンジニアの方のお役に立てれば。

最後に本書のはじめにをここに転載しておきます。本屋さんで見かけた際には是非手にとってパラパラと眺めてみてください。

今、Webサイトにはスピードが求められています。8秒ルールといわれていたのは昔の話、今ではブロードバンド回線の普及もあり、世界的な基準は3秒以内に表示が完成しないと遅いといわれており、その速度は検索ポータルの表示結果にも少なからず影響を与えるとされています。

また、この数年でスマートフォンやタブレット端末といった小型PC並の性能を持つスマートデバイス が登場し、自宅や会社以外から電話回線経由でのWebサイトのアクセスも増えています。

しかし、日本のWebサイトの多くは旧来のまま、全体的に見てもWebサイトの表示スピードは速いとはいえません。回線が速くなればページはすぐ表示されるもの、電話回線経由ではすぐに表示されてほしい、利用者の立場ならそう考えるのは至極当然のことといえるでしょう。

本書は、世界中で広く用いられているCMSである「WordPress」を中心に据えながら、このWebサイトの遅さの原因とその改善手法を紹介する書籍です。WordPressは、その仕組みから一般的なWebサイトと比較して反応速度が遅いと捉えられがちです。

しかし、実際のところはそうではなく、遅さの原因は作り手側の問題であることの方がほとんどです。この表示スピードが遅いという誤解をとくべく、HTMLやCSS、JavaScriptといったフロントエンドの面、そしてWebサーバやPHP、MySQLサーバといったバックエンドの面の双方から改善手法を解説しました。

さらに、安価で自由度も高く注目を集めるVPSについても、敷居が高く感じてしまいがちなWebデザイナーの皆さん向けに、その導入方法から運用における注意点にも触れました。

検索エンジンとも親和性の高いWordPressをより高速にして、利用者にストレスを感じさせないWebサイトに。本書が、Webサイトを運営される多くの方々の一助になれば幸いです。

→ WordPress 高速化＆スマート運用必携ガイド（Amazon）
→ WordPress 高速化＆スマート運用必携ガイド（Facebookページ）

＃本書の内容にプラスしながら、来る4月21日（土）には「WordBench 埼玉勉強会」でこの高速化について講師的な立ち位置で出席予定です。こちらもお時間のある方はいかがでしょうか。

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

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

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

最初はホームのアイコンから起動できる方が便利じゃね？と思ったんですが、考えてみたら他のアプリ起動中でもスルスルッと通知センターをドラッグすればアプリが起動できるので意外と便利です（笑）。では、いってみましょう。

（追記）8つ登録できる別のアプリも出たみたいなので下にリンク入れてます。

まずは、通知センターの設定を

最初に言っておきますが、有償（170円）のアプリです。

アプリをインストールして起動したら、通知センターの設定を変更しなければいけません。具体的には…、

• アプリの通知を有効にする
• 最新の5個を表示
• 表示方法は「None」
• バッジとかサウンドはオフ

こんな感じです。

通知を有効にして、最新の5つを表示します。

アラートの表示は一番左の「なし」でオッケイ。その下に並んでる「バッジ」とか「サウンド」はナシにしておきましょう。

通知センターから起動するものを追加する

App Switcherにもどって、左下の「Quick Launch」のタブを選択して、通知センターから起動したいアクションを追加します。右上の「＋」ボタンがアクションの追加です。

ポチッと押すと、アクションの追加画面に移動します。ここで設定できるのは、表示名とアイコン、そしてアクションの内容です。

初期設定されてるアイコンはタップすれば、プリセットされたものとかライブラリから選択できます。どのみち、通知センターの画面には出てきませんから何でもいいです（笑）。

通知センターに出てくる表示名をいれて、次にやりたいアクションを追加します。電話するのか、メールするのか、アプリを起動するのか、ってことですね。

アプリを起動する場合は「URL」をタップしましょう。インストールされたアプリは、たとえばTwitterなら「twitter:」っていう書き方をすれば呼び出すことができるんですね（このURLスキームってのはアプリ毎に違います）。

自分の使っているアプリとか調べたかったら「handleOpenURL」で調べることもできますし、有名どころのものはApp Switcherのサイトから直接登録することもできます。

こんな感じですね。

iPhone版が出て最近話題になっているFlipboardは「flipboard:」って入れれば大丈夫です。他をあげておくと…、Twitter（公式）は「twitter:」、Tweetbotは「tweetbot:」、Facebookは「fb:」とかですね。その他マニュアルはこちらに。

（追記）システム設定まわりのもろもろはこちらを参考に。

登録したアクションを通知センターに登録

アクションを追加しただけでは、通知センターには表示されません。今度はApp Switcherの右下の「Setup」のタブに切り替えて、4つの空欄に登録したアクションを追加します。

残念ながら4つまでしか登録できないんですが、通知センターに表示する順番で右側の「＋」ボタンを押してアクションを登録しましょう。

「Show Quick Launch」は、App Switcherの画面を表示しますので、アクション自体をたくさん登録しておけばそこから起動できます。登録が4つまでしかできないのが残念なところですが、他のアプリを起動中でも通知センターをスルスルッと引き出せばいいのは案外便利です。

→ Pepper Stuff – App Switcher

（追記）こんな記事を書いてたら、なんか8個登録できるのも出たみたいですね（笑）。詳しくは以下のサイトをご覧ください。

→ [FlashLaunch] – 通知センターにWi-Fi/輝度などの設定ショートカットを置くならApp SwitcherよりFlashLaunchがおすすめ | iPhone/iPadアプリを紹介するAppPot