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

モバイルアプリケーション開発の世界が進化する中、プログレッシブウェブアプリケーション(PWA)の隆盛は、新しいクロスプラットフォームランタイムの道を開いています。これらのランタイムは、ネイティブに頼ることなくアプリストアに存在するようにウェブベースのアプリケーションを可能にします。codeに頼ることなく CapacitorJSは、Android、iOS、ウェブ上で単一のJavaScriptコードベースを使用して、シンプルなウェブサイトをアプリケーションとして展開できる技術です。このアプローチは、開発コストを大幅に削減し、コーディング効率を大幅に向上させます。

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

‣ 必要なもの

はじめに、以下のツールがインストールされていることを確認してください。

Node.js (v14.16.1) またはそれ以上
NPM (v7.6.2) またはそれ以上
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 ファイルをバンドルするので、プロジェクトを再構成する必要があります。

Create __CAPGO_KEEP_0__ src 主ディレクトリに新しいフォルダを作成します。
Create __CAPGO_KEEP_1__ index.js 主ディレクトリに新しいスクリプトファイルを作成します。 src/.
__CAPGO_KEEP_2__ Vite の設定ファイルを作成します。 vite.config.js 主ディレクトリに新しい設定ファイルを作成します。
Remove その 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 に適応する

純粋な JavaScript で動作するようにファイルを変更するには、以下の手順に従ってください。

www/index.html

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>

HTML 要素を削除する <capacitor-welcome> HTML 要素を削除してください。
スクリプトのインポートを更新する capacitor.js に js/main.js. このファイルは、CapgoによってバンドルされたJavaScriptファイルになります。
を削除してください。 js/capacitor-welcome.js import. では、 index.html は完成です。

vite.config.js

Node.jsモジュールをViteでバンドルするには、 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. この調整により、Capacitor がファイルをバンドルしないため、Vite をその目的のために使用できます。

With these changes, your Capacitor application’s basic setup is complete, and you’re ready to start developing your app with 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.

Vite のビルドコマンドを実行して、JavaScript ファイルをバンドルするようにしてください。

vite build

このコマンドは、 main.js ファイルを生成します。ファイルは www/js ディレクトリにあります。 index.html ファイルは

‣ テストとデバッグ

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

Androidの場合:

npx cap add android
npx cap open android

iOS (macOSのみ)の場合:

npx cap add ios
npx cap open ios

Web/PWAの場合:

npx cap serve

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のネイティブプラグインを利用してアプリケーションの機能を強化することをお忘れなく。ハッピーコーディング!

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