携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-
XHTML+CSSで一歩進んだモバイルサイトを作るテクニックを幅広く紹介☆
このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
以前、このブログで携帯絵文字変換スクリプトを配布しましたが、
今回はその改良版です。今まで、こちらの携帯絵文字変換スクリプトを使用していた方で、
どうやっても動作しないよ!と悩んでいた方はこちらに変えてみてください。

改良点は以下の通り。

・もちろん3キャリア対応 (ただしドコモはiモードHTML4.0以上の機種に限る)
・PHPとSSI両方に対応
・安定動作のため、Unicode数値参照方式(&#x\\\\;)に変更
・PHPは4と5で動作
・PCで閲覧した場合にも絵文字が表示される
・ドコモの絵文字を基準とするのはそのまま

以前の携帯絵文字変換スクリプトはドコモの絵文字においてShift-JISの2バイトコードを
絵文字の変換テーブルに用いていたため、サーバー環境によっては文字化けが起きたり、
XHTMLとHTMLで動作が異なったりしていましたが、今回は全キャリアが対応している
Unicodeという数値参照方式を採用しているのため、絵文字の出力が安定的
(サーバーの環境に依存しにくい)です。

では、まず、サンプルから。

PHPで動作させる場合
SSIで動作させる場合

サンプルソースはこちらからダウンロードできます。

ファイル構成は以下の通り。[ ]はフォルダ。
------------------------------------
[public_html]
  ├[include]
     ├[emoji]
        ├[images]--***.gif (PC絵文字用の画像)
        └table.tsv (絵文字変換テーブル)
     ├commons.php (共通ファイル読み込み)
     ├emoji_trans.php (絵文字変換スクリプト)
     └user_agent_carrier.php (キャリア判別)
  ├.htaccess (SSIをHTMLで動作させるためのファイル)
  ├test_emoji.php (絵文字をPHPから読み出す場合のサンプルファイル)
  └test_emoji_ssi.html (絵文字をSSIから読み出す場合のサンプルファイル)
------------------------------------
※includeフォルダ以下の構成は変えない方が良いです。

では一つづつ解説していきます。

table.tsv (絵文字変換テーブル)
絵文字 (Unicode)の変換テーブルです。1~3列目でドコモ、au、ソフトバンクの順番。
各キャリア絵文字をUnicodeで入力する場合は「&#x\\\\;」となりますが、この「\\\\」の部分のみ
このファイルに書いてあります。なお、Unicodeで絵文字を入力する場合、
ドコモではiモードHTML4.0以上となっているので、これ以上の機種が対応となります。

commons.php (共通ファイル読み込み)
絵文字変換スクリプトに必要なファイルを読み込むためのファイルです。
includeフォルダ以下の構成を変えない限り特に変える部分はありません。

emoji_trans.php (絵文字変換スクリプト)
この部分が絵文字変換の肝となるスクリプトです。
以下の部分を必要に応じて変えます。

○12行目
//絵文字変換テーブル(相対パス)
$emoji_data = "/emoji/table.tsv";

絵文字変換テーブルの場所を指定します。このファイルからの相対パスで記述します。
通常はそのままでOK。

○15行目 (重要!)
//PC用絵文字格納フォルダ(トップディレクトリからの相対パス)
$emoji_img_dir = "/include/emoji/images/";

PC絵文字用のGIFファイルが格納されているフォルダの場所を、
トップディレクトリからの相対パスで指定します。その他の部分は、すべてそのファイルからの
相対パスですが、この部分はトップディレクトリからの相対パスにしてください。
つまり、[include]以下のフォルダの場所(階層)によってこの部分は書き換える必要があります。

○18行目 (重要!)

//動作モード(PHPから呼び出す場合は0、SSIなら1)
$mode = 0;

PHPから読み出す場合は「0」に、SSIから読み出す場合は「1」に設定します。
SSIで動作させる場合にこの部分が「0」のままだと正しく動作しません。

user_agent_carrier.php (キャリア判別)
携帯端末のキャリアを判定する関数。
ここも通常はこのまま。

.htaccess (SSIをHTMLで動作させるためのファイル)
HTMLでSSIを動作可能にするためのおまじないファイルです。
「AddHandler server-parsed html」とするのがミソ。(それ以外の部分は関係ありません)
HTMLと同じフォルダに設置します。ただし、htaccessが設置可能なサーバーに限ります。
また、SSIで動作させない場合はこのファイルは必要ありません。

test_emoji.php (絵文字をPHPから読み出す場合のサンプルファイル)
まず、上の共通ファイルである「commons.php」をincludeする文を冒頭で指定。
相対パスで指定すればOKです。

あとは、絵文字番号を以下のように指定して、絵文字を表示させたい部分に書けばOK。

<?php emoji('1');?>

絵文字番号表はこちらに掲載しています。

test_emoji_ssi.html (絵文字をSSIから読み出す場合のサンプルファイル)

こちらも絵文字番号を指定するだけでOK。
<!--#include virtual="/include/emoji_trans.php?emoji=1"-->

SSIから読み出す場合は、ちょっと気をつける点があります。
まず、「virtual」でSSIは読み出さないと、「?」以下の「emoji」という引数が渡されないため、
このようにします。「exec」では引数が渡されないためNG。
従って、SSIの読み出しで「virtual」が不可となっているサーバーでは使用できないので注意してください。

また、パスはトップディレクトリからの相対パスで「emoji_trans.php」がある場所を指定します。
絵文字番号はPHPから読み出す場合と同じです。

以上です。
スポンサーサイト


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
最近では携帯サイトはXHTMLで作るようになってきていますが、
そこで指定すべきコンテンツMIMEタイプはどのようにしなければならないか。

これはこのブログや書籍をご購入いただいた方はすでにご存じかと思いますが、
ドコモの仕様に合わせて「application/xhtml+xml」を指定するということでした。

再度説明するとドコモがXHTMLモードになる条件は

①サーバーが出力するHTTPヘッダーを「application/xhtml+xml」とする。
②metaタグの「content」を「application/xhtml+xml」とする。


ことでした。しかし、この方法では、

1. 古い機種によってはエラーになってしまう可能性があること。
2. auやソフトバンクはMIMEタイプを「text/html」としてもXHTMLで動作すること。
3. 「application/xhtml+xml」としなければならないのはドコモのFOMAだけであるということ。


を鑑みると、仕様上「must」でなければならないFOMAを除いては「text/html」でもよい。
という考えもありかと思っています。
そこで、ドコモのFOMAのみ「application/xhtml+xml」を出力するPHPで動作する
プログラムを作ってみました。

USER AGENT DOCOMO SWITCH FUNCTION (user_agent_docomo.php)
まず、ドコモ端末においてmovaとFOMAを判断するプログラムを関数化しました。
以下がソースコード。
ユーザエージェントはmovaが「DoCoMo/1.0…」、FOMAが「DoCoMo/2.0…」です。
user_agent_docomo( )関数にユーザエージェントを投げると、
「foma」 or 「mova」という文字列を返します。
このあたりはPEARライブラリのNet_UserAgent_Mobileを使ってもよいでしょう。

<?php

//┌─────────────────────────────────
//│ [ USER AGENT DOCOMO SWITCH FUNCTION Ver1.0]
//│ user_agent_docomo.php - 2009/01/27
//│ Copyright (C) DSPT.NET
//│ http://www.dspt.net/
//└─────────────────────────────────

//携帯端末のユーザエージェントを判定(ドコモのみmovaとFOMAの判別あり)
function user_agent_docomo($data){
if(preg_match("/^DoCoMo\/1\.0/i", $data))
{
return "mova"; // mova
}
if(preg_match("/^DoCoMo\/2\.0/i", $data))
{
return "foma"; // FOMA
}
else {
return "unknown"; // unknown
}
}

?>



CONTENTS MIME TYPE SWITCH FUNCTION (mime_type.php)
この結果を受け取り、ドコモのFOMAのみ「application/xhtml+xml」の
コンテンツMIMEタイプを返すプログラムの関数は以下。
以下で指定するmime_type( )関数において、fomaが投げられた場合、
「application/xhtml+xml」という文字列を返します。

<?php

//┌─────────────────────────────────
//│ [ CONTENTS MIME TYPE SWITCH FUNCTION Ver1.0]
//│ mime_type.php - 2009/01/27
//│ Copyright (C) DSPT.NET
//│ http://www.dspt.net/
//└─────────────────────────────────

//ドコモのFOMAのみ適切なコンテンツMIMEタイプを出力する
function mime_type($data) {
if($data == 'foma') {
return "application/xhtml+xml";
}
else {
return "text/html";
}
}

?>


以上で必要なプログラムはおしまい。
あとはこのファイルをインクルードして、以下のようなサンプルPHPとして動作させれば、
適正なコンテンツMIMEが指定されたHTMLとなります。

テストプログラム (test_mime_type.php) テストURL

<?php
include ('include/user_agent_docomo.php'); // USER AGENT DOCOMO SWITCH
include ('include/mime_type.php'); // MIME TYPE

include ('include/cache_control.php'); // CACHE CONTROL

//携帯UA取得
$agent = user_agent_docomo($_SERVER["HTTP_USER_AGENT"]);

//HTTPヘッダー
header("Content-Type: ".mime_type($agent));
echo "<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="<?php echo mime_type($agent);?>; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<?php echo cache_control('on','xhtml');?>
<meta name="description" content=" " />
<meta name="keywords" content=" " />
<meta name="robots" content="index,follow" />
<title>MIME TYPE</title>
</head>
<body>

<!--WRAPPER-->
<div style="font-size:x-small;">

UA : <?php echo $_SERVER["HTTP_USER_AGENT"];?><br />
Content-Type: <?php echo mime_type($agent);?><br />

</div>
<!--WRAPPER END-->

</body>
</html>


$_SERVER["HTTP_USER_AGENTにより携帯端末からユーザエージェントを抜き取り、
先ほど2つの関数が書かれたファイルをインクルードします。
あとはHTTPヘッダーとmetaタグのコンテンツMIMEタイプを指定する部分に、
mime_type関数より適正なMIMEタイプを出力します。


CACHE CONTROL SWITCH FUNCTION (cache_control.php)
ちなみに、「cache_control」という関数は、キャッシュコントロールを制御するための
metaタグを適正に出力するというものでおまけ。「include」で読んでいる「cache_control.php」は
以下のようなソースコードになっています。
キャッシュOFFとONの切り替えができるのと、HTMLとXHTMLのmetaタグの切り替え機能がついています。
cache_control('on','xhtml')とすると、キャッシュオフのmetaタグを出力するとともに、
XHTML用のmetaタグを出力します。cache_control('on','html')とすれば、HTML用のmeta
タグを出力します。cache_control('off','***')とすれば、
キャッシュオフのmetaタグを出力しないというよりmetaタグそのものを出力しません。

<?php

//┌─────────────────────────────────
//│ [ CACHE CONTROL SWITCH FUNCTION Ver1.0]
//│ cache_control.php - 2009/01/27
//│ Copyright (C) DSPT.NET
//│ http://www.dspt.net/
//└─────────────────────────────────

//キャッシュコントロール制御
function cache_control($data,$html) {
$meta_line1 = "<meta http-equiv=\"pragma\" content=\"no-cache\"";
$meta_line2 = "<meta http-equiv=\"cache-control\" content=\"no-cache\"";
$meta_line3 = "<meta http-equiv=\"expires\" content=\"-1\"";
if($data == 'on') {
if ($html == 'xhtml') {
$out = $meta_line1." />\n".$meta_line2." />\n".$meta_line3." />\n";
}
else {
$out = $meta_line1.">\n".$meta_line2.">\n".$meta_line3.">\n";
}
return $out;
}
else {
return "";
}
}

?>



なお、ソースコードを保存するのが面倒という方は、
こちらからダウンロードできますので。





Copyright © 携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-. all rights reserved.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。