はじめに

こんにちは。
ライフサポートDiv.で、リフォームマッチングサイト「リショップナビ」のエンジニアをしている山形と申します。
システム全般の改修・開発を行っております。

基本的にバックエンドの開発をメインにしてきた私が先日リショップナビモバイルアプリの実装からリリースまでの工程を全て行いました。今回は私が行った作業内容について書いていきます。

この記事で紹介している「リショップナビアプリ」は各ストアにて配信中です。是非ダウンロードしてみてください！
【iOS版】リショップナビ-リフォーム事例・会社の比較見積もり
【Android版】リショップナビ-リフォーム事例・会社の比較見積もり

作業内容について

1. 背景

まず私個人のバックグラウンドについてですが、PHPをメインにWebサイトのバックエンド・フロントコーディングの設計・実装が主な実務でした。その他、Swiftを利用したiOSアプリの開発、リリース作業を行なった経験はあるものの、チーム作業の一部を担った程度でしたので、一人でゼロからの実装やリリース作業を行ったことはありませんでした。

リショップナビの集客チャネルのひとつとして、モバイルアプリの実装の話が上がり、まずは小規模、最低限で試そうということで、開発は私一人でやることになりました。
モバイルアプリ実装・リリースの経験がチームの中で相対的にあったことと、普段からアプリのプロジェクトがあるならやりたいと言っていたこともあり、挑戦させてもらうことになりました。

2. 今回使用した技術について

使用言語

今回使用した言語はReact Nativeです。
React Nativeとは、Facebookが作成したクロスプラットフォームのアプリ開発用フレームワークです。

主に下記の理由でReact Nativeを採用しました。

• iOS, Android両方のプラットフォームにリリースしたいという要件だったこと
• 私個人としてもReact Nativeの勉強をしていたこと
• チーム内でReact Native実装の経験を持った方がおり、レビューも可能だったこと

React Native で主に使用した技術・ライブラリ

実装で使用した主なライブラリは下記です。

• Stack Navigator
  （https://reactnavigation.org/docs/stack-navigator/）
• Bottom Tabs Navigator
  （https://reactnavigation.org/docs/bottom-tab-navigator/)
• React Native Webview
  （https://github.com/react-native-webview/react-native-webview）

英語のドキュメントが多かったですが、なんとか実装できました（笑）。

React Native実装開始の際にExpoというものを導入するか悩みました。
ExpoはReact Nativeの開発をより便利にしてくれるものです。Expo導入をすることで

• 同一ネットワーク内であれば実機にQRコードでアプリを配布可能
• 軽微なアップデートであればストア審査通さずにリリース可能（OTAアップデート）

等々のメリットがあります。
一方でReact Nativeの最新バージョンで使えるはずのライブラリが使えなかったり、Push通知を作り込みたい場合にはExpoは使用できないといったデメリットがあります。
実装開始時点でPush通知実装の予定があり、ejectすること（Expoを使用しないようにすること）が見えていたため、今回Expoは使用しませんでした。

3. リリースまでに行った作業

1.アプリの開発

・実装

先ほどから述べているように、React Nativeを使用してアプリ本体の実装を行いました。ゼロからの立ち上げですので、運用も考えながら進めております。

・デザイン

現在（2022.07）リリースされているver.1.1.0のホーム画面は私がデザインしたものです。
それまでデザイン業務をしたことはなかったのですが、やってみたかったデザイン業務にも、これを機に挑戦させてもらいました。無謀な挑戦に見えるかもしれませんが（笑）、私自身以前勤めていた会社でデザインの研修を受けていたこと、また普段の業務でデザイナーさんによく知見を聞いていたこと、 趣味でデザイン作業をしていたこともあり、挑戦させてもらいました。

2.リリース作業（iOS/Android）

リリースに関連して行った作業は下記です。
（具体的な方法はお調べください）

【iOS】

• 証明書の作成
• PC・アプリに証明書を設定
• App Store Connectにてアプリの情報設定・その他プライバシーポリシー等の設定
• 審査提出・通過後リリース

【Android】

• 鍵ファイル作成
• aabファイルの作成
• Google Play Consoleにてアプリの情報設定・その他プライバシーポリシー等の設定
• 審査提出・通過後リリース

悩んだ点・苦労した点

実装

React Nativeの実装は初めてでしたが、JavaScriptを普段使っており、また資料も豊富だったため、Reactの実装においては大きな抵抗感なく進められたと感じています。

そんな中で苦労したと感じた点は下記です。

• iOSとAndroidの動作が異なる場合がある
• ネイティブ側の実装（Objective-C, Java）

実装したものをいざシミュレータで動かしてみると、iOSとAndroidで微妙に動きが異なることがありました。ただし、画面上の動きであれば多くの場合React側で書き分けが可能です。
Push通知等デバイス側の操作になってくるとネイティブでの実装が必要となり、特にObjective-Cについてはほとんど知らなかったため難しかったです。React Nativeでの開発でもネイティブへの理解の必要性を感じました。

運用

また（Webの方でも言えることですが）今後の運用を考えながら実装していく必要があり、そこに難しさを感じました。できるだけ負債を抱えないように現在も模索しながら最適化を図っております。

審査

全体通して最も悩んだところはiOS版の審査対策です。iOSアプリの審査は一定レベルの基準があるため、事例を検索すると沢山出てきますので是非調べてみてください。私自身、昔参加したプロジェクトで何度も審査に落ちたことがありました（笑）。

そのためここはかなり慎重に動き、ガイドラインや事例を見ながらチームで話し合いつつ仕様を決めていきました。結果として何度も落ちることはありませんでしたが、今後のアップデートの際も気を付けていきたいと思います。

まとめ

今回、私がアプリリリースまでに行った作業を紹介しました。

知らないことばかりでしたので始めるまでは不安でしたが、新しいことに挑戦させてくれる雰囲気・何を聞いても答えてくれる雰囲気がチームにあったので、安心して取り組むことが出来たと思います。

また、じげんでは毎月一度、社内に所属するエンジニアがなんでも気軽に作ったものや勉強していることの発表をできる場「TGIF(Thanks God it’s Friday)」という会があり、アウトプットの機会も用意されています。
アプリの実装が始まった時からTGIFでアプリ開発の内容を社内向けに発信し、チーム外からも温かく見守ってもらいました。参加自由な会ですが、アプリ実装開始してからは連続で出場しています（６ヶ月連続出場達成しました！）。普段開発業務のみで完結してしまうところを、自分で作ったものを発信する場、プレゼンテーションを練習する場としても大変有用で、チーム外メンバーとの会話の機会も広がります！

以上となります。
ここまでお読み頂きありがとうございました！