2012年9月26日水曜日

「Android アプリ機種対応ことはじめ」をまとめました

EGGの曽川です。

Android アプリ UI/UX デザイン ことはじめをみたのでまとめてみました。
動画はこちらです。
公式のまとめはこちらです。

全端末に対応しなけりゃいけないのではないか?疑問に答える。

●Android OSの最近の動き

4.0系の上昇が非常に著しい
09/04時点で4.0以上が22.1%

●画面化像度対応

どう解決するか?
Javaに関しては豊富なAPIが提供されている。
values-swXXdp(Smallest Width):画面の狭いほうの長さがxxdpであれば使用する。
トレーニングやAndroid デザインを活用する
GoogleIO 2012のリソースを参考にする
タブレット端末とハンドセットの端末を考慮する
dimenリソース(values>dimens.xml)を使用する
 ⇒レイアウトが同じでもスペースの大きさを変えられる(あまり知られていない)

●その他の話題

JavaのAPIは上方互換
 ⇒2.2等で動くなら4.0等でも動く
Android compatibility Definition Document
 ⇒全OSバージョン用に端末メーカへの最低要件定義を行っている
  迷った時はここを見る
OutOfMemory
 ⇒一部の端末ではRAMが小さい
  トレーニングを参考に
OSにより違う処理をする
 ⇒lazy class loading(リフレクションよりも高速)
  参考

●NDK
MIPSは安価で高速な処理を今後できるのではないか
Androidはarmだけではなくなっている
OpenSLも便利
 ⇒音声再生ライブラリ

CPUアーキテクチャ別のマルチプルapk
 ⇒これまではOSバージョンだけでしか分けられなかった

●OpenGL ES
90.7%がOpenGL ES 2.0
 ⇒2.0前提でOK
GPUファミリーが多い
 ⇒powerVRをターゲットにしている人が多いがAndroidでは特殊(iPhone)
  powerVRはレンダリングシェーダの属性をまとめてソートするのが早い
  GPU別にチューニングする
4つのファミリーでテストする。

●WebView
機種ごとのふるまいが違う(日本人からの質問が多い)
WebViewを透明にして後ろのActivityを見せるとかしているのはある端末ではトラブルが起こるなど。
 ⇒Google自身も全機種について把握していない
  ActivityとWebViewを重ねるのは気をつけてほしい
canvasとcssアニメーションはどっちが早い?
 ⇒cssアニメーション
  4.0ではcanvas中心になってきている。
  4.0でcssアニメーションを使い続けるとメモリリークしているかも?(Google調査中)
  ※ちなみに酷使しているのは日本だけ

ChromeとWebViewがマージされつつある。(完全マージはいつかは未定)
 ⇒今後は標準ブラウザとWebViewを統一化する

拡大縮小
 ⇒書くのが楽なのはviewport
  ただし、スクロールするときに画像が粗くなる
   ⇒WebViewでのスクロールをなるべく避けるのが良いのでは?
   ⇒もしくはjavascriptでガリガリ書く
WebViewは先読みとキャッシュを使う

●WebView(2)

WebViewのレイアウト計算がずれる場合がある
 ⇒ActivityとWebViewの計算をずらす

●SIMカードがないと起動できないアプリについて
物理的なIDの利用はおススメしない
SIMカードは携帯を対象としているので、Wi-fiのみ端末が軒並みダメになる。
個人情報漏えいの懸念
 ⇒root化した端末で偽装できる
  その人のアカウントで利用できてしまう
  原則はスマートフォンで自動ログインはしない
複数台以上の端末に入れてほしくない制御を入れたい場合には? 
 ⇒Build.SERIAL
  ANDROID_ID(端末初期化でリセット可能)
  ※2.3以降のみ
  ※やむを得ない場合に使用する
   Googleは禁止してはいないが十分注意する。ユーザはパーミッションを意識している。
  ※個人的にはこちらも参考にして欲しい
パーミッションについてはアプリ説明文で説明する

●端末のブラックリスト
サムスンの幾つかの機種が出て来ない場合もある
 ⇒Google側で対応中。
