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

このチュートリアルでは、Angularの新しいアプリから始め、__CAPGO_KEEP_0__を使用してネイティブモバイルアプリの世界に移行します。__CAPGO_KEEP_1__ Native NavigationとTransitionsを追加すると、ネイティブモバイルのフィールが得られ、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.

このチュートリアルでは、Angularの新しいアプリから始め、Capacitorを使用してネイティブモバイルアプリの世界に移行します。__CAPGO_KEEP_1__ Native Navigation、Transitions、tailwind-__CAPGO_KEEP_2__を使用して安全なエリアを実現できます。

__CAPGO_KEEP_0__について

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. You can also use Capgo Native Navigation, Transitions, and tailwind-capacitor for safe areas.

About Capacitor

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

With Capacitor, Capacitorの素晴らしいネイティブモバイルアプリを簡単に作成できます。複雑なセットアップや急な勉強のカーブは必要ありません。APIが細身で機能がstreamlinedなので、プロジェクトに簡単に統合できます。私に聞いてもいいですが、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アプリをパッケージ化するには、最初のいくつかのステップを実行する必要がありますが、後は単に1つのコマンドを実行するだけです。 sync 最初に、__CAPGO_KEEP_0__ __CAPGO_KEEP_1__を開発依存モジュールとしてインストールし、プロジェクト内でセットアップします。セットアップ中は、名前とバンドル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 and ios 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の際に使用される基本的な__CAPGO_KEEP_0__設定が含まれています。注目する必要があるのは、

この問題を解決するには、 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 はすべてのweb codeをネイティブプラットフォームの正しい場所にSyncし、表示するアプリ内で表示することができます。

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

気付かずに、実際には完了しましたので、デバイスでアプリを確認してみましょう。

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

iOSアプリを開発するには、 Xcode をインストールし、Androidアプリを開発するには、 Android Studio をインストールする必要があります。また、App Storeでアプリを配信する場合、iOSにはApple Developer Programに登録し、AndroidにはGoogle Play Consoleに登録する必要があります。

ネイティブモバイル開発に新人ですか? Capacitor CLI を使用すると、両方のネイティブプロジェクトを簡単に開くことができます。

npx cap open ios
npx cap open android

ネイティブプロジェクトを設定した後、デバイスにアプリをデプロイするのは簡単です。Android Studioでは、設定を変更することなく、デバイスにアプリをデプロイする準備が整うのを待ちます。ここに例があります。

Xcodeでは、実機にアプリをデプロイするには署名アカウントを設定する必要があります。実機にアプリをデプロイするのではなくシミュレータにのみデプロイする場合は、設定を変更する必要はありません。ただし、開発者プログラムに登録する必要があります。Xcodeは、署名アカウントを設定するプロセスを案内します。ここに例があります。

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

待ってください、開発中にはもっと速い方法があります…

Capacitor Live Reload

ここまで来たら、すべてのモダンフレームワークでホットリロードができるようになっているので、良いニュースはあります。同じ機能をモバイルデバイスでも簡単に実現できます。 モバイルデバイス上で同じ機能を実現することができます。 ローカルホストのアプリケーションにアクセスするためのライブリロードを有効にします。

ローカルネットワーク上でライブリロードを有効にします。 __CAPGO_KEEP_0__ アプリが特定のURLからコンテンツを読み込むように設定します。 by having the Capacitor app load the content from the specific URL.

Windowsを使用している場合は、:

ipconfig getifaddr en0

__CAPGO_KEEP_0__

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ポートを使用しています。これらの変更を適用するには、webフォルダと設定のみを含む変更をnativeプロジェクトにコピーする必要があります。

コマンドは

npx cap copy

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

Android StudioやXcodeからアプリを再度デプロイすることができます。次に、Angularアプリに何か変更が加わった場合、 アプリは自動的に再読み込みされ、変更が表示されます。 注意してください。

新しいプラグインをインストールした場合、カメラなどのプラグインは、nativeプロジェクトを再構築する必要があります。これは、nativeファイルが変更されたため、オンザフライで行うことはできません。 __CAPGO_KEEP_0__ブロックは、デモ用にデフォルトのAngularポートを表示しています。正しいIPとポートを使用するようにしてください。

code プラグインの使用

Capacitor プラグインの使用方法をご紹介します。

Let’s take a look at how to use a Capacitor plugin in action, which we’ve mentioned a few times before. To do this, we can install a fairly simple plugin by running:

npm i @capacitor/share

