WebエンジニアがReact Nativeでアプリをリリースしてみた
Coiney窓口をリリースしました。Coiney（スマートフォンやタブレットを使ったクレジットカード決済サービス）のサポートに特化したアプリです。
盛り過ぎ注意
数年前のアプリケーション開発は、アプリのインストールというハードルによって、ブラウザで完結するWebアプリケーションが主流でした。しかし、最近はユーザーの学習によってアプリのインストールのハードルが下がりました。そこで出てきた考え方がアンバンドリングです。
１アプリに対して１機能。盛り込まないことによって、ユーザーに対して迷いのないUI、開発者に対して開発／運用のシンプルさを提供することができます。Facebookがメッセンジャーアプリを本体から切り離したのもその一例だと考えられます。
私たちはアンバンドリングの考え方に則り、既存のアプリを決済部分にフォーカスしました。申し込み／ユーザーサポートにフォーカスしたアプリがCoiney窓口です。
アプリの特性を活かす
アプリとしてリリースしたことで、スマホ／タブレットに特化したNative UIを組み込むことができました。ユーザーがより慣れ親しんでいる操作性を実現しました。
さらに、アプリで強力な機能の１つであるプッシュ通知を使うことができました。今までの申し込みフローでは、審査結果はメールで送られていました。メールだと埋もれてしまう審査結果も、プッシュ通知を使うことでより気付きやすくなると期待されます。
React Nativeのいいところ
React Nativeとは、簡単にいうとWebの技術でネイティブアプリの開発ができるフレームワークです。（詳しくは本家）ちなみに、Facebookが開発しているOSSです。開発当初のReact Nativeのバージョンは0.4.0、リリースに使用したバージョンは0.14.2でした。ちなみに、今の最新は0.26.2です。
コーディング作業は筆者が１人で行いました。最初は、React／fluxを勉強することから始めました。サイドプロジェクトとしてやっていたこともあり、開発期間は長いですが実際にかかったコーディング期間は約３ヶ月です。
Webの技術でアプリが開発できる
iOSアプリ開発にはObjective-c／Swift、Androidアプリ開発にはJavaの知識が必要です。つまり、iOS／Android同時にリリースする場合、最低２つの言語を習得する必要があります。React NativeはJavaScriptの知識のみで開発できます。
うまくいったらマルチプラットフォーム対応できる
Coiney窓口は実験的な試みも含んでいます。なのでシンプルに早くリリースすることが最適だと考えました。そこで、まずはiOSアプリをリリースしました。その結果をみてAndroidアプリをリリースする予定です。ロジックはそのままに、UIの改修のみで他プラットフォームにリリースできます。
Reactを今後の開発の選択肢にできる
2015年ぐらいからReactが流行ってきています。CoineyではReactを用いたプロジェクトがありませんでした。そこで、React NativeはReactを試す絶好の機会だと考えました。
fluxが抜群にわかりやすい
Coiney窓口では、fluxを使用しました。当時はfluxアーキテクチャライブラリが乱立していたのでとりあえずfacebookオリジナルを使うという判断です。今からだとreduxを使うのがベスト・プラクティスでしょうか。
個人的にはReactを開発する上でfluxは相性が抜群ですし、必須ではないかと思います。
ライブラリが豊富
以下は開発で使用させていただいたライブラリです。こういった開発を効率化されるライブラリが、かなり早い段階から揃っているのも魅力のひとつではないでしょうか。
- react-native-device-info — デバイス情報を取得します。iPad/iPhoneを判断する時などに使用しました。
2. react-native-google-analytics — Google Analytics用のラッパーです。
3. react-native-icons — 数多くのアイコンフォントを提供します。
4. react-native-image-picker — 「写真と撮る／選択」のネイティブUIと機能を提供します。
5. react-native-safari-view — Safari View Controllerのラッパーです。Webリンクを使用する時これを使用しないと審査で落とされます。
6. react-native-search-bar — サーチバーUIです。
アイデアがあればアプリをリリースしよう
以下まとめです。
やっぱりめんどくさいアップル審査（小声）
審査にはとても時間がかかりました。細かい内容は割愛しますが、Webアプリケーションのリリースとは大きく違うところです。Webならすぐにデプロイできます。しかし、その厳しさによって品質が保たれることも事実だと感じました。
Webエンジニアがアプリ開発の知識を手に入れることができた
Xcode／Apple Developer／iTunes Connect／Test Flightなどなど。iOSアプリリリースまでのフローを経験できました。
アイデアを具現化する
もしあなたがJavaScriptの知識を持っていて、アプリのアイデアがある場合、リリースすることをあきらめないでください。React Nativeはあなたのアイデアを風化させることなくアプリリリースを可能にしてくれます。
おまけ
本家にPull Requestを出してShowcaseに追加されました。
