Ktai Styleでサイトが文字化けや真っ白になる人へ

【～はじめに～Ktai Styleとは？～】

Ktai StyleとはWordPress上で動作する携帯ブラウザで回覧すると携帯用の
表示に変換＋携帯ブログを構築してくれるプラグインのことです。導入方法はとてもシンプルです。

また、Ktai Styleに関する情報なども公式サイトが日本語のため、
とてもわかりやすく豊富な情報がそろっています。

～以下、Ktai Style公式サイトの引用です～

* 携帯電話で閲覧すると軽量化したサイト表示を行います。(フロントページのみならず、アーカイブページ、個別エントリーの URI も対象)

* ページ容量が大きい場合、端末に応じてページ分割を行います (5KB～50KB ごと)

* 要所要所で、携帯電話に応じた絵文字を使用しています (数字・矢印・時計・顔など)

* コメントや投稿本文に絵文字が使えます (設定変更が必要)。携帯電話での閲覧時は各社に応じた絵文字に変換し、PC やスマートフォンでの閲覧時はテキストに置換して表示します。

* 記事中の画像は、縮小してインライン表示するか (サーバー上もしくは Flickr の画像で 3G 端末等の場合)、画像へのリンクに変換します (それ以外の場合)

* i-mode, EZweb, Yahoo! ケータイ、ディズニー・モバイルの場合、外部サイトへのリンクは中継ページを出します。ウィルコム、イー・モバイル、その他の端末では直接リンクします

* 複数の携帯テーマをインストールして簡単に切り替えできます。携帯テーマは WordPress のテンプレート構造に準拠していて、容易に制作できます

* 簡単なウェブログ管理機能 (新規投稿・投稿編集・コメント管理など) があります。

* コメント投稿時にログインできます。登録ユーザーのみコメント可能な設定でも携帯電話からコメント可能です。

* 画像変換、PCサイト変換について、デフォルトでは外部サービスを極力利用していません。それらのサービスの信頼性・継続性に左右されることなく、安定して運用できます。

見ているだけでもすごそうな機能ですね。そして実際凄いです。

そういえば、
以前から制作者のYurikoさんはWordPressの公式フォーラムなどで見かけていたのですが、
Ktai Styleの作者さんだったとはしりませんでしたね・・・
（ＩＤが違っていたため気づきませんでした。＞＜）


それでは、実際にKtai StyleをWordPressにインストールさせていただきましょう。
利用方法はとっても簡単でシンプルです。



【Ktai Styleのダウンロード】

まず、Ktai Styleの配布サイトにてKtai Styleの安定版をダウンロードします。
※記事着手時3月30日では、1.71が最新でした。


【利用推薦環境～引用～】
WordPress 2.5 以降。2.7.x にも対応しています。WordPress 2.0～2.3.3 では
Ktai Style 1.48 をご利用ください。

PHP 4 では動かないようです。
動作確認は PHP 5.2.x で行なっているようですので、推薦環境としてはPHPのバージョンが
5.2.x以上が好ましいと言うことですね。

5.0.x, 5.1.x では動かないかもしません。残念ながら PHP 4 への対応予定はありません
(サーバー屋さんに PHP5 へのアップグレードを依頼してください)。



【インストール】

【Step1】
インストールの方法についてもとことんシンプルです。
まず、上記でダウンロードした。Ktai Styleを解凍して、WordPress内の
「plugins」のフォルダの中に「ktai_style」ごとアップロードします。

【Step2】
次に、WordPressの管理者画面にて「プラグイン」をクリックして下記のように「Ktai Style」を
「使用する」をクリックしてプラグインを有効にすればインストールは完了です。



とっても簡単に終わってしまいましたね。実際とってもシンプルです。作者様に感謝です。


さて・・・ここからが本題でPCインストール型のiモード　
HTML ブラウザにて自分のサイトが携帯からちゃんと表示されているかチェックさせていただきました・・・・

そのとき、Ktai Style導入後の画面が真っ白になる問題と
文字化けについての問題が発生しました。

