In the evolving world of mobile application development, the rise of Progressive Web Applications (PWAs) has paved the way for new cross-platform runtimes. These runtimes enable web-based applications to be present in app stores without relying solely on native code. One such technology that facilitates this is CapacitorJS, これは、Android、iOS、ウェブ上で単一のJavaScriptコードベースを使用して、単純なウェブサイトをアプリケーションとして展開できるように開発者に支援する技術です。このアプローチは、開発コストの削減とコーディング効率の向上を実現します。
このガイドでは、CapacitorJSを使用した純粋なJavaScriptアプリケーションの開発に焦点を当てます。2021年の純粋なJavaScriptアプリケーション開発のためのリソースの探し方の困難さにもかかわらず、CapacitorJSを使用したネイティブプラグインの活用方法について、開発者に包括的なチュートリアルを提供します。
‣ 必要な前提条件
開発を開始する前に、以下のツールをインストールしてください:
- Node.js (v14.16.1) または
- NPM (v7.6.2) またはそれ以上
- Android Studio Androidアプリ開発用
- Xcode iOSアプリ開発用 (macOSのみ)
注: iOSアプリ開発はmacOSデバイス上のみ可能です。
‣ Capacitorプロジェクトの設定
To create a Capacitor application, navigate to your desired folder and execute the following command in your terminal:
npm init @capacitor/appFollow the prompts to install the package and set up your project. With Capacitor v3, your project directory should look like this:
www/
css/
style.css
js/
capacitor-welcome.js
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md初期設定が完了したら、次のステップに進みます。
‣ プロジェクトの構造化
Viteを使用してJavaScriptファイルをバンドルするので、プロジェクトを再構築してください:
- Create 新しいフォルダ
src主ディレクトリに - Create 新しいスクリプトファイル
index.jsinsrc/. - Create Viteの設定ファイル
vite.config.js主ディレクトリに - Remove the
capacitor-welcome.jsファイルからwww/js/.
Capgoでクロスプラットフォームアプリを開発する
src/
index.js
www/
css/
style.css
js/
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js‣ Pure JavaScriptに適応する
Pure JavaScriptを使用するためにファイルを変更する
www/index.html
- Ionic PWA Elementsのスクリプトインポートを削除する アプリをPWAとしてリリースしない場合 HTML要素を削除する
<script type="module" src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"></script>
<script nomodule src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"></script>-
HTML要素を削除する
<capacitor-welcome>スクリプトインポートを更新する -
Capacitor
capacitor.jsLive Update Dynamic Label Tojs/main.js. このファイルは、Capacitor.jsでバンドルされたJavaScriptファイルになります。 -
Remove the
js/capacitor-welcome.jsimport. ここで、index.htmlは使用可能です。
vite.config.js
Viteを使用して、Node.jsモジュールをバンドルするには、 の出力先を指定するための設定ファイルが必要です。以下の設定は、ファイル src/index.js をプロダクション用にバンドルします。 www/js/main.js:
import { defineConfig } from 'vite';
import path from 'node:path';
export default defineConfig({
build: {
outDir: path.resolve(__dirname, 'www'),
rollupOptions: {
input: './src/index.js',
output: {
format: 'es',
file: path.resolve(__dirname, 'www/js/main.js')
}
}
}
});capacitor.config.json
ファイル capacitor.config.json の "bundledWebRuntime": true プロパティと変更してください。 false。 この調整により、Capacitor がファイルをバンドルしないため、Vite をその目的のために使用できます。
これらの変更により、Capacitor アプリケーションの基本的な設定が完了し、純粋な JavaScript でアプリケーションを開発する準備が整いました。
‣ アプリケーションの開発
基礎が整った今、アプリケーションのロジックを書き始めることができます。ここでは、必要な Node.js モジュールをインポートし、アプリケーションの機能を定義し、__CAPGO_KEEP_0__ のネイティブ プラグインと相互作用することができます。 src/index.js file. Here, you can import any necessary Node.js modules, define your app’s functionality, and interact with Capacitor’s native plugins.
このコマンドは、__CAPGO_KEEP_0__ のファイルを生成します。
vite buildファイルが生成されます。 main.js ディレクトリ内にファイルが生成されます。 www/js ファイルが参照します。 index.html ‣ テストとデバッグ
‣ アプリケーションの開発
Capacitorは、さまざまなプラットフォームでアプリケーションをテストするための便利な方法を提供します。次のコマンドを使用して、各プラットフォームの開発環境でアプリケーションを開きます:
Androidの場合:
npx cap add android
npx cap open androidiOS (macOSのみ)の場合:
npx cap add ios
npx cap open iosWeb/PWAの場合:
npx cap serveこれらのコマンドを実行すると、Android Studio、Xcode、またはWebブラウザでアプリケーションを実行し、必要に応じてテストおよびデバッグできます。
‣ 結論
CapacitorJSを使用して、純粋なJavaScriptでクロスプラットフォームアプリケーションを開発することは、複数のプラットフォームに対応するために単一のコードベースを使用することで、コスト効率が高く効率的な方法です。このガイドを遵守することで、プロジェクトを設定し、Viteでリ構造化し、アプリケーションを開発用に準備しました。この基盤を築くと、強力で多面的なアプリケーションを構築する道筋が整います。
すべてのプラットフォームで徹底的にテストし、Capacitorのネイティブプラグインを活用して、アプリケーションの機能を強化することをお忘れなく。ハッピーコーディング!
続けて、クロスプラットフォームアプリケーション開発のためのCapacitorJSのステップバイステップガイド
CapacitorJSを使用している場合: クロスプラットフォームアプリケーション開発のためのCapacitorJSのステップバイステップガイド ネイティブプラグインの作業を計画するには、 Capgo プラグイン ディレクトリ Capacitor.js製品ワークフロー向けに Capgo プラグイン ディレクトリ Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, プラグインの追加または更新 プラグインの追加または更新の実装詳細 Ionic Enterpriseプラグインの代替 Ionic Enterpriseプラグインの代替の製品ワークフロー向けに、 Capgo ネイティブ ビルド Capacitor.js製品ワークフロー向けに Capgo ネイティブ ビルド
