Expoでアプリ作成を始める

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のページで公開されないようにすることができます。

以上、読んでいただきありがとうございました。

コメント