Tauriの基礎 - 設定ファイルのソースを表示

== 概要 ==
<u>tauri.conf.json</u> ファイルは、Tauriアプリケーションの動作を制御するための設定ファイルである。<br>
このファイルは、<u>src-tauri</u> ディレクトリ内に配置される。<br>
<br>
Tauriプロジェクトのビルド設定、ウインドウ設定、バンドル設定等、アプリケーション全体の設定を一元管理する。<br>
JSON形式で記述され、開発時と本番ビルド時の両方で参照される。<br>
<br>
主な設定カテゴリは以下の通りである。<br>
<br>
<center>
{| class="wikitable"
|+ tauri.conf.jsonファイルの主な設定カテゴリ
! 設定カテゴリ !! 説明
|-
| <code>productName</code> と <code>version</code> || アプリケーションの基本情報
|-
| <code>identifier</code> || アプリケーションの一意識別子
|-
| <code>app</code> || ウインドウやセキュリティの設定
|-
| <code>build</code> || ビルドプロセスの設定
|-
| <code>bundle</code> || インストーラやパッケージングの設定
|}
</center>
<br><br>

== 基本構造 ==
<u>tauri.conf.json</u> ファイルの基本構造を以下に示す。<br>
このファイルは、<u>src-tauri/tauri.conf.json</u> として配置される。<br>
<br>
 <syntaxhighlight lang="json">
 {
   "productName": "MyApp",
   "version": "1.0.0",
   "identifier": "com.example.myapp",
   "build": {
     ...
   },
   "app": {
     ...
   },
   "bundle": {
     ...
   }
 }
 </syntaxhighlight>
<br>
下表に、tauri.conf.jsonファイルの主要なセクションを示す。<br>
<br>
<center>
{| class="wikitable"
|+ 主要セクションの一覧
! セクション !! 説明
|-
| <code>productName</code> || アプリケーションの製品名
|-
| <code>version</code> || アプリケーションのバージョン番号
|-
| <code>identifier</code> || アプリケーションの一意識別子 (逆ドメイン記法)
|-
| <code>build</code> || ビルドプロセスに関する設定
|-
| <code>app</code> || ウインドウ、セキュリティ、グローバル設定
|-
| <code>bundle</code> || パッケージングとインストーラに関する設定
|}
</center>
<br><br>

== app設定 ==
<code>app</code> セクションでは、ウインドウの設定、セキュリティ設定、グローバルTauri設定を行う。<br>
<br>
==== windows設定 ====
<code>windows</code> 配列には、アプリケーションで使用するウインドウの設定を記述する。<br>
複数のウインドウを定義することができる。<br>
<br>
 <syntaxhighlight lang="json">
 {
   "app": {
     "windows": [
       {
         "label": "main",
         "title": "My Application",
         "width": 800,
         "height": 600,
         "resizable": true,
         "fullscreen": false,
         "decorations": true,
         "transparent": false,
         "minWidth": 400,
         "minHeight": 300,
         "center": true,
         "url": "index.html"
       }
     ]
   }
 }
 </syntaxhighlight>
<br>
下表に、主なウインドウ設定項目を示す。<br>
<br>
<center>
{| class="wikitable"
|+ ウインドウ設定項目の一覧
! プロパティ !! 型 !! 説明
|-
| <code>label</code> || string || ウインドウの一意識別子 (必須)
|-
| <code>title</code> || string || ウインドウのタイトル
|-
| <code>width</code> || number || ウインドウの幅 (ピクセル)
|-
| <code>height</code> || number || ウインドウの高さ (ピクセル)
|-
| <code>resizable</code> || boolean || リサイズ可否
|-
| <code>fullscreen</code> || boolean || フルスクリーン表示
|-
| <code>decorations</code> || boolean || ウインドウ装飾 (タイトルバー等) の表示
|-
| <code>transparent</code> || boolean || 透明ウインドウの有効化
|-
| <code>minWidth</code> || number || 最小幅 (ピクセル)
|-
| <code>minHeight</code> || number || 最小高さ (ピクセル)
|-
| <code>center</code> || boolean || 起動時に画面中央に配置
|-
| <code>url</code> || string || 読み込むHTMLファイルのパス
|}
</center>
<br>
==== withGlobalTauri設定 ====
<code>withGlobalTauri</code> をtrueに設定すると、<code>window.__TAURI__</code> としてTauri APIにグローバルアクセスできる。<br>
バンドラを使用せずに直接APIを呼び出す場合に便利である。<br>
<br>
 <syntaxhighlight lang="json">
 {
   "app": {
     "withGlobalTauri": true
   }
 }
 </syntaxhighlight>
