[js] スマートフォンのAjax フォーム送信時にキーボードを消す

Goボタンを押した時のイベントはsubmit もしくは event.keyCode のcode=13 で取れますが
テキストフィールドやテキストエリアに入力後、スマホのキーボードでGoボタンを押した時、
onsubmitをキャンセルしていたりするとキーボードが隠れないので、
キーボードが表示された要素からblur()でフォーカスを外す必要があります。

ボタンがあるならボタンにフォーカス移すのが手っ取り早い。

[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい

スマートフォンのブラウザアプリで画面の高さにきっちり収まる仕様で作っていると
高さが足りないのでwindow.scrollToしてもアドレスバーが隠せない。
でも隠した方が表示領域が増えるので何とかしたい。
単純に考えればアドレスバー分bodyの高さを増やせばいい、ってことなんですが…

“[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい” の続きを読む

[css, css3, html] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)

Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか
スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね!

特に明記がないものはすべてWebkitについてです。
見つけ次第順次追加予定。
タイトル変更、増えてきたので目次追加しました。

この記事はiOS5、Android 3以前について記載したものです

“[css, css3, html] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)” の続きを読む

[XHTML] 携帯サイト用 XHTML仕様まとめ

Docomo、au、SoftbankのXHTML仕様をざっくりまとめてみた。最後にiPhoneも追加。
XHTMLに対応している携帯は所謂第3次世代の機種です。
やっぱり三社三様だけどXHTML BasicやXHTML Mobile Profileに準拠しとけば全社に対応が可能な様子。

XHTML Basic » Kanzakiさんの解説
XHTML Basic » W3C仕様書

XHTML Mobile Profile » Openwaveのリファレンス

  Docomo au Softbank
表示対応機種 FOMAシリーズ
※機種によりimode-XHTMLの対応バージョンが異なる
(FOMAでも古い機種は未対応の様子)
WAP2.0ブラウザ搭載端末 3GC型(SoftBank 3G series)
※頭文字が7-9の機種
文字エンコード Shift-JIS・UTF-8 Shift-JIS・UTF-8 Shift-JIS・EUC-JP・ISO-2022-JP・UTF-8
※UTF-8以外の文字コードはゲートウェイにてShift_JISに変換される
DOCTYPE

<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd">

(Locale/Ver.=ja/1.0)の数字がバージョンによって変化。
1.0、1.1、2.0、2.1、2.2、2.3

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd">

※端末はDTDのチェックをしない

<!DOCTYPE html PUBLIC "-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN"
"xhtml-basic10-plus.dtd">
対応画像フォーマット

iモードブラウザ1.0(XHTML):JPG・GIF
iモードブラウザ2.0:JPEG・GIF・BMP

JPEG・PNG・GIF
※256色インデックス以上は減色表示
JPEG・PNG・GIF
最大ファイルサイズ imodeブラウザ1.0:100KB
imodeブラウザ2.0:500kb
9KB(画像データ等除く)
画像込みではDocomoとほぼ同等
300kb
絵文字 公式一覧ページへ
code.cside.com
一覧ページへ 一覧ページへ
IPアドレス帯域 一覧ページへ 一覧ページへ 一覧ページへ
ユーザーエージェント 一覧ページへ
iモードブラウザ1.0機種の一覧ページへ
iモードブラウザ2.0機種の一覧ページへ
一覧ページへ 一覧ページへ

Docomoとauは同じバイナリコードで似たような絵文字が表示される。
参考:全キャリア絵文字比較表(絵文字を使いこなして見るためのページ)

公式のシュミレーターはXHTMLに微妙に非対応らしく、仕様書で可とされている要素や属性でエラーが発生するようだ。

“[XHTML] 携帯サイト用 XHTML仕様まとめ” の続きを読む

[psd] Photoshop Mockup Template for iPhone

iPhone用モックアップテンプレートの必要性を感じたので作ってみた。

Safari View App View Keybord View

左から、Safari、アプリ、キーボード表示

キーボードと一部アイコン以外はベクトルマスク使ってるので色変更が出来ます。
画面のピクセルサイズがレイヤー名に書いてありますが、目算なので間違ってるかもしれない。

