翻訳|「JavaScriptEverywhere」第25章モバイルアプリケーションがリリースされました

翻訳|「JavaScriptEverywhere」第25章モバイルアプリケーションがリリースされました

一番上に書く

みなさん、こんにちは。フロントエンド開発エンジニアのMaoXiaoyouです。英語の技術書が翻訳されています。

みんなの読書体験を向上させるために、文章の構造と内容がわずかに調整されました。この記事に欠陥を見つけた場合、またはコメントや提案がある場合は、コメント領域にメッセージを残すか、WeChat：code_maomaoを追加して、お互いにコミュニケーションを取り、学び合うことを歓迎します。

（σﾟ∀ﾟ）σ…：*☆ああ、いいね

第25章モバイルアプリケーションのリリース

前世紀90半ばの私の高校では、TI-81グラフ電卓用のゲームをダウンロードすることがトレンドでした。

誰かがゲームのコピーを手に入れ、それが山火事のように広がります。私たち一人一人が順番に、データケーブルを使って電卓を別の電卓に接続してゲームをロードします。電卓でゲームをすることは、宿題をしているように見せながら、授業の後や勉強室で暇な時間を終えるための方法です。ただし、ご想像のとおり、この配布方法は時間がかかり、2人の生徒が数分間接続を維持する必要がありますが、他の生徒は待つしかありません。今日、私たちのデジタルポケットコンピューターは、私の基本的なグラフ電卓よりもはるかに強力です。これは、インストール可能なサードパーティアプリケーションを介してその機能を簡単に拡張できるためです。

最初のアプリケーション開発が完了したので、他の人がアクセスできるようにアプリケーションを公開できます。この章では、アプリケーションを構成する方法を学習します。

その後Expo、アプリケーションを公開します。

最後に、AppleまたはGoogleのPlayウェアハウスに送信できるアプリケーションパッケージを生成します。

app.json構成

Expoアプリケーションには、app.jsonアプリケーション固有の設定を構成するために使用されるファイルが含まれています。

新しいExpoアプリケーションを生成すると、app.jsonファイルが自動的に作成されます。アプリケーション用に生成されたファイルを見てみましょう。

{
    
    
  "expo": {
    
    
    "name": "Notedly",
    "slug": "notedly-mobile",
    "description": "An example React Native app",
    "privacy": "public",
    "sdkVersion": "33.0.0",
    "platforms": ["ios", "android"],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
    
    
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
    
    
      "fallbackToCacheTimeout": 1500
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
    
    
      "supportsTablet": true
    },
    "android": {
    
    }
  }
} 

これらの構成のほとんどは自明ですが、その目的を確認しましょう。

• name

  アプリケーションの名前。

• slug

  にある、Expoアプリケーションの公開に使用されるURL名前expo.io/project-owner/slug。

• description

  プロジェクトの説明はExpo、アプリケーションを公開するときに使用されます。

• privacy

  Expoプロジェクトの公開。publicまたはに設定できますunlisted。

• sdkVersion

  Expo SDKバージョンナンバー。

• platforms含む当社のターゲットプラットフォーム、ios、android、and web.

• version

  アプリケーションのバージョン番号は、セマンティックバージョン標準に従う必要があります。

• orientation方向

  アプリケーションのデフォルトの向きは、縦向きまたは横向きの値を使用してロックできます。または、ユーザーデバイスの回転方向をデフォルトの向きと一致させることができます。

• icon

  アプリケーションアイコンのパスが使用されますiOSと同時にAndroid。

• splash

  画像の場所とアプリケーションのロード画面の設定。

• updates

  アプリケーションをロードした後、アプリケーションが無線でOTA構成を更新する方法（）。このfallbackToCacheTimeoutパラメーターを使用すると、時間の長さ（ミリ秒単位）を指定できます。

• assetBundlePatterns

  アプリケーションにバンドルする必要のあるリソースの場所を指定できます。

• iosとandroid

  プラットフォーム固有の設定を有効にします。

このデフォルト構成は、アプリケーションの強固な基盤を提供します。Expo他の多くの設定は、ドキュメントに記載されています。

アイコンとアプリケーションのロード画面

