第3回 使えるhtmlタグは? ちょっと変わったdocomoでCSSを効かせるコツ - モバイル開発講座 入門・実践編

まる先生のモバイル開発講座 入門・実践編

Lecutures on PHP

第3回 使えるhtmlタグは? ちょっと変わったdocomoでCSSを効かせるコツ (その1)

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

 

これから数回に分けて、3キャリア対応の企業の携帯サイトを作成する際のポイントを解説していきます。
今回は、携帯サイトを作成し始める前に押さえるべきポイントと、html、CSSについて取り上げます。

今回のテーマはこちらになります。

  1. 携帯サイトを作成する前に決めること
  2. xhtmlやCSSの書き方は?
  3. 実際にプログラムを作成してみよう

それでは、早速始めてみましょう。

1.携帯サイトを作成する前に決めること

(1) 携帯サイトを設置するサーバやURLを決める

これは携帯サイトに限った話ではないのですが、設置するサーバを決める必要があります。すでにPCサイトがあり、そこに同居させるのか、新しく用意をするのか。

また、URLについては、PCサイトがすでにある場合には、同一のURLではなく、別にした方がよいでしょう。

maru

よくある手法としては、ディレクトリを新しく作成する(http://example.jp/m/)か、サブドメインを別にする(http://m.example.jp/)方法などがあります。

PCサイトのサーバと同居させるのであれば、ディレクトリを分けるだけで問題ありません。別サーバにする必要があるのであれば、サブドメインにする必要があります。

(2) 作成する携帯サイトの対応機種の範囲を決める

次に、作成するモバイルサイトで対応する携帯機種の範囲を決めましょう。

より広い範囲に対応する方が理想かもしれませんが、古い端末ほど制限が大きかったり、たとえば画面サイズが小さいなどの制約も増えてしまいます。また、確認をするのも難しくなってしまいます。

  • docomo

    movaについては、すでにシェアもわずかになっていますし、2012年にサービス終了が予定されているので対応範囲外で問題ないでしょう。
    一部タグが新しい端末でしか使えない場合もありますが、FOMA900,700シリーズ以降の対応で問題ありません。
    使えないタグの例としては、tableタグなどがあります。
    tableタグを使用する場合には、FOMA902、FOMA702(一部端末除く)シリーズ以降になります。

  • au

    auは、比較的世代での差異が少ないのと、周波数再編といったキャリア側の都合で古い端末の新規登録が終了しているため、Wシリーズ以降を目処にすれば問題ありません。

  • SoftBank

    SoftBankも2G世代はすでに停波しているため、3G世代の対応で問題ないでしょう。
    ただし、Vodafone時代の海外製の端末では一部htmlの細かい使用が異なるものもあります。

これらの要素以外に、Flashを使用したり、アプリやデコメ等の携帯特有のサービスを提供する場合には、そちらの制限範囲に絞られることになるでしょう。

(3) htmlやphpの文字コードを決める
maru

携帯サイトの場合、文字コードを意識しなければいけない場面がたびたび登場します。
文字化けが発生したときに混乱しないために、最初にはっきりと定義し、意識するようにしておくといいでしょう。

静的サイトでSSL領域が無いサイトであれば、phpファイルも、携帯端末に返す出力の文字コードも UTF-8 に統一で問題ありません。

phpの文字コードは、よほど、旧システムの都合といった特殊な用件がある場合をのぞき、phpファイルやデータベースに格納する文字コードもUTF-8に統一しておくのがよいでしょう。

携帯端末に返すhtmlの文字コードは、いくつか考えなければならない点があります。

  • 3キャリア UTF-8 に統一した場合

    docomo、SoftBankは問題ありません。
    auは、非SSL領域であれば問題ありませんが、SSL領域があるのであれば、Shift-JISにする必要があります。
    また、フォームからデータをPOSTした場合に、auは、UTF-8のページであっても、Shift-JISで送ってきます。

  • 3キャリア Shift-JIS に統一した場合

    docomo、auは問題ありません。
    SoftBankも、フォームから絵文字を含む文字列を受け取らなければ問題ありません。
    例えば、コメントフォームで、絵文字も許可する場合には、SoftBankの一部端末で絵文字が抜け落ちてしまいます。

  • 理想型

    docomo、au = Shift-JIS
    SoftBank = UTF-8
    docomoは、UTF-8でも問題ないのですが、mova端末は UTF-8 が表示できない端末があります。movaは非対応とするとはいえ、見えるのであれば差し支えがないということであれば、Shift-JISにしておいた方がいいでしょう。

(4) CSSを使うかどうかを決める
maru

実際に作成するhtmlについては、docomoの制限上、htmlで作成するか、xhtml+cssで作成するかを最初に決めなければなりません。
auとSoftBankは、docomoに比べて制約がゆるいので、docomoに合わせて作成することで、3キャリアに表示させることができます。
CSSでなければ、実現出来ない表現もあるので、新たに作成するのであれば、xhtml+CSSで記述するのがよいでしょう。

具体的には、以下のようなCSSを使わない書き方と、使う書き方が、iモードブラウザ2.0より前のdocomo端末では混在して記述することができません。

  • CSSを使う(xhtml+CSS)
    <span style="color:red;">文字色</span>
    <div style="text-align:center;">中寄せ</div>
  • CSSを使わない(HTML)
    <font color="red">文字色</font>
    <div align="center">中寄せ</div>

 

なぜ、CSSを使うかどうかが重要かというと、docomoでは、HTTPのヘッダのContent-Typeを別のものを送出する必要があるためです。

  • CSSを使う
    Content-Type: application/xhtml+xml
  • CSSを使わない(使えない)
    Content-Type: text/html

 

簡単なphpファイルを作成して確認してみましょう。

<?php
mb_http_output('pass');
// docomo用のHTTPヘッダ
header('Content-Type: application/xhtml+xml; charset=UTF-8');
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sample</title>
</head>
<body>
 
CSSを使う(xhtml+CSS)<br />
<span style="color:red;">文字色</span><br />
<div style="text-align:center;">中寄せ</div>
<br />
 
CSSを使わない(HTML)<br />
<font color="red">文字色</font><br />
<div align="center">中寄せ</div>
<br />
 
</body>
</html>

 

  • docomo用のHTTPヘッダを送った場合

    CSSで記述した「文字色」と「中寄せ」は有効ですが、fontタグやalign属性の指定は無効になってしまいます。

    docomo用のHTTPヘッダを送った場合
  • docomo用のHTTPヘッダを送らなかった場合

    4行目のheader関数を消した場合には次のようになります。CSSで記述した「文字色」と「中寄せ」が無効になり、逆にfontタグやalign属性の指定が有効になっています。

    docomo用のHTTPヘッダを送らなかった場合

iモードシミュレータであれば、CSSの効き方を確認することができます。



Pick Up Q&A

Q
ログファイルの中の空のデータ行を削除したい
 このエントリーをはてなブックマークに追加 
A
ログのデータ個数(列数)が固定で、空のログが"<><><>"だと既知であれば if ($line === "<><><>") { continue; } で読み飛ばしてもいいのでは? ...

>>続きを読む

まずは配列や文字列の扱いから、じっくり勉強して行きましょう。

▲解説者:岡本(アシアル株式会社 教育コーディネーター兼 システムエンジニア)