Developers.IO 2016

F-2

クラスメソッド株式会社 斎藤 稔

Ⓒ Classmethod, Inc.

2016年02月20日

iOS × Android 並行開発についてのトピック

1

自己紹介

モバイルアプリサービス部所属

iOSエンジニア+時々Android

2Ⓒ Classmethod, Inc.

※ たぶん割合的にはこんな感じ

3Ⓒ Classmethod, Inc.

はじめに

4Ⓒ Classmethod, Inc.

[引用] http://www.kantarworldpanel.com/global/smartphone-os-market-share/

前提

並行開発といっても色々ありますが、 今回はネイティブ開発での話です

5Ⓒ Classmethod, Inc.

アジェンダ

• iOS/AndroidのUI比較 • iOS/Androidの開発比較 • 並行開発時の設計 • プロジェクトとしての並行開発 • まとめ

6Ⓒ Classmethod, Inc.

iOS/AndroidのUI比較

7

デザインガイドライン

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Ⓒ Classmethod, Inc.

Deference - 控えめであること UIにはその内容を分かりやすく表示し、ユーザとやり取りする働きがありますが、それ自身の方が目立つようであってはなりません。

Clarity - 明瞭であること 文字はどの大きさでも読みやすく、アイコンは的確明瞭で、装飾は控えめで適度、さらにその機能を明確に表すようでなければなりません。

Depth - 奥行きを与えること 視覚的な重なりや本物らしい動きがあると、楽しさや分かりやすさが向上します。

引用：iOS Human Interface Guidelines

Flat Design

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

実際のUIを比較する

iOSとAndroidのUIを並べて比較できるサイト。

『UI OH MY』http://uiohmy.com/ 今回のスライド内でも幾つか引用してます。

11Ⓒ Classmethod, Inc. ※ UIに関しては、こうした方が良いという話ではないです ※ あくまで、こんなのがあるよという感じで聞いて頂ければ...

iOS　　　 無し

Android　ある

UI比較 - Backキー

12Ⓒ Classmethod, Inc.

UI比較 - Backキー

Facebook iOS左上の戻るボタンから戻るorスワイプ Android 左下のBackキー

13Ⓒ Classmethod, Inc.

http://uiohmy.com/

UI比較 - スタンプ選択

Slack iOSキーボードの上 Android ダイアログ

14Ⓒ Classmethod, Inc.

http://uiohmy.com/

UI比較 - ログイン

Trello iOSあまりダイアログのケースを見ない Android ダイアログを使用するケースがある

15Ⓒ Classmethod, Inc.

http://uiohmy.com/

UI比較 - 選択肢

Swarm iOS画面下から出る(UIAlertControllerStyle.ActionSheet)

Android ダイアログ

16Ⓒ Classmethod, Inc.

http://uiohmy.com/

同じアプリでもiOSとAndroidで メニューの表示構成が異なる場合がある

UI比較 - メニュー

17Ⓒ Classmethod, Inc.

UI比較 - メニュー（全く違う例）

yelp iOSタブメニュー

Android サイドメニュー

18Ⓒ Classmethod, Inc.

http://uiohmy.com/

UI比較 - メニュー（表示位置が違う）

PANDORA iOS画面下

Android 画面上

19Ⓒ Classmethod, Inc.

http://uiohmy.com/

iOS/AndroidのUI比較のまとめ

20Ⓒ Classmethod, Inc.

OSに適したUIを心がけよう

iOS/Androidの開発比較

21

iOS/Android 違いがあるもの

22Ⓒ Classmethod, Inc.

OSバージョンによるAPIの互換性

23Ⓒ Classmethod, Inc.

＊＊＊ 下位のバージョンに合わせるため、基本的に新しく追加されたAPI/は使わないor機能を分岐させる

上位のバージョンdeprecatedになったのも分岐で対応

Support Library

新しい API level で追加された機能を古い API level でも使用できる

プロジェクト構成

24Ⓒ Classmethod, Inc.

iOS特に指定は無し Android あらかじめ決まっている

構成 - 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Ⓒ 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ピクセル

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）

Assets（iOS）

28Ⓒ Classmethod, Inc.

Assets.xcassetsで管理

画像の管理（Android）

29Ⓒ Classmethod, Inc.

res以下に解像度毎のフォルダを分けて管理

画像ファイル名

