WebViewアプリをつくるためのライブラリ「Capacitor」の設定可能項目一覧

Capacitor は、WebView を使用して iOS/Android アプリを作成するためのモダンなハイブリッドアプリ開発ツールです。その柔軟性と拡張性の鍵を握るのが、capacitor.config.ts (もしくは capacitor.config.json) ファイルに記述される設定項目です。

この記事では、CapacitorConfig インターフェースの各項目を説明していきます。かなり多くの設定項目があり、大体やりたいことはできるので、WebViewアプリの開発を検討している方、もしくはすでにCapacitorを利用している方の参考になれば嬉しいです。

基本設定

• appId (文字列, オプション): アプリのユニークな識別子です。iOS では Bundle ID、Android では Application ID に相当します。リバースドメイン名表記（例: com.example.myapp）で記述する必要があります。これは、App Store や Google Play に公開する際に必須となります。

• appName (文字列, オプション): アプリの分かりやすい名前です。App Store/Google Play に表示される名前として使用されます。プラットフォーム固有の設定で変更することも可能です。

• webDir (文字列, オプション): コンパイル済みのウェブアセットのディレクトリです。アプリの index.html を含むディレクトリを指定します。デフォルトは www です。

• bundledWebRuntime (boolean, オプション, 非推奨): Capacitor ランタイムバンドルをコピーするかどうかを指定します。バンドラを使用していない場合に true を設定します。capacitor.js を index.html に追加する必要があります。Capacitor 5.0.0 から非推奨となり、将来削除される予定です。

ログとユーザーエージェント

• loggingBehavior ('none' | 'debug' | 'production', オプション): ネイティブコードとJavaScriptのログ出力に関する設定です。debug (開発時のみログ出力)、production (常にログ出力)、none (ログ出力なし) から選択します。デフォルトは debug です。

• overrideUserAgent (文字列, オプション): Capacitor WebView のユーザーエージェントを完全に上書きします。

• appendUserAgent (文字列, オプション): Capacitor WebView のユーザーエージェントに文字列を追加します。overrideUserAgent が設定されている場合は無視されます。

• backgroundColor (文字列, オプション): Capacitor WebView の背景色を設定します。

• zoomEnabled (boolean, オプション): Capacitor WebView でのズームを有効にするかどうかを指定します。デフォルトは false です。

プラットフォーム固有の設定

Capacitor は、Android と iOS の両方をサポートしています。プラットフォームごとに、より詳細な設定を行うことができます。

Android 設定 (android オブジェクト)

• path (文字列, オプション): ネイティブ Android プロジェクトへのパスを指定します。デフォルトは android です。
• overrideUserAgent, appendUserAgent, backgroundColor, zoomEnabled: グローバル設定を上書きするプラットフォーム固有のユーザーエージェント、追加文字列、背景色、ズーム有効化設定です。
• allowMixedContent (boolean, オプション): 開発中に、異なるスキームからのファイル読み込みを許可するために、混合コンテンツを有効にすることができます。本番環境では無効にする必要があります。 デフォルトは false です。
• captureInput (boolean, オプション): 簡素化されたキーボードを使用するかどうかを指定します。デフォルトは false です。
• webContentsDebuggingEnabled (boolean, オプション): デバッグ可能なウェブコンテンツを常に有効にするかどうかを指定します。開発中は自動的に有効になります。デフォルトは false です。
• loggingBehavior: グローバル設定を上書きするAndroid固有のログ出力設定です。
• includePlugins: npx cap sync で含めるプラグインのホワイトリストです。グローバル設定を上書きします。
• flavor (文字列, オプション): Android のビルドフレーバーを指定します。
• initialFocus (boolean, オプション): WebView に初期フォーカスを与えるかどうか。デフォルトは true です。
• minWebViewVersion, minHuaweiWebViewVersion (数値, オプション): アプリでサポートされる最小のWebViewバージョンを指定します。
• buildOptions (オブジェクト, オプション): Android アプリのビルドオプションを指定します。keystorePath, keystorePassword, keystoreAlias, keystoreAliasPassword, releaseType, signingType を含みます。
• useLegacyBridge (boolean, オプション): 従来の addJavascriptInterface を使用するかどうかを指定します。デフォルトは false で、より安全な addWebMessageListener を使用します。