デバイスの小さな正方形のアイコンは、現代社会で最もよく知られているデザインの1つになっています。目を閉じてください。ロゴや特定の背景色など、数十のアイコンを想像できると思います。さらに、ユーザーがアイコンをクリックすると、最初の静的な「起動画面」が表示されます。これは、アプリケーションのロード時に表示されます。これまで、デフォルトの空白のExpoアイコンと起動画面を使用してきました。アプリケーションでカスタムデザインに置き換えることができます。

assets/customフォルダに「注目の」アイコンとスプラッシュ画面を含めました。それらをアセットディレクトリ内のイメージに置き換えるかapp.json、カスタムサブディレクトリ内のファイルを指すように構成を更新することで、これらを利用できます。

Appアイコン

icon.pngファイルは正方形1024×1024ピクセルPNGファイルです。使用してapp.jsonいる属性がこのファイルを指している場合、Expoさまざまなプラットフォームおよびデバイスに対して適切なアイコンサイズが生成されます。アイコンは完全に正方形で、透明なピクセルはありません。これは、アプリケーションアイコンを含める最も簡単で簡単な方法です。

"icon": "./assets/icon.png",

単一のクロスプラットフォームアイコンに加えて、プラットフォーム固有のアイコンを含めることもできます。この方法の主な利点は、特にアイコンスタイルの使用に関心がある場合に、適切AndroidでiOS個別のスタイルのアイコンを含めることですAndroid。

アダプティブアイコン。

についてはiOS、引き続き単一の1024×を使用します1024 png。でapp.jsonファイル：

"ios": {
    
    
  "icon": IMAGE_PATH
} 

Androidアダプティブアイコンを使用するには、前景画像、背景色（またはbackgroundImage）、およびバックアップ静的アイコンを指定する必要があります。

"android": {
    
    
  "adaptiveIcon": {
    
    
    "foregroundImage": IMAGE_PATH,
    "backgroundColor": HEX_CODE,
    "icon": IMAGE_PATH
  }
} 

このユースケースでは、引き続き単一の静的アイコンを使用できます。

起動画面

スプラッシュ画面は、アプリケーションがデバイスで起動されたときに短時間表示される全画面画像です。assets/customデフォルトの画像をにあるデフォルトの画像に置き換えることができますExpo。デバイスのサイズはプラットフォーム内およびプラットフォーム間で異なりますが、それでも1242×2436のサイズを使用することを選択します

Expoファイル。次に、Expo画像のサイズが変更され、デバイスの画面やアスペクト比全体で機能するようになります。

app.jsonファイルの初期画面は次のように構成できます。

"splash": { "image": "./assets/splash.png", "backgroundColor": "#ffffff", "resizeMode": "contain" }, 

デフォルトでは、白​​い背景色を設定します。これは、画像が読み込まれたときに表示される場合があります。または、選択した色によって異なります。

resizeMode、初期画面画像の周囲の境界線として。画面の色に合わせて更新できます。

"backgroundColor": "#4A90E2",

resizeModeさまざまな画面サイズに合わせて画像サイズを調整する方法を示します。

contain時間を設定することにより、元の画像のアスペクト比を予約します。

これを使用するcontainと、特定の画面サイズまたは解像度がbackgroundColor最初の画面画像の周囲の境界線として使用されます。

または、にresizeMode設定するとcover、画像が画面全体に拡大されます。

アプリケーションには微妙なグラデーションがあるため、以下をresizeModeカバーするように設定します。

"resizeMode": "cover"

図25-1。アプリケーションのスプラッシュ画面

これにより、アイコンと初期画面イメージが構成されます（図を参照25-1）。これで、他のユーザーがアクセスできるようにアプリケーションを公開する方法を検討する準備が整いました。

Expo発行

開発プロセス中、ローカルエリアネットワークを介して携帯電話のExpo Clientアプリケーションからアプリケーションにアクセスできます。これは、開発用コンピューターと携帯電話が同じネットワーク上にある限り、アプリケーションにアクセスできることを意味します。ExpoプロジェクトExpo CDNを公​​開できるようにしますURL。これにより、アプリケーションがにアップロードされ、一般公開されているにアクセスできるようになります。このようにして、誰でもExpo Clientアプリケーションを介してアプリケーションを実行できます。これは、アプリケーションのテストまたは迅速なリリースに役立ちます。

プロジェクトを公開するにExpo Dev Toolsは、ブラウザの[プロジェクトの公開または再公開]リンクをクリックするか（図を参照25-2）、ターミナルに入力しますexpo publish。

図25-2。Expo Dev Toolsアプリケーションはから直接公開できます

