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


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
2008年11月25日追記
下記の情報は古くなっています。

最新のスクリプトは以下で配布しています。
http://www.dspt.net/tools/emoji/

3キャリア対応サイトを作成するために、ネックなのは絵文字の互換性。

ドコモの絵文字で入力したページを作成して、他のキャリアの携帯で見ると、auはサーバー側で自動変換されますが、ソフトバンクは対応していないので表示されません。

そこで、キャリアに合わせてドコモ&auとソフトバンクという2ページでページを作るのは面倒だし、
3キャリア別々に作成してもいちいち同じ絵文字を探して入力するのは少々面倒です。

そこで、絵文字を自動変換してくれるスクリプトが登場するわけですが、
僕が探したところフリーってのはなかなかないみたいです。

ということで作ってみました。

絵文字を変換するにあたって、まず考えなくてはならないのは、
絵文字の相互変換表を作ること。

そもそも、キャリアによって用意している絵文字数にはかなり開きがあります。auやソフトバンクに比べて、ドコモは拡張絵文字も含めても230個くらいしかないので、相互変換表を作るにしても、数が合わない以上すべての絵文字を同期させることは不可能です。

したがって、自然な流れとしては一番数の少ないドコモの絵文字に他社を合わせる方法をとるのがふつう。ドコモの絵文字を主体に考えるので、ドコモの絵文字を基準に他社の絵文字はそれと似たものが表示されるような設計にします。

ドコモを基準に考えているので、表示できる絵文字数は少ないのが欠点ですが、スクリプトで自動変換する仕組みはあってこしたことはないので、絵文字変換表を作ることにしました。

これを自分で作るのは面倒なのですが、運良くウノウラボさんでEメール用に絵文字の相互変換リストを公開されていたので、ありがたくダウンロードさせていただいて、自作のプログラムで使いやすいようにカスタマイズしてCSVに変換。

ある程度は変換できない絵文字がゲタ「〓」にならないようにしましたが、それでもまだ残っているので、この辺は自分の好きなように変えてもよいかと思います。

絵文字変換表(emoji.csv)ドコモ→他社

これをもとにPHPで以下のようなプログラムを作成。

PHP絵文字変換スクリプト(sample.txt)

<?php

//絵文字変換表
$emoji_data = "emoji.csv";

//入力値取得
$num = $_GET["emoji"];

//ファイルオープン
$file =fopen($emoji_data, "r");
//変換表を配列に格納
for ($i = 1; $i <= 300; $i++) {
if (feof($file)) {
break;
}
$emoji_array[$i] = fgetcsv($file, 1000, ",");
}
//ファイルクローズ
fclose($file);

function encode($data) {
$data = mb_convert_encoding($data, "SJIS", "auto");
return $data;
}

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

//携帯端末のユーザエージェントを判定
function mobile($data){
if(preg_match("/^DoCoMo\/[12]\.0/i", $data))
{
return "i";// i-mode
}
elseif(preg_match("/^(J\-PHONE|Vodafone|MOT\-[CV]980|SoftBank)\//i", $data))
{
return "s";// softbank
}
elseif(preg_match("/^KDDI\-/i", $data) || preg_match("/UP\.Browser/i", $data))
{
return "e";// ezweb
}
elseif(preg_match("/^PDXGW/i", $data) || preg_match("/(DDIPOCKET|WILLCOM);/i", $data))
{
return "w";// willcom
}
elseif(preg_match("/^L\-mode/i", $data))
{
return "l";// l-mode
}
else {
return "p";// pc
}
}

//携帯キャリアに合わせて絵文字を出力
function emoji($data) {
global $agent,$emoji_array;
if(preg_match("/[0-9]{1,3}/", $data) && is_numeric($data) && 0 < $data && $data < 253) {
switch(mobile($agent)){
case "i";
$put = $emoji_array[$data][1];
break;
case "e";
if (preg_match("/[^0-9]/", $emoji_array[$data][2])) {
$put = $emoji_array[$data][2];
} else {
$put = "<img localsrc=\"".$emoji_array[$data][2]."\" />";
}
break;
case "s";
if (preg_match("/^[A-Z]{1}?/", $emoji_array[$data][3])) {
$put = "\x1B\$".$emoji_array[$data][3]."\x0F";
} else {
$put = $emoji_array[$data][3];
}
break;
case "p";
$put = "[PCでは絵文字は表示されません]";
break;
}
echo $put;
}
else {
echo "[Error!]\n";
}
}