iOS 設定 (ios オブジェクト)

• path (文字列, オプション): ネイティブ iOS プロジェクトへのパスを指定します。デフォルトは ios です。
• scheme (文字列, オプション): iOS ビルドスキームを指定します。デフォルトは App です。
• overrideUserAgent, appendUserAgent, backgroundColor, zoomEnabled: グローバル設定を上書きするプラットフォーム固有のユーザーエージェント、追加文字列、背景色、ズーム有効化設定です。
• contentInset ('automatic' | 'scrollableAxes' | 'never' | 'always', オプション): スクロールビューのコンテンツインセット調整動作を設定します。デフォルトは never です。
• scrollEnabled (boolean, オプション): スクロールビューをスクロール可能にするかどうかを設定します。
• cordovaLinkerFlags (文字列配列, オプション): Cordova プラグインをコンパイルするためのカスタムリンカーフラグを設定します。
• allowsLinkPreview (boolean, オプション): リンクを押したときのプレビューを許可するかどうかを設定します。
• loggingBehavior: グローバル設定を上書きするiOS固有のログ出力設定です。
• includePlugins: npx cap sync で含めるプラグインのホワイトリストです。グローバル設定を上書きします。
• limitsNavigationsToAppBoundDomains (boolean, オプション): WKWebView の limitsNavigationsToAppBoundDomains 設定を行います。デフォルトは false です。
• preferredContentMode ('recommended' | 'desktop' | 'mobile', オプション): WebView のコンテンツモードを設定します。デフォルトは recommended です。
• handleApplicationNotifications (boolean, オプション): Capacitor がローカル/プッシュ通知を処理するかどうかを設定します。デフォルトは true です。
• webContentsDebuggingEnabled (boolean, オプション): リリースビルドでデバッグ可能なウェブコンテンツを有効にするかどうかを設定します。

サーバー設定

• server オブジェクト: ローカル開発サーバーに関する設定です。
  • hostname (文字列, オプション): ローカルホスト名を設定します。デフォルトは localhost です。
  • iosScheme, androidScheme (文字列, オプション): iOS と Android のローカルスキームを設定します。デフォルトはそれぞれ capacitor と https です。
  • url (文字列, オプション): ライブリロードサーバーなどの外部URLをWebViewで読み込むために使用します。本番環境では使用しないでください。
  • cleartext (boolean, オプション): クリアテキストトラフィックを許可するかどうかを指定します。本番環境では使用しないでください。 デフォルトは false です。
  • allowNavigation (文字列配列, オプション): WebView がナビゲートできる追加のURLを設定します。本番環境では使用しないでください。 デフォルトは空配列です。
  • errorPath (文字列, オプション): エラー発生時に表示するローカルHTMLページのパスを指定します。

Cordova 設定 (cordova オブジェクト)

• accessOrigins (文字列配列, オプション): config.xml の <access> タグに設定されるオリジンを指定します。
• preferences (オブジェクト, オプション): Cordova のプリファレンスを設定します。
• staticPlugins (文字列配列, オプション): 静的プラグインとして扱う必要があるプラグインを指定します。

プラグイン設定 (plugins オブジェクト)

• plugins オブジェクト: 各プラグイン固有の設定を指定します。プラグイン名と、その設定オブジェクトをキーバリューペアで指定します。

グローバルプラグインインクルード (includePlugins 配列)

• includePlugins (文字列配列, オプション): npx cap sync で含めるプラグインのホワイトリストです。

Capacitor Cookies と Capacitor Http の設定

plugins オブジェクトの下に、CapacitorCookies と CapacitorHttp の設定ができます。

• CapacitorCookies.enabled (boolean, オプション): ネイティブでグローバルな document.cookie を上書きするかどうかを設定します。デフォルトは false です。
• CapacitorHttp.enabled (boolean, オプション): ネイティブでグローバルな fetch と XMLHttpRequest を上書きするかどうかを設定します。デフォルトは false です。

まとめ

これらの設定項目を適切に調整することで、Capacitor アプリのパフォーマンス、セキュリティ、ユーザーエクスペリエンスを最適化することができます。各項目の用途と制限事項を理解し、あなたのアプリのニーズに合わせた設定を行うようにしてください。

それではまた。