Google Developer Day 2010 に参加したときのメモを
綺麗に清書してブログにしようと思ったけど
なかなか時間がとれないし、ブームも去った感じがするし
えーい、もうそのままあげちまえ！
というエントリ
初めて行ったけど、とても面白く興味深いイベントだった。
正直、理解できずについて行けない場面もあったが、
自分に足りない物を感じる事ができるのも良いところ。
基調講演
Android
- コンシューマーゲーム
- 音声入力デモ
- speach to text （オムロン）
- アプリのダウンロード数日本は世界で2番目
GAE事例
- エコポイント
- mixiFES アプリ
Google日本語入力 Win/Mac
- Google 日本語入力 Cloude API
- Transliteration API 日本語サポート
- 出来ること
- ブラウザ上で変換候補を出せる
- 従来、IMEでやっていた機能をJavascriptライブラリで提供
- クラウド上でGoogle日本語入力と同じ語彙を提供できる
- HTTP GETでリクエスト、JSONでレスポンス
- まずはバックエンドのみ
- フロントエンド（Javascriptライブラリ）、Web UIは後日公開
- IMEのインストール無しでWEBアプリ上で、豊富な語彙を提供できます。
高性能なアンドロイドアプリを作るには
Jank
重くなる要因
書き込み、ネットワーク、SQL（not use indexes)
not respond 5 second
BroadcastRceiver doesnt'finish in 10 sec.
Nexuse One Number
yaffs2 write performance
- sqlite performance
→write, use indexes
for logging, consider file-append rather than database-write.
- writeng to storage is slow
- using the network is now
always assume the wors; performance
I/O and heavy computation on another thread not the US thread!
→IOや重い処理をUIと同じスレッドでするな
Tools: asyncTask
private class DownloadFilesTask extends syncTask
...
new DownloadFilesTask().execute(url1,...)
積極的にバックグラウンドに追い出す
asyncTask Details
- called from amain thread
- rather, a thread with a handler/Looper
- No nested calls
Tool:android.app.IntentService
- intent happens in a Service, so Android tries hard not to kill it
- Easy way to do use a Service
public class DismissAllAlarmsService extends IntentService {
...
}
In AlertReceiver extends BroadcastRceiver, onReceive(main thread)
UI Tips
- Disable UI elements immediately before kicking off your AsyncTask to finish the task
- Use an animation or PrograssDialog to show your're working
example
1.Immediately, disable UI elements
2.Briefly,a spinner in th title bar
3.if more than 200msec, show a PrograssDialog
4.in AsyncTask on PostExecute, cancel alarm timer
Demo:LifeSaver
Performance Advice
- "Premature optimization is the root of all evei."
- Donald Knuth
1.Design the simplest thing that could possible work, where "could possibly work" exludes doing network transactions on th UI thread.
2.if it's fast enough, your're done!
3.if it's not fast enough, don't guress. Measure and find out why.
4. Fix the biggest performance problems.
5.goto 2
Profiling Tools
- Traceview
- Log.d() calls with a timestamp aren't terrible
- Extreme profiling:Aggregate user profile data
パフォーマンスめっちゃ大事、ゲームとか.プロファイルとってみる
Traceview
1．android.Debug.startMethodTracing(String fname)
2.stopMethodTracing()
4.adb pull /sdcard/
5.traceview
とにかく測る、ツールはそろっている
翻訳機ひきちぎるなw
FAQ
ブラックベリーと比較したセキュリティ
C2DMのスケーラビリティ10万、1000万オーダーの
デバイスの多様性
バックグラウンドの処理がメインのサービスについて
=======================================================================
■HTML5とデザイン
=======================================================================
- HTML5
- CSS3
- Performance
- Smartphone
デザインは見た目だけじゃない
Setucture & Semantics
HTML5では、情報を構造化する新しい要素
情報を分類するナビゲーション
html5doctor.com/happy-1st-birthday-us/
chrome5, safari5, ff4
ff4,chrome7にはhtml5パーサ
Forms(2.0)
新コントロール追加
type=search,type=email etc...
→専用UIがあるものも
type=date,
UIの実装はOperaが先行、Chrome, Firefoxは次のバージョンぐらいで
デバイスの性質を生かしたUIの例（iPhone)
input type=email
→email用のキーボードに
input type=text
→電話番号の入力用に
- CSS3
レイアウトや視覚効果、動的な表現が強化された。
プロパティが拡張され、かゆいところに手が届くように。
Multiple Backgrounds
→背景画像を複数重ねられる。
url(),... url();
重ねるkdemo:サイトStunning CSS3
border-image
画像をボーダーに指定する
border-image: url(bdr.png) 5 round;
demo:border-imageを利用したボックスデザイン（セロハンテープ）
demo:Awesame Over rays
Gradietion
CSSだけでグラデーション、画像をつくる必要がない。
Google Images
demo:images.google.com Search Imagesのボタン
各ベンダーが独自に実装。
CSS3 Imagesで標準化
Visual Effects
Appleが提案した動きや変形を行うCSS拡張
→Webkit以外でも実装がすすむ
- 2D transforms
demo:Polaroids image with css3
→最新のFF、Oera
Transitions
→段階的に値を変化させる。
demo:For A beautiful web
3D Transforms
パースを定義して立体的な変形が行えるように
→safariがサポート、Chrome,Firefoxは実装中
Animations
キーフレームを定義してアニメーションを行う。
demo:Star Wars in CSS & HTML
demo:Pure CSS3 AT-AT Walker
Safari, CHromeのみサポートと、標準化もあまり進んでいない。
動きが加わると静的なカンプでは説明しづらい。
→コードをふまえたカンプの作成が不可欠になるのではないか。
→CSSでデモを作るケースも出てくるかも？
構造、表現が豊かになった。さらに何が求められる？
→Performance
速くて悪いことはない。
site:Best Practices for Speeding Up Your Web Site
site:Faster Web App with HTML5
site:Mobile Web Application Best Practices
ファイルサイズは小さく
リクエストは少なく
スクリプトは高速に
Application Cache
→キャッシュさせるファイルを明示的に指定する。
CACHE MANIFEST
data: URI scheme(not HTML5)
画像をbase64エンコードしてdata:URIにして埋め込む
-
- -
Chrome拡張の作り方
実例
manifest.jsonと他のファイルを用意
→manifest.jsonはUTF８（BOMなしにすること）
→permissions→実行するAPI、実行するサイトを指定する
background.html
→localStorage
→jsonに変換して保存する
→notify = webkitNotification
解像度の横が広いとダウンロードダイアログが出ないバグ
popup.html
パッケージ化
→拡張機能のとこで、拡張機能のパッケージ化、
.crxが拡張機能のパッケージ、zipファイル
.pem（秘密鍵）→アップデート時、なりすましの防止
拡張ギャラリーに公開
→初回登録時に5ドル必要になった
Chrome拡張で出来ること＝Javascriptでできる事
→Javascriptで出来ることは拡大傾向→Chrome OSへ
まとめ
Chrome拡張(やSafari拡張、Greasemonkeyなど)を通して、標準に近いJavaScriptを学ぼう！
自分が使っている拡張機能のソースを読むのが一番勉強になります
=======================================================
HTML5
「実例から学ぶHTML5開発入」by @Shumpei
14:00-14:45
=======================================================
基礎知識（Javascriptより）
Canvas
Javascriptで
var canvas = document.getElementsById("cl");
var canvas.getContext("2d");
context.draiImage(...);
