タグ : ドコモ

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