Skip to content

Commit a8c059b

Browse files
ChronosSFChronosSF
authored
Merge pull request #1497 from IgniteUI/localization-2025-04-24
[JA] New Topics - File Input, Tooltip, Blazor Web App
2 parents 728b38e + a77c5e6 commit a8c059b

7 files changed

+522
-0
lines changed

‎doc/jp/components/general-getting-started-blazor-web-app.md

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
---
2+
title: 作業の開始 | {ProductName} | インフラジスティックス
3+
_description: インフラジスティックスの {Platform} コンポーネントを使用してアプリを作成し、世界最速の仮想化されたリアルタイムの {Platform} データ グリッドによるストリーミング ファイナンシャルおよびビジネス チャートで、データの視覚化を向上させます。
4+
_keywords: {ProductName}, Infragistics, Getting Started, インフラジスティックス, 作業の開始
5+
_language: ja
6+
mentionedTypes: []
7+
---
8+
# Ignite UI for Blazor Web App で作業を開始
9+
10+
このトピックでは、Visual Studio および Ignite UI for Blazor を使用して Blazor Web App アプリケーションを作成するための手順を説明します。
11+
12+
## 新しい Blazor Web App プロジェクトを作成する
13+
以下の手順では、新しい Blazor Web App プロジェクトを作成する方法を説明します。Ignite UI for Blazor を既存のアプリケーションに追加する場合は、[**Ignite UI for Blazor パッケージをインストール**](#ignite-ui-for-blazor-のインストール) セクションに移動します。
14+
15+
Visual Studio 2022 を起動し、開始ページで **[新しいプロジェクトの作成]** をクリックし、**Blazor Web App** テンプレートを選択して、**[次へ]** をクリックします。
16+
17+
<img src="../images/general/new-blazor-project-web-app.jpg" />
18+
19+
プロジェクト名と場所を入力し、**[次へ]** をクリックします。
20+
21+
<img src="../images/general/new-blazor-project-configuring-web-app.jpg" />
22+
23+
次のステップでは、オプションの Interactivty の場所の設定に注意してください。これは、クライアント プロジェクト内のページごとにデフォルト設定されます (例: @rendermode Interactive Auto)。もう 1 つのオプションである Global では、Interactivty レンダリング モードの設定を、共有 Blazor プロジェクト内の 1 つの場所にある App.razor に移動します。例: <Routes @rendermode="InteractiveAuto"/>
24+
25+
**追加のプロジェクト オプションを指定し、[作成]** をクリックします。
26+
27+
<img src="../images/general/new-blazor-project-web-app-info.jpg" />
28+
29+
## Ignite UI for Blazor のインストール
30+
31+
Ignite UI for Blazor は、NuGet パッケージで提供されます。Blazor アプリケーションで Ignite UI for Blazor コンポーネントを使用するには、最初に適切な NuGet パッケージをインストールする必要があります。
32+
33+
Visual Studio で、**[ツール]** → **[NuGet パッケージ マネージャー]** → **[ソリューションの NuGet パッケージの管理]** を選択して、NuGet パッケージ マネージャーを開きます。**IgniteUI.Blazor** NuGet パッケージを検索してインストールします。
34+
35+
NuGet を使用した Ignite UI for Blazor のインストールの詳細については、[Ignite UI for Blazor のインストール](general-installing-blazor.md) トピックを参照してください。
36+
37+
## Ignite UI for Blazor の登録
38+
39+
### .NET 8 以降のアプリケーション
40+
41+
1 - 共有 **Program.cs** ファイルを開き、**builder.Services.AddIgniteUIBlazor()** 関数を呼び出して Ignite UI for Blazor サービスを登録します。
42+
43+
```razor
44+
var builder = WebApplication.CreateBuilder(args);
45+
46+
// Add services to the container.
47+
builder.Services.AddRazorComponents()
48+
.AddInteractiveServerComponents()
49+
.AddInteractiveWebAssemblyComponents();
50+
51+
builder.Services.AddIgniteUIBlazor();
52+
53+
var app = builder.Build();
54+
```
55+
56+
クライアントの **Program.cs** を開き、同じサービスを追加します。
57+
58+
```razor
59+
var builder = WebAssemblyHostBuilder.CreateDefault(args);
60+
61+
builder.Services.AddIgniteUIBlazor();
62+
63+
await builder.Build().RunAsync();
64+
```
65+
66+
2 - **IgniteUI.Blazor.Controls** 名前空間を **_Imports.razor** ファイルに追加します。
67+
68+
```razor
69+
@using IgniteUI.Blazor.Controls
70+
```
71+
72+
3 - **wwwroot/index.html** ファイルの **<head\>** 要素にスタイル シートを追加します。
73+
74+
```razor
75+
<head>
76+
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
77+
</head>
78+
```
79+
80+
4 - スクリプト参照を **wwwroot/index.html** ファイルに追加します。
81+
82+
```razor
83+
<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
84+
<script src="_framework/blazor.web.js"></script>
85+
```
86+
87+
## Ignite UI for Blazor コンポーネントの追加
88+
89+
Razor ページに Ignite UI for Blazor コンポーネントの追加:
90+
91+
```razor
92+
<IgbCard style="width:350px">
93+
<IgbCardMedia>
94+
<img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" />
95+
</IgbCardMedia>
96+
<IgbCardHeader>
97+
<h4>Jane Doe</h4>
98+
<h6>Professional Photographer</h6>
99+
</IgbCardHeader>
100+
<IgbCardContent>Hi! I'm Jane, photographer and filmmaker.
101+
Photography is a way of feeling, of touching,
102+
of loving. What you have caught on film is captured forever...
103+
it remembers little things, long after you have
104+
forgotten everything.</IgbCardContent>
105+
<IgbCardActions>
106+
<IgbButton>More Info</IgbButton>
107+
</IgbCardActions>
108+
</IgbCard>
109+
```
110+
111+
Blazor アプリをビルドして実行します。
112+
113+
<img src="../images/general/getting-started-blazor-card.jpg" />

‎doc/jp/components/inputs/file-input.md

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
---
2+
title: {Platform} File Input | データ可視化ツール | インフラジスティックス
3+
_description: Infragistics の {Platform} File Input は、ユーザーがファイルを選択・アップロードできるコンポーネントです。{ProductName} でアプリケーションを改善しましょう!
4+
_keywords: {Platform} File input, {ProductName}, Infragistics, {Platform} ファイル入力, インフラジスティックス
5+
mentionedTypes: ["Input", "Icon", "Button"]
6+
_language: ja
7+
---
8+
# {Platform} File Input (ファイル入力) の概要
9+
10+
{ProductName} File Input コンポーネントは、ユーザーがファイルを選択・アップロードできるインタラクティブな方法を提供します。ファイルの選択、選択したファイル名の表示、複数のファイルのアップロードのサポートなど、ファイル固有の機能を追加することで、基本の `Input` 機能を拡張します。
11+
12+
## {Platform} File Input の例
13+
14+
<div class="divider--half"></div>
15+
16+
`sample="/inputs/file-input/overview", height="120", alt="{Platform} File Input Overview Example"`
17+
18+
## 使用方法
19+
20+
File Input コンポーネントを使用すると、ユーザーはデバイスからファイルを選択し、Web アプリケーションにアップロードできます。選択されたファイルの名前が表示され、「Browse」 ボタンと 「No file chosen」 というテキストのカスタマイズ オプションが提供されます。このコンポーネントには、ニーズに合わせて動作をさらに構成するために使用できるプロパティ、メソッド、スロットも用意されています。
21+
22+
### 作業の開始
23+
24+
<!-- WebComponents -->
25+
26+
File Input コンポーネントの使用を開始するには、最初に次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。
27+
28+
```cmd
29+
npm install {PackageWebComponents}
30+
```
31+
32+
その後、次のように File Input をインポートする必要があります。
33+
34+
```ts
35+
import { defineComponents, IgcFileInputComponent } from 'igniteui-webcomponents';
36+
37+
defineComponents(IgcFileInputComponent);
38+
```
39+
40+
<!-- end: WebComponents -->
41+
42+
これで、{Platform} File Input の基本構成から始めることができます。
43+
44+
```html
45+
<igc-file-input label="File Input" required=true></igc-file-input>
46+
```
47+
48+
{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
49+
50+
## 構成
51+
52+
### プロパティ
53+
54+
File Input コンポーネントには、特定の要件に基づいて動作を構成できるさまざまなプロパティが用意されています。これらのプロパティを使用すると、入力の機能、外観、検証を制御できます。
55+
56+
* `value` - ファイル入力フィールドの現在の値を設定します。
57+
* `disabled` - ファイル入力を無効にして、ユーザーによる操作を防止します。
58+
* `required` - 入力を必須としてマークします。ファイルが選択されない限り、フォームの送信はブロックされます。
59+
* `invalid` - 入力値が無効であることを示し、視覚的なエラー状態をトリガーするために使用されます。
60+
* `multiple` - 複数のファイルを選択できます。
61+
* `accept` - 選択できるファイル タイプを定義します。このプロパティの値は、ファイル形式のコンマ区切りのリストである必要があります (例: .jpg, .png, .gif)。
62+
* `autofocus` - ページが読み込まれると、ファイル入力フィールドに自動的にフォーカスを当てます。
63+
* `label` - ファイル入力要素に関連付けられたラベル テキストを設定します。
64+
* `placeholder` - ファイルが選択されていない場合に表示されるプレースホルダー テキストを提供します。
65+
66+
```html
67+
<igc-file-input
68+
label="Files Input"
69+
accept=".jpg, .png, .gif"
70+
placeholder="Files missing"
71+
required
72+
multiple>
73+
</igc-file-input>
74+
```
75+
76+
### メソッド
77+
78+
構成可能なプロパティに加えて、File Input コンポーネントは、`Input` コンポーネントから使用できる 4 つの便利なメソッドも継承します。
79+
80+
* `focus()` - ファイル入力要素にフォーカスを設定します。
81+
* `blur()` - ファイル入力要素からフォーカスを削除します。
82+
* `reportValidity()` - 入力の有効性をチェックし、入力が無効な場合は検証メッセージを表示します。
83+
* `setCustomValidity()` - カスタム検証メッセージを設定します。提供されたメッセージが空でない場合、入力は無効 (invalid) としてマークされます。
84+
85+
### スロット
86+
87+
File Input コンポーネントは、外観と動作をカスタマイズするために使用できるいくつかのスロットも公開します。
88+
89+
* `prefix` と `suffix` - メイン入力エリアの前後にコンテンツを挿入できます。
90+
* `helper-text` - 入力の下にヒントまたは説明メッセージを表示します。書式設定のヒントやフィールドの要件など、追加のガイダンスを提供するのに役立ちます。
91+
* `file-selector-text` - ファイル選択ボタンに表示されるテキストをカスタマイズできます。
92+
* `file-missing-text` - ファイルが選択されていない場合に入力フィールドに表示されるテキストを設定します。
93+
* `value-missing` - 必須フィールドの検証に失敗した場合 (ファイルが必要なが提供されていない場合) にカスタム コンテンツをレンダリングします。
94+
* `invalid` – 入力が無効な状態の場合にカスタム コンテンツをレンダリングできます。
95+
* `custom-error` - `setCustomValidity()` メソッドを使用してカスタム検証メッセージが設定されている場合にコンテンツを表示します。
96+
97+
`sample="/inputs/file-input/prefix-suffix", height="120", alt="{Platform} File Input スロットの例"`
98+
99+
## 統合
100+
101+
File Input コンポーネントは、HTML フォーム要素とシームレスに統合されます。上記のメソッドとプロパティを使用すると、標準の HTML フォーム内での動作と検証を効果的に管理できます。
102+
103+
`sample="/inputs/file-input/form", height="190", alt="{Platform} File Input フォームの例"`
104+
105+
## 制限
106+
107+
File Input コンポーネントには現在次の制限があります。
108+
- 「Browse」 ボタンと 「No file chosen」 メッセージのデフォルトの文字列は、自動的にローカライズされません。これらの文字列はすべてのロケールで同じままですが、適切なスロットまたはプレースホルダー バインディングを使用して手動でカスタマイズできます。
109+
- ファイルは、`value` プロパティを通じて手動で設定することはできません。ファイルの選択はファイル ピッカー経由でのみ行うことができます。ただし、空の文字列 `''` を渡してフィールドをリセットすることはできます。
110+
111+
## アクセシビリティと ARIA サポート
112+
113+
File Input コンポーネントはフォーカス可能かつインタラクティブであり、キーボードとスクリーン リーダーの完全なアクセシビリティを保証します。コンポーネントには `label` 属性を使用してラベルを付けることができます。この属性はネイティブの `<label>` 要素を活用して、意味的に正しくアクセス可能なラベルを提供します。
114+
115+
アクセシビリティのベスト プラクティスをサポートするために、コンポーネントは関連する ARIA 属性も適用します。
116+
117+
* `aria-invalid` - 入力が無効な状態の場合、「true」 に設定します。
118+
* `aria-describedby` - 存在する場合はヘルパー テキスト要素に自動的にリンクされ、支援技術が追加情報をアナウンスできるようになります。
119+
120+
## スタイル設定
121+
122+
`File Input` コンポーネントは、スタイル設定に使用できる CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します。
123+
124+
|名前|説明|
125+
|--|--|
126+
| `container` | すべての主要な入力要素を保持するメイン ラッパー。 |
127+
| `input` | ネイティブ入力要素。 |
128+
| `label` | ネイティブ ラベル要素。 |
129+
| `file-names` | ファイル名ラッパー。 |
130+
| `file-selector-button` | 参照ボタン。 |
131+
| `prefix` | プレフィックス ラッパー。 |
132+
| `suffix` | サフィックス ラッパー。 |
133+
| `helper-text` | ヘルパー テキスト ラッパー。 |
134+
135+
136+
```scss
137+
igc-file-input::part(file-names) {
138+
background-color: var(--ig-primary-50);
139+
color: var(--ig-gray-400);
140+
}
141+
142+
igc-file-input::part(suffix) {
143+
color: var(--ig-primary-700-contrast);
144+
background-color: var(--ig-primary-700);
145+
}
146+
147+
igc-file-input::part(label) {
148+
color: var(--ig-gray-600);
149+
}
150+
```
151+
152+
`sample="/inputs/file-input/styling", height="120", alt="{Platform} File Input のスタイル設定"`
153+
154+
<div class="divider"></div>
155+
156+
157+
## API リファレンス
158+
159+
- `Icon`
160+
- `Input`
161+
- `Button`
162+
- [スタイル設定およびテーマ](../themes/overview.md)
163+
164+
## その他のリソース
165+
166+
* [{ProductName} **フォーラム (英語)**]({ForumsLink})
167+
* [{ProductName} **GitHub (英語)**]({GithubLink})

0 commit comments

Comments
 (0)