ケータイFlashで絵文字をカラーで表示するには（DoCoMo編）

By ookura - 09/05/15 -

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

実行例

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

→URLをメールで送る

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

画面イメージ

※リロードすると表示される絵文字がランダムで切り替わります。
　
　

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

絵文字自体の表示方法については前回の記事をご参照下さい。
→参照：「ケータイFlashで絵文字を表示するには（DoCoMo編）」
　
DoCoMo絵文字はケータイFlashではテキストオブジェクトの配色に従って表示されてしまうため、各絵文字のカラーで表示できません。
　
Flash Lite 1.1ではこれを解決する方法はありませんが、Flash Lite 2.0以降では解決する方法があります。
　
▼ダイナミックテキスト・テキスト入力の場合
テキストオブジェクトに対してインスタンス名を指定して「useDefaultColor」プロパティをtrueにします。
　
▼静止テキストの場合
swfmillで静止テキストがHTMLを許可するように変更し、各絵文字のカラーを16進数で指定したfontタグで絵文字を囲むように置換します。
本来静止テキストではHTMLは使用できませんが、swfmillで強制的に属性を変更することで使用することができます。
原理上、ダイナミックテキスト・テキスト入力でも同様の方法を取ることが可能ですが、編集時にHTMLタグになってしまいますのでActionScriptで対応します。
　
　

配色リストの準備

あらかじめ各絵文字の配色を調べて16進数でリストにしておきます。
emoji_docomo_color.php

<?php
$emojiData['docomo']['color'] = array(
    '1'=>'#ff0000',
    '2'=>'#0000ff',
    '3'=>'#0000ff',
    (中略)
);
?>

　
絵文字のカラーは下記サイトが参考になります。
ｉモードの絵文字（基本絵文字）
http://cgi.wap2.jp/emoji/imode/?act=list
ｉモードの絵文字（拡張絵文字）
http://cgi.wap2.jp/emoji/imode/?act=expand
ｉモードの絵文字（隠し絵文字）
http://cgi.wap2.jp/emoji/imode/?act=kakusi
「色」列を参考にして下さい。
　
　

サンプルFlashの概要

サンプルFlashは動作確認のために静止テキスト・ダイナミックテキスト・テキスト入力のオブジェクトを配置しているだけのものです。
　
各オブジェクトにはswfmillで置換するために以下の文字列を設定しています。
静止テキスト：「{$text1}」
ダイナミックテキスト：「{$text2}」
テキスト入力：「{$text3}」
全絵文字出力：「{$text4}」
　
静止テキスト以外の２つ目から４つ目のテキストオブジェクトは絵文字を元の配色で表示させるためにアクションを設定します。
その準備として各テキストオブジェクトのインスタンス名を以下のように設定します。
ダイナミックテキスト：「text2」
テキスト入力：「text3」
全絵文字出力：「text4」
→[図129]
　
続いてアクションを記述します。
テキストを配置している箇所の上に一つレイヤーを追加してフレームアクションを以下のように記述します。

text2.useDefaultColor = true;
text3.useDefaultColor = true;
text4.useDefaultColor = true;

→[図130]
　
テキストオブジェクトのuseDefaultColorプロパティをtrueにすることで絵文字をオリジナルの配色で表示させることができます。
　
　

静止テキストの配色設定

１．swfmillで絵文字を埋め込む際にcolor属性を付けたfontタグで囲みます。

$emojiColorAll .= htmlspecialchars('<font color="' . $emojiColorList[$key] . '">' . $value . '</font>', ENT_QUOTES);

　
２．静止テキストのDefineEditTextタグの「isHTML="0"」を「isHTML="1"」に置き換えます。
静止テキストの場合「wordWrap="0"」になっていますので、これを条件にして置換します。

$xmlString = preg_replace(
    '/<DefineEditText (.*?) wordWrap="0" (.*?) isHTML="0"/',
    '<DefineEditText $1 wordWrap="0" $2 isHTML="1"',
    $xmlString);

　
※静止テキストは日本語などのマルチバイト文字が含まれていると自動的に「isHTML="1"」になっています。
このサンプルでは置換対象の静止テキストにマルチバイト文字が含まれておらず「isHTML="0"」になっていますので置換で対応しています。
ですので、マルチバイト文字を含む形で静止テキストを配置されている場合は上記２．の処理は不要になります。
　
　

PHPソース例

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

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

// 絵文字データ読み込み
require_once('emoji_docomo_utf8.php');
$emojiList = $emojiData['docomo']['UTF-8'];

require_once('emoji_docomo_color.php');
$emojiColorList = $emojiData['docomo']['color'];

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

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

// 全絵文字リスト
    $emojiAll = implode("", $emojiList);
    $emojiColorAll = null;
    foreach ($emojiList as $key => $value) {
        $emojiColorAll .= htmlspecialchars('<font color="' . $emojiColorList[$key] . '">' . $value . '</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 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);
}

// 静止テキストのみHTMLタグを有効にする
$xmlString = preg_replace(
    '/<DefineEditText (.*?) wordWrap="0" (.*?) isHTML="0"/',
    '<DefineEditText $1 wordWrap="0" $2 isHTML="1"',
    $xmlString);

$replaceStrings = array(
    'text1' => $colorText,
    '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 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;
?>

サンプルファイル

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

備考

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

携帯サイトをつくろう。

おすすめ

カテゴリー