「Coding Methodology」 第19回 JavaScriptでマルチデバイスコーディング

HTML コーディング業界No.1 の実績を誇る「CODING FACTORY」がお届けする今すぐ役立つ実践的コーディングノウハウ

CODING FACTORYです。昨年6月から月1回のペースでお届けしている「CodingMethodology」は、45,589ページのHTMLコーディング案件を納品した中から生み出された、今すぐ役立つ実践的コーディングノウハウです。ちょっとした工夫や発想の転換など、コーディングの手法やスムーズに進めるコツを紹介します。

近年、スマートフォンの台頭によりユーザが使うデバイスは多種多様になってきました。それゆえウインドウサイズがまちまちになっています。
そこで今回はOS(デバイス)によってCSSを切り替え、レイアウトを変更するテクニックの一つをご紹介します。

マルチデバイスコーディングとは？
マルチデバイスコーディングとは、1つのHTMLファイルで複数のデバイスに対応するコーディング技術です。
PCサイト用とスマートフォンサイト用を別々に作成する必要がなく、また更新性にも優れています。

レイアウトごとのCSSを用意する
今回のサンプルでは、3カラム(クラス名"col3")と1カラム(クラス名"col1")の2パターンのCSSをあらかじめ用意しました。
デバイス(スマートフォンなのか、PCなのか)を判別して、そのデバイスに適したcssを付与する手法をご紹介します。
この手法を用いて、予め2カラムのcssを用意し、タブレット機の場合は2カラムのcssを付与する・・・などの構成も実現可能となります。


このようにデバイスを判別する手法のほか、見ている画面(ブラウザ)のサイズを取得し、そのサイズによってレイアウトを切り替えるという手法もあります。

例：見ている画面が320px以下なら1カラム、320px以上なら3カラムのcssを読みこませる。

コード解説
*1　デバイスが縦向きの場合にbodyにclass="portrait"を加える。
*2　デバイスが横向きの場合にbodyにclass="landscape"を加える。
*3　デバイスがiPhoneの場合にbodyにclass="col1"(1カラム用クラス)を加える。
*4　デバイスがAndroidの場合にbodyにclass="col1"(1カラム用クラス)を加える。
*5　その他のデバイス(PC,タブレット等)の場合にbodyに"class=col3"(3カラム用クラス)を加える。

この手法は多くのデバイスがリリースされている昨今、より少ないソースでデバイスごとの最適化をはかる一つのアプローチになると考えていますv。