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

このチュートリアルでは、新しいAngularアプリを始めます。 Angular Angularアプリを新しく作り、Capacitorを使用してモバイルアプリに変換します。Capgo Native NavigationとTransitionsを追加すると、よりモバイルアプリのようになります。また、tailwind-capacitorを使用して安全なエリアを確保できます。

Capacitorは、AngularのWebアプリをモバイルアプリに変換するのを簡単にします。モバイルアプリに変換するには、React Nativeなどの新しいスキルを学ぶ必要はありません。

Angularアプリをモバイルアプリに変換するには、数ステップで実行できます。

このチュートリアルでは、Angularアプリの新しいプロジェクトから始めて、Capacitorを使用してネイティブモバイルアプリに移行するプロセスをガイドします。Capgo Native Navigation、Transitions、tailwind-capacitorを使用して安全なエリアも利用できます。

Capacitorについて

CapacitorJSはゲームチェンジャーです！あなたはあらゆるWebプロジェクトに容易に取り入れることができ、ネイティブWebビューにアプリケーションをwrapし、ネイティブXcodeとAndroid Studioプロジェクトを生成します。また、プラグインはカメラなどのネイティブデバイス機能へのアクセスを提供するJSブリッジも提供します。

Capacitorを使用すると、複雑なセットアップや急な学習カーブなしで素晴らしいネイティブモバイルアプリを取得できます。APIがスリムで機能性がstreamlinedなので、プロジェクトに簡単に統合できます。私に聞いてください、Capacitorを使用して完全に機能するネイティブアプリを実現するのはとても簡単です。

Angularアプリの準備

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

ng new my-app
cd my-app

「Angular」を選択してください。Angularのバージョンについて尋ねられます。

本地モバイルアプリを作成するには、Capacitorを使用してネイティブのモバイルアプリを作成する必要があります。 export export プロジェクトをエクスポートするには、package.jsonに含めるスクリプトを実行してください。 package.jsonのスクリプトを実行すると、Angularプロジェクトがエクスポートされます。

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

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

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

AngularアプリにCapacitorを追加する

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

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

Capacitor

最後に、プラットフォームを追加できます。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

この時点で、iOSとAndroidの両方のプロジェクトを観察することができているはずです。 iOS そして Android Angular プロジェクト内のフォルダ

プロジェクトのフォルダを見つけることができます。

実際のネイティブプロジェクトです! Androidプロジェクトにアクセスするには、Android Studioをインストールする必要があります。Android Studio Xcode.

Xcode capacitor.config.ts プロジェクト内にあるファイルは、Syncの際に使用される基本的なCapacitor設定を含んでいます。Syncの際に注目するのはこのファイルのみです。 webDirwebDir

、これは現在不正確です。 capacitor.config.json __CAPGO_KEEP_0__.config.json webDir:

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

ファイルを開き、

npm run build
npx cap sync

Syncを実行するには、以下のコマンドを実行してみてください。 npm run build Angularプロジェクトを単純にビルドし、静的ビルドをコピーします。 npx cap sync ウェブの code をすべて、ネイティブプラットフォームの適切な場所に同期するので、ウェブの code をアプリ内で表示できます。

__CAPGO_KEEP_0__ 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は、初めてこの手順を行う場合は、プロセスをガイドします。次に、実機に接続したデバイスでアプリを実行するには、上部でデバイスを選択し、再生ボタンをクリックするだけです。ここでは、例を示します。

xcode-run

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

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

Capacitor ライブリロード

あなたは、すべてのモダンフレームワークでホットリロードを利用しているので、良いニュースはあなたは同じ機能を利用できることを意味します。 モバイルデバイスで 最小限の手間で!

ローカルにホストされているアプリケーションにアクセスするためのライブリロードを有効にします。 ネットワーク上のデバイスで Capacitorアプリが特定のURLからコンテンツを読み込むようにすることによって。

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

ipconfig getifaddr en0

Windowsの場合、:

ipconfig

次に、IPv4アドレスを探します。

Capacitorをサーバーから直接アプリを読み込ませるように指示するには、ファイルに別のエントリを追加する必要があります。 capacitor.config.ts file:

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;

この例では、デフォルトのAngularポートを使用しています。 これらの変更を適用するには、nativeプロジェクトにコピーする必要があります。コマンドは

コマンドは

npx cap copy

