Android アプリをセットアップする

更新日

  • 2025/09/01
  • 2025/07/22
  • 2025/01/06
  • 2024/12/24

手順

注意

  • 以下の説明はすべて Mac 環境での導入手順 を基に記載しています。Windows 環境では一部手順や挙動が異なる場合がありますので、あらかじめご了承ください。

Android 側 開発環境

  • AndroidStudio:（リファレンス記載時点でのバージョン）Android Studio Jellyfish | 2023.3.1 Patch 1
  • JavaScript 側の開発に使用する開発ツール（VScode など）

準備

  1. Android Studio を導入します。
  2. alier で mobile アプリを開発するために必要なディレクトリおよびファイルを用意します。
    • assets ディレクトリ:
      • Android Studio で用意することになるディレクトリです。
      • Android プロジェクト内に必要になります。
      • app_res ディレクトリを格納するために使用します。
    • app_res ディレクトリ:
      • alier を用いた mobile アプリケーションがリソースを参照するためのディレクトリです。
      • 任意の場所に作成可能です。
      • JS 側のプロジェクトで利用するファイルを格納するために使用します。(JavaScript/CSS/HTML/XML など)
    • main.js ファイル:
      • 必須ファイル： alier の起点となるファイルです。必ず作成してください。
      • app_res ディレクトリの直下に配置する必要があります。
      • このファイル内に async main()関数を実装する必要があります。
      • JavaScript 側のエントリポイントとなるファイルであり、その中に定義した main 関数を alier 側が呼び出すことになります。

新プロジェクトの作成

  • プロジェクトの作成、フレームワークの導入は Android Studio を利用します。

作成手順

  1. Android Studio を起動します。
  2. 「new project」を選択します。 プロジェクトの選択
  3. プロジェクトの種類の選択：「No Activity」を選択します。 プロジェクトの種類を選択
  4. 必要に応じて各項目に入力を行い、「finish」ボタンを押下します。 プロジェクトの設定
  5. フレームワークの導入を行います。

フレームワークの導入

導入手順

note

alier の Android 向けライブラリは Maven Central Repository に公開されています。

必要に応じてbuild.gradleファイル内のrepositoriesブロックにmavenCentral()を指定してください。

repositories {
    mavenCentral()
}
    • 作成したプロジェクトを開き、Android Studioの左ペイン「Project」から「Gradle Scripts」以下、モジュールレベル（デフォルトではModule :app）のbuild.gradleファイルを開きます。
    • dependenciesブロックへ次のように定義を追加します。
      dependencies{
    implementation 'com.suredesigns:alier:0.4.0'
    ...（省略）
}
      dependencies{
    implementation("com.suredesigns:alier:0.4.0")
    ...（省略）
}

    build.gradle の編集

  2. プロジェクトのセットアップを行います。

セットアップ

エントリポイントの作成

メインとなる Activity クラスの用意

    • Android Studio の左側のサイドバーから「App」ディレクトリを選択します。
    • 「App」ディレクトリ配下の「Kotlin+Java」ディレクトリの com.~. プロジェクト名ディレクトリ上で右クリックします。
    • New にカーソルを合わせて、「Kotlin Class/File」を選択し任意のファイル名を入力してファイルを作成します。 Activity クラスの作成_1 Activity クラスの作成_2

  2. 作成したファイルにデフォルトでクラスが実装されいるのでそのクラスに対して、BaseMainActivity クラスを継承します。

    • com.suredesigns.alier.BaseMainActivity を import する必要がありますが、赤文字で表記された BaseMainActivity にカーソルを合わせて「option+Enter」で import が可能です。
    import com.suredesigns.alier.BaseMainActivity

//Android側のエントリポイントとなるクラスにBaseMainActivityを継承します。
class MainActivity: BaseMainActivity() {
}

    Activity クラスの作成_3

AndroidManifest.xml のセットアップ

  • AndroidManifest.xml にて、エントリポイントの指定を行います。

  1. Android Studio の左側のサイドバーから「App」ディレクトリ配下の「manifests」ディレクトリ内の AndroidManifest.xml ファイルを開きます。

  2. Application タグの配下 (<application></application> 内)に以下のタグを追加します。

    <activity android:name=".作成したActivityクラス名"
    android:exported="true"
    tools:ignore="Instantiatable">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
    <intent-filter>
        <data android:scheme="operation_verification" />
        <action android:name="android.intent.action.VIEW" />
        <action android:name="android.intent.action.SEND"/>
        <action android:name="com.google.android.gms.actions.CREATE_NOTE" />

        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <data android:scheme="http" />
        <data android:scheme="https" />
        <data android:scheme="alier-dev" />
    </intent-filter>
