muneto.murakami.biz Weblog » xhtml

【携帯サイト制作】第五回 auでutf-8のページからformで日本語を渡すと文字化けorz

muneto — Tue, 09 Sep 2008 05:44:52 +0000

さてと。

文字化けなども解消された素晴らしいXHTMLなソースですが、ちょっとformで日本語を次のページに渡そうとしたら・・・
またきました。

au・・・

またもや文字化けです(´・ｪ・｀)

例えばですが、

トップページに名前を入力するフォームがあるとしましょう。文字コードはutf-8です。

これで、next.phpに入力した名前が渡されまして、
とりあえずそれを表示されてみるとnext.phpにはこんな感じ。文字コードはutf-8です。

print(htmlspecialchars(mb_convert_encoding($_GET["name"],’UTF-8′,’UTF-8,SJIS,EUC-JP’)));
?>

こうしないと文字化けしちゃうですよ。

auのフォームはSJISで送られてくるらしいです。
詳しくは、リクルートメディアコミュニケーションズさんのたたみラボの記事がとっても参考になります。サンクス！

あぁ、、、、畳、いいっすね?。
畳の上で作業したいです。。。
い草の香りに包まれてね。

第一回そろそろ携帯サイトも真面目(XHTML＆CSS)に作ってみましょうか。
第二回 auでUTF-8で作成したページの絵文字が文字化け
 第三回 3キャリア対応絵文字変換スクリプトで文字化け解決
 第四回ケータイサイトXHTML&CSSでBLINKとかって。
第五回 auでutf-8のページからformで日本語を渡すと文字化けorz
第六回メール受信設定をしっかりと案内してますか？
第七回 auのソフトキーラベルについて
 第八回エラーが発生しました。レスポンスが不正です。WJ46386E

【携帯サイト制作】第四回ケータイサイトXHTML&CSSでBLINKとかって。

muneto — Wed, 03 Sep 2008 00:00:56 +0000

さて、無事に文字化けなどがクリアできましたので、早速ソースを書いていきましょう。

カリカリカリっと・・・・あれ？そういえば、マーキー（marquee）とかどうするんだろ？

と。

>>携帯ホームページを作ろう！　-ちょっと詳しいモバイルサイトの作り方-
モバゲーのような携帯サイトを作るための12のTips
こちらを参考に、

この画面はﾓﾊﾞｹﾞｰﾀｳﾝに似せて作ったﾃｽﾄ画面です。

なるほど。問題なくマーキーしてます。

そういえば、ブリンク(BLINK)はどうなんだろう？
どうやらauでは点滅しますが、docomoだと点滅しません。
どちらにしても、しっかり書かないとということで・・・

>>村式開墾日記
DoCoMoのCSSとXHTMLまとめ
こちらを参考に、

なるほど。ばっちりです。

村式開墾日記さんはとっても解りやすくまとまっていました。
感謝！！！

第一回そろそろ携帯サイトも真面目(XHTML＆CSS)に作ってみましょうか。
第二回 auでUTF-8で作成したページの絵文字が文字化け
 第三回 3キャリア対応絵文字変換スクリプトで文字化け解決
 第四回ケータイサイトXHTML&CSSでBLINKとかって。
第五回 auでutf-8のページからformで日本語を渡すと文字化けorz
第六回メール受信設定をしっかりと案内してますか？
第七回 auのソフトキーラベルについて
 第八回エラーが発生しました。レスポンスが不正です。WJ46386E

【携帯サイト制作】第三回 3キャリア対応絵文字変換スクリプトで文字化け解決

muneto — Tue, 02 Sep 2008 07:02:21 +0000

さて、なんとかUTF-8で各キャリア文字化けを回避しましたが、auの絵文字が文字化けしている状況・・・・

これがなんとかならないか・・・と、ネットサーフィン。死語ですが。

SHIFT_JISなら問題ないのでしょうが、ちょっと今更なのでなんとかUTF-8で。

そんななか、3キャリア対応絵文字変換スクリプト MobilePictogramConverterが願いを叶えてくれそうでした。