The copy 最初のステップは、ローカルIPアドレスを調べることです。Macを使用している場合、ターミナルで次のコマンドを実行して、IPアドレスを確認できます。Windowsの場合、:次に、IPv4アドレスを探します。__CAPGO_KEEP_0__をサーバーから直接アプリを読み込ませるように指示するには、ファイルに別のエントリを追加する必要があります。正しいIPアドレスとポート番号を使用してください。この例では、デフォルトのAngularポートを使用しています。Now, we can apply these changes by copying them over to our native project: The command is similar to syncですが、変更は ウェブフォルダの変更をコピーするだけです。 設定ファイルも含めて、ネイティブプロジェクトを更新することなく。

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

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

Note that you should use the correct IP and port in your configuration. The code block above shows the default Angular port for demonstration purposes.

正しいIPアドレスとポート番号を使用する必要があります。上記のCapacitorブロックは、デモ用にデフォルトのAngularポートを示しています。

Capacitor プラグインの使用

npm i @capacitor/share

__CAPGO_KEEP_0__ プラグインの使用方法をご紹介します。ご存知のように、数回ご紹介しました。プラグインをインストールするには、以下のコマンドを実行してください。 Share プラグインですが、どちらにしてもネイティブの共有ダイアログが表示されます! これは、パッケージをインポートし、関連する関数を呼び出すだけです。したがって、src/app/app.component.tsを次のように変更してみましょう。 share() function からアプリに含まれるものを変更する ボタンをクリックすると、美しいネイティブの共有ダイアログが実行されます! to this:

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'
    });
  }
}

ネイティブのUI

npx cap sync

数年間、Ionicを使用してクロスプラットフォームアプリケーションを構築してきましたが、Angularと統合することはハック的で、既にAngularを使用している場合にはほとんど価値がありません。

Native-feeling UI with Capgo Native Navigation and Transitions

Native-feeling UI with __CAPGO_KEEP_0__ Native Navigation and Transitions Ionic Native-feeling UI with __CAPGO_KEEP_0__ Native Navigation and Transitions Angular + Tailwind CSS.

For a native mobile feel in an Angular + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

@capgo/capacitor-native-ナビゲーション —ネイティブのナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブラーされたタブバーのスタイル。Angularルータがルートの状態を保持し、プラグインがネイティブのChromeを管理します。
@capgo/capacitor-transitions —Ionicスタイルのページ遷移とiOSのエッジスワイプバックをWebViewレイヤーで実現します。IonicのUIを採用する必要はありません。

両方をインストールします。

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

ネイティブのナビゲーションをCSSのインセットモードで設定して、ウェブコンテンツがネイティブのバーを尊重します。

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Liquid Glassタブバーをレンダリングします。(iOSはシステムが所有するレンダリングを使用し、AndroidはブラーされたWebViewのバックグラウンドを使用します)

import { inject } from '@angular/core';
import { Router } from '@angular/router';

const router = inject(Router);

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.navigate([`/${id}`]);
});


Add native page transitions in your app shell:

```typescript
// app.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions';

initTransitions({ platform: 'auto' });

@Component({
  selector: 'app-root',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <cap-router-outlet #outlet platform="auto" swipe-gesture="auto">
      <router-outlet></router-outlet>
    </cap-router-outlet>
  `,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('outlet') outlet?: ElementRef<HTMLElement>;

  constructor(private router: Router) {}

  ngAfterViewInit() {
    if (this.outlet?.nativeElement) {
      setupRouterOutlet(this.outlet.nativeElement, { platform: 'auto', swipeGesture: 'auto' });
    }
  }

  openSettings() {
    setDirection('forward');
    this.router.navigate(['/settings']);
  }
}

ルーティングされたページを cap-router-outlet, cap-pageにラップします。 cap-content、および setDirection('forward') または setDirection('back') ナビゲーションする前に、

詳細なガイドを参照してください: Using @capgo/capacitor-native-navigation そして Using @capgo/capacitor-transitions.

安全なエリアにタイルウインド

