Movabletypeで携帯サイト作成

Movabletypeで作成したサイトを、Movabletypeの機能を利用して、携帯向けにも公開した。その方法を紹介する。

※今回はMT3.xを利用した方法。考え方だけ理解できれば、MT4.xにも適用できるはず。

参考）本ブログの携帯版http://www.web2-labo.com/m/

MT4iの致命的な弱点
当初はMT携帯サイト化用の超有名なスクリプト「MT4i」を利用した。

だが、MT4iは、MT最大の利点である「静的htmlファイル生成」を行わないため、携帯からアクセスするとメチャクチャ重くて却下。

MTの機能をフル活用
良く考えてみたら、Movabletypeの機能を上手く使えば、PC/携帯両方向けのhtmlファイルを同時に生成できる。

※当方法は、画像サイズ変換にPHPを利用するため、ご利用のサーバーがPHPを利用できることが前提。

1)携帯サイト用テンプレートを追加
携帯サイト用テンプレートファイル「mobiletemplateforMT3.zip」をダウンロードする。

テンプレートは「euc-jp版」「utf-8版」がある。ご自分のブログに合わせて選択する。

MT管理画面から、各テンプレートファイルのコードを追加する。

テンプレート⇒インデックス

テンプレート名	出力ファイル名
携帯・メインページ	m/index.html
携帯・月別ページ	m/month.html

テンプレート⇒アーカイブ

テンプレート名

携帯・エントリー・アーカイブ

携帯・カテゴリー・アーカイブ

携帯・日付アーカイブ

テンプレート⇒モジュール

テンプレート名

adsense

foot_m

2)マッピングを新規作成
設定⇒公開⇒アーカイブ・マッピング（詳細モードに切り替え）より、マッピングを下記設定の通りに新規作成する

アーカイブの種類	テンプレート	出力フォーマット
エントリー	携帯・エントリー・アーカイブ	カスタマイズする⇒m/<$MTEntryID$>.html
カテゴリー	携帯・カテゴリー・アーカイブ	カスタマイズする⇒m/cat_<$MTCategoryID$>.html
月別	携帯・日付アーカイブ	カスタマイズする⇒m/%y_%m.html

3)プラグインを追加
下記プラグインを全て追加(mtフォルダ > pluginフォルダにアップロード)

zenkana
全角を半角に変換

MT-I18N
文字コードを変換

MT Regex Plugin
正規表現を使えるようになる。インストールの詳しい方法はこちらを参考に

PreviousNextInCategory.pl
前後エントリへのリンクを生成できる。　※上記リンク先でエラーが出るようであれば、こちらを試してみてください。⇒PreviousNextInCategory.zip

4)画像変換スクリプト設置

Movabletypeで携帯サイト作成-「画像変換スクリプト設定編」-をご覧ください。

5)再構築
元サイトの配下に「m/」のディレクトリがができ、その中身がモバイルサイトとなる。
元サイトが「http://www.sample.com/」であれば、モバイルサイトは、「http://www.sample.com/m/」となる。

6)カスタマイズ
PCサイトと同様に、テンプレートを編集すればデザインのカスタマイズが可能。

知っておくと便利なTipsはこちら。
・PCページからのリダイレクト方法

・携帯用アドセンス表示

私はこの本で携帯サイトの作り方を勉強しました。

・携帯サイトAtoz

最終更新日:2010.1.17 | コメント(3) | トラックバック(0) | MTで携帯サイト