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
  1. コメントはまだありません。

  1. トラックバックはまだありません。