【ReactNative】app.jsonの例【Expoによるアプリのリリース】

本記事ではExpoを使ってアプリをリリースする際のapp.jsonについて解説します!実際に僕がリリースしたアプリのソースコードを利用してメモ程度に書き記します!

app.jsonの例

簡単なアプリで実際に使用してapp.jsonのコードを紹介します。
下の重要な部分について本記事の後半で解説します。

{
  "expo": {
    "name": "Easy Counter",
    "slug": "EasyCouunter",
    "version": "1.0.0", 
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": false,
      "bundleIdentifier": "com.tetoblog",
      "buildNumber": "1.0.0"
    },
    "android": {
      "package": "com.tetoblog",
      "versionCode": 1,
      "permissions": [],
      "adaptiveIcon": {
        "foregroundImage": "./assets/icon_adaptive_foreground.png",
        "backgroundImage": "./assets/icon_adaptive_background.png"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

解説

“expo”

"expo": {
    "name": "Easy Counter",
    "slug": "EasyCouunter",
    "version": "1.0.0", 
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#ffffff"
    },

“name”はアプリでいちばん重要な「アプリ名」です。ここに、表示したいアプリ名を書きましょう。
“slug”はリリースされた際のURLに付随します。割と重要ですので適している名前を書きましょう。
“icon”は名前の通りアプリアイコンです。準備してパスを通しておきましょう。
“splash”はアプリがロードしている間の画面について設定します。ロードしている間に表示する画像を選択しておきましょう。”resizeMode”について、「”cover”」にしておくのが一般的です。これは、画像が画面にフィットするように自動で縦横比を調節してくれます。

“ios”

 "ios": {
      "supportsTablet": false,
      "bundleIdentifier": "com.tetoblog",
      "buildNumber": "1.0.0"
    },

ここはiosをリリースする際に必要となる情報です。

“supportsTablet”はタブレットでも利用可能にするかを設定します。trueにする場合、別でサイズを合わせる等のコードも必要になります。
“bundleIdentifier”は自分のサイトが有ればサイトを逆から記載します。サイトがなければ任意の文字列を記述するのが一般的です。
“buildNumber”はバージョンを記述します。初期のリリースは”1.1.0″で良いです。

“android”

"android": {
      "package": "com.tetoblog",
      "versionCode": 1,
      "permissions": [],
      "adaptiveIcon": {
        "foregroundImage": "./assets/icon_adaptive_foreground.png",
        "backgroundImage": "./assets/icon_adaptive_background.png"
      }

“package”は自分のサイトが有ればサイトを逆から記載します。サイトがなければ任意の文字列を記述するのが一般的です。
“versionCode”はバージョンを記述します。初期のリリースは”1″で良いです。
“permissions”はパーミッションを記述します。何も権限の許可が必要のないシンプルなアプリケーションでは[]を記述しておきましょう。
“foregroundImage”はiconの背景画像、”backgroundImage”はiconの背景画像に重ねる画像を指定します。


ということで本記事は、
exopを利用したReactNativeアプリののリリース時に必要となるapp.jsonの例を紹介しました。わからないことなどは本記事最後のコメント欄に記載してくださいね。
最後まで読んでいただき、ありがとうございました\(^o^)/

おすすめ書籍

高評価レビュー多数の有名書籍です!
ReactNativeの参考に、持っていて間違いない一冊ですよ\(^o^)/

超オススメのPC用品

PCを操作する上で、トラックボールマウスが非常におすすめです!
僕も感動したこのマウスを、騙されたと思って使ってみてください!(^^)

外部モニターで2倍以上の効率化が見込めます!
安いものだと、たったの1万円前後なのでおすすめですよー!\(^o^)/



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です