まずはアクセスすると真っ白画面が表示されてしまう方についての
対処方法をご説明させていただきます。





【携帯から実際に動作しているか確認してみよう！】

・・・というわけで、今回はPCからでも携帯サイトの表示を見ることが出来る
「iモードHTMLシミュレータII」をインストールさせていただきましょう。

ちなみに上記携帯ブラウザはこれから、説明する方法を行うのに適しています。
なので、携帯ブラウザは上記のものをインストールさせていただきましょう。



というわけで、まずは自分のサイトに上記の携帯での表示をチェックできるブラウザで
画面が真っ白になってしまう人に対しての説明ですが、


もしかして、貴方の環境は自宅サーバー環境ではありませんか？

そして、上記のPC用の携帯ブラウザを同じルーター内のPCから回覧してはいませんか？


もしそうでしたら、これから説明する自分の状況と一致します。
そして、その解決策も恐らく一致するのではないかな～と思います。

それでは、まずは上記の画面が真っ白になってしまう問題についての説明です。





【画面が真っ白になってしまう問題について】

上記の問題はiモードHTMLシミュレータIIの方にPCブラウザ同様に
HOSTSファイルが参照されていないことが原因です。

上記の原因は下記画像の用にiモードHTMLシミュレータII側の設定の
「ブラウザ」→「オプション設定」→「ネットワーク設定」→「HOSTSファイルを参照するのチェックボックスをONにしてOKにします」

しかし、上記の設定だけでは自宅内からドメイン名でサーバーマシンにアクセスしただけでは
「ページが見つからない404」や「ルーターの設定画面が開く」という状態になってしまいます。

なので、これから設定する方法はPCで自宅内からでもドメインで
サーバーマシンにアクセスしたい人用に行わなければいけない設定です。

この設定をしていないと先ほども書いたように「ページが見つからない404」や
「ルーターの設定画面が開く」という状態になります。

～以下・自宅サーバーで行こうより～今回の設定用に一部書き換えてあります～
それとルーターは「LAN（自宅内）」と「WAN（インターネット側）」を明確に区分しているため、
入ってきたポートへパケットを戻すことはありません。
なので、自宅内からドメイン名でサーバーマシンにアクセスしようとすると、「ページが見つからない」や「ルーターの設定画面が開く」のは正しい結果であり、自宅内（LAN上）ではプライベートIPアドレスを使えば（見かけ以上の）問題はありません。


そして、
自宅内から同じLAN上のサーバーへドメイン名を使ってアクセスする方法ですが、
「hostsファイルを書き換える」「外部のプロキシサーバーを利用する」
「内向きDNSを立てる」の３つが有力です。

今回は1番目のiモードHTMLシミュレータIIでも利用できるHOSTSファイルを使用するため、
hostsファイルを書き換える方法をご説明します。


【Step1】
まずは以下の場所にあるhostsファイルを開きます。

Windows 9x系 C:\Windows\hosts
Windows NT系 C:\WINNT\system32\drivers\etc\hosts
Windows XP C:\WINDOWS\system32\drivers\etc\hosts
Linux /etc/hosts
Windows Vista C:\Windows\System32\drivers\etc\hosts

このファイルをメモ帳などのテキストエディタで開きます。



【Step2】
このファイルに、サーバーのプライベートIPアドレスとドメイン名を追記します。

例えば y-kit.jp というサーバーを 192.168.0.10 のPCで立てているなら、

　　127.0.0.1　　localhost
　　192.168.0.10　　y-kit.jp

という感じに設定して保存します。ダイナミックDNSのドメイン名でももちろんOKです。

なお、自分のサーバーのプライベートIPアドレスなどがわからない場合はそのサーバーのPCの
コマンドプロンプト（cmd)で「ipconfig」と入力することで簡単に調べることが出来ます。

このHOSTSファイルを書き換えて自分のLAN中のサーバーマシンにアクセスるという方法は、
ドメイン名の解決（IPアドレスへの変換）に DNSサーバーを使わず、
PC内のhostsファイルを使うことで、ルーターを回避しています。