テストしてない機種という理由でブラックリスト化するのはオススメしない
 ⇒すぐ反映されないリスト
  入っていないリストはアクセスできる
 ⇒発売直後はアクセスできる
  ユーザの評価が固まってきたり、安定してきたらブラックリストは使わない。
Manifestで縛る方が安全

●Q&A
Q.不具合のポイントは?
A.OpenGL、カメラ
 Activity、Viewを普通に使っていたら機種ごとの差分は出ない
Q.テストのTips
A.10数機種テストする100機種以上テストしているところもある
 配信したい国の人気の端末でテストする
 RAM容量が小さい端末でもテストする
Q.タブレットのような画面を画面の小さな端末で代用する方法があると聞いたが?
A.Screen Compatibility Mode
 targetSDK8にしてると拡大される
Q.内蔵メモリなのに外部SDカードとして使わなければいけない場合はどうすればいいか
A.セカンダリエクスターナルストレージ問題
 標準のAPIではアクセス出来ない領域にストレージが存在している。
 機種別のプログラミングしかない
 Googleと端末メーカの問題

●補足
今後タブレット端末は増えるので対応してほしい

2012年9月12日水曜日

「AndroidアプリUI/UXことはじめ」をまとめました

EGGの曽川です。

Android アプリ UI/UX デザイン ことはじめをみたのでまとめてみました。
動画はこちらです。
公式のまとめはこちらです。

●より使いやすいUI
良くないUI
 やたらと縦スクロールをする
  ⇒Webだと自然
   画面を切り替える操作は何も操作しなくても表示されている状態が理想
   大事なボタンが下の方にスクロールしないと出てこないのはアプリとしてはダメ
   「これならWebで良くないか?」というコメントもGoogle Playで見かける


●Android OSのUI/UXの進化
 OS
 ⇒ハニカムのときは転換期
  HoloTheme、ActionBar
  ※タブレット対象なので広くは使われていない
 ⇒ICSはタブレットとハンドセットの統合
  現状のメインは2.3
 ⇒4.0、4.1は急速に伸びている、2.x系はマイナーになってきている
 これからはUIのデザインは4.xのデザインで作る


●Androidデザインガイドラインを読む
 ⇒Androidの基本的な考え方
  アクションバー、Backボタンのデザイン
  Googleのアプリはこれを基本的に使用している
 ⇒全く外れてしまうと、ユーザが迷ってしまう
  GooglePlayのランキングにも影響する


●様々なUI、UXのデザイン
 Webとアプリは大きな差がある
 ⇒Web:どのプラットフォームでも共通のものが提供される
  アプリ:プラットフォームごとに挙動や操作感が変わる


●AndroidDesignForSuccess(GoogleIO)
 ⇒デザインはブランドよりも基礎に位置する
  ありがちな間違い
 ⇒アプリを発注する側は仕様を詳しくは指定しない(ブランド表現、機能のリストだけを忠実に再現する事が多い)
  プラットフォームの事をよく考える


●Navigation in Android
 Backキーの扱い
  ⇒他プラットフォームの方が見落としがちなのがBackキーが標準搭載されている事
   画面の中の戻るボタンは描画領域として勿体ない
●Ten Things Game Developers Should Know

 ゲームの中のBackボタンの扱いは?
  ⇒シーンによって違う
   シューティングゲームの場合
    1回目ポーズのダイアログ(コンティニューorタイトル)
    2回目は何が起こるか?
    ⇒ゲームに戻るべき
     終了するのはダメ
  ⇒前の画面に戻ることに使ってください



●ActionBar
 絶対理解してください。
 タブと組み合わせることの重要性
 ⇒下にタブを出さない
 ⇒ルール
  ナビゲーション:上or左端
  アクション:右or下
 ⇒下タブのデメリット
  下にタブがあるのはナビゲーションが下にあることになる
  下のボタンの並びは大きい画面に対応しづらい
  もう一個のOS(アップルw)との工数削減を行いたくなるが避ける。
  企画の段階で配慮をしておけば対応できると思う


●BackとUpのちがい
 Back:時系列を戻る
 Up:論理階層を上がる


●Fragment
 Androidアプリは1つのapkで提供を、そのためにFragmentを使ってください。
 縦横、画面サイズの変化に柔軟に対応する
 かっこいいアプリを


