タグ : MTOS

MTOSサイトで携帯対応まとめ(9)~アメブロへのリンク

携帯対応、最後の最後におまけの一つです。

それはアメブロへのリンクの件。

リンクページは独立ブログになっており、URLのカスタムフィールドを用意し、そのURLとタイトル、説明文の組み合わせを呼び出す、という簡単な作りなので、特に問題はないと思っていたわけです。

ところがところが、アメブロだけは、普通にPC用のURL(http://ameblo.jp/アメーバID)を設定すると、アメブロモバイルのトップページに飛ばされてしまいます。

いろいろ検索した結果、モバイルの場合は別のURLを指定してやらなければならないことがわかりました。

ちなみに、

http://m.ameba.jp/m/blogTop.do?unm=アメーバID&guid=ON

です。

そこで、アメブロの場合とそうでない場合で条件分岐し、アメブロの場合はURL欄ではなく別のフィールドにアメーバIDを入れることにし、仮にカスタムフィールド名をEntryAmebloIDとすると、PC用URLは

http://ameblo.jp/<$mt:EntryAmebloID$>

となり、携帯用URLは

http://m.ameba.jp/m/blogTop.do?unm=<$mt:EntryAmebloID$>&amp;guid=ON

とすることで解決しました。

リンクページはメインページオンリーなので、それぞれのメインページをインデックステンプレートで2つ用意し、例の自動振り分けを仕掛けておけば終わりです。

なお、さらに余談ですが、実はこの手段をもってしても、iPhone用ガラパブラウザでは、きちんと目的のブログに飛んでくれませんでした。

しばらくそれで悩んでしまい、アメブロさんのサポートにメールしたりもしたのですが、意外にもけんもほろろな対応で、URLの書き方は上記の通りに教えてくれたものの、「なお、外部サイトのご利用方法につきましては、ご案内いたしかねます。」なーんて冷たい文章が付いてきました。

結局、実際にガラケーを持っている同僚さんに動作確認していただいたところ、無事に一発で目的のブログにたどり着けたので、どうやらこのアメブロのURLは、スマホやPCがガラケーを偽装していることも見破るようです。

何はともあれ、本物のガラケーならば動作することがわかったので、問題解決です。

という訳で、すべてのページの動作を確認したうえで、フォルダにかけていたベーシック認証を外し、ドメインのパスを変更してやるだけで新サイトに移行が完了しました。

長々と続いてきた連載もこれで終了です。ありがとうございました。

ブログランキング・にほんブログ村へ
にほんブログ村

Twitt

MTOSサイトで携帯対応まとめ(8)~全角と半角

細かいこと、その2、半角と全角の対応です。

本来、Web上では半角カナはご法度、というのがずっと常識でした。

web上では日本語の文字は全角で、英数字は半角で、と、ネット黎明期にはかなりうるさく言われていたように思います。何でも、半角カナをネット上に流すと他のデータを壊すことがあるとかないとか。

※少し調べてみましたが、元々web上というよりメールの話だったようです。どうも混乱していますが、個人的に半角カナという存在が嫌いなので思い込みが強まっていたのかもしれません…。が、データが壊れる(文字化けする)ことがあるのは本当みたいです。

とにかく、基本的に半角カナは使わないのがマナーだったのです。

ところが、それがi-modeの登場で根底から覆ってしまいました。

なんと、i-modeをはじめとする携帯サイトは、『半角カナ推奨』だったのです。

おそらく、小さい画面では少しでも狭い幅で文字数を稼ぎたいということだったのでしょう。i-modeが始まったころは特に、まだまだ画面の解像度も低く、一画面の文字数は今よりさらに少ない状態でしたし。

で、実際に携帯用ブラウザで確認すると、やはり全角文字ではすぐに一行からはみ出してしまい、行数が増えて見づらくなってしまいます。

でも、元のデータはPCと共通なのでいじりたくありません。

そこで、プラグインの登場です。

半角/全角変換モディファイア(MT5用)

こちらのプラグインを導入しますと、元データはそのままで、出力時に指定した文字種の全角半角を指定した方に揃えてくれます。

使い方は簡単で、指定したい部分のMTタグにモディファイアを加えるだけ。例えばエントリー本文にある全角の数字、英字、カタカナを半角にしたいなら、

<$mt:EntryBody conv_hz=”nlk”$>

のように書きます。

今回は携帯サイト用に、カタカナおよび英数字を半角に指定しましたが、逆にPC用にはカタカナを全角に、英数字を半角に指定しておきたいものです。

というのは、個人的に全角の英数字が許せないのと、やはり半角カタカナは嫌いなので、サイト内のこの部分は絶対に統一したいのです。

が、入力側にそれを求めるのは結構無理があって、自分自身は自分のルールに従うとしても、複数で管理する際にはやっぱり無理があります。何度お願いしても、全角英数字はもちろん、半角カナもなくならないのです。(ひょっとしたら、中には全角英数字や半角カナがお好きな方もいらっしゃるのかもしれません。)

だったら、お願いするより強制的に変換してしまった方がお互いにストレスが無いな、と。

いつものことながら、壱さんにはかゆい所に手が届くプラグインを作っていただき、本当に感謝しています。

ブログランキング・にほんブログ村へ
にほんブログ村

Twitt

MTOSサイトで携帯対応まとめ(7)~アクセスキーと絵文字

さて、そろそろ終わりが見えてきました。

前回までで一通り、携帯サイト作成のための大きな作業は書き終えたと思います。

あとは細かいことですね。

まずはアクセスキーと絵文字です。

携帯、特にガラケーには絵文字が付き物ですが、それぞれのキャリアに依存してしまう部分が大きいですし、なるべくなら使わないで済ませようと思っていました。

ただ、ガラケーの場合は画面スクロールなどが大変なので、「アクセスキー」という便利な機能があります。

これは、数字ボタンでいきなりリンク先に飛べるというもので、昔携帯サイトを初めて作った時には積極的に入れていました。

実は今回作ったサイトを、CMSを使わずにレガシーなhtmlで作った時には、そんなことはすっかり失念して、アクセスキーを一切使いませんでした。

でも、せっかくなので今回は入れよう、と決意。特に、メニュー(ナビゲーション)には使った方がいいだろうと判断しました。

ただ、その場合どうしても、番号キーを表す絵文字は必要になります。そうでないと、番号リンクが生きているかどうかわかりづらいので。

そこで、数字プラス「#」キーの絵文字のみ、表示できるように考えました。キャリアによって違う部分(というか文字コード)は、例のNet_User_Agent_Mobileを使ったphpを流用することにして。

ちなみに、「サイトトップに戻る」はこんな感じです。

<a href=”<mt:BlogParentWebsite><$mt:WebsiteURL$>m/</mt:BlogParentWebsite>” accesskey=”0″ ><?php print $num0;?>HOME</a>

「accesskey=”0″」が、「0のボタンにリンク」ですね。そして「<?php print $num0;?>」の部分が変数になります。

※以前はsoftbankのみ、accesskeyではなくdirectkeyでしたが、3Gの機種からaccesskeyのみ対応するようになったそうです。

この変数は、キャリア別に文字コードなどを判別するのに使ったinit.phpに一緒に格納しています。

参考までに、絵文字のコードはここにも書いておきます。こちらを参考にさせていただいたのですが、一部の文字が間違っていたようで、そのままだとエラーになってしまいましたので、修正してあります。

// ドコモ
$num1=’&#xE6E2;';
$num2=’&#xE6E3;';
$num3=’&#xE6E4;';
$num4=’&#xE6E5;';
$num5=’&#xE6E6;';
$num6=’&#xE6E7;';
$num7=’&#xE6E8;';
$num8=’&#xE6E9;';
$num9=’&#xE6EA;';
$num0=’&#xE6EB;';
$numsharp=’&#xE6E0;';

// au
$num1=’&#xF6FB;'; //$num1='<img localsrc=’180′>;
$num2=’&#xF6FC;'; //$num2='<img localsrc=’181′>;
$num3=’&#xF740;'; //$num3='<img localsrc=’182′>;
$num4=’&#xF741;'; //$num4='<img localsrc=’183′>;
$num5=’&#xF742;'; //$num5='<img localsrc=’184′>;
$num6=’&#xF743;'; //$num6='<img localsrc=’185′>;
$num7=’&#xF744;'; //$num7='<img localsrc=’186′>;
$num8=’&#xF745;'; //$num8='<img localsrc=’187′>;
$num9=’&#xF746;'; //$num9='<img localsrc=’188′>;
$num0=’&#xF7C9;'; //$num0='<img localsrc=’325′>;
$numsharp=’&#xF489;'; //$numsharp='<img localsrc=’818′>;

// ソフトバンク
$num1=’&#xE21C;';
$num2=’&#xE21D;';
$num3=’&#xE21E;';
$num4=’&#xE21F;';
$num5=’&#xE220;';
$num6=’&#xE221;';
$num7=’&#xE222;';
$num8=’&#xE223;';
$num9=’&#xE224;';
$num0=’&#xE225;';
$numsharp=’&#xE210;';

ブログランキング・にほんブログ村へ
にほんブログ村

Twitt

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コードが入り組んで見た目はなかなか複雑になっていますが、実際の作りそのものはずいぶん簡略化されていると思われます。

ブログランキング・にほんブログ村へ
にほんブログ村

Twitt

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ページにたどり着いてパケットを大量に受信した上に表示できない、という現象はこれで避けられると思います。

ブログランキング・にほんブログ村へ
にほんブログ村

Twitt

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>

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

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

ブログランキング・にほんブログ村へ
にほんブログ村

Twitt

時代は進んでますね

MTOSの作業について長々書いていますが、閑話休題。

ようやくMTOSでひとつサイトを完成させたものの、いろいろ調べてみると、時代は進んでますね。

WordPressが全盛なのはわかっていましたが、今新しいCMSもどんどん出てるんですねぇ。
MTとかもう化石っぽい(汗)。

まぁその昔、まだWindowsがない頃、MacよりMS-DOSの方が取っつき易かった私には、きっとMTが合ってるんだろうな、と思わないでもないですが。
(基本的に、中が何も見えないブラックボックス的なものって苦手なんです)

それでも、小さいグループや若い人個人のサイトなどにJimdoが増えてるな、というのは感じてました。考えてみたらあれもCMS。広告は気になるけど、良くできてます。

で、調べてみたらまだまだいくらでもある。

自分がいつまで関われるかわからないボランティアのサイトは、もっと直感的に操作できるCMSを開拓するのが良いような気がしてきました。

MTだと達成感はあるんだけど、それなりの規模のサイトを作ろうとすると、正味で数カ月はかかってしまいますからねぇ。

年齢的に厳しいものはありますが、少しは時代に追いついていかないと、仕事にあぶれてしまいそうです(笑)。

ブログランキング・にほんブログ村へ
にほんブログ村

Twitt

MTOSサイトで携帯対応まとめ(3)~テンプレート作成

前回の続きと行きたいのですが、phpファイルを作る前に、用意する携帯用テンプレートについて触れておこうと思います。

基本的に、各メインページはすべて、インデックステンプレートとして「携帯用メイン」というテンプレートを作り、出力ファイルを「m/index.php」としました。

その中で、すべてに共通するモジュールとして「携帯用ヘッダー」「携帯用フッター」、「携帯用バナーヘッダー」「携帯用ナビゲーション」の4つを用意しました。

「携帯用ヘッダー」にはDOCTYPE宣言およびhtmlのheader部分を入れました。

その中の「title」タグは、各テンプレートの頭に入れたテンプレートの名前によって変化するよう、条件分岐をしてあります。

ちなみにこんな感じ。

<title>
<mt:if name=”m-webmain”><mt:ignore> ウェブサイトメイン</mt:ignore>
<$mt:WebsiteName encode_html=”1″$>
<mt:elseif name=”m-blogmain”><mt:ignore> 各ブログメイン</mt:ignore>
<$mt:BlogName encode_html=”1″$> – <mt:BlogParentWebsite><$mt:WebsiteName encode_html=”1″$></mt:BlogParentWebsite>
<mt:elseif name=”entry-archive”><mt:ignore> 各ブログエントリー</mt:ignore>

<$mt:EntryTitle$> – <$mt:BlogName encode_html=”1″$> – <mt:BlogParentWebsite><$mt:WebsiteName encode_html=”1″$></mt:BlogParentWebsite>
<mt:elseif name=”page-archive”><mt:ignore> 各ウェブページ</mt:ignore>
<$mt:PageTitle$> – <$mt:WebsiteName encode_html=”1″$>
<mt:else>
</mt:if>
</title>

そしてバナーヘッダーには<body>タグの開始からタイトル画像の指定、サイトメインのみ、サイトの説明文を入れる、という内容を。

ナビゲーションはPCとは違い、頭の方に入れるとそれだけで画面が塞がってしまうので、内容の後に表示されるようにしました。トップから各ブログのメインページおよびウェブページへのリンクを入れてあります。

ここで携帯ならではの絵文字を使ったアクセスキーを入れたのですが、この部分はまた改めて書きます。結構ややこしいので。

フッターには<hr />およびコピーライト表示を。

そして、バナーヘッダーとナビゲーションの間に、各ページのコンテンツを入れていきます。

アーカイブページの扱いについては長くなったので次回に回します。ただ、内容構成の仕方はメインと同じです。

ブログランキング・にほんブログ村へ
にほんブログ村

Twitt

MTOSサイトで携帯対応まとめ(2)~PEARインストール

前回の続きです。

だいたいの構成は決まりましたが、ガラケーの場合、キャリアによってHTMLやCSSの対応がまちまちで、完全に対応させようと思ったらそれぞれに対応ページを作らないといけません。

さすがにそれでは労力がかかりすぎます。

なので、ガラケー用ページは一本にまとめ、個別に対応が必要な部分はphpでその都度書き換えてもらうことにしました。

この際、PCページからの振り分けもすべてphpで対応してしまいたい、ということで、PEARのNet_User_Agent_Mobileというパッケージを使うことにしました。

と言ってもphpは素人同然の身なので、PEARが何なのかもわかっていないのですが…。

まぁ、言ってみれば便利なツールをいろいろ開発して提供してくださっているプロジェクトとでも申しましょうか。私のような末端ユーザーは恩恵にあずかるばかりで、本当に感謝するしかない状態です。

とにかく、このNet_User_Agent_Mobileを使うと、アクセスしてきた端末が携帯なのかそうでないのか、どこのキャリアなのかを判別してくれるので、それぞれに変数などを格納して対応できるようになるという訳です。MT(MTOS)で条件分岐に関してはいろいろ勉強していたのが少しは役に立ちます。

pearのインストールは、技量の関係で難しいことはできないので、こちらのサイトを参考に、go-pearというツールを使って自動で行いました。

これで本体をインストール後、Net_User_Agent_Mobileを指定してインストール、無事準備完了です。

本来このPEARフォルダは、wwwより深い場所にインストールして、外から見えなくしないといけないのですが、ブラウザを使う都合で、wwwより下の、誰でもアクセスできる場所にインストールしてしまいましたので、インストール後はコントロールパネルで外からのアクセスをできなくなるよう設定しました。

参考までに、私の場合を書いておきます。

使用サーバーはさくらインターネットのスタンダードコース。

「ファイルマネージャー」の「ウェブアクセスの設定」「接続元によるアクセス制限」で「非公開にして一部のアクセスを許可」を指定。許可リストに自分のIPアドレスだけを入れました。これで、社内以外からは存在が見えなくなるはずです。(実際URLを公開していないので社内の人も見ることはないでしょう。)

このNet_User_Agent_Mobileを使って、PCサイトと携帯サイトの振り分け、および、携帯サイトの中で文字コードの指定、およびhttpヘッダをドコモの場合のみ置き換える、などの作業を自動でやってもらうことにしました。

この辺りの詳細はまた次回に回します。この連載、何回続くか恐ろしくなってきました…。

ブログランキング・にほんブログ村へ
にほんブログ村

Twitt

MTOSサイトで携帯対応まとめ(1)~構成を決める

MTOSでサイトを作り始めて約5カ月。

あれこれ試行錯誤しながら3カ月ほどでPC版をほぼ完成し、その後携帯版に取りかかるまでしばらくかかり、ここ1ヶ月くらいでぼちぼちエンジンがかかってきて、ようやく公開にこぎつけるところまでやってきました。

携帯版に関しては、ドコモとアメブロに少々振り回されました。

この間、いろいろつまづいたり発見したりがあったので、覚え書きとして書いておこうと思います。(あくまでも私の場合です。もっと良い方法があったらぜひ教えてください。)

PC版をすべて一旦完成させたところで、まず携帯版をどういう形で作るかを考えました。

現在はもう携帯と言えばスマホが主流ですが、まだまだガラケーも切り捨てるには早い状態です。特に、該当サイトにやってくる人はガラケーが多そうです。

スマホならPC版を見ることができるので、いずれ専用ページを作るとしても、まだ後回しでも大丈夫。やはり問題はガラケーです。

画面も狭いしCSSの対応もまちまち。PC版のHTMLはそのままではとても使えません。

という訳で、ガラケー対応のテンプレートを一通り作り、できれば自動的に誘導できる形にしようと思いました。

基本的に、現在のURLの下に「m」フォルダを作り、そこに生成する。(http://website/m)

でも、今回のサイトは複数ブログを使っており、サイトの下にあるブログの場合、「http://website/blog」となっているので、このwebsiteとblogの間に「m」を挟むのは難しくなります。

なので、ここは割り切って、ブログの方は、ブログの中でさらに「m」のフォルダを作り、「http://website/blog/m」の形で携帯サイトを生成し、それぞれをリンクでつなぐことにしました。

とりあえず、構成は決まりました。

簡単ですが、図を作ってみました。(あまりにもやっつけなので、後で差し替えるかもしれません…)

m-sitemap

この薄いピンクの部分が携帯用部分で、濃いピンクの四角で囲った「m」がそれぞれのトップページ、「m-TOP」が携帯サイト全体のトップページになります。(wpは「ウェブページ」です。)

各ブログへのトップページには、全体のトップページからメニューを作ってリンクします。

次は、各キャリア対応ですが、長くなりましたのでそれは次回。

ブログランキング・にほんブログ村へ
にほんブログ村

Twitt