メイン

TOP > MTのプラグイン活用

MTのプラグイン活用

MT5とjQueryMobileでスマートフォン対応~その4カテゴリ別ブログ記事リスト

カテゴリ別のブログ記事リストを表示させるテンプレートです。

通常はカテゴリ別のブログ記事のタイトルと本文を最新順に表示するテンプレートです。

これを、スマートフォン用にアレンジしています。

■作成するカテゴリ別ブログ記事リスト

スマートフォン用カテゴリ別ブログ記事リスト

左図:リストが5件以下の場合

右図:リストが6件以上の場合

最新5件のリスト(タイトル名)を表示、6件目以降は、「次のカテゴリリスト」として、これを押すと、下にそれ以降のリストが表示されます。

この6件目以降の「次のカテゴリリスト」は、jQuery Mobileの「Collapsible content markup」の機能を利用しています。

参考:jQuery Mobile>デモページ>Collapsible content markup

すべてのリストを読み込んでいますが、ブロックごとに表示をコントロールしています。
スマートフォン用のWikipediaのサイトに近い表示方法です。

これをMTタグのMTEntriesのモディファイアと、カテゴリリストのカウントでコントロールしています。

続きを読む "MT5とjQueryMobileでスマートフォン対応~その4カテゴリ別ブログ記事リスト" »

MT5とjQueryMobileでスマートフォン対応~その3スマートフォンページへの切り替え

前回の項で、スマートフォン用のトップページが生成されました。
しかし、スマートフォン用のトップページの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に設定

などの方法があります。

今回は、MTのスタティックページ(HTMLページ)、管理ページのみで行える方法を利用しています。
用途に応じて使いわけを行いましょう。

MT5とjQueryMobileでスマートフォン対応~その2トップページ

スマートフォン表示のトップページ用テンプレートについて説明していきます。

■作成するトップページ

MTスマートフォン用メインページテンプレート

インデックステンプレートに、スマートフォン用のテンプレートを追加します。

■テンプレートの設定

 ・テンプレート名
  SPメインページ(名前は任意)

 ・出力ファイル名
  sp/index.html

  PCトップページのドメインの直下に「sp」フォルダを作ってこの階層にスマートフォン用のページファイルを生成します。(フォルダ名は任意)

 ・テンプレートの種類
  カスタムインデックステンプレート

 ・公開
  スタティック(規定)


■「SPメインページ」のテンプレートコード

続きを読む "MT5とjQueryMobileでスマートフォン対応~その2トップページ" »

MT5とjQueryMobileでスマートフォン対応~その1はじめに

MT5でjQueryMobile

「MT5で各種デバイス対応考~その5jQueryMobileでスマートファン対応」の続編です。

jQuery Mobileを利用して、MT5.1でスマートフォン対応してみます。

1.テンプレートの構成について

ブログ構築とCMS(HP)構築でのテンプレートデザインは多少違ってきますが、今回はCMS構築に近い構成とします。
ただし、ブログ構成としても充分利用できます。

■インデックステンプレート
 ・SPメインページ : トップページとして表示します。

続きを読む "MT5とjQueryMobileでスマートフォン対応~その1はじめに" »

MT5.02よりも下位バージョンは要チェック、アーカイブテンプレートのアーカイブマッピング関連のエラー「Cannot preview without a template map!」

今回、テンプレート編集中に起こったエラーについてのログ記録。

リニューアルするために私がよくやるアーカイブテンプレート編集の手法。
運用中のテンプレートに影響がないように、新デザインテンプレートを作成して、

テンプレートの設定>アーカイブマッピング

種類:カテゴリのチェックボックスにチェックを入れない。
公開設定:「公開しない」

として、「確認」ボタンでプレビュー表示して、大枠のデザイン、カスタマイズ内容のチェックを行う。

アーカイブマッピング


が、この確認ボタンを押してプレビュー表示しようとしたが、以下のエラーメッセージ。

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.02よりも下位バージョンは要チェック、アーカイブテンプレートのアーカイブマッピング関連のエラー「Cannot preview without a template map!」" »

MT5.0→MT5.1にアップグレード、カテゴリの並び替えが標準装備、管理画面が使いやすくなった

MT5.0→MT5.1にアップグレード
MT5.1が2011年5月25日にリリースされた。

MT5.0からMT5.1へのアップグレードを行い、MT5.1の新機能の簡単なレビューの報告。