今回の例で言えばこのPC内のHOSTSファイルを使うことにより
「iモードHTMLシミュレータII」でもルーターを回避することが出来るようになります。

要約すると、、デフォルトではiモードHTMLシミュレータIIはHOSTSファイルを読み込まないため、
上記（iモードHTMLシミュレータIIはHOSTS）の設定が必要になっていた・・・というわけです。



さて、上記の設定が終わりましたら
携帯ブラウザから自分のサイトにアクセスさせていただきましょう。
（アクセスするURLはPCと同じアドレスでOKです）

どうでしょうか？今度はちゃんとサイトが表示されているのが確認できると思います。






【Ktai Styleでの文字化けにする人へ】

もしかして・・・その自サイトにアクセスしたときの文字化けというのは
このように表示されていませんか？



もし、Ktai Styleにて上記のような表示でしたら
残念ながら管理人と同じような症状の可能性があります＾＾；

この症状に関しては大変お恥ずかしい話なのですが、管理人の凡ミスが原因でした＾＾；

この文字化けの問題を解決するために公式サイトのよくある質問を
みて書いてある設定などを試してみたのですが、サーバーの設定は問題ない・・・
PHPは問題は無い（実際はあったのですが・・・）DB(データベース）にも問題は無いし、
各テーマなどにも問題はありませんし、不正なXHTML文法を吐いているわけでもない・・・

・・・といったところで途方に暮れてしまい、検索エンジンにてKtai Styleの文字化けに関する
資料などを回覧させていただいたところ、検索エンジンの十数ページ目ぐらいに、
今回の問題の解決のヒントとなる資料を見つけることが出来ました。

「あれ？もしかしてこの状況当てはまる？」

と思い、公式のよくある質問部分をもう一度見てみたところ
この記述に（；゜〇゜)ハッっとしました。その記述部分とはここのことです。

＞サーバーの php.ini や .htaccess で mbstring.encoding_translation = Off かつ mbstring.http_output = pass にしてください。Ktai Style は、携帯電話向けに Shift_JIS コードに変換していますが、encoding_translation = On で http_output が UTF-8 や EUC-JP になっていると、それらの文字コードに再変換されてしまい、携帯電話で見ると化けてしまいます。

＞php.ini や .htaccess で mbstring.encoding_translation = Off かつ mbstring.http_output = pass にしてください。Ktai Style は、携帯電話向けに Shift_JIS コードに変換していますが、encoding_translation = On で http_output が UTF-8 や EUC-JP になっていると

＞mbstring.encoding_translation = Off かつ mbstring.http_output = pass

※大事なことなので三回引用しました。



