diff --git a/src/content/docs/ja/develop/icons.mdx b/src/content/docs/ja/develop/icons.mdx new file mode 100644 index 0000000000..52e272a675 --- /dev/null +++ b/src/content/docs/ja/develop/icons.mdx @@ -0,0 +1,140 @@ +--- +title: アプリ・アイコン +sidebar: + order: 1 +--- + +{/* TODO: More platform specific explanations like macOS requiring padding in the icon (waiting for https://github.com/tauri-apps/tauri/pull/11037) */} + +import CommandTabs from '@components/CommandTabs.astro'; +import TranslationNote from '@components/i18n/TranslationNote.astro'; + +Tauri は、Tauri ロゴに基づいたデフォルトのアイコン・セットが付けられて公開されますが、自分のアプリケーションをリリースする際にはそうしたくはないかもしれません。このデフォルト処理を回避するために、Tauri には、受け取った入力ファイル（デフォルトでは `"./app-icon.png"` ）からさまざまなプラットフォームに必要なすべてのアイコンを作成する「`icon` コマンド」が提供されています。 + +:::note[アイコンファイルのタイプに関する注記] + +- `icon.icns` = macOS 用 +- `icon.ico` = Windows 用 +- `*.png` = Linux 用 +- `Square*Logo.png` & `StoreLogo.png` = 現状は未使用、「AppX/MS Store」用 + +一部のアイコン・タイプは、上記で想定しているプラットフォーム以外でも使用される場合があります（特に `png`）。そのため、特定のプラットフォームのみを対象にビルドする場合でも、すべてのアイコン・タイプを含めておくことをお勧めします。 + +::: + + + +**AppX**　 Windows アプリケーションのインストールに必要なすべてのファイル（メタデータ、ファイル、資格情報も）を含んだアプリケーションの配布とインストールに使用される配布可能なパッケージ・ファイル形式。［[参考](https://docs.fileformat.com/ja/programming/appx/)］ + + + +## コマンドの使用法 + + + +```console +> pnpm tauri icon --help + +Generate various icons for all major platforms +〔主要プラットフォーム向けのさまざまなアイコンを生成〕 + +Usage: pnpm run tauri icon [OPTIONS] [INPUT] +〔使用法： pnpm run tauri icon [OPTION 指定] [引数 INPUT]〕 + +Arguments:〔引数〕 + [INPUT] Path to the source icon (squared PNG or SVG file with transparency) [default: ./app-icon.png] + 〔ソース・アイコンへのパス（背景が透明な正方形の PNG または SVG ファイル）[デフォルトのパス設定： ./app-icon.png]〕 + +Options:〔オプション指定〕 + -o, --output Output directory. Default: 'icons' directory next to the tauri.conf.json file + 〔-o、出力先　　　　　　　　　　　出力先ディレクトリ。デフォルト： tauri.conf.json ファイルの隣にある 'icons' ディレクトリ〕 + -v, --verbose... Enables verbose logging + 〔-v、詳細レポートを表示　　　　　詳細ログを有効化〕 + -p, + --png Custom PNG icon sizes to generate. When set, the default icons are not generated + 〔-p, --png、PNG　　　　　　生成する PNG アイコンのサイズをカスタマイズします。設定すると、デフォルトのアイコンは生成されません。〕 + --ios-color The background color of the iOS icon - string as defined in the W3C's CSS Color Module Level 4 [default: #fff] + 〔-p, --ios、IOS_COLOR　　iOS アイコンの背景色。W3C の CSS カラーモジュール・レベル 4 で定義された文字列。デフォルト： #fff（白）〕 + -h, --help Print help + 〔-h、ヘルプ　　　　　　　　　　　ヘルプを印字〕 + -V, --version Print version + 〔-V、バージョン　　　　　　　　　バージョンを印字〕 +``` + +「**デスクトップ** アイコン」はすべて、デフォルトでは `src-tauri/icons` フォルダに配置され、ビルドされたあなたのアプリに自動的に含められます。もしアイコンを別の場所から取得したい場合は、`tauri.conf.json` ファイルの以下の部分を編集してください： + +```json +{ + "bundle": { + "icon": [ + "icons/32x32.png", + "icons/128x128.png", + "icons/128x128@2x.png", + "icons/icon.icns", + "icons/icon.ico" + ] + } +} +``` + +「**モバイル** アイコン」は、Xcode および Android Studio プロジェクト内に直接配置されます。 + +## アイコンを自分で作成する + +アイコンを自分で作成したい場合、たとえば、小さいサイズ用にシンプルなデザインにしたいとか、CLI による内部イメージのサイズ変更に依存したくない場合には、その自作のアイコンがいくつかの要件を満たす必要があることに注意してください： + +- `icon.icns`：　[`icns`] ファイル（Apple Icon Image format）に必要なレイヤーの「サイズと名前」は [Tauri リポジトリ]（英語サイト）に記載されています。 +- `icon.ico`：　[`ico`] ファイル（ICO file format）には、16、24、32、48、64、256 ピクセルの各レイヤーが含まれている必要があります。_開発中の_ ICO 画像を最適に表示するには、32 ピクセルのレイヤーを最初のレイヤーにする必要があります。 +- `png`：　PNG アイコンの要件は、「幅 == 高さ」、「RGBA」（RGB ＋透明度）、「ピクセルあたり32ビット」（各チャンネルあたり8ビット）です。デスクトップ用で一般的に求められているサイズは、32、128、256、512 ピクセルです。少なくとも `tauri icon` の出力サイズである「`32x32.png`」、「`128x128.png`」、「`128x128@2x.png`」、「`icon.png`」を準備しておくことを推奨します。 + +### Android 用 + +Android（アンドロイド）用でも、上記と同じ要件を満たす PNG アイコン（ただしサイズが異なるもの）が必要になります。アイコンは Android Studio プロジェクトの中に直接配置する必要があります： + +- `src-tauri/gen/android/app/src/main/res/` + - `mipmap-hdpi/` + - `ic_launcher.png` & `ic_launcher_round.png`: 49x49px + - `ic_launcher_foreground.png`: 162x162px + - `mipmap-mdpi/` + - `ic_launcher.png` & `ic_launcher_round.png`: 48x48px + - `ic_launcher_foreground.png`: 108x108px + - `mipmap-xhdpi/` + - `ic_launcher.png` & `ic_launcher_round.png`: 96x96px + - `ic_launcher_foreground.png`: 216x216px + - `mipmap-xxhdpi/` + - `ic_launcher.png` & `ic_launcher_round.png`: 144x144px + - `ic_launcher_foreground.png`: 324x324px + - `mipmap-xxxhdpi/` + - `ic_launcher.png` & `ic_launcher_round.png`: 192x192px + - `ic_launcher_foreground.png`: 432x432px + +もし `tauri icon` が利用できない場合は、その代わりに Android Studio の [Image Asset Studio] を確認することをお勧めします。 + +### iOS 用 + +iOS 用にも、上記要件を満たす PNG アイコンが必要ですが、**透過なし**で、サイズも異なります。また、Xcode プロジェクト内の`src-tauri/gen/apple/Assets.xcassets/AppIcon.appiconset/` に直接配置する必要があります。以下のアイコンが必要です： + +- 20px の 1x、2x、3x 版と、2x 版の追加アイコン +- 29px の 1x、2x、3x 版と、2x 版の追加アイコン +- 40px の 1x、2x、3x 版と、2x 版の追加アイコン +- 60px の 2x、3x 版 +- 76px の 1x、2x 版 +- 83.5px の 2x 版 +- 512px の 2x 版を `AppIcon-512@2x.png` として保存 + +ファイル名は `AppIcon-{size}x{size}@{scaling}{extra}.png` という形式になります。20px アイコンの場合であれば、20x20、40x40、60x60 の各サイズのアイコンをそれぞれ `AppIcon-20x20@1x.png` 、`AppIcon-20x20@2x.png`、`AppIcon-20x20@3x.png` という名前で保存し、`2x` 版を追加で、`AppIcon-20x20@2x-1.png`（「追加アイコン」）として保存する必要があります。 + +[Tauri リポジトリ]: https://github.com/tauri-apps/tauri/blob/1.x/tooling/cli/src/helpers/icns.json +[`icns`]: https://en.wikipedia.org/wiki/Apple_Icon_Image_format +[`ico`]: https://ja.wikipedia.org/wiki/ICO_(ファイルフォーマット) +[image asset studio]: https://developer.android.com/studio/write/create-app-icons?hl=ja + +
+ 【※ この日本語版は、「Jul 21, 2025 英語版」に基づいています】 +
diff --git a/src/content/docs/ja/start/project-structure.mdx b/src/content/docs/ja/start/project-structure.mdx new file mode 100644 index 0000000000..b28e34b482 --- /dev/null +++ b/src/content/docs/ja/start/project-structure.mdx @@ -0,0 +1,62 @@ +--- +title: プロジェクト構造 +i18nReady: true +--- + +Tauri プロジェクトは通常、「Rust プロジェクト」と「JavaScript プロジェクト」（オプション）の二つの部分で構成されており、 +通常のセットアップ構成は以下のようになります： + +``` +. +├── package.json +├── index.html +├── src/ +│ ├── main.js +├── src-tauri/ +│ ├── Cargo.toml +│ ├── Cargo.lock +│ ├── build.rs +│ ├── tauri.conf.json +│ ├── src/ +│ │ ├── main.rs +│ │ └── lib.rs +│ ├── icons/ +│ │ ├── icon.png +│ │ ├── icon.icns +│ │ └── icon.ico +│ └── capabilities/ +│ └── default.json +``` + +上記の場合、「JavaScript プロジェクト」がトップレベルにあり、「Rust プロジェクト」は `src-tauri/` 内に置かれています。 +「Rust プロジェクト」は、いくつかのファイルが追加されている通常の [Cargo プロジェクト](https://doc.rust-lang.org/cargo/guide/project-layout.html) です： + +- `tauri.conf.json` は Tauri のメイン設定ファイルで、アプリケーション識別子から開発サーバーの URL までのすべてが含まれています。 + このファイルは、[Tauri CLI](/reference/cli/) が Rust プロジェクトを見つけるためのマーカーでもあります。 + 詳細については、[Tauri Config](/ja/develop/configuration-files/#tauri-の設定) を参照してください。 +- `capabilities/` ディレクトリは、Tauri が [セキュリティ・レベル・ファイル](/ja/security/capabilities/) を読み取るデフォルトのフォルダです（つまり、JavaScript コードでこのファイルを使用するには、このフォルダに対するコマンドのアクセスを許可する必要があります）。 + 詳細については、[セキュリティ](/ja/security/) を参照してください。 +- `icons/` ディレクトリは [`tauri icon`](/reference/cli/#icon) コマンドのデフォルトの出力ディレクトリであり、通常は `tauri.conf.json > bundle > icon` で参照され、アプリのアイコンに使用されます。 +- `build.rs` には、tauri のビルドシステムに使用される `tauri_build::build()` が含まれています。 +- `src/lib.rs` には「Rust コード」と「モバイル・エントリ・ポイント」（`#[cfg_attr(mobile, tauri::mobile_entry_point)]` でマークされた関数）が含まれています。 + `main.rs` 内に直接記述しない理由は、あなたのアプリを各モバイル・ビルドのライブラリを用いてコンパイルし、各プラットフォーム・フレームワークを通じてロードするためです。 +- `src/main.rs` はデスクトップの「メイン・エントリ・ポイント」であり、モバイルと同じエントリ・ポイントを使用するために `main` 内で `tauri_app_lib::run()` を実行します。 + そのため、処理を簡単にするために、このファイルは変更せず、代わりに `lib.rs` を変更してください。 + +Tauri は「静的 Web ホスト」に似た動作をします。そのビルド方法は、まず「JavaScript プロジェクト」を静的ファイル（複数）にコンパイルし、 +次に そうした静的ファイルをバンドルする「Rust プロジェクト」をコンパイルします。 +このため、「JavaScript プロジェクト」の構成は、あたかも静的なウェッブサイトを構築したかのように、基本的に同じになります。 +詳細については、[フロントエンドの設定](/ja/start/frontend/) を参照してください。 + +Rust コードのみで自分のプロジェクトを構成したい場合には、単に `src-tauri/` フォルダ以外のすべてを削除し、`src-tauri/` フォルダを、トップレベル・プロジェクトとして、あるいは Rust ワークスペースのメンバーとして、使用するだけです。 + +## 次のステップは... + +- [フロントエンドの設定](/ja/start/frontend/) +- [Tauri コマンドライン・インターフェイス](/reference/cli/)（英語版） +- [Tauri アプリの開発方法](/ja/develop/) +- [Tauri 拡張のための追加機能](ja/plugin/) + +
+ 【※ この日本語版は、「Aug 1, 2025 英語版」に基づいています】 +