CSS Nite in SAPPORO, Vol.11 フォローアップ(6)「スマートフォンサイト制作のディレクション術」(小林 信次/鷹野 雅弘)

2013年11月9日(土)、東札幌・ICC Cross×Gardenで開催したCSS Nite in SAPPORO, Vol.11「実践! スマートフォン対応サイト制作」のフォローアップとして、小林 信次(まぼろし)と鷹野 雅弘(スイッチ)による「スマートフォンサイト制作のディレクション術」の資料を公開します。


スライド/音声


動画

※ デスクトップやタブレットでは、右下の「Vimeo」から、大きなサイズで見られます


フォローアップメッセージ

セッション6「スマートフォンサイト制作のディレクション術」を担当したまぼろしの小林です。

セッション中に紹介したSSIによるHTMLの振り分けは、以下のように行っております。

<!--#if expr="${HTTP_USER_AGENT} = /(iPhone)|(iPod)|(Android)|(Windows Phone)/ && ${HTTP_COOKIE} != /sp_pc=1;/" -->
スマートフォン用のHTML
<!--#else -->
PC用のHTML
<![endif]-->

紹介したサイトではCSS、JavaScriptの読み込みや、ヘッダー、フッターなど、多くの場所をスマホとPCで振り分けています。

SSIに関しましては「とほほのSSI入門」あたりが参考になると思います。
http://www.tohoho-web.com/wwwssi.htm

西畑、木村のセッションとあわせてAndroidにマイナスな言葉をのべました。

video要素の部分で紹介した、ピクセルグリッドの高津戸さんが書かれた以下のエントリーもあわせてお読みいただくと、どれだけヤバイのかをご理解いただけると思います。

Androidに対する愚痴 - Takazudo hamalog http://hamalog.tumblr.com/post/57170434943/android

守秘義務の関係でフォローアップ用のスライドから具体的なサイトは削除しているものがあります。

以下、アンケートへの回答です。

Q:デザインを重視してないクライアント向けなら、jQuery Mobileで楽にスマホ対応するのもアリだと思う

始終、jQuery Mobileはオワコンであるかのような説明になってしまっておりましたが、お伝えしたかったことのすべてではありませんでした。

いただいたとおり、jQuery Mobileがうまくはまるサイトも確かにあると思います。

ハナから利用しないと決めつけるのではなく、代替案のひとつとして検討する必要があるでしょう。

年別アーカイブ