</activity>

    manifest の定義

リソースディレクトリの作成

assets ディレクトリの作成

  1. プロジェクト内に「assets」ディレクトリを作成します。
    • Android Studio の左側のサイドバーで「app」を選択した状態で右クリックします。
    • 「New」にカーソルを合わせて、「Folder > assets Folder」を選択します。
    • 「Target Source Set」が main になっていることを確認します。
    • ok ボタンを押下すると「assets」ディレクトリが追加されます。 asset ディレクトリの作成

app_res ディレクトリの作成

  1. app_res ディレクトリを任意の場所に作成します。
    • app_res ディレクトリは、iOS でも参照することになるため、なるべく両者から参照しやすい位置に作成して下さい。
  2. app_res ディレクトリを参照できるように Gradle(build.gradle :app)でパスを指定し、Gradle ファイルをプロジェクトに Sync し更新を行って下さい。(Gradle ファイル変更時に、「Sync Now」と表示されるのでそれを押下することで更新が可能です。)
    • android{} 内に、sourceSets と syncAppRes タスクを追加します。syncAppRes で指定する app_res の場所は JS ファイルが置かれている任意の場所を指定します。
    • 注意：「.gradle」か「.kts」かで記述方式が異なります。
android {
    ...（省略）

    sourceSets {
        main {
            assets.srcDirs += layout.buildDirectory.dir('extra-assets')
        }
    }
}

tasks.register('syncAppRes', Sync) {
    from layout.projectDirectory.dir('../../app_res')  // app_res の場所を指定
    into layout.buildDirectory.dir('extra-assets/app_res')
}

tasks.named('preBuild') {
    dependsOn(
        'syncAppRes'
    )
}
android {
    ...（省略）

    sourceSets {
        getByName("main") {
            assets.srcDirs(layout.buildDirectory.dir("extra-assets"))
        }
    }
}

tasks.register<Sync>("syncAppRes") {
    from(layout.projectDirectory.dir("../../app_res"))  // app_res の場所を指定
    into(layout.buildDirectory.dir("extra-assets/app_res"))
}

tasks.named("preBuild") {
    dependsOn(
        "syncAppRes"
    )
}

サンプル画像は「.gradle」の場合です。

gradle での参照設定

動作確認

  • テスト実装

    • 環境セットアップ後の動作確認として「Hello, alier!」というテキストを表示するアプリケーションを実装します。(iOS 側共通)
    • この実装の解説はLearn Alierに記載しています。

  • アプリの実行

準備

  • app_res ディレクトリ

    • このディレクトリ内に、JavaScript ファイル, HTML ファイル, 必要であれば CSS ファイルなどを配置します。

  • main.js ファイル

    • アプリケーションの起点となるファイルです。
    • app_res の直下に配置する必要があります。
    • アプリのエントリーポイントとなる非同期関数をデフォルトエクスポートしてください。
      export default async function main() {
    setupAlier();
}

テスト実装

  • main.js 実装例
Object.assign(window, await import("/alier_sys/AlierFramework.js"));
export default async function main() {
    setupAlier();
    Alier.View.attach(new Hello());
}
class Hello extends ViewLogic {
    constructor() {
        super();
        // container
        const container = `
          <alier-container>
            <input type="button" id="button" value="ボタン" data-ui-component data-active-events="click"/>
            <div id="comment" data-ui-component></div>
          </alier-container>
        `;
        // load html
        this.relateElements(
            this.collectElements(
                this.loadContainer({ text: container })
            )
        );
    }
    async messageHandler(msg) {
        return await msg.deliver({
            button: msg => {
                // commentにhello alierを挿入する
                this.comment.innerText = "Hello, alier!"
            }
        });
    }
}

アプリの実行

  • Android Studio で、「run app」ボタン（▶︎）を押下します。 ビルドボタン

  • WebView 側のイベントやログは、chrome で確認できます。以下のリンクで起動しているデバイスを選択して検索してください。

    chrome://inspect/#devices