Angular と Capacitor を使用したモバイルアプリの構築

このチュートリアルでは、新しい Angular アプリから始め、Capacitorを使用してネイティブモバイルアプリの領域に移行します。必要に応じて、モバイルUIを改善するために Konsta UI を追加することもできます。

Capacitorを使用すると、Angularウェブアプリケーションを大幅な変更やReact Nativeのような新しいスキルを学ぶことなく、簡単にネイティブモバイルアプリに変換できます。

ほんの数ステップで、ほとんどのAngularアプリケーションをモバイルアプリに変換することができます。

このチュートリアルでは、新しいAngularアプリから始め、次にCapacitorを組み込んでネイティブモバイルアプリの領域に移行する手順を説明します。さらに、モバイルUIをTailwind CSSで強化するために、必要に応じて Konsta UI を使用することもできます。

Capacitorについて

CapacitorJSはゲームチェンジャーです！それを任意のウェブプロジェクトに effortlessly 組み込むことができ、アプリケーションをネイティブWebViewにラップし、ネイティブのXcodeおよびAndroid Studioプロジェクトを生成します。さらに、そのプラグインを使用すると、JSブリッジを介してカメラなどのネイティブデバイス機能にアクセスできます。

Capacitorを使用すると、複雑なセットアップや急な学習曲線なしで驚くべきネイティブモバイルアプリが手に入ります。そのスリムなAPIと効率的な機能により、プロジェクトに統合するのも簡単です。私を信じてください、Capacitorで完全に機能するネイティブアプリを実現するのがどれほど簡単かに驚くことでしょう！

Angularアプリの準備

新しいAngularアプリを作成するには、次のコマンドを実行します：

ng new my-app
cd my-app

Angularのバージョンを尋ねられたら、「Angular」を選択します。

ネイティブモバイルアプリを作成するには、プロジェクトのexportが必要です。そこで、Angularプロジェクトをビルドおよびコピーするために利用できる簡単なスクリプトをpackage.jsonに追加しましょう：

{
  "scripts": {
    // ...
    "build": "ng build --prod"
  }
}

コマンド build を実行後、プロジェクトのルートに新しい dist フォルダが表示されるはずです。

このフォルダはCapacitorによって後で使用されますが、現在は正しく設定する必要があります。

AngularアプリにCapacitorを追加

任意のウェブアプリをネイティブモバイルコンテナにパッケージ化するには、いくつかの初期ステップに従う必要がありますが、その後は単に sync コマンドを実行するだけで済みます。

まず、Capacitor CLI を開発依存関係としてインストールし、プロジェクト内でセットアップします。セットアップ中に、名前とバンドルIDのデフォルト値を受け入れるために「Enter」を押すことができます。

次に、コアパッケージとiOSおよびAndroidプラットフォームに関連するパッケージをインストールする必要があります。

最後にプラットフォームを追加すると、Capacitorがプロジェクトのルートに各プラットフォームのフォルダを作成します：

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Angular project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

この時点で、Angularプロジェクトに新しいiosおよびandroidフォルダが表示されているはずです。

それは本物のネイティブプロジェクトです！

後でAndroidプロジェクトにアクセスするには、Android Studioをインストールする必要があります。iOSの場合、Macが必要で、Xcodeをインストールする必要があります。

さらに、プロジェクトには、同期中に使用される基本的なCapacitor設定が含まれているcapacitor.config.tsファイルが見つかるはずです。注意すべき唯一のことは、webDirで、ビルドコマンドの結果を指す必要があります。現在、これは不正確です。

これを修正するには、capacitor.config.jsonファイルを開いてwebDirを更新します：

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

次のコマンドを実行して試すことができます：

npm run build
npx cap sync

最初のコマンド npm run build は、Angularプロジェクトを単にビルドして静的ビルドをコピーし、2番目のコマンド npx cap sync は、全てのウェブコードをネイティブプラットフォームの正しい場所に同期させて、アプリに表示できるようにします。

さらに、syncコマンドはネイティブプラットフォームを更新し、プラグインをインストールする場合があるので、新しいCapacitorプラグインをインストールした場合は、再度 npx cap sync を実行する必要があります。

いつの間にか、実際に完了しているので、デバイス上でアプリを見てみましょう！

ネイティブアプリをビルドしてデプロイ

iOSアプリを開発するには、Xcodeがインストールされている必要があり、Androidアプリの場合はAndroid Studioがインストールされている必要があります。さらに、アプリをアプリストアで配布する予定がある場合は、iOS用のApple Developer ProgramとAndroid用のGoogle Play Consoleに登録する必要があります。

ネイティブモバイル開発が初めての方は、Capacitor CLIを使用して両方のネイティブプロジェクトを簡単に開くことができます：

npx cap open ios
npx cap open android

ネイティブプロジェクトの設定が完了すると、接続されたデバイスにアプリをデプロイするのは簡単です。Android Studioでは、すべてが準備が整うのを待ち、設定を変更することなく接続されたデバイスにアプリをデプロイできます。以下が例です：

android-studio-run

