[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版) Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！ 特に明記がないものはすべてWebkitについてです。 見つけ次第順次追加予定。 タイトル変更、増えてきたので目次追加しました。 この記事はiOS5、Android 3以前について記載したものです 【css】 タップ時にz-indexを無視して下の要素に枠がつく(Android) 【html, css】 マルチバイト文字にfont-weight:boldが効かない(Android) 【css】 border-radiusのコーナーがジャギる(Android) 【css】 box-shadow、text-

CSS Nite in OSAKA, Vol.29 で発表したスライドです。改訂版を http://www.slideshare.net/HiroakiWakamatsu/ss-14011485 にアップしました。Read less

iOS 4.2から加速度センサーをSafari上で使用出来るようになったみたなので以前作成したこちらのサンプルをiPhone向けに移植してみました。 Firefox 3.6から搭載の加速度センサーで画像を動かすサンプルを作ってみた - 強火で進め http://d.hatena.ne.jp/nakamura001/20100123/1264234259 仕様書を確認したところほぼ同じ記述で良さそうですが微妙に変更が必要な箇所が有ったので書いておきます。 まずはイベントリスナーへの追加方法。 Firefoxの時はこの様に "MozOrientation" と書きましたが window.addEventListener("MozOrientation", mozHandleOrientation, true);iPhone(現行のW3Cの仕様)では以下の様な記述となります。 window.ad

【1-1】はiPhone、Androidに対応した動画フォーマットになる。 iPhoneとAndroidを個々で見ていくと両機種とも専用のフォーマットもあるが、汎用性を考えるのであればmp4で作成するのがトラブルが少ない。Webページ上で動画を再生する場合、通常はvideo要素を使用する。 video要素は、HTML5から本格的に導入される動画専門のタグであり、iPhoneであれば動画の場所、サイズを指定すれば再生できる。 Androidの場合、video要素は対応しているのだが、コーデックの対応が未整備のため、onclick="this.play();"という一文を加える必要がある。 今回はiPhone、Android、両対応のvideo要素であるが、UAを見て各プラットフォーム用にページを作成することも必要になってくるだろう【1-2】【1-3】。 【1-1】共通で対応している動画フォー

生成するhtmlコードに関する部分が中心。 まだ修正・追記をする予定。Adobe Edgeを追加予定。 [2011/12/31 コメントで指摘をいただいたExGameの間違いを修正] Swiffy v3.6 Flash(swf)をhtml5を使ったコンテンツに変換できるGoogleのwebサービス。ActionScript2まで対応。 Google Lab廃止から生き残ったし、アップデートもされているので、Googleも力を入れている模様。 生成するhtmlコード Flashの変換結果として大量のjsonデータが出力され、それがランタイム(runtime.js)によって実行される。 Flashのアニメーションのオブジェクトの移動は、SVGのtransform属性のmatrixに変換している。相当重くiPhone4ではシンプルなコンテンツでないと厳しい。 ベクタ画像はSVGに変換される ja

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / まずはじめに、これは合ってるかわかりません…。 でもたぶん合ってると思う。 width=device-width, initial-scale=1で、iPhoneを縦→横に傾けたら、 「1.5倍にズームした状態でさらにドキュメントの幅が480pxになる」 という謎の挙動を理解してみる。 viewportについては、Androidの動きを正と見て、iPhoneの挙動を理解したほうが容易。 initial-scaleとwidthを同時に指定した場合がめちゃくちゃにややこしい。 initial-scaleは、PCのブラウザいうとズーム機能に近いが、それによりドキュメントの幅が調節される。これは例えば

最近タッチデバイスでスワイプしてスライドするようなUIを書く機会が多いので汎用的に使えるようにしてみた。 DEMO pxgrid/js-flipsnap - GitHub iScrollでもsnapっていう機能使うと同じようなことができるんだけど、iScrollでこれをやろうとするとこのスクロールが効いてるところはネイティブの縦スクロールが効かなくなるという問題があって、それを解決しようと思って最初はiScrollの内部をいじってたんだけど、ちょっとiScrollベースだとどうしても無理なところがあったのでこの機能だけ切り出してみたというわけ。 一応Androidでも動いてるっぽい。 iScrollみたいに多機能じゃないけどまあこれだけ使いたいっていうこと結構あるので割といいんじゃないかと。TODOはとりあえずドキュメント。 追記（2012/02/04）：クロスブラウザに対応しました。

勉強会向けに「そろそろAndroid本についてうんちく語っておこうか」という切り口で、自分が所有してるAndroid関係の本をまとめてみました。 勉強会では1時間かけて辛口トークの予定ですが、こちらは一口コメント程度で。 ちなみに、以下の本の購入代金を合計すると、70760円也。これを高いと見るか、安い見るか。まぁ得た価値から鑑みると、本の代金はたいてい安いんですけどね。 濃いAndroid本 古い本だが、未だ超えられない本。特に概念について突っ込んでまとめてある。未だよく見る "Google Androidプログラミング入門" (江川 崇, 竹端 進, 山田 暁通, 麻野 耕一, 山岡 敏夫, 藤井 大助, 藤田 泰介, 佐野 徹郎) さすがオライリー・クオリティー(でも自分が持ってるのは初版) "初めてのAndroid 第3版" (Ed Burnette) とにかくサポート範囲が広くて

jQuery Mobile のリファレンス的なものを作りました。 取り敢えず叩き台で、ツッコミなどあればコメントください！ ※RC2版に対応しました Page 要素 属性 値 概要 div data-role page ページ 設定 値 既定 備考 data-fullscreen boolean false フルスクリーン表示（ヘッダーとフッターでdata-position="fixed"を指定する必要がある） data-add-back-btn boolean false 戻るボタンの自動生成 data-back-btn-text 任意 "Back" 自動生成された戻るボタンのテキスト data-keep-native 任意 ネイティブで利用するUIをセレクターで指定する data-dom-cache boolean false ページをキャッシュする data-theme 任意 c テ

アプリ申請始めてで色々細かいところで色々はまったのでメモ。 Provisioning Profileをつくる まずProvisioning Profileをつくります。以下の記事が参考になると思います。 目指せ！iPhoneアプリ開発エキスパート：第10回　App Storeでアプリを公開｜gihyo.jp … 技術評論社 まずはまったのが、ここでDistributionのタブがでなかったこと。これはアカウントのRoleがAgentの人じゃないとでないみたいです。僕のRoleはAdminでしたorz AgentのアカウントでProvisioning ProfileつくったらそれをTitaniumに登録します。以下のSelect Provisioning ProfileというところにダウンロードしたProvisioning Profileを設定します。 ここで気になるのがSelect Dis

HTML＋JavaScriptでiPhone/Androidアプリを作れるTitanium Mobileとは：Web技術でネイティブアプリを作れるTitanium（1）（1/3 ページ） iPad/iPhone VS Androidに戸惑っているWebデザイナ／開発者のために、Web技術でネイティブアプリを作れるオープンソースの開発ツールを紹介し、その利点や使い方を連載で解説します iPad/iPhone VS Androidに戸惑っていませんか？ 2010年1月5日、グーグルがAndroid 2.1を搭載した「Nexus One」を発表しました（参考：Google、Android 2.1搭載の“スーパーフォン”「Nexus One」を発表）。高精細なディスプレイや高速なプロセッサによる快適な動作など、iPhoneのライバルとしての存在感が話題になりました。また1月21日には、NTTドコモ

この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。