2011年06月19日

(2011/06/18)CSS Nite LP, Disk 16


――――――――――――――――――――
1.Android OSと現状のデバイス総まとめ
――――――――――――――――――――
■携帯向けのOS
・iOS
・Windows Phone
・Android
■OSS
・Googleが中心で開発。
・携帯向け。家電でも使える。
→ カーナビ。タブレット。
■iPhoneに無いアプリがある。
■アプリ
・普通のアプリ
・できることが一番多い。
・アイコンをタップして起動
・ホームアプリ
・ホーム画面のアプリ。
・各アプリの入り口。
・一番ユーザーに使われている。
・ウィジット
・できることが少ない。
・ホーム画面上に常に表示される。
・複数起動できる。
・定期的に状態を更新可能。
・モーションセンサー
・Wi-Fi
・カメラ
・Bluetooth
・NFC
Suicaとかで使われているテクノロジー
Android 2.3から対応
・GPS
■特徴
・OSのバージョン
2.1 : 21%
2.2 : 65%
→ 2.1以降に対応するのがいいのでは?
・多言語対応
・簡単に対応できる。
・ネイティブアプリの場合
・XMLファイルを用意。
→ システム側で自動切替
・画面サイズ・解像度
・QVGA
・HVGA
・WVGA
・DoubleVGA
・WSVGA
・簡単に対応できる。
・ネイティブアプリの場合
・各解像度・サイズのレイアウトのXMLファイルを用意。
→ システム側で自動切替
■Googleサービスとのマッシュアップ
・Googleのアカウントと紐づいている。
・アカウント認証
・GMail
・Googleカレンダー
・Google Map
表示する機能が用意されているので、簡単にできる。
■Webの表示
・WebKit
・WebViewという部品がある。
・ローカルのhtmlファイルでもWebアプリ作成可能
■作る方法
・ネイティブアプリ(Java, C)
・AIR for Android(Flash, Flex)
・Webアプリ(HTML + JavaScript + CSS)

・ネイティブアプリ
・機能をフルで使える。
・新しいAPIを使える。
・Javaでコーディングしないといけない。
(Cも使える)
・AIR for Android
・Flash → Android
・サポートしてない機能は使えない。
・WebViewの挙動がデバイスによって異なる。
・Webアプリ
・HTML+JavaScript+CSSで作れる。
・Android以外のデバイスに対応できる。
・一部の機能が使えない。
→ 新しいNFCはムリ!
・WebViewの挙動がデバイスによって異なる。
■Android端末の数
・1億台(iPhoneは2億台)
(世界で1日に40万台増えている)
■Androidマーケット
・アプリ数:20万個
・Androidマーケットからインストールされたアプリ:45億個
・今年PC用が出た。
・何ができるのか?
・アプリの配布
・バージョン管理
・統計管理
・有料アプリのライセンス管理
・アプリ内課金
(今年初めからサポートされた)
■独自マーケット
・ドコモマーケット
・ポータル色が強い。
・キャリア課金サポート
・au one Market
・アプリ配布も行っている。
・キャリア課金サポート
・SoftBank ピックアップ
・キャリア課金サポート
・その他 (全部メモできませんでした。<(_ _)>)
・Amazon
■Nexusシリーズ
・Googleが提供するフラグシップ端末
■日本独自
(メーカーによって、カスタマイズされている)
・ワンセグ
・お財布ケイタイ (Felica)
■今後
・Androidは家電に向かっている。
・USB接続のアクセサリ。
・タブレットとスマートフォンの融合
■その他
・どのくらい実機をそろえる必要があるのか?
→ 悩ましい問題
→ 特殊なデバイスでは、うまくいかないことがある。
→ 実際の挙動は実機で確認が必要!
→ 2.2の端末があれば十分?
→ 1.xの対応は捨ててもいい!

