メインコンテンツにジャンプ
Capgoロゴ
Tutorial

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

Angular、Capacitor、およびCapgoネイティブナビゲーション、トランジション、iOSレイアウトのベストプラクティスを学びましょう。

マーティン・ドナディュー

マーティン・ドナディュー

コンテンツマーケター
AngularアプリとCapacitorでモバイルアプリを構築する

このチュートリアルでは、Angularアプリの新しいプロジェクトから始め、__CAPGO_KEEP_0__を使用してネイティブモバイルアプリの世界に移行します。__CAPGO_KEEP_1__ネイティブナビゲーションとトランジションを追加してネイティブモバイルのフィールを実現し、安全なエリアを確保するためにtailwind-__CAPGO_KEEP_2__を使用することもできます。 __CAPGO_KEEP_0__は、React Nativeのような新しいスキルを学ぶことなく、AngularのWebアプリケーションをネイティブモバイルアプリケーションに簡単に変換できるようにします。 app and transition into the native mobile app realm using Capacitor. You can also add Capgo Native Navigation and Transitions for a native mobile feel, and use tailwind-capacitor for safe areas.

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.

Angularアプリケーションを簡単な手順で、ほとんどの場合、モバイルアプリケーションに変換できます。

このチュートリアルでは、Angularアプリケーションを新しく作成し、次にCapacitorを取り入れて、ネイティブモバイルアプリケーションに進むプロセスを指示します。CapgoNative Navigation、Transitions、tailwind-capacitorの安全なエリアも使用できます。

Capacitorについて

CapacitorJSはゲームチェンジャーです! どのWebプロジェクトでも容易に取り入れて、ネイティブWebviewにアプリケーションを包み、ネイティブXcodeとAndroid Studioプロジェクトを自動生成します。さらに、プラグインはJSブリッジを介してカメラなどのネイティブデバイス機能にアクセスできます。

Capacitorを使用すると、複雑なセットアップや急な学習曲線なしで素晴らしいネイティブモバイルアプリケーションを取得できます。APIがスリムで機能性がstreamlinedなので、プロジェクトに簡単に取り入れることができます。私に任せると、Capacitorで完全に機能するネイティブアプリを実現するのは驚くほど簡単です。

Angularアプリケーションを準備する

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

ng new my-app
cd my-app

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

ネイティブモバイルアプリケーションを作成するには、プロジェクトの export が必要です。したがって、package.jsonに簡単なスクリプトを含めましょう。 export that can be utilized to build and copy the Angular project:

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

After executing the command build、新しい dist フォルダがプロジェクトのルートに表示されます。

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

Adding Capacitor to Your Angular App

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

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

__CAPGO_KEEP_0__

最後に、プラットフォームを追加できます。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.config.ts Capacitor.config.ts プロジェクト内にあるファイルであり、Syncの際に使用される基本的な__CAPGO_KEEP_0__設定が含まれています。Syncの際に注意する必要があるのはwebDir

が正しく設定されていないため、現在は不正確です。 capacitor.config.json __CAPGO_KEEP_0__.config.json ファイルを開き、:

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

webDir

npm run build
npx cap sync

を更新してください。 npm run build 以下のコマンドを実行して確認してみてください。 npx cap sync 最初のコマンドは、Angularプロジェクトをビルドし、静的ビルドをコピーするだけですが、2番目のコマンドは、Webcodeをネイティブプラットフォームの正しい場所にSyncし、表示するアプリケーションに表示することができます。

さらに、同期コマンドはネイティブプラットフォームを更新し、プラグインをインストールする可能性があるため、__CAPGO_KEEP_0__ プラグインをインストールしたときに、ネイティブプロジェクトを再度実行する必要がある。 Capacitor プラグイン もう一度実行する時が来た。 npx cap sync 気づかなければならないことは、実際にはもう終わりであることである。

デバイスでアプリを表示してみよう。

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

iOSアプリを開発するには、Xcodeがインストールされている必要があり、Androidアプリを開発するには、Android Studioがインストールされている必要がある。また、App Storeでアプリを配布する場合、iOSではApple Developer Programに登録し、AndroidではGoogle Play Consoleに登録する必要がある。 ネイティブモバイル開発に新人である場合、__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ を使用して、両方のネイティブプロジェクトを簡単に開くことができる。 Xcode Android Studio Apple Developer Program

If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:

npx cap open ios
npx cap open android

nativeプロジェクトを設定した後、接続デバイスにアプリをデプロイするのは簡単です。Android Studioでは、設定を変更することなく、すべてが準備できたときに、接続デバイスにアプリをデプロイできます。例えば、

android-studio-run

Xcodeでは、実機にアプリをデプロイするには署名アカウントを設定する必要があります。ただし、シミュレータにのみデプロイする場合は設定する必要はありません。開発者プログラムに登録されている場合、Xcodeはこのプロセスをガイドします。次に、実機にアプリをデプロイするには、上部で接続デバイスを選択し、再生ボタンをクリックするだけです。例えば、

xcode-run

Angular Webアプリをモバイルデバイスにデプロイすることに成功しました。例えば、

angular-mobile-app

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

Capacitor Live Reload