30Ⓒ Classmethod, Inc.

iOS大文字や記号が使える（例：SampleImage-01.png） Android 大文字や記号が使えない小文字とアンダースコア_はOK（例：sample_image_01.png）

アイコン

31Ⓒ Classmethod, Inc.

iOS/Android共、pngファイル iOS 透過NG 自動で角丸になる 角丸になることを前提としたデザインを心がける

Android 透過OK アルファチャンネル対応なので、形を自由に出来る。★とかでもOK

自動で角丸にならない iOSとデザインをあわせるのであれば注意する

画面レイアウト

32Ⓒ Classmethod, Inc.

iOSnib (.xib) storybord (.storyboard)

Android layout/.xml

画面レイアウト（iOS）

33Ⓒ Classmethod, Inc.

AutoLayout Attributes • Height • Width • Top • Bottom • Baseline • Leading • Trailing • Left • Right • Center X • Center Y

引用：Apple Auto Layout Guide

画面レイアウト（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

遷移

35Ⓒ Classmethod, Inc.

横にスライドするイメージ

重ねるイメージ

back

back

back

Push通知

36Ⓒ Classmethod, Inc.

RemoteNotification

通知はOSが出す

文字列

iOS9からUIUserNotificationActionBehaviorTextInputで通知から返信出来るように

GCM

(Google Cloud Messaging for Android)

通知はアプリがBroadcastReceiverで受け取って出す

json形式

iOS/Android 似てきたもの

37Ⓒ Classmethod, Inc.

マテリアル デザイン

フラット デザイン

デザインコンセプト

全く同じではないが、そんなに遠くもない 　どちらのスタイルもシンプルでミニマルさが特長

38Ⓒ Classmethod, Inc.

スキューモー　 フィズム

http://photoshopvip.net/archives/76201

アプリ間移動

iOS9 ～ 　Backボタンに近い機能　他のアプリから戻れるように

39Ⓒ Classmethod, Inc.

Permission

Android 6.0 ～ 　インストール時の確認が個別に　iOSの挙動っぽい

40Ⓒ Classmethod, Inc.

リストのスワイプ

RecyclerView　ItemTouchHelper 　アイテム項目のスワイプやドラッグ＆ドロップが　入れられる仕組みがある

41Ⓒ Classmethod, Inc.

iOS/Androidの開発比較のまとめ

42Ⓒ Classmethod, Inc.

それぞれのOSの特徴を理解しよう

並行開発時の設計

43

大前提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.

UI/UX

同じデザイン/挙動 　OSの流儀に反した仕様になっていないか？

　　→ 出来ないこと

　　→ 出来るけど大変なこと

45Ⓒ Classmethod, Inc.

【例】 Androidも iPhoneと同じ デザインで...

出来ないこと

OSの仕様

ストアガイドラインの制約

46Ⓒ Classmethod, Inc.

標準のコンポーネントの仕様から外れること

無駄なOSバージョン対応

出来るけど大変なこと

47Ⓒ Classmethod, Inc.

補足：OSバージョンiOShttps://developer.apple.com/support/app-store/jp/ Android http://developer.android.com/intl/ja/about/dashboards/

48Ⓒ Classmethod, Inc.

ガワネイティブ

49Ⓒ Classmethod, Inc.Ⓒ Classmethod, Inc.

【例】共通なら

WebViewで表示で

WebViewで表示 　本当にWebViewでよいのだろうか？

　　→ やめるべきもの

　　→ 大変だったこと

49

やめるべきもの

ほぼ全てがWebView

何でも表示出来る（URLが不定）

50Ⓒ Classmethod, Inc.

アプリである意味がないAppleの審査ガイドライン10.6に引っかかる可能性

iOS9からのATS対応セキュリティ的問題

補足：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サイトよりも早く目的の情報にたどりつける - 動作や表示が軽快で操作感が気持ちよい 　→画面が変わるたびにネットワーク通信を待つ必要がない

OSバージョンによる挙動の違い

ブラウザなら動くと言われる

問題の切り分け

大変だったこと

52Ⓒ Classmethod, Inc.

KitkatでopenFileChooserが呼ばれないとか...（しかも端末依存） https://code.google.com/p/android/issues/detail?id=62220

不具合があった時にHTMLを作っているベンダーが別だったり、外部サービスを使っていたりすると何が問題か調べるのに時間がかかる

