な！自転車でやせる >> Nucleusをケータイ（携帯）対応にする(507)

な！自転車でやせる » 記事一覧 » Nucleusをケータイ（携帯）対応にする

2005-07-04

Nucleusをケータイ（携帯）対応にする

　このページはEUCなので一部のケータイ（携帯）でしか閲覧できない。
それでも自分のauではOkだったんでそのままにしてあったが、ひょんなことからモバイル対応できることを知り試してみた。
「な！自転車でやせる」ケータイ（携帯）対応ページ→

http://nakachi.org/m/

　QRコードの作成はこちら→QRコード作成＆活用のススメ

　すべては携帯サイト構築まとめ：Nucleusの使い方で公開されているプラグイン（NP_Mobile.php ver0.23）と情報のおかげ。
それと
携帯電話向けサイトでのPHPの応用・端末振り分け(1)
Nucleus版携帯用ページの改良
自家製携帯用ＮｕｃｌｅｕｓＣＭＳの俺レシピ
UTF-8 での文字化けを解決
[PHP-users 23552]携帯サイト構築についてメモ

　ケータイ（携帯）からだとhttp://nakachi.org/にアクセスすると自動的にケータイ（携帯）対応ページが表示されるようになっている。
方法はindex.phpに以下を付け加えた。

// for mobile $title="な！自転車でやせる"; $page_e='http://nakachi.org/m/'; $page_j='http://nakachi.org/m/'; $page_i='http://nakachi.org/m/'; $page_h='http://nakachi.org/m/'; $i=$_SERVER['HTTP_USER_AGENT']; //EZウェブHDML機か。 if (preg_match("/UP\.Browser\/[3-5]/",$i)) { header('Content-Type: text/x-hdml;charset=shift_jis'); echo('<hdml version="3.0" markable="TRUE" public="TRUE">'); echo('<nodisplay markable="TRUE" public="TRUE" title="'.$title.'">'); echo('<action type="ACCEPT" task="GO" dest="'.$page_e.'">'); echo('</nodisplay>'); echo('</hdml>'); exit(); } //ボーダフォン在来機か。 if (preg_match("/J-PHONE\//",$i)) { header("Location: $page_j"); exit(); } //H"リンクか。 if (preg_match("/PDXGW\//",$i)) { header("Content-Type: text/plain"); echo("From: $page_h\n"); echo("Subject: $title\n"); echo("Content-Type:Text/X-PmailDX\n"); echo("\n"); echo("<SEL=99;$page_h>\n"); echo("<BODY=000000;BG=FFFFFF>\n"); echo("$title\n"); echo("\n"); echo("　いらっしゃいませ。ご訪問ありがとうございます。\n"); echo(" ------------\n"); echo("99⇒メニュー\n"); echo("「99」を入力して下さい。\n"); exit(); } //ｉモード/EZウェブ次世代機/エアーH"フォンなどの携帯端末一般。 if (preg_match("/DoCoMo\//",$i) || preg_match("/Opera[\s\/]/",$i) && !(preg_match("/(Win|Mac|Linux|FreeBSD|OS\/2|Solaris)/i",$i)) || preg_match("/UP\.Browser/",$i) || preg_match("/\AVodafone/",$i) || preg_match("/\AMOT-/",$i) || preg_match("/ASTEL\//",$i) || preg_match("/DDIPOCKET;/",$i) || preg_match("/L-mode\/\//",$i)) { header("Location: $page_i"); exit(); }

　あと、コメントの書き込みができれば十分だと思う。
ちょっと、試したら文字化けした。
モバイル対応ページはSJISになっており、コメントフォームから書き込んだ文字コードもSJISになるからだと思う。
それなら、コメントフォームに書き込まれたものを途中でEUCに変換すればよいかと考えたがどこをいじったらよいのかがわからない。

画像はキャリアの違いを超えて表示させるのはむつかしそう。
　できるようになったので以下にまとめた。

　それにしても便利なものを次から次へと開発してくれる方々がたくさんいて、私のようにただ使うばかりのものにはありがたいやら申し訳ないやら。
何かで貢献できればいいのだが。

　ひとまずケータイ（携帯）対応ページの体裁が整ったのでTips集としてまとめておく。

コメントの書き込みを可能にする方法