<br>
==== security設定 ====
<code>security</code> セクションでは、コンテンツセキュリティポリシー (CSP) 等のセキュリティ設定を行う。<br>
<br>
 <syntaxhighlight lang="json">
 {
   "app": {
     "security": {
       "csp": null
     }
   }
 }
 </syntaxhighlight>
<br>
CSPをカスタマイズする場合は、文字列でポリシーを指定する。<br>
<br><br>

== build設定 ==
<code>build</code> セクションでは、開発サーバと本番ビルドのプロセスを設定する。<br>
フロントエンドのビルドツールとの連携を定義する。<br>
<br>
 <syntaxhighlight lang="json">
 {
   "build": {
     "beforeDevCommand": "pnpm dev",
     "beforeBuildCommand": "pnpm build",
     "devUrl": "http://localhost:5173",
     "frontendDist": "../dist"
   }
 }
 </syntaxhighlight>
<br>
下表に、各設定項目を示す。<br>
<br>
<center>
{| class="wikitable"
|+ build設定項目の一覧
! プロパティ !! 説明
|-
| <code>beforeDevCommand</code> || <code>tauri dev</code> コマンド実行前に実行するコマンド<br>通常はフロントエンドの開発サーバ起動コマンドを指定
|-
| <code>beforeBuildCommand</code> || <code>tauri build</code> コマンド実行前に実行するコマンド<br>通常はフロントエンドのビルドコマンドを指定
|-
| <code>devUrl</code> || 開発サーバのURL<br>ホットリロード用のフロントエンドサーバのアドレス
|-
| <code>frontendDist</code> || ビルド済みフロントエンドの出力ディレクトリ<br>本番ビルド時に参照される。
|}
</center>
<br>
<u><code>beforeDevCommand</code> と <code>beforeBuildCommand</code> は、パッケージマネージャに合わせて適切に設定する。</u><br>
例えば、npmの場合は <code>npm run dev</code>、pnpmの場合は <code>pnpm dev</code> とする。<br>
<br><br>

== bundle設定 ==
<code>bundle</code> セクションでは、アプリケーションのパッケージングとインストーラ生成に関する設定を行う。<br>
<br>
 <syntaxhighlight lang="json">
 {
   "bundle": {
     "active": true,
     "targets": "all",
     "icon": [
       "icons/32x32.png",
       "icons/128x128.png",
       "icons/icon.icns",
       "icons/icon.ico"
     ],
     "publisher": "My Company Inc.",
     "category": "Utility",
     "resources": ["./resources/*"],
     "windows": {
       "nsis": {
         "installMode": "perUser"
       }
     },
     "linux": {
       "deb": {},
       "rpm": {},
       "appimage": {}
     },
     "macOS": {
       "dmg": {}
     }
   }
 }
 </syntaxhighlight>
<br>
==== targets設定 ====
<code>targets</code> では、生成するパッケージ形式を指定する。<br>
<code>"all"</code> を指定すると、プラットフォームに応じた全ての形式が生成される。<br>
<br>
<center>
{| class="wikitable"
|+ プラットフォーム別のターゲット形式
! プラットフォーム !! ターゲット形式
|-
| Windows || <u>nsis</u>, <u>msi</u>, <u>app</u>
|-
| MacOS || <u>app</u>, <u>dmg</u>
|-
| Linux || <u>deb</u>, <u>rpm</u>, <u>appimage</u>
|}
</center>
<br>