パッケージ化が完了すると、誰でもhttps://exp.host/@ / passにExpo Client Appアクセスしてアプリケーションにアクセスできます。

ネイティブバージョンを作成する

直接Expoリリースはテストや迅速な使用に最適ですが、アプリケーションに合格Apple App StoreまたはGoogle Play Storeリリースしたい場合があります。これを行うには、ビルドパッケージをそれぞれのストアにアップロードします。

Windowsユーザー

Expoドキュメントによると、WindowsユーザーLinuxはWindowsサブシステムを有効にする必要があります（WSL）。これを行うにはMicrosoft、Windows 10提供されているインストールガイドに従ってください。

iOS

生成されたiOSバージョンは利用可能である必要がありApple Developer Program、年間99米ドルで請求されます。このアカウントを使用して、app.jsonファイルにアカウントをiOS追加できますbundleIdentifier。

この識別子は逆DNS表記に従う必要があります。

"expo": {
    
    
"ios": {
    
    
   "bundleIdentifier": "com.yourdomain.notedly"
  }
} 

app.jsonファイルが更新され、我々はビルドを生成することができます。ターミナルアプリケーションで、プロジェクトディレクトリのルートディレクトリから次のように入力します。

$ expo build:ios 

ビルドを実行すると、Apple IDログインするように求められます。ログイン後、資格情報の処理方法についていくつか質問があります。Expoすべての資格情報と証明書を管理できるため、次の各プロンプトで最初のオプションを選択することで、それらを許可できます。

? How would you like to upload your credentials? (Use arrow keys)
❯ Expo handles all credentials, you can still provide overrides
  I will provide all the credentials and files needed, Expo does limited validat
ion

? Will you provide your own Apple Distribution Certificate? (Use arrow keys)
❯ Let Expo handle the process
  I want to upload my own file

  ? Will you provide your own Apple Push Notifications service key? (Use arrow keys)
❯ Let Expo handle the process
  I want to upload my own file 

有効なApple Developer Programアカウントをお持ちの場合はExpo、ファイルが生成され、に送信できますApple App Store。

Androidシステム

の場合Android、Androidパッケージファイル（APK）またはAndroidアプリケーションバンドル（AAB）ファイルを生成できます。Android App Bundlesより現代的なフォーマットなので、このようにしましょう。

興味がある場合は、Android開発者向けドキュメントにApp Bundle利点が詳しく説明されています。

バンドルを生成する前app.jsonに、Android識別子を含むようにファイルを更新しましょう。そしてiOS、逆に使用されるべき、同様のDNS表記：

"android": {
    
    
    "package": "com.yourdomain.notedly"
  } 

このようにして、ターミナルアプリケーションからアプリケーションパッケージを生成するために使用できます。必ずプロジェクトのルートディレクトリに入り、次のコマンドを実行してください。cd

$ build:android -t app-bundle 

アプリバンドルに署名する必要があります。自分で署名を生成することはExpoできますが、キーストアを管理することはできます。コマンドを実行してバンドルを生成すると、次のプロンプトが表示されます。

? Would you like to upload a keystore or have us generate one for you?
If you don't know what this means, let us handle it! :)

  1) Let Expo handle the process!
  2) I want to upload my own keystore! 

を選択する1と、Expoアプリケーションバンドルが生成されます。プロセスの最後に、ファイルをダウンロードして、Google Playストアにアップロードできます。

AppStoreに公開する

レビューガイドラインの変更と関連費用のため、Apple App StoreまたはGoogle Playストアにアプリケーションを送信する具体的なプロセスについては説明しません。Eopoドキュメントは、リソースとガイドの優れたコレクションであり、アプリをストアに公開する方法に関する便利で最新のガイドです。

結論として

この章では、React Nativeアプリケーションを公​​開および公開する方法について学習しました。

Expoこのツールを使用すると、テスト用にアプリケーションをすばやくリリースし、アプリケーションウェアハウスにアップロードできる製品バージョンを生成できます。Expoまた、証明書と依存関係を制御するためのオプションも提供します。

このようにして、バックエンドデータAPI、Webアプリケーション、デスクトップアプリケーション、クロスプラットフォームモバイルアプリケーションの作成と公開に成功しました。

理解が不十分な場合は訂正してください。大丈夫だと思ったら、もっと多くの人を助けたいと思って、集めたり共有したりしてください。