トータルWEB トップ > ちょっとテクニカル > Movable Typeで携帯サイトに対応

Movable Typeで携帯サイトに対応

PCサイトと同時に携帯サイトも自動で作成したいとの要望をお持ちの方も多いと思います。

特にテキスト中心のコンテンツですと、携帯用にレイアウトを変えるだけで、コンテンツをそのまま流用できるケースが多くあります。

そのような場合、Movable TypeでCMS(コンテンツ・マネジメント・システム)サイトを構築していると、簡単にモバイル対応にすることが可能です。

携帯専用サイトとして構築することも出来ますが、ここでは、PCと携帯の両方に対応する例を紹介します。コンテンツの内容やサイトの構成などにより構築方法は検討してください。

日記系のサイトを簡単に携帯対応

日記形式か、あまりカスタマイズしていないブログであれば、利用実績も多く無料で利用できますのでお勧めです。

⇒ MT4i/MovableType用 携帯電話向け変換プログラム

商用サイトでの利用ですと、これから紹介する「携帯用のテンプレート」を用意する方が自由度も高く、目的のサイトが構築しやすいかもしれません。

アフィリエイトサイトの携帯対応

MTでアフィリエイトサイトを作成運営している方向けに、専用のプラグインがいくつか提供されていり、PC用の記事を書くと自動で携帯用のページも作成される便利なものです。

⇒  PC&携帯サイト同時生成ツール~ツインビルダー for MT

PCと携帯でアフィリコードを別けたり、携帯アドセンスにも対応しているこのプラグインがお勧めです。

携帯用のテンプレートを作成する

Movable Typeでは、1つのエントリーに対して複数のテンプレートを結びつけることが出来ますので、PCサイト用のテンプレートとは別に携帯用のテンプレートを用意することで、携帯用ページも同時に作成することが可能です。

MT4iでは実現できなかった自由なレイアウトが可能になる点が大きな違いとなります。

携帯の文字コード

MovableTypeは、デフォルトの文字コードが UTF-8 となっており、そのまま使用されている方が大半だと思います。しかし、携帯では、全ての端末でUTF-8は利用できず、Shift_JIS だけが利用できる機種も多いですから、そのままでは利用できません。

新規にサイトを作られる場合には、携帯に文字コードを合わせるShift_JISとするのもの良いでしょう。
既に構築済みのサイトの文字コードを変換するには、データベースの内容を書き出し、文字コードを変換してから再構築する必要があります。

また、MySQL4.xでサーバーの環境やMovable Typeのバージョンの組み合わせにより、Shift_JISの場合に一部文字化けすることがありますので、充分な確認を行ってください。

PHPで文字コードの変換をして出力する

UTF-8で作成された内容を表示する段階でPHPの機能を利用しShift_JISに動的に変換して出力する方法です。
テンプレート内で全ての出力に対して、文字コードの変換を行って出力することになります。

PHPが利用できるサーバーの利用が前提とはなりますが、ほとんどのレンタルサーバーでPHPは利用可能となっていますし、Movable Typeの機能だけでは対応しきない場合にも細かな対応が可能ですのでお勧めです。

エントリータイトルを変換して出力する例
<?php echo mb_convert_encoding("<$MTEntryTitle$>", "SJIS", "UTF-8"); ?>

コンテンツからHTMLを取り除き文字だけにする例
<?php echo mb_convert_encoding(strip_tags( "<$MTEntryBody$>", "<br>"), "SJIS", "UTF-8"); ?>

これだけですと使用されている文字などにより正しく変換されない場合がありますので、
html_entity_decode()やencode_html="1"などを組み合わせることになります。

使用できる画像フォーマットやサイズ

携帯では、キャリアや機種により表示できる画像のフォーマットに大きな違いが有ります。
i-modeだとGIFとJPEG、ソフトバンクはPNGしか表示できない機種が多かったなど、全ての機種に対応しようとすると、機種ごとに画像を用意するか、表示の時に機種情報を見て画像を変換するなどの対応が必要となりますが、画像変換を独自に行うには別途システムを開発するなどコストがかかります。

画面のサイズも初期のi-modeは横幅が96ピクセルでしたが、最近主流のQVGAだと240ピクセルまで大きくなっています。

どの機種まで対応するかは、サイトの運営方針や考え方によりますが、比較的新しい機種だけに絞って対応しても利用者の大半はカバーできると思われます。

JPEG画像で横幅160ピクセル程度を1つの目安として画像を用意することを検討されると良いでしょう。

表示で出来るページサイズ(バイト数)も新旧の機種で大きな違いがありますから、なるべく小さくするように心がける必要が有ります。

公認サイト並みにしっかり対応

  • キャリアや機種ごとの細かな対応を行いたい。
  • やはり携帯サイトでは「絵文字」が使いたい。
  • PCサイトで使用した大きな画像を自動で変換して表示したい。
  • 新しい機種では出来るだけ綺麗に画像を表示したい。
  • 出来るだけ多くの機種に対応したい。
  • 古い機種でもページが途切れることなく表示したい。

など、公認サイト並みにしっかり対応しようとすると携帯サイトは思った以上に難しく手間が掛かります。

これらを独自に開発していたのでは、コストが掛かりすぎますが、プラグインで機能拡張することにより、これらに対応することが可能です。

⇒ ケータイキット for Movable Type

ライセンス料は掛かりますが、Movable Typeで本格的な携帯サイトを構築するのであれば、ぜひ検討してみてください。

携帯用のテンプレートをPC用とは別に用意するのですが、携帯用に拡張されたタグを使用することにより

  • 液晶のサイズや対応形式に合わせて画像を自動変換
  • 絵文字をキャリアに合わせて自動変換
  • 長いページも機種ごとの表示能力に合わせて分割
  • 文字コードをシフトJISに変換
  • コメントの投稿や検索にも対応

携帯サイト作成の問題を解決します。

既に400機種以上に対応しており、新機種が出た場合にも、オンラインで機種情報を更新できますので安心です。

標準のMTタグも使用できますので、自由に画面レイアウトもカスタマイズすることが可能です。

携帯サイトでMTタグを使用する場合の注意点

携帯サイトでMTタグを使用する場合の注意点としては、1つのエントリーに複数のテンプレートを設定すると「MTEntryPermalink」などが利用できなくなります。

残念ながら「MTEntryPermalink」はデフォルトのテンプレートへのリンクを返しますので、<$MTEntryBasename$>.php などし、ディレクトリを固定したサイト構成とする必要があります。

Movable Typeで携帯サイトを構築したい、既存のMTサイトをモバイル対応したいなど気軽にご相談下さい。

 

ちょっとテクニカル」の一覧

コメント

大変参考になる記事をありがとうございます。

現在、MT5で、PC、携帯両方に対応する掲示板を作ることを検討しています。

MT4i については、「日記形式か、あまりカスタマイズしていないブログであれば、…お勧めです。」とのことですが、掲示板には向かないでしょうか?

ご意見をお聞かせいただけたら嬉しいのですが…。

投稿者: こんぶ : 2010年11月30日 21:30

最新の記事