たのしいところだけやるAndroidアプリ開発

2024年8月27日 15:57

はじめに

　本記事では、Figmaで作成したデザインをLocofy Lightingを用いてReactNativeプロジェクトとして書き出し、Androidアプリとしてビルドする手順について、各種ツールの導入手順を交えて解説します。
　基本的にツールやAIのみを使用して進めるため、デザインの複雑さ、アプリの機能等によりますが、人間が頭を悩ませるのはFigmaで作るデザイン部分のみです。

今回のゴール🏆

　Figmaで制作したデザインを、Figmaのプレビュー通りに、(PCに接続していない)Android端末に表示する。

使用ツール🛠️

今回使用するツールは以下の通りです。

Figma - デザイン作成
Locofy Lighting - 各種コードのエクスポート
Android Studio - アプリのビルド
テキストエディタ - コードの手直し

前提条件✅

Node.js、npm、Android Studio、Gitのインストールが済んでいる

Android端末が手元にある
- データ転送のできるケーブルでPCと接続し、ファイル転送モードにしておきます
- PCと同じWifiに接続しておきます
- 端末は開発者モードに変更しておきます

Figmaでのデザイン制作🎨🖌️

Figmaについて

　Figmaの導入、デザイン作成については、別の記事で詳しく解説していますので、参考に進めてください。
　フレームのサイズや機能は適宜変更してください。

今回作るデザイン

　サカバンバスピスを押すと4種類の画面遷移をするシンプルなアプリを作ります。

Locofyで書き出す🧑‍💻

プラグインの起動

　Figma上部のツールバーから、「Resources」を選択し、入力フィールドに「Locofy」と入力します。ヒットした「Locofy Lighting」を選択すると、Locofyの設定画面が開きます。

プロジェクト作成

　Locofyの設定画面で「Convert to Code」を選択します。初回生成時にはプロジェクトの作成を求められるので、一番下の「Create New」からプロジェクト名を作成すると、プロジェクトの設定画面が開きます。
　今回は以下の通り設定しますが、必要に応じて変更してください。

What are you building?
- Mobile App
- Select Mobile Framework
  - React Native
Create New Project
- プロジェクト名：Basupisu
Code Settings
- JavaScript
Project Environment
- Expo

書き出し設定

　プロジェクトの作成が終わると、フレーム選択画面に自動で移行します。
　「Select Frames」で「All Frames」を選択し、「Start Sync」を押してFigmaのデザインをLocofyプロジェクトに同期します。
　なお、現在のLocofyで一度に同期できるのは25フレームまでです。25フレームを超えるプロジェクトの場合は、何回かに分けて同期します。その場合、「Selectede Frame」から同期するフレームを選択することができます。

プロジェクトのダウンロード

　同期が終わると、自動でブラウザが開きます。
　右上にある青い「Sync/Export」ボタンから、「Export Project」を選択すると、コード生成プロパティが開きます。今回は何もいじらず、右下にある「Confirm Code Export」からプロジェクトをエクスポートします。自動でダウンロードが始まります。

Expoでテスト👌🔍✔️

依存関係のインストール

　ダウンロードしたZipファイルを展開します。
　コマンドライン上で、展開したフォルダに移動し、以下のコマンドで依存関係をインストールします。

npm install

Expoアプリ上でテスト

　Android端末にExpoGoアプリをインストールしておきます。

　以下のコマンドを実行すると、コマンドライン上にQRコードが生成されます(初回は少し時間がかかります)。

npx expo start

　続いて、以下の文章が表示されるので、aを押します。
　(ここで、Android端末側ExpoGoアプリのアップデートを求められた場合は、Yのままリターンしてアップデートしてください。この手順を踏む場合はCtri+Cで一度処理を中止し、再度Expoでのテストを開始してください)。

› Using Expo Go
› Press s │ switch to development build

› Press a │ open Android
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› Press o │ open project code in your editor

› Press ? │ show all commands

　Android端末でExpoGoアプリが自動で起動し、ExpoGoアプリ内でBasupisuアプリが表示されます。
　端末上での表示を確認しながら、意図したアプリになるように調整します。

ネットワークエラー

　ExpoGoアプリでネットワークエラーが出る場合、トンネルモードで起動することで解決できる場合があります。

npx expo start --tunnel

ビルド🛠️⚙️🏗️

　アプリの調整が終わったら、ビルドを行います。ビルドには、Expo Application Services (EAS) CLIを使用します。

easの導入

　コマンドライン上で以下のコマンドを実行して、Expo Application Services (EAS) CLIをインストールします。

npm install -g eas-cli

Expoにログイン

　コマンドライン上で以下のコマンドを実行して、ログインします。Expoアカウントがない場合は新規作成します。

eas login

ビルドの設定

　プロジェクトのルートディレクトリに、eas.jsonというファイルを作成します。中身は以下のように設定します。

{
  "build": {
    "production": {
      "android": {
        "buildType": "apk" 
      }
    }
  }
}

　eas.jsonを変更することで、リリースビルドやデバッグの設定なども行うことができます。詳しくは、公式ドキュメントを参照してください。

ビルドの実行

　コマンドライン上で以下のコマンドを実行して、ビルドを実行します。

eas build -p android

　いくつか質問されるので、以下のように答えます(追加でGitの設定を求められる場合があります)。

PS C:\Users\UserName\Basupisu> eas build -p android
Loaded "env" configuration for the "production" profile: . Learn more: https://docs.expo.dev/build-reference/variables/

📝  Android application id Learn more: https://expo.fyi/android-package
√ What would you like your Android application id to be? ... com.company_name.basupisu
✔ Using remote Android credentials (Expo server)
√ Generate a new Android Keystore? ... yes
✔ Created keystore

Compressing project files and uploading to EAS Build. Learn more: https://expo.fyi/eas-build-archive
✔ Uploaded to EAS

　最後に表示されるBuild detailsのリンクから、ビルドの進捗を見ることができます。

ビルドしたapkファイルをダウンロード

　ビルド完了後、画面に表示されるリンクをクリックすると、ブラウザが開き、自動でダウンロードが始まります。

アプリをAndroid端末にインストール

　エクスプローラーを開き、Android端末上のフォルダにビルドしたアプリをコピーします。
　Android端末上でアプリをインストールします。

完成🎉

　インストールされたアプリを起動し、ExpoGoと同じように動いていれば完成です！

参考文献🔖

ダ鳥獣ギ画
https://www.figma.com (最終閲覧日：2024年8月27日)
Expo Docs
https://docs.expo.dev/guides/overview/ (最終閲覧日：2024年8月27日)