早速挑戦です。

もっともシンプルなコードで書くと・・・

require_once ‘MobilePictogramConverter.php’;
$str = pack(‘H*’, ‘F89F’); // DoCoMo 絵文字 (太陽のマーク)
$mpc =& MobilePictogramConverter::factory($str, MPC_FROM_FOMA, MPC_FROM_CHARSET_UTF8);
echo $mpc->autoConvert();
?>

そして、docomoとauで確認したら！！
バッチリです！！キター！

でも、これだと、絵文字一個ずつechoしなくてはいけないのかな？
それはキツイ。

とおもったら、コメント欄に同じくお悩みの方が。
結果、ヒアドキュメントでやれるみたいです。

require_once ‘./mpc/MobilePictogramConverter.php’;
$body =<< i絵文字で絵文字を挿入
body1;
$mpc =& MobilePictogramConverter::factory($body, MPC_FROM_FOMA, MPC_FROM_CHARSET_UTF8);
echo $mpc->autoConvert();
?>

おおお?！
バッチリですよ！
素晴らしいプログラムに感謝！！

第一回そろそろ携帯サイトも真面目(XHTML＆CSS)に作ってみましょうか。
第二回 auでUTF-8で作成したページの絵文字が文字化け
 第三回 3キャリア対応絵文字変換スクリプトで文字化け解決
 第四回ケータイサイトXHTML&CSSでBLINKとかって。
第五回 auでutf-8のページからformで日本語を渡すと文字化けorz
第六回メール受信設定をしっかりと案内してますか？
第七回 auのソフトキーラベルについて
 第八回エラーが発生しました。レスポンスが不正です。WJ46386E

【携帯サイト制作】第二回 auでUTF-8で作成したページの絵文字が文字化け

muneto — Tue, 02 Sep 2008 01:43:20 +0000

先日からの続き。

UTF-8で作成したページがauで文字化けしてしまう・・・orz

色々と試行錯誤していたら・・・
.htaccessから AddType application/xhtml+xml .html
を削除したら大ジョブでした(・∀・)!
じゃぁdocomoはどうするの？

docomoでXHTML＆CSSが出来ないのは意味がないので・・・
という矢先、phpファイルでxhtmlを使用しなくてはいけないことに気が付きました。
ぶっちゃけ、モバイルアドセンスなんですが・・・（ ´∀｀）
.htaccessに以下の行を追加します。

AddType text/xhtml+xml .php

で、やっぱりauがダメダメだったのですが、docomoでは必須であるxhtmlソースの１行目↓を外すと大丈夫でした。

header(‘Content-Type: application/xhtml+xml; charset=UTF-8′);

どうにも面倒になってきたので・・・
xhtmlヘッダ部分をキャリア毎に記述をインクルードさせることにしました。

例えばこんな感じです。。。

>index.php

< ?php
$ua = $_SERVER["HTTP_USER_AGENT"];
if(ereg("DoCoMo",$ua)){
include("/docomo.txt");
}
elseif(ereg("UP.Browser",$ua)){
include("/au.txt");
}
?>

タイトル

内容

>docomo.txt

header(‘Content-Type: application/xhtml+xml; charset=UTF-8′);
echo ‘’."n"
?>

>au.txt

echo ‘’."n"
?>

やった！先生、うまくイッタヨ！

と、つかの間・・・・

これだと、auで絵文字が化けるんですよ・・・orz

i絵文字からUnicodeで入れてもダメづら。。。

さぁ、どうしたものか。

他にもっと良い方法があったら教えてください・・・(´・ｪ・｀)

以下、随時追記してきますー。

第一回そろそろ携帯サイトも真面目(XHTML＆CSS)に作ってみましょうか。
第二回 auでUTF-8で作成したページの絵文字が文字化け
 第三回 3キャリア対応絵文字変換スクリプトで文字化け解決
 第四回ケータイサイトXHTML&CSSでBLINKとかって。
