iPhone OS 3.0のSafariでコピーふきだしを無効にするには
    このエントリをはてなブックマークに登録

2009/6/22 月曜日 matsui Posted in iPhone, TIPS No Comments »

先日リリースされたばかりの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で画面キャプチャを撮る方法
    このエントリをはてなブックマークに登録

2009/4/14 火曜日 matsui Posted in iPhone, TIPS 3 Comments »

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

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

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

 

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

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

 

関連:



ケータイサイトでのセレクトボックスの制限について調べてみました
    このエントリをはてなブックマークに登録

2008/11/7 金曜日 matsui Posted in DoCoMo, TIPS 9 Comments »

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

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

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個以上の表示は機種依存で、保証されないということですね。

 

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

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

 

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

 

関連:



他のケータイサイトのHTMLを参考にする際に便利な裏技
    このエントリをはてなブックマークに登録

2008/6/9 月曜日 matsui Posted in TIPS, デザイン No Comments »

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

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

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

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

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

 

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

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


点線は画像でした

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


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

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

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

 

関連: