MTのプラグイン活用:1－タスクマザー

MT5とjQueryMobileでスマートフォン対応～その６Googleアナリティクス

jQueryMobileの画面遷移は、デフォルト設定ではAjax遷移しています。
Javascriptで画面が切り替わるので、普通にGoogleアナリティクスのトラッキングコードを設置していてもうまく機能しないので、正確なカウントができなくなります。

なので、通常のトラッキングコードをAjax遷移でも機能するように、コードに変更を加えます。

参考にしたサイトは、「jQuery MobileでGoogle Analyticsを使うために気をつけなければいけないこと」

今回作成したスマホサイトは、jQueryMobileでのリンクはデフォルト設定をやめて、直リンクでのリンクが多かったのですが、一部リストの画面遷移はAjaxを利用しています。

直接読み込みの設定方法は、リンクタグには、rel="external"をつけてAJAX を使用せず、完全なページ読み込みを使用しています。

さて設定後は、Googleアナリティクスのデータは以下のように、Ajaxで遷移したURLも取得できています。
ドメイン/sp/以下が、スマートフォンサイトなので、

コンテンツ＞サイトコンテンツ＞ディレクトリで、/spの第2階層でのリストです。
「/&ui-page=0-1」などですね。

続きを読む "MT5とjQueryMobileでスマートフォン対応～その６Googleアナリティクス" »

| パーマリンク | コメント (0) | トラックバック (0)

MT5とjQueryMobileでスマートフォン対応～その５ブログ記事

ブログ記事を表示させるテンプレートです。

通常は１ブログ記事のタイトルと本文、続きの内容を表示します。

スマートフォン用のアレンジとして、

１．[続き]を「続きを読む」のバーを配置して、クリックすると以降の記事が下に表示される。
　jQuery Mobileの「Collapsible content markup」の機能

２．下部に、ナビゲーションボタン３つを配置
　次のブログ記事、前のブログ記事、HOME(TOPページ)
　前後に記事がない場合は、ボタンは配置しない

３．画像の縮小
　MTのファイルのアップロードでアップした写真をwidthで縮小する。

■作成するブログ記事

続きを読む "MT5とjQueryMobileでスマートフォン対応～その５ブログ記事" »

| パーマリンク | コメント (0) | トラックバック (0)

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

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

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

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

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

左図：リストが５件以下の場合

右図：リストが６件以上の場合

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

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

参考：jQuery Mobile＞デモページ＞Collapsible content markup

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

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

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

| パーマリンク | コメント (0) | トラックバック (0)

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

前回の項で、スマートフォン用のトップページが生成されました。
しかし、スマートフォン用のトップページの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ページ)、管理ページのみで行える方法を利用しています。
用途に応じて使いわけを行いましょう。

| パーマリンク | コメント (0) | トラックバック (0)

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

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

■作成するトップページ

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

■テンプレートの設定

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

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

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

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

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

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

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

| パーマリンク | コメント (0) | トラックバック (0)

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

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

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

１．テンプレートの構成について

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

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

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

| パーマリンク | コメント (0) | トラックバック (0)

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!」" »

| パーマリンク | コメント (0) | トラックバック (0)

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

MT5.1が2011年5月25日にリリースされた。

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

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

さて、手順。

１．MySQLのバックアップ

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

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

| パーマリンク | コメント (0) | トラックバック (0)

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

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

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

「MovableTypeでCMS構築しよう」

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

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

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

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

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

| パーマリンク | コメント (0) | トラックバック (0)

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

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

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

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

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

１．スマートフォン対応のテンプレート

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

| パーマリンク | コメント (0) | トラックバック (0)

タスクマザー

MovableTypeビジネス構築・Webコンサルティング・IT支援で石川県のビジネスサポートを行なっています。