ke-tai.org ケータイサイト開発に関わる記事・情報を紹介

ケータイサイトを運営すると、必要になってくるのが、「PCからのアクセスをブロックし、ケータイからのみアクセスさせる」という仕掛けです。

通常これを実現させるためには、IPアドレスによる制限をかけることになると思うのですが、IPアドレスは稀に変更になるため、情報を追いかけるのが大変です。

それに加え、キャリアのIPアドレスは、各公式ホームページ上で公開されているのですが、検索エンジンのクローラの情報は公開すらされていないこともあります。

というわけで、「この手の情報は多人数で保守したほうが便利ではないか」との考えから、情報を共有するためのWikiページを作成してみました。

→　ke-tai.org Wiki　ケータイキャリア・クローラIPアドレス

ひとまず本日時点での情報を集め、ベースとなるものを作成してみました。

他にも追加したほうがよいIPアドレスや、間違い等がありましたら、修正のご協力をお願いします。

好評なようでしたら、イタズラ修正を防ぐための仕掛けや、RSSでの通知機能、.htaccess形式でのダウンロード機能などを追加していきたいと思います。

関連：

• Google、モバイル向けクローラーの情報公開へ
• .Macメールがドコモで利用可能になる件の対策について
• 2008年1月10日付けで、auのIPアドレスが1つ追加されたようです

本日、ケータイでの「画像の回り込み」に関して調査しましたので、メモを兼ねてまとめてみます。

もちろん、キャリア毎に書き分けてしまっては意味が無いので、3キャリアで共通して使える書き方を調べてみることにしました。

まず問題となったのが、auでfloatが利かないことです。
では、オーソドックスにimgタグのalign属性を使ってみてはどうかということになりますが、今度はドコモ(XHTML)で正しく表示されません。
なかなかやっかいです。

そこで、次のようなサンプルHTMLを作成し、3キャリアでテストを行ってみました。

<img src="test.gif" style="float:left;" align="left" />
あいうえおかきくけこさしすせそたちつてと・・・

こちらの「style」と「align」の部分を変更しながら、きちんと回り込みが行われるかどうか、実機からの確認を行いました。

1. 「style=”float:left;”」のみ
2. 「align=”left”」のみ
3. 「style=”float:left;” align=”left”」の併記

結果は次のようになりました。

結局、両方を併記するほかないようです。
ソフトバンクはオールパスです。（PCも当然オールパスでした）

さて続いて、回り込みの解除です。

<br clear="all" style="clear:both;" />

のように書けばOKと思ったのですが、ドコモで解除が行われませんでした。

仕様を読んでみるとXHTMLでは、clearはブロック要素に書かなくてはならないとあります。
ですので、次のようにdivタグで書いてみました。

<div clear="all" style="clear:both;"></div>

※<div />という書き方は出来ないのでは、というご指摘をいただきましたので、修正しました。

ということでまとめとしては、次のように書けば3キャリアに対応した画像回り込み＆解除が行えるようです。

<img src="test.gif" style="float:left;" align="left" />
あいう
<div clear="all" style="clear:both;"></div>
えおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん<br />

きちんと表示されました。

関連：

• 他のケータイサイトのHTMLを参考にする際に便利な裏技
• フォームでのユーザビリティ向上のポイントを紹介した記事「PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは」

先日、日本ではソフトバンクから発売されることが決まったばかりのiPhoneですが、早くも発売日が決定したようです。

→　ソフトバンク　プレスリリース　ソフトバンクとアップル、iPhone 3Gを7月11日より日本で発売 [softbankmobile.co.jp]

→　AV Watch　米Apple、3G対応のiPhone発表。日本発売は7月11日 [watch.impress.co.jp]

→　GIGAZINE　ついに「iPhone 3G」をアップルが発表、日本でも7月11日発売 [gigazine.net]

→　GIGAZINE　日本で発売される「iPhone 3G」の詳細なスペックと高解像度画像いろいろ [gigazine.net]

→　NIKKEI NET IT+PLUS　iPhone 3G「ホワイトプランにするつもり」・ソフトバンク孫社長 [nikkei.co.jp]

