レスポンシブWebデザイン【発展編】

⍫ㇱ㕏ੱ

2013年2月7日Knock! Knock! 勉強会

※ 本資料は、Knock! Knock!サイトで実践したことを紹介するものです。 この内容が「正解」「ベスト・プラクティス」というわけではありません。 また、自社サイトだから可能な実験的ケースであることもご理解ください。

１） JavaScriptによるHTML要素のインクルード

２） JavaScriptによるHTML要素の変形・差し替え

３） 今後の課題

本日のお題

⥄Ꮖ⚫

5

ฬ�೨㧤߾ ߣ߭ߔ߾ߴ�

ᐕ�㦂㧤ਃච〝߫߆ߥߩ

�ᚲ㧤㐳ᴰ↸

⡯�ᬺ 㧤ᬺਥᄦ�ψ�৻ఽߩῳࠎ߾ߜ

� W ebో⥸ࠦޔ ࠖ࠺ ࠣࡦ ߌ⺧ਅߩ

� ᐢ๔ోࡦࠗࠩ࠺⥸

W ebࠩ࠺ ࠗ࠽ω

W eb/DTPࠩ࠺ 㓸✬ߩࡄࡍࡈޔࠗ࠽ω

W eb࠺ ࠢࠖ ࠣࡦ࠾ࡦࡊ�࠲ ༡ᬺω

Wߩࠬࡦࡈ eb⠪S2࠽ࡦࡊ

Knock! Knock! ～静岡のWeb制作者のための勉強会～

ߔ߹ߒ㗿߅ߊߒࠈࠃ

１） JavaScriptによるHTML要素のインクルード

JavaScriptによる外部ファイルのインクルード（モバイル時に不要な要素を外出し）

news.html

sponsor.htmlseminarListOuter.html

passedEvent.html

２）レスポンシブWebデザインの実装

参照 : http://js.studio-kingdom.com/jquery/ajax/ajax

外部ファイルを読み込むJavaScript

$.ajax({ url: "/inc/news.html", success: function(news){ $("#sidebar").prepend(news); }});

→ 読み込むファイルを指定

→ 読み込み成功時の処理

→ jQueryのajax関数でリクエスト

→ sidebarの先頭に挿入

２） JavaScriptによるHTML要素の変形・差し替え

SVG形式

参照 : http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics

SVG（Scalable Vector Graphics）

レスポンシブWebデザイン向き！

SVGとは、XMLによって記述されたベクターイメージ言語のこと、あるいはSVGで記述された画像形式の事。W3Cでオープン標準として勧告されている。 ベクターデータによる画面表示では拡大や縮小をしても描写の劣化が起きない。

ただし、IE8以下は非対応…

２）レスポンシブWebデザインの実装

参照 : http://js.studio-kingdom.com/jquery/attributes/attr

要素の属性値を変更するJavaScript

<!--[if lt IE 9]><script> var logoSrc = $(".logo img").attr("src").replace(".svg",".png"); $(".logo img").attr("src",logoSrc);</script><![endif]-->

→ img要素のsrc属性を取得、拡張子を書き換えて変数化

→ IE9未満の場合だけ有効になる条件コメント

→ src属性の値を変更

変形

・スマホ画面は、どうしても縦方向に長くなりがち・スクロールしたときに、上まで戻るのも面倒・そもそも画面上部のボタンは押しにくいよね？

→ スマホ用に要素を変形する、というアプローチ

グローバルナビの変形

参照 : http://js.studio-kingdom.com/jquery/effects/hide

nav要素を変形するJavaScript（１）

$("nav").addClass("menuOn");$("nav #navGlobal").hide();$("nav #navSub").hide();$("nav").prepend(" <span class=\"navOnOff\"> <img src=\"/img/btn_nav.png\"></span>");

→ #navGlobalを非表示に

→ #navSubを非表示に

→ nav要素にclass属性を付加

→ ナビゲーションを展開するボタンを挿入

nav要素を変形するJavaScript（２）

$("nav.menuOn span").toggle( function(){ $("nav #navGlobal").fadeIn("1000"); }, function(){ $("nav #navGlobal").fadeOut("1000"); });

↑ グローバルナビをフェードアウト

↑ 対象をクリックするたびに要素の状態を切り替え

↑ グローバルナビをフェードイン

とか書いてました。toggleイベントが廃止されるまでは…

nav要素を変形するJavaScript（２）

$("nav").click(function() { if ( $("nav #navGlobal.off")[0] ) { $("nav #navGlobal").show() .addClass("on").removeClass("off"); } else if ( $("nav #navGlobal.on")[0] ) { $("nav #navGlobal").hide() .addClass("off").removeClass("on"); }});

nav要素を変形するスタイルシート

#container nav { width: 100%; height: 44px; position: fixed; bottom: 5px; left: 5px; z-index: 999; .navOnOff { color: rgb(255,255,255); text-align:center; display:block; width:44px; height:44px; background:rgba(51,51,51,0.8); border-radius: 2px; }}

こんな感じで、モバイル用のCSSも記述します

ナビゲーションも外部ファイルをインクルードしては？→ JSがオフだったら？ SEO的にまずいよね？

３） 今後の課題

※ HiDPI → High Dot Per Inch。高解像度

画像のRetina（HiDPI）対応

DevicePixelRatio（viewport上の1pxとデバイス上で使用される実px数の比率）・この比率に適した画像でないと、画像表示が荒れる・1系、1.5系、2系、3系…・DevicePixelRatioによる画像の出しわけ → JavaScript / サーバーサイド / 仕様も策定中…

PC-スマホの切り替え機能

・ 通常のRWD（Media Queries利用）では、 スクリーンサイズで強制的にレイアウトが変わってしまう ・ しかし、スマホでもPC用の画面で見たいこともある

→ 切り替えボタンで表示をコントロールしたい

モバイル・ファースト！

・ このサイトは“PCファースト” → PCサイトありきで、スマホへの最適化を検討 ・ スマホでのユーザビリティなど、検討課題が残る状況 ・ 特にスマートデバイスならではのコンテキストは重要

告知

https://www.facebook.com/studyMeeting.shizuoka

日時 : 2013年 6月15日（土）会場 : グランシップ（静岡市）

comimg soon...

http://www.cssnite-kofu.com/vol2/

実装に困ったらご連絡ください！

本日はありがとうございました

ご連絡・ご質問など下記までお願いしますE-mail : info@hamnaly.comFacebook / Twitter : yabecchy