slide.key

Size: px

Start display at page:

Download "slide.key"

あゆみおいもり
9 years ago
Views:

1 Responsive Web Design Adaptive Web Design マルチ環境対応の考え方

3 考え方は? 違いは?

4 Responsive Web Design.content {! position: absolute;! screen and (min-width: 768px) {!.content {! position: relative;! }! screen and (min-width: 1024px) {!.content {! position: static;! }! } ブレイクポイントを設定して画面サイズの対象範囲ごとにレイアウトを変更更する

position: relative;! }! }! @media screen and (min-width: 1024px) {!

5 Responsive Web Design ワンソースマルチユースの考え方により一つのHTMLファイルを共通利利用する

6 Responsive Web Design レイアウトを画面やウィンドウサイズの変化に追従して柔軟に変更更できる Small Display Meddium Display Large Display Smartphone Tablet (landscape) / Laptop Tablet (portrait) Break Point Break Point

7 Responsive Web Design コンテンツを非表示にできてもソースから消すことはできない <div id= boxa >! ! </div>! <div id= boxb style= display:none; >! ! </div>! <div id= boxc >! ! </div>! <div id= boxd >! ! </div> <div id= boxa >! ! </div>! <div id= boxb >! ! </div>! <div id= boxc >! ! </div>! <div id= boxc >! ! </div>

<!-- contents -->! </div> <div id= boxa >! <!-- contents -->! </div>! <div id= boxb >! <!-- contents -->! </div>! <div id= boxc >!

8 Responsive Web Design 画像などのリソースは共通で利利用される将来的にはHTML5が解決予定 (picture 要素 / imgsrc 属性 ) <div id= boxa >! <img src= idea.png >! </div>! <div id= boxb >! ! </div>! <div id= boxc >! ! </div>! <div id= boxc >! ! </div> <div id= boxa >! <img src= idea.png >! </div>! <div id= boxb >! ! </div>! <div id= boxc >! ! </div>! <div id= boxc >! ! </div>

9 Adaptive Web Design <script type="text/javascript">! if((navigator.useragent.indexof('iphone') > 0 &&!! navigator.useragent.indexof('ipad') == -1)!! navigator.useragent.indexof('ipod') > 0!! navigator.useragent.indexof('android') > 0) {!! location.href = '/sp/';! }! </script> ブラウザやデバイスを判定してファイル読み込みを振り分ける ! ! !

</script> ブラウザやデバイスを判定してファイル読み込みを振り分ける <!--[if IE 6]>!! <link rel="stylesheet" href="ie6.css"><![endif]-->! <!--[if IE 7]>!

10 Adaptive Web Design 対象ごとに専用コンテンツやレイアウトを個別に用意する Small Display Meddium Display Large Display Smartphone Tablet (landscape) / Laptop Tablet (portrait) Break Point Break Point

11 Adaptive Web Design 画面やウィンドウサイズの変化に伴った柔軟なレイアウト変更更はできない Small Display Meddium Display Large Display Smartphone Tablet (landscape) / Laptop Tablet (portrait) Break Point Break Point

12 Adaptive Web Design Contents PC Smartphone A E C 専用HTML A C + E A B C 専用HTML A+B + + C+D C A D D B E HTMLやCSSなどが表示対象専用の設定となるため目的や方法に合わせた個別のコンテンツを提供可能

13 Adaptive Web Design PC Smartphone A E C 専用HTML A C + E A B C 専用HTML A+B + + C+D C B A D 対象外想定外 D E 対象外や想定外の環境では操作や表示に問題が起きたり将来的に増えるかもしれない未知の端末への対応ができない

14 共通点と相違点

15 相違点 RWD 同じファイルを全ての表示環境で共通して利利用する AWD 表示環境ごとに個別のレイアウトやコンテンツを利利用する Media Queries

16 共通点レイアウトは特定の画面サイズを持つ表示環境や画面サイズの範囲を指定して変更更する特定の画面サイズを持つ表示環境や画面サイズの範囲ごとに固有のレイアウトを提供する Media Queries

17 レイアウトに限ると... RWDはワンソースマルチユースを前提とした AWDに含まれる一つの方法 Responsive ワンソースマルチユース Adaptive 表示環境に合わせたコンテンツやレイアウトを提供 Media Queries

18 Responsive Web Design コンテンツは共通として画面変化に柔軟に応じたレイアウト変更更が目的 Adaptive Web Design 画面サイズあるいは環境ごとに専用コンテンツを提供することが目的

19 ... Responsive Web Design Responsive Web Layout Adaptive Web Design Adaptive Web Contents

20 さてマルチ環境対応にはレイアウトとコンテンツどちらが重要なのか?

21 ADAPTIVE VS AND RESPONSIVE 両方とも重要あくまで理理想ですが...

22 利利用方法が異異なれば必要なコンテンツも異異なる端末が異異なれば操作方法も異異なる Adaptive Web Design 利利用目的や画面サイズに適したコンテンツとレイアウトを提供

23 端末によって画面サイズや解像度度は異異なる横縦どちらでユーザが利利用するかわからない Responsive Web Design 画面サイズや画面解像度度の変化に柔軟に対応するレイアウトを提供

24 マルチ環境対応の問題

25 Responsive Web Design Small Display Smartphone Tablet (portrait) Break Point Meddium Display Tablet (landscape) / Laptop Break Point Large Display PC / SmartTV Adaptive Web Design

26 RWDは... #1 特定の環境に特化したサイトが必要ではない場合やサーバ連携に制約がある場合デバイス判定結果を信頼できない状況やユーザーエージェントに依存しないサイト構築 Media Queries

27 RWDは... #2 一つのソースで複数環境に対応できるためコストパフォーマンスは高いただし構造と装飾の分離離が必要なため HTMLが適切切に構造化されていることが重要となる Media Queries

28 AWDは... デバイスやユーザーエージェント判定結果を信頼できるできる限り利利用目的や表示環境に最適化したUXやUIを提供するコストパフォーマンスより最適化を重視する Media Queries

29 導入にあたっては... 既存サイトのRWD化は構造化が問題となるケースがある新規やリニューアルでは AWD の方が導入しやすい AWDは専用となるため対象が増えるとコスト負担が大きい Media Queries

30 汎用+ 専用サイト構築

31 RESS Responsive Design + Server Side Components Media Queries

32 LukeW IDEATION+DESIGN :

33 RESS Contents PC Smartphone A E C 専用HTML A C + E A B C 専用HTML A+B + + C+D C A D D B E 端末やUAを判定して必要なコンテンツを配信表示はRWDでUAに合わせて調整

34 利利用目的や操作方法機能に合わせたコンテンツの提供 AWDで個別に対応 RESS Small Display Smartphone Tablet (portrait) Break Point Meddium Display Tablet (landscape) / Laptop Break Point Large Display PC / SmartTV 画面サイズや解像度度の違い RWDで対応画面サイズや解像度度の違い RWDで対応 RESS 画面サイズや解像度度の違い RWDで対応

35 特別な方法ではなく... コンテンツのコンポーネント化 UAごとの配信コンテンツ管理理コンテントネゴシエーション RWDによる表示制御 UA デバイス判定とブレイクポイントの設定 Media Queries RESSはこの体系化の提案です

36 メリットは... Google推奨するRWDによるSEO 効果を期待できる <body> {{>header}} t...] n e t n o c t n e m u [...doc AWDはURLが環境ごとに異異なる <img " " = h t id w " height= 300 " } } e g a im { { " = c r s n}}"> io t ip r c s e d e g a alt="{{im {{>footer}} が RESSでは解消テンプレート管理理による将来的な </body> 環境の増加にも対応可能

37 結論論... RWD / AWD を利利用したコンテンツ提供は必須マルチ環境への対応にはコンテンツをどのように管理理し環境に合わせてどのように配信するかが重要となる