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

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

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

‣ 必要な前提条件

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

Node.js (v14.16.1) or higher
NPM (v7.6.2) or higher
Android Studio __CAPGO_KEEP_0__ を使用した 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ファイルをバンドルするので、プロジェクトを再構成してみましょう：

Create メインディレクトリ内の新しいフォルダを作成 src Create
メインディレクトリ内の新しいスクリプトファイルを作成 in index.js Create src/.
メインディレクトリ内のViteの設定ファイルを作成 __CAPGO_KEEP_0__ vite.config.js __CAPGO_KEEP_0__
削除ファイルを削除 capacitor-welcome.js あなたの新しいフォルダ構造は次のようになります。 www/js/.

‣ Pure JavaScript に適応する

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 で動作するようにファイルを変更する必要があります。

www/index.html

Ionic PWA Elements のスクリプトインポートを削除

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>

body から HTML 要素を削除してください。 <capacitor-welcome> body から HTML 要素を削除してください。
スクリプトのインポートを更新してください capacitor.js から js/main.js. これが、バンドルされたJavaScriptファイルになります。
を削除してください。 js/capacitor-welcome.js は index.html が使用可能になりました。

vite.config.js

Vite でNode.jsモジュールをバンドルするには、出力先を指定するための設定ファイルが必要です。は、バンドルされたスクリプトの出力先を指定する設定ファイルです。 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

In the file, locate the property and change it to . capacitor.config.json ファイル内でプロパティを探し、値をに変更してください。 "bundledWebRuntime": true This adjustment ensures that __CAPGO_KEEP_0__ does not bundle the files, allowing us to use Vite for that purpose instead. 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_KEEP_0__アプリケーションの基本設定が完了し、純粋なJavaScriptでアプリケーションを開発する準備が整います。

‣ Developing Your App 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.

Now that the groundwork is laid, you can begin writing your application logic in the file.

vite build

基本設定が完了したので、ファイル内でアプリケーションロジックを記述することができます。 main.js Here, you can import any necessary Node.js modules, define your app’s functionality, and interact with __CAPGO_KEEP_0__’s native plugins. www/js ここでは、必要なNode.jsモジュールをインポートし、アプリケーションの機能を定義し、__CAPGO_KEEP_0__のネイティブプラグインと相互作用することができます。 index.html __CAPGO_KEEP_0__を参照するファイルが必要です。

‣ テストとデバッグ

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

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

‣ 結論

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

すべてのプラットフォームで徹底的にテストし、Capacitorのネイティブプラグインを利用して、アプリケーションの機能を強化することを忘れないでください。ハッピーコーディング！

Developing Cross-Platform Apps with CapacitorJS: A Step-by-Step Guideから続けて進んでください。

あなたが使用している場合 CapacitorJSを使用したクロスプラットフォームアプリの開発: ステップバイステップガイド native プラグインの作業を計画するには、__CAPGO_KEEP_0__と接続する必要があります Capgo プラグインディレクトリ Capgo プラグインディレクトリの製品ワークフローについて Capacitor プラグインはCapgoによって提供されます Capacitor プラグインの実装詳細については、Capacitor プラグインはCapgoによって提供されますプラグインの追加または更新プラグインの追加または更新の実装詳細については Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品ワークフローについて Capgo ネイティブビルド Capgo ネイティブビルドの製品ワークフローについて

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