投稿日: 投稿者: 新造

Movable Typeを、無料でできるとこまで携帯対応にしてみた

このサイト　うっかり携帯で見ると
文字化けやらファイルサイズやら壮絶なことになっていたので、
携帯対応するようにカスタマイズ中です　→翌朝追記：いちおう終わりました
...and send me a link
↑カスタムに使うツールをダウンロード中。リンコは送らないよ。

以下、使ったプラグインや参考になった本など書いておきます

  • 携帯からのエントリ投稿やコメント送信は考慮してません。あくまで「読む」ところまで。
    MTは、CMS（べんり更新ツール）としてしか　使ったことないので、ここが限界っす;
  • 自己流無責任でやった記録です。話半分で、ヌル～くご参考いただければ幸い。
  • HTMLとかCSSとか、MTのテンプレートとかをいじれる（わかる）方向けです。
    ごめんちゃい。
  • 結局、自分のau携帯でしか表示確認できてません
  • 2009年6月現在、MT4.21での情報です（…アップグレード忘れてた！）
    【6月18日追記】
    さすがにアップグレードしました。後述の数点以外、とくに問題無さげです

（全面的に）参考にした記事

Movabletypeで携帯サイト作成
こちらの解説をベースに、バージョンアップでリンク切れてたプラグインを補遺したり
個人的に「これも必要やん」と思うプラグインを足したりしたのが、下記です

新しくテンプレートを、たとえば
「携帯用インデックス」と「携帯用個別エントリ」のように作っておいて、
トップページで携帯かPCか判別して振り分ける方法をとりました

携帯用のXHTMLを書く

参考書：『携帯サイト コーディング&デザイン』高木悠介さん著
無料と言いつつ本は買いましたw
現状がきっちりまとまってて読みやすいです。とりあえずこれ1冊でいけました
ドコモのCSSのヘコさと反比例したシェアはIE並みだ、という記述に苦笑

携帯での文字化けを直す

プラグイン：I18N Helper Plugin
MTのテンプレートは少なくとも自分ところの設定ではUnicode（UTF-8）なのですが
携帯ではShift-JISに変換してやる必要があります
テンプレの、日本語の文字が入る可能性のある箇所を
たとえば初期設定がUTF-8なら
<mtencodetext from=”utf-8″ to=”Shift_JIS”>で囲ってみてください

【6月18日追記】
全角「＆」が、エスケープなしの半角「&」に変換されるぽいです。まいったな

本文中の画像を自動でリサイズする

プラグイン：ResizeImage
ありがたや…このプラグインがなければこの記事は生まれなかった！
「写真5枚も10枚も使ってネタをやる」うちのよーなサイトには必須です。大感謝。
指定した箇所（本文とか）からimgタグを自動検出してリサイズ。
元画像にリンクを貼ることもできます
自分の場合、元画像も大きいので、ソースを1行だけ書き換えさせてもらって
サムネイルクリック後は下記の画像リサイズphpを通すことにしました

Smart Image Resizer
※エラー”Call to undefined function: imageconvolution”が出るときは、
320行目あたりの”imageconvolution”周りの処理をコメントアウトしてみてください
PHPのバージョンによっては対応してない画像補正なんだそうです

変にカスタマイズしたせいか　ときどき変換できてない画像があります;
【6月16日追記】何となく原因分かりました。altの中身の文字列です。
後述のプラグイン”zenkana”との相性かもしれませんが、たとえば半角のアスタリスク”*”が入ってるとドボンです

全角カナ→半角カナに変換

プラグイン：zenkana
必要に応じて。

PC用のページと携帯用のページに振り分ける

最初に挙げた書籍では　.htaccessを使う方法を解説してましたが
自分とこのサイト構成の場合、ディレクトリが混在しておかしなことになったので
トップページの前にindex.phpを挟むことにしました。

【9月21日追記】これだと、みなさんが見てリンク貼ってくれるのは
「リダイレクト後のページ」になっちゃって、意味ないので変えました。

  • トップページの、ソース1行目にPHPを書く
  • 携帯ならリダイレクト。PCなら何もしない
  • 必要に応じて、拡張子htmlでphpが動くように.htaccessに1行書いたり
    XML宣言をechoで出したりする

以下ソースです

<?php
$agent = $_SERVER['HTTP_USER_AGENT'];
if(preg_match('{^DoCoMo/[12].0}', $agent) ||
preg_match('{^(J-PHONE|Vodafone|MOT-[CV]980|SoftBank)/}', $agent) ||
preg_match('/^KDDI-|UP.Browser/', $agent) ||
preg_match('{^PDXGW/|DDIPOCKET;|WILLCOM;}', $agent)){
    header("Location: i/index.html");
    exit();
//} else{
//   header("Location: index.html");
//    exit();
//090921: 上記の理由で外しました
}
?>

必要な方いらっしゃるかどうか分かりませんが、
この記事のパーマリンクはこちら

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です