KawakamiTweetこんにちは、エンジニアの川上(@natsumican63)です。スタジオ・アルカナでは、普段は主にPHPでのWebサービス開発を行っています。Nativeでのアプリ開発・リリースを行ったので、その時の話を書いていこうと思います。Nativeでアプリ開発をする事になったきっかけスタジオ・アルカナでは、キミスカという新卒者向け就活プラットフォームの開発・運用を行っています。学生向けサービスでありながら、ブラウザ版のみの提供となっておりアプリ版配信の要望が多く寄せられていました。そこで、過去に採用実績があり、Webエンジニアでも馴染みのあるReactを用いたアプリ開発を行うことになりました。Nativeは、Reactを使用してiOS,Androidアプリを構築することができるライブラリです。Nativeをより簡単に扱える開発支援サービスである、Expoを採用しました。Expoでは、ネイティブのコードを一切書かない(書けない)代わりに、JavaScriptを使用します。ネイティブモジュールが使えない代わりに、Expo側の用意したAPIをJavaScriptで呼び出し、それらを組み合わせてアプリを構築することになります。カメラ機能やプッシュ通知機能といった主な機能は一通り提供されており、出来ることも増えつつあるため、今回私達の開発するアプリでは、Expoを採用することにしました。どのようなAPIが提供されているかは、下記ドキュメントから参照できます。SDKよかった点Webフロントエンドの知見でアプリ開発ができる前述の通り、Expoではネイティブのコードを書かずにJavaScriptのみで開発します。Refresh)が使えたり、npmライブラリを使用できたりと、Webフロントエンド開発の体験をほぼそのまま得ることができました。NativeではWebフロントエンドと同じくFlexboxでレイアウトを組んでいくため、スタイリングに関してもこれまでの知識を応用することができました。ビルドが簡単にできるExpoでは、CLIからコマンドを叩くだけで、iOS/Androidアプリのビルドができます。コマンドを叩くと、Expoサーバーでビルドが行われ、iOS/Android用にそれぞれipa,apkファイルが生成されます。この際に面倒な証明書等の作成もExpoが実行してくれます。Clientを用いた実機確認が簡単Expoでは、汎用型クライアントアプリをアプリストアからダウンロードし、QRコードを読み込むだけで、開発中のアプリを簡単に実機で動かすことができます。Playこれにより、エンジニアだけでなく、ディレクターやビジネスサイドの方々にも、開発中のアプリを簡単に確認してもらうことができます。今回はCIも導入し、常に最新のバージョンを確認できるようにしました。前提として、Expoでは便利なPush通知機能がデフォルトで用意されています。Pinpointを利用することになりました。Studio上でエラーログを確認する必要がありました。結果的に、Pinpointのドキュメントと実際のペイロードが異なっていたために起きた不具合でしたが、そもそもExpoのPush通知機能を使っていれば避けられた問題だったかな...と思います。ストア審査のあれこれWebアプリケーションと異なり、アプリストア上でアプリを配布するためには、Apple/Googleの審査を通す必要があります。社内にアプリエンジニアがいないため、審査に必要なものやリジェクトされない方法については、逐一ググっていくしかありませんでした。運良く審査も一発で通り、結果的に無事リリースまで漕ぎ着けましたが、今回の開発で一番苦労した点と言えます...。その他アプリならではの工夫した点せっかくなのでUIも使いやすくこれまでのメーラー風UIを刷新し、学生世代にも馴染みのあるチャット風UIを採用しました。Native用ライブラリ、react-native-gifted-chatがExpoにも対応しており、今回はそれを用いて構築しました。Slackにアプリストアのレビュー情報を流すAppFollowを使用して、Slack上にアプリストアのレビュー情報を流し、ユーザーからのFBがリアルタイムで確認できるようにしました。まとめ今回、Expoを利用することによりSPA開発時と同じような開発体験を得ることができました。パフォーマンスの方も、今の所ネイティブと遜色の無いレベルで動いていると思います。今回のように、Expoで用意されているAPIで事足りる要件であれば、Expo採用は選択肢のひとつになり得ると思います。Nativeでのアプリ開発で、社内にネイティブアプリの知見がない状態での開発でしたが、とくに大きな問題もなく無事アプリをリリースすることができました。リリースしたばかりですが、今後の運用にどのような影響があるかも含め、引き続き検証していきたいと思います。