Your SlideShare is downloading. ×
Android 2.x/3.x/4.x対応   アプリ開発Tips       2012.3.24@korodroid(神原 健一)
自己紹介■氏名:神原 健一(@korodroid)■活動:iplatform.org(http://www.iplatform.org/)■所属:NTTソフトウェア株式会社■主な活動(iplatform.org@プライベート)  ■Google...
本日のアジェンダ•本発表の題材とするアプリ•背景•関連キーワードの復習•開発時に特に考慮すべき点                3
本発表の題材とするアプリ  【セカイフォン】               4
セカイフォンとは?  6ヶ国語に対応した翻訳電話(2010/01初版開発以降、20回以上のver.up.)      英語             ドイツ語    ○ ○             日本語        ○            ...
利用シーン①通話モード【相手の母国語に自動変換】      英語             日本語    Hello!   こんにちは                           6
利用シーン②1人通話モード【会話をその場で変換】      英語    日本語                     7
アプリ画面例(Android 2.x)縦画面         横画面                      8
アプリ画面例(Android 3.x)縦画面          横画面                      9
アプリ画面例(Android 4.x)縦画面         横画面                      10
背景     11
背景     アプリ開発のターゲットは?➡フル対応する場合、現時点では基本的に2.x/3.x/4.x                    フォン+                    ハンドセット      主にハンドセット     タブレ...
背景  セカイフォンの2.x/3.x/4.x・マルチデバイス対応時に    気付いた点をお話します(1apkで実現)。2.x       3.x              4.x                                 ...
関連キーワードの復習             14
Fragmentとは?    マルチPaneの画面構成時などに          役立つものハンドセットの1例      タブレットの1例                          15
Fragmentとは?    マルチPaneの画面構成時などに          役立つもの             Fragment A   Fragment Bハンドセットの1例       タブレットの1例                ...
OptionMenuおよびActionBarとは?    「設定」「ヘルプ」など、同画面で      実行したい処理をまとめたもの       2.x        3.x以降  Option Menu    Action Bar   17
開発時に特に考慮すべき点1.UI(最適なレイアウト)2.API(利用可能なAPI)                  18
UI-実現方式① layout-small/normal/large/xlargeによる分離○1.6以降であれば、利用可能。× 7”タブレットと5”ハンドセットが同じlargeに分類 される場合あり。別レイアウトにしたい時に問題に。× 3.0以...
UI-実現方式②            sw<N>dp,w<N>dp,h<N>dpの利用                                 概要                   補足    (a)layout-sw600dp ...
UI-実現方式②            sw<N>dp,w<N>dp,h<N>dpの利用                                 概要                   補足    (a)layout-sw600dp ...
UI-実現方式②(A)ハンドセットとタブレットの分離例 •res/layout/main.xml •res/layout-sw600dp/main.xml(B)ハンドセットとタブレット2種類の分離 •res/layout/main.xml •r...
UI-実現方式②         sw<N>dp,w<N>dp,h<N>dpの利用                             概要            補足    (a)layout-sw600dp   縦横ともに600dp以上...
UI-実現方式③           ①・②の併用方式•layout/main.xml←以下2ヶ以外の場合•layout-sw600dp/main.xml←3.2以降タブレット•layout-xlarge/main.xml←主に3.0/3.1タ...
UI-実現方式④方式③ベースでLayout Aliases活用        <resources>        <item name="main_layout" type="layout">        @layout/main_onep...
UI-実現方式④     方式③ベースでLayout Aliases活用■values-xxxフォルダに格納するファイル<resources>  <item name="main_layout" type="layout">        @l...
API(Fragment)  Support Packageにより2.xでも利用可能                        2.x            3.x            4.x     Support   Packageな...
API(OptionMenu/ActionBar)AndroidManifestの内容で振る舞い変化                          2.x                 3.xminSdk=なし&targetSdk=なし ...
API(OptionMenu/ActionBar)AndroidManifestの内容で振る舞い変化                                  2.x                   4.xminSdk=なし&tar...
API(OptionMenu/ActionBar)AndroidManifestの内容で振る舞い変化                          2.x          3.x              4.xminSdk=なし&tar...
API(OptionMenu/ActionBar)   AndroidManifestの内容で振る舞い変化                            2.x   3.x      4.x  minSdk=なし&targetSdk=な...
API(OptionMenu/ActionBar)       OptionMenuとActionBarの共存                2.x       3.x       4.x   OptionMenu   ○         ○ ...
その他のTips1.wrap_content/fill_parent(match_parent) のみで画面を構成する。 ➡具体的なサイズを指定する場合は、dp、sp活用を。2.(必要に応じて)画面解像度別の画像を準備する。 ➡Android側に...
その他のTips4.ディメンションを活用する。 ➡画面の大きさ別にパーツサイズを切り替えたい場合  •values/dimens.xml←以下2ヶ以外の場合  •values-sw600dp/dimens.xml←3.2以降タブレット  •va...
参考文献         Android公式Developer向けサイト•Supporting Tablets and Handsets http://developer.android.com/guide/practices/tablets-...
おわりにご清聴ありがとうございました。              36
Upcoming SlideShare
Loading in...5
×

[ABC2012S]Android2x/3x/4x対応アプリ開発Tips

2,247

Published on

ABC 2012 Spring セッション資料

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,247
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "[ABC2012S]Android2x/3x/4x対応アプリ開発Tips"

    1. 1. Android 2.x/3.x/4.x対応 アプリ開発Tips 2012.3.24@korodroid(神原 健一)
    2. 2. 自己紹介■氏名:神原 健一(@korodroid)■活動:iplatform.org(http://www.iplatform.org/)■所属:NTTソフトウェア株式会社■主な活動(iplatform.org@プライベート) ■Google Play向けアプリ開発(現在18本) 9 10 ■Google Developer Day 2011 Tokyo 基調講演デモ ■Android Developer Lab Tokyo 2011 follow-up 5位入賞 ■i*deal Competition 2010 ファイナリスト 2
    3. 3. 本日のアジェンダ•本発表の題材とするアプリ•背景•関連キーワードの復習•開発時に特に考慮すべき点 3
    4. 4. 本発表の題材とするアプリ 【セカイフォン】 4
    5. 5. セカイフォンとは? 6ヶ国語に対応した翻訳電話(2010/01初版開発以降、20回以上のver.up.) 英語 ドイツ語 ○ ○ 日本語 ○ イタリア語 ○ フランス語 ○ 中国語 5
    6. 6. 利用シーン①通話モード【相手の母国語に自動変換】 英語 日本語 Hello! こんにちは 6
    7. 7. 利用シーン②1人通話モード【会話をその場で変換】 英語 日本語 7
    8. 8. アプリ画面例(Android 2.x)縦画面 横画面 8
    9. 9. アプリ画面例(Android 3.x)縦画面 横画面 9
    10. 10. アプリ画面例(Android 4.x)縦画面 横画面 10
    11. 11. 背景 11
    12. 12. 背景 アプリ開発のターゲットは?➡フル対応する場合、現時点では基本的に2.x/3.x/4.x フォン+ ハンドセット 主にハンドセット タブレット +タブレット2.x タブレット 4.x3.x 12
    13. 13. 背景 セカイフォンの2.x/3.x/4.x・マルチデバイス対応時に 気付いた点をお話します(1apkで実現)。2.x 3.x 4.x 13
    14. 14. 関連キーワードの復習 14
    15. 15. Fragmentとは? マルチPaneの画面構成時などに 役立つものハンドセットの1例 タブレットの1例 15
    16. 16. Fragmentとは? マルチPaneの画面構成時などに 役立つもの Fragment A Fragment Bハンドセットの1例 タブレットの1例 16
    17. 17. OptionMenuおよびActionBarとは? 「設定」「ヘルプ」など、同画面で 実行したい処理をまとめたもの 2.x 3.x以降 Option Menu Action Bar 17
    18. 18. 開発時に特に考慮すべき点1.UI(最適なレイアウト)2.API(利用可能なAPI) 18
    19. 19. UI-実現方式① layout-small/normal/large/xlargeによる分離○1.6以降であれば、利用可能。× 7”タブレットと5”ハンドセットが同じlargeに分類 される場合あり。別レイアウトにしたい時に問題に。× 3.0以前で適切なグループ分けされない場合あり。 19
    20. 20. UI-実現方式② sw<N>dp,w<N>dp,h<N>dpの利用 概要 補足 (a)layout-sw600dp 縦横ともに600dp以上 画面方向に非依存 (b)layout-w720dp 横が720dp以上 画面方向に依存 (c)layout-h480dp 縦が480dp以上 画面方向に依存 (a)false (a)false (a)true400dp (b)true 960dp (b)false 720dp (b)true (c)false (c)true (c)true 960dp 1280dp 400dp 20
    21. 21. UI-実現方式② sw<N>dp,w<N>dp,h<N>dpの利用 概要 補足 (a)layout-sw600dp 縦横ともに600dp以上 画面方向に非依存 (b)layout-w720dp 実行する画面特性に応じて、適用される 横が720dp以上 画面方向に依存 (c)layout-h480dp レイアウトを変更することが可能。 縦が480dp以上 画面方向に依存 (a)false (a)false (a)true400dp (b)true 960dp (b)false 720dp (b)true (c)false (c)true (c)true 960dp 1280dp 400dp 21
    22. 22. UI-実現方式②(A)ハンドセットとタブレットの分離例 •res/layout/main.xml •res/layout-sw600dp/main.xml(B)ハンドセットとタブレット2種類の分離 •res/layout/main.xml •res/layout-sw600dp/main.xml •res/layout-sw720dp/main.xml(C)タブレット横長とそれ以外の分離例 •res/layout/main.xml •res/layout-w600dp/main.xml 22
    23. 23. UI-実現方式② sw<N>dp,w<N>dp,h<N>dpの利用 概要 補足 (a)layout-sw600dp 縦横ともに600dp以上 画面方向に非依存 (b)layout-w720dp 横が720dp以上 画面方向に依存 (c)layout-h480dp 縦が480dp以上 画面方向に依存○Developerサイトで推奨されている。× 3.2以降でしか利用できない。 ※画面方向によって、dpが変わるケースがあるので 注意(GN:縦長360x592(dp)、横長598x360(dp)) 23
    24. 24. UI-実現方式③ ①・②の併用方式•layout/main.xml←以下2ヶ以外の場合•layout-sw600dp/main.xml←3.2以降タブレット•layout-xlarge/main.xml←主に3.0/3.1タブレット○1.6以降であれば利用可能。○ 前述方式より精度を向上可能。v11等併用もあり。△ 同じレイアウトの場合も、同じファイルを複数配置。△ Javaソース側のロジックも複雑に。 24
    25. 25. UI-実現方式④方式③ベースでLayout Aliases活用 <resources> <item name="main_layout" type="layout"> @layout/main_onepane</item> <bool name="has_two_panes">false</bool> </resources> ○ 1pane、2paneなどレイアウトを  必要なパターン数のみ準備 25
    26. 26. UI-実現方式④ 方式③ベースでLayout Aliases活用■values-xxxフォルダに格納するファイル<resources> <item name="main_layout" type="layout"> @layout/main_onepane</item> <bool name="has_two_panes">false</bool></resources> ■Java側でのマルチPane判定 ○ 判定ロジックはシンプル ○Resources res = getResources();boolean hasTwoPanes =res.getBoolean(R.bool.has_two_panes); 26
    27. 27. API(Fragment) Support Packageにより2.xでも利用可能 2.x 3.x 4.x Support Packageなし ○ ○ Support Packageあり ○ ○ ○•Fragmentベースの実装をしておくことで、再利用性の向上。•Support Packageの利用有無により実装が変わるので注意。 •変更例1)android.app.Fragment->android.support.v4.Fragment •変更例2)Activity->FragmentActivity •など幾つかの変更が必要。 27
    28. 28. API(OptionMenu/ActionBar)AndroidManifestの内容で振る舞い変化 2.x 3.xminSdk=なし&targetSdk=なし ○ (NG1) minSdk=8&targetSdk=8 ○ △(NG2) minSdk=8&targetSdk=11 ○ ○ 8:Android2.2, 11:Android3.0 NG2 NG1 28
    29. 29. API(OptionMenu/ActionBar)AndroidManifestの内容で振る舞い変化 2.x 4.xminSdk=なし&targetSdk=なし ○ (NG3) minSdk=8&targetSdk=8 ○ △(NG4) minSdk=8&targetSdk=11 ○ △/○ 8:Android2.2, 11:Android3.0 ハンドセットでの ActionBarを NG3 NG4 どう評価するか次第 29
    30. 30. API(OptionMenu/ActionBar)AndroidManifestの内容で振る舞い変化 2.x 3.x 4.xminSdk=なし&targetSdk=なし ○ minSdk=8&targetSdk=8 ○ △ △ minSdk=8&targetSdk=11 ○ ○ △/○ 8:Android2.2, 11:Android3.0 4.x 2.x 3.x 30
    31. 31. API(OptionMenu/ActionBar) AndroidManifestの内容で振る舞い変化 2.x 3.x 4.x minSdk=なし&targetSdk=なし ○ minSdk=8&targetSdk=8 ○ △ △ minSdk=8&targetSdk=11 ○ ○ △/○• JavaソースやXMLが一緒でもManifestで挙動変化  (上記はあくまで設定の1例(正解はCaseByCase))。  ➡オフィシャルBlogに、関連記事あり。•ICSではSplit ActionBar(画面下部にActionBar表示)も 利用可能。採用可否を合わせて検討。 31
    32. 32. API(OptionMenu/ActionBar) OptionMenuとActionBarの共存 2.x 3.x 4.x OptionMenu ○ ○ ○ ActionBar ○ ○•2.xでActionBar使えない(Support Packageでも) ➡ActionBarはあきらめてOptionMenuにする   or 自前で実装する等(ActionBarCompatが参考に)•操作性の観点だと、個人的にはActionBarがおすすめ。•AndroidManifest以外に、Styleによる影響もあり! 32
    33. 33. その他のTips1.wrap_content/fill_parent(match_parent) のみで画面を構成する。 ➡具体的なサイズを指定する場合は、dp、sp活用を。2.(必要に応じて)画面解像度別の画像を準備する。 ➡Android側に制御を任せることも可能だが、拡大縮小  に伴い、表示が汚くなる場合がある。3.Fragmentをうまく使う。 ➡色々な画面でFragmentを再利用できるようにする。 ➡ActivityとFragmentの結合度縮小。再利用性向上。 ➡Fragment→Fragment呼出し非推奨。コールバックIF。 33
    34. 34. その他のTips4.ディメンションを活用する。 ➡画面の大きさ別にパーツサイズを切り替えたい場合 •values/dimens.xml←以下2ヶ以外の場合 •values-sw600dp/dimens.xml←3.2以降タブレット •values-xlarge/dimens.xml←主に3.0/3.1タブレット <resources> <dimen name="label_width">160dip</dimen> <dimen name="label_height">32dip</dimen> </resources>5.1apk or マルチapkの方針を判断する。 ➡開発や保守工数に影響があるため、要検討。 34
    35. 35. 参考文献 Android公式Developer向けサイト•Supporting Tablets and Handsets http://developer.android.com/guide/practices/tablets-and-handsets.html•Supporting Multiple Screens http://developer.android.com/guide/practices/screens_support.html•Supporting Different Screen Sizes http://developer.android.com/training/multiscreen/screensizes.html 35
    36. 36. おわりにご清聴ありがとうございました。 36

    ×