MovableType一覧

MovableTypeについての覚書

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がガラケーを偽装していることも見破るようです。

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

のように書きます。

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

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

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

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

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


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;’;