Android Bazaar and Conference 2011 Winter行ってきました

スマートフォン版GREE (HTML5+JavaScript & Android)

会場の人たち
スマートフォン版GREE(HTML5のすばらしさ)
  • 2010/8/9リリース
  • すべてajax
    • もっと見るはAjaxで追記
    • タブを切り替えた場合はContentsの部分が動的に切り替わる
    • フォトはCSSアニメーションでなめらかに
    • 次の写真は事前に裏でロードされている
  • iOS,android(xperia)で動作
  • HTML5+CSS3+javascript
要素技術
  • PCと違ってIE対策がないのでかなり楽
  • android,iOSともにwebkitベースのブラウザなので新技術を積極的に採用
  • ajax
    • 必要な部分だけ新しくする
  • HTML5
  • CSS3,animation,transform
    • 変形機能
HTML Forms
  • フォーム機能拡張
    • placeholderのサポート
      • フォームに薄い表示ができる
<input placeholder='メールアドレス' />
      • Android1,6だと動作がおかしくなる
      • iOS4.0未満でtextareaには効かない
      • iOS3.1.3を使っている人が結構いるGREE
    • email
<input type=email />
      • androidでは対応してない
      • パスワードを覚えてもらえてもらえなくなる
    • number
<input type=number />
    • url,date,searchなんかがある
    • 入力値をクライアント側
CSS3
  • レベル3セレクタ
  • グラデーション
  • アニメーション
  • 変形
  • device-pixel-ratio
  • Selectors Level3
      • last-child/:first-child
    • :not(.loading)
  • webkit-gradient
    • ボタンを作るのに便利
      • グラデーションがかかる
      • 丸角がCSSでつくれる
  • webkit-transition1
    • CSSスタイルの値を指定した時間でなめらかに変化させてくれる
    • jQueryよりなめらか
      • jQueryはタイマーで変化させている
      • jQueryは高負荷
      • High fps
      • Low ジッタ
    • 数字から数字への変化
      • height:auto -> height:0はできない
  • transform3d
困ったこと
  • アニメーションGIF
  • devicePixcelRatio
    • 多くの端末がdevicePixelRatio=1.5
    • 解決策
      • 2倍のサイズの画像を縮小して表示
Androidアプリ版
  • スマートフォン版にあ実現機能を追加
    • IS03プリインストールのGREEアプリ
      • 一言を書く欄の下に写真を撮るとかできる
      • Nativeアプリに渡せる
写真アップロードの仕組み
  • class GreeAppJs <->WebView
iOSでもできる
  • webView:shouldStartLoadWithRequest:navigationType:
  • stringByEvaluatingJavaScript
  • 表示部分をHTMLでつくるどうしても必要なものをNativeでつくる！！すごい
  • クライアントバイナリはそのままで表示だけ変更可能
    • iOSは審査が厳しいのでバイナリを差し替えは厳しい

まとめ

絵文字
Application cache
  • manifestで指定したファイルをオフラインキャッシュとして保持可能 <10M
  • 大量の小さな静的ファイルをキャッシュ
Web SQL Database
  • SQLite
  • サーバから読みだしたデータをローカルに保存可能 <10M
  • SQLでデータを読み出せるのでアプリケーションを機能的にリッチにできる
  • jsでHTMLのレンダリングをないといけなくなるので工数的に断念

HTML5によるリッチクライアント開発手法についてあれこれ

  • 白石俊平さん
  • HTML5開発者コミュニティ
  • HTML5&API入門
Web開発/HTML5の基礎知識
Web開発/HTML5の標準化団体
HTML5基礎知識
  • HTMLの最新場ジョン
  • 2011/5/22に仕様が確定する予定
    • 一応確定
    • ブラウザベンダーに確認
    • テストケースを作っていく
  • IE9.0 60%, Firefox 88%, Safari:91% , Chrome 10.0 : 93% , Opera 11.1:75%
    • 今年中にはかなり使える!!
