タグ : php

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サイトで携帯対応まとめ(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

MTで拡張子をphpにした時のエラー

毎回つまづくので覚え書き。

MTでphp includeを使いたいのでファイルの拡張子設定をphpに変更する際、テンプレートの一行目にxml宣言(<?xml version=”1.0″ encoding=”<$MTPublishCharset$>”?>)が入っているとエラーになって表示できません。

エラーメッセージはこんな感じ。

Parse error: syntax error, unexpected T_STRING in ~…

以前は強引にこの一行目を削除したりしていたのですが、せっかく文法通り書いてあるのに消すのもおかしな話。

なので解決法を探したところ、こちらに原因と解決法が。

PHPのShort tagでエラー (Parse error: syntax error, unexpected T_STRING) | MEMO-LOG.

結局のところ、最初の「<?」部分をphpがスクリプトと勘違いして止まってしまうようです。

上記記事を参考にさせていただき、一行目を

<?php echo ‘<?xml version=”1.0″ encoding=”Shift_JIS”?>'; ?>

に書き換えたところ、無事表示できるようになりました。

やっぱりめんどくさがらずに一個一個解決しないといけませんね。

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

Twitt