ケータイFlashで絵文字を表示するには(DoCoMo編)

By ookura - 09/05/08 - このエントリをはてなブックマークに追加このエントリをYahoo!ブックマークに追加このエントリをdel.icio.usに追加このエントリをFC2ブックマークに追加

DoCoMoのケータイFlashでの絵文字表示の記述コードについて説明します。
→参照:「ケータイFlashで絵文字を表示するには(Softbank編)」
→参照:「ケータイFlashで絵文字を表示するには(au編)」
 
今回のサンプルでは絵文字データを動的に埋め込むためにswfmillを使用しています。
swfmillについては下記ご参照下さい。
→参照:「swfmillでケータイFlashを動的生成してみよう(インストール編)」
 
 

実行例

実行例はこちらからご確認下さい。
ランダムで8個の絵文字を静止テキスト・ダイナミックテキスト・テキスト入力に埋め込んで表示します。
全絵文字一覧もテキスト入力で出力しています。
※このサンプルはDoCoMoケータイ専用です。
※iモードシミュレータでも確認可能です。
→参照:http://www.nttdocomo.co.jp/service/imode/make/content/html/tool2/index.html

URLをメールで送る
http://ookura.tanikaze.com/Sample/post3400/
 
 

画面イメージ


 
 

DoCoMoの絵文字バイナリコード

DoCoMoの絵文字バイナリは
FlashLite1.1の場合、Shift-JISのバイナリコードで、
FlashLite2.0以上の場合は、UTF-8の表記で埋め込むと表示することができます。
 
バージョンによって絵文字の文字コードが異なるのはFlash自体の文字コードが異なるためです。
 
バイナリコードは下記サイトが参考になります。
iモードの絵文字(基本絵文字)
http://cgi.wap2.jp/emoji/imode/?act=list
iモードの絵文字(拡張絵文字)
http://cgi.wap2.jp/emoji/imode/?act=expand
iモードの絵文字(隠し絵文字)
http://cgi.wap2.jp/emoji/imode/?act=kakusi
→Flash Lite 1.1はこちらの「シフトJISのバイナリ」列を、
Flash Lite 2.0以降の場合は「UTF-8」列を参考にして下さい。
 
DoCoMo絵文字には基本絵文字・拡張絵文字・隠し絵文字の3種類がありますが、
本記事のサンプルではそれぞれ下記番号に割り当てています。
・基本絵文字:1~176
・隠し絵文字:177~206
・拡張絵文字:207~282
なお、機種によっては表示できない文字があります。
 
 

Flash Lite 1.1の場合

SJISのバイナリテキストを設定します。
バイナリエディタでSJISのテキストファイルにSJISのバイナリコードを記述したものをコピー&ペーストして表記したものを使います。
emoji_i_sjis.php

<?php
$emojiData['docomo']['SJIS'] = array(
    '1' => '・',
    '2' => '・',
    '3' => '・',
    (中略)
);
?>

※PHPファイルはUTF-8で記述するものとします。
※記事の文字化け対策のため上記ソースはバイナリコードの代わりに中点「・」で表記しています。
※Flash Lite 1.1でのDoCoMo絵文字バイナリの記述方法にはDoCoMoの公式サイトで配布されているツール「i絵文字」を使用する方法もあります。
→参照:http://www.nttdocomo.co.jp/service/imode/make/content/pictograph/tool/
 
 

Flash Lite 2.0以降の場合

UTF-8のバイナリコードを2桁ごとに「\x」をつけて16進数で表記したものを使います。
emoji_i_utf8.php

<?php
$emojiData['docomo']['UTF-8'] = array(
    '1'=>"\xEE\x98\xBE",
    '2'=>"\xEE\x98\xBF",
    '3'=>"\xEE\x99\x80",
    (中略)
);
?>

※PHPファイルはUTF-8で記述するものとします。
 
 

サンプルFlashの概要

サンプルFlashは動作確認のために静止テキスト・ダイナミックテキスト・テキスト入力のオブジェクトを配置しているだけのものです。
 
各オブジェクトにはswfmillで置換するために以下の文字列を設定しています。
静止テキスト:「{$text1}」
ダイナミックテキスト:「{$text2}」
テキスト入力:「{$text3}」
全絵文字出力:「{$text4}」
[図124]
 
このサンプルでは直接テキストオブジェクトに文字列を設定していますが、
フレームアクション側に文字列を記述しておき、
Flash Lite1.1の場合は変数経由で、
Flash Lite2.0以降の場合はテキストプロパティ経由で
テキストオブジェクトに文字列を設定することもできます。
 
 

PHPソース例

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

<?php
/* 
 * swfのDoCoMo絵文字を置換して出力するサンプル
 */

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

if ($pattern == 0) {
    // 絵文字データ読み込み
    require_once('emoji_docomo_sjis.php');
    $emojiList = $emojiData['docomo']['SJIS'];
    
    // SWFファイルの内容を取得
    $swfData = file_get_contents('sample3400_lite_1_1.swf');
    
    // 変換時のエンコード設定
    $swfmillEncode = '-e cp932';
    
} else {
    // 絵文字データ読み込み
    require_once('emoji_docomo_utf8.php');
    $emojiList = $emojiData['docomo']['UTF-8'];
    
    // SWFファイルの内容を取得
    $swfData = file_get_contents('sample3400_lite_2_0.swf');
    
    // 変換時のエンコード設定
    $swfmillEncode = '';
    
}

//絵文字をランダムに表示
for ($i = 0; $i < 8; $i++) {
    $no = floor(lcg_value()*282) + 1;
    $no = (string)$no;
    $text .= '[' . $no . ']' . $emojiList[$no] . ' ';
    if ($i % 4 == 3) {
        $text .= "\n";
    }
}

// 全絵文字リスト
$emojiAll = implode("", $emojiList);

// 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,
);
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;
?>

 
 

サンプルファイル

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

DoCoMo絵文字のカラーを有効にするには

実際にサンプルを見ていただくと分かるかと思いますが、基本的にDoCoMo絵文字はケータイFlashではテキストオブジェクトの配色に従って表示されてしまうため、各絵文字のカラーで表示できません。
※ただし、テキスト入力での編集時は絵文字のカラーで表示されます。
 
Flash Lite 1.1ではこのカラーの問題を解決する方法はありませんが、Flash Lite 2.0では別途解決する方法があります。
 
その方法については次回の記事で紹介予定です。
 
 

備考

DoCoMo絵文字は機種によって部分的に表示できないものがあります。
 
本記事のサンプルは各機種での動作を保証するものではありませんので、その点をご了承の上でご参考にして下さい。
 
 

関連ページ

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