fbpx

メニュー

WordPressで携帯サイト作るときの情報源など

高橋文樹 高橋文樹

この投稿は 13年半 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

WordPressで携帯対応サイトをつくることになったので、そのメモです。他人に教える用です。

基本3キャリア限定です。PCサイトと携帯サイトの両方に対応するような場合を想定しています。あと、基本はDoCoMo902以降の端末で、非公式サイトを想定しています。

使用するプラグイン＝ktai-style一択

http://wppluginsj.sourceforge.jp/ktai_style/

ktai-styleをWordPressをガラケー（スマートフォンじゃない携帯電話）に対応させるプラグインです。これ以外の選択肢はほとんどありませんし、なんらかの理由で使わないのであれば、WordPress以外も検討してみたほうがいいです。

ドキュメント（html）がプラグインに同梱されているので、熟読しましょう。フィルターとかフックもかなり用意されているので、プラグイン作成の方法を学ぶにも勉強になります。

公式情報

  1. 作ろうiモードコンテンツ | サービス・機能 | NTTドコモ
  2. KDDI au: EZfactory
  3. Softbank MOBILE CREATION

各キャリアとも、公式CPの場合だけ見られる素敵なドキュメント群（大量のPDF）がありますが、公式サイトのことは割愛します。NDAとかもあったような気がするので。

アプリの作り方、Flash Liteの仕様などもこちらに載っていますが、公式の情報だけを鵜呑みにせず、ネットを検索しましょう。

シミュレータ

FireMobileSimulator

Firefoxのプラグイン。なんとなく画面の雰囲気を掴みたいときはこれ。絵文字とかも再現してくれる。他にも幾つかありますが、これだけで十分だと思います。

iMode simulator Ⅱ

DoCoMoの公式シミュレータ。UAはなしだった気がする。あと、バージョンが古い。

Softbank ウェブコンテンツヴューア

発音が難しい、Softbankの公式シミュレータ。いくらなんでもバージョンが古すぎる。

Openwave SDK6.2K

au用のシミュレータ。しかし、なぜか配布が終了されているので、インターネットアーカイブからがんばってダウンロードするのが吉。このURLなら多分大丈夫。法的にOKかどうかは知らない。

ダウンロードできなかったら、Internet Archiveで以下のURLを検索してください。2006〜2007年ぐらいまで遡ればまだあります。

http://developer.openwave.com/ja/tools_and_sdk/openwave_mobile_sdk/SDK62K/index.html

公式のシミュレータはどれもバージョンが古いので、「持ってると安心」ぐらいの感覚でいましょう。ちなみに、すべてWin XPじゃないと動かないと思います。MacユーザーはVMwareとかを買いましょう。Combo Boxというのは無料らしいです。Virtual Boxでしたソフト一個買って足が出るような仕事なら断っちゃって下さい。

