SwiftとReactNativeで似たようなUIを作った際の記録
4 likes3,185 views
iOSDC 2017 Reject Conference days2での登壇資料になります。 https://iosdc-reject-conference.connpass.com/event/64236/ 平素はSwiftでiOSアプリの開発をしています。今年からReactNativeも多少嗜むようになり、その中で得た知見や実装の際で予め気をつけて置くと良いかと思うことや、UI構築の中での違いなどをざっくりとまとめたものになります。
SwiftとReactNativeで似たようなUIを作った際の記録
- 1. SwiftとReactNativeで 似たようなUIを作った際の記録 2017/10/20 iOSDCRC day2 @ LODGE (Yahoo! JAPAN) Fumiya Sakai
- 2. 自己紹介 ・酒井 文也 （Fumiya Sakai） ・ever sense. inc エンジニア ・Designer → ServerSide Engineer → AppDeveloper Accounts ・Facebook: https://www.facebook.com/fumiya.sakai.37 ・Twitter: https://twitter.com/fumiyasac ・Github: https://github.com/fumiyasac ・Qiita: https://qiita.com/fumiyasac@github Who are you? Library (Personal) Products (ever sense. inc) 祝！リニューアル
- 3. ReactNativeでUI構築の際に押さえておきたいポイント SwiftからReactNativeに来た際に個人的に戸惑ったところ その1. 遷移の管理と実装 その2. UI部品に関する考え方と実装について その3. iOS / Androidでのクロスプラットフォームの対応 その他気をつけると良いトピックス ・Reduxの考え方 ・UIComponentのライフサイクル ・データ永続化
- 4. その1. 遷移の管理と実装 ReactNativeはStoryboardがなく、遷移の実装は明確に違いが出る所 Swift ReactNative ・Storyboard & Segue ・push / pop (with UINavigationController) ・present / dismiss ・カスタムトランジション ・NavigatorIOS (iOS only) ・Redux & react-navigation ・Mobx ・参考資料（Mobx）: React Native with MobX — Getting Started https://medium.com/react-native-training/react-native-with-mobx-getting-started-ba7e18d8ff44 ・react-native-router-flux ・参考資料（Redux & react-navigation）: redux + react-navigation https://qiita.com/kazuyuka76/items/6295e5ee282e5ba494a1 ・参考資料（react-native-router-fluxのリポジトリ）: ※次ページに使用方法を解説 https://github.com/aksonov/react-native-router-flux
- 5. 例. react-native-router-fluxに関する解説 元になるComponentクラス（App.js等）に対応を記載してActionsを発火させる ※ 遷移の設計はSwiftでもReactNativeでも重要な部分 Reduxにどこまでロックインさせるかは要件次第 各コンテンツ用のコンポーネントクラス との対応を記載しておく。 ※ react-native-router-fluxは特にReduxを使わない 場合でも使用可能です。 各コンテンツ用のコンポーネントの中で、 進む：Actions.key名({ param1: xxx, … }) / 戻る： Actions.pop() をonPress内に記載する。 ・direction指定なし → push / pop ・direction=”vertical” → present / dismiss
- 6. その2. UI部品に関する考え方と実装 Storyboard・XibはないがWebのフロントエンド構築にイメージが近い印象 Swift ReactNative ・Storyboard & Xib ・UIViewController ・AutoLayout ・UIComponent ・Flexbox ・参考資料2: React Nativeを用いた初めてのiOSアプリ開発 : 選んだ理由と、開発で学んだこと http://postd.cc/react-native-ios-app/ ・参考資料1: ReactNativeのデバッグ方法 https://qiita.com/y_koh/items/3f2090e450269bc9f07c → 左に挙げたような見える場所やControllerがない ・HTML + CSSやAndroidのXMLでのレイアウト作成に近い ・見た目のデバッグはCmd + RやChrome Developer Tool使用 ・Viewの重なりの順番が関わる際は少しわかりにくさも... ・Storyboard & Xibを活用して見た目を確認しながら調整 ・Storyboard & XibやAutoLayoutでUI側のコードを追い出す ・Viewの重なりの順番が目でわかりやすい
- 7. 例1. 横方向にスライドするコンテンツがあるUI実装 横方向に一覧表示がされていて、縦方向に別のカテゴリの一覧を持つ 作成中のサンプル 実装のポイント UITableViewCell + UICollectionView ScrollView + FlatList ※今回のケースはサードパーティー製ライブラリは 使わない想定のものになります。 ・FlatListはReactNative Ver0.43より追加 ・iOSのUICollectionViewやAndroidのRecyclerViewに近しい 例. NETFLIX Swift ReactNative ※ReactNativeのScrollView, SectionList, FlatListは SwiftのUIScrollView, TableView, CollectionView 同様に開発でよく使うもの
- 8. 例1. 横方向にスライドするコンテンツがあるUI実装 Swift及びReactNativeでのこのUI実装の組み立て方と設計 要素に分解 NavigationBar （ポイント）UITableViewCell内にUICollectionViewを持つSwift ReactNative UITableView UITableViewCell UICollectionView View(Header相当) ScrollView View(ScrollViewの中) FlatList （ポイント）ScrollView内のViewにFlatListを展開 ・参考資料2: FlatList (ReactNative official document) https://facebook.github.io/react-native/docs/flatlist.html ・参考資料1: How to use the FlatList Component — React Native Basics https://medium.com/react-native-development/how-to-use-the-flatlist-component-react-native-basics-92c482816fe6
- 9. 例2. メディアアプリであるような感じのUI実装 スクロールの位置の変化に応じてメイン画像やナビゲーションが動く y = 0 実装のポイント ※今回のケースはサードパーティー製ライブラリ使 用 します。(ReactNative Ver0.48.3にて検証) ・使用ライブラリ：react-native-parallax-scroll-view https://github.com/i6mi6/react-native-parallax-scroll-view 作成中のサンプル ScrollViewDelegate + ダミーのHeader パララックス表示のライブラリ Swift ReactNative y < 0 y > 0 記事を表示するために下へスクロールすると画像が隠 れるタイミングに合わせてNavigationBarが出現 ※ReactNativeのアニメーションはiOSのアニメー ションとはかなり異なる部分（結構つらい...）
- 10. その3. iOS / Androidでのクロスプラットフォーム対応 iOS / Android間のアプリデザインの考え方による違いをどう埋めるか？ iOS Android iOS Human Interface Guideline https://developer.apple.com/ios/human-interface-g uidelines/overview/themes/ Material Design https://material.io/guidelines/ ・Developing for Android vs. iOS: Material vs. Flat Design https://medium.com/@jrejaud/developing-for-android-vs-ios-material-vs-flat-design -fb341b05b0f0 一方でデバイスでデザインが異なるUIパーツでは用意されていないものもある 例）Header / Icon / ListView (UITableView) / Drawer / Spinner … ・xxx.ios.js / xxx.android.js とデバイス毎にデザインを分ける？ ・両者のガイドラインの良いとこ取りをしたデザインにする？ デザイン的に両者の違いをどのようにして解決するか？ ReactNative純正のUIComponetでもAlertやProgressBar等は用意されている https://facebook.github.io/react-native/docs/getting-started.html iOS Android ヘッダーの違い
- 11. 例. よりネイティブアプリに近いUIをつくるもの iOS / Androidのデザイン間の差異を良い感じでよしなにするもの ・参考資料: NativeBaseをはじめとするUI関連のライブラリを活用してReactNativeでUIサンプルを作成した際の詳細解説 https://qiita.com/fumiyasac@github/items/12707f93f5c96fa3fc3f NativeBase（ReactNativeのUIComponentを拡張してつくられている & ReactNative純正UIComponentと併用可） UI Component Library参考：（iOS） https://akveo.github.io/react-native-ui-kitten/#/home UI Component Library参考：（Android） http://react-native-material-design.github.io/ 1つのコードでネイティブに近いデザインにできるメリット デメリット スタイルの細かい微調整がしにくい場合がある ・公式ページ：https://nativebase.io/ ・サンプル（KitchenSink）https://github.com/GeekyAnts/NativeBase-KitchenSink 公式ページの「Docs」内に実装例とデバイス毎の見た目例があります。 注意1：UI Component Libraryは併用しないように！ 注意2：ライブラリでも難しい部分は自作するように！
- 12. その他気をつけると良いトピックス Swiftでアプリ開発をする方がReactNativeを始める際に知っておくと良いもの UIComponentのライフサイクル Reduxの考え方 データ永続化 UIComponetクラスもライフサイクルを持つ。 iOS / Androidのネイティブのものとは異なるので注意！ ・React component ライフサイクル図 https://qiita.com/kawachi/items/092bfc281f88e3a6e456 ・iOSエンジニア必見！！iOSのレイアウトで押さえておきたいこと【総集編】 https://developers.eure.jp/tech/ios_layout_beginners/ アプリの状態管理をAction → Dispatcher → Store → View の流れで1方向になるようにするArchitecture。 Swiftのライブラリでも「ReSwift」がある。 ・Reduxの基本 http://developers.mobage.jp/blog/redux-basic ・ReSwift https://github.com/ReSwift/ReSwift データ永続化に関してもネイティブiOS同様様々 特にRealmが使用できるのは個人的に嬉しい。 ・React Nativeにおけるローカルデータベースの考察 https://goo.gl/w4xHsh ・Realm (Javascript) https://realm.io/docs/javascript/latest/
- 13. まとめ UI実装に関してSwiftとReactNativeを比べると同じようでも違う部分が多い UIの考え方がネイティブとかなり異なる部分があるが、近い UIを実現することは十分に可能 クロスプラットフォームならでは iOS / Android間のデザイン差異も考慮に入れる アプリと相性を考える ※今回の資料のQiita詳細解説及びSwift版・ReactNative版は追って公開します（11月上旬見込み） ・UIComponentやライブラリ等をうまく活用することで良いUIが実現できる ※Animationは少し苦手 ・遷移の考え方やUI構築の方法ががらりと異なる箇所もあるのでこの部分は注意が必要 ・サーバーサイドが動きや振る舞いを決めてクライアントがそれに準ずるものなら相性は良いと思う。 ・端末の機能をフル活用するもの（アプリ内課金・エクステンション・地図等）は結構大変になりそうな印象。 ・iOS / Android両対応アプリを開発する際は、両者のデザインやUIの考え方を考慮すること ・デザインの差異が出やすいUIパーツの考慮を忘れずにすると良い