「Share プラグイン」は、特別な機能はありませんが、native共有ダイアログを表示します。 この機能を使用するには、パッケージをインポートし、関連する関数を呼び出すだけです。アプリのコードを変更してください。 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

ボタンをクリックすると、美しいネイティブシェアダイアログが実行されます!

次に、iOSおよびAndroidでアプリをよりネイティブに感じさせるために、Capgoナビゲーションとトランジションを使用し、水平オーバーフローまたは安全エリアがカットされたiOSの一般的なレイアウト問題を修正できます。

ネイティブなUIに感じさせる: Capgoネイティブナビゲーションとトランジション

数年間、 Ionic を使用してクロスプラットフォームアプリケーションを構築してきましたが、Angularと統合することはハック的で、既存の Tailwind CSS.

を使用することよりも、Angular + Capacitorアプリケーションでネイティブモバイルのフィールを得るために、Capgoプラグインを使用する方が良いでしょう。ウェブのみのUIキットであるKonsta UIのようなものではなく:

• @capgo/capacitor-native-navigation — iOSのLiquid Glassタブバー、Androidのブラーされたタブバー、そしてnative navbar。
• @capgo/capacitor-transitions — WebViewレイヤーで、iOSのエッジスワイプバックとIonicスタイルのページトランジションを実装しますが、Ionic UIを採用しません。

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

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

CSSのインセットモードを使用してnative navigationを設定し、webコンテンツがnativeバーを尊重するようにします。

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') 、

を呼び出して、移動する前に呼び出してください。native navigationがそれらの表面を所有している場合、webヘッダーやフッターを重複して表示しないでください。 Capgoで使用する@capgo/capacitor-native-navigation と Capgoで使用する@capgo/capacitor-transitions.

安全な領域にTailwind

Tailwind CSSでデバイスの安全な領域を使用するには @capgo/tailwind-capacitor (__CAPGO_KEEP_0__として公開) tailwind-capacitor on npm). It provides safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

、などのユーティリティを使用 src/styles.css:

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

、 pt-safe, pb-safe、 px-safe instead of sprinkling env(safe-area-inset-*) by hand. The project is actively developed — if something is missing for your Angular setup, open a PR on GitHub.

iOSレイアウトの修正 (ビューポート、セーフエリア、水平スクロール)

iOSでコンテンツが切り取られたり、ずれたり、水平スクロールできるようになったら、ビューポートタグを追加したり調整したりするだけでは解決しないことがあります。 overflow-x: hidden ビューポートメタタグの適用を確認する

Make sure the viewport meta tag is applied correctly

In src/index.htmlセーフエリアを1つのルートラッパーからのみハンドルする <head>:

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

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

全ページコンテンツをラッパー内に包む

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

Wrap all page content inside .app-shell. iOSのヘッダー、モーダル、レイアウトラッパー内で安全エリアの余白を複数回指定すると、UIが切り取られたり大きすぎるように見えることがあります。

With @capgo/tailwind-capacitor, __CAPGO_KEEP_0__で安全エリアの余白を指定するのと同じ結果を得ることができます。 pt-safe pb-safe px-safe on that single shell.

Set Capacitor iOS contentInset を never first

In capacitor.config.ts, __CAPGO_KEEP_0__の自動コンテンツインセットと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-*) paddingはダブルスペースの原因となるのはよくあることです。

Find the real overflowing element

The usual culprit is an element using 100vw、Tailwind w-screen、固定ピクセル幅、または大きい min-width.

In Safari Web Inspector、実行してください：

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

With Tailwind、置き換える w-screen with w-full 可能な限り。多くの水平オーバーフロー問題は、 100vw / w-screen、安全エリアのパディングの重複、または固定幅のコンテナ — ではなく、ビューポートメタタグ自体から来ています。

結論

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

And with the addition of __CAPGO_KEEP_0__、 Capgoは、最新の機能やバグ修正を常に利用できるようにするために、ライブ更新をアプリに追加するのがとても簡単になりました。

If you would like to learn how to add Capgo to your Angular app, take a look at the next article:

AngularアプリにCapacitorを追加する方法を学びたい場合は、次の記事をご覧ください。

Building Mobile Apps with Angular and __CAPGO_KEEP_0__ を使用してAngularアプリにCapacitorを追加する方法を学びましょう。 If you are using Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, Using @capgo/capacitor-live-activities ネイティブ機能としてのcapgo/capacitor-live-activitiesを使用する場合、@capgo/capacitor-live-activitiesを使用してください。 @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, @capgo/capacitor-video-player @capgo/capacitor-video-player Using @capgo/capacitor-native-navigation @capgo/capacitor-native-navigation