==== icon設定 ====
<code>icon</code> 配列には、アプリケーションアイコンのパスを指定する。<br>
各プラットフォームで必要な形式のアイコンを用意する必要がある。<br>
<br>
<center>
{| class="wikitable"
|+ アイコン形式の一覧
! ファイル形式 !! 対応プラットフォーム !! サイズ
|-
| PNG || 全プラットフォーム || 32x32, 128x128, 256x256 等
|-
| ICNS || MacOS || 複数サイズを含む
|-
| ICO || Windows || 複数サイズを含む
|}
</center>
<br>
==== プラットフォーム別設定 ====
各プラットフォーム固有の設定を以下に示すセクションで行う。<br>
<br>
* <code>windows</code>
*: Windows用のNSISやMSIの設定
*: インストールモード (<code>perUser</code> または <code>perMachine</code>) 等を指定
* <code>linux</code>
*: Linux用のdeb、rpm、AppImageの設定
*: パッケージの依存関係やメタデータを指定
* <code>macOS</code>
*: macOS用のdmgやappの設定
*: コード署名や公証に関する設定を含む。
<br><br>

== identifier設定 ==
<code>identifier</code> は、アプリケーションを一意に識別するための文字列である。<br>
逆ドメイン記法 (Reverse Domain Name Notation) で記述する。<br>
<br>
 <syntaxhighlight lang="json">
 {
   "identifier": "com.example.myapp"
 }
 </syntaxhighlight>
<br>
==== 形式と用途 ====
識別子の形式は、ドメインを逆順にし、アプリケーション名を付加したものである。<br>
<br>
<center>
{| class="wikitable"
|+ identifierの用途
! 用途 !! 説明
|-
| App ID (iOS / MacOS) || Appleのエコシステムでアプリを一意に識別
|-
| Entitlements || アプリの権限設定で使用
|-
| DBusサービス名 || Linuxでのプロセス間通信で使用
|-
| Android ID || Androidアプリの一意識別子
|}
</center>
<br>
==== 推奨される事項 ====
identifierを設定する時の推奨される事項を以下に示す。<br>
<br>
* 所有するドメインを使用する。
*: ドメインを所有していない場合は、<u>com.example</u> 等のプレースホルダを使用せず、独自の形式を検討する。
* 一貫性を保つ。
*: 開発中に識別子を変更すると、設定ファイルや証明書の問題が発生する可能性がある。
* プラットフォームの要件を確認する。
*: iOSやAndroidでは、識別子に制約がある場合がある。
<br><br>

== プラットフォーム固有設定ファイル ==
Tauriでは、プラットフォームごとに異なる設定を適用するための専用ファイルを使用できる。<br>
<br>
==== ファイル一覧 ====
プラットフォーム固有の設定ファイルを以下に示す。<br>
<br>
<center>
{| class="wikitable"
|+ プラットフォーム固有設定ファイルの一覧
! ファイル名 !! 対象プラットフォーム
|-
| <u>tauri.linux.conf.json</u> || Linux
|-
| <u>tauri.windows.conf.json</u> || Windows
|-
| <u>tauri.macos.conf.json</u> || macOS
|-
| <u>tauri.ios.conf.json</u> || iOS
|-
| <u>tauri.android.conf.json</u> || Android
|}
</center>
<br>
==== マージ動作 ====
プラットフォーム固有の設定ファイルは、ベースの <u>tauri.conf.json</u> ファイルとマージされる。<br>
マージには、JSON Merge Patch (RFC 7396) が使用される。<br>
<br>
例えば、<u>tauri.linux.conf.json</u> で以下に示すように設定した場合、<br>
Linuxビルド時のみ、バンドルターゲットが <code>deb</code> と <code>appimage</code> に限定される。<br>
<br>
 <syntaxhighlight lang="json">
 {
   "bundle": {
     "targets": ["deb", "appimage"]
   }
 }
 </syntaxhighlight>
<br>
==== カスタム設定ファイルの使用 ====
特定の設定ファイルを指定してビルドする場合は、<code>--config</code> オプションを使用する。<br>
<br>
 cargo tauri build --config src-tauri/tauri.appstore.conf.json
<br>
この機能は、App Store用と通常配布用で異なる設定が必要な場合等に便利である。<br>
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=Tauri,Rust,React,TypeScript,デスクトップアプリ,WebView,クロスプラットフォーム,Vite,tauri.conf.json,設定ファイル,identifier,bundle,windows,ビルド設定
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:Rust]]