Skip to content

Commit 461c389

Browse files
J1-takaiJ1-takai
committed
i18n(ja) Dev/Tests section
1 parent a6c1f40 commit 461c389

File tree

7 files changed

+1067
-0
lines changed

7 files changed

+1067
-0
lines changed

‎src/content/docs/ja/develop/Debug/tests/WebDriver/Example/index.mdx

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
---
2+
title: モデル・アプリケーションの基本設定
3+
sidebar:
4+
order: 30
5+
i18nReady: true
6+
---
7+
8+
{/* TODO: REVISE COPY TO V2 */}
9+
10+
import { Image } from 'astro:assets';
11+
import HelloTauriWebdriver from '@assets/develop/Tests/hello-tauri-webdriver.png';
12+
import TranslationNote from '@components/i18n/TranslationNote.astro';
13+
14+
この章の「モデル・アプリケーション」事例では、既存のプロジェクトに WebDriver テストを追加することだけに焦点を当てています。
15+
続く二章でテストするプロジェクトを用意するために、そのテストで使用するための極最小限の Tauri アプリケーションを構成します。
16+
ここでは、Tauri CLI や、フロントエンドの依存関係、ビルド手順は使用せず、また、後からアプリケーションをバンドルすることもありません。
17+
ここでの作業は、既存のアプリケーションに WebDriver テストを追加する方法を示し、最小の構成設定を紹介するためのものです。
18+
19+
この「モデル・アプリケーション」作成ガイドで紹介されている内容に基づいた完成版のプロジェクト事例だけを見たい場合には、https://github.com/chippers/hello_tauri を参照してください。
20+
21+
## Cargo プロジェクトの初期化
22+
23+
この「モデル・アプリケーション」を格納するための新しいバイナリ Cargo プロジェクトを作成します。
24+
これは、コマンドラインから `cargo new hello-tauri-webdriver --bin` を使用すれば簡単に行なえ、これにより最小限のバイナリ Cargo プロジェクトが準備されます。
25+
このディレクトリは、この先、この作成ガイドの作業ディレクトリとして機能するため、実行するコマンドがこの新しい `hello-tauri-webdriver/` ディレクトリ内にあることを確認してください。
26+
27+
## 最小構成のフロントエンドの作成
28+
29+
「モデル・アプリケーション」のフロントエンドとなる最小限の HTML ファイルを作成します。
30+
後ほど、WebDriver テスト中にこのフロントエンドのいくつかの項目を用いることになります。
31+
32+
最初に、「モデル・アプリケーション」の Tauri 部分を構築する際に必要になる Tauri `distDir` を作成しましょう。
33+
コマンド `mkdir dist` で `dist/` という新しいディレクトリを作成し、そこに次の `index.html` ファイルを配置します。
34+
35+
`dist/index.html`:
36+
37+
```html
38+
<!doctype html>
39+
<html lang="en">
40+
<head>
41+
<meta charset="UTF-8" />
42+
<title>Hello Tauri!</title>
43+
<style>
44+
body {
45+
/* 見やすい配色 colorscheme の追加 */
46+
background-color: #222831;
47+
color: #ececec;
48+
49+
/* 本体をウィンドウのサイズに合わせまず */
50+
margin: 0;
51+
height: 100vh;
52+
width: 100vw;
53+
54+
/* body タグの子要素を垂直方向と水平方向に中央揃えする */
55+
display: flex;
56+
justify-content: center;
57+
align-items: center;
58+
}
59+
</style>
60+
</head>
61+
<body>
62+
<h1>Hello, Tauri!</h1>
63+
</body>
64+
</html>
65+
```
66+
67+
## タウリを Cargo プロジェクトに追加
68+
69+
次に、上記の Cargo プロジェクトを Tauri プロジェクトに変換するために必要な項目を追加します。まず、Cargo マニフェスト・ファイル（`Cargo.toml`）に依存関係を追加し、Cargo がビルド時に依存関係を読み込むようにします。
70+
71+
<TranslationNote lang="ja">
72+
73+
**Cargo.toml**　以下の Cargo.toml ファイルは一部内容が古い可能性があります。たとえば　2025.02.20 現在の Rust エディションは "2024"、最新バージョンは "1.85" です。バージョン "1.56" は 2021.10.21 リリース、tauri 1.0 のリリースが 2022.06.19 なので、その頃に作成された事例と思われます。適宜読み替えてください。
74+
75+
</TranslationNote>
76+
77+
`Cargo.toml`:
78+
79+
```toml
80+
[package]
81+
name = "hello-tauri-webdriver"
82+
version = "0.1.0"
83+
edition = "2021"
84+
rust-version = "1.56"
85+
86+
# ビルド時に Tauri 用にいくつかの設定が必要
87+
[build-dependencies]
88+
tauri-build = "1"
89+
90+
# 実際の Tauri 依存関係と、ページを表示（serve）するための `custom-protocol`
91+
[dependencies]
92+
tauri = { version = "1", features = ["custom-protocol"] }
93+
94+
# --release で、小さく（opt-level = "s"）かつ高速（lto = true）なバイナリをビルドします
95+
# この設定は完全にオプションですが、一般的なリリース設定にできるだけ近い状態でアプリケーションをテストすることが可能であることを示しています
96+
# 注意: これによりコンパイル速度が低下します
97+
[profile.release]
98+
incremental = false
99+
codegen-units = 1
100+
panic = "abort"
101+
opt-level = "s"
102+
lto = true
103+
```
104+
105+
お気づきかもしれませんが、`[build-dependency]`（ビルド依存関係）が追加されています。この `[build-dependency]` を利用するには、これをビルド・スクリプトから使用する必要があります。
106+
そこで `build.rs` で作成します。
107+
108+
`build.rs`:
109+
110+
```rust
111+
fn main() {
112+
// 再コンパイルでは `dist/` ディレクトリのみを監視し、別のプロジェクトのサブディレクトリのファイルを変更したときに不要な変更が加えられるのを防ぎます
113+
println!("cargo:rerun-if-changed=dist");
114+
115+
// Tauri build-time helpers を実行します
116+
tauri_build::build()
117+
}
118+
```
119+
120+
これで、Cargo プロジェクトは Tauri の依存関係とその設定を読み込み、ビルドできるようになりました。実際のプロジェクト・コードに Tauri を設定して、この最小限の Tauri モデル・アプリケーションを完成させましょう。この Tauri 機能を追加するために、`src/main.rs` ファイルを編集します。
121+
122+
`src/main.rs`:
123+
124+
```rust
125+
fn main() {
126+
tauri::Builder::default()
127+
.run(tauri::generate_context!())
128+
.expect("unable to run Tauri application");
129+
}
130+
```
131+
132+
どう？　とても簡単でしょう？
133+
134+
## Tauri の設定
135+
136+
このモデル・アプリケーションを正常にビルドするには、二つのものが必要です。一つ目は、「アイコン・ファイル」です。この作業にはどのような PNG データでも構いません。それを `icon.png` にコピーします。
137+
通常は、このデータは、プロジェクトの作成に Tauri CLI を使用すると、その準備処理の一部として提供されます。
138+
デフォルトの Tauri アイコンを取得するには、コマンド `curl -L "https://github.com/chippers/hello_tauri/raw/main/icon.png" --output icon.png` を使用して、「Hello Tauri サンプル・リポジトリ」で使用されているアイコンをダウンロードします。
139+
140+
二つ目は、Tauri 用の重要な設定値を設定するための「`tauri.conf.json`」ファイルです。
141+
このファイルも、通常はスキャフォルディング・コマンドの `tauri init` で生成されますが、ここでも独自の最小限の構成を作成します。
142+
143+
<TranslationNote lang="ja">
144+
145+
**スキャフォルディング・コマンド**　scaffolding command：　"scaffold" は「工事現場の足場」「足場を組む」という意味ですが、本稿では主に「準備」という訳語を当てています。「スキャフォルディング・コマンド」とはアプリケーション作成開始時に必要なファイル類を自動作成／準備してくれる（作業用の足場を組んでくれる）コマンドのこと。
146+
147+
</TranslationNote>
148+
149+
`tauri.conf.json`:
150+
151+
```json
152+
{
153+
"build": {
154+
"distDir": "dist"
155+
},
156+
"tauri": {
157+
"bundle": {
158+
"identifier": "studio.tauri.hello_tauri_webdriver",
159+
"icon": ["icon.png"]
160+
},
161+
"allowlist": {
162+
"all": false
163+
},
164+
"windows": [
165+
{
166+
"width": 800,
167+
"height": 600,
168+
"resizable": true,
169+
"fullscreen": false
170+
}
171+
]
172+
}
173+
}
174+
```
175+
176+
いくつかの項目の内容を見ていきましょう。
177+
先ほど作成した `dist/` ディレクトリが `distDir` プロパティに指定されているのがわかります。
178+
ビルドされたアプリケーションが一意の ID を持つようにバンドル識別子（ID）を設定し、アイコンには `icon.png` のみを指定しています。Tauri の API　や機能は使用しないため、`allowlist` で `"all": false` を設定して無効化しています。
179+
ウィンドウ値には、適切なデフォルト値を使用して作成される単一のウィンドウを設定するだけです。
180+
181+
これで、実行時に簡単な挨拶を表示する基礎的な「Hello World」アプリケーションが完成しました。
182+
183+
## モデル・アプリケーションの実行
184+
185+
正しく設定が行なわれているかを確認するために、このアプリケーションをビルドしてみましょう。WebDriver テストもリリース版用設定プロファイルで実行するので、このアプリケーションを `--release` 版として実行します。
186+
`cargo run --release` を実行すると、コンパイル後に次のアプリケーションがポップアップ表示されるはずです。
187+
188+
<div style={{ textAlign: 'center' }}>
189+
<Image src={HelloTauriWebdriver} alt="Hello Tauri Webdriver" />
190+
</div>
191+
192+
_注記：　アプリケーションを修正して Devtools を使用したい場合は、`--release` 指定なしで実行すれば、右クリック・メニューで「Inspect Element／要素の検査」が表示され、利用できるはずです。_
193+
194+
これで、このモデル・アプリケーションを利用して、「WebDriver フレームワーク」を使用したテストを開始する準備が整いました。
195+
次章から、[Selenium を利用する](/ja/develop/tests/webdriver/example/selenium/) と [WebdriverIO を利用する](/ja/develop/tests/webdriver/example/webdriverio/) の両方について、この順序で説明します。
196+
197+
[完成版モデル・アプリケーション]: https://github.com/chippers/hello_tauri
198+
199+
<div style="text-align: right">
200+
【※ この日本語版は、「Feb 22, 2025 英語版」に基づいています】
201+
</div>

0 commit comments

Comments
 (0)