デバイスの安全なエリアにタイルウインドCSSを使用する場合、 @capgo/Tailwind-capacitor (Capacitorネイティブとして tailwind-capacitor npmで公開されています。 safe-areas utilities とその他の Capacitor に対応した Tailwind プラグイン

bun add -D tailwind-capacitor

In src/styles.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

使用する pt-safe, pb-safe, そして px-safe 代わりに env(safe-area-inset-*) 手作業で散らかすのではなく GitHub に Pull Request を作成する.

__CAPGO_KEEP_0__

iOSレイアウトの問題を修正する (ビューポート、セーフエリア、水平オーバーフロー) overflow-x: hidden iOSでコンテンツが切り取られた、ずれた、または水平方向にスクロールできる場合、ビューポートタグを追加したり修正したりするだけでは問題を解決することはできません。順序に従ってこれらのチェックを実行してください。

ビューポートメタタグが正しく適用されていることを確認する

In src/index.htmlビューポートメタタグを <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

iOS セーフエリアを 1 つのルートラッパーからのみ管理する

1 つのアプリシェルを作成し、その中にセーフエリアのパディングを適用する — 複数のネストされたコンポーネントに適用するのではなく:

html,
body,
app-root {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

全ページコンテンツを以下にラップする .app-shell. 複数のヘッダー、モーダル、レイアウトラッパーにセーフエリアのパディングを複数回適用すると、UI がカットされたり大きすぎるように見えることがあります。

With @capgo/Tailwind-capacitorを使用して、同じパディングを表現できます。 pt-safe pb-safe px-safe __CAPGO_KEEP_0__ iOS

Set Capacitor iOS `contentInset` に設定します。 `never` 最初

イン capacitor.config.ts, 自然のインセットを無効にして CSS (またはネイティブナビゲーションの) contentInsetMode: 'css') がセーフエリアを管理する:

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'www',
  ios: {
    contentInset: 'never',
  },
};

Capacitor の自動コンテンツインセットと CSS のパディングを組み合わせると、一般的な原因の 1 つはダブルスペースです。 env(safe-area-inset-*) 実際にオーバーフローしている要素を見つける

通常の原因は、

, Tailwind 100vw, 固定ピクセル幅、または大きい w-screenSafari Web インスペクターで実行: min-width.

Tailwind の場合、

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

に置き換える w-screen を使用する w-full できる場合。多くの水平オーバーフロー問題は 100vw / w-screen、安全領域の余白の重複、または固定幅のコンテナ — 画面のビューポートのメタタグ自体からではない。

結論

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

そして、__CAPGO_KEEP_0__の追加により CapgoCapacitorを使用したAngularモバイルアプリでは、最新の機能やバグ修正をユーザーが常に利用できるようにするために、ライブアップデートを簡単に追加できます。

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

Keep going from Building Mobile Apps with Angular and Capacitor

あなたが__CAPGO_KEEP_0__をAngularアプリに追加する方法を学びたい場合は、次の記事を参照してください。 AngularとCapacitorを使用してモバイルアプリを構築する あなたが Using @capgo/capacitor-live-activities Capacitorのネイティブ機能を使用するために@capgo/capacitor-live-activities @capgo/capacitor-ライブアクティビティ Capacitorの実装詳細を使用するために@capgo/capacitor-live-activities Using @capgo/capacitor-video-player Capacitorのネイティブ機能を使用するために@capgo/capacitor-video-player Capacitorの実装詳細を使用するために@capgo/capacitor-video-player、 Capacitorのネイティブ機能を使用するためにUsing @capgo/capacitor-native-navigation Capacitorのネイティブ機能を使用するために@capgo/capacitor-native-navigation。 Capacitorのネイティブ機能の使用のために@capgo/capacitor-native-navigationを使用します。

AngularとCapacitorでモバイルアプリを作成する

Capacitorについて

Angularアプリの準備

AngularアプリにCapacitorを追加する

ネイティブアプリをビルドして配布

Capacitor ライブリロード

正しいIPアドレスとポート番号を使用する必要があります。上記のCapacitorブロックは、デモ用にデフォルトのAngularポートを示しています。

本来の感覚のあるUIとCapgoNativeナビゲーションとトランジション

安全なエリアにタイルウインド

__CAPGO_KEEP_0__

ビューポートメタタグが正しく適用されていることを確認する

iOS セーフエリアを 1 つのルートラッパーからのみ管理する

Set Capacitor iOS `contentInset` に設定します。 `never` 最初

通常の原因は、

結論

Keep going from Building Mobile Apps with Angular and Capacitor

AngularとCapacitorでモバイルアプリを作成する

Capacitorについて

Angularアプリの準備

AngularアプリにCapacitorを追加する

ネイティブアプリをビルドして配布

Capacitor ライブ リロード

正しいIPアドレスとポート番号を使用する必要があります。上記のCapacitorブロックは、デモ用にデフォルトのAngularポートを示しています。

本来の感覚のあるUIとCapgoNativeナビゲーションとトランジション

安全なエリアにタイルウインド

__CAPGO_KEEP_0__

ビュー ポートメタタグが正しく適用されていることを確認する

iOS セーフエリアを 1 つのルートラッパーからのみ管理する

Set Capacitor iOS contentInset に設定します。 never 最初

通常の原因は、

結論

Keep going from Building Mobile Apps with Angular and Capacitor

Capacitor ライブリロード

ビューポートメタタグが正しく適用されていることを確認する

Set Capacitor iOS `contentInset` に設定します。 `never` 最初