――――――――――――――――――――
2.切っても切り離せないAndroidアプリと
クラウドとの連携
――――――――――――――――――――
■クラウド
・大規模のデータを保存
・大規模のデータを高速に処理
→ 数週間が数分に
■クラウドのサービス
・文章と写真も無制限に保存
・アプリの複雑な事は全てクラウド化
■Evernote
・文章・写真・音声をクラウド上に保存できるサービス
・PCとAndroidから同じサービスを使う新しいサービス
■Google音声検索
・音声でGoolge検索をするアプリ
・精度・スピードあり
→ Androidで、もっとシンプルに!
■C2DM(Cloud to Device Messaging)
・プッシュサービス
・Google Chrome to Phone
・PCで見ている端末にPhsu
・Eclipse 3.6 + GPE 2.4 beta

C2DMを利用するためのサインアップ

――――――――――――――――――――
3.Android技術者とのデザイナーとの
ハッピーな出会い
――――――――――――――――――――
・Android Hacksという本を書いた。
・Androidで植物工場
■市場
・1日40万台ずつ増えている。
・モバイル以外の家電にも搭載されていく
・インテントは全てのAndroidをつなぐ
・インテント
→ 汎用的、標準的、拡張的な取り決め
・C2DMもインテントを使っている。
→ 受信端末に強制的にアクションを起こせる。
・モバイル決済
→ 一度だけのクレジットカード情報の登録だけ
シームレスな課金は重要!
・NFCのインパクト
→ Felicaの上位互換と思っていい
・VISAがNFCを使ったモバイル決済を開始
■アプリ
・未完成で未熟なデザイン
・GUIを自由に変更できる
・業界がiPhone以降
デザインの重要性に気付いた!

チャンス
かっこいいアプリを作れば...

――――――――――――――――――――
4.そうだったのか!
AIR for Android
――――――――――――――――――――
・Flashで作るAndroidの本が7月に出る予定
■Flashでアプリ
・AppBrainで一覧を見れる
・AIRとは
デスクトップアプリの実行環境
・Android、iPhone両対応
・Flash CS 5.5ならAndroid SDKは必要なし
・非常に簡単にアプリが作れる。
・AIR 2.5〜
・マルチタッチ
・加速度センサー
・GPS
・カメラ
・マイクで録音
・SNS起動?
・画像回転
・ブラウザを呼びだす
・ハードウェアキーを使用
・データベース
・ローカルファイル
・アプリの状態
・通信状態を調べる
■できないこと(全部メモできませんでした。<(_ _)>)
・AIRランタイムの同梱がムリ!
→ ユーザーがマーケットからダウンロードする必要がある。
・ライブ壁紙
・ウィジット
・OSのUI
・Push通知
・インカメラ

――――――――――――――――――――
5.iPhone・Androidアプリの
UI・挙動はどこが違う?
――――――――――――――――――――
・livedoorニュースアプリのAndroid版とiPhone版の説明
・Andoroidのタブレット対応が難しい!
どんどん端末が量産されている。使い方やサイズが違う。
→ 別の物と考えてレイアウトを設計しないといけない!

――――――――――――――――――――
6.Android向けサイトの
はまりポイントと脱出法
――――――――――――――――――――
■Android向け対応サイトの特徴
・受託案件のポイント
・iPhone向けサイトありき
・最近はAndroid対応が必要
・そもそも「iPhoneとAndroidがほとんど同じ」
と思われている。
→ 「従来の携帯サイトみたいなもんです」と
説明している。
・2.1〜対応にしている。
・実装者は
iPhoneとの違いを理解する必要がある。
・2つの最大の違い
・端末の性能
・画面サイズと解像度
・フォント
・ドロイドフォントが基本。
・機種によってデフォルトフォントが違う。
・日本語のボールドがきかない?
・漢字がちょっと変
→ 事前にどうすることもできないことを
理解してもらう必要がある!
・Android標準搭載のブラウザ「ブラウザ」
・「ブラウザ」は「Chrome」ではない
・2.2〜
ブラウザからファイルのアップロード可能
FlashPlayer対応
(アプリとしてダウンロードが必要)
・制作環境
・Mac
・Chrome + 実機
→ 実機が無い人はAndroidエミュレータ
・実機検証
・一部の機種でベーシック認証のページが
おかしくなる可能性あり(IS03など)
・ワナがあって
同じAndroidのバージョンでも
端末でも動きが違う場合もある。
・参考までにクライアントの使っている
端末を聞いておくこと!
■HTML+CSSのはまりポイント
・数字の羅列
・メタタグを入れないと電話番号として認識される。
・電話番号にしたい時の記述方法がある。
・タップハイライトカラーの動き
・CSS3の問題
・接頭辞が必要
・特殊な記述が必要
・動画の再生
・MP4 ― videoタグ → iPhone

