YusukeSugomori

FacebookのiPhoneアプリが先月下旬にアップデートされ、ニュースフィード上の画像の表示方法にも変化が見られました。
「〜さんが新しい写真を追加しました。」という表示がされるタイプのものです。

一方、モバイルサイトでの表示方法は従来のままで表示の仕方に違いがありましたので、iPhoneアプリの表示方法っぽく見せるjQueryプラグインを作ってみました。簡単なhtmlを書くだけで利用できます。使い方やソースコードの簡単な説明は、本記事下記をご参照ください。

サンプルはこちら。モバイルにのみ対応しています。iPhoneのSafariで動作確認済です。

サンプルを動かすと、上の右２つの画像のように、画像をスライドできるのが確認できるかと思います。画像をタップすると、モーダルウィンドウが表示されます。こちらもスライド可能です。コメントを設定している場合は、Facebook同様画面下に表示されます。

また、画像が１枚の場合にも対応しています。

では、使い方から。
#jFBMobileFeedPhoto を指定した<div>タグの中に、

<div>
<img src=”/path/to/img” >
<div>Comment</div>
</div> 

のブロックを追加していくだけです。特にコメントが必要ないならば、<div>Comment</div>の部分は書く必要はありません。

下にコード例を書きましたので、参考にしてください。
下半分は、書いたhtmlコードが実際の表示のときにはどのような構造になっているかを書いたものです。プラグインを使用するときに記述する必要はありません。

オプションを指定することによって、#jFBMobileFeedPhoto の名前を変更可能です。
new jFBMobileFeedPhoto({id: ‘#new-id’})
のように記述してください。 

続いて、ソースコードです。CoffeeScriptで書いています。
やっていることは、

• #jFBMobileFeedPhoto 内の要素を再配置
• 並んでいる画像にtouchイベントをバインド
• 画像がタッチされたら、タッチ位置を取得（touchstart）
• 横方向、縦方向のドラッグ量を取得（touchmove）
• 横方向へのドラッグが大きいなら画像をスライド、縦方向へのドラッグが大きいならウインドウのスクロールと判断し、動作を実行。また、ドラッグ量が小さいならば、画像のタップと判断し、モーダルウィンドウを表示（touchend）

ここに挙げたソースコードやサンプル、使い方はgithubレポジトリで公開しています。レポジトリ内のREADMEにも書いていますが、CSSの position: fixed; を使っていますので、iOS 5 以上にのみ対応しています。