Pookのスマートフォン版をリニューアルするのに気にかけたこと

Pookスマートフォン版をリニューアルしました。

Pook (iPhone, Androidで見ると確認できます)


元々jQuery mobile を試してみて数日で出来たのを置いていたのですが、jQuery mobileがリッチすぎて動作が重いと感じたのと
最初からスマートフォン向けサイトを作る機会なんてほとんどないと思い、CSS、JSとも一から作りました。どんなこと考えて作っているかをふたつだけ書いておきます。

CakePHP + pjax + CoffeeScript

スマートフォン版リニューアルということで、
JavaScriptCoffeeScriptで書きました。

また画面遷移はpjaxで行うようにしています。

pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモが詳しいです。
ただ今回Pookは、defunkt/jquery-pjax · GitHub は使わずに、新規で書いてます。

pjaxの実装はびっくりするほど簡単ですが、ものすごく強烈です。CakePHPで使う場合もfragmentオプションを上手に使えば、簡単に実装できます。簡単にかっこいいい非同期なサイトが作れて、かつ、JS対応していなくても問題ないものが出来ます。

レイアウト

やはり多くのスマートフォン向けサイトを参考にしました。その中で参考にしたものいくつかコメント付きで紹介します。

f:id:taizo_onexone:20110827000945p:image

データが敷き詰められていて、ガラケー時代のレイアウトを彷彿とさせられます。動作がすごく軽快ですが、早すぎてよくわかんなくなる時があります。

f:id:taizo_onexone:20110827000946p:image

ここで上げているものでは、一番好きです。自分が数少ないホーム画面に追加しているサイトのひとつです。非同期にガンガン動くということはあまりありません。

f:id:taizo_onexone:20110827000947p:image

たぶん技術自体はfacebook同様スゴいこっているんだと思います。ただ何かかゆいところに手が届かない使いづらさがあります。ヘッダー表示が常に画面上に表示されるようになっているのですが、そこのボタンをタップするたびに全体がフラッシュされたりして、連続性がぶつ切りなのが自分には厳しいです。

  • Yahoo!JAPAN

f:id:taizo_onexone:20110827000949p:image

世界最大のポータルサイトの看板だけあってやっぱり出来が良いです。Yahoo!JAPANのサービス,アプリ,設定をタップしたときに、モーダルビューっぽく下から上に出てくる実装は素晴らしいです。意外と他で同じことしているところを見たことがないです。

f:id:taizo_onexone:20110827000948p:image

本当に必要最低限のデザインです。iPhoneなどのデフォルトのレイアウトに忠実という感じです。悪いとは思いませんが、もうちょっとポータルだからデータがあったほうが嬉しいなぁとも思ったりします。

f:id:taizo_onexone:20110827000950p:image

ひとつひとつの動作はすごく快適です。ただ、使ってるとゲーム選択がホームなのか一言書くほうがホームなのかよくわからなくなります。


今っぽい動きをするのは、Facebook, mixi,GREEなのですが、僕が個人的に使いやすいと思っているのは、Yahoo!JAPAN、はてなブックマークです。あまり動きすぎると不安になるんです。とくに横にスワイプして動かすのがダメ。iPhoneの標準アプリにない動きはやっちゃダメな気がしています。


今回Pookの場合、あまり非同期に動かさない代わりに、最初からいくつかテンプレートを取得するようにしています。例えば、メニュー画面はタップすれば通信無しで即座にオーバーレイで開くようにしています。また、どのページでもいつでも開け閉め出来るようにして、外部サイト投稿の設定を行ってもそのページから離れないようなこともしています。

おわりに

実装していて思ったのは、スマートフォンサイトって予想以上にフォント重要ですね。少しtext-shadowでフォントに影を落とすだけで全然印象が変わります。

Pook自体の機能については簡単にPookでできること・できないことに書いているのでそっちも良ければ見てみてください。