[32] 携帯からのコメント可能に
をそのまま使わせていただいた。
そうか、vars4.1.0.phpをいじるのか。
このあたりはNucleusの中身を熟知してないと手も足も出ないなぁ。
備忘録として引用。

携帯に限らず、何らかの理由で文字コードが異なるpostを受けた場合に、お好みの文字コードで受取る方法。

nucleus/libs/ディレクトリのvars4.1.0.phpの
上から2つ目の
function postVar($name)を、
========
$_POST[$name] = mb_convert_encoding($_POST[$name], "EUC-JP", "auto");
return undoMagic($_POST[$name]);
========
と、文字エンコーディングを変換するコードを1行追加。

[32] 携帯からのコメント可能にのコメントにもあるように環境によってはエンコードがうまくいかない。
どういうわけかテンプレートを書き換えた時などにvars4.1.0.phpの上記行でmb_convert_encoding()のエラーを示す。
この現象はさくらインターネット
で見られた。
"auto"の代わりに、"ISO-2022-JP,ASCII,JIS,UTF-8,EUC-JP,SJIS"とすることで解決。
さくらインターネットのphpのバージョンは4.3.10、cgiとして動いている。

　もうひとつ、Nucleus(JP)フォーラムからの情報。
NP_ItemMailと"携帯からのコメント化け対策"でエラーによると

$_POST[$name]は参照渡しなので、=で代入する必要はないようです。

ということなので

$_POST[$name] = mb_convert_encoding($_POST[$name], "EUC-JP", "auto");

は

mb_convert_variables("EUC-JP", "auto", $_POST[$name]);

でよいらしい。

コメントのページを別に表示する方法

通常は個別アイテムのスキンに<%comments%>や<%commentform%>を置けば記事の下にそれに関するコメント群が表示され、新たなコメントをつけることもできる。
しかし、ケータイ（携帯）対応の場合、あまりに1ページが長いのは見苦しいだろうということで、もらったコメントを表示するページとコメントをつけるページをそれぞれ別に表示する。

1.mobスキンにおける個別アイテムページでの記述

<%comments(mob/comment)%>

mob/commentというテンプレートは新たに作成した。

2.mob/commentの内容
「コメントのヘッダー」に以下のように記述する。
「コメントの本体」に記述するとコメントの数だけ表示されてしまうから。

<a href=<%itemlink%>&skinid=mob2>コメント(<%commentcount%>)</a><br> <a href=<%itemlink%>&skinid=mob3>コメントをつける</a>

ここでのmob2、mob3とは新たに作ったスキンである。

3.mob/fullの内容
「コメントのヘッダー」

<a href=<%itemlink%>&skinid=mob3>コメントをつける</a>

「コメントの本体」

<h3><%userlink%> wrote:</h3> <%body%> <%date%>　<%time%> <br><br>

「コメントのフッター」

<a href=<%itemlink%>&skinid=mob3>コメントをつける</a>

「コメントが無い時」

<a href=<%itemlink%>&skinid=mob3>コメントをつける</a>

「コメントが多すぎる時」

<a href=<%itemlink%>&skinid=mob2>コメント(<%commentcount%>)</a>

4.mob2の内容
コメントを表示する。
「個別アイテムページ」のみ作成する。
内容は以下のとおり

<html> <head> <meta http-equiv=Content-Type content=text/html; charset=Shift_JIS> <title><%blogsetting(name)%></title> </head> <body> <a href=<%sitevar(url)%>m/><%blogsetting(name)%></a><br> [<%itemtitle%>]のコメント <hr> <%comments(mob/full)%> <hr> <a href=<%sitevar(url)%>m/>HOME</a><br> </body> </html>

5.mob3の内容
コメントを書き込むためのページの作成。
mob2と同じく「個別アイテムページ」のみ作成する。
内容は以下のとおり

<html> <head> <meta http-equiv=Content-Type content=text/html; charset=Shift_JIS> <title><%blogsetting(name)%></title> </head> <body> <a href=<%sitevar(url)%>m/><%blogsetting(name)%></a><br> [<%itemtitle%>]にコメントをする <hr> <%commentform%> <hr> <a href=<%sitevar(url)%>m/>HOME</a><br> </body> </html>