ここまで来たら、すべてのモダンフレームワークでホットリロードを利用しているので、同じ機能をモバイルデバイスでも利用できることを知っておきましょう。 モバイルデバイス上で 最小限の手間で

ローカルホストのアプリケーションにアクセスすることができます。Live Reloadを有効にします。 あなたのネットワーク上で 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 ポートを使用しています。これらの変更を適用するには、native プロジェクトにコピーする必要があります。

The

npx cap copy

The copy コマンドは、 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

このプラグインには特別な機能はありませんが、native share dialogを呼び出すことができます。 共有プラグインしかし、native share dialogを呼び出すことができます。 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

このコマンドを実行してください。

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

次に、iOSとAndroidでnativeなUIを実現するためにCapgoナビゲーションとトランジションを使用し、水平オーバーフローまたは安全な領域がカットされるiOSの一般的なレイアウト問題を修正できます。

nativeなUIと__CAPGO_KEEP_0__ Native Navigation and Transitions 私は数年間、Ionicと一緒に仕事をしてきました To AngularアプリにCapacitorを組み込むことはハック的で、すでに持っている場合にあまり価値があることはまれです。 Tailwind CSS.

Angular + Capacitor アプリでネイティブモバイルのフィールを得るには、WebのみのUIキットのようなKonsta UIではなく、Capgo プラグインを使用することをお勧めします。

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

両方をインストールしてください。

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

ネイティブのナビゲーションをCSSのインセットモードで設定してください。Webコンテンツはネイティブのバーを尊重するようにしてください。

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

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

液体ガラスのタブバーをレンダリングしてください (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.

セーフエリアのTailwind

Tailwind CSSのデバイスセーフエリアを使用するには @capgo/tailwind-capacitor (__CAPGO_KEEP_0__として出版されました) tailwind-capacitor on npm). It provides safe-areas ユーティリティやその他のCapacitor対応のTailwindプラグイン:

bun add -D tailwind-capacitor

In src/styles.css:

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

Useユーティリティとして pt-safe, pb-safe, px-safe の代わりに env(safe-area-inset-*) の手作業で open a PR on GitHub.

__CAPGO_KEEP_0__にPRを開く

iOSレイアウトの修正 (ビュー ポート、セーフ エリア、水平オーバーフロー) overflow-x: hidden iOSでコンテンツが切り取られた、ずれた、または水平方向にスクロールできるように見えている場合、

またはビュー ポートタグを調整するだけでは通常解決されません。順序に従ってこれらのチェックを実行してください。

ビュー ポートメタタグが正しく適用されていることを確認してください 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 がカットされたり大きすぎるように見えることがよくあります。

Capacitor または @__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ を使用することで、 @capgo/tailwind-capacitor1 つのシェルに iOS のセーフエリアを設定する pt-safe pb-safe px-safe 最初に設定する

Set Capacitor iOS contentInset セーフエリア never セーフエリア

In capacitor.config.ts, native inset を無効にして CSS (または Native Navigation の) contentInsetMode: 'css'を使用して安全エリアを管理すること:

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

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) と __CAPGO_KEEP_0__ の自動コンテンツインセットを組み合わせることは、一般的なダブルスペースの原因です。

実際にオーバーフローしている要素を探す

通常の原因は、 100vw、Tailwind w-screen、固定ピクセル幅、または大きい min-width.

Safari Web インスペクターで実行:

[...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,
  }));

Tailwind の場合、 w-screen を置き換える w-full 可能であれば。多くの水平オーバーフロー問題は、安全なエリアの重複パディングや固定幅のコンテナから来ています — 画面幅のメタタグ自体ではありません。 100vw / w-screen,安全なエリアのパディングの重複、または固定幅のコンテナ — 画面幅のメタタグ自体ではありません。

結論

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

さらに、__CAPGO_KEEP_0__の追加により、最新の機能やバグ修正にアクセスできるようにするためのリアルタイム更新を簡単に追加できます。 Capgo__CAPGO_KEEP_0__をAngularアプリに追加する方法を学びましょう。

Building Mobile Apps with AngularとCapgo

Building Mobile Apps with AngularとCapacitor

ネイティブメディアとインターフェイスの動作を計画する場合は、__CAPGO_KEEP_0__を接続してください。 Capacitor __CAPGO_KEEP_1__ Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, @capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player, and Using @capgo/capacitor-native-navigation for the native capability in Using @capgo/capacitor-native-navigation.

Capacitor アプリのリアルタイム更新

Capgo を使用して、ウェブ層のバグが生じた場合、修正をアプリストアの承認待ちの日数を待たずに配信する。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路で残る。

今すぐ始める

最新のブログ記事

Capgo を使用すると、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を得ることができます。

2-Way Capacitor アプリ間の双方向通信
開発 モバイル +1
2025年4月26日

2-Way Capacitor アプリ間の双方向通信

5つのOTA更新ミスを避ける
開発 セキュリティ +1
2025年4月13日

5つのOTA更新ミスを避ける

モバイル アプリ ライブ アップデートのための 5 つのセキュリティ ベスト プラクティス
開発 モバイル +1
2025 年 1 月 14 日

モバイル アプリ ライブ アップデートのための 5 つのセキュリティ ベスト プラクティス

ブログからすべてを参照