CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Deguchi

今回はATNDの補欠登録をして、当日キャンセルで何とか参加することが出来ました。

今回のテーマは、「HTML5を用いたサイト開発プラクティス」
慶應義塾大学の日吉キャンパスで行われました。

アジェンダ:
「Automatic Ajax(jQuery http://dandizettes.com/free-cam-singles-d2/ Mobile) & pjax http://pnpars.com/mc/online-dating-online-roti/ ~HTML5時代のAjaxサイトプラクティス~」小松氏 @komasshu
「Box2DJSではじめる物理エンジン(仮)」安藤氏 @technohippy
「Responsive Web Design」Web Directions East LLC代表 菊池氏 @mantangs
「Xianpianについて(仮)」kanasan氏 @kanasan
「Web and TV (仮)」Opera Software ダニエル・デイビス氏 @ourmaninjapan

今回は、この中からpjaxとResponsive Web Designの二つを中心にレポートしたいと思います!
※講演を聞いて、私なりに解釈したものです。誤りがありましたら、ご指摘頂ければ幸いです。

pjax

pjaxとは、pushState+Ajaxの略称です。
Ajaxは、もちろんAsynchronous JavaScript + XMLのことを指します。

では、pushStateとはなんでしょうか?

pushStateとは

pushStateとは、ブラウザの履歴を任意に追加出来るHTML5で追加されたAPIです。

ブラウザの履歴を任意に追加出来る為、Ajaxでの表示切替を行っているところで戻るボタンや進むボタンによるページの切り替えが可能となります。
(JavaScriptで戻るボタンや進むボタンが押されたことを検知して、内容を書き換えるなどの処理は別途必要です。)

※IEは対応していません。IE9も未対応。

pjaxとは

pushStateが分かったところで、本題に戻ります。
では、pjaxとは何でしょうか?

一言で言うなら「Ajaxを使ったページでもブラウザの戻るボタンや進むボタンでのページ遷移を実現し、URLがAjaxを使っていない場合と同じように見せる事ができるテクニック」です。

それを実現する為に、pushStateを利用しています。JavaScript側での戻るボタンや進むボタンの検知(popstateイベント)が必要です。

また、pushState対応ブラウザ用のページと、非対応ブラウザのページを別々に作る必要がある為
各ページはシステムから出力した方が良さそうです。

動作は、GitHubのソースページで実現されていますので、それが参考になると思います。

参考:cakephp – GitHub

具体的な実現方法については、今回は書きませんが、別の機会にご紹介したいと思います。

jQuery pjaxプラグイン

pjax用のjQueryプラグインがあります。
https://github.com/defunkt/jquery-pjax
リクエストを送信するときに、ヘッダーに「X-PJAX」を付けてくれるので、それを元に処理を分けることが出来ます。
また、popstateのイベントもしっかりと検知してくれます。素晴らしいですね!

でも、IEを無視するような処理が書かれていない気がします。ぱっと見ただけですが。

最後にもう一度。

IEには対応していません。残念ですが、IE9も未対応です。
IEはAjaxでの切り替えを行わず、その他ブラウザでのみAjaxで切り替えを行う。
というのが今のところ最善の方法だと思います。

Responsive Web Design

My Operaは、Responsive Web Designで作られている

次にResponsive Web Design(レスポンシブウェブデザイン)です。
恐らく日本での知名度を上げたのはこの記事だと思います。
この記事を書かれた菊池氏がこのセッションで壇上にあがられました。

Responsive Web Designとは、1つのHTMLで、画面の幅に合わせてデザインを変更するサイト制作の手法です。

要になるのは、Media Queriesという技術、これはCSS3の技術です。

Media Queries(メディアクエリー)とは

Media Queriesというのは、CSS2で実装されているMedia Typeを拡張した、スタイルを適用するメディアに、条件をつける事ができる仕組みのことを言います。

分かりにくいですね…
そもそもMedia Typeとはなんでしょうか?

Media Typeとは

前述の通り、CSS2で追加された、スタイルを適用するメディアを指定出来る値や仕組みを言います。

以下のような指定を良く見ると思います。

</p>
<link rel="stylesheet" type="text/css" media="all" href="/css/common.css" />

ここの「media=”all”」の「all」がMedia Typeです。
「all」以外にも、「print」や「screen」や「tv」などもあります。
印刷時にだけ適用するスタイルは、「print」を指定したりしますよね。

これを拡張したのが、Media Queriesです。

Media Queriesとは

前項で、メディアに条件をつけることが出来る仕組みです。と説明しましたが、もう少し具体的にしていきましょう。

以下のような使い方をします。
really good dating jokes

</p>
<link rel="stylesheet" type="text/css" media="all and (max-device-width: 480px)" href="/css/common.css" />

これは、端末の横幅が最大480pxの場合に適用されるという指定です。(主にiPhone向け)

他にも以下のような書き方も出来ます。

</p>
<link rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="/css/common.css" />

これは、iPhone4用のもの。

このように、条件をつけて当てはまる場合にのみ、そのスタイルを適用することが出来る、それがMedia Queriesです。

なお、「and」や「,(カンマ)」で複数条件にしたり、「not」で否定にしたり、色々と出来るようです。
条件も-webkit-とあるように、ブラウザ毎に拡張されているようで、様々なものがあります。
こちらも別の機会に取り上げたいと思います。Media Queriesについての記事を書きました!

※またかと思うかもしれませんが、IEが対応していません。でも今回はIE9以降は対応しています!
 IE8以前についても、別途JSを用意して適用することで対応出来ます!よかった!
 https://github.com/scottjehl/Respond

Responsive Web Design対応

はじめに、1つのHTMLで、画面の幅に合わせてデザインを変更するサイト制作の手法です。と説明しました。

画面の幅に合わせてデザインを変更するのは、もちろんMedia Queriesを使用しますが、それだけではありません。
画面の幅に合わせてデザインを変えるということは、各要素をpxで指定してはいけません。
pxではなく、パーセントで指定をします。いわゆるリキッドデザインの状態にします。
画像なども要素に合わせて拡大、縮小するように、width:100%を指定したり、widthにborderやpaddingが含むようにbox-sizingをborder-boxに設定する。などなど様々な対応することでResponsive Web Designの準備が完了。

あとは、Media Queriesを使って、各デバイス毎に表示を整えていきます。

http://powerministry.org/5efz-lesbian-sex-online-video/

Responsive Web Designは素晴らしいが、完璧ではない

「お~それじゃあ今後は、Responsive Web singles dating in jackson mississippi Designでいけば間違いないな!」と思った方、概ね間違いではありませんが、落とし穴がいくつかあります。

例えば、Responsive Web DesignはPCとスマートフォンにしか対応していません。
要するに、ガラケーには対応していません、CSS2ですらまともに使えませんしね…

また、スマートフォンでも、PCと同じ画像をダウンロードします。
これは、3G回線を使っているスマートフォンには致命的。描画するまでにかなりの時間がかかるのは必至です。

他にも、必要でない情報も取得することになります。
ひとつのHTMLで作られていますので、当たり前といえばそうですが、不要なものまで含まれていると、上記画像の件と同様に描画するまでに時間がかかります。

それでも…

http://amurcomusic.com/webcams-world-wide-lz/

やはりメンテナンスは簡単。1ファイルだけ直せばいいのです。
また、複数デバイスに一瞬で対応出来るのも魅力的。

画像やコンテンツが少なく、スマートフォン用サイトを作る予算がない場合などは良いかもしれませんね。

※もちろん、PC版を作るときから、スマートフォンページのことを考慮しないといけないので、通常のPCサイト制作よりも工数が掛かってしまうと思いますが…

第20回 HTML5とか勉強会について

次回は第20回の節目の回ということで、8月21日(日)の朝から長時間の勉強会を行うようです!
なにやらスペシャルなことが待っているようなので、今からワクワクしています!

もちろん第20回も、しっかりとレポートしますので、お楽しみに!

追記:Chrome+HTML5 Conference 〜第20回記念HTML5とか勉強会スペシャル〜のまとめ

Subscribe:
pagetop