このエントリーをはてなブックマークに追加

Memo

1ファイルを3メディアでそれなりに見れる方法を考えてみた

2011/04/01
Memo

1ファイルを3メディアでそれなりに見れる方法を考えてみた

先日のTwitterのTLはなぜか血液型の話題(主にO型さん)でいっぱいでした。ちなみに私は面倒臭がりのA型です。
面倒くさがりなので、楽な方法を常に模索しています。

そんな話はさておき、世の中のメディア(Webページを閲覧出来る端末)をざっくり分けると、PC/タブレットPC/モバイル(ケータイ&スマホ)の3メディアが今のところあるようです。
それぞれのページに合わせて、HTMLファイルを用意したりするのは面倒。振り分けのためのCGIを設置するのも面倒。

CSSとJavaScript貼付けるだけでそれなりに見栄えがよく出来るような、そんなテンプレートがあったら便利かもしれない!という思いつきでちょっと作ってみました。

想定した設定

以下の3点をメインに考えました。

  • HTMLファイルは1つだけ
  • PC、タブレットPC、モバイル(ケータイ&スマホ)で閲覧できる
  • CGI(PHP、Perlなど)は使わず、CSSとJavaScriptのみで

画像にすると、こんなイメージ

出来上がったもの

サンプルページはこちら

よければ手持ちの携帯などでも確認してみてください。
ソースなどをじっくり見てみたい、という方は、以下からダウンロード可能です。

1to3ページデータ

試行錯誤の様子

詳しいソースについては、サンプルページや、zipデータをご覧ください。
今回作る上で色々と考えた事、調べた事をメモしておきます。

文字コードは”UTF-8”

最初、ケータイでも閲覧出来るように作るのだから、Shift-JISで作っていました。
しかし、今後何かしら拡張していくことを考えると「UTF-8」で作成した方が良いような気がしたので調べてみたら、新しいケータイではUTF-8も表示出来るよう。ただ、auの一部機種(古い機種?)では表示出来ない様子。とりあえず今回は新しめの携帯向けと考えて、UTF-8とします。

ケータイとそれ以外の判別、切り替えについて

最初考えた時、携帯はJavaScript認識出来ないし、PC/スマホ向けのCSSをJavaScriptで記述すれば良いのでは?と思っていたんですが、「携帯電話ではJavaScriptが使えない」という時代は終わっていました。この辺を参照

携帯の機種または設定によってはJavaScriptを読み込んでしまうので、その辺りも注意しなければいけません。調べて良かったー。
また、ケータイの判別については、

if(UA.match(/DoCoMo/i) ||
UA.match(/Vodafone/i) || UA.match(/MOT\-[CV]980/i) || UA.match(/SoftBank/i) ||
UA.match(/KDDI\-/i) || UA.match(/UP\.Browser/i) ||
UA.match(/^PDXGW/i) || UA.match(/DDIPOCKET/i) || UA.match(/WILLCOM/i)){}

としています。
以上を考慮し、今回は

ケータイ向けCSSをHTMLにセット
→ケータイならそのままケータイ用CSSを表示
→ブラウザの幅が小さめならiPhone向けCSSに置き換え
→もうちょい大きかったらiPad向けCSSに置き換え
→それ以外はDesktop用CSSに置き換え

としました。
ブラウザの幅で判別をしたのは、iPhoneやAndroid携帯ではブラウザの種類もサイズも豊富すぎるためです。
幅の切り替えについては、Adobeのhttp://adobe-html5.jp/のものを参考に、

  • 〜340pxはiPhone用CSS
  • 341〜910pxはiPad用CSS
  • 911px〜はDesktop用CSS

という感じで切り替えています。

JavaScript実行のタイミング

最初は、onloadを使って実行していましたが、デフォルトのCSSがケータイ用CSSのため、一瞬だけケータイ用の表示になってからCSSが切り替わっていました。
それはちょっと気持ち悪いので、HTMLを全てロードする前に実行する、jQueryの$(document).readyみたいなことができないかな、と思いまして、探してみたらありました。

jQueryの$(document).readyをjQuery非依存にする。 – 文殊堂

このready機能のためだけに、jQueryを追加するのも嫌だったので、ホントちょうどばっちりでした!

CSSとデザインについて

ケータイ用は可能な限り画像を使わず、その他ではCSS3を使ったりしています。
なので、基本的なデザインは同じですが、IEだと若干残念だったりします。
また、ブラウザの画面サイズがかなり豊富なので、リキッドデザインで組んでいます。

画像について

「ケータイ用ページは画像を可能な限り少なく!」と言われていますが、それは古いケータイでのお話。JavaScriptやCSSが読み込めるレベルのケータイでは、それなりの容量の画像を読み込めるようです。

  • Docomo:HTMLや画像などの他形式のファイルを全て含めて500KB
  • SoftBank:画像などのオブジェクトサイズを300KB
  • au (KDDI):不明(XHTMLファイルの上限は9KBとあるが、画像データは含めないとのこと。制限無し?)

上記の点から、画像関係はひとまずそのまま表示、としています。

できたわけですが

構築がなかなか面倒です。
Dreamweaverのデザインビューだと携帯でのデザインになってしまいますのでライブビュー(CS4以上?)で表示させながら構築する必要があります。
DWのない人はJSをプレビューできるエディタ(Codaなど)を使うか、実際のブラウザで確認しながら作る、という感じでしょうか。

また、最初はCGIなどが分からない人向けに、と考えていたんですが、これはケータイやPCでの構築をある程度分かっていないと難しいんじゃないだろうか…。

つまり、出来たは良いけど使い道が思いつきません!

はい。

最後に

昔、携帯ではどうやったら見やすいページが簡単に作れるのだろうと考え、JavaScriptでPCと携帯で表示を変える方法を研究したりしていたことがあります。
久々にケータイ関係のことを調べてみたら、かなり進化していてびっくりしました。

時代はスマートフォンとか、タブレットPCとかだったりしますが、ケータイ(今はフィーチャーフォンていうんでしょうか?)はやっぱりまだまだ使っている人多いし、対応できる知識はやっぱり持っておいた方がよいのではないでしょうか。

参考サイト

ケータイサイトはなかなか奥が深いですね。技術もだけどそこに集まるコミュニティも興味深いです。 @・ェ・@

Category : MemoTags : , ,

関連記事

コメントを残す




About

中の人:Mei Koutsuki (@mei331)
神奈川でweb作ったり、お洋服つくったりしてる黒いひつじさん。ロリィタ系webクリエイター。12年9月に一児の母となり、自宅で子育てしながらお仕事してます。
>> もっと詳しく