Expoを使ったアプリ作成手順についてまとめました。
プロジェクトの作成
$ expo init --npm
✔ What would you like to name your app? … MemoApp
✔ Choose a template: › blank a minimal app as clean as an empty canvas
✔ Downloaded and extracted project files.
📦 Using npm to install packages.
✔ Installed JavaScript dependencies.
✅ Your project is ready!
To run your project, navigate to the directory and run one of the following npm commands.
- cd MemoApp
- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- npm run android
- npm run ios
- npm run web作成したアプリに移動します。
$ cd MemoAppアプリ起動
$ expo startこれでexpoの開発ツールが開かれます。
iOS simulatorを開く
開発ツールの左側サイドバーの「Run on iOS simulator」より開くことができます。
Android Emulatorを開く
こちらの記事にまとめたとおり、以下コマンドより実行します。
$ emulator @"Android Studioで設定したdevice名" -dns-server 8.8.8.8 Emulatorが立ち上がったので、この状態で開発ツールに戻り、
「Run on Android device/emulator」をクリックすると画面が切り替わります。
デプロイURLを発行する
これまでのsimulator, emulator立ち上げ方法だと、当然サーバーを切るとアプリも消えてしまいます。
しかし、expoを使ったアプリでは簡単にデプロイURLを取得できるので、その発行方法を紹介します。
$ expo publishこれを実行すると、Project pageのところにURLが生成されていることが確認できます。
このURLをブラウザで開き、表示されるQRコードをスマホで読み取ると、expoがinstallされたdeviceで、アプリを開くことができます。
セキュリティ設定
上記のように、簡単にURLを発行し、アクセスができることが確認できました。
しかし、これは逆に、誰でも簡単にアクセスできてしまい危険ですよね。
そのための対策を行う事ができます。
設定はエディタの方で行います。
app.jsファイルを開き、一行追加します。
{
"expo": {
"name": "MemoApp",
"slug": "MemoApp",
"version": "1.0.0",
"privacy": "unlisted",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},「”privacy”: “unlisted”,」この部分を追記しました。
これにより、expoのページで公開されないようにすることができます。
以上、読んでいただきありがとうございました。
コメント