CapacitorJSを使用したクロスプラットフォームアプリ開発のステップバイステップガイド

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, which allows developers to deploy a simple website as an application across Android, iOS, and the web using a single JavaScript codebase. This approach significantly reduces development costs and increases coding efficiency.

This guide will focus on creating an application using pure JavaScript without any additional frameworks. Despite the challenges of finding resources for pure JavaScript app development in 2021, we’re here to provide you with a comprehensive tutorial on building your application and utilizing native plugins with CapacitorJS.

‣ 必要な前提条件

このチュートリアルを始める前に、以下のツールがインストールされていることを確認してください。

Node.js (v14.16.1) またはそれ以上
NPM (v7.6.2) またはそれ以上
Android Studio Androidアプリ開発用
Xcode macOSのみでiOSアプリ開発用

注意: iOSアプリ開発はmacOSデバイス上のみ可能です。

‣ Capacitorプロジェクトの設定

Capacitorアプリケーションを作成するには、以下のコマンドをターミナルで実行してください。

npm init @capacitor/app

パッケージのインストールとプロジェクトの設定に従ってください。Capacitor v3では、プロジェクトディレクトリは以下のようになります。

www/
  css/
    style.css
  js/
    capacitor-welcome.js
  index.html
  manifest.json
.gitignore
capacitor.config.json
package.json
README.md

初期設定が完了したら、次のステップに進みます。

‣ プロジェクトの再構成

JavaScriptファイルをバンドルするためにViteを使用するので、プロジェクトを再構成してください。

作成新しいフォルダを作成します src __CAPGO_KEEP_0__
メインディレクトリ内に 作成 index.js 新しいスクリプトファイルを作成します src/.
__CAPGO_KEEP_1__ メインディレクトリ内に vite.config.js 作成
Vite設定ファイルを作成します メインディレクトリ内に capacitor-welcome.js 削除 www/js/.

__CAPGO_KEEP_2__

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 に適応

純粋な JavaScript で動作するようにファイルを変更する必要があります:

www/index.html

__CAPGO_KEEP_0__ のスクリプトインポートを削除してください PWA としてリリースしない場合は、Ionic PWA Elements を削除してください 削除してください

<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 要素を body から削除してください。 <capacitor-welcome> __CAPGO_KEEP_1__ のスクリプトインポートを削除してください。
を__CAPGO_KEEP_2__に更新してください。 capacitor.js これがバンドルされた JavaScript ファイルになります。 js/main.js削除してください
__CAPGO_KEEP_3__ js/capacitor-welcome.js import. ご利用の index.html は、現在使用可能です。

vite.config.js

Node.jsモジュールをバンドルするには Vite、出力先の指定が必要です。 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 この調整により、__CAPGO_KEEP_0__はファイルをバンドルせず、代わりにViteを使用できます。 false. This adjustment ensures that Capacitor does not bundle the files, allowing us to use Vite for that purpose instead.

これらの変更により、Capacitorアプリケーションの基本的な設定が完了し、純粋なJavaScriptでアプリケーションを開発する準備が整っています。

アプリケーション開発

基本的な設定が整った今、ここからアプリケーションロジックを書き始めることができます。 src/index.js ここでは、必要なNode.jsモジュールをインポートし、アプリケーションの機能を定義し、Capacitorのネイティブプラグインと相互作用することができます。

変更を加えたときに、Viteのビルドコマンドを実行してJavaScriptファイルをバンドルすることを忘れないでください。

vite build

__CAPGO_KEEP_0__が生成する main.js ファイルが www/js ディレクトリ内に生成され、 index.html ファイルが参照するようになります。

テストとデバッグ

Capacitorは、さまざまなプラットフォームでアプリケーションをテストするための便利な方法を提供します。

以下のコマンドを使用して、各プラットフォームの開発環境でアプリケーションを開くことができます。

npx cap add android
npx cap open android

For iOS (macOS only):

npx cap add ios
npx cap open ios

For Web/PWA:

npx cap serve

これらのコマンドを使用すると、Android Studio、Xcode、またはWebブラウザでアプリケーションを実行し、必要に応じてテストおよびデバッグできます。

‣ 結論

CapacitorJSを使用して、純粋なJavaScriptでクロスプラットフォームアプリケーションを開発することは、複数のプラットフォームに対して単一のコードベースでアプリケーションを作成するためのコスト効率の高いおよび効率的な方法です。このガイドを遵守することで、プロジェクトを設定し、Viteで再構成し、アプリケーションを開発用に準備しました。この基盤を利用して、強力で多面的なアプリケーションを構築する道筋が整っています。

Capacitorのネイティブプラグインを利用して、アプリケーションの機能を強化し、すべてのプラットフォームで徹底的なテストを実施してください。ハッピーコーディング!

Developing Cross-Platform Apps with CapacitorJS: A Step-by-Step Guide

CapacitorJSを使用している場合 Developing Cross-Platform Apps with CapacitorJS: A Step-by-Step Guide ネイティブプラグインの作業を計画する場合、__CAPGO_KEEP_0__ Plugin Directoryと接続し、__CAPGO_KEEP_0__ Plugin Directoryの製品ワークフローと連携してください。 Capgo Plugin Directory Capgo Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, __CAPGO_KEEP_0__ プラグイン __CAPGO_KEEP_1__ によって Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品ワークフローについて、 Capgo ネイティブビルド Capgo ネイティブビルドの製品ワークフローについて、

CapacitorJSを使用したクロスプラットフォームアプリケーションの開発: ステップバイステップガイド