第五回 auでutf-8のページからformで日本語を渡すと文字化けorz
第六回メール受信設定をしっかりと案内してますか？
第七回 auのソフトキーラベルについて
 第八回エラーが発生しました。レスポンスが不正です。WJ46386E

【携帯サイト制作】第一回そろそろ携帯サイトも真面目(XHTML＆CSS)に作ってみましょうか。

muneto — Fri, 29 Aug 2008 00:10:49 +0000

現在の携帯サイト、3G限定で制作するとしても、DOCOMOとau、SoftBankでXHTMLとCSSの解釈が違うので、それぞれにファイルを用意したりと、かなり工数が膨らんでしまってキツイ感じです。
そんなこんなで、ソースグチャグチャでもとりあえず、「各キャリアでほぼ同じような表示してくれればいいやー」って作っている方も多いと思います。私ももちろんそうでした。

でも、そろそろ真面目(XHTML＆CSS)に作っていく頃かなぁと。漠然と思ってみました。
PCサイトも有識者が、志の高いクリエイターがW3Cに準拠したステキなソースを書き上げていって、それにしっかりと解釈をしてくれる素晴らしいブラウザーが登場して今がある。・・・という時代の流れがありました。
携帯サイトもそうなっていかないとねってことで、色々と情報を集めてみます。
以下のサイトあたりが面白いです。もっといっぱいあるのですがとりあえず・・・。

携帯ホームページを作ろう！　-ちょっと詳しいモバイルサイトの作り方-
HTMLタグボードの管理人が書くモバイルサイト構築支援ブログ。

miniturbo.org
twitterMobileの方ですよ。

アシアルブログ

15Pub

ウノウラボ
ウノウ株式会社のデモ版サービスやTIPSなどの情報

で、とりあえず3Gは、

XHTML Basicで文字コードはUTF-8でいいんすね。
DOCOMOはしっかりDOCTYPE宣言してMIMEタイプの設定が必要なんすね。
じゃぁ、.htaccessに AddType application/xhtml+xml .html を。

早速試してみると・・・
DOCOMOでXHTML＆CSSでいけてるー！
やったーと思ってauで見たら文字化け・・・orz
あれれ？UTF-8大丈夫なんじゃぁ？？
手持ちの端末はW53T。UTF-8に対応していないなんて情報は見あたらないし、下位機種で対応が出来ているので恐らく大丈夫なハズ・・・(´・ｪ・｀)

色々と試行錯誤していたら・・・

.htaccessから AddType application/xhtml+xml .html

を削除したら大ジョブでした(・∀・)!

じゃぁDOCOMOはどうするの？

以下、随時追記してきますー。

第一回そろそろ携帯サイトも真面目(XHTML＆CSS)に作ってみましょうか。
第二回 auでUTF-8で作成したページの絵文字が文字化け
 第三回 3キャリア対応絵文字変換スクリプトで文字化け解決
 第四回ケータイサイトXHTML&CSSでBLINKとかって。
第五回 auでutf-8のページからformで日本語を渡すと文字化けorz
第六回メール受信設定をしっかりと案内してますか？
第七回 auのソフトキーラベルについて
 第八回エラーが発生しました。レスポンスが不正です。WJ46386E

muneto.murakami.biz Weblog » xhtml

【携帯サイト制作】第五回 auでutf-8のページからformで日本語を渡すと文字化けorz

【携帯サイト制作】第四回 ケータイサイトXHTML&CSSでBLINKとかって。

【携帯サイト制作】第三回 3キャリア対応 絵文字変換スクリプトで文字化け解決

【携帯サイト制作】第二回 auでUTF-8で作成したページの絵文字が文字化け

【携帯サイト制作】第一回 そろそろ携帯サイトも真面目(XHTML＆CSS)に作ってみましょうか。

【携帯サイト制作】第四回ケータイサイトXHTML&CSSでBLINKとかって。

【携帯サイト制作】第三回 3キャリア対応絵文字変換スクリプトで文字化け解決

【携帯サイト制作】第一回そろそろ携帯サイトも真面目(XHTML＆CSS)に作ってみましょうか。