CapacitorJSによるクロスプラットフォームアプリ開発：ステップバイステップガイド

進化し続けるモバイルアプリ開発の世界において、Progressive Web Applications（PWA）の台頭は、新たなクロスプラットフォームランタイムへの道を切り拓きました。これらのランタイムにより、Webベースのアプリケーションは native code だけに頼ることなくアプリストアに展開できます。これを可能にする技術の一つが CapacitorJSであり、単一のJavaScriptコードベースでAndroid、iOS、Web向けにシンプルなWebサイトをアプリとしてデプロイできます。このアプローチにより開発コストを大幅に削減し、コーディング効率を高められます。

本ガイドでは、追加のフレームワークなしで純粋なJavaScriptを使ってアプリを作成する方法に焦点を当てます。2021年当時、純粋なJavaScriptでのアプリ開発リソースを見つけるのは難しい状況でしたが、CapacitorJSでアプリを構築し、ネイティブプラグインを活用するための包括的なチュートリアルを提供します。

‣ 事前準備

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

Node.js (v14.16.1) 以上
NPM (v7.6.2) 以上
デバッグ Androidアプリ開発用
iOSプロファイリング 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

初期セットアップが完了しました。これで準備は万端です。

‣ プロジェクトの再構成

JavaScriptファイルのbundleにはViteを使用するため、プロジェクトを以下のように再構成します：

作成します 新しいフォルダ src メインディレクトリ内に。
作成します 新しいスクリプトファイル index.js における src/.
作成します Viteの設定ファイル vite.config.js メインディレクトリ内にあります。
削除この 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

‣ 純粋な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>

以下の <capacitor-welcome> HTML要素をbodyから削除してください。
スクリプトのimport元を capacitor.js まで js/main.jsに更新します。これがbundleされたJavaScriptファイルになります。
以下の js/capacitor-welcome.js importを削除します。これで index.html の準備が完了しました。

vite.config.js

Node.jsモジュールを以下でbundleするには 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 を使用できるようになります。

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

‣ アプリの開発

土台が整ったので、次は src/index.js ファイルにアプリケーションのロジックを書き込み始めましょう。ここでは、必要な Node.js モジュールのインポート、アプリの機能定義、そして Capacitor のネイティブプラグインとの連携が可能です。

JavaScriptファイルを変更した際は、必ずViteのbuildコマンドを実行してbundleを作成してください：

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

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

‣ まとめ

純粋なJavaScriptでCapacitorJSを使ったクロスプラットフォームアプリ開発は、単一のコードベースで複数のプラットフォーム向けアプリを作れる、コスト効率が高く効率的な方法です。このガイドに沿って、プロジェクトのセットアップ、Vite向けの再構成、開発の準備が整いました。この基盤があれば、堅牢で汎用性の高いアプリケーションの構築に向けて順調に進められます。

すべてのプラットフォームで徹底的にテストし、Capacitorのネイティブプラグインを活用してアプリの機能を高めましょう。Happy coding!

「CapacitorJSによるクロスプラットフォームアプリ開発：ステップバイステップガイド」の続きを読む

使用している場合 CapacitorJSによるクロスプラットフォームアプリ開発：ステップバイステップガイド ネイティブプラグインの作業を計画するには、次と連携してください： Capgo プラグインディレクトリ Capgo プラグインディレクトリのプロダクトワークフローについては、 Capgo による Capacitor プラグイン Capgo による Capacitor プラグインの実装詳細については、プラグインの追加または更新プラグインの追加または更新に関する実装詳細については、 Ionic Enterprise プラグインの代替案 Ionic Enterprise Plugin Alternatives のプロダクトワークフロー、および Capgo Native Build Capgo Native Builds のプロダクトワークフローについては、