携帯サイトをつくろう。

今回は３キャリア対応絵文字の表示方法について説明します。

→参照：「ケータイFlashで絵文字を表示するには（Softbank編）」
→参照：「ケータイFlashで絵文字を表示するには（au編）」
→参照：「ケータイFlashで絵文字を表示するには（DoCoMo編）」
→参照：「ケータイFlashで絵文字をカラーで表示するには（DoCoMo編）」
　
今回のサンプルでは絵文字データを動的に埋め込むためにswfmillを使用しています。
swfmillについては下記ご参照下さい。
→参照：「swfmillでケータイFlashを動的生成してみよう（インストール編）」
　
ケータイキャリアの判別については下記ご参照下さい。
→参照：「ケータイのユーザーエージェント」
　
　

実行例

実行例はこちらからご確認下さい。
絵文字を含んだ文章を静止テキスト・ダイナミックテキスト・テキスト入力に埋め込んで表示します。
全絵文字一覧もテキスト入力で出力しています。

→URLをメールで送る

http://ookura.tanikaze.com/Sample/post3639/

画面イメージ

DoCoMo	au
Softbank

３キャリア対応絵文字について

ケータイの絵文字はキャリアによって使用できる絵文字に違いがあります。
本サンプルではPCから絵文字を設定してケータイFlashで表示する用途に絞って考えますので、
３キャリア全てで表示可能な絵文字のみ扱います。
　
　

絵文字変換リストの用意

３キャリア全てで表示可能な絵文字のリストを用意します。
　
一番種類の少ないDoCoMoを基準にしたリストを使用します。
以下のサイトを参考にしました。
http://labs.unoh.net/2007/02/post_65.html
→変換表のTSVデータが配布されています。
http://cgi.wap2.jp/emoji/imode/?act=i2any
→絵文字変換の表を絵文字画像つきで公開されています。
　
DoCoMo基準の変換リストから、auやSoftBankで表示できない絵文字を外します。
　
残った200個の文字に、ここでは仮に連番をつけて共通絵文字番号としておきます。
emoji_translate.php

<?php
$emojiData['translate'] = array(
    '1' => array('i' => 1, 'e' => 44, 's' => 74),
    '2' => array('i' => 2, 'e' => 107, 's' => 73),
    '3' => array('i' => 3, 'e' => 95, 's' => 75),
(中略)
    '200' => array('i' => 282, 'e' => 350, 's' => 107),
);
?>

インデックスの「i」はDoCoMo,「e」はau,「s」はSoftbankの意味です。
各キャリアの番号は各キャリアの変換表のインデックス番号を示しています。
　
各絵文字の内容は下記の通りです。
絵文字画像については権利関係の事情により省略します。

　
※本サンプルでは変換リストに合わせてSoftbankの絵文字変換リストの番号を前回のものとは一部変更しています。
記事末尾のサンプルファイルをご参照下さい。
　
※DoCoMoの絵文字番号は参考サイトにあるものとは異なるものになっています。
　
※上記はあくまでサンプルとして作成したものですので、全絵文字を表示したり絵文字入力を想定する場合はまたやり方が変わってきます。
ご参考までに。
　
　

PHPの概要

キャリアを判別する処理をつけて各キャリアの絵文字データに変換するようにしています。
このサンプルではFlashのバージョンを分ける処理はつけていません。
　
テキストのサンプルには絵文字を挿入する部分に「[emoji:共通絵文字番号]」を挿入しています。
共通絵文字番号をもとに絵文字変換リストを参照し、さらに各キャリアの絵文字を参照して置換しています。
　
DoCoMoのFlashLite2.0の場合のみ静止テキストがカラーで表示できるようにする処理を加えています。
　
以下のように文章に絵文字を埋め込んで表示しますので、

[NEW]お店[ビル]からのお知らせ[♪]
　携帯[携帯電話]サイトを更新[ぴかぴか]しました[！]

　
変数$messageを以下のように設定しておきます。

$message  = "[emoji:103]お店[emoji:36]からのお知らせ[emoji:126]\n";
$message .= "　携帯[emoji:70]サイトを更新[emoji:129]しました[emoji:137]";

PHPソース例

サンプルのソースは以下の通りです。
　
sample3639.php

<?php
/*
 * swfの絵文字を３キャリア別に置換して出力するサンプル
 */

require_once('emoji_docomo_utf8.php');
require_once('emoji_docomo_sjis.php');
require_once('emoji_docomo_color.php');
require_once('emoji_au_utf8.php');
require_once('emoji_au_sjis.php');
require_once('emoji_sb_utf8.php');
require_once('emoji_sb_sjis.php');
require_once('emoji_translate.php');

// 置換パターンを指定
// (0：FlashLite1.1 & Shift-JIS絵文字バイナリ)
// (1：FlashLite2.0 & UTF-8絵文字バイナリ)
$pattern = intval($_GET['pattern']);

// キャリア判別
$userAgent = $_SERVER['HTTP_USER_AGENT'];
if (preg_match('/^DoCoMo/', $userAgent)) {
    $carrier = 'docomo';
    $translateIndex = 'i';
} elseif (preg_match('/^(J\-PHONE|Vodafone|SoftBank|MOT\-)/', $userAgent)) {
    $carrier = 'softbank';
    $translateIndex = 's';
} elseif (preg_match('/^(KDDI\-|UP\.Browser)/', $userAgent)) {
    $carrier = 'au';
    $translateIndex = 'e';
} elseif (preg_match('/^Mozilla.+(DDIPOCKET|WILLCOM)/', $userAgent)) {
    $carrier = 'willcom';
} elseif (preg_match('/^emobile/', $userAgent)) {
    $carrier = 'emobile';
} else {
    $carrier = 'pc';
}

