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

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

Lecutures on PHP

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

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

3.実際にプログラムを作成してみよう

いろいろ注意する点がありますが、実際に動くページを作成してみましょう。

maru

今回作成する機能は次の2点です。

  • 出力するhtmlの文字コードの変換(docomo,auはShift-JIS、SoftBankはUTF-8)
  • docomo用のHTTPヘッダ「Content-Type: application/xhtml+xml」の送出

ディレクトリ構成は仮に以下のような構成を想定しています。

  • lib/

    init.php

  • www/

    index.php

 

wwwディレクトリが Apacheのドキュメントルートです。
PEARライブラリのNet_UserAgent_Mobileがインストールされている前提ですので、インストールがされていない場合には、第2回を参考に準備をしてください。

lib/init.php

<?php
// Net_UserAgent_Mobile読み込み
require_once 'Net/UserAgent/Mobile.php';
$userAgent = Net_UserAgent_Mobile::singleton();
 
// キャリアごとの設定
if ($userAgent->isDoCoMo()) {
   $charset = 'Shift_JIS';
   // docomoでCSSを効かせるための設定
   header('Content-Type: application/xhtml+xml; charset=Shift_JIS');
} elseif ($userAgent->isEZweb()) {
   $charset = 'Shift_JIS';
} elseif ($userAgent->isSoftBank()) {
   $charset = 'UTF-8';
} else {
   $charset = 'UTF-8';
}
 
// 出力するhtmlの文字コードの設定
ini_set('default_charset', $charset);
mb_http_output('pass'); // 出力時の変換をoffにします
if ($charset == 'Shift_JIS') {
   ob_start('ob_convert_sjis');
}
function ob_convert_sjis($buf) {
   $buf = mb_convert_encoding($buf, 'SJIS-win', 'UTF-8');
   return $buf;
}

www/index.php

<?php
// lib/init.phpを読み込み
require_once dirname(__FILE__).'/../lib/init.php';
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $charset ?>" />
<title>株式会社 Example</title>
</head>
<body>
 
<div style="text-align:center;color:#005599;font-size:x-large;">
<br />
株式会社 Example<br />
<br />
</div>
 
<div style="background-color:#0099AA;">
<span style="color:#FFFFFF;">最新情報</span>
</div>
<div style="font-size:x-small;">
2011-01-20<br />
 サイトリニューアルしました!<br />
<div style="text-align:right;">
<a href="news.php">もっと見る</a>
</div>
</div>
 
<hr />
<div style="font-size:x-small;">
・<a href="service.php">サービス一覧</a><br />
・<a href="about.php">会社概要</a><br />
・<a href="access.php">アクセス</a><br />
・<a href="mailto:mail@example.jp">お問い合わせ</a><br />
</div>
 
<hr />
<div style="text-align:center;font-size:x-small;">
&copy;2011 Example, Inc.
</div>
 
</body>
</html>

ファイルを保存する文字コードは、UTF-8で作成をしてください。
metaタグのContent-Type指定のcharsetは、キャリアにより可変しますので、そこだけ動的に変更を加えますが、それ以外は静的なhtmlになります。

  • iモードシミュレータ

    iモードシミュレータ
  • docomo N06A (iモードブラウザ2.0)

    docomo N06A (iモードブラウザ2.0)

    metaタグ内のtitileタグの内容が画面上に表示されます

  • docomo P905i

    docomo P905i
  • au SH001

    au SH001

    「&copy;」が、auではただの「c」とだけ表示されます

  • SoftBank 932SH

    SoftBank  932SH

まとめ

  1. htmlやphpは、UTF-8で作る
  2. 使うhtmlタグはdocomoの仕様に合わせる
  3. CSSはインラインでの記述しか使えない
  4. docomoでCSSを有効にするにはHTTPのヘッダが必要
maru

今回では1ページしか作成していませんが、実際には何ページも作成することになると思います。
キャリアの違いは出来るだけ共通プログラム内で吸収し、個別のページでは、差異をあまり意識する必要が無いように環境を整えることが、携帯サイト作成を攻略する近道になると思います。

次回もお楽しみに。

  • まる先生

本名:丸田友之 株式会社ファクトリアル所属

2004年に株式会社ファクトリアルに入社後、公式サイトやキャンペーン、SNS、ECなど様々なタイプのシステム構築を手がける。

モバイルサイト構築に伴うさまざまなノウハウをライブラリやフレームワークで吸収し、エンジニアやデザイナーがより本質的なところで力が発揮できるよう日々尽力している。また、ITベンチャーながら新卒を積極的に採用し教育にも力を入れている。そのため教え方には並々ならぬポリシーを持っている。

サイトURL:http://maru.cc/

ご意見・感想フォーム

今回の「まる先生のモバイル開発講座 入門・実践編」への評価・ご意見があればご記入下さい。

評価:
ご意見・感想:



Pick Up Q&A

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

>>続きを読む

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

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