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

更新日

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

手順

• 準備
• 新プロジェクトの作成
• フレームワークの導入
• ネイティブ側のセットアップ
  • Xcode 側エントリポイントの作成
  • リソースディレクトリの作成
• 動作確認

注意

• 以下の説明はすべて 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 を入手します。
2. 入手した alier.xcframework フォルダを、作成したプロジェクトのルートディレクトリに置きます。
3. プロジェクト左側のサイドバーから、最上部にある「プロジェクト名」を押下します。
   • TARGETS で「プロジェクト名」を選択し、Frameworks,Libraries,and Embedded Content の項目の「+」ボタンを押下します。
4. 「Add Other...」セレクターから「Add Files...」を選択します。
5. alier.xcframework を選択し、「Open」ボタンを押下します。
6. プロジェクトのセットアップを行います。

セットアップ

エントリポイントの作成

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

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

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

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

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

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

app_res ディレクトリの作成

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

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

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

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

動作確認

• テスト実装

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

• アプリの実行

  • テスト実装で実装したアプリを実行します。

準備

• app_res ディレクトリ

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

• main.js ファイル

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

    export default async function main() {
        setupAlier();
    }

テスト実装

• app_res ディレクトリ　構成例

app_res/
└── main.js

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

アプリの実行

• Xcode で、（▶︎）ボタンを押下します。
• WebView 側のイベントやログは、Safari で確認できます。(WebViewインスペクタでの確認方法に詳細を記載しています。)

WebViewインスペクタでの確認方法

• iOS16.4以降では、WKWebViewのインスペクタを制御するプロパティを追加する必要があります。

  func webViewConfig(context: Context, webView: WKWebView) {
      //This code is required to inspect the WebView for Safari.
      if #available(iOS 16.4, *) {
          webView.isInspectable = true
      }
  }

• Safari を起動し、ツールバーから開発を選択します。

  • 接続している端末を選択し alier:/// を選択します。