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

‣ 必要なもの

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

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

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

Capacitorパッケージをインストールしてプロジェクトを設定するプロンプトに従ってください。Capgo 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/.
フォルダ内に新しいスクリプトファイルを作成する __CAPGO_KEEP_0__ファイル vite.config.js __CAPGO_KEEP_0__ディレクトリ内
削除 the capacitor-welcome.js __CAPGO_KEEP_0__を 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

Ionic PWA Elementsのスクリプトインポートを if you’re not releasing the app as a PWA: Your new folder structure should resemble:‣ Pure JavaScriptに適応する

<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 から削除します。 js/main.jsから
に変更します。 js/capacitor-welcome.js は不要です。 index.html は完成です。

vite.config.js

Viteを使用して 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を使用できます。

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

‣ アプリケーション開発

Capgoアプリケーションの基本設定が完了したので、アプリケーションロジックを書き始めることができます。 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.

Capgoアプリケーションを開発する際は、Viteのビルドコマンドを実行してください。

vite build

このコマンドは、JavaScriptファイルをビルドするために使用されます。 main.js ファイルは、ディレクトリ内にあります。ファイルはそのディレクトリを参照します。 www/js ディレクトリ内にあるファイルは、ディレクトリ内のファイルを参照します。 index.html ‣ テストとデバッグ

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

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:

For iOS (macOS only):

npx cap add android
npx cap open android

For Web/PWA:

npx cap add ios
npx cap open ios

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

npx cap serve

‣ 結論

CapacitorJSを使用して、純粋なJavaScriptでクロスプラットフォームアプリケーションを開発することは、複数のプラットフォームに対応するために単一のコードベースを使用することで、コスト効率が高く効率的な方法です。このガイドを遵守することで、プロジェクトを設定し、Viteで構造化し、アプリケーションを開発用に準備しました。この基盤を利用して、強力で多機能なアプリケーションを構築する道筋が整っています。

__CAPGO_KEEP_0__のネイティブプラグインを利用して、アプリケーションの機能を強化し、すべてのプラットフォームで徹底的にテストしてください。ご活用いただけますよう、幸せな開発を!

Capacitor

CapacitorJSを使用してクロスプラットフォームアプリを開発するためのステップバイステップガイドを続ける

CapacitorJSを使用している場合 CapacitorJSを使用してクロスプラットフォームアプリを開発するためのステップバイステップガイド ネイティブプラグインの作業を計画する場合、CloudflareのCapacitorJSを使用して Capgo プラグインディレクトリ Capgo プラグインディレクトリ内での製品ワークフロー Capacitor Plugins by Capgo Capgo によって提供される Capacitor プラグイン __CAPGO_KEEP_0__ プラグイン __CAPGO_KEEP_1__ によって提供される __CAPGO_KEEP_0__ プラグインの実装詳細プラグインの追加または更新プラグインの追加または更新の実装詳細 Capgo Native Builds Capgo Native Builds

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