#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック
•
6 likes•9,057 views
2016年2月20日開催の Developers.IO 2016 F-2 セッション 「iOS × Android 並行開発についてのトピック」のスライドになります。 http://dev.classmethod.jp/event/cmdevio2016-report-f2-ios-android/
More Related Content
What's hot
What's hot (18)
Similar to #cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック
Similar to #cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック (20)
Recently uploaded
Recently uploaded (14)
#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック
- 1. Developers.IO 2016 F-2 クラスメソッド株式会社 斎藤 稔 Ⓒ Classmethod, Inc. 2016年02月20日 iOS Android 並行開発についてのトピック 1
- 2. 自己紹介 モバイルアプリサービス部所属 iOSエンジニア+時々Android 2Ⓒ Classmethod, Inc. ※ たぶん割合的にはこんな感じ
- 4. はじめに 4Ⓒ Classmethod, Inc. [引用] http://www.kantarworldpanel.com/global/smartphone-os-market-share/
- 6. アジェンダ • iOS/AndroidのUI比較 • iOS/Androidの開発比較 • 並行開発時の設計 • プロジェクトとしての並行開発 • まとめ 6Ⓒ Classmethod, Inc.
- 8. デザインガイドライン 8Ⓒ Classmethod, Inc. Flat Design Material Design 引用：http://wagyu298.hatenablog.com/entry/2013/06/29/153403 引用：https://www.google.com/design/spec/patterns/navigation.html
- 9. 9Ⓒ Classmethod, Inc. Deference - 控えめであること UIにはその内容を分かりやすく表示し、ユーザとやり取りする働きがあり ますが、それ自身の方が目立つようであってはなりません。 Clarity - 明瞭であること 文字はどの大きさでも読みやすく、アイコンは的確明瞭で、装飾は控えめ で適度、さらにその機能を明確に表すようでなければなりません。 Depth - 奥行きを与えること 視覚的な重なりや本物らしい動きがあると、楽しさや分かりやすさが向上 します。 引用：iOS Human Interface Guidelines Flat Design
- 10. 10Ⓒ Classmethod, Inc. Material is the metaphor - 比喩 UI や UX を紙やインクといった素材との関係性で考えることにより、ユー ザーにとってわかりやすいデザインにします。 Bold, graphic, intentional - 大胆に、生き生きと、意図的に UI や UX の要素を印刷ベースのデザインと同様に考えることによって、ユー ザーを視覚的にガイドすることができます。UI の場合、これらの要素は見た 目だけではなく、階層や意味、フォーカスなども作ります。 Motion provides meaning - 意味のあるモーション モーションはユーザーを注目させ、ユーザー体験の継続性を維持するために 役立つ、有意義で適切なアプローチです。 引用：Material design - Google design guidelines Material Design
- 11. 実際のUIを比較する iOSとAndroidのUIを並べて比較できるサイト。 『UI OH MY』http://uiohmy.com/ 今回のスライド内でも幾つか引用してます。 11Ⓒ Classmethod, Inc. ※ UIに関しては、こうした方が良いという話ではないです ※ あくまで、こんなのがあるよという感じで聞いて頂ければ...
- 12. iOS 無し Android ある UI比較 - Backキー 12Ⓒ Classmethod, Inc.
- 13. UI比較 - Backキー Facebook iOS 左上の戻るボタンから戻る orスワイプ Android 左下のBackキー 13Ⓒ Classmethod, Inc. http://uiohmy.com/
- 14. UI比較 - スタンプ選択 Slack iOS キーボードの上 Android ダイアログ 14Ⓒ Classmethod, Inc. http://uiohmy.com/
- 15. UI比較 - ログイン Trello iOS あまりダイアログの ケースを見ない Android ダイアログを使用する ケースがある 15Ⓒ Classmethod, Inc. http://uiohmy.com/
- 16. UI比較 - 選択肢 Swarm iOS 画面下から出る (UIAlertControllerStyle.ActionSheet) Android ダイアログ 16Ⓒ Classmethod, Inc. http://uiohmy.com/
- 17. 同じアプリでもiOSとAndroidで メニューの表示構成が異なる場合がある UI比較 - メニュー 17Ⓒ Classmethod, Inc.
- 18. UI比較 - メニュー（全く違う例） yelp iOS タブメニュー Android サイドメニュー 18Ⓒ Classmethod, Inc. http://uiohmy.com/
- 19. UI比較 - メニュー（表示位置が違う） PANDORA iOS 画面下 Android 画面上 19Ⓒ Classmethod, Inc. http://uiohmy.com/
- 22. iOS/Android 違いがあるもの 22Ⓒ Classmethod, Inc.
- 23. OSバージョンによるAPIの互換性 23Ⓒ Classmethod, Inc. ＊＊＊ 下位のバージョンに合わせるた め、基本的に新しく追加された API/は使わないor機能を分岐さ せる 上位のバージョンdeprecated になったのも分岐で対応 Support Library 新しい API level で追加された 機能を古い API level でも使用 できる
- 25. 構成 - Android 25Ⓒ Classmethod, Inc. proj build.gradle local.properties - module build.gradle - libs (jar library) - src - main AndroidManifest.xml - java - package（java souce files） - jni（JNI souce files） - jniLibs（JNI library） - res（resource files） - drawable（png, shape, selector） - layout（レイアウト, LinearLayout） - values（color,dimen,string,style） - menu（メニュー, menu） - anim（アニメーション, set） - raw（サウンド, mp3） - assets（SQLite, vertics data files） res以下 多言語対応 (フォルダ名)-(国コード) 例：values-ja 解像度 (フォルダ名)-(解像度レベル) 例：drawable-xxhdpi Android APIバージョン (フォルダ名)-(バージョン) 例：values-v21
- 26. サイズの単位 26Ⓒ Classmethod, Inc. point 非Retina（iPad2、iPad miniなど) 1ポイント＝1ピクセル Retina（iPhone 5、iPhone 6など) 1ポイント＝2ピクセル それ以上（iPhone 6 Plusなど） 1ポイント＝3ピクセル dp MDPI 1DP＝1ピクセル HDPI 1DP＝1.5ピクセル XHDPI 1DP＝2ピクセル XXHDPI 1DP＝3ピクセル XXXHDPI 1DP＝4ピクセル
- 27. Assets 27Ⓒ Classmethod, Inc. ディレクトリを分ける (ファイル名は同一） MDPI 例：drawable-mdpi/image.png HDPI 例：drawable-hdpi/image.png XHDPI 例：drawable-xhdpi/image.png XXHDPI 例：drawable-xxhdpi/image.png XXXHDPI 例：drawable-xxxhdpi/image.png ファイル名を分ける 非Retina（iPad2、iPad miniなど) そのまま（image.png） Retina（iPhone 5、iPhone 6など) @2x（image@2x.png） それ以上（iPhone 6 Plusなど） @3x（image@3x.png）
- 32. 画面レイアウト 32Ⓒ Classmethod, Inc. iOS nib (.xib) storybord (.storyboard) Android layout/.xml
- 33. 画面レイアウト（iOS） 33Ⓒ Classmethod, Inc. AutoLayout Attributes • Height • Width • Top • Bottom • Baseline • Leading • Trailing • Left • Right • Center X • Center Y 引用：Apple Auto Layout Guide
- 34. 画面レイアウト（Android） 34Ⓒ Classmethod, Inc. • FrameLayout • LinearLayout • TableLayout • GridLayout • RelativeLayout 引用：Android developer RelativeLayout (50,100) FrameLayout LinearLayout TableLayout （例） <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a TextView" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a Button" /> </LinearLayout> GridLayout
- 36. Push通知 36Ⓒ Classmethod, Inc. RemoteNotification 通知はOSが出す 文字列 iOS9から UIUserNotificationActionBehaviorTextInput で通知から返信出来るように GCM (Google Cloud Messaging for Android) 通知はアプリが BroadcastReceiverで受け取って 出す json形式
- 37. iOS/Android 似てきたもの 37Ⓒ Classmethod, Inc.
- 40. Permission Android 6.0 ∼ インストール時の確認が個別に iOSの挙動っぽい 40Ⓒ Classmethod, Inc.
- 41. リストのスワイプ RecyclerView ItemTouchHelper アイテム項目のスワイプやドラッグ＆ドロップが 入れられる仕組みがある 41Ⓒ Classmethod, Inc.
- 43. 並行開発時の設計 43
- 44. 大前提 iOS ユーザインターフェイスガイドライン https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ デザインのヒント https://developer.apple.com/jp/design/tips/ Android マテリアルデザインガイドライン https://www.google.com/design/spec/material-design/ Android アプリケーションの品質 http://developer.android.com/intl/ja/distribute/essentials/quality/core.html 44Ⓒ Classmethod, Inc.
- 45. UI/UX 同じデザイン/挙動 OSの流儀に反した仕様になっていないか？ → 出来ないこと → 出来るけど大変なこと 45Ⓒ Classmethod, Inc. 【例】 Androidも iPhoneと同じ デザインで...
- 49. ガワネイティブ 49Ⓒ Classmethod, Inc.Ⓒ Classmethod, Inc. 【例】 共通なら WebViewで表示で WebViewで表示 本当にWebViewでよいのだろうか？ → やめるべきもの → 大変だったこと 49
- 50. やめるべきもの ほぼ全てがWebView 何でも表示出来る（URLが不定） 50Ⓒ Classmethod, Inc. アプリである意味がない Appleの審査ガイドライン10.6に引っかかる可能性 iOS9からのATS対応 セキュリティ的問題
- 51. 補足：Webとアプリ-ユーザーの期待 ゴミアプリと言わせないために ∼ Google Play で成功するための高品質 Android アプリ開発 Tips ¦ Google for モバイルアプリ (2015/2/25) より https://www.youtube.com/watch?v=w7ouB7_7-FQ 51Ⓒ Classmethod, Inc. ユーザーは、Webが適切な場面、Webのほうが早い場合 はブラウザを用いいて素晴らしいサイトを楽しむ アプリを利用している時は、アプリらしい体験を期待して いる アプリらしい体験の例 - オフラインで使える - Webサイトよりも早く目的の情報にたどりつける - 動作や表示が軽快で操作感が気持ちよい →画面が変わるたびにネットワーク通信を待つ必要がない
- 52. OSバージョンによる挙動の違い ブラウザなら動くと言われる 問題の切り分け 大変だったこと 52Ⓒ Classmethod, Inc. KitkatでopenFileChooserが呼ばれないとか...（しかも端末依存） https://code.google.com/p/android/issues/detail?id=62220 不具合があった時にHTMLを作っているベンダーが別だったり、外部サービ スを使っていたりすると何が問題か調べるのに時間がかかる 開発者では対応出来ないケース
- 56. 用語の統一化 予め用語などの認識を合わせる NG例：用語の定義が曖昧なケース 販売価格という用語があった時にそれが何を指すのか - 売価 - 値引き前の価格 - 標準価格 - オープンプライス NG例：同一のものを指すのに色々な呼び方があるケース 会員、ユーザー、メンバー、お客様、顧客 機能名などの単語も可能な限り同じにする Log in、Log on、Sign in 56Ⓒ Classmethod, Inc.
- 58. 開発フローの共通化 ブランチ運用をあわせる git-flow 例： 機能を実装、修正する際に feature ブランチを作成 実装完了後 feature から develop へのマージは pull request で pull request のコメントに実装した機能の説明を記述する 作業途中の状態で一旦レビューにかけたい場合は、pull request のタイトルに [WIP] を付ける pull request 時に他のメンバーがレビュー レビューに通ったら実装者がマージして pull request をクローズする 他にも、レビュイー、レビュアーの方針を決めてる 58Ⓒ Classmethod, Inc.
- 59. 仕様書を Github で共通化 仕様書をiOS/Android共通にする （差分がある部分は明記する） Githubで管理 変更はPRで管理 共通の仕様書を見ることで認識を合わせる 59Ⓒ Classmethod, Inc.
- 61. コミュニケーション iOS エンジニアと Android エンジニアが隣り合って開発 デザイナーもドキュメント、アセッツファイル関連はGithub上に 展開しPRベースでエンジニアとのコミュニケーションを行った コミュニケーションを密にするのが重要 61Ⓒ Classmethod, Inc.
- 63. 課題点 両OSにきちんと対応したもの（UI/UX）を作ろうとす ると、デザイナーの負担が大きい デザイナー1名が iOS / Android 両OSを担当したため、 デザイナーの稼働が高い デザインフェーズが遅れると実装フェーズの影響が大きい エンジニアとデザイナーが協力してUI/UXを作る仕組 み作りが重要 63Ⓒ Classmethod, Inc.
- 64. プロジェクトで使用したOSS 64Ⓒ Classmethod, Inc. ※ 参考までに
- 72. まとめ 72
- 74. Developers.IO 2016 ご静聴ありがとうございました。 スライドは後日ブログで公開します。 74 F-2 Ⓒ Classmethod, Inc. #cmdevio2016