[429] [429] Client error: `POST https://webservices.amazon.co.jp/paapi5/getitems` resulted in a `429 Too Many Requests` response: {"__type":"com.amazon.paapi5#TooManyRequestsException","Errors":[{"Code":"TooManyRequests","Message":"The request was de (truncated...)

有用な非公式（？）情報源

携帯で制作する上での注意点

キャリア間差異の吸収

携帯はキャリアごとにかなりの差があります。基本的にはktai-styleに備え付けの機能をうまく使った方が楽に開発できますし、アップデートにも対応可能です。

文書構造

文書構造が各キャリアで違います。また、WordPressでxhtmlとして動かしたい場合、xmlヘッダーを吐かなければDoCoMoが受け付けてくれないので、その点注意してください。

<?php
header("Content-Type: application/xhtml+xml; charset=Shift_JIS");
?>

とか。ktai-styleはそこらへんをよしなにやってくれます。同梱のテーマファイルのheader.phpをよく読みましょう。

HTMLタグ

個体識別番号の取得方法やmarqueeタグの属性値が違ったりします。ktai-styleにはコンディショナルタグがあるので、キャリアを判別してくれる関数を書いておくと楽です。Web上にまとまった携帯用HTMLタグ辞典みたいなものがないので（携帯サイトをつくろうさんぐらい）、一冊ぐらいレファレンス持っていた方がいいかもしれません。

[429] [429] Client error: `POST https://webservices.amazon.co.jp/paapi5/getitems` resulted in a `429 Too Many Requests` response: {"__type":"com.amazon.paapi5#TooManyRequestsException","Errors":[{"Code":"TooManyRequests","Message":"The request was de (truncated...)

CSS

CSSは事実上インラインCSSしか使えないと思っておいた問題ないです。難しいことはほとんどできないので、文字装飾と背景色ぐらいでしょうか。文字色変えるタグを関数化しておくといいと思います。

<?php
//functions.phpに記載 cがバッティングしたらごめんなさい。
function c($str, $hex = "ff0000"){
    echo "<span style=\"color:#{$hex};\">{$str}</span>";
}
?>

Javascript

使えません。iModeブラウザがバージョンアップして使えるようになったとのことですが、ある事件をきっかけにとんと聞かなくなりました。いま携帯専門Web屋さんたちの間ではどういう扱いになってるのか非常に気になります。

絵文字

絵文字は各キャリアで独自の仕様があります。ktai-styleに共通絵文字を出力するタグがあったはずなので、それを使ってください。

<img localsrc="68" alt="" />
<!-- スマイルマークを出力 -->

共通の絵文字はドコモ絵文字コード・タイトル（意味）一覧などの一覧表で把握してください。

文字コード

携帯はformのPOST情報がShift_JISで飛んで来たりするので、頑張って変換してください。

<?php
//無名関数を使っているのでphp5.3限定。
//POST変数のすべてに対してエンコーディング変換してextractする
extract(array_map(function($var){
   return mb_convert_encoding($var, "utf-8", "sjis-win");
}, $_POST));
?>

画像形式

i-modeはpngダメです。テーマの場合はGIFまたはJPEGに固定することで問題ないかと思うのですが、投稿データにpngを入れてしまっている場合は注意してください。一応、ktai-styleには投稿内の画像を自動で変換してくれる機能があります。

携帯端末が1ページあたりうけとれるデータは100kb以内なので、画像サイズにも注意してください。最大でも1つ25kbというのがauの制限だったような気がします。ちなみにktai-styleは投稿内の画像をすべてリンク文字列に変換します。これが嫌だという場合、画像を縮小する関数を自前で作ったほうがいいでしょう。

解像度

携帯の標準的な解像度は横240px（QVGA〜WQVGA）ですが、最近は横幅480pxの高解像度端末も増えており、キャリアから「高解像度にも対応してください」というアナウンスが出ています。ここら辺はクリエイティブと天秤にかけて対応してください。めんどくさかったら、開き直って横240px固定にしちゃうのもアリだと思います。

対応する場合はGDなどの画像操作系関数でサムネイルを作成して対応することになるのですが、問題は解像度の取得。DoCoMo端末はUser Agentなどから解像度を取得することはできません。auおよびSoftbankはUAに画面解像度が入っているんですが、ブラウザなの解像度だったり違ったり、いまいち信用できない値になっています。

PEARにNet_UserAgent_Mobileというのがあるのですが、2009年で更新が止まっており、DoCoMoの最新端末情報が反映されていません。したがって、現実的な方策は以下のとおりです。

  1. 上述のNet_UserAgent_Mobileを拡張して自分で管理する（DoCoMoの公式サイトに解像度のデータが載っています）
  2. k-tai.orgの携帯電話スペック一覧などのデータをカスタマイズして判別機能を作成する

という感じになるでしょうか。携帯はIPアドレスによるホワイトリスト方式とか、常にデータをUpToDateに保たないといけないことが多くてめんどくさいです。

SSL

SSLにきちんと対応するためにはVerisignのじゃないとダメだったと思います。Global Signなどのちょっと安めの証明書でも新しい端末ならオーケーです。

実機での検証について

実機で検証を行うに越したことはないのですが、SOHOや小さい会社だと難しい場合が多々あります。公式CPなら検証センターというのを使えるので、すべての端末で確認できるのですが、なかなかそうもいかないでしょう。

自分で作ったサービスならアズイズでいいですが、クライアントワークの場合は「動作保証をテーマ開発要件に含めない」方が無難です。普通のWeb制作でも対象ブラウザを限ったりするものですが、携帯もそれと同様です。一応、各端末で検証してくれるサービスもあるので、その費用を「検証費用」として請求すればクライアントも納得するでしょう。

適当に「大体の端末で見れますよ」みたいな感じにしちゃうと、クライアントがディズニー・モバイルなどの特殊な携帯を使っていた場合に悲劇です。僕は前職でクライアントが株を確認できる携帯を使っていたためにヒーヒー言ったことがありました。

その他、参考書籍や心構えなど

携帯用の技術本は結構たくさんあるので、どれでもいいと思うんですが、わりと読みやすいのがコレでした。ちと古いかもしれませんが、携帯サイトとは何かがユーザビリティの観点からまとまって書いてあるので、すぐ読み終えられます。

[429] [429] Client error: `POST https://webservices.amazon.co.jp/paapi5/getitems` resulted in a `429 Too Many Requests` response: {"__type":"com.amazon.paapi5#TooManyRequestsException","Errors":[{"Code":"TooManyRequests","Message":"The request was de (truncated...)

PC中心のWeb制作者にありがちなことですが、そもそも自分ではスマートフォン使ってたりして、携帯サイトをあんまり見ないということが往々にしてあります。PCのデザインに慣れたデザイナーも要注意ですね。「なんでアメブロの芸能人はあんなに改行しまくってんだ」と疑問を感じていたり、女の子から来たメールにハートの絵文字が入っていただけで「この娘、俺のこと好きなんじゃないか」と思ってしまうあなたは特にご用心です。あまり自分の感覚を信用しない方がいいでしょう。書籍やWebサイトなどの情報を頼りにして作成していくのがいいかと思います。

そういう意味で、携帯サイト開発は女性に向いているのかもしれませんね。女の人ってデコメ好きだったりしますし。

あと、コンテンツ適正（閲覧に適した文章量、地方の人が閲覧することが多い、対象ユーザーの年齢層がPCと異なる、家でゆっくり見るとは限らないetc）というのもあるので、あまりワンソース・マルチユースを過信しないことも大切です。

[429] [429] Client error: `POST https://webservices.amazon.co.jp/paapi5/getitems` resulted in a `429 Too Many Requests` response: {"__type":"com.amazon.paapi5#TooManyRequestsException","Errors":[{"Code":"TooManyRequests","Message":"The request was de (truncated...)

おまけ：Macユーザーのための携帯シミュレータ利用法

Macだと公式キャリアのシミュレータが動かないので、VMWareなどの仮想化ツールでWindows XPをインストールして利用します。持ってない人は買ってください。

WordPressで開発を行っているなら、MampやXamppでlocalhostを立てていることでしょう。できれば、VMWareに入れたWindows XPからもこのホストを参照したいものです。そのための方法をご紹介します。

1. Macのホストを追加

普通にApacheをインストールすると、http://localhostが127.0.0.1を向くようになっています。127.0.0.1はループバックアドレスといって、自分自身を示すIPアドレスなのですが、このままだとVMWareのWindowsから参照できません。Windowsのシミュレータにhttp://localhost/と入れると、VMWare上で動いているWindows自身を指すことになってしまいます。

そこで、Macが自分のホストを参照しつつ、Windowsからも参照できるような名前を作ります。

まずはアプリケーション > ユーティリティからターミナルを開いて以下のコマンドをコピペ。

sudo open -t /etc/hosts

管理者のパスワードを入れたらテキストエディットが立ち上がります。以下のように追記してください。

127.0.0.1     localhost
127.0.0.1     mac #←追記

ブラウザを立ち上げたら、http://macでローカルホストに行くかどうか、確認して下さい。

2. MacのプライベートIPを取得

引き続きMacのターミナルで以下のコマンドを入力してください。

ifconfig

そうするとズラッと文字列が出てくると思いますが、en0かen1の欄にinetという項目があると思います。192.168.0.*とか、172.16.0.*とかの文字列ですね。これをコピペしてブラウザに入力し、http://macと同じ画面が出たらそれがMacのプライベートIPアドレス確定です。

GUIが良かったら、システム環境設定 > ネットワーク > 表示:内蔵Ethernetで確認できると思います。

3. Windowsからhttp://macを参照できるようにする

今度はVMWareにインストールしたWindowsに移動してください。で、C:\WINDOWS\system32\drivers\etc\hostsというファイルをノートパッドで編集して下さい。Macの時と同じく、ホストを追加します。

127.0.0.1       localhost
192.168.0.5    mac #←MacのプライベートIPとホスト名を追記
仮想WindowsマシンからMacのサーバを見る
仮想WindowsマシンからMacのサーバを見る

保存したら、ブラウザにhttp://macと打ち込んで、Macの画面が出ることを確認してください。

これでシミュレータでのチェックとMacでの開発を同時に行うことができます。

  • 同様の方法でIETesterも使えるので、設定しておくと楽です。
  • MacのプライベートIPは再起動時などに変わることがあります。固定したい場合は「プライベートIP 固定 mac」でググってください。
  • 当然ですが、これを実現するためにはWordPressのインストール時のアドレスをhttp://localhost/ではなく、http://macにする必要があります。
すべての投稿を見る

高橋文樹ニュースレター

高橋文樹が最近の活動報告、サイトでパブリックにできない情報などをお伝えするメーリングリストです。 滅多に送りませんので、ぜひご登録お願いいたします。 お得なダウンロードコンテンツなども計画中です。