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 プロジェクトの設定

To create a Capacitor application, navigate to your desired folder and execute the following command in your terminal:

npm init @capacitor/app

Follow 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ファイルをバンドルするので、プロジェクトを再構築してください:

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ src __CAPGO_KEEP_0__
作成 __CAPGO_KEEP_0__ index.js に src/.
作成 __CAPGO_KEEP_0__ 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

‣ Pure JavaScript に適応する

Pure JavaScript を使用するには、以下のファイルを変更する必要があります:

www/index.html

Ionic PWA Elements のスクリプトインポートを削除する必要があります (PWA としてリリースしない場合) Ionic PWA Elements の 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>

に更新します。このファイルは、バンドルされた JavaScript ファイルになります。 <capacitor-welcome> スクリプトインポートを削除します。
Ionic PWA Elements のスクリプトインポートを削除する必要があります (PWA としてリリースしない場合) capacitor.js Ionic PWA Elements の HTML 要素を削除します。 js/main.jsスクリプトインポートを
に更新します。このファイルは、バンドルされた JavaScript ファイルになります。 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

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

With these changes, your Capacitor application’s basic setup is complete, and you’re ready to start developing your app with pure JavaScript.

‣ アプリの開発

基本的な設定が完了したので、Pure JavaScriptでアプリを開発する準備が整いました。 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.

ここで、必要なNode.jsモジュールをインポートし、アプリの機能を定義し、CapacitorJSのネイティブプラグインと相互作用することができます。

vite build

変更を加えたときにJavaScriptファイルをバンドルするためにViteのビルドコマンドを実行してください。 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:

CapacitorJSは、さまざまなプラットフォームでアプリをテストするための便利な方法を提供します。次のコマンドを使用して、各プラットフォームの開発環境でアプリを開いてください。

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を使用したクロスプラットフォームアプリケーションの開発: ステップバイステップガイド