今回の3Gモデルでは、HSDPAやGPSに対応し、バッテリーも長持ちするようになっているとのことです。

発売日は、2008年7月11日(金)、価格は8Gモデルが$199、16Gモデルが$299とのことです。
この価格は安いですね。

購入はソフトバンクショップで行えるようです。
もう予約は受け付けているのでしょうか？

関連：

• ソフトバンクのiPhone発表に関する記事をまとめてみました
• 【速報】iPhoneはソフトバンクから発売されることになったようです
• 「iPhone」3Gモデルの登場は6月頃?

本日は、ケータイサイトのHTMLを作成する際に便利な、Tips的なものをご紹介します。

ケータイサイトはPCサイトと違って、HTMLソースを見ることができません。
たとえPCのブラウザから見たとしても、大手サイトはIPアドレスによる制限がかけられていて、ソースが見れるケースはまずありません。

ですので、HTMLがどのように作られているのかは、よくわからないことが多いと思います。

ご存じ「モバゲーTOWN」を例にご説明します。

例えば中央の点線や、「楽しもう」の上下の細い黒線は、どうやって書いているんでしょうか？
画面上から見ただけでは、正直よくわかりません。

そんな時に役立つのが、「画像を保存」機能です。

これを使えば、CSSで書かれているのか、画像なのかがわかります。

点線は画像でした

またスペーサー画像の位置もバッチリわかります。

中央にある緑のカーソルがあたった部分がスペーサー画像

モバゲーTOWNでは、トップページだけでも、10ヶ所以上ものスペーサー画像が使われていることがわかります。
（おそらくドコモ端末で、marginやpaddingが、効かないためだと思われます）

他ケータイサイトのデザインを参考にする際には、ぜひ活用してみてください。

関連：

• フォームでのユーザビリティ向上のポイントを紹介した記事「PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは」
• モバゲーのフレームワークがオープンソースとして公開されました
• ブックレビュー： 勝手サイト – 先駆者が明かすケータイビジネスの新機軸

ここ最近は大きなニュースが多く、ニュース記事の紹介ばかりでしたので、ひさしぶりに技術メモ的なものを書きたいと思います。

先日mod_rewriteを使っていて、セッション絡みで少しつまづいた件をご紹介します。

実はPHPで動いているページを、「*.html」として静的コンテンツに見せる、というものを作ろうとしていました。
.htaccessの内容としては次の通りです。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^([0-9A-Za-z~_\-\.]+)\.html$ /viewer.php?p=$1 [L]
</IfModule>

ブラウザで正常に動作することを確認し、その後ドコモの実機でテストしたのですが、何度試してもセッションを引き継いでくれません。

それもそのはず、ドコモ端末はcookieが使えませんので、URLにセッションIDを埋めこんで引き継いでいく必要があります。
上記のような設定では、mod_rewriteがセッションIDの引数をカットしてしまうのです。

というわけで、ケータイのセッションに対応するための設定は以下のようになります。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^([0-9A-Za-z~_\-\.]+)\.html$ /viewer.php?p=$1 [QSA,L]
</IfModule>

[QSA,L]の部分の、QSAフラグがポイントとなります。

リファレンスによると、QSAフラグは次のように説明されています。

このフラグは、置換文字列の中でマッチしたものを書き換えるのではなく、 そこにクエリー文字列部分を追加するように、書き換えエンジンに強制します。書き換えルールを通してクエリー文字列に何かデータを追加したい場合にこのフラグを使います。

ちょっとわかりづらい説明ですが、要はアクセスされたURLについていたクエリー文字列を、そのまま引き継ぐためのフラグです。
これをつけることによって、セッションＩＤを失うことなくプログラムに渡すことができます。

次のような書き方でも、同じように動くようです。

viewer.php?p=$1&%{QUERY_STRING} [L]

なお、ケータイのセッションに関する詳しい説明は、こちらをご覧ください。
→　PHPでケータイからセッションを使う場合の設定方法

関連：

• ケータイキャリア毎に振り分けを行うには（mod_rewrite編）
• PHPでケータイからセッションを使う場合の設定方法