自社サイトをiPad向けにカスタマイズしました。


iPad用サイトを見る

※iPad以外はhttp://copain.tv/に移動します。
ページ構成
全体のページ遷移はiScroll 4を使用しました。
ページの前後移動や指定ページへのジャンプ、iPadのタッチスクリーンに対応したスワイプでなめらかなページ移動を実現できます。
はまった点としてはページ移動のメソッドが3種類あって、それらを混ぜて使ってしまうとページ移動が上手くいかない場合がありました。今回はmyScroll.scrollToPage()のみを使用しました。
また、ページ領域内で画像などの要素をアニメーションさせる場合、ページ領域外から要素をフェードインさせたりすると画面がガクガク震えます。おそらくページ領域を監視している部分とバッティングしてしまうのだと思います。ページの領域内でアニメーションさせるのは問題ありませんでした。

アニメーション
アニメーションはCSS3アニメーションを使用しました。jQueryのanimateメソッドではスムーズに動かない場合があります。Flashムービーのような連続的なアニメーションを実行させるためにaddCommand – jQuery Pluginを使い、コールバック時にCSSのクラスを切り替えるようにしています。(addCommand.jsのプロパティーアニメーションは先述のjQueryのanimateメソッドを使用しているため今回は殆ど使っていません。)

メディアクエリー
端末の回転に対応させるため縦・横それぞれのCSSファイルを用意しました。縦と横でレイアウト、アニメーション(主に位置情報)が違う場合は設定をかき分ける必要があります。今回はjavascriptで端末の回転を判定していません。

まとめ
jQuery MobileやSencha touchなどフレームワークが出てきていますが、見た目のデザインありきでそれをページとして扱いたい場合などはiScroll 4はお手軽で結構いいなと思いました。もちろん案件次第ですが。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中