wheatandcatの開発ブログ

React Nativeで開発しているペペロミア & memoirの技術系記事を投稿してます

技術書展7の入稿が終わりました。

技術書展7の入稿自体は先週にやったけど、色々合って今日もろもろ完了しました。

本の情報

wheatandcat.booth.pm

BOOTHの方ではDL版を購入できるようにしました。 これの物理の本を技術書典7で販売します。

[f:id:wheatandcat:20190915193859p:plain:w296f:id:wheatandcat:20190915194039p:plain:w19f:id:wheatandcat:20190915194221p:plain:w296

サークル情報

techbookfest.org

上記で委託で販売します。

  • 日付: 9月22日（日）
  • 場所: 池袋サンシャインシティ 展示ホールC/D（文化会館ビル2/3F）
  • 配置:い04C
  • タイトル:「React Native開発日記 -スケジュール管理アプリ「ペペロミア」が出来るまで-」

内容

内容は以下の目次の通りです。

⽬次

  • はじめに
    • 本書の内容について. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
    • 対象バージョン. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
    • 筆者情報. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
    • ペペロミアについて
    • ペペロロミアって、どんなアプリ？ . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
    • 使⽤している技術. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
    • アプリ作成のスケジュール. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
    • 開発体制. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
  • 1 ⽇⽬アプリを作る準備
    • 1.1 どんなアプリを作るか考える. . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
    • 1.2 技術選定. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
    • 1.3 作成するアプリの内容を考える. . . . . . . . . . . . . . . . . . . . . . . . . . . 14
    • 1.4 まとめ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
  • 2 ⽇⽬UI のプロトタイプを作成する
    • 2.1 他アプリを研究する. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
    • 2.2 Marvel でのUI のプロトタイプ作成. . . . . . . . . . . . . . . . . . . . . . . . 18
    • 2.3 Figma について. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
  • 3 ⽇⽬UI コンポーネントを作るその1
    • 3.1 React Native の環境を整える. . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
    • 3.2 アプリを起動してみる. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
    • 3.3 Storybook を使⽤してcomponent を作成. . . . . . . . . . . . . . . . . . . . . 26
    • 3.4 component のフォルダ構成. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
    • 3.5 まとめ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
  • 4 ⽇⽬UI コンポーネントを作るその2
    • 4.1 React Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
    • 4.2 React Native Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
    • 4.3 react-native-easy-grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
    • 4.4 @expo/react-native-action-sheet . . . . . . . . . . . . . . . . . . . . . . . . . 32
    • 4.5 react-native-swipe-list-view . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
    • 4.6 react-native-sortable-list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
    • 4.7 react-native-action-button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
    • 4.8 react-native-root-toast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
    • 4.9 react-native-app-intro-slider . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
    • 4.10 まとめ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
  • 5 ⽇⽬画像を作ってアップロードする37
    • 5.1 はじめに. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
    • 5.2 作成する素材について. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
    • 5.3 作成環境. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
    • 5.4 アイコンを作る. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
    • 5.5 画像最適化する. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
    • 5.6 画像をCloud Storage for Firebase にアップロードする. . . . . . . . . . . . . . 41
    • 5.7 まとめ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
  • 6 ⽇⽬アプリのデータを管理する43
    • 6.1 アプリで使⽤しているデータストアの構成. . . . . . . . . . . . . . . . . . . . . 43
    • 6.2 AsyncStorage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
    • 6.3 SQLite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
    • 6.4 Cloud Firestore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
    • 6.5 予定共有機能の実装. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
    • 6.6 React Native for Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
    • 6.7 Firebase Hosting でWeb 画⾯を公開する. . . . . . . . . . . . . . . . . . . . . 49
    • 6.8 予定共有機能の動作. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
  • 7 ⽇⽬問い合わせフォームを作る
    • 7.1 問い合わせについて. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
    • 7.2 Cloud Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
    • 7.3 Golang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
    • 7.4 Slack API のToken を取得する. . . . . . . . . . . . . . . . . . . . . . . . . . . 56
    • 7.5 お問い合わせAPI を作成する. . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
    • 7.6 お問い合わせのUI を作成. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
  • 8 ⽇⽬チュートリアルを作る
    • 8.1 チュートリアルについて. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
    • 8.2 アプリのガイドを作る. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
    • 8.3 予定作成まで誘導する. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
  • 9 ⽇⽬E2E テストを書く
    • 9.1 Detox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
    • 9.2 導⼊. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
    • 9.3 E2E テストの書き⽅. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
    • 9.4 まとめ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
  • 10 ⽇⽬LP を作る
    • 10.1 LP とは. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
    • 10.2 Figma でデザインを作る. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
    • 10.3 Web サイトのレスポンシブ対応. . . . . . . . . . . . . . . . . . . . . . . . . . 74
    • 10.4 利⽤規約、プライポリシー. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
    • 10.5 Netlify でホスティングする. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
    • 10.6 LP のドメインを設定する. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
    • 10.7 アプリで利⽤規約とプライポリシーを表⽰. . . . . . . . . . . . . . . . . . . . . 82
    • 10.8 まとめ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
  • 11 ⽇⽬スクリーンショットを作る
    • 11.1 スクリーンショットとは？ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
    • 11.2 スクリーンショット作成⽅法について. . . . . . . . . . . . . . . . . . . . . . . 86
    • 11.3 AppLaunchpad で作成する. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
    • 11.4 Figma で作成する. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
    • 11.5 まとめ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
  • 12 ⽇⽬アプリを公開する
    • 12.1 事前準備. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
    • 12.2 iOS アプリをストアに公開する. . . . . . . . . . . . . . . . . . . . . . . . . . . 95
    • 12.3 まとめ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
  • 13 ⽇⽬デバイスの表⽰に対応
    • 13.1 iPhoneSE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
    • 13.2 Android のノッチに対応する. . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
  • 14 ⽇⽬バックアップ機能を作る
    • 14.1 機能の設計. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
    • 14.2 ソーシャルログインを実装. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
    • 14.3 バックエンドにFirebase OAuth を実装する. . . . . . . . . . . . . . . . . . . . 118
    • 14.4 バックアップAPI を作成. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
    • 14.5 バックアップ作成とデータ復元のUI を作る. . . . . . . . . . . . . . . . . . . . 125
  • 15 ⽇⽬デザインをブラッシュアップする
    • 15.1 アプリアイコンの変更. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
    • 15.2 Figma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
    • 15.3 Figma でカラーを管理する. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
    • 15.4 Figma で画⾯を作成する. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
    • 15.5 共通パーツをコンポーネント化する. . . . . . . . . . . . . . . . . . . . . . . . . 136
    • 15.6 ProtoType で画⾯遷移を管理する. . . . . . . . . . . . . . . . . . . . . . . . . . 138
    • 15.7 ブラッシュアップ前、ブラッシュアップ後のデザイン⽐較. . . . . . . . . . . . . 139
    • 15.8 まとめ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
  • 16 ⽇⽬ペペロミアの成果物リンク集
    • 16.1 リンク集. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
  • あとがき

できたけど。。。

大体150ページくらいです。 ぺぺロミアの内容を全部詰め込みたかったけど、 これでも全部詰め込めなかったなーって感じです。

まぁ、その内ネタが溜まったらPart.2でも出そうかなと思います。

ペペロミアの公式サイト更新

peperomia.app

公式サイトに本の紹介を追加しました。

f:id:wheatandcat:20190915201305p:plain

ダウンロードカード

当日は本と一緒にダウンロードカードも付ける予定です。

デザインはFigmaで作りました。

f:id:wheatandcat:20190915201646p:plain:w150 　　　f:id:wheatandcat:20190915201704p:plain:w220

****にパスワードが入って入力する感じの予定

さいごに

これで一段落ついたので、来週から4日に1回の更新ペースに戻します