●リスト表現
 枠線は極力減らす
 ⇒代わりに空白を使う
  右矢印は冗長なので避ける
  ※ここだけは見てほしいというような場合のみ付ける


●アプリボタン
 左側のアプリアイコン
  ⇒グラデーション、陰影あり
 右側のアクションのアイコン
  ⇒グラデーション、陰影もなし
   Android Designで提供しているので利用してください
 ⇒他プラットフォームからのコピーは×


●ホーム画面アイコン
 壁紙の色に関わらず見やすいように


●テーマ
 Holo.Light
 Holo.Dark
 ⇒必ずしも合わせる必要はないが、色使いなどを参考にしてほしい


●左右方向のスワイプ
 スワイプさせる方が混乱が少ない
 アプリらしいUIになる


●ホーム画面
 少し前までは機能のアイコンが並んでいるだけだった(ダッシュボード)
 ホーム画面はEvernote等で採用されているAppIconをタッチすると少し下がったところにあるUIにしてほしい(参考リンク)

●Notification
 うるさいものはNG


●キーポイント
 戻るボタン
 縦スクロールを控えめに

●ツールアプリとゲームアプリの違い
 ゲーム系
  ⇒独自のUIをもってくるのはOK
   ガイドラインを適用できないシーンもある
   ボタンが小さいとかは避ける
   ゲームであっても画面上の戻るボタンと縦スクロールはつらい
 ツール系
  ⇒アプリを発注、自己開発する場合はデザイナーとうまく仕事をする

Q.ICS、JBに移行するときの注意点
A.ICSとJBはそのまま移行できるはず
 JBはノティフィケーションがリッチになった
 WebView等の非公開APIは動作しなくなる
Q.古いAPIレベルと新しいものは対応が辛い。プリファレンスフラグメントが対応されないのは?
A.Compatibility⇒SupportLibraryに名前が変更
 プライマリリスト順に行っている
 ⇒アクションバーの優先度が高い
  PreferenceFragmentはActionBarよりも低い
  現状はオープンソースを利用するなどして自分で対応する
Q.ActionBarは2.x系でつかえるのか?
A.4.xは標準だが、2.x系はActionBarSherlockは良くできているので使用する
 サポートライブラリは現在準備中
Q.Androidデザインは日本語化あるのか
A.要望はあるが、検討中
 予算的に多く裂いてもらえればあるかもw
Q.WebView/HTMLを使わないアプリの速度向上方法
A.SDKのツールでプロファイルする
Q.多くの端末で対応している場合にUIの実機テストの勘所はあるか?
A.targetSDKによるメニューボタンの違い
 Backボタンがハードウェアかソフトウェアで違う
 画面サイズ
 機種ごとの違いが出る
  ⇒OpenGL、カメラ
 ※リストビューのスクロール速度は機種によって違うので注意

2012年9月8日土曜日

NotificationCompatを使ってYoutubeを起動する

チームEGGの曽川です。

これまでのNotificationは、Notificationクラスをインスタンス化して表示していました。しかし、現在ではこの方法は非推奨となっています。
そのため、Notification.Builderを使用する方法が現在は推奨されています。
ただしNotification.BuilderはAPI11からのAPIのため、それ以前のバージョンに対応させるにはNotificationCompat.Builderを使用します。
基本的な使い方は同じですが、今回はNotificationCompat.Builderのコードで解説します。

NotificationCompatを使ってYoutubeを起動するコードは以下の通りです。
        
     private void startYoutubeNotification(){
        
        final Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("vnd.youtube://hq0GjaBMhhM"));
        final PendingIntent contentIntent = PendingIntent.getActivity(this, PENDING_INTENT_REQUEST_CODE, intent, PendingIntent.FLAG_UPDATE_CURRENT);

        
        // Notificationの設定
        final Notification notification = new NotificationCompat.Builder(this)
                // 通知タイミング
                .setWhen(System.currentTimeMillis())
                // YoutubeIntent
                .setContentIntent(contentIntent)
                // アイコン
                .setSmallIcon(android.R.drawable.stat_notify_chat)
                // Tickerテキスト(ステータスバーに表示される文字列)
                .setTicker(getString(R.string.notification_ticker))
                // タイトル
                .setContentTitle(getString(R.string.notification_title))
                // 音とバイブとライト
                .setDefaults(Notification.DEFAULT_SOUND | Notification.DEFAULT_VIBRATE | Notification.DEFAULT_LIGHTS)
                // タップすれば消える設定
                .setAutoCancel(true)
                // Notification生成
                .build();

        // NotificationManagerの生成
        final NotificationManager notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
        notificationManager.notify(NOTIFICATION_ID_YOUTUBE, notification);

    }