// ３キャリア以外はエラー終了
if (!in_array($carrier, array('docomo', 'softbank', 'au'))) {
    exit;
}

if ($pattern == 0) {
    // 絵文字データ読み込み
    $encode = 'SJIS';

    // SWFファイルの内容を取得
    $swfData = file_get_contents('sample3639_lite_1_1.swf');

    // 変換時のエンコード設定
    $swfmillEncode = '-e cp932';

} else {
    // 絵文字データ読み込み
    $encode = 'UTF-8';

    // SWFファイルの内容を取得
    $swfData = file_get_contents('sample3639_lite_2_0.swf');

    // 変換時のエンコード設定
    $swfmillEncode = '';

}

// 絵文字変換出力したい文字列
$message  = "[emoji:103]お店[emoji:36]からのお知らせ[emoji:126]\n";
$message .= "　携帯[emoji:70]サイトを更新[emoji:129]しました[emoji:137]";
// 出力用テキスト
$text = $message;
// DoCoMoカラー出力用テキスト
$colorText = $message;

// 全絵文字を順に置換
// あらかじめ置換が必要な絵文字を抜き出して必要な絵文字のみ置換するようにすると高速化できます
for ($i = 1; $i <= 200; $i++) {
    $text = str_replace('[emoji:' . $i . ']',
        $emojiData[$carrier][$encode][(string)$emojiData['translate'][$i][$translateIndex]], $text);
    $colorText = str_replace('[emoji:' . $i . ']', htmlspecialchars(
        '<font color="' . $emojiData['docomo']['color'][(string)$emojiData['translate'][$i][$translateIndex]] . '">'
         . $emojiData[$carrier][$encode][(string)$emojiData['translate'][$i][$translateIndex]] . '</font>', ENT_QUOTES), $colorText);
}

// 全絵文字リスト
$emojiAll = '';
if (($carrier === 'docomo') && ($pattern === 1)) {
    $emojiColorAll = '';
}
for ($i = 1; $i <= 200; $i++) {
    $no = (string)$i;
    $emojiAll .= $emojiData[$carrier][$encode][(string)$emojiData['translate'][$no][$translateIndex]];
    if (($carrier === 'docomo') && ($pattern === 1)) {
        $emojiColorAll .= htmlspecialchars(
            '<font color="' . $emojiData['docomo']['color'][(string)$emojiData['translate'][$no][$translateIndex]] . '">'
             . $emojiData[$carrier][$encode][(string)$emojiData['translate'][$no][$translateIndex]] . '</font>', ENT_QUOTES);
    }
}

// SWFからXMLに変換

// コマンド実行時の入出力とエラー出力先を指定
$descriptorspec = array(
   0 => array("pipe", "r"),
   1 => array("pipe", "w"),
   2 => array("file", "error-output.txt", "a")
);

// swfmillコマンドを実行してリソースとファイルポインタを取得
$process = proc_open('/usr/local/bin/swfmill ' . $swfmillEncode . ' swf2xml stdin stdout', $descriptorspec, $pipes);

if (is_resource($process)) {
    // 標準入力にSWFファイルのバイナリデータを書き込み
    fwrite($pipes[0], $swfData);
    fclose($pipes[0]);

    // 標準出力からXMLデータを読み込み
    $xmlString = stream_get_contents($pipes[1]);
    fclose($pipes[1]);

    // パイプを全て閉じてからプロセスを閉じる
    proc_close($process);
}

$replaceStrings = array(
    'text1' => $text,
    'text2' => $text,
    'text3' => $text,
    'text4' => $emojiAll,
);
if (($carrier === 'docomo') && ($pattern === 1)) {
    $replaceStrings['text1'] = $colorText;
    // 静止テキストのみHTMLタグを有効にする
    $xmlString = preg_replace(
        '/<DefineEditText (.*?) wordWrap="0" (.*?) isHTML="0"/',
        '<DefineEditText $1 wordWrap="0" $2 isHTML="1"',
        $xmlString);
}
foreach($replaceStrings as $key => $value){

    // 文字列内の改行を置換
    $value = str_replace("\n", '&#13;', $value);

    // 文字列を連想配列の値に置換
    $xmlString = str_replace('{$' . $key . '}', $value, $xmlString);

}

$descriptorspec = array(
   0 => array("pipe", "r"),
   1 => array("pipe", "w"),
   2 => array("file", "error-output.txt", "a")
);

// swfmillコマンドを実行してリソースとファイルポインタを取得
$process = proc_open('/usr/local/bin/swfmill ' . $swfmillEncode . ' xml2swf stdin stdout', $descriptorspec, $pipes);

if (is_resource($process)) {

    // 標準入力にXMLデータを書き込み
    fwrite($pipes[0], $xmlString);
    fclose($pipes[0]);

    // 標準出力からSWFファイルのバイナリデータを読み込み
    $swfOutput = stream_get_contents($pipes[1]);
    fclose($pipes[1]);

    // パイプを全て閉じてからプロセスを閉じる
    proc_close($process);
}

// SWFのヘッダを出力
header('Content-type: application/x-shockwave-flash');

// SWFのデータを出力
echo $swfOutput;
?>

サンプルファイル

sample3639.zip
上記サンプルのFlashファイル及びPHPファイル一式です。
　
　

備考

各キャリアの絵文字は機種によって一部の絵文字が表示できない場合があります。
　
DisneyMobileは少し絵柄が異なりますが表示される絵文字が意味する内容はSoftBankと同じのようです。
　
本記事のサンプルは各機種での動作を保証するものではありませんので、その点をご了承の上でご参考にして下さい。
　
　

関連ページ

ケータイFlash関連の記事一覧