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

先日リリースされたばかりのiPhone OS 3.0絡みのTIPSをご紹介します。

iPhone OS 3.0から待ちに待ったコピペ機能が付きましたが、スクロールすることが多いサイトなどでは、ふきだしが表示されてしまって不便なことがあります。

このふきだしをCSSを使って無効にする方法があるそうです。

→　masuidrive on rails – iPhone 3.0のMobileSafariでコピペを無効にする方法 [masuidrive.jp]

コピー用のふきだしとは次のようなものです。
画面を少しの間長押ししていると表示されます。

次のようなCSSを指定するだけで、コピーのCSSがでなくなるようです。

body {
     -webkit-user-select: none;
}

非常に簡単ですね。
iPhone向けサイトを作成されている方は覚えておいて損はないと思います。

他にも何かiPhone 3.0向けのTIPSをご存知の方がいましたら、ぜひタレコミをお願いします。

関連：

• iPhone OS 3.0がリリースされたので早速試してみました
• 6月26日にソフトバンクから「iPhone3G S」が発売されます
• iPhone OS 3.0からブラウザ上でGPS位置情報が取れるようになるとのことです

先日コメント欄からご指摘いただいたのですが、恥ずかしながらそれまで知りませんでした。

iPhoneの画面キャプチャは、「ホームボタン」を押しながら「電源ボタン」を押すことでどこでもキャプチャできるそうです。

今までわざわざカメラで撮っていました。
ぎゃーという感じです。

基本的にどんな画面でもキャプチャできるようで、例えばこんなログイン画面でも普通に撮ることができるようです。

色々と便利ですので、もし知らなかった方は活用してみてください。

関連：

• iPhone向けSkypeがリリースされたというので早速試してみました
• ブックレビュー： iPhone Web Style
• iPhoneでCSSを使って要素を3Dっぽく回転させる方法

先日、ケータイサイトのテストをしていて問題になったことがありましたので、そのことについて書こうかと思います。

ケータイサイトでのセレクトボックス（プルダウン）項目の数には制限があります。

SELECTとOPTIONタグを使って、次のような1~200までのセレクトボックスを作成してみました。

<select name="select">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
　　　・
　　　・
　　　・
<option value="200">200</option>
</select>

手持ちの機種でテストしてみたところ、幾つか表示できない端末がありました。

docomo キッズケータイ SA800iは50個でカットされます

docomo SH901iCは60個でカットされます

au機やVodafone, ソフトバンク機では、ある程度古い機種でも問題なく表示されるようです。
またドコモ機であっても、パッと試した限りでは902iシリーズ以降は問題なさそうです。
（手元にある機種だけしか試していないのであくまで参考程度とお考えください）

ドコモの公式サイトによると次のように書かれています。

→　NTT docomo　作ろうiモードコンテンツ　タグの制限値について [nttdocomo.co.jp]

SELECT ～ OPTION
15項目／画面
選択肢31項目
※本制限値以上の値の利用可否についてはメーカーオプションです。

つまり、31個以上の表示は機種依存で、保証されないということですね。

昔は画面サイズ（最大容量）の問題があったりしたためセレクトボックスの長さにも気を使っていたのですが、最近はすっかり頭から抜けていました。

セレクトボックスをあまり縦に長くすると入力しづらくなるため、それほど引っかかるケースはないと思いますが、長くなる場合にはテキスト入力欄にする、複数に分けるなどの対応が必要になりそうです。

この辺りの情報をまとめた資料はあまり無く困っています。
古めの機種をお持ちの方はテストにご協力いただけると幸いです　→　コチラ
コメント欄かフォーラムからぜひフィードバックをお願いします。

関連：

• ケータイ+Cookieのハマリどころをまとめた「携帯とCookieドメイン」(ウノウラボ)
• ケータイフォームでの入力モードの仕様について詳細にまとめられた「携帯XHTMLでの入力モードのまとめと、ちょっとしたハマりどころについて」
• 各キャリアの画像保存・転送制限の設定方法をまとめてみました

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

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

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

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

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

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

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

点線は画像でした

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

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

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

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

関連：

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