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

このチュートリアルでは、新しいAngularアプリを作成し始めます。 Angular 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は、AngularのWebアプリをNativeモバイルアプリに変換することができます。React Nativeのような新しいスキルを学ぶ必要はありません。

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

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

Capacitorについて

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

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

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

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

ng new my-app
cd my-app

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

ネイティブモバイルアプリケーションを作成するには、プロジェクトの export が必要です。したがって、package.jsonに簡単なスクリプトを追加してください。 package.json Angularアプリを構築およびコピーするために利用できるものです:

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

コマンドを実行した後、 build新しいフォルダがプロジェクトのルートに表示されます。 dist このフォルダは、後で__CAPGO_KEEP_0__によって使用されることになりますが、現在は正しく設定する必要があります。

This folder will be used by Capacitor later on, but for now, we must set it up correctly.

Adding Capacitor to Your Angular App

最初に、 sync __CAPGO_KEEP_0__ __CAPGO_KEEP_1__

を開発依存モジュールとしてインストールし、プロジェクト内でセットアップする必要があります。セットアップ中は、名前とバンドルIDのデフォルト値に「Enter」を押すと設定されます。 Capacitor CLI __CAPGO_KEEP_0__はCapacitorです。__CAPGO_KEEP_1__はAngularです。

__CAPGO_KEEP_0__はCapacitorです。__CAPGO_KEEP_1__はAngularです。

最後に、プラットフォームを追加できます。 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 のフォルダが、Angular プロジェクト内に表示されるはずです。

これらは、実際のネイティブプロジェクトです!

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

のプロジェクトを探す必要があります。 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し、表示するアプリに表示することができます。

さらに、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__を使用して、両方のネイティブプロジェクトを開くことができます: __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ iOSアプリを開発するには、Xcodeがインストールされている必要があります。 Androidアプリを開発するには、Android Studioがインストールされている必要があります。

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では、設定を変更することなくデバイスにアプリをデプロイすることができます。ここに例があります:

Xcodeでは、実機にアプリをデプロイするには署名アカウントを設定する必要があります。シミュレーターにのみデプロイする場合は、署名アカウントを設定する必要はありません。署名アカウントを設定する必要がある場合は、Xcodeはプロセスをガイドします (ただし、開発プログラムに登録する必要があります)。その後、簡単にプレイボタンをクリックして、デバイスにアプリを実行できます。デバイスを選択するには、上部に移動してください。ここに例があります:

成功しました！AngularのWebアプリをモバイルデバイスにデプロイしました。ここに例があります:

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

Capacitor Live Reload

ここまで来たら、すべてのモダンフレームワークでホットリロードを利用しているので、良いニュースはあります。ホットリロードの機能をモバイルデバイスでも利用できます。 on a mobile device 最小限の努力で!

ローカルにホストされているアプリケーションへのアクセスを有効にします。 On your network Capacitorアプリが特定のURLからコンテンツを読み込むようにする

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

ipconfig getifaddr en0

On Windows, run :

ipconfig

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

Capacitorをサーバーから直接アプリを読み込ませるように指示するには、ファイルに別のエントリを追加する必要があります。 capacitor.config.ts 正しいIPアドレスとポート番号を使用してください。

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プロジェクトにコピーする必要があります。変更

__CAPGO_KEEP_0__

npx cap copy

__CAPGO_KEEP_0__ copy コマンドはAngularのモバイルアプリケーションCapacitorで使用されるものと似ています。 syncが、Webフォルダの変更のみをコピーし、ネイティブプロジェクトを更新せずに構成をコピーすることになります。 Angularアプリケーションで何かを変更した場合、Android StudioまたはXcodeを使用してアプリケーションを再度デプロイできます。その後、Angularアプリケーションで何かを変更すると、アプリケーションは自動的に再読み込みされ、変更が表示されます。 注意してください。

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

