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

更新日

  • 2025/01/06
  • 2024/12/24

手順

注意

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

iOS 側 開発環境

  • Xcode: （リファレンス記載時点でのバージョン：Version 15.2）
  • JavaScript 層の開発に使用する開発ツール（VScode など）

準備

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

新プロジェクトの作成

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

作成手順

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

フレームワークの導入

導入手順

  1. alier.xcframework を入手します。
    1. で入手した alier.xcframework フォルダを作成したプロジェクトのルートディレクトリに置きます。
  3. プロジェクト左側のサイドバーから、最上部にある「プロジェクト名」を押下します。
    • TARGETS で「プロジェクト名」を選択し、Frameworks,Libraries,and Embedded Content の項目の「+」ボタンを押下します。 フレームワークの導入場所
  4. 「Add Other...」セレクターから「Add Files...」を選択します。 フレームワークの選択方法
  5. alier.xcframework を選択し、「Open」ボタンを押下します。 フレームワークの導入
  6. プロジェクトのセットアップを行います。

セットアップ

エントリポイントの作成

    • プロジェクト左側のサイドバーからプロジェクト名のディレクトリ上で右クリックします。
    • 「New File...」を選択します。
    • 「Swift File」を選択し、任意のファイル名を入力後「create」ボタンを押下します。 ファイルの作成_1 ファイルの作成_2

  2. 作成したファイルにおける実装内容

    • Alier モジュールを import します。
    • MainActivityDelegate を継承した構造体を定義します。 MainActivityDelegate を継承

  3. @main が付与されており、かつ App を継承した構造体の WindowGroup 内で、「2. 作成したファイルにおける実装内容」で定義した構造体のインスタンスを生成します。 構造体インスタンスの生成

  • プロジェクト生成時に、「ContentView.swift」ファイルが自動生成されますが、Alier では基本的に使用しないため削除しても問題ありません。

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

app_res ディレクトリの作成

  1. app_res ディレクトリを任意の場所に作成します。

    • app_res ディレクトリは、Android でも参照することになるため、なるべく両者から参照しやすい位置に作成します。

  2. 「app_res ディレクトリ」を Xcode プロジェクト左側のサイドバー内に表示されている「プロジェクト名」のフォルダの直下（画像では HelloWorld のフォルダアイコンの直下）にドラッグ&ドロップします。 app_res の導入_1

  3. Create folder references を選択し、「Finish」ボタンを押下します。 app_res の導入_2

動作確認

  • テスト実装

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

  • アプリの実行

準備

  • app_res ディレクトリ

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

  • main.js ファイル

    • アプリケーションの起点となるファイルです。
    • app_res の直下に配置する必要があります。
    • このファイル内に async main() 関数を実装する必要があります。

テスト実装

  • app_res ディレクトリ　構成例
app_res/
└── main.js
  • main.js 実装例
Object.assign(window, await Alier.import("/alier_sys/AlierFramework.js"));

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!"
            }
        });
    }
}

アプリの実行

  • Xcode で、（▶︎）ボタンを押下します。
  • WebView 側のイベントやログは、Safari で確認できます。
  • Safari を起動し、ツールバーから開発を選択します。
    • 接続している端末を選択し __base.html を選択します。