Flash
Player → Android 2.2以降
・Flashで再生するとシンプル
・JavaScript
・ランドスケープ(端末を横に向けた状態)モード対応
・resizeイベントの挙動
・touchイベントの挙動
・Androidは少しくせがある
・Androidのバージョンが同じでも挙動が違う。
・あまり複雑な処理はしない方がいい!
・特にはまる
→ かんたんなモックを作っておくこと
・実機での確認が非常に重要!

――――――――――――――――――――
7.Android向けサイト制作のあれこれ:
viewportについて
――――――――――――――――――――
・縦:ポートレート
・横:ランドスケープ
・画面
・iPhone
縦:480px
横:320px
・Android
縦:480px〜550px
横:320px
・PCのブラウザとの違い
・スクロールとは違う
・表示領域を動かす
・viewportの書き方を覚えないとダメ!
・よく使うパターン
1.固定:PC向け
2.リキッド:オススメ
3.リキッド(ズーム禁止):1番使われている
→ ユーザにズームを禁止する方法
おそらくもっとも使われているパターン
現時点では、2のパターンを採用している所は少ない
・JSでなんとかする方法もあるが...
・JQuery Mobile
今、3のパターン。開発版は2のパターン
・PCサイトと1HTMLファイルで実装
CSSのMedia Query
難易度が高い
よく考えないと重くなってしまう!
・非常にややこしい
・他のサイトを見て、参考にして、真似してみる。
・PCとモバイルサイトを分ける?

今の所、ベストなものは無い

自分に(案件に)合った方法で実現していく必要がある!

――――――――――――――――――――
8.Androidサイト制作に
jQuery Mobileを活用しよう
――――――――――――――――――――
■いきなり結論
まだまだ残念な感じ...
■動きのデザイン
・画面が狭い
・通信が遅い
・縦と横を考える
・パーツを小さくできない
■一画面をいかに狭く整理して見せるか
・スライド
・タブ
・カルーセル
・続きを読む(さらに読み込む)
■スマホ向けライブラリ
・Sencha Touch(センチャ タッチ)
・高度
・プログラマ向け
・有償(99ドル)
・jQuery Mobile
・シンプル
・デザイナー向け
・無償
■jQuery Mobile
・jQueryとjQuery Mobileを両方つかう。
■組み込み方法
・zipファイルをダウンロードして参照
・CDNから参照して使う方法
・data-roleをつける
・data-back="true" ・・・左に戻る
・data-role="botton"を記述するとボタンになる
■よく使うインターフェイスは用意されている
・Saveボタン
data-icon="plus"・・・checkもある
・パーツのfixed配置はできない

■ムリなこと
・iPhone、Androidで仕様上できないことはムリ!

■情報
・今の所、オフィシャルのドキュメントを見るしかない!
(サンプルからひろってみるしか...)
・ドリームウエーバー 5.5
jQuery Mobileが内蔵されている。簡単に使える。

■テーマの変更
data-themeにa,b,c,d,eのいずれかに指定すると
デザインが変わる。
オリジナルのテーマを作ることができる。
(f以降で作る)

■まとめ
・jQuery Mobile
・スマートフォン向けのライブラリ
・JavaScriptが一切不要
・デザインを変えるのがしんどい!

モックアップ、Webアプリに使うのがベスト?
posted by rururu at 00:53| Comment(0) | TrackBack(0) | セミナー参加報告
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/46120138
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック