SmartHacks – スマートフォンブラウザ技術勉強会第2回

URL: http://atnd.org/events/15176

場所:株式会社エフルート

Android Apps by HTML5

発表者: Zkyuun Entertainment 富島さん

ファッションアプリを作成中(インスタグラムのファッション版)

  • PHP/JavaScript/Java
  • jQuery Mobileを使用して開発していたが、重かったので取り外して1から構築
  • 写真を取って、ファッシャン雑誌の表紙を作れるアプリ
  • HTML5として用いているのはlocal strage
  • 本番に移行した際にはアプリケーションキャッシュも利用したい

local strage は android2.1以上(一部未対応あり)

対策として、未対応端末はハッシュをつけてJSONで通信して保存

ボタンのグラデーションなどにCSS3を利用

解像度の問題

アプリのほうで横320固定でやっているため、あまり気にせずやっている。

2重押し対策

ボタン押下後、全体をブラックアウトして押せなくしている。

質疑応答

収益は?
考えていない、有料にするとアプリはあまりもうからない、
広告単価が高いので広告を入れるとWEB広告よりは儲かるかもしれないが、
操作性が低下する
Titaniumを使うといいのでは
iPhone版で検討中

スマートフォンと相性が良い”HTML5″

発表者: 株式会社フォリフ 中村さん

ブラウザアプリとネイティブアプリの違い

スピード・UIはアプリが有利
開発のしやすさはブラウザアプリのほうが上

→スピード・UIの補填にHTML5を用いる

Canvas

jsで動的に絵を描くための仕様

iOSとAndroidの差異を吸収

初期化時にユーザエージェントで端末毎に振り分け、初期値などを設定

iOS4と3GSの振り分け

ユーザエージェントだけでは判別できないので、CSSでスタイルの設定を行い、onload時にそのスタイル値を読み込む、両者で値が違うので、それで判別

OS差異Tips

Android1.6

  • jsが遅い
  • 動作がカクカクする

iPhone4

  • jsはベンチマーク上早いが、実際は3G,3GS,Androidよりも遅い

iOS3.1

  • fillText()などの文字列描画系にバグ

Android2.1

  • drawImage()にバグ。ただし端末による

質疑応答

  • canvasの利用例
    http://5-land.jp/
    http://gang.gs/
  • クロスブラウザの問題もあるのか
    あるので意識しながら開発する必要がある
  • CSS3とCanvasでのグラデーションとの使い分け
    特に差異はない。

スマートフォン用Webデザインに役立つCSS3。その感動的な実態。

発表者: 株式会社フォリフ 三浦さん

CSS2からCSS3になることで何が変わるのか

  • 早い軽い
    • 画像やJSで表現していたものがCSSだけでできるように
    • CSS2と併用利用可
    • テキストファイルなので非常に軽い
    • アニメーションがJSよりスムーズ(環境による)
  • スマフォならクロスブラウザを気にしなくていい
    • ほとんどがWebkitでできているため

CSS3の使えるプロパティ

  • ドロップシャドウ
  • グラデーション
  • 透過色
  • 変形
  • 時間的変化
  • アニメーション
  • 角丸
  • 画像ボーダー

CSS3ツール

  • CSS3 Playground
  • border-image-generator
  • sencha animator

質疑応答

CSS3でのデメリット
PC向きサイトだと使えるプロパティと使えないプロパティがでてくる
広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中