まずはMT5.1へのアップグレード!

さて、手順。

1.MySQLのバックアップ

PhpMyAdminでMySQLをバックアップする。
レンタルサーバのコントロールには、MySQLを設定するところには、概ねPhpMyAdminツールを利用できる。

続きを読む "MT5.0→MT5.1にアップグレード、カテゴリの並び替えが標準装備、管理画面が使いやすくなった" »

MT5で各種デバイス対応考~その5jQueryMobileでスマートファン対応

jQuery mobileを利用してみよう

前回「MT5で各種デバイス対応考~その4スマートフォン」に続いて、スマートフォン対応Webサイトが手軽に制作できるjQueryMobileについての考察。

まずはMT構築サイトをjQuery Mobileを利用してスマートフォン対応してみました。
テスト用ですので、動きがおかしいところはご愛嬌(^^;

MovableTypeでCMS構築しよう

PCの方は、そのままMTのデフォルトテンプレートで表示されます。

スマートフォンでアクセスすると、

「このサイト「MovableTypeでCMS構築しよう」にはスマートフォン用のサイトがあります。 表示しますか?」

というメッセージウィンドウが表示され、スマートフォン表示か通常のWeb表示か選択できます。

続きを読む "MT5で各種デバイス対応考~その5jQueryMobileでスマートファン対応" »

MT5で各種デバイス対応考~その4スマートフォン

iphoneエミュレータ-ibbdemo2

MovableTypeのスマートフォン対応については、携帯サイトに対応している各種サービスに付随して、スマートフォンにも対応しているものがほとんどである。

MT5で各種デバイス対応考~その1携帯端末」で紹介した「Movable Type 5 携帯Pack」をはじめ携帯サイトだけでなく、スマートフォンにも対応している。

基本、MTの場合、スマートフォン用の各種テンプレートを用意することで、比較的携帯端末よりは導入が意外に簡単かもしれない。(携帯よりも機種がまだ少ないこと、PC用を少し軽くする簡易表示などへの対応でもOKなど)
しかし、携帯サイトより少し表示幅を大きくしただけの対応だけではなく、やはりスマートフォン独特のナビゲーション、ボタン・アイコンなどに対応したテンプレートであることが望ましい。

MT5に簡単導入できる各種サービスを紹介する。
(今回は有料ではなく、低価格、無料で導入できる方法を中心に)

1.スマートフォン対応のテンプレート

続きを読む "MT5で各種デバイス対応考~その4スマートフォン" »

MT5で各種デバイス対応考~その3携帯サイトの検証、プレビュー表示

携帯サイトをプレビュー表示

MT5に限らずだが、携帯サイト制作にはPCでのブラウザ対応以上に、メーカー、機種対応のプレビューは欠かせないもの。

MT5には、テンプレートの「確認」ボタンでビューア機能がついているが、おおざっぱな確認しかできない。

そこで、いろいろなサービスが提供されている。

まずは簡単に導入できるフリーの3サービスを紹介。
次にビューアの長所、短所の考察。

■便利な携帯ビューアサービス

続きを読む "MT5で各種デバイス対応考~その3携帯サイトの検証、プレビュー表示" »

MT5で各種デバイス対応考~その2「モバイルサイトmaker for Movable Type」で携帯サイト構築

モバイルサイトmaker for Movable Type

MovableType5でのPC・携帯サイトの案件があり、今回は、携帯サイト制作で「モバイルサイトmaker for Movable Type」を導入したので、その使用感、レビューなどを報告。

携帯サイトの目的は、PCサイトと同様、店舗来客型のサイトであったので

・店舗の情報の提供
・お問い合わせ・予約などのメールフォームの設置
・営業時間、新着情報などの更新情報の提示
・PCサイトの情報(MT投稿内容)をできるだけ共有する。
・物販(ショッピングカート)やクーポン発行などは行わない。

以上から、費用的にもいちばん安価な「モバイルサイトmaker for Movable Type」の導入を行った。

機能や導入方法などは、本家のサイトを参考していただくとするが、今回構築したポイントを簡単にまとめてみる。

導入ポイント

続きを読む "MT5で各種デバイス対応考~その2「モバイルサイトmaker for Movable Type」で携帯サイト構築" »

Powered by FeedBurner

RSS2.0

タスクマザー(taskmother)
  中野 治美

〒921-8806
  石川県野々市市北西部土地区画整理事業
     施工地区55街区3番202