あれ・・・？(;^_^A アセアセ…



mbstringって・・・・もしかして・・・mbstring拡張モジュール使っています・・・？
もしかして・・・mbstrign拡張モジュール自体が有効になっていないとかそんなことってあります？





(;^_^A アセアセ…・・・・・・・・・・・・・・・・





まさかな～♪とは思いphp.iniの内容をチェック・・・





すると・・・・・・・・




・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・









（；゜д゜）・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・





(;ﾟДﾟ) (ﾟДﾟ;) (;つД⊂)ｺﾞｼｺﾞｼ (ﾟДﾟ)え？













・・・・・・・・・・・・・・・・




えぇ！！？∑(((((ﾟдﾟ;ﾉ)ﾉ




帰りたい・・・本当今すぐ帰りたい・・・・(; ;)




・・・というわけで、上記のように
mbstring拡張モジュールが有効になっていないことが根本的な原因でした。

要約しますと、今回のKtai Styleでの文字化けの原因はサーバー側の「php.ini」の設定にて
「;extension=php_mbstring.dll」の「;」←のコメントが削除されていなかったため、
mbstring拡張モジュール自体が有効になっていなかったというオチです♪ちゃん＼(＾o＾)／ちゃん♪

というわけで、初歩中の初歩の盲点だった、部分でしたので、他の設定を調べるのに
多い時間を割いていました・・・（なんでこんなとこに気づかなかったんだろ・・・）

案外このmbstring拡張モジュール自体の設定にて躓いている（見落としている）方は
多いのではないかな～とおもったりしました。

ちなみに、日本のレンタルホスティングサービス（レンタルサーバー）などでは
http_output を UTF-8 に固定していたりしてKtai Styleが文字化けしたりするケースが
多いのですが、海外の
レンタルサーバーの方はmbstring拡張モジュール自体が有効になっていない場合などがあります。

php.iniの設定などは殆どのレンタルサーバーではそのサーバーの
管理者しか行えないようになっていると思いますので、日本の
レンタルサーバーサービスを契約している方はそのサーバーの管理者さんに、
「あの・・・そちらで管理しているphp.iniのmbstring拡張モジュールを有効にしていただけないでしょうか？」

などという風に、まずは相談を持ちかけさせていただきましょう。
しかし、多くのサーバーではphp.ini自体は共有で扱っていることが多いため

「共有で扱っているので無理です」

という何かのサーバーの設定そのものを変える場合はこのような回答をいただくことなども
あると思いますので、そこは契約している管理者の方によ～く問い合わせてみて下さい。

ついでにPHPのバージョンなどが古い場合などは最新のPHPなどに
バージョンアップしていただくように頼んでみましょう。

ちなみに、現在（3月30日)のPHPの最新バージョンがLinux系列の方がPHP5.2.9で
Windows系列の方がPHP5.2.9-1となっています。
最新のPHPのバージョンのダウロード

あと、チェック以外にはあまり需要がないとは思いますが古いPHPのバージョンは
コチラで配布されています。
昔（古い）PHPのバージョン

※ダウンロードさせていただくPHPのバージョンは常に最新にしましょう。

PHP5.2.9-1って一体何だろう？と思いましたので、少しバージョンアップの
内容を調べさせていただいたところ
どうやら、Curl(プログラミング言語）のセキュリティーについて修正されたようです。

最新の公式文章は以下を参考にしてみて下さい。
PHP公式サイト

う～ん・・・どうやら、新しいバージョンのPHP5.3が開発されているようですね。
バージョンアップと聞くとなぜか楽しくなってしまいます。


っと、少し話がずれてしまいましたが、もしKtai Styleにてmbstringが初めから有効になったいて
Ktai Styleが文字化けする方は
Ktai Style公式ページの「よくある質問」部分にて書かれている

＞サーバーの php.ini や .htaccess で mbstring.encoding_translation = Off かつ mbstring.http_output = pass にしてください。Ktai Style は、携帯電話向けに Shift_JIS コードに変換していますが、encoding_translation = On で http_output が UTF-8 や EUC-JP になっていると、それらの文字コードに再変換されてしまい、携帯電話で見ると化けてしまいます。

という記述がドンピシャだと思います。





【後書き～余談～】

一昔前までWordPressでの携帯に対応させるプラグインといえば、
Mobile Eye＋などが日本では有名でしたが、この「Mobile Eye＋」のプラグインは
外部サイトとの通信を行うときに、2CHをよく利用する方はわかると思いますが、
アダルトなどの宣伝広告を通してしまうため、利用にはあまり好ましいとは言えませんでした・・・

また、完全に信頼できない外部サービスとの通信をデフォルトとしている点など・・・
多少のリスクの上で成り立っている状態となっていました・・・

そして、現在では既に開発が終了してしまっているため、現在のWordPressとは異なる
コメントやトラックバックの仕様があります。

なので、今回は日本人にも扱いやすくカスタマイズも豊富で、信頼性の高い
Yurikoさん作のKtai Styleの方を紹介させていただきました。
（公式ドキュメントが日本語というのは大変魅力的ですしね・・・）
制作者Yurikoさんの公式サイト

それでは、ここら辺で「Ktai Styleで自サイトにアクセスすると画面が真っ白＆文字化けする人へ」の解説を終わらせていただきたいと思います。

関連記事：
FC2携帯共有テンプレート「Mobile_Truth_Blue」審査合格