CapacitorとAngularでモバイルアプリを構築する

このチュートリアルでは、まず新しい Angular アプリから始め、Capacitorを使用してネイティブモバイルアプリの世界に進みます。オプションで、__CAPGO_KEEP_0__に代わって Konsta UI

Capacitor allows you to easily convert your Angular web application into a native mobile app without requiring significant modifications or learning a new skill like React Native.

__CAPGO_KEEP_0__は、React Nativeなどの新しいスキルを学ぶことなく、AngularのWebアプリケーションをネイティブモバイルアプリケーションに簡単に変換できるようにします。

This tutorial will guide you through the process, starting with a new Angular app and then incorporating Capacitor to move into the realm of native mobile apps. Additionally, you can optionally use このチュートリアルでは、まず新しいAngularアプリから始め、__CAPGO_KEEP_0__を使用してネイティブモバイルアプリの世界に進みます。オプションで、__CAPGO_KEEP_0__に代わって

About Capacitor

を使用して、Tailwind CSSで改善されたモバイルUIを追加することもできます。

With Capacitor, Capacitorの素晴らしいネイティブモバイルアプリを手軽に作成できます。複雑なセットアップや急な勉強のカーブは必要ありません。APIが細く、機能がスリムで、プロジェクトに簡単に組み込むことができます。私に任せると、Capacitorで完全に機能するネイティブアプリを作成するのはとても簡単です。

Angularアプリの準備

新しいAngularアプリを作成するには、以下のコマンドを実行してください。

ng new my-app
cd my-app

「Angular」をAngularのバージョンについて質問されたときに選択してください。

ネイティブモバイルアプリを作成するには、プロジェクトの export が必要です。したがって、プロジェクトの package.json に簡単なスクリプトを含めましょう。プロジェクトをビルドしてコピーすることができます。

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

コマンドを実行した後、プロジェクトのルートディレクトリに新しい buildfolder dist が見つかります。

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

Adding Capacitor to Your Angular App

nativeモバイルコンテナに任意のWebアプリをパッケージ化するには、最初のいくつかのステップを実行する必要がありますが、その後は単一のコマンドを実行するだけです。 sync 最初に、Capacitorを開発依存モジュールとしてインストールし、プロジェクト内で設定することができます。セットアップ中は、名前とバンドルIDのデフォルト値を承認するには「Enter」を押すことができます。

次に、iOSとAndroidプラットフォームの関連パッケージとコアパッケージをインストールする必要があります。 Capacitor CLI この時点で、iOSとAndroidのフォルダを観察することができます。

ios

Finally, we can add the platforms, and Capacitor will create folders for each platform at the root of our project:

# 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

android ios and android Angularプロジェクト内のフォルダ。

実際のネイティブプロジェクトです!

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

Xcode capacitor.config.ts file in your project, which contains some fundamental Capacitor settings utilized during the sync. The only thing you need to pay attention to is the __CAPGO_KEEP_0__.config.tsファイルを見つける必要があります。これには、Syncの際に使用される基本的な設定が含まれます。注目すべきは、

この問題を解決するには、 capacitor.config.json ファイルを開いて、 __CAPGO_KEEP_0__:

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

を更新してください。

npm run build
npx cap sync

以下のコマンドを実行してみましょう。 npm run build 最初のコマンド npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.

2 番目のコマンドは、すべての Web Capacitor をネイティブプラットフォームの正しい場所に同步します。ネイティブプラットフォームを更新し、プラグインをインストールする可能性があるため、 npx cap sync 新しい__CAPGO_KEEP_0__ プラグインをインストールした場合、もう一度実行してください。

気づかないうちに、実際には完了しているので、デバイス上のアプリを確認してみましょう。

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

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はプロセスを案内します (ただし、再び開発者プログラムに登録する必要があります)。その後、簡単にプレイをクリックして、デバイスにアプリを実行できます。デバイスを選択するには、上部に移動してください。ここに例があります。

xcode-run