Xcodeでは、実際のデバイスにアプリをデプロイするために署名アカウントを設定する必要があります。シミュレーターではなく、実際のデバイスです。これをまだ行ったことがない場合、Xcodeはその手順をガイドします（ただし、再度、Developer Programに登録している必要があります）。その後、単に再生ボタンを押して、接続されたデバイス上でアプリを実行できます。以下が例です：

xcode-run

おめでとうございます！ Angularウェブアプリをモバイルデバイスに正常にデプロイしました。以下が例です：

しかし、待ってください、開発中にこれを行うためのより早い方法もあります…

Capacitorライブリロード

今や、最新のフレームワークとともにホットリロードの使用に慣れていると思いますが、良いニュースは、 モバイルデバイスで 最小限の努力で同様の機能を手に入れることができるということです！

Capacitorアプリに特定のURLからの内容をロードさせることで、ライブリロードのためにローカルホストのアプリケーションへのアクセスを有効にします。

最初のステップは、ローカルIPアドレスを特定することです。Macを使用している場合、次のコマンドをターミナルで実行することでこれを見つけることができます：

ipconfig getifaddr en0

Windowsの場合、次のコマンドを実行します：

ipconfig

その後、IPv4アドレスを探します。

Capacitorにサーバーからアプリを直接ロードさせるために、capacitor.config.tsファイルに別のエントリを追加できます：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:4200',
    cleartext: true
  }
};

export default config;

正しいIPとポートを使用してください。私はこの例でデフォルトのAngularポートを使用しました。

これで、これらの変更をネイティブプロジェクトにコピーして適用できます：

npx cap copy

copyコマンドはsyncに似ていますが、 ウェブフォルダおよび設定に対する変更をコピーするだけで、ネイティブプロジェクトを更新することはありません。

これで、もう一度Android StudioやXcodeを通じてアプリをデプロイできます。その後、Angularアプリ内で何かを変更すると、 アプリが自動的にリロードして変更を表示します！

注意しておくべき点は、カメラなどの新しいプラグインをインストールすると、それでもネイティブプロジェクトの再ビルドが必要になります。これは、ネイティブファイルが変更されているためであり、リアルタイムではできません。

構成内で正しいIPとポートを使用する必要があります。上記のコードブロックは、デモ目的でデフォルトのAngularポートを示しています。

Capacitorプラグインの使用

これまでの何度か言及したCapacitorプラグインを実際に使用する方法を見てみましょう。これを行うには、次のコマンドを実行して比較的シンプルなプラグインをインストールできます：

npm i @capacitor/share

Shareプラグインは特別なものではありませんが、それでもネイティブ共有ダイアログを表示します！これには、パッケージをインポートし、アプリから対応する share() 関数を呼び出すだけで済みます。したがって、src/app/app.component.tsを次のように変更しましょう：

import { Component } from '@angular/core';
import { Share } from '@capacitor/share';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'my-app';

  async share() {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends'
    });
  }
}

前述のように、新しいプラグインをインストールする際は、sync操作を実行し、その後でアプリをデバイスに再デプロイする必要があります。これを行うには、次のコマンドを実行します：

npx cap sync

ボタンを押すと、美しいネイティブ共有ダイアログが動作しているのを目にすることができます！

Konsta UIを追加

Nuxt 3アプリでKonsta UIを使用するには、tailwindをすでにインストール済みにする必要があり、パッケージをインストールします：

npm i konsta

さらに、tailwind.config.jsファイルを修正する必要があります：

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './src/**/*.{html,ts}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfigは、Konsta UIに必要な追加のバリアントとヘルパーユーティリティを用いてデフォルトの（またはカスタムの）Tailwind CSS設定を拡張します。

次に、いくつかのグローバルパラメータ（themeなど）を設定できるように、メインのAppコンポーネントを設定する必要があります。

src/app/app.component.html内で、アプリ全体をAppでラップする必要があります：

<app>
  <h1>Welcome to Angular and Capacitor!</h1>
  <button (click)="share()">Share now!</button>
</app>

サンプルページ

すべてが設定されたら、AngularページでKonsta UI Vueコンポーネントを使用できます。

たとえば、src/app/app.component.htmlを開き、次のように変更します：

<app>
  <page>
    <navbar title="My App" />

    <block strong>
      <p>
        Here is your Angular & Konsta UI app. Let's see what we have here.
      </p>
    </block>
    <block-title>Navigation</block-title>
    <list>
      <list-item href="/about/" title="About" />
      <list-item href="/form/" title="Form" />
    </list>

    <block strong class="flex space-x-4">
      <button>Button 1</button>
      <button>Button 2</button>
    </block>
  </page>
</app>

すべての必要なコンポーネントをインストールした後、ライブリロードが同期しなくなった場合は、すべてを再起動してみてください。それを行った後、AngularとCapacitorで構築されたややネイティブな外観のモバイルアプリを見ることができるはずです！

結果として次のページが表示されるはずです：

結論

Capacitorは、既存のウェブプロジェクトに基づいてネイティブアプリケーションを構築するための優れたオプションであり、コードを共有し、一貫したUIを維持するための簡単な方法を提供します。

さらに、Capgoの追加により、アプリにライブ更新を追加することがさらに簡単になり、ユーザーは常に最新の機能とバグ修正にアクセスできるようになります。

AngularアプリにCapgoを追加する方法を学びたい場合は、次の記事を参照してください：