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

モバイルアプリケーション開発の進化する世界において、プログレッシブ・ウェブ・アプリケーション（PWA）の台頭は新しいクロスプラットフォームのランタイムの道を開きました。これらのランタイムは、ネイティブコードのみに依存することなく、ウェブベースのアプリケーションをアプリストアに展開できるようにします。このプロセスをサポートする技術の一つがCapacitorJSであり、開発者は単一のJavaScriptコードベースを使用してAndroid、iOS、およびウェブのアプリケーションとしてシンプルなウェブサイトを展開できます。このアプローチは、開発コストを大幅に削減し、コーディングの効率を高めます。

このガイドでは、追加のフレームワークを使用せずに純粋なJavaScriptでアプリケーションを作成することに焦点を当てます。2021年における純粋なJavaScriptアプリ開発のリソースを見つけることの難しさにもかかわらず、私たちはアプリケーションを構築し、CapacitorJSでネイティブプラグインを活用するための包括的なチュートリアルを提供するためにここにいます。

‣ 前提条件

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

Node.js (v14.16.1) 以上
NPM (v7.6.2) 以上
Android Studio for Androidアプリ開発
Xcode for 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ファイルをバンドルするので、プロジェクトを次のように再構築します：

新しいフォルダーsrcをメインディレクトリに作成します。
新しいスクリプトファイルindex.jsをsrc/に作成します。
メインディレクトリにVite設定ファイルvite.config.jsを作成します。
www/js/からcapacitor-welcome.jsファイルを削除します。

新しいフォルダ構造は以下のようになります：

src/
  index.js
www/
  css/
    style.css
  js/
  index.html
  manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js

‣ 純粋なJavaScriptへの適応

純粋なJavaScriptで作業するためにいくつかのファイルを修正しましょう：

www/index.html

アプリをPWAとしてリリースしない場合、Ionic PWA Elementsのためのスクリプトインポートを削除します：

<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>

ボディから<script type="module" src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"> HTML要素を削除します。
スクリプトインポートをcapacitor.jsからjs/main.jsに更新します。これがバンドルされたJavaScriptファイルになります。
js/capacitor-welcome.jsのインポートを削除します。これでindex.htmlは準備完了です。

vite.config.js

Node.jsモジュールをViteでバンドルするために、バンドルされたスクリプトの出力先を指定する設定ファイルが必要です。以下の設定は、src/index.jsファイルを取り込み、www/js/main.jsとしてプロダクション用にバンドルします：

import { defineConfig } from 'vite';
import path from '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を使用できるようにします。

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

‣ アプリの開発

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

変更を加えるたびに、JavaScriptファイルをバンドルするためにViteのビルドコマンドを実行することを忘れないでください：

vite build

このコマンドは、www/jsディレクトリ内にmain.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

これらのコマンドを使用すると、Android Studio、Xcode、またはウェブブラウザーでアプリケーションを実行でき、必要に応じてテストおよびデバッグを行うことができます。

‣ 結論

純粋なJavaScriptを使用してCapacitorJSでクロスプラットフォームのアプリケーションを開発することは、単一のコードベースで複数のプラットフォーム用のアプリを作成するためのコスト効果が高く効率的な方法です。このガイドに従って、プロジェクトを設定し、Vite用に再構築し、アプリの開発の準備を整えました。この基盤をもとに、頑丈で多用途のアプリケーションを構築する道を進んでいます。

すべてのプラットフォームでしっかりとテストし、Capacitorのネイティブプラグインを活用してアプリの機能を向上させることを忘れないでください。楽しいコーディングを！