携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-
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から読み出す場合と同じです。

以上です。





管理者にだけ表示を許可する


承認待ちコメント
このコメントは管理者の承認待ちです
| | 2012/02/26/Sun 19:18 [EDIT]
こちらのスクリプトのおかげで、無事に3キャリア絵文字対応ができました。
本当にありがとうございました!

著書も購入させていただきました。今後もがんばってくださいね!
さと | URL | 2011/07/29/Fri 11:14 [EDIT]
絵文字の表示について
大変便利に使わせて頂いてます。ありがとうございます。
[public_html]
  ├[include]
     ├[emoji]
        ├[images]--***.gif (PC絵文字用の画像)
        └table.tsv (絵文字変換テーブル)
     ├commons.php (共通ファイル読み込み)
     ├emoji_trans.php (絵文字変換スクリプト)
     └user_agent_carrier.php (キャリア判別)
  
  ├トップ.php (絵文字をPHPから読み出す場合のサンプルファイル)
  ├[contents]
     └contents.php 」このようにしています。
携帯トップのパス
include_once 'include/commons.php';

contentsのパス
    include_once '../include/commons.php';
携帯のトップから構成やパスは上記のようにしています。
さくらやWADAXのサーバーでは絵文字がちゃんと表示されるのですが、
今回のサバ―(他社で管理してるため仕様が不明)では、トップは表示されますが、コンテンツのページの絵文字が表示できません。
全てのページを携帯トップと同じ位置に置いたがいいのでしょうか、他に何かやり方があるでしょうか。できればアドバイス申し訳ありませんがよろしくお願いします。
先ほど送信できませんでしたので再度お送りします。申し訳ありません。


まんたろう | URL | 2010/12/01/Wed 11:41 [EDIT]
こんにちわ(*^^)v
素晴らしいコンテンツを書かれているといつも感心
して見ています!

また投稿させて頂きます,よろしくお願いします!
相続税 | URL | 2010/11/08/Mon 07:39 [EDIT]
携帯絵文字変換スクリプトの階層について
こんにちわ(@・∇・@)/
初歩的な質問ですが、よろしくお願いします。
携帯絵文字変換スクリプトをサーバーのルートで[public_html]
  ├[include]
     ├[emoji]
で配置した場合は問題ないのですが
[public_html]
  ├[02]
     ├[include]
と1階層下のディレクトリーにコンテンツを配置した場合にPHPのエラーがでます。
エラーの個所の絵文字コードを取り除いたらエラーが解消されますが、そのほかのページの絵文字コードはエラーにならずに表示されています?
[public_html]
  ├[02]
     ├[include]
