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にアプリケーションを展開するために、単一のJavaScriptコードベースを使用して、シンプルなウェブサイトをアプリケーションとして実装することを可能にします。このアプローチは、開発コストを大幅に削減し、コーディング効率を高めます。

このガイドでは、CapacitorJSを使用して、純粋なJavaScriptでアプリケーションを作成し、ネイティブプラグインを利用する方法について説明します。2021年には、純粋なJavaScriptアプリケーション開発のためのリソースを探すのは難しかったですが、ここでは、CapacitorJSを使用してアプリケーションを作成し、ネイティブプラグインを利用するための包括的なチュートリアルを提供します。

‣ 必要な前提条件

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

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

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

‣ Setting Up Your Capacitor Project

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

メインディレクトリに新しいフォルダを作成 メインディレクトリに新しいスクリプトファイルを作成 src __CAPGO_KEEP_0__
__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ index.js in src/.
Create Capacitor.jsを使用してクロスプラットフォームアプリを開発する vite.config.js Capacitor.jsを使用してクロスプラットフォームアプリを開発する
Remove the capacitor-welcome.js file from www/js/.

Your new folder structure should resemble:

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

Let's modify some files to work with pure JavaScript:

www/index.html

Remove the script imports for Ionic PWA Elements if you’re not releasing the app as a 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>

Delete the <capacitor-welcome> HTML element from the body.
Update the script import from capacitor.js to js/main.js. This will be our bundled JavaScript file.
Remove the js/capacitor-welcome.js import. Your index.html は完成しました。

vite.config.js

To bundle our Node.js modules with Vite、Capacitor.jsでクロスプラットフォームアプリを開発する際には、 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

プロパティ capacitor.config.json __CAPGO_KEEP_0__ "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.

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__ src/index.js Capacitor

Capacitorを使用してクロスプラットフォームアプリを開発する

vite build

このコマンドは 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の場合:

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

CapacitorJSを使用したクロスプラットフォームアプリケーションの開発は、単一のコードベースで複数のプラットフォーム向けにアプリケーションを作成するためのコスト効率の高い方法です。このガイドを遵守することで、プロジェクトを設定し、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 CapacitorJSのネイティブプラグインの作業計画に使用するには、__CAPGO_KEEP_0__ Plugin Directoryと接続してください。 Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, CapacitorJSのプラグイン CapacitorJSのプラグインイオニックエンタープライズプラグインの代替イオニックエンタープライズプラグインのワークフローについて Capgo ネイティブビルド Capgo ネイティブビルドのワークフローについて

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