Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
NativeBaseをはじめとするUIに関する

ライブラリを使ったサンプルを作ってみた
React&React	Native入門者の会	#2

2017/04/21	Fumiya	Sakai
自己紹介と簡単な経歴など
✦ 今までの仕事履歴(本業)
石川県金沢市生まれ
前はサーバーサイドのプログラマ	※Rails&PHP使い
26歳〜31歳: WebプログラマとiOS(PHP	&	Rubyがキャリア長い)
23歳〜25歳: Webデザ...
これまでに作ったもの(ネイティブアプリ)
①	簡易家計簿アプリ「Coffre」
②	ゲームアプリ「10秒虫食い算」
・カレンダーを自作しています
・シンプルなお小遣い帳感覚で支出管理できます
・全問正解者ほとんどいません…
・不定期ですがコラム...
カレンダーが好きでライブラリを作りました
日本の祝祭日を計算で出してくれる
・カレンダーアプリ等での活用を想定
・シルバーウィーク・ゴールデンウィークも対応
・ハッピーマンデー法の施行も対応
・春分の日・秋分の日にも対応
・過去の祝祭日もおおむ...
✦ コードの共通化はできるがデザインの共通化はどうするか…?
iOS/Android間でのデザインの違いを考慮
内部処理の共通化はReactNativeの大きなメリットではあるが、端末特有のデザイン面の調整はいかに
・Developing	fo...
✦ iOS/Android間のデザインをよしなにするUI	Component	Library
NativeBaseの概要まとめ
タグのマークアップに関しては普段のReactNativeのものと異なってくるが部品が豊富なので色々と使えそう
★基本...
✦ 詳細に関しましてはサンプルとデモを交えて解説します
今回のサンプルの見た目はこちら
今回はiPhone/AndroidのサンプルデモとNativeBaseを活用した部分の中でも特徴のある部分を紹介します
Android
Github:htt...
✦ UI表現やAPIとの通信時等の場面で今回はライブラリを有効活用
使用したライブラリやサンプルについて
今回はUI設計や作成の過程で便利になりそうなものは積極的に使用していく方針で進めていく形にしました
★NativeBase以外で使用ライブ...
✦ 今回はアプリで一覧から詳細の流れの中でライブラリを活用する
今回のサンプル概要
簡単な画面遷移と合わせて実際に自分で作ってみた方が感覚が掴めたことが多かった(まあ最初ははまった)
★僕なりの概要設計はこんな感じです
お店一覧表示

Comp...
✦ 基点となるのは<Container>タグでその中にコンテンツを展開する
NativeBaseでの構造の基本形
ReactNativeのComponentとNativeBaseで拡張されたComponentと併用することでより良いデザインを作...
✦ ここで実際のサンプルアプリの部分を4つほど挙げてみましょう
NativeBaseレシピ(1):	ヘッダー
ヘッダーのデザインに関してはポピュラーなものはとても作りやすい(逆にこの部分は改造が難しいかも)
★ヘッダー部分の実装例
iOSの場合...
✦ ここで実際のサンプルアプリの部分を4つほど挙げてみましょう
NativeBaseレシピ(2):	グリッドレイアウト
NativeBaseをインストールすると一緒にreact-native-easy-gridが使用でき複雑なレイアウトがし易く...
✦ ここで実際のサンプルアプリの部分を4つほど挙げてみましょう
NativeBaseレシピ(3):	ドロワーメニュー
NativeBaseをインストールすると一緒にreact-native-drawerが使用できてドロワーに関する設定も細かい
...
✦ ここで実際のサンプルアプリの部分を4つほど挙げてみましょう
NativeBaseレシピ(4):	リストアイテム
ListItemは決まった形であればStyleSheetがなくてもOK&様々なケースでの実装がDocumentに掲載されている
...
✦ 大枠部分はNativeBaseに合わせて細部の調整は自前で作成する方針
どんな局面でうまく活用すると良いか
NativeBaseのマークアップに則りながらReactNativeのコンポーネントを組み合わせての調整も可能
【React	Nat...
✦ iOS/AndroidでのUIの両立はできるだけ不自然にならないように考慮
今回のまとめ
ご清聴ありがとうございました!またこのような機会があった際には是非ともよろしくお願い致します!
★iOS/Androidでのデザインの違いの考慮はDI...
Upcoming SlideShare
Loading in …5
×

