このチュートリアルでは、Angularアプリケーションを新しく作成し、Capacitorを使用してネイティブモバイルアプリケーションに変換する方法を説明します。 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 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.
Capacitorを使用することで、Angularアプリケーションをネイティブモバイルアプリケーションに変換できます。
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
Capacitorはゲームチェンジャーです!Capacitorを使用すると、任意のウェブプロジェクトに簡単に取り入れることができ、ネイティブウェブビューにアプリケーションをラップし、ネイティブXcodeとAndroid Studioプロジェクトを生成できます。また、プラグインはカメラなどのネイティブデバイス機能にアクセスするためのJSブリッジを提供します。
With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!
Angularアプリケーションを準備する
新しいAngularアプリケーションを作成するには、以下のコマンドを実行してください:
ng new my-app
cd my-app「Angular」を選択してください
nativeモバイルアプリを作成するには、 エクスポート プロジェクトの package.json に、プロジェクトをビルドしてコピーするための簡単なスクリプトを含める必要があります。
{
"scripts": {
// ...
"build": "ng build --prod"
}
}コマンドを実行した後、プロジェクトのルートディレクトリに新しいフォルダが見つかります。 buildこのフォルダは、後で__CAPGO_KEEP_0__によって使用される予定ですが、現在は正しく設定する必要があります。 dist __CAPGO_KEEP_0__をAngularアプリに追加する
This folder will be used by Capacitor later on, but for now, we must set it up correctly.
Adding Capacitor to Your Angular App
Angularのバージョンを選択する際に「Angular」を選択してください。 sync コマンド。
まず、開発依存モジュールとして Capacitor CLI をインストールし、プロジェクト内で設定します。設定の際は、デフォルトの名前とバンドルIDの値を「Enter」で受け入れることができます。
次に、コアパッケージとiOSおよびAndroidプラットフォーム用の関連パッケージをインストールする必要があります。
最後に、プラットフォームを追加し、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 フォルダが観察できるはずです。
これらは実際のネイティブプロジェクトです!
To access the Android project later, you must install Android StudioFor iOS, you need a Mac and should install Xcode.
Additionally, you should find a 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 webDircontext: HTML text fragment from a longer Capgo UI string (parent key `solutions_cordova_to_capacitor_ai_step2_body`). Page/area: Capgo solutions marketing page. Role: Website copy sentence. Seen in: page solutions/cordova-to-capacitor-ai.astro. Message key `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body).
, which must point to the result of your build command. Currently, it is inaccurate. capacitor.config.json __CAPGO_KEEP_0__.config.json webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}実行するコマンドを試してみてください。
npm run build
npx cap sync最初のコマンド npm run build は、Angular プロジェクトをビルドし、静的ビルドをコピーするだけです。 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.
は、ウェブ __CAPGO_KEEP_0__ をネイティブプラットフォームの適切な場所に同步します。これにより、ネイティブアプリ内で表示されることができます。 さらに、sync コマンドはネイティブプラットフォームを更新し、プラグインをインストールする可能性があるため、新しい Capacitor プラグインをインストールした場合 再度実行する必要があります。 npx cap sync 気づかないうちに、実際には完了しています。
したがって、デバイスでアプリを表示してみましょう!
ネイティブアプリのビルドとデプロイ
iOS アプリを開発するには、 Xcode がインストールされている場合、Androidアプリの場合はAndroid Studioがインストールされている必要があります。また、iOSアプリをアプリストアで配布する場合、Apple Developer Programに登録し、AndroidアプリをGoogle Play Consoleに登録する必要があります。 Capgoでは、nativeモバイル開発に慣れていない場合は、__CAPGO_KEEP_0__ __CAPGO_KEEP_1__を使用して、両方のnativeプロジェクトを簡単に開くことができます。 nativeプロジェクトを設定した後、実機にアプリをデプロイするのは簡単です。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 androidXcodeでは、実機にアプリをデプロイするには署名アカウントを設定する必要があります。実機にアプリをデプロイする代わりにシミュレータにアプリをデプロイする場合は、署名アカウントを設定する必要はありません。署名アカウントを設定する場合は、Xcodeがガイドを提供します (ただし、開発者プログラムに登録する必要があります)。署名アカウントを設定した後、実機にアプリをデプロイするには、上部で実機を選択し、実行をクリックするだけです。例えば、次のコマンドを実行します。
Angular webアプリをモバイルデバイスにデプロイすることに成功しました。例えば、次のコマンドを実行します。
しかし、開発中にはもっと速い方法があります…
__CAPGO_KEEP_1__
Capacitor Live Reload
現在、すべてのモダンフレームワークでホットリロードが利用できるようになりました。幸いなことに、Capacitorを使用して、モバイルデバイスでも同様の機能を実現できます。 モバイルデバイスでも 最小限の手間で!
ローカルホストのアプリケーションにアクセスし、ライブリロードを有効にするには、__CAPGO_KEEP_0__ アプリが特定のURLからコンテンツを読み込むように設定する必要があります。 ローカルIPアドレスを確認する必要があります。Macを使用している場合は、ターミナルで以下のコマンドを実行して確認できます。 by having the Capacitor app load the content from the specific URL.
次に、IPv4アドレスを探します。
ipconfig getifaddr en0__CAPGO_KEEP_0__ をサーバーから直接アプリケーションを読み込ませるには、ファイルに別のエントリを追加する必要があります:
ipconfig__CAPGO_KEEP_0__
Capacitor capacitor.config.ts __CAPGO_KEEP_0__
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アプリのCapacitor化 正しいIPとポートを使用してくださいこの例では、デフォルトのAngularポートを使用しています。
変更を適用するには、次の手順を実行してください。
npx cap copyコマンドは copy ですが、Webフォルダと設定のみをコピーし、ネイティブプロジェクトを更新せずにします。 syncAndroid StudioまたはXcodeを使用してアプリを再度デプロイしてください。Angularアプリに何か変更が加わった場合、 自動的にリロードされ、変更が表示されます! AngularアプリのCapacitor化
変更を適用するには、次の手順を実行してください。 コマンドは ですが、Webフォルダと設定のみをコピーし、ネイティブプロジェクトを更新せずにします。
注意してください 新しいプラグインをインストールした場合、カメラなどの場合、nativeプロジェクトを再構築する必要があります。これは、nativeファイルが変更されたため、オンザフライで行うことはできません。
注意してください。正しいIPアドレスとポート番号を設定する必要があります。上のcodeブロックは、デモ用にデフォルトのAngularポートを示しています。
Capacitor プラグインの使用
Capacitor プラグインの使用方法をご紹介します。簡単なプラグインをインストールしてみましょう。
npm i @capacitor/shareShare プラグインは、特別な機能はありませんが、native シェアダイアログを表示します。 このプラグインを使用するには、パッケージをインポートし、関連する関数を呼び出すだけです。src/app/app.component.ts を次のように変更してみましょう。新しいプラグインをインストールした場合、sync操作を実行し、再度アプリをデバイスにデプロイする必要があります。次のコマンドを実行してください。 share() 新しいプラグインをインストールした場合、sync操作を実行し、再度アプリをデバイスにデプロイする必要があります。次のコマンドを実行してください。 新しいプラグインをインストールした場合、sync操作を実行し、再度アプリをデバイスにデプロイする必要があります。次のコマンドを実行してください。 新しいプラグインをインストールした場合、sync操作を実行し、再度アプリをデバイスにデプロイする必要があります。次のコマンドを実行してください。
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ネイティブナビゲーションとトランジション
数年間、 イオニック を使用してクロスプラットフォームアプリケーションを構築してきましたが、Angularと統合することはハック的で、すでに テイルウィンドCSS.
を持っている場合、Angular + Capacitorアプリでネイティブモバイルフィーリングを実現するには、WebのみのUIキットのようなKonsta UIではなく、Capgoプラグインを使用します。
- @capgo/capacitor-native-navigation —ネイティブのナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブラーされたタブバーのスタイル。Angularルーターのルート状態を維持し、プラグインはネイティブのChromeを所有します。
- @capgo/capacitor-transitions —IonicスタイルのページトランジションとiOSのエッジスワイプバックをWebViewレイヤーで実行します。イオニック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',
},
});液体ガラスのタブバーをレンダリングします (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 Capacitor Live-Updateの代替手法を使用する Using @capgo/capacitor-transitions.
セーフエリアにTailwind
Tailwind CSSのデバイスセーフエリアに使用するには @capgo/tailwind-capacitor として tailwind-capacitor on npm。 Tailwindプラグインの safe-areas utilities and other Capacitor-friendly Tailwind plugins:
bun add -D tailwind-capacitorTailwindのユーティリティとして 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-*) プロジェクトは積極的に開発されています — ご利用のAngular設定で欠けているものがあれば open a PR on GitHub.
iOSレイアウトの問題を解決する (ビューポート、セーフエリア、水平オーバーフロー)
iOSでコンテンツが切り取られた、ずれた、または水平方向にスクロールできるように見えている場合、ビューポートタグを追加したり調整したりするだけでは通常解決しません。順序に従ってこれらのチェックを実行してください。 overflow-x: hidden ビューポートメタタグが正しく適用されていることを確認してください
、で、ビューポートメタタグを設定してください
iOSセーフエリアを1つのルートラッパーからのみ取り扱います src/index.html単一のアプリシェルを作成し、セーフエリアのパディングをそこに適用してください — 複数のネストされたコンポーネントに適用するのではなく <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />すべてのページコンテンツを内側に Wrapしてください。
. セーフエリアのパディングを複数回追加すると、ヘッダー、モーダル、レイアウトラッパーでUIが切り取られたり大きすぎるように見えることがあります。
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);
}、で、@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__を使用してください .app-shell__CAPGO_KEEP_0__
__CAPGO_KEEP_1__ @capgo/tailwind-capacitor、ユーティリティライクのパディングを使用して同じパディングを表現できます。 pt-safe pb-safe px-safe 単一のシェル上に。
Capacitor iOSを設定 contentInset to never context
Live updates product page. Role: Short UI label or navigation item. Message key `live_update_dynamic_label_to` (Live Update Dynamic Label To). capacitor.config.ts最初 contentInsetMode: 'css') own the safe area:
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-*) 、ネイティブのインセットを無効にしてCSS（またはネイティブナビゲーションの）
Find the real overflowing element
を安全なエリアの所有者にします。 100vw、テールウィンド 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,
}));テールウィンドで置き換える w-screen に w-full 可能な限り。多くの水平オーバーフロー問題は、 100vw / w-screen、重複したセーフエリアのパディング、または固定幅のコンテナ — ではなく、ビューポート メタタグ自体から
結論
Capacitorは既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するための優れたオプションであり、簡単な方法でcodeを共有し、UIの統一性を維持することができます。
そして、__CAPGO_KEEP_0__の追加 Capgoコンテキスト:Capgo UIの長い文字列から取り出されたHTMLテキストの部分キー (submitting_a_pr_to_capgo)。ページ/エリア:Capgo マーケティング ウェブサイト。役割:ウェブサイト コピー文。見られる場所:contributing.astroページ。Capgo製品/ブランドと開発者用語を厳密に保持する。メッセージキーsubmitting_a_pr_to_capgo (Submitting A Pr To Capgo)。
AngularアプリにCapgoを追加する方法を学びたい場合は、次の記事を参照してください。
AngularとCapacitorを使用したモバイルアプリ作成の続き
Angularアプリで AngularとCapacitorを使用したモバイルアプリ作成 __CAPGO_KEEP_0__と接続して native mediaとinterfaceの動作を計画するには、@capgo/capacitor-live-activitiesを使用します。 native capabilityの@capgo/capacitor-live-activities native capabilityの実装詳細は@capgo/capacitor-live-activities native capabilityの@capgo/capacitor-video-player native capabilityの実装詳細は@capgo/capacitor-video-player @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.