の場合はどこを修正すればいいのでしょうか?
あんあん | URL | 2010/10/21/Thu 11:23 [EDIT]
imodeの
こんにちわ(@・∇・@)/
ちょっとこちらへの質問ではないかもしれないのですが;
よろしくお願いしますm(==)m
3キャリア別にページを作ったのですが、
クローラがことごとく、imode用のページを持ってかえり、
検索でページへ移動すると、
ソフトバンクや、auで絵文字の文字化けがおこります(ToT)
ファイル名をダイレクトで指定されている場合、
.htaccess などで、移動させることはできないのでしょうか?
phpとかアパッチもよくわからなくて(・・;
よろしくおねがいします。

mina | URL | 2010/06/15/Tue 11:13 [EDIT]
""が消えた
以前のバージョンでau表示させた時に絵文字に""が表示されていたのですが
こちらに変更したら無くなりました。
感謝です!
いわしだま | URL | 2010/04/17/Sat 15:41 [EDIT]
phpをincludeすると画像が表示されます
プログラムを利用させていただきました。ありがとうございます。

早速なのですが、test_emoji.phpを直接URLに入れてみるとちゃんと機種毎に絵文字が変わるのですが、このtest_emoji.phpを例えばtest.html(htaccessでphpも動作するようにしています)から読み込むとPC用の絵文字が表示されてしますます。
readfileとしてtest_emoji.phpを読み込んでもだめでした。
何か良い方法はないでしょうか?わたしはあまりプログラムに強くありませんので作業自体、何か勘違いしているのかもしれません。
お手数ですがお答えいただけますと幸甚です。
umyu | URL | 2010/01/10/Sun 14:21 [EDIT]
A5301Tでは
auの古い機種ですが、A5301Tでは絵文字が文字化けしてました。
http://www.dspt.net/test/emoji/test_emoji.php
も文字化けします。

しかし、↓は大丈夫でした。
http://www.dspt.net/data/emoji/test.html
あきら | URL | 2009/10/23/Fri 17:42 [EDIT]
docomo/auにて・・・
すばらしいスクリプトありがとうございます。(感謝、感激^^)
実機のdocomo/auで、絵文字の前後に【゜】が表示されてしまうのですが原因が判らず、困っています。 このようになります→"絵文字"
ソフトバンクでは正常に表示されるのですが、このような事例はあるでしょうか?
ism | URL | 2009/10/17/Sat 16:24 [EDIT]
docomo/au、ヒ、ニ磁磁磁
、ケ、ミ、鬢キ、、・ケ・ッ・・ラ・ネ、「、熙ャ、ネ、ヲ、エ、カ、、、゛、ケ。」。ハエカシユ。「エカキ罍ー。ー。ヒ
シツオ。、ホdocomo/au、ヌ。「ウィハクサ?ホチーク螟ヒ。レ。ャ。ロ、ャノスシィ、オ、?ニ、キ、゛、ヲ、ホ、ヌ、ケ、ャクカー<img src="chrome://msim/content/emoji/i/58947.gif" alt="" border="0" width="12" height="12" />ャネス、鬢コ。「コ、、テ、ニ、、、゛、ケ。」。。、ウ、ホ、隍ヲ、ヒ、ハ、熙゛、ケ「ェ"ウィハクサ?
・ス・ユ・ネ・ミ・ッ、ヌ、マタオセ?ヒノスシィ、オ、??ホ、ヌ、ケ、ャ。「、ウ、ホ、隍ヲ、ハサ网マ、「、?ヌ、キ、遉ヲ、ォ。ゥ
| URL | 2009/10/17/Sat 16:23 [EDIT]
ブラウザについて
このたび、こちらの絵文字変換スクリプトを利用させていただいております。(感謝!)
ブラウザについてですが、PC上でIE及びFirefoxいずれも正しく表示されません。また、iModeシミュレータでは絵文字が抜けて表示される状況です。
実機では(docomo)では正しく表示されます。

開発はAptana+PHPで行っております。当方のミスだとは思いますが、お手上げの状態です。
何か、問題解消のヒントをいただければと思います
よろしくお願いします
エリー | URL | 2009/08/19/Wed 11:09 [EDIT]
au端末で表示しない
テストサイト
http://www.neo-cms.jp/mobile/test_emoji.php
を、au端末で閲覧したのだが、表示できなかった。
機種がかなり古いためだろうか A5521K となっている
導入したいと思ったのだが、対応機種を教えていただけますか?
SYO | URL | 2009/08/09/Sun 04:52 [EDIT]
どうしたらいいのかな?
3キャリア共通のページを作成しており、絵文字変換スクリプトを利用させてもらっています。複数のサイトを運営しているので、どのサイトからでも呼び出せるように一番上の階層だけに絵文字変換テーブルとPC用GIFを設置したいんですが、絶対パスではテーブルと画像の位置は指定できないのでしょうか?
ちなみに初期設定の状態では呼び出せています。
初歩的な質問ではありますが、どうか教えてください。
| URL | 2009/06/19/Fri 01:44 [EDIT]
an error occurred while processing this directive
SSIの非表示の件自己解決しました。
本に掲載されてある、以前のバージョンで行っております。

[トップディレクトリ]の解釈が、「サーバー」からのトップディレクトリであって、公開URLもしくはwebサイトのトップディレクトリではないというミステイクでした。

ローカルサーバーでのフォルダ構造では
htdocs
/mobile
/php/trans.php
/index.html
.htaccess (iモードxhtml用とSSI用)

となっており
晴れ<!--#include virtual="/php/trans.php?emoji=1"-->
から
晴れ<!--#include virtual="/mobile/php/trans.php?emoji=1"-->
に変更したところ表示されました。

SSIの扱いがないための[トップディレクトリ]という点で勘違いが起きていました。
過去ログを拝見したところもしやと思い、修正したところ表示されました。

本のP154から書いてある同サンプルもパスの誤字もあり、基本的に分かりづらいのでサポートサイトの正誤表記の追加と設置についての説明補足があればと思います。読者も無駄に時間を費やしますし・・
| URL | 2009/05/15/Fri 12:03 [EDIT]
上手くいかない
本の同サンプルも動作確認が出来ず、分からなかったのでこちらのサイトに来ました。
まだ動作確認中で上手くいかないので一応報告します。

■ 環境
ローカル:xampp
リモート:ヘテムル
モバイル: [iモードシュミレーター]
で[test_emoji_ssi.html]と [test_emoji.php]の動作テストをしています。

サンプルの
http://www.dspt.net/test/emoji/test_emoji_ssi.html
はiモードシュミレーターで表示されました。

ダウンロードしたファイルの
phpは絵文字が表示されましたが
SSIはiモードシュミレーターで、ローカルでもリモートでも
晴れ : [an error occurred while processing this directive]
と表示されます。

//動作モードの部分の $mode = 0; を1にしても同様の結果でした。
サーバーが合わないでしょうか・・・
k | URL | 2009/05/12/Tue 17:08 [EDIT]
(解決しました)docomo端末で色が白黒になります
こんばんわ、先ほどコメントしたmineです。
実はかなりの凡ミスで・・解決しましたのでご報告します。
<body bgcolor="#ffffff" text="#444444">で
自ら白黒にしてしまってました・・・。お恥ずかしい限りです。。
これからも貴サイトにて勉強させて頂きます!
mine | URL | 2009/05/09/Sat 01:03 [EDIT]
docomo端末で色が白黒になります
初心者ながらいつも参考にさせていただいております。
5/8のeriさんのコメントと同じなのですが、docomo端末で絵文字が全て白黒になります。(その他のキャリアは問題なく表示されました)
過去ログなども参考の上いろいろと試してみましたが、解決することができません。
当面は、eriさんと同じ様にfont colorで対応しようと思うのですが、考えられる原因、解決方法があればご教示いただきたく存じます。

私の場合は、htmlで簡易的に作ったサイトで、SSIで設置しております。
少しでも携帯サイトらしくなる様に、絵文字を導入しようと考えてこちらのスクリプトを利用させていただきました。

よろしくおねがいいたします。
mine | URL | 2009/05/08/Fri 21:13 [EDIT]
docomo端末にて色が全てモノクロになる件
shiba様、こちらのブログ、書籍ともに大変参考にさせていただいております。
早速ですが、下記現象について、ご教授いただけたら幸いです。

--------------------------------------------------------
・docomoのみ、絵文字に色がつかない。(全てモノクロ)
--------------------------------------------------------

現在は、ソースを

<font color="#FF9900"><?php emoji('絵文字番号');?></font>

という風に囲って対処しておりますが、利便性をあげるため、ソースを
簡単にしたいと思っております。
尚、私の作成しましたモバイルサイトは
-------------------------------------------------------
・PHP化
・「test_emoji.php」→「index.php」に名称変更
-------------------------------------------------------
としております。

お忙しいところ恐縮ですが、宜しくお願い致します。

eri | URL | 2009/05/08/Fri 15:07 [EDIT]
3キャリアしか対応していない
「全キャリア対応」と書いてありますが、ウィルコムとイー・モバイルの絵文字は完全には対応していないと思います (ドコモと Shift_JIS コードが同じもののみ表示可能)。「全キャリア対応」と「3キャリア対応」では意味が違います (マイナーキャリアを無視するかどうか) ので、そこは慎重に使い分けてもらえないでしょうか。
ウィルコム・イーモバイルを無視するのは自由ですが、「全キャリア対応」と書いて実は対応していないというのは「存在すら無視」ということで、それはあんまりです。
ゆりこ | URL | 2009/04/03/Fri 18:27 [EDIT]
文字化け(PHP)
サーバー:kagoya、携帯電話:au/W21Sで文字化けが起こる要因は何が考えられますか?
docomoとsoftbankではちゃんと表示されます。
miyabi | URL | 2009/04/01/Wed 14:14 [EDIT]
エラーが出ます
こちらに書いてある通りサンプルを設置して見たのですが、[an error occurred while processing this directive]というエラーが出てしまいます。
HTMLタグボードにあるものを使うと表示ができるのですが、広告つきのサーバーを使っていると、絵文字と一緒に広告まで持ってきてしまうので・・・。
HTMLタグボードにあるものが使えるということはSSIの読み出しにvirtualは使えるということですが・・・。
Sole | URL | 2009/03/25/Wed 22:14 [EDIT]
回答ありがとうございました。
ご返答頂きまして、ありがとうございます!
さっそく試してみたいと思います。m(_ _)m
chakei | URL | 2009/03/10/Tue 13:17 [EDIT]
Re : 縮小絵文字で””が表示されてしまう
chakeiさま

書き込みありがとうございます。

以前も同様の症状での報告がありますが、
おそらくはサーバーの設定に依存する現象だと思われます。

上記で紹介している新しいバージョンのPHPプログラムを使用してみてください。
(新しいバージョンでは「ドコモ→au絵文字自動変換利用」の設定は必要なくなりました)

よろしくお願いいたします。

shiba | URL | 2009/03/09/Mon 21:17 [EDIT]
縮小絵文字で””が表示されてしう
shiba様はじめまして、携帯サイト作成に著書共々にバイブルとさせて頂いております。

お忙しい中恐縮ですが、一つご教授お願い致します。
//ドコモ→au絵文字自動変換利用(on:1 off:0) 22行目でon:1で使用して文字サイズ共に絵文字も縮小表示されるのですが、縮小した絵文字の両脇に””が表示されてしまいます。 
””が表示されてしまう原因はどういったことが考えられますでしょうか? 環境はPHP4で.htaccessを使ってSSIで呼び出しています。
chakei | URL | 2009/03/09/Mon 18:55 [EDIT]
cakephp対応
shibaさんはじめまして。
著書、ブログどちらもかなり参考にさせてもらっています。
ありがとうございます。v-218

もし、可能であればでよろしいのですが、
今回のスクリプトcakephp対応できませんでしょうか??
ぜひcakeでも使ってみたいと思います。v-42
koji | URL | 2009/02/26/Thu 21:58 [EDIT]
さっそく使用させていただきました。
麺喰ブログというラーメンレビューブログのサイトを作っているものです。

今回、携帯電話でラーメン屋を探し出すというサイトを作り始め携帯電話サイトの作り方をネットで検索していたところこのサイトにたどり着きました。

パソコンでのサイト作りと違って文字や背景に色つける程度でつまづいてイライラしていたのが解消されました。おかげさまでいろいろとデザインすることができそうです。絵文字変換スクリプトも大変便利で使いやすくありがたく思っております。
麺たぼりっく | URL | 2009/02/26/Thu 16:51 [EDIT]




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

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