レポート

「第19回 HTML5とか勉強会」活動報告

この記事を読むのに必要な時間:およそ 2 分

Responsive Web Designの実践

休憩時間を挟んだ後,Web Directions Eastを運営している菊池崇さんより,Responsive Web Designについて講演いただきました。

ウェブサイトを構築する場合様々な環境があり,モダンブラウザの中でもレイアウトやJavaScriptの動作が異なることが多く,すべてに対応するのは経験とスキルが必要な状態になっています。最近では,スマートフォンの普及によりモバイル端末対応サイトの構築という案件が増えてきました。これにより,さらに対応する必要のある環境が増え,これらすべてに対応するのは相応のコストがかかります。

そこで,画面サイズに合わせてコンテンツの表示方法を柔軟に変更するResponsive Web Designという手法が紹介されました。

この手法は大きくわけて3つの手法に分かれています。

  • Grid Design/Liquid Layout
  • Fluid Image
  • Media Queries

Grid Designは,画面を複数のカラムとその余白を組み合わせてページデザインを行う手法です。また,講演内ではLiquid Layoutという手法が紹介されました。Liquid Layoutは,画面サイズにあわせてコンテンツのサイズが変化するように,ピクセルでの固定レイアウトではなくすべて%で作るようにするという手法です。

Fluid Imageは,画面サイズに合わせて画像サイズを変更する手法です。あらかじめ大きい画像を用意しておいて,先ほどのLiquid Designのようにimgタグに対して%でサイズが変更されるように設定します。

Media Queriesは,メディアのタイプや画面サイズなどのユーザー情報によって,特定のCSSを適応する手法です。

これらの手法を使う利点は,多くの画面サイズに個別に対応しなくても良くなる点です。同時にエミュレーターでの確認回数も減らすことができます。また,導入の手間としても制作フローを分割するだけで可能なため簡単です。結果的に,制作コストと運用コストの両方を減らすことができると言及されました。

詳しくは,こちらの講演資料を参照ください。

画像

スマートフォン用ページをデバッグする5つの方法

次に,本勉強会スタッフのkanasanさんから「スマートフォン用ページをデバッグする5つの方法」のショートセッションを発表していただきました。

JavaScriptのデバッグやレイアウトの微調整を行う場合,PC向けサイトであればFirefoxのFirebugやChromeのDeveloper Tools等の定番のデバッグツールを使って行うことができますが,スマートフォン向けサイトの場合そういうものがありませんでした。

そこで今回,スマートフォン向けサイト構築時に使える5つのデバッグツールが紹介されました。

この中でもweinreが特に素晴らしく,PC向けサイトのデバッグツールと遜色のないものであることが紹介されました。セッション中では,デモとあわせて紹介されています。とても素晴らしいツールですので,是非ご覧ください。

詳しくは,こちらの講演資料を参照ください。

Developing for TV:その3

最後に,Operaのダニエルさんから「Developing for TV:その3」のショートセッションを発表していただきました。今回で3回目のテレビ向けのWebサイト構築についてのセッションですが,今回のテーマはスペーシャルナビゲーションの動作についてです。

スペーシャルナビゲーションとは,テレビのリモコンについているD-Padで操作したときのフォーカス変移のことです。これは通常だとカーソルが次にどこに動くのかわからない場合があります。

この問題の解決方法として紹介されたのは,CSS3のプロパティであるnav-*プロパティの利用です。このプロパティを指定すると,そのコンテンツから次のコンテンツへのカーソルの移動先を指定できます。また,このプロパティはレイアウトに影響しないので,自由に指定できるとのことです。

使えるプロパティは以下のものになります。

  • nav-left
  • nav-right
  • nav-up
  • nav-down

デモに使われていたページはこちらです。Operaであれば,Shift+カーソルキーでスペーシャルナビゲーションを再現することができますので,是非試してみてください。

最後に

レポートに対する感想や,勉強会に対する希望・意見・取り上げて欲しいテーマなどありましたら,Twitter(@yutaro_i)までお気軽につぶやいていただければと思います。本勉強会は,毎月第3水曜日または第3木曜日に開催していますので,興味を持たれた方は是非参加ください。ただし,会場や講演者スケジュールの都合などにより,開催日程が前後することがあります。開催のアナウンスはhtml5-developers-jpで行われますので,こちらをご確認ください。なお,Events in HTML5-jpで開催状況や,過去のアーカイブなども公開しておりますので,是非ご活用いただければ幸いです。

次回の第20回本勉強会は,8月21日にGoogleさんとの共催で1日がかりのいつもより大規模に開催します。イベントのタイトルは,⁠Chrome+HTML5 Conference」です。通常のセッションだけでなくハンズオンも企画しています。近いうちにイベントへの参加方法や内容等の詳細をhtml5-developers.jpに公開予定ですので,上記のGoogleグループと合わせてご確認ください。

著者プロフィール

井原雄太郎(いはらゆうたろう)

現在(2011年6月),東京工科大学大学院田胡研究室所属の修士2年。最近,HTML5とか勉強会スタッフに仲間入り。

Twitter:@yutaro_i