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、は、Android、iOS、Web（PWA）で単一のJavaScriptコードベースを使用して、シンプルなウェブサイトをアプリケーションとして展開できるように開発者にします。このアプローチは、開発コストを大幅に削減し、コーディング効率を大幅に向上させます。

このガイドでは、CapacitorJSを使用してアプリケーションを作成し、ネイティブプラグインを利用するための、純粋なJavaScriptでのアプリケーション開発のための包括的なチュートリアルを提供します。

‣ 必要な前提条件

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

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

注意: 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

初期設定が完了したら、進められます。

‣ プロジェクトの構造化

Viteを使用してJavaScriptファイルをバンドルするので、プロジェクトを再構成してみましょう:

Create メインディレクトリに新しいフォルダを作成 src Create
メインディレクトリに新しいスクリプトファイルを作成 __CAPGO_KEEP_0__ index.js に src/.
Create のVite configファイル vite.config.js のディレクトリ内に
をから capacitor-welcome.js のフォルダ構造は次のようになります。 www/js/.

‣ Pure JavaScriptに適応する

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で動作するようにファイルを変更する

www/index.html

Pure JavaScriptのスクリプトのインポートを削除する

__CAPGO_KEEP_0__ Ionic PWA Elements PWAをリリースしない場合は

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

削除する <capacitor-welcome> body内からHTML要素を削除します。
importを capacitor.js から js/main.js. このファイルは、バンドルされたJavaScriptファイルになります。
importを削除します。 js/capacitor-welcome.js は、現在準備ができています。 index.html vite.config.js

Node.jsモジュールをバンドルするにはこのファイルを使用してください。

To bundle our Node.js modules with Vite, we need a config file specifying the output destination for our bundled script. The following configuration will take the file src/index.js __CAPGO_KEEP_0__.config.json 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

__CAPGO_KEEP_0__ capacitor.config.json file, locate the "bundledWebRuntime": true __CAPGO_KEEP_0__ false. This adjustment ensures that Capacitor does not bundle the files, allowing us to use Vite for that purpose instead.

Capacitor

‣ Developing Your App

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

JavaScriptファイルを変更したときは、常にViteのビルドコマンドを実行してください。

vite build

This command will generate the main.js ファイルが生成されます。 www/js ディレクトリ内に生成される index.html ファイルは、

ファイルが参照します。

Capacitor provides a convenient way to test your application on various platforms. Use the following commands to open your app in the respective platform’s development environment:

__CAPGO_KEEP_0__は、さまざまなプラットフォームでアプリケーションをテストするための便利な方法を提供します。以下のコマンドを使用して、各プラットフォームの開発環境でアプリケーションを開くことができます。

npx cap add android
npx cap open android

Android用:

npx cap add ios
npx cap open ios

iOS (macOSのみ):

npx cap serve

Web/PWA用:

These commands will allow you to run your application in Android Studio, Xcode, or your web browser, where you can test and debug as needed.

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 Plugin Directory Capgo Plugins by __CAPGO_KEEP_1__ Capacitor Plugins by Capgoの実装詳細 for the implementation detail in Capacitor Plugins by Capgo, Adding or Updating Pluginsの実装詳細 __CAPGO_KEEP_0__ Ionic Enterprise Plugin Alternatives Ionic Enterprise Plugin Alternativesの製品ワークフローについて Capgo Native Builds Capgo Native Buildsの製品ワークフローについて