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.

‣ Prerequisites

Before we begin, ensure you have the following tools installed:

Node.js (v14.16.1) or higher
NPM (v7.6.2) or higher
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ファイルをバンドルするので、プロジェクトを再構築してください:

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

あなたの新しいフォルダ構造は次のようになります。

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

‣ JavaScriptに適応する

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>

スクリプトインポートを <capacitor-welcome> から
に更新します。このファイルは、バンドルされたJavaScriptファイルになります。 capacitor.js スクリプトインポートを削除する js/main.jslive_update_dynamic_label_to
live_update_dynamic_label_to 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 を変更します。 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.

このコマンドは、以下のファイルを生成します。

vite build

ディレクトリ内に生成されるファイルは、以下のファイルが参照する必要があります。 main.js 以下のファイルが参照するディレクトリ内に生成されるファイルは、 www/js ‣ テストとデバッグ index.html __CAPGO_KEEP_0__は、さまざまなプラットフォームでアプリケーションをテストするための便利な方法を提供します。以下のコマンドを使用して、各プラットフォームの開発環境でアプリケーションを開きます。

Androidの場合:

Capacitor

__CAPGO_KEEP_0__

npx cap add android
npx cap open android

iOS (macOS 限定):

npx cap add ios
npx cap open ios

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 Plugin Directory Capgo Plugin Directoryの製品ワークフロー Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, プラグインの追加または更新 __CAPGO_KEEP_0__ プラグインの実装詳細についてイオニックエンタープライズプラグインの代替 __CAPGO_KEEP_0__ ネイティブビルド Capgo ネイティブビルドの製品ワークフローについて for the product workflow in Capgo Native Builds.

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