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

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

クロスプラットフォームアプリケーションを作成する方法を学びましょう。CapacitorJSを使用して、Android、iOS、Web (PWA) のすべてのプラットフォームで、1 つの JavaScript コードベースでアプリケーションを作成できます。

記事のクレジット

マーティン・ドナディュー

ライター

バレリア

レビュアー

ジョーダン

エディター

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、ウェブ上で単一のJavaScriptコードベースを使用して、シンプルなウェブサイトをアプリケーションとして展開できるようにする技術です。このアプローチは、開発コストを大幅に削減し、コーディング効率を大幅に向上させます。

このガイドでは、追加のフレームワークを使用せずに、純粋な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

Capacitorを使用してクロスプラットフォームアプリを開発する 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

初期設定が完了したら、次のステップに進みます。

‣ プロジェクトの再構成

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

Create 作成 src メインディレクトリ内の新しいフォルダを作成
Create メインディレクトリ内の新しいスクリプトファイルを作成 index.js in src/.
Create 削除 vite.config.js メインディレクトリ内の新しいフォルダを作成
Remove Capacitor 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としてリリースしない場合は 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から <capacitor-welcome> スクリプトインポートを更新してください。
src/main.ts capacitor.js に js/main.js。これが、バンドルされたJavaScriptファイルになります。
を削除してください。 js/capacitor-welcome.js は、現在使用可能です。 index.html vite.config.js

Node.jsモジュールをバンドルするには、Vite

Node.jsモジュールをバンドルする Vite__CAPGO_KEEP_0__.config.json 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 capacitor.config.json ファイル、場所を探して "bundledWebRuntime": true プロパティを変更して falseに変更します。この調整により、Capacitor がファイルをバンドルしないようにします。その代わりに、Vite を使用できます。

これらの変更により、Capacitor アプリケーションの基本的な設定が完了し、純粋な JavaScript でアプリケーションを開発する準備が整いました。

‣ アプリケーション開発

基礎が整った今、アプリケーションロジックを書き始めることができます。ここでは、必要な Node.js モジュールをインポートし、アプリケーションの機能を定義し、__CAPGO_KEEP_0__ のネイティブプラグインと相互作用することができます。 src/index.js ファイル。ここでは、必要な Node.js モジュールをインポートし、アプリの機能を定義し、Capacitor のネイティブプラグインと相互作用することができます。

このコマンドは、__CAPGO_KEEP_0__ のアプリケーションロジックを含む

vite build

ファイルを生成します。これは、__CAPGO_KEEP_0__ のアプリケーションロジックを含む main.js ディレクトリにあります。これは、__CAPGO_KEEP_0__ のアプリケーションロジックを含む www/js ファイルが参照します。 index.html ‣ アプリケーション開発

‣ テストとデバッグ

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

Android の場合

npx cap add android
npx cap open android

iOS (macOS 限定)

npx cap add ios
npx cap open ios

CapacitorJSを使用したクロスプラットフォームアプリの開発

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

あなたは CapacitorJSを使用してクロスプラットフォームアプリケーションを開発するためのステップバイステップガイド native プラグインの作業計画に接続するには Capgo プラグインディレクトリ製品ワークフローについては、Capgo プラグインディレクトリを参照してください Capacitor プラグインはCapgoで提供されます製品ワークフローについては、Capacitor プラグインはCapgoで提供されますプラグインの追加または更新プラグインの追加または更新の実装詳細については、 Ionic Enterprise プラグインの代替製品ワークフローについては、Ionic Enterprise プラグインの代替、 Capgo ネイティブビルド製品ワークフローについては、Capgo ネイティブビルドを参照してください