開発者では対応出来ないケース

並行開発時の設計のまとめ

53Ⓒ Classmethod, Inc.

違いを理解したうえで設計をしよう WebViewのご利用は計画的に

プロジェクトとしての並行開発

54

実際のプロジェクトでの施策

55Ⓒ Classmethod, Inc.

用語の統一化予め用語などの認識を合わせる 　NG例：用語の定義が曖昧なケース 　　　販売価格という用語があった時にそれが何を指すのか

　　- 売価　　- 値引き前の価格　　- 標準価格　　- オープンプライス　NG例：同一のものを指すのに色々な呼び方があるケース 　　 会員、ユーザー、メンバー、お客様、顧客

機能名などの単語も可能な限り同じにする

　Log in、Log on、Sign in

56Ⓒ Classmethod, Inc.

プロジェクト構成最初に設計についてiOS/Androidエンジニアで一緒に話し合う 設計方針を決め統一する 　MVPで統一など

57Ⓒ Classmethod, Inc.

開発フローの共通化ブランチ運用をあわせる git-flow 例：

機能を実装、修正する際に feature ブランチを作成

実装完了後 feature から develop へのマージは pull request で

pull request のコメントに実装した機能の説明を記述する

作業途中の状態で一旦レビューにかけたい場合は、pull request のタイトルに [WIP] を付ける

pull request 時に他のメンバーがレビュー

レビューに通ったら実装者がマージして pull request をクローズする

他にも、レビュイー、レビュアーの方針を決めてる

58Ⓒ Classmethod, Inc.

仕様書を Github で共通化仕様書をiOS/Android共通にする（差分がある部分は明記する）

Githubで管理

変更はPRで管理

共通の仕様書を見ることで認識を合わせる

59Ⓒ Classmethod, Inc.

担当を明確に分けなかった例（前提として）両方対応出来るエンジニアのチームの場合

担当をiOS/Androidと分けずに、誰でも取れる作業にする タスクボードで管理　スクラムでの開発と相性が良いのでは

60Ⓒ Classmethod, Inc.

コミュニケーションiOS エンジニアと Android エンジニアが隣り合って開発 デザイナーもドキュメント、アセッツファイル関連はGithub上に展開しPRベースでエンジニアとのコミュニケーションを行った コミュニケーションを密にするのが重要

61Ⓒ Classmethod, Inc.

実際にプロジェクトを経験してみての 課題点など

62Ⓒ Classmethod, Inc.

課題点両OSにきちんと対応したもの（UI/UX）を作ろうとすると、デザイナーの負担が大きい デザイナー1名が iOS / Android 両OSを担当したため、

デザイナーの稼働が高い

デザインフェーズが遅れると実装フェーズの影響が大きい

エンジニアとデザイナーが協力してUI/UXを作る仕組み作りが重要

63Ⓒ Classmethod, Inc.

プロジェクトで使用したOSS

64Ⓒ Classmethod, Inc. ※ 参考までに

通信（RESTクライアント）

OSS

65Ⓒ Classmethod, Inc.

AFNetworking Alamofire（swift）

OkHTTP Retrofit

画像（キャッシュ）

OSS

66Ⓒ Classmethod, Inc.

SDWebImage

Glide Picasso

非同期処理など

OSS

67Ⓒ Classmethod, Inc.

Bolts ReactiveCocoa

RxAndroid RxJava

ローカルDB

OSS

68Ⓒ Classmethod, Inc.

Realm

Realm

テスト

OSS

69Ⓒ Classmethod, Inc.

KiWi Specta/Expecta

JUnit Mockito

ベータ配信、クラッシュ統計

OSS

70Ⓒ Classmethod, Inc.

Fabric Crashlytics

Fabric Crashlytics

プロジェクトとしての並行開発まとめ

71Ⓒ Classmethod, Inc.

コミュニケーションは大切

まとめ

72

それぞれのOSの特徴を理解したうえでUI/UXを設計する 出来ないものは出来ない

無理にUI/UXを合わせるのはやめよう

公式のガイドラインは大切

WebViewのご利用は計画的に 開発チームとしてコミュニケーションは大切

73Ⓒ Classmethod, Inc.

Developers.IO 2016

ご静聴ありがとうございました。 スライドは後日ブログで公開します。

74

F-2

Ⓒ Classmethod, Inc.

#cmdevio2016