TwitterFacebookRSS Feed

クラウドでスマホアプリを作りたい📱⛅

■結論

  • クラウド上でスマホアプリは開発できる
  • 不安定さはハマりどころはいくつかあるものの、ちゃんと動く

■使ったもの

  • GitHub Codespaces
  • AWS Amplify
  • React Native

■背景

普段は WEB 開発を行っているメンバーで、スマホアプリ開発に挑戦してみようという話になりました。ただし、「クラウド上で」開発を行うという制約付きです。

■技術選定について

◯ GitHub Codespaces

GitHub Codespaces を使うと、GitHub が提供するサーバー上で開発環境を構築することができます。今回はこちらを起点にして環境を整えていきました。

特に、今回は VSCode 上で Codespaces を立ち上げて開発をしました。ポートフォワード先が localhost になるのでこちらが便利です。

◯ React Native

せっかく作るならクロスプラットフォームでいきたいよね、ということで Flutter と React Native の2択でした。

React Native を選択した理由は、大きく分けて以下の2つです。

① WEB の人間に優しい

Flutter でやるなら Dart を学ばないといけません。一方の React Native なら、使い慣れている React と同じような気持ちで開発できます。

また、画面の構築の仕方も Flutter は少し敬遠するところがあります (Widget が苦手でした)。私は完全に HTML 脳なので、React Native の方が魅力的に感じました。

② 魔法の(?)QRコード

Expo Go というのを使うと、ターミナルに表示された QR コードをスマホで読み込むだけで、アプリが勝手に立ち上がってきます。お手軽ですね。

リモートのサーバーから QR コードが送られてきてスキャンして、本当に動くのか…？と半信半疑でしたが、この方針でやってみることにしました。

◯ AWS Amplify

フロントで手一杯なので、バックエンドは丸投げしたいなぁという気持ちでいっぱいです。どこかに素敵なサービスがあったら…

ありました。AWS Amplify は React Native 用のパッケージを提供しており、こちらにあやかることにしました。ますますクラウドらしくなってきましたね！

■良かったところ

◯ React Native Elements

React Native Elements は、Material UI のような UI コンポーネントを提供してくれます。

使えるコンポーネント数が多く使い勝手が良さげです。また、ドキュメントが充実しているため、WEB 上でコンポーネントの検索が簡単にできます。

◯ React Navigation

ネイティブアプリでのページネーションは全くイメージがつかず不安でいっぱいでしたが、React Navigation でサクッと実装できました。

◯ ローカルの iOS シミュレーターが使えた

当初は実機で Expo Go の QR コードを読み込んで開発をしていましたが、PC とスマホを両方いじるのが面倒になってきました。

ふと、QR コードのそばにこんなリンクが置いてあるのを見つけました。

exp://mva9gtc.anonymous.19000.exp.direct

これをローカルの iOS シミュレータ (Xcode にくっついてるやつ) の検索窓に貼り付けると、ちゃんとシミュレータ上で画面が動いてくれました！

リモートで開発したアプリをローカルのシミュレータで動かす、という不思議な構成で開発をすることができました。

■ハマりどころ

◯ expo start --tunnel

開発時は expo start というコマンドを実行するのですが、ローカル開発でない場合は --tunnel というオプション付きで実行しないといけません。また、その際に必要なパッケージとして @expo/ngrok を入れる必要がありました。

package.json の scripts 部分の例:

"scripts": {
    "start": "expo start --tunnel",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "lint": "eslint . --cache",
    "lint:fix": "eslint . --fix --cache"
}

クラウドは便利ですが、どこで何が動いているかをキチンと把握しないとハマるということが分かりました。

◯ Amplify のモックが使えない

Amplify で GraphQL を導入し、モックサーバーを立てようと考えました。

ところが、モックサーバー自体は http://172.16.5.4:20002 で動くのですが、Codespaces によって http://localhost:20002 にポートフォワードされてしまいます。

awsconfig にはモックサーバーが http://172.16.5.4:20002 にあると設定されるので、そこでずれが生じて接続できなくなってしまいます。

苦肉の策も編み出したのですが、結局はモックサーバーは使わずに開発を進めることにしました (きれいな解消方法があれば教えて頂きたいです)。

苦肉の策 (上書き):

awsconfig.aws_appsync_graphqlEndpoint = 'http://localhost:20002/graphql'
Amplify.configure(awsconfig)

◯ 何もしてないのに壊れた

何もしてないのに壊れます。正確には、開発環境が不安定で、さっきまで動いていたものが突然動かなくなったりします。

いくつか考えられる対応はあります。

  • アプリを再起動する (npm start し直し)
  • Codespaces を再起動する (PC 再起動と一緒)
  • Codespaces を作り直す (PC 買い替え)

クラウドだからこその不安定さは、クラウド流に解決したいところですね！ローカルでは PC 買い替えなんてなかなかできないですが、クラウドだと気軽に使い捨てできるのが推しポイントです。

■まとめ

  • ツールが整備されており、クラウド上でも十分にスマホアプリ開発ができる
  • クラウドの短所はクラウドの長所でカバーできる