Tags:Ktai Style
Ktai Style バージョン1.80 ベータ1 を使用してみた
というわけで、WordPress
の携帯対応プラグインである『Ktai Style バージョン1.80 ベータ1』を使用してみました。
さっそく、「Contact Form 7」への対応などを試してみました。上手く動作しているかと思いきや、届いたお問い合わせメールの一部が文字化けしていた。文字化けした部分を推測すると、「能」や「表」といった文字……なるほど、あの厄介な「0x5c問題」ですね。
これは、どちらのプラグインの問題かな……と思いながら色々試していると、「Ktai Style バージョン1.80 ベータ1」のコメント投稿では、文字列に「0x5c文字」が含まれていると文字化けするようになっていました。ちなみに、サイト内検索では文字化けしないようです。
バージョンダウンは面倒だし、しばらくはこのままで運用する予定なので、もしコメントが文字化けした場合はすみません。いただいたコメントが復元できる場合は、後から修正しておきます。
Ktai Style バージョン1.71 を使用してみた
というわけで、WordPress
の携帯対応プラグインである『Ktai Style バージョン1.71』を使用してみました。リリース直後にインストールはしていたんですが、改めて新機能の動作などを確認してみました。で、気が付いた点や自分で修正てみた部分を書いていこうと思います。
ks_posts_nav_dropdown() で1ページ目にリンク
2ページ目以降にリンクする場合は、『?paged=2』が『/page/2/』へと301リダイレクトされるのだが、1ページ目のリンクは『?paged=1』のままでリダイレクトされないようですね。このリダイレクト処理は、Ktai Style ではなく、WordPress 本体が処理をしてるっぽい。
なんとなく、『?paged=1』のままになっているのが嫌だったので、自作プラグインをつくってリダイレクトするようにしてみた(自信がないのでソースは非公開)。
docomo実機の場合は、301リダイレクトさせない
docomo実機の場合、301リダイレクトをすると『サイトが移動しました』といったメッセージが表示されてしまうので、302リダイレクトに出来ないかなと思って方法を調べてみた。
『wp_redirect_status』のフィルターフックでステータスコードを変更すれば良さそうだったが、実機かどうかの判断をどうしようかなと迷った。
if ($status == 301 && is_ktai() == 'DoCoMo') {
global $Ktai_Style;
if (isset($Ktai_Style->ktai) && $Ktai_Style->ktai->in_network()) {
return 302;
}
}
return $status;
こんな感じにしてみた。多分正常に動作している……はず(笑)
alt="" の画像も表示させる
ちょっと前のバージョンから仕様変更されていたようですが、『alt=""』と記述された画像は表示されないようになっているようですね。このサイトで使用していたアフィリエイト画像ソースが『alt=""』だったので、いつの間にか表示されないようになっていた。
これは、『image_to_link/ktai_style.php』のフィルターフックで優先順位を9以下に指定して、表示させたい画像URLの場合はNULLを返すようにすれば良いっぽい。
外部リンクのアイコンマーク
外部リンクの文字列の前には、矢印マークの絵文字アイコンが付加されるのだが、『$mobile_same_url』で指定されたURLの場合はアイコンが付加されないようだったので、『ks_karuta_external_link/ktai_style.php』のフィルターフックを使用して力技で修正。アイコンをリンク文字列の前に表示させるようにしてみた。
個人的には、管理画面でURL設定したもの以外は、前にアイコンマークをつけて欲しいかなと思いました。
Ktai Style バージョン1.61-rc1 を使用してみた
というわけで、WordPress
の携帯対応プラグインである『Ktai Style バージョン1.61-rc1』を使用してみました。
個人的に、今回のバージョンアップで一番嬉しかったのは font タグが入れ子になっていてもスタイル変換してくれるようになっていることですかね。ただ、au 端末用に<font size="-1">がスタイル変換されると、<small><font>という、空の font タグが現れるようでした。動きには全然問題なさそうだけど、一応。
バージョンアップのついでに、テーマファイルを修正して、<img localsrc="" />の記述で絵文字を増やしてみたのだが、docomoの実機だと思惑と違う絵文字が出力されてしまうものがありました。
具体的には、<img localsrc="48" />で『チャペル』を記述すると『半月』絵文字が表示され、<img localsrc="784" />で『mail to』を記述すると『phone to』絵文字が表示されていました(※ 絵文字名称は、docomoでの名称)。
とりあえず、i-mode.php のファイル内で、『チャペル』が『d097』になっている箇所を『d208』に変更して、『mail to』が『d105』になっている場所を『d106』してみる。フィルターフックを使えば良いんだろうけど、面倒だったので直接修正(笑)絵文字の変換は、Ktai Style 独自のものということらしいので、これが意図した変換だったのであればすみません。
また、以前書いた hr タグが変換されてしまう件(2009-02-06 Ktai Style バージョン1.6-beta3 を使用してみた)は、僕が functions.php にて記述している処理が原因でした。コメント削除したり、独自にコードを変換したりしているので、それが悪影響を及ぼしていました。調査不十分の状態で、Ktai Style の不具合であるような書き方をしてしまい申し訳ありませんでした。
Ktai Style バージョン1.6-beta3 を使用してみた
というわけで、WordPress
の携帯対応プラグインである『Ktai Style バージョン1.6-beta3』を使用してみました。様々な要望に対応していただきありがとうございます。
分割時の罫線をカスタマイズ出来るようになったので、早速修正してみました。ついでに、分割のナビゲーションメニューを修正したり、出力時にコメント部分を削除するようにしてみた。これで、hr タグに色を付けることが出来るようになったのだが、ひとつおかしいところに気が付いた。
ただ、『iモード HTML シミュレータ』で確認したところ、<hr color="red" /> とテーマファイル内で色を指定した場合、全て削除されて <hr> に変換されているのだが、start paging や end paging で同様の記述を行うと、<hr color="red" /> のまま出力されるようでした。まぁ、最近の端末だったらあまり関係なさそうだからいっか。
そう言えば、見たことがないユーザーエージェントのロボットがサイトを巡回していた。
SAMSUNG-SGH-E250/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 UP.Browser/6.2.3.3.c.1.101 (GUI) MMP/2.0 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)
名称から察するに、サムスン携帯電話のユーザーエージェントでアクセスするGoogleロボットでしょうか。現バージョンの Ktai Style では、これをモバイル端末だと判別しないみたいでした。
Ktai Style でテーマをつくっていて気が付いたこと
現在、Ktai Style 1.61-beta1でテーマを作成・修正しているところですが、気が付いたことを箇条書きしておきます。
- テーマの作成途中で、バージョン1.61にはインラインスタイルへ自動的に変換してくれる機能があることを知った(汗)
- まぁ、別に良いか……と思っていたけど、互換性当を考えて font タグ等を使って記述した方が良さそう
- hr タグにインラインスタイルを記述していても、自動変換で消されてしまう(コメントにて報告済み)
- redir.php に記述されたコードは、インラインスタイルに自動変換してくれないっぽい
- font タグが入れ子になっていると、変換がおかしくなる
- Softbank 3G は、『display:-wap-marquee』が使えないらしいので、機種判別して maequee タグを使うしかないのかな……
- ページ分割時の文言は、翻訳ファイルを修正しないと変更できない。また、<hr />タグが出力されるのは固定っぽいので、プログラム部分を直接しなければレイアウト修正できない
- 普段のページ遷移に『#』『*』の accesskey を使用していると、ページ分割時に accesskey が重複してしまう
- body タグの link は『a,a:link {color:~』のスタイルシートに置き換えられるので、<a id="">や<a name="">で囲われた文字の色も変わる場合がありそう(これが良いのか悪いのかは不明)
- 個人的に、function.php で変数を色々とつくっておいて、必要なときに各テンプレートファイルから global で呼び出すとテーマを修正しやすい気がした
- 『<!--start paging-->』と『<!--end paging-->』は、ちゃんと意味があるコメントだったのか……間違えて削除していたぞ(汗)
- function.php に以下のコードを記述して、MIMEタイプが『application/xhtml+xml』ではないときに、スタイルシート関連の記述を削除してみた
function ks_karuta_replace($buffer) {
if (! ks_applied_appl_xhtml()){
$buffer = preg_replace('!<([a-z]+?[^>]*?) style="[^>]*?"([^>]*?)>!', '<$1$2>', $buffer);
$buffer = preg_replace('!</?span( [^>]*?)?>!', '', $buffer);
}
return $buffer;
}
add_filter('raw_content/ktai_style.php', 'ks_karuta_replace');
最もCSS、XHTMLに融通が利かないdocomoで実機確認してはいるけど、XHTML非対応端末や他の機種でちゃんと表示されているかが不安です。まぁ、今のところ特にクレーム等は来ていないので、それなりにちゃんと表示されている……と願っておきます(笑)
Ktai Style のテーマを修正してみた
『Ktai Style 1.61-beta1 配布』ということで、さっそくダウンロードして、ついでに久々にテーマを色々といじってみた。
今までは、HTMLでテーマファイルを書いていたんですが、今回はXHTMLとCSSを使って作成したので、もしかしたら表示が変になっているところがあるかもしれません。実機はdocomoでしか確認しておらず、auとsoftbankはエミュレーターでの確認となっているので、おかしいところがあったらご連絡いただけると嬉しいです。
Ktai Style 1.60 を使用してみた
というわけで、WordPress
の携帯対応プラグインである『Ktai Style バージョン1.60』を使用してみました。外部サイト接続確認ページのテンプレート化など、色々と欲しい機能が増えていたのでさっそくバージョンアップ。
バージョンアップしたファイルを確認すると、やはりテンプレートの修正箇所が多いですね。僕の場合、テンプレートを自分で作りこんでいる部分が多いので、ちょっと修正に苦労しました(汗)
で、今回新たに増えた外部サイト接続確認ページ用テンプレート『redir.php』も試してみました。今までは、フィルターフック関数で編集するしかなかったんですが、それだと出来ることが制限されているので拡張しづらかったんですよね。で、早速導入してみると、ページが真っ白で動かないっ!?
……よく見たら、使用した classicテーマの redir.phpファイルで、titleタグが閉め忘れているだけでした。ちょっと焦りました。
2009-01-23 追記
この不具合は、当日中にすぐ配布ファイルが差し替えられて問題解決済みです。今から、色々とサイトを巡って動作確認でもしてみようかと思います。
mixiモバイルアクセス時に、ktai styleが動作するようにしてみた
最近、アクセスログに見慣れないユーザーエージェントが増えていた。
mixi-mobile-converter/1.0 (http://mixi.jp/)
mixiが外部検索用にロボットを動かしているのかな……と思っていたのだが、どうやら違うようで、これはmixiモバイルの外部リンク変換サービス時のユーザーエージェントのようだ。2008年9月から開始していたんですね……mixiあんまりやらないから知らなかったよ。
僕はmixiでは、このブログを表示するような設定にしているので、早速mixiモバイルから自分のサイトへとアクセスしてみた。
すると、携帯対応プラグイン「Ktai Style 1.45」での表示画面ではなく、パソコンから見た表示画面を携帯電話向けに変換されたページが出力された。画像縮小、リンクは取り除かれるなどの処理がされているようです。
そこで、mixiモバイルから表示した場合に、「Ktai Style」が動作するように設定してみた。やり方は、プラグインに付属しているマニュアルを見ればすぐに分かりますが、WordPressインストールフォルダ直下の、my-hacks.php に以下のコードを追加します。普通はファイル自体が存在しないはずなので、その場合はファイルを新規作成します。
<?php
function ks_detect_mixi($ktai, $ua) {
if (preg_match('/^mixi-mobile-converter/', $ua)) {
if ($ktai) {
unset($ktai);
}
$ktai = new Ktai_Service_Other($ua);
}
return $ktai;
}
add_filter('detect_agent/ktai_style.php', 'ks_detect_mixi', 10, 2);
?>
これで、『レガシーな my-hacks.php ファイルを使用』に設定されていれば、mixiモバイルからWordPressにアクセス時に、「Ktai Style」が動作するようになります。
ちなみに、mixiモバイルからアクセスされる場合は、毎回 robots.txt をチェックしているようなので、拒否したい場合は、
User-agent: mixi-mobile-converter
Disallow: /
と、robots.txt に記述すればOKのようです。
2008-12-12 追記
『Ktai Style バージョン 1.46』で、正式に対応していただいたので、バージョン1.46 移行は上記のようなことをする必要はありません。
Ktai Style 1.44 を使用してみた
というわけで、WordPress
の携帯対応プラグインである『Ktai Style バージョン1.44』をダウンロードしてアップグレードしておきました。まぁ、実は数日前にアップグレードしておいたんですけどね。
で、動作確認がてら、実機で色々とサイト内を見ていたのだが、アップロードしたpng画像が表示されていないところがあった。Ktai Style には、DoCoMo端末から閲覧した場合に、表示できないpng画像をgif画像に変換してくれるという嬉しい機能があるのだが、全く表示されない状態になっていた。
調べてみると、画像ファイルが生成されていないのではなく、htmlコードがpngからgifに変換されていないのが原因のようだった。そこで、プラグインのソースを色々と眺めていると、『operators/i-mode.php』ファイルの1751行目付近の
$buffer = preg_replace('!<img src="([^>]*?)\.png"!', '<img src="\\1.gif"', $buffer);
がうまく働いていないようだった。img の直後にsrc が来るとは限らないですね。今回の場合は、has_orig、title、class などの要素がsrc よりも先に来てしまっていたために、うまく置換できていなかったようでした。
Ktai Style 1.43 を使用してみた
というわけで、いつもお世話になっているWordPress
の携帯対応プラグインである『Ktai Style バージョン1.43』をダウンロードしてアップグレードしておきました。
変更点はリンク先を見ていただければ分かるんですが、僕がプラグインを使用する上での大きな変更点は特にないようでした。ただ、動作確認として色々とサイトを見ているとちょっとおかしなことに気が付いた。
外部へのリンクをクリックしたときに、タイムアウトしてしまう場合があるのだ。中継ページの redir.php に行く前の状態で止まってしまう(携帯端末の接続時間内にリンクできずにエラーになる)。通信状況が悪いからページ遷移できないというわけではなさそうだったので色々と調べてみたところ、リンク先のサイトによってはうまくいくので、media="handheld"のチェック部分でタイムアウトしているのかなと予想し、redir.php のソースを修正しながらテスト。
結果としては、redir.php のdiscover_mobile()関数内にある、
if ( $byte_count > $timeout_bytes ) {
の直前部分に以下の行を追加することで、タイムアウトしてしまう現象は解消されました。
if (preg_match('!(</head>|<body[ >])!i', $contents)) {
return false;
}
多分、media="handheld"がない場合に、コンテンツ内容をチェックし続けて遅くなっていると思い、このような処理を追加してみました。タイムアウトになるサイトとならないサイトの違いは良く分からなかったのだが、</head>や<body>の後にmedia="handheld"が来る事はないような気がするので、このような処理を加えてみました。
Ktai Style 1.41 を使用してみた
というわけで、WordPress
の携帯対応プラグインである『Ktai Style バージョン1.41』がリリースされていたのでアップグレードしてみました。以前、ブログに書いていたフィルターフックの不具合(2008-06-19 Ktai Style 1.40 を使用してみた)にも対応していただき感謝です。
ちなみに、バージョン1.40を使用していた数日前に気がついたんですが、YouTubeへの動画にリンクを貼って、IDに対応する動画なく『HTTP/1.1 303 See Other』が返されるときに、redir.php がタイムアウトすることがありました。だけど、バージョン1.41にしてみると、その現象がなくなって正常に動作するようになっていたので、
リンク先に Mobile Link Discovery があるかの確認で、相手先サーバーがチェンク形式のデーター (Transfer-Encoding: chunked) を返したときに、モバイル版ページの URL をうまく抽出できないことがあった不具合を修正しました。
の修正によって解消されたんでしょうね。
あと、さっき気がついたんですが、<a name="test"></a>のように、aタグにhref要素がない場合でも、redir.php の外部リンクへと文字列置換されるみたいです。道理で、『続きを読む』の記事の時に外部リンクを表す絵文字が表示されるわけだ。name要素自体がなくなってしまうから、多分バグ……なんでしょうかね。
また、display_errors Onの状態で、プラグイン作者さんのサイトへredir.php を使用してリンクすると、104行目のfread()でエラーが大量発生……まぁ、display_errors Offの状態だと問題なく動作するから別に良いんですけどね。
Ktai Style 1.40 を使用してみた
というわけで、WordPress
の携帯対応プラグインである『Ktai Style バージョン1.40』がリリースされていたのでアップグレードしてみました。以下、ちょっとした感想……
『続きを読む』の部分が、以前はパソコン絵文字へと変換されていたのだが、矢印絵文字へと変換されるように変わっていた。どうやら、外部リンクを示す絵文字と同じものが表示されるみたいですね。
アップグレードしたついでに、フィルターフックの『mobile_same_url/ktai_style.php』を利用して携帯用サイトのアドレスを追加したのだが、何故かうまくいかなかった。『shrinkage.php』ファイルの『$mobile_same_url』配列にURLを無理やり追加したら、うまくいくんだけどなぁ……僕のやり方がおかしいのかな?
テーマファイルが見やすくなっていた。僕は、かなりテーマファイルをカスタマイズしているので、他のテーマと見比べながらインデントした。あ、いつの間にか『FALSE』が『false』に変わっている(笑)
というわけで、テーマファイルを色々といじっているので、もしかしたらどこかおかしくなっている部分があるかもしれません。何かありましたらご連絡ください。
すみません、携帯からブログにコメントできなくなってました
このブログは、WordPress
というブログツールで作成されていて、携帯用のページは Ktai Style というプラグインを使用しています。しかし、どうやら数日前にバージョンを1.35にアップしたときから、携帯から書き込みが出来ない状態になっていたようです。
何が悪いのかは分かりませんが……「$allowedtags」の処理がうまくいっていないエラーが出ていたので、応急処置としてとりあえずコメントアウト。
ここ数日間で、携帯からコメントをしようとしたけどうまくできなかった方……もうしわけありませんでした!多分、今は大丈夫だと思います。
ブログの携帯用レイアウトを変更
このブログは、WordPress
というブログ作成ツールを使用しているわけですが、デフォルトでは携帯向けにサイトの内容を変換して表示する機能が備わっていません。
ということで、今までは『Mobile Eye+』というプラグインを使用して携帯用コンテンツを表示していましたが、今日から『Ktai Style』のプラグインに変更してみました。絵文字を使ってコンテンツが表示されていると思いますが、コメントをするときに絵文字が使えないのは変わっていないのでご注意を。
何か、不具合や表示がおかしいところがあればご連絡いただけるとうれしいです。僕はDoCoMoユーザーなので、auやSoftbankで動作確認をしておらず、ちゃんと表示できているのかがちょっと不安です。