//処理
emoji($num);

?>



使用される場合は、trans.phpなどの名前で保存し、お使いください。携帯端末の判別は携帯電話(機器)情報サイトさんで公開されている携帯端末のユーザエージェント振り分けを参考にしました。

先ほどの絵文字変換表を元にドコモの絵文字を基準に、各キャリアに合わせたフォーマットで絵文字が出力されるようにしています。予期しない入力値は[Error!]を表示します。

携帯サイト用に使うので、あまりセキュリティは考えていない点はご愛敬とさせてください。
要望があれば直そうかな。

で、このPHPスクリプトをどのように呼び出すかということなのですが、
手っ取り早い方法は携帯サイト全体をすべてPHPで運用する方法。

でもこれだと結構いやがる人が多いし、PHPってだけでちんぷんかんぷんになっちゃう人もいるし(ちょっと前の僕がそうです。)、変えたくない一番の理由は、やっぱり今までのHTMLをPHPに変えるのが面倒だから。

ということで、今までのHTMLのまま、そこからこのスクリプトを呼び出すには、
SSIをHTML内に書いてスクリプトを呼び出す方法が最も簡単。

以下のようなSSIを絵文字を表示したい部分に書けばOKです。もちろん、HTMLでSSIを動かすには、.htaccessなどで拡張子htmlでSSIが動くように設定を有効にしておく必要があります。

<!--#include virtual="/php/trans.php?emoji=絵文字番号"-->

(execでの実行形式だと引数を渡せずエラーになります。また、virtualのディレクトリパスに注意。virtualはトップディレクトリからの相対パスで記述します。)


絵文字番号ってところはドコモを基準にしているので、
こちらの表を参考に、書けば良いです。例えば、一番最初の「晴れ」なら、

<!--#include virtual="/php/trans.php?emoji=1"-->

です。

拡張絵文字の番号は、
基本絵文字の最後の番号から続けての連番になります。

ちなみに、自分の携帯はauなので、ドコモやソフトバンクはちょっと未確認。
特にソフトバンクが心配。テスト要員募集です(笑)。

http://www.dspt.net/data/emoji/test.html

こちらに携帯でアクセスしていただいて、ゴルフの絵文字が表示されたらOKでございます。
バグ等あればご指摘くださいませ。

8月31日
ドコモで絵文字が表示されない問題に対応しました。
emoji.csv、sample.txtが変更されています。
スポンサーサイト


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
携帯サイトを作るときに、こんなツールがあれば絶対いいのに。

そういうふうに思っている人って結構いるはず。
みなさんどんなものが欲しいのかなぁ…。

というのも最近は、PHPプログラミングにはまっていて、
携帯サイト作成の補助ツールをWEBで公開できたらいいなと思っとるのです。そろそろ携帯サイト構築ネタも尽きてきてしまったので…すみません。

ということで前回このブログで一つ作成したツールを紹介したのですが…
それほどの反響は……泣

あまりのマニアックさで需要のないものを作っても意味がないと思うので、悩み中。
ということでアンケート。

もし、このブログを見ていただいている方、通りすがりの方も結構なので、アンケートに答えてくださる方は、具体的にこんなのがあればいいなってのをコメントをいただけるとうれしいです。

例えば、絵文字変換スクリプトとか、絵文字入力ツール、携帯対応掲示板とか??かな。でもこれは、すでに作っておられる方がいるので今更という感じもします。
独創的かつ汎用的なコメントをお待ちしてます。


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
こんにちは。久しぶりの更新です。

以前、このブログで書いた、

携帯サイトでのユーザのターゲッティングと運営。第2回 「PCからの閲覧制限」

で、携帯サイトを運営する上で、PCからの閲覧を制限するための方法と、
注意点についてふれました。

この記事を簡単におさらいすると、サーバーに「.htaccess」というファイルをおくと、PCからの閲覧を制限(携帯端末からのアクセスのみ許可)することができるということだったんですが、

このファイルの書き方が分からないという方も何名かいらっしゃたので、このhtaccessを簡単に生成できるツールを本家のサイトで公開しましたので、よかったら使ってみてください。






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

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