どこまでがHTML5?
HTML5が可能にするもの
  • より美しく,インタラクティブに
  • 操作性とリアルタイム性を高く
    • Web Workers .. BackGroundの処理を可能
    • Web Socket ... リアルタイム性の高い、新たな通信新形式
      • サーバ・クライアントがほぼ対等に
      • 任意のタイミングで双方向通信
      • 基本的にはHTTPベースではない
      • 受け入れられたらその通信が使いまわせる
    • Server-Sent Events .. HTTPのサーバプッシュ
  • Offlineでも利用可能に
    • アプリケーションキャッシュ...オフライン利用可能なキャッシュ
    • WebStorage ... 簡単に利用出来るストレージAPI
    • Indexed Database API .. ブラウザ組み込みのKVS
    • File API .. ファイルの読み書き
  • Webサービス間の連携がさらに容易に
    • Cross Document Messaging ... Webページ間のメッセージ通信
    • Cross Origin Resource Sharing ... オリジンドメインを超えたHTTP呼び出し
  • プラットフォームとのより深い統合
    • Drag & Drop API ... ドラッグ&ドロップ 処理
    • Geolocation API ... 位置情報取得
    • Device APIs ... モバイルデバイス向けAPI群,カメラ、センサー、コンタクトリスト
サンプル
HTML5によるRIA開発
JSによるRIA開発困難
  • 非同期処理中心のプログラミング
    • コールバック地獄
アプリケーションアーキテクチャ
  • クライアントしかできないものはクライアントに
  • サーバしかできないものはサーバ
つまり...
  • Web1.0 ... テンプレートエンジンによるHTML動的生成
    • HTML内にUIとデータが混在
  • HTML5
    • UIとデータを分離
    • WebAPIを通じたデータの読み書き
    • 基本的にはHTMLは空っぽ,SEO的によろしくない
    • HTTPリクエストが増えまくる
      • Cache!!,Cache!!,Cache!!
オフラインWebアプリへ
  • HTML5時代のキャッシュ技術
    • 静的なリソースのキャッシュ
      • HTTPヘッダで制御可能
    • 動的なリソースのキャッシュを適切に行うのは難しい
  • アプリケーションキャッシュ
    • HTML/CSS/JS/画像をまるごとキャッシュされる
      • リソースがすべてローカルから読み出される
      • DaVinciPadすぐ出てくる
  • ローカルストレージ
    • Web Storage/Web SQL Database/Indexed DB という3つがある
    • 動的なキャッシュに向いている
どの技術をいつ用いるか
  • 静的なUIリソース
    • アプリケーションキャッシュ
  • 半永続的な、、別の人がアップした画像
    • HTTPのキャッシュ
  • サーバから読み取ったデータ
    • 変更頻度によって使い分ける
  • クライアントで生成したデータ
    • スマートフォンでいきなりオフラインに、、地下鉄
      • ローカルストレージに一旦キャッすする
      • あとからサーバと同期
  • 今後フレームワークで吸収されるのでは
アーキテクチャはどうなる

Google Developers

Androidウェブアプリケーション連携術

自己紹介
はてなのAndroid 事例1:フォトライフ for Android
  • はてなフォトライフの写真を快適に閲覧
    • 同一Activity
    • インテントを投げて全部別インスタンス
    • 遷移前に保持しているサムネイルは開放し onResume時に改めてキャッシュから読みなおす実装
    • Backボタン時にロードが走るようになったが許容範囲
    • 端末の回転
      • アクティビティが作り直される
      • onRetainNonCOnfigurationInstanceを実装することで
  • 写真アップロード,自動アップロード
    • Serviceは積極的に使う
    • 写真閲覧のプロセスと別にすることでService自体のメモリ使用量を減らし,killされにくくしている
    • 非同期API(Intent.ACTION_SEND) Serviceに投げっぱなし
    • 同期API
      • プログレスを表示するためaidlを書き内部でIPC
    • 自動アップロード機能
      • Serviceを常時起動
      • 数10秒ごとにファイルシステムを監視-> バッテリー食う ->スクリーンが付いている時だけ監視
      • lastModifiedが起動直後狂うので頑張る
    • Service常時起動
      • AlarmManagerで定期的に死活監視
      • Notificationが出ていても起動しているとは限らない
    • 起動直後の時間狂い
      • 起動直後はTZが設定されるまでディレイがある