　ところが、このままではスキンの変更がなされず、コメント投稿用のリンクをクリックしても先へ進まない。
そこでNucleus版携帯用ページの改良を参考にNP_Mobileのindex.phpの一部を変更する。

selectSkin('mob');

を

if(!$_GET['skinid']) selectSkin('mob');

に書き換える。

記事内のリンクに関して

デフォルトのNP_Mobileでは<a hre=....>が<a>に置き換わってしまう。
そこでNP_Mobileの該当する部分をコメントアウトした。
ただ、このままだと自サイト以外のFancyURLのページもURLのreplaceをしてしまうのでまずいのだが、今のところ有効な回避策が見つからない。

// $data = ereg_replace('a href=https*://', 'a class=', $data);

　ところが、これをやるとリンク部分でうまく分割できなくなり、本来表示されないはずのURLが表示されたり文字のカウントに失敗して文字化けを引き起こす。
ということで元に戻した。

メンバー詳細ページを表示する

使用中のスキン内でメンバー詳細ページを作成する。
m/index.php（defaultではi/index.php）に以下を加える。

$feed = str_replace('/member/', '/m/?memberid=', $feed);

画像を表示する

m/index.php（defaultではi/index.php）に<img>を加えてimgタグを使えるようにする。
記事の記載時は<img src=...>で画像を表示するようにする。
そこでテスト。

画像サンプルその1

画像サンプルその2

　現在､画像管理にCoppermine Photo Gallery（以下CPG）を用いている。
「Web Server + PHP + MySQL + IM/GD = CPG !」だそうな。
重宝している。
で今回これが役に立つ。
　このCPGは画像をアップすると自動で133x100 pixのthumbnailを作ってくれる。
ブログにはthumbnailを表示し､PCではクリックすると別ウィンドウを開き､モバイルではその機能を省いておけばいいはず。

　その後、NP_Moblogを導入し、ケータイ（携帯）からも投稿可能にした。
しかし、そのままでは投稿した画像をケータイ（携帯）で閲覧できない。
解消方法についてはモブログの画像をケータイ（携帯）で見えるようにするを参照のこと。

不具合解消？

　このページのモバイル版を見るとreloadするたびにカタカナが半角になったり全角になったり､記事全文が表示されるかと思うと同じ記事が分割され､その続きのページを見ると最初の行が文字化けしたり。
かと思うとブラウザに何も表示されないのでソースを見ると文字化けした記事があったり。
　なんか文字コードがらみの不具合があった。
ところが、別のサーバでは特に不具合が見られなかった。
サーバの設定の問題なのか私の何らかの設定ミスなのかよくわからなかったが､文字コードがらみということで配布ファイルのindex.phpとNP_Mobile.phpをいじってみた。
保存時の文字コードを変えてみたり､「不要な文字列の除去＆変換」の内容をみようみまねで変更したがいっこうに事態の改善は見られなかった。
ただ、NP_Mobile.phpの削除とインストールをしたときに一時的にうまくいったかのような挙動を示すこともあった。
果ては、モバイル用に使用するスキンやテンプレートのlocaleが間違ってないかとか調べたがわからなかった。

　やはり、サーバ側の問題らしい。
　試行錯誤の結果NP_Mobile付属のindex.phpが置かれるディレクトリにphpの設定で文字コードを指定するように.htaccessを置くことで上記不具合を解決することができた。
　ほとんどのサーバではこのような不具合はないのかもしれないが､同じようなことでつまずいている方の参考になれば幸いである。

<IfModule mod_php4.c> php_value output_handler none php_value default_charset Shift_JIS php_value mbstring.language Japanese php_flag mbstring.encoding_translation On php_value mbstring.http_input pass php_value mbstring.http_output pass php_value mbstring.internal_encoding EUC-JP php_value mbstring.substitute_character none </IfModule>

php.iniを直接設定できればそれでもよいかもしれない。（そのほうがいいのか？）
私の利用しているサーバではphpinfo()したところ/etc/php.iniを読み込むようになっているようだ。
ただ、このまま/etc/php.iniを書き換えてしまうと、広範囲に影響しそうでいじれない。

　2005年9月28日現在､上記.htaccessはなくても文字化けが起こらない。
ただし、NP_Mobile付属のindex.phpのmb_convert_kana()にて元のエンコーディング形式がEUC-JPであることを明記した。