なお、zipに入っているpsdファイルのバージョンはCS2です。

“Photoshop Mockup Template for iPhone” をダウンロード iphone_template.zip – 669 回のダウンロード – 200 KB

iPhone購入適正度チェックシート

iPhone買おうかどうしようか迷ってる人向けに、購入検討用チェックシートを適当に考えてみた。100点満点。
質問が多く、他の携帯と大きく違う機能や、環境に関するポイントのまとめにもなってるんじゃないかな。

mixiのiPhoneコミュ、2chの各iPhoneスレ、ソフトバンク公式サイト、ニュースサイト、
個人の使用レポートなど参考にした。間違った情報があったらごめんなさい。

ソフトバンク公式サイト
Apple公式サイト
ASCII.jp iPhone 3G 最速レビュー

買った後の経験ふまえて色々追加
ガラケー=ガラパゴスケータイ[名詞]日本人(主に若い世代)用に向けて特化した、本来ついてなくてもいいだろうという機能を搭載したケータイを指す。携帯と書かない事に注意。

1.本体依存の機能

カメラはズーム・フラッシュなしで200万画素。動画撮影は出来ない。
ワンセグの受信は一切出来ない。

初期状態ではYoutubeの動画再生に対応。ストアで購入した動画も再生可能。
Orbというフリーソフト入れるとインターネットTVや動画サイトの動画再生が可能。

●ワンセグ
デフォルトでワンセグの受信が出来ないというのは同じだが、オプション次第で見れるようになった。
有名な所ではTV&バッテリーというのが出ています。

●カメラ・動画
3GSで画素数は300万にUPし動画撮影に対応。
旧型3Gの場合は動画撮影アプリを入れればそれなりな動画が撮れるようになる。
カメラアプリがかなり豊富。画素数は低いが表現は幅広く、高性能カメラでは取れない絵が撮れるトイカメラ的な利点が。
動画サイトは対応アプリによりほぼ網羅され、動画そのもののダウンロードも可能。
動画をダウンロードする際はWifi回線を使いたい。

●メモリーカード・外部保存機能
メモリーカードスロットは無いから使えません。
でも不自由さはない。PCサイトブラウジングが出来るのでストレージサービスの利用が出来るし、
DropBox、Evernote、Files、GoodReaderなどのファイル管理アプリも出ています。
iPhoneとPC間のファイル転送はBonjourで可能。
SMSやMMSの保存はソフトバンクのサービス依存になる所が大きいけど、これもまたアプリでカバーできてしまうし、
Webサービスのメールなら今は1Gとかザラなので、保存容量を心配する必要はまずない。
バックアップは基本的にPCになるから、必要性を感じることはあんまりないかも。

●修理とバッテリー
バッテリー交換が高いってのは有名な話。なんだけど、修理・交換してくれるサービスは結構あったりする。
加入時に資金的余裕があれば、AppleCare Protection Planに入っておいた方がいい。
Apple信者なら何も言わずショップにお任せという手を取るだろうから、交換で1万取られようが問題ないだろうと思う(笑)
あとは完全自己責任で自力交換するとかケース一体型の大容量バッテリーを使って凌ぐって手もあるかな。

  • この仕様で不満は感じない(+10)
  • オプションを買えばやれるのなら買います or 自力で修理できます(+9)
  • カメラが力不足な気がするが印刷用途じゃないから問題ない(+8)
  • 困ったらその時考える。とにかく欲しい(+7)
  • 他の周辺機器でカバーできると思う(+6)
  • カメラとかオプションはどうでもいいけど、保障や修理の値段が気になる(+5)
  • デジカメを持っていないし携帯の写真をよく使うから300万画素では困る(+4)
  • 動画撮りたいんですよね…(+3)
  • ワンセグ目的でアクオス携帯買った俺はどうしたら・・・(+2)
  • バッテリーの劣化が早そうなのに値段が高い。自分で交換したい(+1)
  • この仕様では買えない(+0)

“iPhone購入適正度チェックシート” の続きを読む