Capacitorで使用されるプラグインの例をご紹介します。プラグインをインストールするには、以下のコマンドを実行します。 __CAPGO_KEEP_0__

code

Capacitor

Capacitor

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

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

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.

Native-feeling UI with Capgo Native Navigation and Transitions

また、iOS のレイアウト問題を解決し、水平方向のオーバーフローまたは安全な領域のクロップを修正することもできます。 native のUIを実現するには、__CAPGO_KEEP_0__ Native NavigationとTransitionsを使用することができます。 クロスプラットフォームアプリケーションを構築するには、Angularと統合することはハック的で、すでに持っている場合にあまりにも価値がないことが多いため Tailwind CSS.

Angular + Capacitor アプリケーションでネイティブモバイルのフィールを得るには、WebのみのUIキットであるKonsta UIではなく、Capgo プラグインを使用する

• @capgo/capacitor-native-navigation —ネイティブのナビゲーションバー、iOSではLiquid Glassのタブバー、Androidではぼやけたタブバーのスタイルが使用されます。Angularのルーターはルートの状態を維持し、プラグインはネイティブのブラウザを所有します。
• @capgo/capacitor-transitions —Ionicスタイルのページ遷移とiOSのエッジスワイプバックがWebViewレイヤーで使用されますが、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') Capacitorライブアップデートの代替手段を比較するページ。役割：長いマーケティングまたは法的文章。見つける場所：ページalternatives.astro。Capgo製品/ブランドおよび開発者用語を完全に保持する。

Capacitorライブアップデートの代替手段を比較するページ。役割：長いマーケティングまたは法的文章。見つける場所：ページionic-appflow.astro。Capgo製品/ブランドおよび開発者用語を完全に保持する。 Using @capgo/capacitor-native-navigation コンサルティングサービスに関するFAQのサブタイトル Using @capgo/capacitor-transitions.

Appflowプラグインまたは

ページを移動する前に行わないでください。ネイティブのナビゲーションが管理する場合、ウェブヘッダーまたはフッターを複製しないでください。 @capgo/tailwind-capacitor @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-ネイティブナビゲーションを使用する 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 utilities such as pt-safe, pb-safe, そして px-safe 代わりに手動で env(safe-area-inset-*) プロジェクトは活発に開発されています — ご自身のAngular設定で何かが欠けている場合、 GitHubにPRを開く.

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

iOSでコンテンツが切り取られた、ずれた、または水平スクロールできる場合、ビューポートタグを追加したり修正したりするだけでは通常解決しません。次のチェックを順番に実行してください。 overflow-x: hidden ビューポートメタタグが正しく適用されていることを確認する

In

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

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

、@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__とともに、同じパディングをユーティリティとして表現できます。 @capgo/tailwind-capacitor__CAPGO_KEEP_0__ iOS pt-safe pb-safe px-safe を

Set Capacitor iOS contentInset 最初 never context

In capacitor.config.ts, nativeのインセットを無効にしてCSS (またはNative Navigationの contentInsetMode: 'css')がセーフエリアを管理する:

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

Capacitorの自動コンテンツインセットとCSSのパディングを組み合わせると、通常のスペースの倍増が発生することが多い。 env(safe-area-inset-*) 実際にオーバーフローしている要素を探す

通常の原因は、

, Tailwind 100vw, または固定ピクセル幅、または大きい w-screenSafari Web Inspectorで実行: 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 with w-full 可能の場合。多くの水平オーバーフロー問題は、安全エリアの重複パディングや固定幅のコンテナからではなく、ビューポートメタタグ自体から生じることが多い。 100vw / w-screen結論

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

Capacitor is an excellent option for building native applications based on an existing web project, offering a simple way to share code and maintain a consistent UI.

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

Building Mobile Apps with Angular and Capacitorから続けてください。

Capgoを使用している場合 Building Mobile Apps with Angular and Capacitor ネイティブメディアとインターフェイスの動作を計画するには、__CAPGO_KEEP_0__を接続する必要があります。 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.