Posted at

React Native製、予定作成アプリ「ペペロミア」を公開しました






個人で開発していたアプリがApple StoreとGoogle Play Storeで公開するまでいけたので、

公開までの話を紹介していきます。

ソースコードをGitHubで公開しているので、興味のある人は手元で動かして頂ければと思います。

手もとで実行する手順は、こちら


主に使用している技術


GitHub


Peperomia(アプリ)


PeperomiaWebSite(公式Webサイト)


諸々のリンク


作成したアプリについて

アプリ自体のコンセプトうんぬんよりも、一人でアプリを作って公開するということを目的に作っていたので、あまり語ることもないですが、なるべく簡単な操作でやりたいことをやれるアプリを目指して作成しています。


公開までの流れ


モック作成

モックデザイン作成ツールとしてMarvelを使用しました。

https://marvelapp.com/

スクリーンショット 2019-05-11 16.50.13.png

1人プロダクトなのでがっつりデザインを組むのよりも、

軽くモックを作って、手早く実装を始められることを優先したかったので、こちらのサービスを採用しました。

■アプリのモック

https://marvelapp.com/a1d5b47

スクリーンショット 2019-05-12 21.09.36.png


アプリ開発

アプリ開発に使用している技術やサービスについて紹介しています。


Expo

https://expo.io/

Expoを使用して開発しています。

Expoにデプロイしているアプリは以下から簡単に動作確認可能です。

■ペペロミア Expo

https://expo.io/@wheatandcat/peperomia


Expoのメリット


  • iOS / Androidの知識がなくてもアプリ開発ができる

  • XcodeやAppleの証明書、java、gradleの知識無しにアプリのビルド/リリースが行える

  • 開発中のアプリの共有が容易にできる


    • Expoを使用しない場合はFabricDeployGate等環境構築が必要になる

    • また自動化にはfastlaneの実装も必要になる



  • 実機での動作確認が容易にできる


Expoのデメリット


  • Expoが提供している範囲の開発しか行えない


    • 例) 現状では、e2eがCIで実行できない、e2eがAndroidで実行できない等




Type Script

Type Scriptを使用して開発しています。

Expoでは以下のドキュメントの通り実装すれば、使用することが可能です。

https://docs.expo.io/versions/latest/guides/typescript/


UIコンポーネント探し

■React Native Example

https://reactnativeexample.com/

欲しいReact Nativeのコンポーネントがある場合は、このサイトで検索すると大体ヒットするので便利


Storybook

https://storybook.js.org/docs/guides/guide-react-native/

コンポーネントカタログツールです。React Nativeでも使用できます。

アプリはWebと違いURLが存在しないのでよりコンポーネント単位で開発できることの良さが実感できると思います。

ちなみにStorybook v4以降からブラウザ無しで単体のアプリとして動くようになったので、

下記のようにStorybookのアプリを公開することも可能になりました。

■ペペロミア Storybook Expo

https://exp.host/@wheatandcat/peperomiastorybook


スクリーンショット 2019-05-11 16.50.13.png
スクリーンショット 2019-05-11 16.50.13.png


E2Eテスト

React NativeでDetoxを使用してE2Eテスト書くことができます。

■Detox

https://github.com/wix/detox/

このプロジェクトでも実装済みしています。こちらの手順で実行できます。


作成したアプリの機能


開始 〜 スケジュール作成まで


予定の共有機能

web画面ではreact-native-webを使って一部同等のコンポーネントを使用して作成しています。


予定の編集諸々


アプリ公開まで


ビルド

expoでのビルドは非常に簡単で以下のURLの通りで記載のコマンドの実行のみでOKです。

https://docs.expo.io/versions/latest/distribution/building-standalone-apps/

# iOSのビルド

expo build:ios

# Andoridのビルド
expo build:androd

コマンド実行後↓のようにブラウザ画面からビルド状況が確認できて完了次第ダウンロードできるようになります。

スクリーンショット 2019-04-22 22.42.13.png


ストアのスクリーンショットを作る

Apple Store、Google Play Store共に公開にはスクリーンショットの設定が必要です。

今回はAppLaunchpadを使って作成しました。

■AppLaunchpad

https://theapplaunchpad.com/

適当にスクリーンショットを撮ってアップロード。

とは軽く編集すれば、大体それっぽい感じにしてくれます。

スクリーンショット 2019-04-22 22.42.13.png


公式サイトを作る

ストアの公開には「 プライバシーポリシー」や「Webサイト」のURLの記載が必須になので、

合わせて公式サイトを作成して、公開しています。

■ペペロミア公式Webサイト

https://peperomia.app

スクリーンショット 2019-05-14 22.54.24.png

ここまで終われば、取り敢えずストアにアプリ公開が行えるはずです。


最後に


  • 今回は一人で全部やってみる的な企画で始めたプロジェクトでしたが、無事リリースできて満足。

  • Expoには、ほぼ満足。後はE2EがAndoridで動く & CIで実行できるようになれば良いなーと思います。