TOP > MTのプラグイン活用
ブログ記事を表示させるテンプレートです。
通常は１ブログ記事のタイトルと本文、続きの内容を表示します。
スマートフォン用のアレンジとして、
１．[続き]を「続きを読む」のバーを配置して、クリックすると以降の記事が下に表示される。
jQuery Mobileの「Collapsible content markup」の機能
２．下部に、ナビゲーションボタン３つを配置
次のブログ記事、前のブログ記事、HOME(TOPページ)
前後に記事がない場合は、ボタンは配置しない
３．画像の縮小
MTのファイルのアップロードでアップした写真をwidthで縮小する。
■作成するブログ記事
カテゴリ別のブログ記事リストを表示させるテンプレートです。
通常はカテゴリ別のブログ記事のタイトルと本文を最新順に表示するテンプレートです。
これを、スマートフォン用にアレンジしています。
■作成するカテゴリ別ブログ記事リスト
左図：リストが５件以下の場合
右図：リストが６件以上の場合
最新５件のリスト(タイトル名)を表示、６件目以降は、「次のカテゴリリスト」として、これを押すと、下にそれ以降のリストが表示されます。
この６件目以降の「次のカテゴリリスト」は、jQuery Mobileの「Collapsible content markup」の機能を利用しています。
参考：jQuery Mobile＞デモページ＞Collapsible content markup
すべてのリストを読み込んでいますが、ブロックごとに表示をコントロールしています。
スマートフォン用のWikipediaのサイトに近い表示方法です。
これをMTタグのMTEntriesのモディファイアと、カテゴリリストのカウントでコントロールしています。
前回の項で、スマートフォン用のトップページが生成されました。
しかし、スマートフォン用のトップページのURLは、正確には「http://ドメイン/sp」
http://ドメイン/ にアクセスすると、アクセス媒体を認識して、スマートフォン用のトップページに切り替える仕掛けになっています。
■スマートフォンでドメインにアクセス
「このサイト「(サイト・ブログ名)」にはスマートフォン用のサイトがあります。 表示しますか？」
OK→スマートフォン用トップページ、URLを「http://ドメイン/sp」に移動
キャンセル→PC用のトップページ
が表示されます。
上記の振り分けを行うために、インデックステンプレートのメインページにコードを追加します。
■テンプレートの設定
インデックステンプレート＞「メインページ」テンプレートに以下のコードを追加
<head>部に追加します。
今回はiPadは、PCとして認識させるのでiPadでアクセスした場合は、メッセージウィンドウは出ません。
1: <script type="text/javascript">
2: if (document.referrer.indexOf('sp-sample.com') == -1 &&
((navigator.userAgent.indexOf('iPhone') > 0 &&
navigator.userAgent.indexOf('iPad') == -1) ||
navigator.userAgent.indexOf('iPod') > 0 ||
navigator.userAgent.indexOf('Android') > 0)) {
3: if(confirm('このサイト「サイト・ブログ名」にはスマートフォン用のサイトがあります。\n表示しますか？')) {
4: location.href = 'http://sp-sample.com/sp/';
5: }
6: }
7: </script>
保存と再構築を行うと完了です。
PCとスマートフォンの切り替えページを判断する方法は、
・PHPによる振り分け
・.htaccesに設定
などの方法があります。
今回は、ＭＴのスタティックページ(HTMLページ)、管理ページのみで行える方法を利用しています。
用途に応じて使いわけを行いましょう。
スマートフォン表示のトップページ用テンプレートについて説明していきます。
■作成するトップページ
インデックステンプレートに、スマートフォン用のテンプレートを追加します。
■テンプレートの設定
・テンプレート名
SPメインページ(名前は任意)
・出力ファイル名
sp/index.html
PCトップページのドメインの直下に「sp」フォルダを作ってこの階層にスマートフォン用のページファイルを生成します。(フォルダ名は任意)
・テンプレートの種類
カスタムインデックステンプレート
・公開
スタティック(規定)
■「SPメインページ」のテンプレートコード
「MT5で各種デバイス対応考～その５jQueryMobileでスマートファン対応」の続編です。
jQuery Mobileを利用して、MT5.1でスマートフォン対応してみます。
１．テンプレートの構成について
ブログ構築とCMS(HP)構築でのテンプレートデザインは多少違ってきますが、今回はCMS構築に近い構成とします。
ただし、ブログ構成としても充分利用できます。
■インデックステンプレート
・SPメインページ ： トップページとして表示します。
今回、テンプレート編集中に起こったエラーについてのログ記録。
リニューアルするために私がよくやるアーカイブテンプレート編集の手法。
運用中のテンプレートに影響がないように、新デザインテンプレートを作成して、
テンプレートの設定＞アーカイブマッピング
種類：カテゴリのチェックボックスにチェックを入れない。
公開設定：「公開しない」
として、「確認」ボタンでプレビュー表示して、大枠のデザイン、カスタマイズ内容のチェックを行う。
が、この確認ボタンを押してプレビュー表示しようとしたが、以下のエラーメッセージ。
Cannot preview without a template map!
と表示されプレビュー画面に遷移しない。
これは、困った！といろいろ検索するも情報なし。
Google.com in Englishに切り替えて、ようやく見つかりました。
アメリカ版(英語版)MovableType.orgの「Movable Type 5.02 Release Notes」
MT5.02バージョンでかなりのプログラムバグの修正があったようで、このバージョンでエラーは回避されているようだ。
テンプレート関連でも12件。
Themes and Templatesの項目
・Template preview shows error when the template doesn't have a prior archive mapping.103518
MT5.0からMT5.1へのアップグレードを行い、MT5.1の新機能の簡単なレビューの報告。
まずはMT5.1へのアップグレード！
さて、手順。
１．MySQLのバックアップ
PhpMyAdminでMySQLをバックアップする。
レンタルサーバのコントロールには、MySQLを設定するところには、概ねPhpMyAdminツールを利用できる。
前回「MT5で各種デバイス対応考～その４スマートフォン」に続いて、スマートフォン対応Webサイトが手軽に制作できるjQueryMobileについての考察。
まずはMT構築サイトをjQuery Mobileを利用してスマートフォン対応してみました。
テスト用ですので、動きがおかしいところはご愛嬌(^^;
PCの方は、そのままMTのデフォルトテンプレートで表示されます。
スマートフォンでアクセスすると、
「このサイト「MovableTypeでCMS構築しよう」にはスマートフォン用のサイトがあります。 表示しますか？」
というメッセージウィンドウが表示され、スマートフォン表示か通常のWeb表示か選択できます。
MovableTypeのスマートフォン対応については、携帯サイトに対応している各種サービスに付随して、スマートフォンにも対応しているものがほとんどである。
「MT5で各種デバイス対応考～その１携帯端末」で紹介した「Movable Type 5 携帯Pack」をはじめ携帯サイトだけでなく、スマートフォンにも対応している。
基本、MTの場合、スマートフォン用の各種テンプレートを用意することで、比較的携帯端末よりは導入が意外に簡単かもしれない。(携帯よりも機種がまだ少ないこと、PC用を少し軽くする簡易表示などへの対応でもOKなど)
しかし、携帯サイトより少し表示幅を大きくしただけの対応だけではなく、やはりスマートフォン独特のナビゲーション、ボタン・アイコンなどに対応したテンプレートであることが望ましい。
MT5に簡単導入できる各種サービスを紹介する。
(今回は有料ではなく、低価格、無料で導入できる方法を中心に)
１．スマートフォン対応のテンプレート
MT5に限らずだが、携帯サイト制作にはPCでのブラウザ対応以上に、メーカー、機種対応のプレビューは欠かせないもの。
MT5には、テンプレートの「確認」ボタンでビューア機能がついているが、おおざっぱな確認しかできない。
そこで、いろいろなサービスが提供されている。
まずは簡単に導入できるフリーの3サービスを紹介。
次にビューアの長所、短所の考察。
■便利な携帯ビューアサービス
タスクマザー(taskmother)
中野 治美
〒921-8806
石川県野々市市三日市1丁目118-202