3行目ではYoutubeを起動するIntentはvnd.youtube://[動画ID]として記述し、IntentのURIに含めています。
        final Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("vnd.youtube://hq0GjaBMhhM"));

このIntentをNotificationで利用する場合はPendingIntentに設定します。
        final Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("vnd.youtube://hq0GjaBMhhM"));
        final PendingIntent contentIntent = PendingIntent.getActivity(this, PENDING_INTENT_REQUEST_CODE, intent, PendingIntent.FLAG_UPDATE_CURRENT);
PendingIntentの引数に関してはこちらを参考にしてください。
Notification.Builderのインスタンスは次のように行います。
       new NotificationCompat.Builder(this)
ここで取得したNotification.BuiderはBuilderパターンで作られているので、次のように設定を記述していきます。
        // Notificationの設定
        final Notification notification = new NotificationCompat.Builder(this)
                // 通知タイミング
                .setWhen(System.currentTimeMillis())
                // YoutubeIntent
                .setContentIntent(contentIntent)
                // アイコン
                .setSmallIcon(android.R.drawable.stat_notify_chat)
                // Tickerテキスト(ステータスバーに表示される文字列)
                .setTicker(getString(R.string.notification_ticker))
                // タイトル
                .setContentTitle(getString(R.string.notification_title))
                // 音とバイブ
                .setDefaults(Notification.DEFAULT_SOUND | Notification.DEFAULT_VIBRATE | Notification.DEFAULT_LIGHTS)
                // タップすれば消える設定
                .setAutoCancel(true)
                // Notification生成
                .getNotification();
最後にNotificationBuilderをNotificationManagerに設定し、Notificationを表示します。
        // NotificationManagerの生成
        final NotificationManager notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
        notificationManager.notify(NOTIFICATION_ID_YOUTUBE, notification);
前回書きましたが、、Notification.DEFAULT_VIBRATEを指定する場合は、VIBRATEのパーミッションを指定してください。
※追記:NotificationCompat$BuilderのgetNotification()が非推奨となったので、build()に修正しました。

2012年9月5日水曜日

support-v7のGridLayout導入方法



EGGの曽川です。



support-v7のGridLayoutにハマったので書いておきます。

API14で追加されたGridLayoutの互換パッケージのsupport-v7は他のライブラリと使用方法が異なります。

(android-sdk\extras\android\compatibility\v7のプロジェクト内のReadme.txtには詳しい説明があります。)



1.supportv7の直下のフォルダ(gridlayout)を、プロジェクトとしてインポートします。

2.使用したいプロジェクトにライブラリとして追加します。

3.GridLayoutを使用する場合は、以下のように記述します。

(android.support.v7.widget.GridLayoutと、xmlns:app="http://schemas.android.com/apk/res-auto"を指定する事)





<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:columnCount="1"
        app:rowCount="1">
    <!-- 追加したいレイアウト -->
    <CheckBox
        android:id="@+id/checkBox1"
        app:layout_column="0"
        app:layout_gravity="left"
        app:layout_row="0"
        android:text="CheckBox" />
</android.support.v7.widget.GridLayout>
ADT r17より前は、独自レイアウトにはアプリのパッケージ名を含むURIを使用していましたが、r17以降はhttp://schemas.android.com/apk/res-autoを利用する仕様になっています。



GridLayoutはリソースファイルを利用するので、生成されるR.javaの関係上こうするしかありません。

ライブラリだけポンと入れられないのが不便ですね。



余談ですが、このライブラリを使用する事で以前ブログで説明したSpaceも使用する事が出来ます。