MovableType一覧

MTOSサイトで携帯対応まとめ(6)~phpファイルの読み込み

前回『後述します』と書いた「init.php」の読み込みについて書いておきます。

これは、Net_User_Agent_Mobileが判別した携帯キャリアによって条件分岐し、一部のヘッダ記述を書き分ける、というものです。

このinit.phpはこちらの記事の通りに作成し、ウェブサイトのインデックステンプレートとして保存し、その後各携帯ページより読み込むわけですが。

init.phpの場所がウェブサイトのルートになるわけで、読み込む際のパスもそのファイルのある場所によって変わってきます。

例えばルート直下の「m」フォルダにある記事から場合は

<?php
// lib/init.phpを読み込み
require_once dirname(__FILE__).’/../lib/init.php’;
?>

で良いのですが、各ブログにあるファイルはさらに一段下がるので、この部分が

<?php
// lib/init.phpを読み込み
require_once dirname(__FILE__).’/../../lib/init.php‘;
?>

となります。

まぁ、これも各テンプレートはそれぞれ名前を定義してあるので、「携帯用ヘッダー」モジュールの中に条件分岐でまとめて書いてやれば良いわけです。

MTタグとphpコードが入り組んで見た目はなかなか複雑になっていますが、実際の作りそのものはずいぶん簡略化されていると思われます。


MTOSサイトで携帯対応まとめ(5)~自動振り分け

前回というより3回くらい前の続きです。

PEARのライブラリ「Net_User_Agent_Mobile」をインストールしたところで、振り分けのためのphpファイルを作成します。

作業としては、ドコモ・au・Softbank、それぞれ文字コードを一番適正なものに設定してやること、そして、ドコモでCSSを使うためにHTTPヘッダーの「Context-Type」を置き換えてやることです。

ここに関してはこちらのページを参考にさせていただきました。

文字コードはドコモとauをShift-JIS、SoftbankをUTF-8に設定します。

リンク先のページにある通りにinit.phpを作成し、各携帯用テンプレートから呼び出せるようにしておきます。この部分はまた後述します。

また、携帯でPC用ページにたどり着いてしまった時に自動で携帯用ページに誘導する設定ファイルも作りました。

これは参考までにコードを書いておきます。

<?php
// Net_UserAgent_Mobile読み込み
require_once ‘Net/UserAgent/Mobile.php’;
$userAgent = Net_UserAgent_Mobile::singleton();

// キャリアごとの設定
if ($userAgent->isDoCoMo()) {
header(‘location:m/index.php’);
} elseif ($userAgent->isEZweb()) {
header(‘location:m/index.php’);
} elseif ($userAgent->isSoftBank()) {
header(‘location:m/index.php’);
}
?>

このphpをカスタムインデックステンプレートとして保存して、PC用のすべてのページから呼び出すようにしました。

というのも、PC用のページは基本すべてウェブサイト、若しくはブログのルート直下にあるのため、携帯はすべて「m/index.php」に飛ばす設定にしておけば迷子にはならないことになります。

ただ、アーカイブのURLをもっと複雑にしてある場合は、いっそのこと、全部サイトトップに飛ばすでも良いかもしれません。それには、locationの後にサイトトップの絶対URLを入れてやればOKです。

なお、 「header(‘location:xxx.php’);」の記述は、その前にhtmlのタグ等があると動作しないので、このphpの読み込みは、テンプレートの一番上に持ってくる必要があります。

とにかく、PCページにたどり着いてパケットを大量に受信した上に表示できない、という現象はこれで避けられると思います。


MTOSサイトで携帯対応まとめ(4)~アーカイブテンプレート

前回から続いています。

さて、アーカイブページの設定についてです。

ブログにしてあるものについては、『必要項目をカスタムフィールドで用意』⇒『それらを呼び出して組み合わせるテンプレートを作成』⇒『同じ形式の記事ページが複数出来る』という形のため、テンプレートをPC用と携帯用の二種類用意し、どちらも基本同じ内容だけれどレイアウトを変えて出力する、という形をとりました。

PCの方はCSSは基本すべて外部ファイルに記述しており、classやidを駆使してデザインを決めています。特に、CSS3では角丸やシャドウ、グラデーションなど表現の幅が広がっているので、CSSだけでかなりいろいろなことができます。

でも、携帯ではドコモのおかげで外部CSSが使えないため、CSSの記述もインラインで(各タグの中に「style=””」という形で)入れる必要があり、内容の並べ方も変わってきます。対応していないプロパティもありますので、なるべくシンプルに記述していく必要があります。

なので、新しいアーカイブテンプレートを作り、マッピングのパスを「m/%-f」としました。当然、優先はPC用です。(私が指定したPC用のアーカイブマッピングパスは「%-f」です。ちなみに、%-fの意味は、「出力ファイル名.拡張子」です。詳しくはこちら参照)

なお、リンクを張る時、<$mt:EntryPermalink$>は優先されるテンプレートに割り当てられますので、携帯のページURLは「<$mt:BlogArchiveURL$><$mt:FileTemplate format=”m/%-f”$>」となります。

それとは別に、ウェブページを数ページ用意していました。

これは、単独で完結する内容で、あまり動きのないもの、という認識なのですが、mtevalモディファイアのおかげで、ページ本文にMTタグが普通に使えるようになったこともあり、昔だったらインデックステンプレートにしてしまうような内容を個別ページに出来るようになりました。

なので、このウェブページはウェブサイト直下に置いたのですが、「規約」のような独立のページ以外は、結構各ブログからパーツを引っ張ってきて作っており、本文と言いながら一部の内容は『記事テンプレート』状態になっていました。

これでは、CSSの縛りもあり、同じ内容からテンプレートだけを変えて2種類出力する、というのも無理がありました。

なので、携帯用ページは別に作ることにしました。

その際、フォルダを「携帯用」として作成し(フォルダ名は「m」)、それぞれ内容を携帯用に特化させて保存しました。

もちろん、テンプレートそのものも分けないといけません。パーツもすべて変わってしまうので。ただ、ウェブページテンプレートを複数作るのは違います。何しろ、一記事に対して一ページできれば良いのですから。

そこで、ウェブページテンプレートの内容はすべてモジュールにしてしまい(PC用ウェブページ・携帯用ウェブページ)、携帯用フォルダに入っているかどうかで条件分岐して呼び出す形にしました。

ちなみにウェブページテンプレートの内容です。
たったこれだけです。

<mt:IfFolder name=”携帯用”>
<$MTInclude module=”携帯用ウェブページ”$>
<mt:Else>
<$MTInclude module=”PC用ウェブページ”$>
</mt:IfFolder>

まぁ、これは構造が単純でページ数が少ないからできたことではあります。

とりあえず、これで携帯用ページを生成する準備ができました。