成功でした！AngularのWebアプリをモバイルデバイスにデプロイしました。ここでは例を示します。

しかし、開発中にはもっと速い方法があります…

Capacitor Live Reload

あなたはもう、すべての現代的なフレームワークでホットリロードを利用しているので、良いニュースはあなたは同じ機能を モバイルデバイスに 最小限の努力で利用できることです。

ローカルにホストされているアプリケーションへのアクセスを有効にする ネットワーク上 で、Capacitor アプリが特定のURLからコンテンツを読み込むようにすることによって

最初のステップは、ローカルIPアドレスを調べることです。Macを使用している場合、ターミナルで次のコマンドを実行してください。

ipconfig getifaddr en0

Windowsを使用している場合、コマンドを実行してください：

ipconfig

IPv4アドレスを探してください。

Capacitorにアプリを直接サーバーから読み込ませるように指示することができます。これを行うには、web.configファイルに別のエントリを追加する必要があります。 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ポートを使用しています。これらの変更を適用するには、webフォルダと設定のみを含むnativeプロジェクトにコピーする必要があります。

コマンドは

npx cap copy

と似ていますが、nativeプロジェクトを更新せずにwebフォルダと設定のみをコピーするように指示します。 copy targetLanguage syncprotectedTokens texts translations

Android Studio または Xcode を使用してアプリをもう一度デプロイできます。 Angular アプリに何か変更した場合、 アプリは自動的に再読み込みされ、変更が表示されます。

注意してください。 新しいプラグインをインストールした場合 (例: カメラ)、ネイティブプロジェクトを再構築する必要があります。これは、ネイティブファイルが変更されたため、オンザフライで行うことはできません。

code ブロックの 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設定を拡張する必要があります。

次に、メイン設定を設定する必要があります App __CAPGO_KEEP_0__のコンポーネントを使用して、グローバルパラメータを設定できます (例えば theme).

必要なすべてのコンポーネントをインストールした後、ライブリロードが同期されていない場合は、すべてを再起動してみてください。そうすると、Angularと__CAPGO_KEEP_0__で構築されたモバイルアプリケーションを視覚化できます。 App 必要なすべてのコンポーネントをインストールした後、ライブリロードが同期されていない場合は、すべてを再起動してみてください。 src/app/app.component.html:

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

konsta-angular

Example Page

Konsta UI VueコンポーネントをAngularページに使用することができます。 src/app/app.component.html Konsta UI VueコンポーネントをAngularページに使用することができます。

<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>

If the live reload is out of sync after installing all the necessary components, try restarting everything. Once you have done that, you should see a mobile app with a somewhat native look, built with Angular and Capacitor!

Konsta UI VueコンポーネントをAngularページに使用することができます。

Conclusion

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

そして、__CAPGO_KEEP_0__の追加により、最新の機能やバグ修正をユーザーが常にアクセスできるようにするために、ライブ更新をアプリに追加することが容易になりました。 CapgoをAngularアプリに追加する方法を学びたい場合は、次の記事を参照してください。Building Mobile Apps with Angularと__CAPGO_KEEP_0__から続けて進んでください。

Building Mobile Apps with AngularとCapgoを使用してネイティブメディアとインターフェイスの動作を計画している場合、Capgo/__CAPGO_KEEP_1__-live-activitiesを接続してください。

Capacitor/__CAPGO_KEEP_1-live-activitiesを使用してネイティブ機能を実装する場合、@Capacitor/CAPGO_KEEP_1__-live-activitiesを使用してください。

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities Capacitor __CAPGO_KEEP_1__ Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities @capgo/capacitor-live-activitiesの実装詳細について @capgo/capacitor-video-playerを使用 @capgo/capacitor-video-playerのネイティブ機能について @capgo/capacitor-video-player @capgo/capacitor-video-playerの実装詳細について、そして @capgo/capacitor-native-navigationを使用 @capgo/capacitor-native-navigationのネイティブ機能について

AngularとCapacitorでモバイルアプリを構築する