このチュートリアルでは、新しい Angular app と、ネイティブモバイルアプリの世界に移行するために Capacitor を使用できます。オプションで、また Konsta UI を使用して、Tailwind CSS で改善されたモバイルUIを追加できます。
Capacitor を使用すると、Angular ウェブアプリケーションをネイティブモバイルアプリケーションに変換できます。新しいスキルを学ぶ必要はなく、React Native のような大きな変更も必要ありません。
Angular アプリケーションのほとんどは、数ステップでモバイルアプリケーションに変換できます。
このチュートリアルでは、新しいAngularアプリケーションから始めて、Capacitor を使用してネイティブモバイルアプリケーションに移行するプロセスを説明します。オプションで、また Konsta UI を使用して、Tailwind CSS で改善されたモバイルUIを追加できます。
Capacitor
CapacitorJS はゲームチェンジャーです!あなたのウェブプロジェクトに __CAPGO_KEEP_0__ を簡単に組み込むことができ、ネイティブウェブビューにアプリケーションを wrap して、ネイティブ Xcode と Android Studio プロジェクトを生成します。さらに、プラグインは、JS ブリッジを使用してカメラなどのネイティブデバイス機能にアクセスします。
Capacitor を使用すると、複雑なセットアップや急な学習カーブなしで、素晴らしいネイティブモバイルアプリケーションを取得できます。API と、streamlined 機能性がスリムで、プロジェクトに簡単に組み込むことができます。信じてください、Capacitor を使用して、完全に機能するネイティブアプリケーションを実現するのは、驚くほど簡単です!
Angular アプリケーションを準備する
Angularアプリを作成するには、以下のコマンドを実行してください。
ng new my-app
cd my-app「Angular」を選択してください。
ネイティブモバイルアプリを作成するには、プロジェクトの __CAPGO_KEEP_0__ をエクスポートする必要があります。 したがって、Angularプロジェクトを簡単に構築およびコピーできるスクリプトを含めるようにしてください。 パッケージ.json
{
"scripts": {
// ...
"build": "ng build --prod"
}
}コマンドを実行した後 build、プロジェクトのルートディレクトリに新しい dist フォルダが表示されます。
このフォルダは、後でCapacitorによって使用される予定ですが、現在は正しく設定する必要があります。
AngularアプリにCapacitorを追加する
任意のWebアプリをネイティブモバイルコンテナにパッケージ化するには、最初の数ステップを実行する必要がありますが、その後は単に1つのコマンドを実行するだけです。 sync 最初に、開発依存モジュールとして
__CAPGO_KEEP_0__ Capacitor CLI をインストールし、プロジェクト内でセットアップすることができます。セットアップ中に、名前とバンドルIDのデフォルト値を承認するには「Enter」を押すことができます。
次に、iOSとAndroidプラットフォームの関連パッケージとコアパッケージをインストールする必要があります。
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__CAPGO_KEEP_0__ はプロジェクトのルートディレクトリに各プラットフォーム用のフォルダを作成します: この時点で、Angularプロジェクト内に新しい ios と
実際のネイティブプロジェクトです!
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__設定が含まれています。注目する必要があるのは
webDir capacitor.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.
は、すべてのWeb __CAPGO_KEEP_0__をネイティブプラットフォームの正しい場所にSyncします。 Capacitor plugins __CAPGO_KEEP_0__ プラグインをインストールした場合 npx cap sync 再度実行してください。
気づかなければならないことですが、実際にはすでに完了しています。
したがって、デバイスでアプリを表示してみましょう。
iOSアプリを開発するには Xcode がインストールされている必要があります。また、Androidアプリを開発するには Android Studio がインストールされている必要があります。さらに、iOSアプリをアプリストアで配布する場合、Apple Developer Programに登録する必要があります。Androidアプリを配布する場合、Google Play Consoleに登録する必要があります。
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 androidCapacitor
nativeプロジェクトを設定した後、実機にアプリをデプロイするのは簡単です。Android Studioでは、設定を変更することなく実機にアプリをデプロイすることができます。例えば、
は次のようになります。
ですが、開発中にはもっと速い方法があります…
Capacitor Live Reload
あなたはもう、すべての現代的なフレームワークでホットリロードを利用しているのであろうが、良いニュースはあなたが同じ機能を利用できることだ。 モバイルデバイス上で 最小限の手間で
ローカルホストで実行中のアプリケーションへのアクセスを有効にする ネットワーク上で Capacitor アプリケーションが特定のURLからコンテンツを読み込むようにする
最初のステップはローカルIPアドレスを調べることだ。Macを使用している場合、ターミナルで以下のコマンドを実行することでこれを調べることができる。
ipconfig getifaddr en0Windowsを使用している場合、以下のコマンドを実行する。
ipconfigIPv4アドレスを探せ。
サーバーからアプリケーションを直接読み込ませるように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;Capgoを使用する際は、正しいIPアドレスとポート番号を使用してください。 この例では、デフォルトのAngularポートを使用しています。これらの変更を適用するには、nativeプロジェクトにコピーする必要があります:
コマンドは
npx cap copyですが、webフォルダと設定のみをコピーし、nativeプロジェクトを更新せずにします。 copy Android StudioまたはXcodeを使用してアプリを再度デプロイしてください。その後、Angularアプリに何か変更を加えた場合、 syncアプリは自動的に再読み込みされます。 __CAPGO_KEEP_0__ __CAPGO_KEEP_0__
__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ と変更を表示！
注意してください 新しいプラグイン（カメラなど）をインストールした場合でも、ネイティブプロジェクトを再構築する必要があります。これは、ネイティブファイルが変更されたため、オンザフライで行うことはできません。
IPとポートを正しく設定してください。上記のcodeブロックはデモ用にデフォルトのAngularポートを示しています。
Capacitor プラグインの使用
Capacitor プラグインの使用方法をご紹介します。前回も何度か言及したことがありますが、実際に使用する方法をご紹介します。プラグインをインストールするには、以下のコマンドを実行します。
npm i @capacitor/shareShare プラグインは 特別な機能はありませんが、ネイティブの共有ダイアログを表示します！このプラグインを使用するには、パッケージをインポートし、関連する 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ボタンをクリックすると、素晴らしいネイティブシェアダイアログが実行されます!
Konsta UIを追加する
Nuxt 3アプリでKonsta UIを使用するには、 tailwindがすでにインストールされている必要があります パッケージをインストールするには:
npm i konstaさらに、 tailwind.config.js ファイル:
// import konstaConfig config
const konstaConfig = require('konsta/config')
// wrap config with konstaConfig config
module.exports = konstaConfig({
content: [
'./src/**/*.{html,ts}',
],
darkMode: 'media', // or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
})konstaConfig Konsta UIのために必要な追加のバリアントとヘルパー ユーティリティを、デフォルトの(またはカスタムの)Tailwind CSS構成に追加します。
ここで、主な App コンポーネントを設定する必要があります。これにより、グローバルパラメータ(例えば、 theme).
アプリ全体を囲む必要があります。 App に src/app/app.component.html:
<app>
<h1>Welcome to Angular and Capacitor!</h1>
<button (click)="share()">Share now!</button>
</app>例のページ
すべての設定が完了したら、AngularのページでKonsta UI Vueコンポーネントを使用できます。
例えば、 src/app/app.component.html をオープンし、以下のように変更してみましょう。
<app>
<page>
<navbar title="My App" />
<block strong>
<p>
Here is your Angular & Konsta UI app. Let's see what we have here.
</p>
</block>
<block-title>Navigation</block-title>
<list>
<list-item href="/about/" title="About" />
<list-item href="/form/" title="Form" />
</list>
<block strong class="flex space-x-4">
<button>Button 1</button>
<button>Button 2</button>
</block>
</page>
</app>必要なコンポーネントをすべてインストールした後、ライブリロードが同期していない場合は、すべてを再起動してみてください。そうすると、AngularとCapacitorで構築されたモバイルアプリを少しネイティブな見た目で見ることができます。
以下のページが表示されるはずです。
結論
Capacitorは既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するための優れたオプションであり、codeを簡単に共有し、UIの統一性を維持するための簡単な方法を提供します。
さらに Capgoアプリにリアルタイム更新を追加するのは、もうとても簡単です。ユーザーは常に最新の機能やバグ修正にアクセスできます。
CapgoをAngularアプリに追加する方法を学びたい場合は、次の記事を参照してください:
Building Mobile Apps with AngularとCapacitorから続けてください
Angularと__CAPGO_KEEP_0__を使用して、ネイティブメディアとインターフェイスの動作を計画する場合は、__CAPGO_KEEP_0__と接続してください。 @Capacitor/__CAPGO_KEEP_1__-live-activitiesを使用して、ネイティブ機能を計画する @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activitiesを使用して、ネイティブ機能の実装詳細を計画する @capgo/capacitor-video-playerを使用して、ビデオプレーヤーを計画する @capgo/capacitor-live-activitiesを使用して、ネイティブ機能を計画する @capgo/capacitor-live-activitiesを使用して、ネイティブ機能の実装詳細を計画する @capgo/capacitor-video-playerを使用して、ビデオプレーヤーを計画する @capgo/capacitor-live-activitiesを使用して、ネイティブ機能を計画する 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.