NativeBaseをはじめとするUIに関する ライブラリを使ったサンプルを作ってみた

2,412 views

Published on

React & ReactNative入門者の会#2 での登壇資料になります。
最初なのでまずはiOS/Android両対応をテーマにUI部分におけるデザイン面での際の統一を上手く図るためにNativeBaseを使用してUIサンプルを作成した際の備忘録をまとめました。
ReactNativeを始めるにあたり少しでも参考になれば幸いです。

★Github
https://github.com/fumiyasac/LikeCustomTransition

Published in: Technology
  • Be the first to comment

NativeBaseをはじめとするUIに関する ライブラリを使ったサンプルを作ってみた

  1. 1. NativeBaseをはじめとするUIに関する ライブラリを使ったサンプルを作ってみた React&React Native入門者の会 #2 2017/04/21 Fumiya Sakai
  2. 2. 自己紹介と簡単な経歴など ✦ 今までの仕事履歴(本業) 石川県金沢市生まれ 前はサーバーサイドのプログラマ ※Rails&PHP使い 26歳〜31歳: WebプログラマとiOS(PHP & Rubyがキャリア長い) 23歳〜25歳: Webデザイナー兼ディレクター 本業は今はiOSのネイティブ開発者 趣味:シルバーアクセサリー集め・スイーツ作り・アプリ開発 女子向け・グルメ・エンタメ関連のお仕事が多い Qiita : http://qiita.com/fumiyasac@github Github : https://github.com/fumiyasac ✦ 酒井文也(さかい ふみや) 東京(大塚)住まいの32歳 こんな格好を普段からしているので 遊び人に見られますがエンジニアです。 文系卒に思われますが 実は数学科で理系卒です。 めっちゃお酒好きそうに見えますが ビール苦手でお酒も超弱いです。 今でもたまにUIまわりとか触りたく なることがあったりなかったり 今年の4月からフリーランスです。 (割とお堅い感じの会社にいます) 最近のはまっている食べ物は カボチャと担々麺と甘栗です。 最近はSwift以外ではRailsやLaravel・CakePHP・Node.jsなんかも
  3. 3. これまでに作ったもの(ネイティブアプリ) ① 簡易家計簿アプリ「Coffre」 ② ゲームアプリ「10秒虫食い算」 ・カレンダーを自作しています ・シンプルなお小遣い帳感覚で支出管理できます ・全問正解者ほとんどいません… ・不定期ですがコラムも書いています ・サーバーサイドはRuby on Railsを使用 http://www.coffre.me/ ・デザインにもこだわってみました(特にグラフ) ・実はちょっとバグがあります。 ・問題は今後追加予定(現在110問収録) 個人的にはなりますが、他にもアプリ・Webサービスなど開発中です(2016年も宜しくお願いします) ・サイト等は次回のアップデートで公開予定 http://blog.just1factory.net/services/284 ・若干の中毒性を含みます
  4. 4. カレンダーが好きでライブラリを作りました 日本の祝祭日を計算で出してくれる ・カレンダーアプリ等での活用を想定 ・シルバーウィーク・ゴールデンウィークも対応 ・ハッピーマンデー法の施行も対応 ・春分の日・秋分の日にも対応 ・過去の祝祭日もおおむね考慮はしている このライブラリのReactNative版を出すかどうかは未定です。もし要望があれば時間ができれば作る予定。 CocoaPods & Carthage & 手動で導入可能 ・HTTP(HTTPS)通信は不要 ★CalculateCalendarLogic ver0.1.3 【2017年】Swift3系への正式対応をしていますので是非README等を参考に導入してみてください! ・Github: https://github.com/fumiyasac/handMadeCalendarAdvance ・実装解説: http://qiita.com/fumiyasac@github/items/33bfc07ad36dfffcdf8f ・Github: https://github.com/fumiyasac/handMadeCalendarOfSwift 新機能や運用保守は継続しています
  5. 5. ✦ コードの共通化はできるがデザインの共通化はどうするか…? iOS/Android間でのデザインの違いを考慮 内部処理の共通化はReactNativeの大きなメリットではあるが、端末特有のデザイン面の調整はいかに ・Developing for Android vs. iOS: Material vs. Flat Design 端末による違いは避けては通れない宿命ではあるが、良いアプリにするためにはきっと避けては通れない。 ★端末が違えばUIの設計に関する思想は異なる ・iOS → Human interface guideline ・Android → Google Design (Material Design) ★特にデザイン面の違いを意識するUIパーツの例 ・Header / Icon / ListView / Drawer / Spinner … その他色々細かく見ると結構ある ・できるだけネイティブアプリに近しい見た目にしたい部分はできる限り調整したい 【今回この部分を考えるきっかけになった記事】 ・MaterialDesignに近しい形でiOS側も実装するか否かは結構自分も悩んだ部分 ヘッダー・デザインやUITableView(iOS)/ListView(Android)の右矢印・ラジオボタンは顕著に違う所 https://medium.com/@jrejaud/developing-for-android-vs-ios-material-vs-flat-design-fb341b05b0f0
  6. 6. ✦ iOS/Android間のデザインをよしなにするUI Component Library NativeBaseの概要まとめ タグのマークアップに関しては普段のReactNativeのものと異なってくるが部品が豊富なので色々と使えそう ★基本的にはReactNativeの部品やライブラリを拡張して作られている ・NativeBaseのタグとReactNative純正のものを併用してStyleの調整ももちろん可能。 【主な特徴】 ・公式ドキュメント http://nativebase.io/docs/v2.0.0/ ・アイコンもiOS/Androidで利用できるものが取り揃えられている。 1. iOS/Android両対応のパーツが用意されている ※ReactNative版の「TwitterBootstrap」のようなイメージ ・サンプル(KitchenSink) https://github.com/GeekyAnts/NativeBase-KitchenSink 2. デザインもネイティブアプリに近い形 3. マークアップのパターン事例が豊富 4. タグの階層構造に意味合いがある ・どのReactNativeの部品やライブラリを拡張してNativeBaseの部品を作っているかはドキュメント参照
  7. 7. ✦ 詳細に関しましてはサンプルとデモを交えて解説します 今回のサンプルの見た目はこちら 今回はiPhone/AndroidのサンプルデモとNativeBaseを活用した部分の中でも特徴のある部分を紹介します Android Github:https://github.com/fumiyasac/LikeCustomTransition 【サンプルコード】 ※Qiitaは後日書いて対応する予定です。 【このサンプルでのポイント】 1. ベースとなる部分はNativeBaseのタグ構造を活用して全体のレイアウトと見た目を作成する iOS 2. 見た目のアクセントとなる部分についてはサードパーティ製のReactNative用のUIライブラリを適宜使用する
  8. 8. ✦ UI表現やAPIとの通信時等の場面で今回はライブラリを有効活用 使用したライブラリやサンプルについて 今回はUI設計や作成の過程で便利になりそうなものは積極的に使用していく方針で進めていく形にしました ★NativeBase以外で使用ライブラリの紹介 ★おまけ:ReactNativeを学習するにあたってこんな感じで進めました (Qiita)ReactNative事始めから簡単なサンプルを読み解くまでの実践記録ノート http://qiita.com/fumiyasac@github/items/71b8ff88d96289d43593 (Github)※記事内のリンクをご参照ください ライブラリ名 ライブラリの機能概要 バージョン axios 非同期通信(GETのみ) 0.16.0 react-native-router-flux 画面遷移のコントロール 3.38.0 react-native-scrollable-tab-view タブ型のコンテンツ切り替え 0.6.3 react-native-snap-carousel カルーセル型の画像切り替え 2.1.0 react-native-super-grid UICollectionView型のGridView表示 1.0.2 react-native-timeline-listview スケジュール型のコンテンツ表示 0.2.0 ※今回のサンプルではReduxは使用しませんでした。 ※React: 16.0.0-alpha.6 ※react-native: 0.43.3
  9. 9. ✦ 今回はアプリで一覧から詳細の流れの中でライブラリを活用する 今回のサンプル概要 簡単な画面遷移と合わせて実際に自分で作ってみた方が感覚が掴めたことが多かった(まあ最初ははまった) ★僕なりの概要設計はこんな感じです お店一覧表示 Component 土台部分の Component メニューの Component お店詳細の Component フォト一覧の Component … ドロワーメニューの表示用Component … メインコンテンツの表示用Component *土台部分に配置するもの* コラム一覧表示 Component 買い物履歴表示 Component 画面遷移のコントロールについては、 react-router-fluxを活用する ドロワーメニューの開閉については、 propsとstateを使用してハンドリング ヘッダーやリスト・アイコン部分等 はNativeBaseで用意されたものを使用 ライブラリでUIを組み立てる部分は、 Viewを挟んで調整をする
  10. 10. ✦ 基点となるのは<Container>タグでその中にコンテンツを展開する NativeBaseでの構造の基本形 ReactNativeのComponentとNativeBaseで拡張されたComponentと併用することでより良いデザインを作れる NativeBaseを活用したレイアウトの事始め ★タグのおおまかな基本形はこのような感じになる 基点となるのはContainerタグになり、その中にそれぞれのタグ構造が 展開されていく形になる。この形はヘッダー・コンテンツ・フッターの コンテンツの雛形のような形を想定。 //コンポーネントの内容をレンダリングする render() { return ( <Container> <Header> ��… </Header> ���<Content> ��… </Content> <Footer> ���… </Footer> </Container> } } ・コンテンツ表示部分に関してもContentタグやContainerタグが基点 ・任意のNativeBaseで使用しているタグについては拡張しているタグ  の機能を使用することができます。 例. NativeBaseのButtonタグでクリックした際の動作を設定 【ポイント】 <Button rounded onPress={ () => Actions.SomeContents() } /> → Githubに各コンポーネントのソースがあるので見ておくと良い。
  11. 11. ✦ ここで実際のサンプルアプリの部分を4つほど挙げてみましょう NativeBaseレシピ(1): ヘッダー ヘッダーのデザインに関してはポピュラーなものはとても作りやすい(逆にこの部分は改造が難しいかも) ★ヘッダー部分の実装例 iOSの場合にのみ、 StatusBarを設定する iOS Android iOS/Androidでヘッダー文言の位置が異なる カーソルのデザインが変更されている const CommonHeader = ({ title, icon }) => { //表示する要素を返す return ( <Header iosBarStyle="light-content"> <Left> <Button transparent onPress={ () => Actions.pop() }> <Icon name={icon || "arrow-back"} /> </Button> </Left> <Body> <Title>{title}</Title> </Body> <Right /> </Header> ); }; ・共通で使用するヘッダー部分についてはComponent化 ・戻るボタンの部分についてはアイコンを使用 ※NativeBaseでサポートされている iOS用のStatusBar設定
  12. 12. ✦ ここで実際のサンプルアプリの部分を4つほど挙げてみましょう NativeBaseレシピ(2): グリッドレイアウト NativeBaseをインストールすると一緒にreact-native-easy-gridが使用でき複雑なレイアウトがし易くなる ★グリッドレイアウト部分の実装例 iOS Android react-native-easy-gridが使用可能 //react-native-easy-gridのコンポーネントの呼び出し import { Col, Row, Grid } from 'react-native-easy-grid'; ・・・ <Content> <Grid> <Col style={・・・}> <Image style={・・・} source={・・・} /> </Col> <Col> <Row style={・・・}> <Image style={・・・} source={・・・} /> </Row> <Row style={・・・}> <Image style={・・・} source={・・・} /> </Row> </Col> </Grid> </Content> ※実装のTipsはreact-native-easy-gridを参照 https://github.com/GeekyAnts/react-native-easy-grid
  13. 13. ✦ ここで実際のサンプルアプリの部分を4つほど挙げてみましょう NativeBaseレシピ(3): ドロワーメニュー NativeBaseをインストールすると一緒にreact-native-drawerが使用できてドロワーに関する設定も細かい ★ドロワー部分の実装例 iOS Android ※実装のTipsはreact-native-drawerを参照 https://github.com/root-two/react-native-drawer 実装のポイントまとめ: 1. メインコンテンツ側のComponentにドロワーメニューの開閉に ����関する処理を用意する。 2. <SideContents closeDrawer={this.closeDrawer} />のよ ����うな形でサイドメニュー側のComponentへ引き渡す。 react-native-drawerが使用可能
  14. 14. ✦ ここで実際のサンプルアプリの部分を4つほど挙げてみましょう NativeBaseレシピ(4): リストアイテム ListItemは決まった形であればStyleSheetがなくてもOK&様々なケースでの実装がDocumentに掲載されている ★リストアイテム部分の実装例 iOS Android※上記のようにある程度決まった見た目はサポートしている const CommonComment = ({ comment }) => { ��・・・ //表示する要素を返す return ( <ListItem avatar> <Left> <Thumbnail source={image_url} /> </Left> <Body> <Text>{title}</Text> <Text style={・・・} note>{description}</Text> </Body> <Right> <Text note>{time}</Text> </Right> </ListItem> ); }; サムネイル表示のスタイル
  15. 15. ✦ 大枠部分はNativeBaseに合わせて細部の調整は自前で作成する方針 どんな局面でうまく活用すると良いか NativeBaseのマークアップに則りながらReactNativeのコンポーネントを組み合わせての調整も可能 【React Native】良さげなコンポーネント紹介 NativeBase導入してシンプルにできる所は活用していき、細部の調整が必要な場合は純正のものとミックス ★NativeBaseを活用してUI構築をする場合におけるポイントになりそうな所 ・ReactNative純正のレイアウト作成方法と比べてタグの階層構造が重要になる ・大枠の部分はNativeBaseを利用して、内部構造はReactNative純正のレイアウトで対応しても良い ★NativeBaseでマークアップしたタグに対して独自のStyleをつけることも可能 ・ある程度の配色パターンや属性値による見た目の変化を考慮する必要がある ・サードパーティー製のUIライブラリ等を組み合わせてUIを構築する必要がある場合も対応は可能 【今回の実装におけるライブラリの参考】 ・iOS/Androidでのデザインに差異がある部分については積極的に活用していくと便利 ライブラリとの使い分けと依存関係や相性を調査した上で組み合わせればよりUIを彩ることもできる http://qiita.com/YutamaKotaro/items/052768ca01a6369a8ad5
  16. 16. ✦ iOS/AndroidでのUIの両立はできるだけ不自然にならないように考慮 今回のまとめ ご清聴ありがとうございました!またこのような機会があった際には是非ともよろしくお願い致します! ★iOS/Androidでのデザインの違いの考慮はDIYだと結構大変なところも 共通コードで実装できる反面デザインの細部までiOS/Androidの考慮をすると結構手間がかかる部分 ★NativeBaseはデザインの違いをよしなにするがタグの組み方が変わる タグの階層構造である程度のデザインまで整えてくれるので細部をうまく調整するような形になる ★UI系のライブラリを活用する際はUIのバランスや調和を大切に 選定の際にはStyleのカスタマイズのしやすさや構造・ネイティブの動きも参考にするとよりBetter ★自分ルール 【良いアウトプットのために】 発表・登壇時はこの中のいずれか2つを 絶対に準備するルールを設けています!

×