メモリ消費削減の手段
はてなのAndroid 事例2:はてなログイン管理
  • アカウント情報管理アプリ
  • OSのContentPrvider+permissionを考えていた
  • セキュリティ上の問題
    • は先に定義したもの勝つ
      • 悪意のアプリが先にPermission定義しちゃうとまずい
はてなのAndroid 事例3:はてなモノリス
  • バーコードを読んでモノを共有するサービス
  • アプリでバーコードを読んで投稿する
  • 出来る限りWeb
  • Webのシームレスな連携
  • zxingを使った
    • 依存関係が複雑
      • 移植頑張った
adb shell am start -n com.example.foo/.Setting --ez debug true

を投げるとデバッグで任意
インテントが投げられる

  • 国際化

Locale.javaを実装

はてなのAndroid 事例4:はてなココ
  • 一情報共有サービス
    • WebViewがアプリ組み込み
WebエンジニアからAndroid

Android2.3 (Geneerbread API)

NearFileldCommunication
if(NfcAdapter.ACTION_TAG_DISCOVERD.equals(action){...
}
  • NDEF
    • NFCによるデータ交換はこの形式
    • Suica,Edy,運転免許証だと値が取れない
      • 実機では未検証
  • NdefMessage
    • NdefMessageはひとつ以上のNdefRecordから構成される
    • 一般的には1レコード
DownloadManager
  • SystemのService
DownloadMnager mDownloadMnaager = (DownloadManager) getSystemService(Content.DOWNLOAD_SERVICE);
  • バックグラウンドでダウンロードしてくれる
  • ダウンロードする対象をUriで指定
Uri uri = Uri.parse("http://download/image.png");
DownloadMnager.Request ...
  • 保存先をできる
    • デフォルトはキャッシュ
StrictMode

Y.A.M の 雑記帳: Android　Android 2.3 - StrictMode -

  • デバック用
  • Application Not Responding
    • main threadが5秒以上反応しない
    • BroadcastRecieverが10秒以内で終わらない
  • ANRの原因になりそうな処理を検出してくれる
    • UIスレッド上でのネットワーク処理
    • 時間のかかるディスク偉
UI Framework
Android NDK

Android NDK

  • JavaではなくC/C++使って開発
  • NDK 4まではJava<-JNI->C
  • NDK 5からはCだけで開発可能
    • ndk-buid
  • Logcatをみると..
    • Java 16/sec
    • NDK 40/sec
  • Nativeから直接制御
    • ライフサイクル
    • ユーザInput
    • ウィンドウ制御
    • センサーリスナー
    • ハードウェア構成管理
    • apk外部のアセットをネイティブコードから読む
    • ストレージマネージャ
    • OpenSL ES を通じたNaiveーディオAPI
android.os.strage
  • storageAPI
  • ディくイメージのオンデマンドマウント
    • vfat
    • イメージの暗号化
    • オーバレイさせることが可能
SIP-based VoIP

Samples  |  Android Developers

  • Session Insiation Protocol /ひかり電話等で使われている
  • voIP:インターネット電話
  • ベンダーが許可する
SipManager#isApiSupported()
  • アプリでVoIP機能を実現するためのAPI
Mixable audio effects
  • オーディオエフェクトに対応
  • トラック単位でも全体にも適用可能
  • OpenSL ESベース
Multiple Camera Support
  • 複数カメラ標準でサポート
  • android.hardware.Cameara
getCameraInfo(int,CameraInfo)
getNumberOfCameras()
PackageManager
  • PackageItemInfo
Telephony
  • ネットワークタイプが増えた
  • getPsc
Graphics
AlermClock

以上　書ききれない部分もありましたが
とても勉強になりました.

個人的には 表示部分をHTMLでつくるどうしても必要なものをNativeでつくる
というのがとても印象に残りました。