Portrait (縦向き) モードと Landscape (横向き) モードを App Cloud テンプレートでデザインする方法

タブレット UI をデザインする際には、2つの異なる UI が必要になります。1つは ポートレートモード (縦向き) の UI と もう1つは ランドスケープ モード(横向き)の UI です。これを、CSS3 Media Queries を使用して実現させます。

例えば、動画のリストを2つの異なるモードで表示したい際には、ポートレート モードで top-down の動画リストを表示し、ランドスケープモードで grid の動画リストを表示させます。

最初は、ポートレート モードと ランドスケープモードの両方に適用される CSS から始めましょう。

ul.results li {
    ...
}
ul.results li .thumbnail {
    ...
}
ul.results li .content {
    ...
}

次 に、CSS3 Media Queries を使用して、ランドスケープ モードにスタイルの特性を付加します。動画をリスト化する際に、inline-block 要素を利用して小さいブロック要素を横並びにし、各々の小さいブロック(1つの動画)の縦 (height) と横 (width) を指定します。

@media all and (orientation: landscape) {
    ul.results li {
        display: inline-block;
        vertical-align: top;
        width: 20%;
        height: 185px;
        ...
    }
}

さらに、動画の説明部分に色 (Body Color) を赤 (ランドスケープ)から緑 (ポートレート) に変更します。

@media all and (orientation: portrait) {
    body {
        color: green;
    }
}
@media all and (orientation: landscape) {
    body {
        color: red;
    }
}


単純明快ですよね。さあ、皆さんもCSS3 Media Queries をお試しあれ。サンプルコードは下記よりダウンロードして下さい。

https://github.com/brightcovekk/orientation

ダウンロード後に、css フォルダ内の app.css ファイルを自由に編集し、CSS3 Media Queries がどのように使用されているかをご確認下さい。なお、CSS はアプリのレイアウトを変更するためのものであって、何らかの動的なアクションを起こすためのものではありません。ユーザがデバイスのオリエンテーション (例:ポートレート から ランドスケープへ)を変更する際に、何らかのアクションを引き起こすには、”vieworientationchange”というイベントを Listen する必要性があり、下記のようなコードを実装します。

$(bc).bind("vieworientationchange", function(event, result) {
    // 何らかのアクションを記載
});

ご質問・ご不明な点がございましたら、無料で利用できるコミュニティがございますので、下記にユーザ登録を行い、ご質問頂けます。

https://groups.google.com/forum/?hl=ja&fromgroups#!forum/bcappcloud-japan


【参考資料】
http://blog.brightcove.com/en/2012/02/designing-app-cloud-template-portrait-and-landscape-modes

http://www.adammark.net/2012/01/15/using-css-media-queries-in-app-cloud/

http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/