diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 00000000000..d48b4327a93 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,43 @@ +name: Deploy +on: + push: + branches: [ main ] +jobs: + build: + + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16.x + cache: 'npm' + cache-dependency-path: package-lock.json + + - name: prepare code + run: git clone https://github.com/ionic-jp/community-site.git site + + # community-siteのビルド + - name: community-site build + run: | + npm install + npm run build.ci + working-directory: site + + # Docsのビルド + - name: npm install, build + run: | + npm ci --legacy-peer-deps + npm run prebuild + npm run build:ci + mv site/www/* www/ + + # デプロイ + - name: deploy + run: | + npx netlify-cli deploy \ + --site ${{ secrets.NETLIFY_SITE_ID }} \ + --dir www/ \ + --auth ${{ secrets.NETLIFY_TOKEN }} \ + --prod diff --git a/.gitignore b/.gitignore index 71e2c8eba4d..4b10b69fe49 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ # Production /build +/www # Generated files .docusaurus diff --git a/.npmrc b/.npmrc new file mode 100644 index 00000000000..860dc500f0d --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +node-options=--max_old_space_size=4096 diff --git a/.prettierignore b/.prettierignore index c9e0e72442c..928dd935591 100644 --- a/.prettierignore +++ b/.prettierignore @@ -13,3 +13,4 @@ static/code/stackblitz .github build node_modules +src/translate diff --git a/cspell-wordlist.txt b/cspell-wordlist.txt index b9f8543eff6..13ab88a5d60 100644 --- a/cspell-wordlist.txt +++ b/cspell-wordlist.txt @@ -79,3 +79,6 @@ mozallowfullscreen msallowfullscreen oallowfullscreen webkitallowfullscreen + +ionicframework +browserslistrc diff --git a/cspell.json b/cspell.json index 385200d0e10..972166aa24f 100644 --- a/cspell.json +++ b/cspell.json @@ -18,7 +18,8 @@ "versioned_docs/**/api", "versioned_docs/**/cli", "versioned_docs/**/native", - "node_modules" + "node_modules", + "src/translate" ], "flagWords": [ "hte" diff --git a/docs/angular/lifecycle.md b/docs/angular/lifecycle.md index 0f981e64dc3..007cdd56667 100644 --- a/docs/angular/lifecycle.md +++ b/docs/angular/lifecycle.md @@ -1,76 +1,76 @@ --- -title: Ionic Page Life Cycle -sidebar_label: Lifecycle +title: Ionic PageのLife Cycle +sidebar_label: ライフサイクル --- - Angular Page Component Life Cycle - App Events Documentation + AngularのページコンポーネントのLife Cycle - すべてのイベントのドキュメンテーション -This guide covers how the page life cycle works in an app built with Ionic and Angular. +このガイドでは、Ionic と Angular を使用して構築されたアプリでの Page Life Cycle のしくみについて説明します。（追記：Life Cycle とは、表示をはじめてから破棄するまでを指します。この間の特定のタイミングに設定されているイベントを Life Cycle Events といいます） ![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.png) -## Angular Life Cycle Events +## Angular の Life Cycle Events -Ionic embraces the life cycle events provided by Angular. The two Angular events you will find using the most are: +Ionic は Angular が提供する Life Cycle Events を取り入れています。最もよく使う 2 つの Angular イベントは次のとおりです。 -| Event Name | Description | -| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `ngOnInit` | Fired once during component initialization. This event can be used to initialize local members and make calls into services that only need to be done once. | -| `ngOnDestroy` | Fired right before Angular destroys the view. Useful for cleanup like unsubscribing from observables. | +| Event Name | Description | +| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ngOnInit` | コンポーネントの初期化中に発生します。このイベントを使用して、ローカルメンバーを初期化し、一度だけ実行する必要がある Service を呼び出すことができます。 | +| `ngOnDestroy` | Angular がビューを破棄する直前に発生します。 observables の unsubscribe などのクリーンアップに役立ちます。 | -For more info on the Angular Component Life Cycle events, visit their [component lifecycle docs](https://angular.io/guide/lifecycle-hooks). +Angular の Component Life Cycle イベントの詳細については、それらの [component lifecycle docs](https://angular.jp/guide/lifecycle-hooks) をご覧ください。 :::note -Components that use `ion-nav` or `ion-router-outlet` should not use the `OnPush` change detection strategy. Doing so will prevent lifecycle hooks such as `ngOnInit` from firing. Additionally, asynchronous state changes may not render properly. +`ion-nav` または `ion-router-outlet` を使用するコンポーネントは、 `OnPush` 変更検出方式を使用しないでください。そうすることで、 `ngOnInit` などのライフサイクル・フックが起動するのを防ぐことができます。また、非同期状態の変更は正しくレンダリングされない場合があります。 ::: -## Ionic Page Events +## Ionic の Page Events -In addition to the Angular life cycle events, Ionic Angular provides a few additional events that you can use: +Angular の Life Cycle Events に加えて、Ionic Angular には、使用可能ないくつかの追加イベントがあります: -| Event Name | Description | -| ------------------ | ------------------------------------------------------------------ | -| `ionViewWillEnter` | Fired when the component routing to is about to animate into view. | -| `ionViewDidEnter` | Fired when the component routing to has _finished_ animating. | -| `ionViewWillLeave` | Fired when the component routing _from_ is about to animate. | -| `ionViewDidLeave` | Fired when the component routing _from_ has _finished_ animating. | +| Event Name | Description | +| ------------------ | ------------------------------------------------------------------------ | +| `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 | +| `ionViewDidEnter` | コンポーネントが表示されるアニメーションが **終了した時に** 発火します。 | +| `ionViewWillLeave` | コンポーネントを離脱するアニメーションが **はじまる時に** 発火します。 | +| `ionViewDidLeave` | コンポーネントを離脱するアニメーションが **終了した時に** 発火します。 | -These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render. +これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionic ライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。 -The difference between `ionViewWillEnter` and `ionViewDidEnter` is when they fire. The former fires right after `ngOnInit` but before the page transition begins, and the latter directly after the transition ends. +`ionViewWillEnter`と`ionViewDidEnter`の違いは、いつ発火するかです。前者は `ngOnInit` の直後でページ遷移が始まる前に、後者は遷移が終わった後に直接呼び出されます。 -For `ionViewWillLeave` and `ionViewDidLeave`, `ionViewWillLeave` gets called directly before the transition away from the current page begins, and `ionViewDidLeave` does not get called until after the new page gets successfully transitioned into (after the new pages `ionViewDidEnter` fires). +`ionViewWillLeave` と `ionViewDidLeave` についてですが、 `ionViewWillLeave` は現在のページから離脱する処理がはじまる前に呼び出されますが、 `ionViewDidLeave` は新しいページに遷移する処理が成功してから呼び出されます (新しいページの `ionViewDidEnter` が発火した後になります)。 ![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.gif) -## How Ionic Handles the Life of a Page +## Ionic が Page の Life をどのように処理するか -Ionic has its router outlet, called ``. This outlet extends Angular's `` with some additional functionality to enable better experiences for mobile devices. +Ionic は `` という router outlet を持っています。この outlet が Angular の `` を継承し、さらに拡張して、モバイルデバイスのためのより良い体験を可能にしました。 -When an app is wrapped in ``, Ionic treats navigation a bit differently. When you navigate to a new page, Ionic will keep the old page in the existing DOM, but hide it from your view and transition the new page. The reason we do this is two-fold: +`` にアプリがラップされることで、Ionic はナビゲーションの扱いを少し変更します。新しいページに遷移すると、Ionic は古いページを既存の DOM に残しますが、ビューから隠して新しいページに移行します。これを行う理由は 2 つあります: -1. We can maintain the state of the old page (data on the screen, scroll position, etc..) -2. We can provide a smoother transition back to the page since it is already there and doesn't need to be recreated. +1. 古いページの状態を維持することができます（画面上のデータ、スクロール位置など）。 +2. ページがすでに存在しており作成し直す必要がないため、ページへの移行がスムーズになります。 -Pages are only removed from the DOM when they are "popped", for instance, by pressing the back button in the UI or the browsers back button. +たとえば、UI の "戻る" ボタンまたはブラウザの "戻る" ボタンを押すことによってページが「Pop」されると、ページは DOM から削除されるだけとなります。 -Because of this special handling, the `ngOnInit` and `ngOnDestroy` methods might not fire when you would usually think they should. +この特別な処理のために、`ngOnInit` と `ngOnDestroy` のメソッドは通常そうあるべきだと思うときには発火しないかもしれません。 -`ngOnInit` will only fire each time the page is freshly created, but not when navigated back to the page. For instance, navigating between each page in a tabs interface will only call each page's `ngOnInit` method once, but not on subsequent visits. `ngOnDestroy` will only fire when a page "popped". +`ngOnInit` はページが新しく作成されるたびに発火するだけなので、ページに戻ったときには発火されません。たとえば、タブのインタフェースで各ページ間を移動しても、各ページの `ngOnInit` メソッドは最初の 1 回だけ呼び出され、その後の表示では呼び出されません。`ngOnDestroy` はページが 「Pop」したときにのみ発生します。 -## Route Guards +## ルートガード -In Ionic 3, there were a couple of additional life cycle methods that were useful to control when a page could be entered (`ionViewCanEnter`) and left (`ionViewCanLeave`). These could be used to protect pages from unauthorized users and to keep a user on a page when you don't want them to leave (like during a form fill). +Ionic 3 では、いつページにアクセスすることができるか（ `ionViewCanEnter` ）と離脱できるか（`ionViewCanLeave`）を制御するのに役立つ、いくつかの追加のライフサイクルメソッドがありました。これらは、許可されていないユーザーからページを保護したり、ユーザーがページを離れたくないときにユーザーをページ上に保持したりするために使用できます（フォーム入力中など）。 -These methods were removed in Ionic 4 in favor of using Angular's Route Guards. +これらの方法は、Angular のルートガードを使用するために Ionic 4 で削除されました。 -A route guard helps determine if a particular action can be taken against a route. They are classes that implement a certain interface. The `CanActivate` and `CanDeactivate` interfaces can be used to implement the same type of logic that the removed events `ionViewCanEnter` and `ionViewCanLeave` did. +ルートガードは、ルートに対して特定のアクションを実行できるかどうかを判断するのに役立ちます。それらは特定のインターフェースを実装するクラスです。`CanActive` と `CanDeactivate` のインターフェイスは、`ionViewCanEnter` と `ionViewCanLeave` と同様のロジックでイベントを削除することができます。 ```tsx @Injectable() @@ -83,21 +83,21 @@ export class AuthGuard implements CanActivate { } ``` -To use this guard, add it to the appropriate param in the route definition: +このガードを使用するには、それをルート定義の適切なパラメータに追加します: ```tsx { path: 'settings', canActivate: [AuthGuard], loadChildren: '...', } ``` -For more info on how to use route guards, go to Angular's [router documentation](https://angular.io/guide/router). +ルートガードの使い方の詳細については、Angular の [router documentation](https://angular.jp/guide/router) を参照してください。 -## Guidance for Each Life Cycle Method +## Life Cycle メソッドのガイダンス -Below are some tips on use cases for each of the life cycle events. +以下は、life cycle events ごとのユースケースに関するヒントです。 -- `ngOnInit` - Initialize your component and load data from services that don't need refreshing on each subsequent visit. -- `ionViewWillEnter` - Since `ionViewWillEnter` is called every time the view is navigated to (regardless if initialized or not), it's a good method to load data from services. However, if your data comes back during the animation, it can start lots of DOM manipulation, which can cause some janky animations. -- `ionViewDidEnter` - If you see performance problems from using `ionViewWillEnter` when loading data, you can do your data calls in `ionViewDidEnter` instead. This event won't fire until after the page is visible by the user, however, so you might want to use either a loading indicator or a skeleton screen, so content doesn't flash in un-naturally after the transition is complete. -- `ionViewWillLeave` - Can be used for cleanup, like unsubscribing from observables. Since `ngOnDestroy` might not fire when you navigate from the current page, put your cleanup code here if you don't want it active while the screen is not in view. -- `ionViewDidLeave` - When this event fires, you know the new page has fully transitioned in, so any logic you might not normally do when the view is visible can go here. -- `ngOnDestroy` - Cleanup logic for your pages that you don't want to clean up in `ionViewWillLeave`. +- `ngOnInit` - コンポーネントを初期化し、Service からアクセスごとに更新する必要がないデータをロードします。 +- `ionViewWillEnter` - `ionViewWillEnter` は View がナビゲートされる度に呼び出されるので（初期化されているかどうかにかかわらず）、Service からデータをロードするのに適したメソッドです。ただし、アニメーション中にデータがを取得すると、大量の DOM 操作が開始される可能性があります。これにより、ぎこちないアニメーションが発生する可能性があります。 +- `ionViewDidEnter` - `ionViewWillEnter` を使ってデータを取得していてパフォーマンスに問題がある時は、`ionViewDidEnter` を代わりに使うことができます。ただし、Page がユーザーに表示されるまではこのイベントは発火しません。そのため、ロードインジケータまたはスケルトン画面を使用することをお勧めします。これにより、遷移が完了した後にコンテンツが不自然に点滅することはありません。 +- `ionViewWillLeave` - observables の unsubscribing のように、クリーンアップで利用します。 `ngOnDestroy` はあなたが現在のページから遷移する時には発火しない可能性がありますので、画面が表示されていない時にアクティブにしたくない場合はここでクリーンアップの処理を行います。 +- `ionViewDidLeave` - このイベントが発生すると、新しいページへと完全に遷移したことがわかります。そのため、ビューが表示されているときに通常は行わない可能性があるロジックはすべてここに移動できます。 +- `ngOnDestroy` - `ionViewWillLeave` でクリーンアップしたくないページのクリーンアップロジックはここにおいてください。 diff --git a/docs/angular/navigation.md b/docs/angular/navigation.md index 9ad675058a0..a4b72d42482 100644 --- a/docs/angular/navigation.md +++ b/docs/angular/navigation.md @@ -1,6 +1,6 @@ --- -title: Angular Navigation -sidebar_label: Navigation/Routing +title: Angular ナビゲーション +sidebar_label: ナビゲーション/ルーティング --- import useBaseUrl from '@docusaurus/useBaseUrl'; @@ -13,13 +13,13 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; /> -This guide covers how routing works in an app built with Ionic and Angular. +このガイドでは、Ionic と Angular を使用して構築されたアプリでのルーティングのしくみについて説明します。 -The Angular Router is one of the most important libraries in an Angular application. Without it, apps would be single view/single context apps or would not be able to maintain their navigation state on browser reloads. With Angular Router, we can create rich apps that are linkable and have rich animations (when paired with Ionic of course). Let's look at the basics of the Angular Router and how we can configure it for Ionic apps. +Angular Router は、Angular アプリケーションで最も重要なライブラリの 1 つです。これがなければ、アプリはシングルビュー/シングルコンテキストアプリになるか、ブラウザのリロード時にナビゲーションのステートを維持できなくなります。Angular Router を使用すると、リンク可能でリッチなアニメーションを持つリッチなアプリを作成できます（もちろん、Ionic と組み合わせると！）。Angular Router の基本と、それを Ionic アプリケーション用に設定する方法を見てみましょう。 -## A simple Route +## シンプルな Route -For most apps, having some sort of route is often required. The most basic configuration looks a bit like this: +ほとんどのアプリでは、some sort of route を持つことがしばしば必要になります。最も基本的な設定はこのようになります： ```tsx @@ -36,11 +36,11 @@ import { RouterModule } from '@angular/router'; }) ``` -The simplest breakdown for what we have here is a path/component lookup. When our app loads, the router kicks things off by reading the URL the user is trying to load. In our sample, our route looks for `''`, which is essentially our index route. So for this, we load the `LoginComponent`. Fairly straight forward. This pattern of matching paths with a component continues for every entry we have in the router config. But what if we wanted to load a different path on our initial load? +URL path と Component の組み合わせを確認する最も簡単な方法は、ここをみるすることです。アプリがロードされると、ルーターはユーザーがロードしようとしている URL を読むことで動作を開始します。私たちのサンプルでは、Route は `''` を参照します。これは本質的に私たちのインデックスルートとなります。そうすると、一致するエントリを探し出して、 `LoginComponent` がロードされます。かなり簡単です。この処理は `path` が一致するまで、設定されているすべての Route のエントリを参照します。しかし、初期ロードと異なるパスをロードしたい場合はどうなりますか？ -## Handling Redirects +## リダイレクトの処理 -For this we can use router redirects. Redirects work the same way that a typical route object does, but just includes a few different keys. +そういう場合には、ルーターリダイレクトを使用できます。リダイレクトは通常のルートオブジェクトと同じように書くことができますが、いくつかの異なるキーが含まれます。 ```tsx [ @@ -50,29 +50,29 @@ For this we can use router redirects. Redirects work the same way that a typical ]; ``` -In our redirect, we look for the index path of our app. Then if we load that, we redirect to the `login` route. The last key of `pathMatch` is required to tell the router how it should look up the path. +このリダイレクトでは、アプリのインデックス（`''`）を探しはじめると、`login` にリダイレクトします。最後の `pathMatch` キーは、ルータにパスの検索方法を指示するために必要です。 -Since we use `full`, we're telling the router that we should compare the full path, even if ends up being something like `/route1/route2/route3`. Meaning that if we have: +`full` を使用すると、たとえ最後まで `/route1/route2/route3` と一致する path がなかったとしても、フルパスを比較する必要があることをルータに伝えることができます。つまり、次のようになります。 ```tsx { path: '/route1/route2/route3', redirectTo: 'login', pathMatch: 'full' }, { path: 'login', component: LoginComponent }, ``` -And load `/route1/route2/route3` we'll redirect. But if we loaded `/route1/route2/route4`, we won't redirect, as the paths don't match fully. +このように書くと `/route1/route2/route3` をロードすると、リダイレクトを行います。けれど仮に `/route1/route2/route4` であれば、すべての path が一致しないのでリダイレクトを行いません。 -Alternatively, if we used: +あるいは、こういう書き方もできます: ```tsx { path: '/route1/route2', redirectTo: 'login', pathMatch: 'prefix' }, { path: 'login', component: LoginComponent }, ``` -Then load both `/route1/route2/route3` and `/route1/route2/route4`, we'll be redirected for both routes. This is because `pathMatch: 'prefix'` will match only part of the path. +`/route1/route2/route3` と `/route1/route2/route4` の両方を読み込んだとおき, どちらの場合もリダイレクトします。 `pathMatch: 'prefix'` によって、一部でも一致したら該当するからです。 -## Navigating to different routes +## routes へのナビゲーション -Talking about routes is good and all, but how does one actually navigate to said routes? For this, we can use the `routerLink` directive. Let's go back and take our simple router setup from earlier: +routes について説明してきましたが、それではどのようにしてそのルートにナビゲーションしたらいいのでしょうか。これには、 `routerLink` directive を利用します。先ほどの簡単な router 設定でこれを確認してみましょう: ```ts RouterModule.forRoot([ @@ -81,7 +81,7 @@ RouterModule.forRoot([ ]); ``` -Now from the `LoginComponent`, we can use the following HTML to navigate to the detail route. +わたしたちは、次の HTML を利用することで、`LoginComponent` から `detail` route に遷移することができます。 ```html @@ -95,9 +95,9 @@ Now from the `LoginComponent`, we can use the following HTML to navigate to the ``` -The important part here is the `ion-button` and `routerLink` directive. RouterLink works on a similar idea as typical `href`s, but instead of building out the URL as a string, it can be built as an array, which can provide more complicated paths. +ここで重要なのは`ion-button` と `routerLink` directive です。RouterLink は典型的な `href` と同様の考えで動作しますが、URL を文字列として構築する代わりに配列として構築することができ、それによってより複雑なパスを書くこともできます。 -We also can programmatically navigate in our app by using the router API. +Router API を使用して、プログラムで遷移することもできます。 ```tsx import { Component } from '@angular/core'; @@ -116,23 +116,23 @@ export class LoginComponent { } ``` -Both options provide the same navigation mechanism, just fitting different use cases. +どちらのオプションも同様のナビゲーションメカニズムを提供し、異なるユースケースで利用することができます。 -### Navigating using LocationStrategy.historyGo +### LocationStrategy.historyGo を使ったナビゲーション -Angular Router has a [LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo) method that allows developers to move forward or backward through the application history. Let's take a look at an example. +Angular Router には [LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo) メソッドがあり、アプリケーションの履歴を進んだり戻ったりすることができます。例を見てみましょう。 -Say you have the following application history: +次のようなアプリケーションの履歴があるとします： -`/pageA` --> `/pageB` --> `/pageC` +`/ページA` --> `/ページB` --> `/ページC`。 -If you were to call `LocationStrategy.historyGo(-2)` on `/pageC`, you would be brought back to `/pageA`. If you then called `LocationStrategy.historyGo(2)`, you would be brought to `/pageC`. +もし `/pageC` で `LocationStrategy.historyGo(-2)` を呼び出すと、 `/pageA` に戻る。その後、 `LocationStrategy.historyGo(2)` を呼び出すと、 `/pageC` に戻る。 -An key characteristic of `LocationStrategy.historyGo()` is that it expects your application history to be linear. This means that `LocationStrategy.historyGo()` should not be used in applications that make use of non-linear routing. See [Linear Routing versus Non-Linear Routing](#linear-routing-versus-non-linear-routing) for more information. +`LocationStrategy.historyGo()` の主な特徴は、アプリケーションの履歴が線形であることを想定していることです。つまり、`LocationStrategy.historyGo()` は非線形のルーティングを使用するアプリケーションでは使用すべきではありません。詳しくは [リニアルーティング対非リニアルーティング](#linear-routing-versus-non-linear-routing) を参照してください。 ## Lazy loading routes -Now the current way our routes are setup makes it so they are included in the same chunk as the root app.module, which is not ideal. Instead, the router has a setup that allows the components to be isolated to their own chunks. +現在のルート設定では、すべての Component が、ルートとなる `app.module` と同じ `chunk` に含まれているので理想的ではありません。代わりに、ルータにはコンポーネントを独自の `chunk` に分離できるように設定されています。 ```tsx @@ -150,7 +150,7 @@ import { RouterModule } from '@angular/router'; }) ``` -While similar, the `loadChildren` property is a way to reference a module by using native import instead of a component directly. In order to do this though, we need to create a module for each of the components. +`loadChildren` プロパティはコンポーネントの代わりにネイティブインポートを直接仕様してモジュールを参照する方法です。ただしこれを行うには、コンポーネントごとにモジュールを作成する必要があります。 ```tsx ... @@ -168,10 +168,10 @@ import { LoginComponent } from './login.component'; ``` :::note -We're excluding some additional content and only including the necessary parts. +一部のコードを省略して紹介しています ::: -Here, we have a typical Angular Module setup, along with a RouterModule import, but we're now using `forChild` and declaring the component in that setup. With this setup, when we run our build, we will produce separate chunks for both the app component, the login component, and the detail component. +ここでは、`RouterModule` のインポートとともに、典型的な `Angular Module` の設定がありますが、`RouterModule` では `forChild` によってコンポーネントを使用することを宣言しています。この設定では、ビルドを実行するときに、`App Component`（Root）、 `login Component` 、および `detail Component` において別々のチャンクを作成します。 ## Standalone Components @@ -347,7 +347,7 @@ There are very few use cases in which nested routes make sense in mobile applica ## Working with Tabs -With Tabs, the Angular Router provides Ionic the mechanism to know what components should be loaded, but the heavy lifting is actually done by the tabs component. Let's look at a simple example. +タブを使用すると、Angular Router にどのコンポーネントをロードする必要があるかを知るためのメカニズムを Ionic が提供しますが、タブコンポーネントでは複雑な作業が行われます。簡単な例を見てみましょう。 ```ts const routes: Routes = [ @@ -379,7 +379,7 @@ const routes: Routes = [ ]; ``` -Here we have a "tabs" path that we load. In this example we call the path "tabs", but the name of the paths can be changed. They can be called whatever fits your app. In that route object, we can define a child route as well. In this example, the top level child route "tab1" acts as our "outlet", and can load additional child routes. For this example, we have a single sub-child-route, which just loads a new component. The markup for the tab is as follows: +ここでは、 `tabs` パスを読み込んでいます。この例では、path を `tabs` としていますが、これは変更可能です。あなたのアプリに合った名前にすることができます。このルートオブジェクトでは、子ルートも定義することができます。この例では、トップレベルの子ルート「tab1」が「outlet」として機能し、さらに子ルートをロードすることができます。この例では、1 つの子ルートがあり、新しいコンポーネントをロードするだけです。Tabs のマークアップは、次のとおりです: ```html @@ -392,7 +392,7 @@ Here we have a "tabs" path that we load. In this example we call the path "tabs" ``` -If you've built apps with Ionic before, this should feel familiar. We create a `ion-tabs` component, and provide a `ion-tab-bar`. The `ion-tab-bar` provides a `ion-tab-button` with a `tab` property that is associated with the tab "outlet" in the router config. Note that the latest version of `@ionic/angular` no longer requires ``, but instead allows developers to fully customize the tab bar, and the single source of truth lives within the router configuration. +Ionic を使ってアプリを作成したことがあれば、このマークアップはおなじみのはずです。`ion-tabs` コンポーネントを作成し、`ion-tab-bar` を提供します。`ion-tab-bar` は、 `tab`と一緒に`ion-tab-button`を提供します。最新の `@ionic/angular` はもはや `` を必要とせず、開発者がタブバーを完全にカスタマイズできるようになり、すべての設定は Router の設定によって行えるようになりました。 ### How Tabs in Ionic Work diff --git a/docs/angular/overview.md b/docs/angular/overview.md index 4b1182bb76a..5d29843b7e6 100644 --- a/docs/angular/overview.md +++ b/docs/angular/overview.md @@ -1,6 +1,6 @@ --- -title: 'Ionic Angular Overview' -sidebar_label: Overview +title: Ionic Angular の概要 +sidebar_label: 概要 --- @@ -14,15 +14,15 @@ sidebar_label: Overview import DocsCard from '@components/global/DocsCard'; import DocsCards from '@components/global/DocsCards'; -`@ionic/angular` combines the core Ionic experience with the tooling and APIs that are tailored to Angular Developers. +`@ionic/angular` は core Ionic experience に、Angular 開発者向けにカスタマイズされたツールと API を組み合わせたものです。 -## Angular Version Support +## Angular バージョンサポート -Ionic v7 supports Angular v14+. As part of their upgrade strategy, Angular has built-in tooling to help automate upgrades and provide feedback to developers whenever changes to an API occurred. This reduces update friction and keeps the ecosystem in a evergreen state. +Ionic v7 は Angular v14+をサポートしています。アップグレード戦略の一環として、Angular にはアップグレードを自動化するためのツールが組み込まれており、API に変更があった際には開発者にフィードバックを提供します。これにより、アップデートの手間を減らし、エコシステムを最新の状態に保つことができます。 ## Angular Tooling -With Ionic 4+, the official Angular stack for building an app and routing are used, so your app can fall in-line with the rest of the great Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps. +Ionic4 以降では、アプリケーション構築とルーティングのために公式の Angular スタックが使用されているため、あなたのアプリケーションは Angular エコシステムと同じように利用できます。更に独自の機能が必要な場合には、Ionic は`@ionic/angular-toolkit`を提供します。、これは [official Angular CLI](https://angular.jp/cli) を構築して統合し、`@ionic/angular` アプリ固有の機能を提供します。 ## Resources diff --git a/docs/angular/performance.md b/docs/angular/performance.md index 62877e6e4dd..d2c78341765 100644 --- a/docs/angular/performance.md +++ b/docs/angular/performance.md @@ -1,6 +1,6 @@ --- -title: Angular Performance -sidebar_label: Performance +title: Angularのパフォーマンス +sidebar_label: パフォーマンス --- diff --git a/docs/angular/platform.md b/docs/angular/platform.md index 3cd0d7833f3..5cb3546fc72 100644 --- a/docs/angular/platform.md +++ b/docs/angular/platform.md @@ -13,7 +13,7 @@ import TabItem from '@theme/TabItem'; /> -The Platform service can be used to get information about your current device. You can get all of the platforms associated with the device using the `platforms` method, including whether the app is being viewed from a tablet, if it's on a mobile device or browser, and the exact platform (iOS, Android, etc). You can also get the orientation of the device, if it uses right-to-left language direction, and much much more. With this information you can completely customize your app to fit any device. +プラットフォームサービスは、現在のデバイスに関する情報を取得するために使用できます。`platforms` メソッドを利用することでデバイスに関連付けられているすべてのプラットフォームを取得できます。例えば、アプリがタブレットから表示されているかどうか（モバイルデバイスまたはブラウザ上にある場合）、および正確なプラットフォーム（iOS、Android など）などです。右から左への言語の向きなどを使用すれば、デバイスの向きもわかります。この情報を使用して、あらゆるデバイスに合わせてアプリを完全にカスタマイズできます。 ## Usage @@ -72,7 +72,7 @@ export class MyPage { #### Platforms -Below is a table listing all the possible platform values along with corresponding descriptions. +以下は、利用可能なすべての platform の値とそれに対応する説明をまとめた表です。 | Platform Name | Description | | ------------- | ---------------------------------------- | @@ -211,7 +211,7 @@ type PlatformConfig = { ### `pause` -The `pause` event emits when the native platform puts the application into the background, typically when the user switches to a different application. This event emits when a Cordova/Capacitor app is put into the background but doesn't fire in a standard web browser. +`pause` イベントは、ネイティブ・プラットフォームがアプリケーションをバックグラウンドに置いたとき、通常はユーザーが別のアプリケーションに切り替えたときに発生します。このイベントは、Cordova/Capacitor アプリケーションがバックグラウンドに置かれたときに発生しますが、標準的な Web ブラウザでは発生しません。 #### Examples @@ -223,7 +223,7 @@ this.platform.pause.subscribe(async () => { ### `resize` -The `resize` event emits when the browser window has changed dimensions. This could be from a browser window being physically resized, or from a device changing orientation. +`resize` イベントは、ブラウザウィンドウの寸法が変更されたときに発生します。これは、ブラウザーウィンドウが物理的にサイズ変更されている場合や、デバイスの向きが変わっている場合に発生します。 #### Examples @@ -235,7 +235,7 @@ this.platform.resize.subscribe(async () => { ### `resume` -The `resume` event fires when the native platform pulls the application out from the background. This event emits when a Cordova/Capacitor app comes out from the background but doesn't fire in a standard web browser. +`resume` イベントは、ネイティブプラットフォームがバックグラウンドからアプリケーションを引き出したときに発生します。このイベントは、Cordova/Capacitor アプリがバックグラウンドから出てきても、標準的な Web ブラウザで起動しない場合に発生します。 #### Examples diff --git a/docs/angular/pwa.md b/docs/angular/pwa.md index 183cbb76295..684c150c457 100644 --- a/docs/angular/pwa.md +++ b/docs/angular/pwa.md @@ -1,5 +1,5 @@ --- -title: Progressive Web Apps in Angular +title: AngularでのPWA sidebar_label: Progressive Web Apps --- diff --git a/docs/angular/storage.md b/docs/angular/storage.md index dad80e77f3a..23c365eb7d4 100644 --- a/docs/angular/storage.md +++ b/docs/angular/storage.md @@ -1,6 +1,6 @@ --- -title: Data Storage -sidebar_label: Storage +title: データストレージ +sidebar_label: ストレージ --- @@ -11,7 +11,7 @@ sidebar_label: Storage /> -There are variety of options available for storing data within an Ionic app. +Ionic アプリ内にデータを保存するためのさまざまなオプションを用意しています。 Here are two official Ionic options: diff --git a/docs/angular/testing.md b/docs/angular/testing.md index 1278551b0b9..095c38c8061 100644 --- a/docs/angular/testing.md +++ b/docs/angular/testing.md @@ -1,5 +1,5 @@ --- -title: Testing +title: テスト --- @@ -10,53 +10,53 @@ title: Testing /> -When an `@ionic/angular` application is generated using the Ionic CLI, it is automatically set up for unit testing and end-to-end testing of the application. This is the same setup that is used by the Angular CLI. Refer to the Angular Testing Guide for detailed information on testing Angular applications. +Ionic CLI を使用して `@ionic/angular` アプリケーションを生成すると、アプリケーションのユニットテストとエンドツーエンドのテスト用に自動的に準備されます。これは Angular CLI で使われる設定と同じものです。Angular で作られたアプリケーションのテストについての詳細は Angular Testing Guide をご参照ください。 -## Testing Principles +## テストの原則 -When testing an application, it is best to keep in mind that testing can show if defects are present in a system. However, it is impossible to prove that any non-trivial system is completely free of defects. For this reason, the goal of testing is not to verify that the code is correct but to find problems within the code. This is a subtle but important distinction. +アプリケーションをテストするときは、テストによってシステムに欠陥があるかどうかを確認できる、ということを覚えておくことが一番です。しかし、どんなささいなシステムも完全に欠陥のないことを証明することは不可能です。このため、テストの目的はコードが正しいことを確認することではなく、コードの中の問題を見つけることです。これは微妙ですが、重要な違いです。 -If we set out to prove that the code is correct, we are more likely to stick to the happy path through the code. If we set out to find problems, we are more likely to more fully exercise the code and find the bugs that are lurking there. +もし私たちがコードが正しいことを証明しようとするのであれば、私たちはコードを通じて幸せな道を歩み続けようとするでしょう。もし私が問題の発見しようとするのであれば、コードをより完全に実行し、そこに潜むバグを発見する可能性が高くなります。 -It is also best to begin testing an application from the very start. This allows defects to be found early in the process when they are easier to fix. This also allows code to be refactored with confidence as new features are added to the system. +最初からアプリケーションのテストを開始することも最良です。これにより、修正が容易な段階で早期に欠陥を発見できます。またこれにより、システムに新しい機能が追加されたときに、コードを確実にリファクタリングすることもできます。 -## Unit Testing +## ユニットテスト -Unit tests exercise a single unit of code (component, page, service, pipe, etc) in isolation from the rest of the system. Isolation is achieved through the injection of mock objects in place of the code's dependencies. The mock objects allow the test to have fine-grained control of the outputs of the dependencies. The mocks also allow the test to determine which dependencies have been called and what has been passed to them. +ユニットテストでは、システムの他の部分から分離して、単一のコードユニット（Component、Page、Service、Pipe など）を実行します。分離は、コードの依存関係の代わりにモックオブジェクトを注入することによって実現されます。モックオブジェクトによって、テストは依存関係の切り出しをきめ細かく制御することができます。モックによって、どの依存関係が呼び出され、何が渡されたかをテストで判断することもできます。 -Well-written unit tests are structured such that the unit of code and the features it contains are described via `describe()` callbacks. The requirements for the unit of code and its features are tested via `it()` callbacks. When the descriptions for the `describe()` and `it()` callbacks are read, they make sense as a phrase. When the descriptions for nested `describe()`s and a final `it()` are concatenated together, they form a sentence that fully describes the test case. +適切に記述されたユニットテストは、コードの単位とそれに含まれる機能が `describe()` コールバックによって記述されるように構成されています。コード単位とその機能の要件は、`it()` コールバックによってテストされます。`describe()` コールバックと `it()` コールバックの説明を読むと、フレーズとして意味がわかります。ネストされた `describe()` と最後の `it()` の記述をつなげると、テストケースを完全に記述する文が形成されます。 -Since unit tests exercise the code in isolation, they are fast, robust, and allow for a high degree of code coverage. +ユニットテストはコードを分離して実行するため、高速で堅牢であり、高度なコードカバレッジが可能です。 -### Using Mocks +### モックの利用 -Unit tests exercise a code module in isolation. To facilitate this, we recommend using Jasmine (https://jasmine.github.io/). Jasmine creates mock objects (which Jasmine calls "spies") to take the place of dependencies while testing. When a mock object is used, the test can control the values returned by calls to that dependency, making the current test independent of changes made to the dependency. This also makes the test setup easier, allowing the test to only be concerned with the code within the module under test. +ユニットテストでは、コードをコードをモジュールで分離して実行します。これを簡単にするには、Jasmine(https://jasmine.github.io/) を使用することをお勧めします。Jasmine は、テスト実行中に依存関係の代わりにモックオブジェクト(Jasmine は 「スパイ」 と呼んでいます)を作成します。モックオブジェクトを使用すると、テストはその依存関係への呼び出しによって返される値を制御できるため、依存関係に加えられた変更から現在のテストを独立させることができます。これにより、テストのセットアップも簡単になり、テスト対象のモジュール内のコードだけをテストすることができます。 -Using mocks also allows the test to query the mock to determine if it was called and how it was called via the `toHaveBeenCalled*` set of functions. Tests should be as specific as possible with these functions, favoring calls to `toHaveBeenCalledTimes` over calls to `toHaveBeenCalled` when testing that a method has been called. That is `expect(mock.foo).toHaveBeenCalledTimes(1)` is better than `expect(mock.foo).toHaveBeenCalled()`. The opposite advice should be followed when testing that something has not been called (`expect(mock.foo).not.toHaveBeenCalled()`). +モックを使用すると、モックが呼び出されたかどうか、および `toHaveBeenCalled*` セットの関数を介してどのように呼び出されたかを判断するために、テストでモックを確認することもできます。これらの関数では、メソッドが呼び出されたことをテストするときに、`toHaveBeenCalled` メソッドの呼び出しよりも `toHaveBeenCalledTimes` の呼び出しを優先して、テストをできるだけ具体的に行う必要があります。つまり、`expect(mock.foo).toHaveBeenCalledTimes(1)` は `expect(mock.foo).toHaveBeenCalled()` よりも優れています。何かが呼ばれていないこと（`expect(mock.foo).not.toHaveBeenCalled()`）をテストする際は、逆のアドバイスに従うべきです。 -There are two common ways to create mock objects in Jasmine. Mock objects can be constructed from scratch using `jasmine.createSpy` and `jasmine.createSpyObj` or spies can be installed onto existing objects using `spyOn()` and `spyOnProperty()`. +Jasmine でモックオブジェクトを作成する一般的な方法は 2 つあります。モックオブジェクトは、`jasmine.createSpy` と`jasmine.createSpyObj` を使ってスクラッチで作成することも、`spyOn()` と `spyOnProperty()` を使って既存のオブジェクトにスパイをインストールすることもできます。 -#### Using `jasmine.createSpy` and `jasmine.createSpyObj` +### `jasmine.createSpy` と `jasmine.createSpyObj` の利用 -`jasmine.createSpyObj` creates a full mock object from scratch with a set of mock methods defined on creation. This is useful in that it is very simple. Nothing needs to be constructed or injected into the test. The disadvantage of using this function is that it allows the creation of objects that may not match the real objects. +`jasmine.createSpyObj` は、作成時に定義された一連のモックメソッドを使用して、完全なモックオブジェクトをスクラッチで作成します。これはとてもシンプルで便利です。テストのために何かを組み立てたり注入したりする必要はありません。この関数の使用する欠点は、実際のオブジェクトと一致しないオブジェクトを生成できることです。 -`jasmine.createSpy` is similar but it creates a stand-alone mock function. +`jasmine.createSpy` も似ていますが、スタンドアロンのモック関数を作成します。 -#### Using `spyOn()` and `spyOnProperty()` +#### `spyOn()` と `spyOnProperty()` の利用 -`spyOn()` installs the spy on an existing object. The advantage of using this technique is that if an attempt is made to spy on a method that does not exist on the object, an exception is raised. This prevents the test from mocking methods that do not exist. The disadvantage is that the test needs a fully formed object to begin with, which may increase the amount of test setup required. +`spyOn()` は、既存のオブジェクトにスパイをインストールします。この手法を使用する利点は、オブジェクト上に存在しないメソッドをスパイしようとすると、例外が発生することです。これにより、テストが存在しないメソッドをモックすることを防ぎます。欠点は、テストが最初から完全に整形されたオブジェクトを必要とすることであり、これはテストに必要なセットアップの量を増加させるかと思います。 -`spyOnProperty()` is similar with the difference being that it spies on a property and not a method. +`spyOnProperty()` は似ていますが、メソッドではなくプロパティに対してスパイするという点で異なります。 -### General Testing Structure +### 一般的なテストの構成 -Unit tests are contained in `spec` files with one `spec` file per entity (component, page, service, pipe, etc.). The `spec` files live side-by-side with and are named after the source that they are testing. For example, if the project has a service called WeatherService, the code for it is in a file named `weather.service.ts` with the tests in a file named `weather.service.spec.ts`. Both of those files are in the same folder. +ユニットテストは、エンティティ（Component、Page、Service、Pipe など）ごとに 1 つの `spec` ファイルを持つ `spec` ファイルに含まれています。`spec` ファイルは、テスト中のソースと一緒に存在し、かつその名前が付けられます。たとえば、プロジェクトに WeatherService という Service がある場合、そのコードは`weather.service.ts` という名前のファイルにあり、テストは `weather.service.spec.ts` という名前のファイルにあります。これらのファイルは両方とも同じフォルダにあります。 -The `spec` files themselves contain a single `describe` call that defines that overall test. Nested within it are other `describe` calls that define major areas of functionality. Each `describe` call can contain setup and teardown code (generally handled via `beforeEach` and `afterEach` calls), more `describe` calls forming a hierarchical breakdown of functionality, and `it` calls which define individual test cases. +`spec` ファイル自体には、そのテスト全体を定義するただ一つの `describe` コールが含まれています。その中には、主要な機能領域を定義する他の `describe` コールがネストされています。各 `describe` コールには、setup コードと teardown コード（一般的に `beforeEach` と `afterEach` コールによって処理される）、機能を階層的に分解した `describe` コール、また個々のテストケースを定義する `it` コールが含まれます。 -The `describe` and `it` calls also contain a descriptive text label. In well-formed tests, the `describe` and `it` calls combine with their labels to perform proper phrases and the full label for each test case, formed by combining the `describe` and `it` labels, creates a full sentence. +`describe` と `it` コールには、説明のテキストラベルも含まれます。適切な形式のテストでは、`describe` と `it` をコールすると、ラベルと組み合わせた適切なフレーズが実行され、各テストケースのすべてのラベルが `describe` と `it` ラベルを組み合わせて構成され、完全な文が作成されます。 -For example: +例: ```tsx describe('Calculation', () => { @@ -72,13 +72,13 @@ describe('Calculation', () => { }); ``` -The outer `describe` call states that the `Calculation` service is being tested, the inner `describe` calls state exactly what functionality is being tested, and the `it` calls state what the test cases are. When run the full label for each test case is a sentence that makes sense (Calculation divide cowardly refuses to divide by zero). +外側の `describe` コールは `Calculation` Service がテストされていることを示し、内側の `describe` コールはテストされている機能を正確に示し、そして `it` コールはテストケースが何であるかを示しています。各テストケースの完全なラベルを実行すると、意味のある文になります(卑劣な 0 での除算という計算を拒否しました)。 -### Pages and Components +### ページとコンポーネント -Pages are just Angular components. Thus, pages and components are both tested using Angular's Component Testing guidelines. +Pages は単なる Angular コンポーネントです。そのため、ページとコンポーネントは両方とも Angular のコンポーネントテストガイドライン を使ってテストされます。 -Since pages and components contain both TypeScript code and HTML template markup it is possible to perform both component class testing and component DOM testing. When a page is created, the template test that is generated looks like this: +ページとコンポーネントには TypeScript コードと HTML テンプレートマークアップの両方が含まれているため、コンポーネントクラスのテストとコンポーネント DOM のテストの両方を実行できます。ページが作成されると、生成されるテンプレートテストは次のようになります: ```tsx import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; @@ -107,17 +107,17 @@ describe('TabsPage', () => { }); ``` -When doing component class testing, the component object is accessed using the component object defined via `component = fixture.componentInstance;`. This is an instance of the component class. When doing DOM testing, the `fixture.nativeElement` property is used. This is the actual `HTMLElement` for the component, which allows the test to use standard HTML API methods such as `HTMLElement.querySelector` in order to examine the DOM. +コンポーネントクラスのテストを行う場合、コンポーネントオブジェクトは `component=fixture.componentInstance;` によって定義されたコンポーネントオブジェクトを使用してアクセスされます。これはコンポーネントクラスのインスタンスです。DOM テストを行う際には、`fixture.nativeElement` プロパティが使用されます。これはコンポーネントの実際の `HTMLElement`であり、テストで DOM を調べるために `HTMLElement.querySelector` などの標準の HTML API メソッドを使うことを可能にします。 -## Services +## Service -Services often fall into one of two broad categories: utility services that perform calculations and other operations, and data services that perform primarily HTTP operations and data manipulation. +Service は、多くの場合、計算やその他の操作を実行するユーティリティの service と、主に HTTP 操作やデータ操作を実行するデータの service の 2 つの大まかなカテゴリーのいずれかに分類されます。 -### Basic Service Testing +### 基本的な Service のテスト -The suggested way to test most services is to instantiate the service and manually inject mocks for any dependency the service has. This way, the code can be tested in isolation. +ほとんどの service をテストするために推奨する方法は、service をインスタンス化し、service が持つ依存関係のモックを手動で注入することです。こうすることで、コードを分離してテストすることができます。 -Let's say that there is a service with a method that takes an array of timecards and calculates net pay. Let's also assume that the tax calculations are handled via another service that the current service depends on. This payroll service could be tested as such: +たとえば、タイムカードの配列を取得して差引支給額を計算するメソッドを持つ service があるとします。また税金計算は、現在の service が依存しているもう一つの service を介して処理されるとします。この給与計算の service は、このようにテストすることができます: ```tsx import { PayrollService } from './payroll.service'; @@ -142,9 +142,9 @@ describe('PayrollService', () => { }); ``` -This allows the test to control the values returned by the various tax calculations via mock setup such as `taxServiceSpy.federalIncomeTax.and.returnValue(73.24)`. This allows the "net pay" tests to be independent of the tax calculation logic. When the tax codes change, only the tax service related code and tests need to change. The tests for the net pay can continue to operate as they are since these tests do not care how the tax is calculated, just that the value is applied properly. +これにより、テストでは `taxServiceSpy.federalIncomeTax.and.returnValue(73.24)` などのモックの設定を介して様々な税金計算から戻される値を制御できます。これにより、「差引支給額」のテストを税金計算ロジックから独立させることができます。税金のコードが変更された場合、修正する必要があるのは税金 service 関連のコードとテストのみです。差引支給額のテストは、税金がどのように計算されるかを考慮せず、値が適切に適用されるのみであるため、そのまま機能し続けることができます。 -The scaffolding that is used when a service is generated via `ionic g service name` uses Angular's testing utilities and sets up a testing module. Doing so is not strictly necessary. That code may be left in, however, allowing the service to be built manually or injected as such: +`ionic g service name` で service を生成するときに使われる scaffold は Angular のテストユーティリティを使ってテストモジュールをセットアップします。必ずしもそうする必要はありません。ただし、このコードを残しておくことで、手動でサービスを構築したり、次のように注入したりすることができます: ```tsx import { TestBed, inject } from '@angular/core/testing'; @@ -178,11 +178,11 @@ describe('PayrolService', () => { }); ``` -#### Testing HTTP Data Services +#### HTTP データ Service のテスト -Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please see Angular's Angular's Testing HTTP requests guide. +HTTP 操作を実行するほとんどの service は、それらの操作を実行するために Angular の HttpClient service を使用します。そのようなテストには、Angular の `HttpClientTestingModule` を使うことが推奨されています。このモジュールの詳細なドキュメントは Angular の HTTP リクエストをテストする のガイドを参照してください。 -This basic setup for such a test looks like this: +このようなテストの基本的な設定は次のようになります: ```tsx import { HttpBackend, HttpClient } from '@angular/common/http'; @@ -229,11 +229,11 @@ describe('IssTrackingDataService', () => { }); ``` -### Pipes +### Pipe -A pipe is like a service with a specifically defined interface. It is a class that contains one public method, `transform`, which manipulates the input value (and other optional arguments) in order to create the output that is rendered on the page. To test a pipe: instantiate the pipe, call the transform method, and verify the results. +pipe は、特別に定義されたインタフェースを持つ service のようなものです。このクラスには、入力値(およびその他のオプションの引数)を操作してページにレンダリングされる出力を作成するための public メソッド `transform` が含まれています。パイプをテストするには、パイプをインスタンス化し、transform メソッドを呼び出して結果を検証します。 -As a simple example, let's look at a pipe that takes a `Person` object and formats the name. For the sake of simplicity, let's say a `Person` consists of an `id`, `firstName`, `lastName`, and `middleInitial`. The requirements for the pipe are to print the name as "Last, First M." handling situations where a first name, last name, or middle initial do not exist. Such a test might look like this: +簡単な例として、`Person` オブジェクトを受け取り、名前をフォーマットする pipe を見てみましょう。簡単にするために、`Person` は `id`、`firstName`、`lastName`、`middleInitial` で構成されるとします。パイプの要件は、名・姓・ミドルネームのいずれかが存在しない場合に、名前を「性、名 M(ミドルネーム)。」として出力することです。このようなテストは次のようになります: ```tsx import { NamePipe } from './name.pipe'; @@ -279,34 +279,34 @@ describe('NamePipe', () => { }); ``` -It is also beneficial to exercise the pipe via DOM testing in the components and pages that utilize the pipe. +また、pipe を利用するコンポーネントおよびページでの DOM テストを介して pipe を実行することも有益です。 -## End-to-end Testing +## エンドツーエンドテスト -End-to-end testing is used to verify that an application works as a whole and often includes a connection to live data. Whereas unit tests focus on code units in isolation and thus allow for low-level testing of the application logic, end-to-end tests focus on various user stories or usage scenarios, providing high-level testing of the overall flow of data through the application. Whereas unit tests try to uncover problems with an application's logic, end-to-end tests try to uncover problems that occur when those individual units are used together. End-to-end tests uncover problems with the overall architecture of the application. +エンドツーエンドのテストは、アプリケーションが全体として機能し、多くの場合、ライブデータへの接続を含むことを検証するために使用されます。一方で、ユニットテストは分離されたコードユニットに重点を置いているため、アプリケーションロジックの低レベルのテストが可能ですが、エンドツーエンドテストはさまざまなユーザーストーリーや使用・シナリオに重点を置いており、アプリケーション全体を通したデータフローの総合的な高レベルのテストを提供します。また一方で、ユニットテストではアプリケーションのロジックの問題を明らかにしようとしますが、エンドツーエンドテストでは、個々のユニットが一緒に使用される場合に発生する問題を明らかにしようとします。エンドツーエンドのテストにより、アプリケーションの全体的なアーキテクチャに関する問題が明らかになります。 -Since end-to-end tests exercise user stories and cover the application as a whole rather than individual code modules, end-to-end tests exist in their own application in the project apart from the code for the main application itself. Most end-to-end tests operate by automating common user interactions with the application and examining the DOM to determine the results of those interactions. +エンドツーエンドテストはユーザーストーリーを実行し、個々のコードモジュールではなくアプリケーション全体を対象とするため、エンドツーエンドテストは、メインアプリケーション自体のコードとは別に、プロジェクト内の独自のアプリケーションとして存在します。ほとんどのエンドツーエンドテストは、アプリケーションとの共通のユーザー対話を自動化し、それらの対話の結果を判別するために DOM を調査します。 -### Test Structure +### テストの構成 -When an `@ionic/angular` application is generated, a default end-to-end test application is generated in the `e2e` folder. This application uses Protractor to control the browser and Jasmine to structure and execute the tests. The application initially consists of four files: +`@ionic/angular` アプリケーションが作成されると、 デフォルトのエンドツーエンドのテストアプリケーションが `e2e` フォルダに生成されます。このアプリケーションは Protractor を使用してブラウザを制御し、Jasmine を使用してテストを構築し、実行します。アプリケーションは、初期時は次の 4 つのファイルで構成されています: -- `protractor.conf.js` - the Protractor configuration file -- `tsconfig.e2e.json` - specific TypeScript configuration for the testing application -- `src/app.po.ts` - a page object containing methods that navigate the application, query elements in the DOM, and manipulate elements on the page -- `src/app.e2e-spec.ts` - a testing script +- `protractor.conf.js` - Protractor の設定ファイル +- `tsconfig.e2e.json` - テストアプリケーション用の特定の TypeScript の設定 +- `src/app.po.ts` - アプリケーションをナビゲートするメソッド、DOM 内の要素を照会するメソッド、ページ上の要素を操作するメソッドを含むページオブジェクト +- `src/app.e2e-spec.ts` - テスト用のスクリプト -#### Page Objects +#### ページオブジェクト -End-to-end tests operate by automating common user interactions with the application, waiting for the application to respond, and examining the DOM to determine the results of the interaction. This involves a lot of DOM manipulation and examination. If this were all done manually, the tests would be very brittle and difficult to read and maintain. +エンドツーエンドのテストは、アプリケーションとの共通のユーザー対話を自動化し、アプリケーションが応答するのを待ち、対話の結果を判別するために DOM を検査します。これには、多くの DOM 操作と試験が必要です。これらをすべて手作業で行うと、テストは非常に脆くなり、見て理解することや保守が困難になります。 -Page objects encapsulate the HTML for a single page in a TypeScript class, providing an API that the test scripts use to interact with the application. The encapsulation of the DOM manipulation logic in page objects makes the tests more readable and far easier to reason about, lowering the maintenance costs of the test. Creating well-crafted page objects is the key to creating high quality and maintainable end-to-end tests. +ページオブジェクトは、TypeScript クラスの単一ページの HTML をカプセル化し、テスト用のスクリプトがアプリケーションと対話するために使用する API を提供します。DOM 操作ロジックをページオブジェクト内にカプセル化することで、テストが読みやすくなり、かつ判断することがはるかに簡単になり、テストの保守コストが大幅に削減されます。洗練されたページオブジェクトを作成することは、高品質で保守しやすいエンドツーエンドのテストを作成するための鍵です。 -##### Base Page Object +##### ベースページオブジェクト -A lot of tests rely on actions such as waiting for a page to be visible, entering text into an input, and clicking a button. The methods used to do this remain consistent with only the CSS selectors used to get the appropriate DOM element changing. Therefore it makes sense to abstract this logic into a base class that can be used by the other page objects. +多くのテストは、ページが表示されるのを待ったり、input にテキストを入力したり、ボタンをクリックするなどのアクションに依存しています。これを行うために使用されるメソッドは、適切な DOM 要素の変更を取得するために使用される CSS セレクターのみと一貫性があります。したがって、このロジックを、他のページオブジェクトが使用できるベースクラスに抽象化することは理にかなっています。 -Here is an example that implements a few basic methods that all page objects will need to support. +すべてのページオブジェクトがサポートを必要とするいくつかのベースメソッドを実装する例を次に示します: ```tsx import { browser, by, element, ExpectedConditions } from 'protractor'; @@ -368,11 +368,11 @@ export class PageObjectBase { } ``` -##### Per-Page Abstractions +##### ページ毎の要約 -Each page in the application will have its own page object class that abstracts the elements on that page. If a base page object class is used, creating the page object involves mostly creating custom methods for elements that are specific to that page. Often, these custom elements take advantage of methods in the base class in order to perform the work that is required. +アプリケーションの各ページには、そのページの要素を抽象化する独自のページオブジェクトクラスがあります。ベースとなるページオブジェクトクラスを使用する場合、ページオブジェクトを作成するには、ほとんどの場合そのページに固有の要素のカスタムメソッドを作成する必要があります。多くの場合、これらのカスタム要素は、必要な作業を実行するためにベースクラスのメソッドの恩恵を受けます。 -Here is an example page object for a simple but typical login page. Notice that many of the methods, such as `enterEMail()`, call methods in the base class that perform the bulk of the work. +次に、単純ですが典型的なログインページのページオブジェクトの例を示します。`enterEMail()` のような多くのメソッドは、作業の大部分を行うベースクラスのメソッドを呼び出すことに注意してください。 ```tsx import { browser, by, element, ExpectedConditions } from 'protractor'; @@ -405,13 +405,13 @@ export class LoginPage extends PageObjectBase { } ``` -#### Testing Scripts +#### テストスクリプト -Similar to unit tests, end-to-end test scripts consist of nested `describe()` and `it()` functions. In the case of end-to-end tests, the `describe()` functions generally denote specific scenarios with the `it()` functions denoting specific behaviors that should be exhibited by the application as actions are performed within that scenario. +ユニットテストと同様に、エンドツーエンドのテストスクリプトはネストされた `describe()` と `it()` 関数で構成されています。エンドツーエンドのテストの場合、`describe()` 関数は一般に、特定のシナリオを、そのシナリオ内でアクションが実行されるときにアプリケーションによって表されるべき特定の振る舞いを示す `it()` 関数とともに示します。 -Also similar to unit tests, the labels used in the `describe()` and `it()` functions should make sense both with the "describe" or "it" and when concatenated together to form the complete test case. +また、ユニットテストと同様に、`describe()` および `it()` 関数で使用されるラベルは、"describe" または "it"と、完全なテストケースを形成するためにともに連結されるとき、両方とも意味をなします。 -Here is a sample end-to-end test script that exercises some typical login scenarios. +典型的なログインシナリオを実行するエンドツーエンドのテストスクリプトの簡単な例を次に示します。 ```tsx import { AppPage } from '../page-objects/pages/app.po'; @@ -499,17 +499,17 @@ describe('Login', () => { }); ``` -### Configuration +### 設定 -The default configuration uses the same `environment.ts` file that is used for development. In order to provide better control over the data used by the end-to-end tests, it is often useful to create a specific environment for testing and use that environment for the tests. This section shows one possible way to create this configuration. +デフォルトの設定では、開発に使用される同じ `environment.ts` ファイルを使います。エンドツーエンドのテストで使用するデータをより適切に制御するには、テスト用の特定の環境を用意し、テストにその環境を使用すると便利なことが多いです。このセクションでは、この設定を作成する 1 つの方法を示します。 -#### Testing Environment +#### テスト環境 -Setting up a testing environment involves creating a new environment file that uses a dedicated testing backend, updating the `angular.json` file to use that environment, and modifying the `e2e` script in the `package.json` to specify the `test` environment. +テスト環境を設定するには、テスト専用のバックエンドを使用する新しい環境ファイルを作成し、その環境を使うために `angular.json` ファイルを更新し、`package.json` 中の `e2e` スクリプトを `test` 環境を指定するように修正します。 -##### Create the `environment.e2e.ts` File +##### `environment.e2e.ts` ファイルを生成 -The Angular `environment.ts` and `environment.prod.ts` files are often used to store information such as the base URL for the application's backend data services. Create an `environment.e2e.ts` that provides the same information, only connecting to backend services that are dedicated to testing rather than the development or production backend services. Here is an example: +Angular の `environment.ts` と `environment.prod.ts` ファイルは、アプリケーションのバックエンドのデータサービスのベース URL などの情報を格納するために度々使用されます。また、同じ情報を提供する `environment.e2e.ts` を作成してください。これは、開発または本番のバックエンドサービスではなく、テスト専用のバックエンドサービスにのみ接続します。以下に例を示します: ```tsx export const environment = { @@ -519,11 +519,11 @@ export const environment = { }; ``` -##### Modify the `angular.json` File +##### `angular.json` ファイルを修正 -The `angular.json` file needs to be modified to use this file. This is a layered process. Follow the XPaths listed below to add the configuration that is required. +`angular.json` ファイルを使用するには、このファイルを修正する必要があります。これは階層化プロセスです。以下の XPath リストに従って、必要な設定を追加しましょう。 -Add a configuration at `/projects/app/architect/build/configurations` called `test` that does the file replacement: +`/projects/app/architect/build/configurations` にファイルの置換を行う `test` という名前の設定を追加します: ```json "test": { @@ -536,7 +536,7 @@ Add a configuration at `/projects/app/architect/build/configurations` called `te } ``` -Add a configuration at `/projects/app/architect/serve/configurations` called `test` that points the browser target at the `test` build configuration that was defined above. +`/projects/app/architect/serve/configurations` に、上記で定義した `test` というビルドの設定をブラウザターゲットに指定する `test` という名前の設定を追加します。 ```json "test": { @@ -544,7 +544,7 @@ Add a configuration at `/projects/app/architect/serve/configurations` called `te } ``` -Add a configuration at `/projects/app-e2e/architect/e2e/configurations` called `test` that does points the dev server target at the `test` serve configuration defined above. +`/projects/app-e2e/architect/e2e/configurations` に、上記で定義した `test` という起動設定で開発サーバーターゲットを指定する `test` という名前の設定を追加します。 ```json "test": { @@ -552,9 +552,9 @@ Add a configuration at `/projects/app-e2e/architect/e2e/configurations` called ` } ``` -##### Modify the `package.json` File +##### `package.json` ファイルを修正 -Modify the `package.json` file so that `npm run e2e` uses the `test` configuration. +`npm run e2e` が `test` の設定を使うように `package.json` ファイルを修正します。 ```json "scripts": { @@ -568,14 +568,14 @@ Modify the `package.json` file so that `npm run e2e` uses the `test` configurati }, ``` -#### Test Cleanup +#### テストクリーンアップ -If the end-to-end tests modify data in any way it is helpful to reset the data to a known state once the test completes. One way to do that is to: +エンドツーエンドテストが何らかの方法でデータを変更する場合は、テストが完了したらデータを既知の状態に一度リセットすると便利です。そのための 1 つの方法は: -1. Create an endpoint that performs the cleanup. -1. Add a `onCleanUp()` function to the `config` object exported by the `protractor.conf.js` file. +1. クリーンアップを実行するエンドポイントを生成する。 +1. `protractor.conf.js` ファイルによってエクスポートされる `config` オブジェクトに `onCleanUp()` 関数を追加する -Here is an example: +次に例を示します: ```javascript onCleanUp() { diff --git a/docs/angular/virtual-scroll.md b/docs/angular/virtual-scroll.md index 634821b18f6..5ce19bf4c9d 100644 --- a/docs/angular/virtual-scroll.md +++ b/docs/angular/virtual-scroll.md @@ -1,4 +1,4 @@ -# Virtual Scroll +# 仮想スクロール :::caution Looking for `ion-virtual-scroll`? diff --git a/docs/angular/your-first-app.md b/docs/angular/your-first-app.md index 06abbc374ee..5e821f6b5b2 100644 --- a/docs/angular/your-first-app.md +++ b/docs/angular/your-first-app.md @@ -1,6 +1,6 @@ --- -title: 'Your First Ionic App: Angular' -sidebar_label: Build Your First App +title: 'はじめてのIonicアプリ: Angular' +sidebar_label: はじめてのアプリ --- @@ -11,7 +11,7 @@ sidebar_label: Build Your First App /> -The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step. +Ionic の素晴らしいところは、1 つのコードベースで、使い慣れた Web ツールと言語を使用して任意のプラットフォーム用にビルドできることです。 Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step. Here’s the finished app running on all 3 platforms: @@ -69,17 +69,17 @@ The `-g` option means _install globally_. When packages are installed globally, Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. ::: -## Create an App +## アプリの作成 -Next, create an Ionic Angular app that uses the “Tabs” starter template and adds Capacitor for native functionality: +次に、"Tabs" というアプリテンプレートを使用して Ionic Angular アプリを生成し、Native 機能を使うために Capacitor を追加します。 ```shell ionic start photo-gallery tabs --type=angular --capacitor ``` -This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily! +このスタータープロジェクトには、Ionic 開発のために事前に構成された 3 つのページとベストプラクティスが用意されています。共通の構成要素がすでに配置されているため、機能を簡単に追加できます！ -Next, change into the app folder: +次に、アプリのフォルダに移動します: ```shell cd photo-gallery @@ -112,9 +112,9 @@ defineCustomElements(window); That’s it! Now for the fun part - let’s see the app in action. -## Run the App +## アプリを起動 -Run this command next: +次のコマンドを実行してください: ```shell ionic serve diff --git a/docs/angular/your-first-app/2-taking-photos.md b/docs/angular/your-first-app/2-taking-photos.md index 2c94527390e..0d839b8e2f5 100644 --- a/docs/angular/your-first-app/2-taking-photos.md +++ b/docs/angular/your-first-app/2-taking-photos.md @@ -1,6 +1,6 @@ --- title: Taking Photos with the Camera -sidebar_label: Taking Photos +sidebar_label: カメラ撮影 --- diff --git a/docs/angular/your-first-app/3-saving-photos.md b/docs/angular/your-first-app/3-saving-photos.md index c1e013a8bec..cf9b948c221 100644 --- a/docs/angular/your-first-app/3-saving-photos.md +++ b/docs/angular/your-first-app/3-saving-photos.md @@ -1,5 +1,5 @@ --- -sidebar_label: Saving Photos +sidebar_label: 写真の保存 --- # Saving Photos to the Filesystem diff --git a/docs/angular/your-first-app/4-loading-photos.md b/docs/angular/your-first-app/4-loading-photos.md index 6f59d3f951f..f2fc61b1fd1 100644 --- a/docs/angular/your-first-app/4-loading-photos.md +++ b/docs/angular/your-first-app/4-loading-photos.md @@ -1,5 +1,5 @@ --- -sidebar_label: Loading Photos +sidebar_label: 写真の読み込み --- # Loading Photos from the Filesystem diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/docs/angular/your-first-app/5-adding-mobile.md index ce7f60e75c5..16235a008a4 100644 --- a/docs/angular/your-first-app/5-adding-mobile.md +++ b/docs/angular/your-first-app/5-adding-mobile.md @@ -2,7 +2,7 @@ strip_number_prefixes: false --- -# Adding Mobile +# モバイルデバイス機能の追加 Our photo gallery app won’t be complete until it runs on iOS, Android, and the web - all using one codebase. All it takes is some small logic changes to support mobile platforms, installing some native tooling, then running the app on a device. Let’s go! diff --git a/docs/angular/your-first-app/6-deploying-mobile.md b/docs/angular/your-first-app/6-deploying-mobile.md index e30d8acd79d..82e392c2e64 100644 --- a/docs/angular/your-first-app/6-deploying-mobile.md +++ b/docs/angular/your-first-app/6-deploying-mobile.md @@ -1,6 +1,6 @@ --- title: Deploying to iOS and Android -sidebar_label: Deploying Mobile +sidebar_label: モバイルへのデプロイ --- diff --git a/docs/angular/your-first-app/7-live-reload.md b/docs/angular/your-first-app/7-live-reload.md index 26fe3b4fbf0..484feddcc0f 100644 --- a/docs/angular/your-first-app/7-live-reload.md +++ b/docs/angular/your-first-app/7-live-reload.md @@ -1,6 +1,6 @@ --- -title: Rapid App Development with Live Reload -sidebar_label: Live Reload +title: アプリ開発を高速化するためのライブリロード +sidebar_label: ライブリロード --- diff --git a/docs/api.md b/docs/api.md index 45e4c1d8d19..ec0f91ca8e6 100644 --- a/docs/api.md +++ b/docs/api.md @@ -1,5 +1,5 @@ --- -title: API Index +title: APIインデックス --- import APIList from '@components/page/api/APIList'; diff --git a/docs/api/accordion-group.md b/docs/api/accordion-group.md index 312f8acd762..65c2348de79 100644 --- a/docs/api/accordion-group.md +++ b/docs/api/accordion-group.md @@ -12,9 +12,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Accordion group is a container for accordion instances. It manages the state of the accordions and provides keyboard navigation. +アコーディオン・グループは、アコーディオンインスタンスのためのコンテナです。これは、アコーディオンの状態を管理し、キーボードナビゲーションを提供します。 -See the [Accordion](./accordion) documentation for more information. +より詳細な情報や使用方法については、 [Accordion](./accordion) を参照ください。 ## Interfaces @@ -29,7 +29,7 @@ interface AccordionGroupChangeEventDetail { ### AccordionGroupCustomEvent -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. +必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。 ```typescript interface AccordionGroupCustomEvent extends CustomEvent { @@ -40,19 +40,19 @@ interface AccordionGroupCustomEvent extends CustomEvent { -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/accordion.md b/docs/api/accordion.md index 0859e3d9ba4..09c7d993972 100644 --- a/docs/api/accordion.md +++ b/docs/api/accordion.md @@ -10,7 +10,7 @@ import Slots from '@ionic-internal/component-api/v7/accordion/slots.md'; ion-accordion: Accordion Components: How to Build & Examples - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -18,110 +18,110 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information. All `ion-accordion` components should be grouped inside `ion-accordion-group` components. +アコーディオンは、情報を整理してグループ化する方法を提供しながら、垂直方向のスペースを減らすために、コンテンツに折り畳み可能なセクションを提供します。すべての `ion-accordion` コンポーネントは `ion-accordion-group` コンポーネントの中にグループ化されている必要があります。 -## Basic Usage +## 基本的な使い方 import Basic from '@site/static/usage/v7/accordion/basic/index.md'; -## Toggle Accordions +## アコーディオンをトグルする方法 -Which accordion is open is controlled by setting the `value` property on `ion-accordion-group`. Setting this property allows developers to programmatically expand or collapse certain accordions. +どのアコーディオンを開くかは、`ion-accordion-group` の `value` プロパティを設定することで制御できます。このプロパティを設定することで、開発者はプログラムによって特定のアコーディオンを展開したり折りたたんだりすることができます。 import Toggle from '@site/static/usage/v7/accordion/toggle/index.md'; -## Listen for Accordion State Changes +## アコーディオンの状態変化を監視 -Developers can listen for the `ionChange` event to be notified when accordions expand or collapse. +開発者は `ionChange` イベントを監視することで、アコーディオンが展開または折りたたまれたときに通知されるようにすることができます。 import ListenChanges from '@site/static/usage/v7/accordion/listen-changes/index.md'; -## Multiple Accordions +## 複数のアコーディオン -Developers can allow multiple accordions to be open at once with the `multiple` property. +開発者は `multiple` プロパティを使用して、複数のアコーディオンを一度に開くことができるようにすることができます。 import Multiple from '@site/static/usage/v7/accordion/multiple/index.md'; -## Disabling Accordions +## アコーディオンの無効化 -### Individual Accordion +### アコーディオンを無効にする -Individual accordions can be disabled with the `disabled` property on `ion-accordion`. +個々のアコーディオンは、`ion-accordion` の `disabled` プロパティで無効にできます。 import DisableIndividual from '@site/static/usage/v7/accordion/disable/individual/index.md'; -### Accordion Group +### アコーディオングループ -The accordion group can be disabled with the `disabled` property on `ion-accordion-group`. +アコーディオングループは、`ion-accordion-group` の `disabled` プロパティで無効にすることができます。 import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md'; -## Readonly Accordions +## 読み込み可能なアコーディオン -### Individual Accordion +### 個別アコーディオン -Individual accordions can be disabled with the `readonly` property on `ion-accordion`. +個々のアコーディオンは、`ion-accordion` の `readonly` プロパティで無効にできます。 import ReadonlyIndividual from '@site/static/usage/v7/accordion/readonly/individual/index.md'; -### Accordion Group +### アコーディオングループ -The accordion group can be disabled with the `readonly` property on `ion-accordion-group`. +アコーディオングループは、`ion-accordion-group` の `readonly` プロパティで無効にできます。 import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.md'; -## Anatomy +## 構造 -### Header +## ヘッダー -The `header` slot is used as the toggle that will expand or collapse your accordion. We recommend you use an `ion-item` here to take advantage of the accessibility and theming functionalities. +`header` slotは、アコーディオンを展開または折りたたむためのトグルとして使用されます。アクセシビリティとテーマ機能を利用するために、ここでは `ion-item` を使用することをお勧めします。 -When using `ion-item` in the `header` slot, the `ion-item`'s `button` prop is set to `true` and the `detail` prop is set to `false`. In addition, we will also automatically add a toggle icon to the `ion-item`. This icon will automatically be rotated when you expand or collapse the accordion. See [Customizing Icons](#icons) for more information. +`header` slotに `ion-item` を使用する場合、 `ion-item` の `button` プロパティは `true` に、 `detail` プロパティは `false` に設定されます。さらに、`ion-item` にはトグルアイコンも自動的に追加されます。このアイコンは、アコーディオンを展開したり折りたたんだりすると、自動的に回転するようになります。詳しくは、 [アイコンのカスタマイズ](#icons) を参照してください。 -### Content +### コンテンツ -The `content` slot is used as the part of the accordion that is revealed or hidden depending on the state of your accordion. You can place anything here except for another `ion-content` instance as only one instance of `ion-content` should be added per page. +`content` slotは、アコーディオンの状態に応じて表示/非表示される部分として使用されます。1ページに1つだけ `ion-content` インスタンスを追加する必要があるため、ここには他の `ion-content` インスタンスを除いて何でも置くことができます。 -## Customization +## カスタマイズ -### Expansion Styles +### 拡張スタイル -There are two built in expansion styles: `compact` and `inset`. This expansion style is set via the `expand` property on `ion-accordion-group`. +組み込みの拡張スタイルには、`compact` と `inset` の 2 種類があります。この拡張スタイルは `ion-accordion-group` の `expand` プロパティによって設定されます。 -When `expand="inset"`, the accordion group is given a border radius. On `md` mode, the entire accordion will shift down when it is opened. +`expand="inset"` の場合、アコーディオングループにはborder radiusが与えられます。 `md` モードでは、アコーディオン全体を開くと下に移動します。 import ExpansionStyles from '@site/static/usage/v7/accordion/customization/expansion-styles/index.md'; -### Advanced Expansion Styles +### 高度な拡張スタイル -You can customize the expansion behavior by styling based on the accordion's state. There are four state classes applied to `ion-accordion`. Styling using these classes can allow you to create advanced state transitions: +アコーディオンの状態に応じてスタイルを設定することで、展開の動作をカスタマイズすることができます。 `ion-accordion` には4つのステートクラスが適用されています。これらのクラスを使ってスタイリングすることで、高度な状態遷移を作成することができます。 -| Class Name | Description | -| ---------- | ----------- | -| `.accordion-expanding` | Applied when the accordion is actively expanding | -| `.accordion-expanded` | Applied when the accordion is fully expanded | -| `.accordion-collapsing` | Applied when the accordion is actively collapsing | -| `.accordion-collapsed` | Applied when the accordion is fully collapsed | +| Class Name | Description | +| ---------- |-----------------------------------| +| `.accordion-expanding` | アコーディオンがアクティブに展開しているときに適用されます。 | +| `.accordion-expanded` | アコーディオンが完全に展開されたときに適用されます。 | +| `.accordion-collapsing` | アコーディオンがアクティブに折りたたまれているときに適用されます。 | +| `.accordion-collapsed` | アコーディオンが完全に折りたたまれているときに適用されます。 | -If you need to target specific pieces of the accordion, we recommend targeting the element directly. For example, if you want to customize the ion-item in your header slot when the accordion is expanded, you can use the following selector: +アコーディオンの特定の部分をターゲットにする必要がある場合、要素を直接ターゲットにすることをお勧めします。例えば、アコーディオンが展開されたときに `header` slot の ion-item をカスタマイズしたい場合、以下のセレクタを使用することができます。 ```css ion-accordion.accordion-expanding ion-item[slot="header"], @@ -134,39 +134,39 @@ import AdvancedExpansionStyles from '@site/static/usage/v7/accordion/customizati -### Icons +### アイコン -When using an `ion-item` in the `header` slot, we automatically add an `ion-icon`. The type of icon used can be controlled by the `toggleIcon` property, and the slot it is added to can be controlled with the `toggleIconSlot` property. +`header` slot に `ion-item` を使用する場合、自動的に `ion-icon` が追加されます。使用するアイコンの種類は `toggleIcon` プロパティで制御でき、追加するスロットも `toggleIconSlot` プロパティで制御することができます。 -If you would like to manage the icon yourself or use an icon that is not an `ion-icon`, you can add the `ion-accordion-toggle-icon` class to the icon element. +アイコンを自分で管理したい場合や、`ion-icon` 以外のアイコンを使用したい場合は、icon 要素に `ion-accordion-toggle-icon` クラスを追加することができます。 -Regardless of which option you choose, the icon will automatically be rotated when you expand or collapse the accordion. +どのオプションを選択しても、アコーディオンを展開または折りたたむと、アイコンは自動的に回転します。 import Icons from '@site/static/usage/v7/accordion/customization/icons/index.md'; -### Theming +### テーマ -Since `ion-accordion` acts as a shell around the header and content elements, you can easily theme the accordion however you would like. You can theme the header by targeting the slotted `ion-item`. Since you are using `ion-item`, you also have access to all of the [ion-item CSS Variables](./item#css-custom-properties) and [ion-item Shadow Parts](./item#css-shadow-parts). Theming the content is also easily achieved by targeting the element that is in the `content` slot. +`ion-accordion` はヘッダーとコンテンツ要素を囲むシェルとして機能するので、アコーディオンを簡単に好きなようにテーマ化することができます。ヘッダーのテーマは、スロットの `ion-item` をターゲットにすることで行うことができます。 `ion-item` を使用しているので、 [ion-item CSS Variables](./item#css-custom-properties) と [ion-item Shadow Parts](./item#css-shadow-parts) にもすべてアクセスすることができます。コンテンツのテイムも、`content` slotにある要素をターゲットにすることで簡単に実現できます。 import Theming from '@site/static/usage/v7/accordion/customization/theming/index.md'; -## Accessibility +## アクセシビリティ -### Animations +### アニメーション -By default, animations are enabled when expanding or collapsing an accordion item. Animations will be automatically disabled when the `prefers-reduced-motion` media query is supported and set to `reduce`. For browsers that do not support this, animations can be disabled by setting the `animated` config in your Ionic Framework app. +デフォルトでは、アコーディオン・アイテムを展開したり折りたたんだりする際にアニメーションが有効になります。アニメーションは `prefers-reduced-motion` メディアクエリがサポートされ、`reduce` に設定されると自動的に無効化されます。対応していないブラウザでは、Ionic Frameworkアプリで `animated` を設定することで、アニメーションを無効にすることができます。 import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibility/animations/index.md'; -### Keyboard Navigation +### キーボードナビゲーション -When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard support for interacting with the component. The following table details what each key does: +`ion-accordion-group` の中で使用する場合、`ion-accordion` はキーボードによる操作を完全にサポートしています。次の表は、それぞれのキーが何をするのかの詳細です。 | Key | Function | | ------------------ | ------------------------------------------------------------ | @@ -178,33 +178,33 @@ When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard sup | `Home` | When focus is on an accordion header, moves focus to the first accordion header. | | `End` | When focus is on an accordion header, moves focus to the last accordion header. | -## Performance +## パフォーマンス -### Animations +### アニメーション -The accordion animation works by knowing the height of the `content` slot when the animation starts. The accordion expects that this height will remain consistent throughout the animation. As a result, developers should avoid performing any operation that may change the height of the content during the animation. +アコーディオンアニメーションは、アニメーションを開始するときに `content` slotの高さを知ることによって動作します。アコーディオンは、この高さがアニメーションの間、一貫して保たれることを期待します。そのため、開発者はアニメーション中にコンテンツの高さを変更するような操作を行わないようにしなければなりません。 -For example, using [ion-img](./img) may cause layout shifts as it lazily loads images. This means that as the animation plays, `ion-img` will load the image data, and the dimensions of `ion-img` will change to account for the loaded image data. This can result in the height of the `content` slot changing. Developers have a few options for avoiding this: +例えば、[ion-img](./img) を使用すると、画像を遅延ロードするため、レイアウトのずれが生じることがあります。つまり、アニメーションを再生すると、 `ion-img` が画像データをロードし、ロードされた画像データを考慮して `ion-img` の寸法が変更されることになります。その結果、 `content` slotの高さが変化してしまうことがあります。これを避けるために、開発者にはいくつかのオプションがあります。 -1. Use an `img` element without any lazy loading. `ion-img` always uses lazy loading, but `img` does not use lazy loading by default. This is the simplest option and works well if you have small images that do not significantly benefit from lazy loading. +1. 遅延読み込みを行わない `img` 要素を使用します。`ion-img` は常に遅延読み込みを使用しますが、`img` はデフォルトでは遅延読み込みを使用しません。これは最も単純なオプションで、遅延読み込みの恩恵をあまり受けない小さな画像を使用する場合に有効です。 -2. Set a minimum width and height on `ion-img`. If you need to use lazy loading and know the dimensions of the images ahead of time (such as if you are loading icons of the same size), you can set the `ion-img` to have a minimum width or height using CSS. This gives developers the benefit of lazy loading while avoiding layout shifts. This works when using an `img` element with `loading="lazy"` too! +2. `ion-img` に最小の幅と高さを設定します。遅延読み込みを使用する必要があり、前もって画像の寸法がわかっている場合（同じサイズのアイコンを読み込む場合など）、CSS を使用して `ion-img` に最小限の幅または高さを設定することができます。これにより、開発者はレイアウトの崩れを防ぎつつ、遅延ロードの恩恵を受けることができます。これは、 `img` 要素を `loading="lazy"` と共に使用する場合にも有効です! -3. If neither of these options are applicable, developers may want to consider disabling animations altogether by using the `animated` property on [ion-accordion-group](./accordion-group). +3. これらの解決方法を選択できない場合、開発者は [ion-accordion-group](./accordion-group) の `animated` プロパティを使用してアニメーションを完全に無効にすることを検討することができます。 -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md index 6e70e6de7f3..d2870b292d0 100644 --- a/docs/api/action-sheet.md +++ b/docs/api/action-sheet.md @@ -13,7 +13,7 @@ import Slots from '@ionic-internal/component-api/v7/action-sheet/slots.md'; ion-action-sheet: Action Sheet Dialog for iOS and Android - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -21,29 +21,29 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop. +Action Sheetは複数の選択肢を表示するダイアログです。アプリのコンテンツ上に表示され、ユーザが手動で破棄しないとアプリの利用を再開することはできません。`ios` modeでは、破壊的な選択肢は明示されます（コンテンツの削除などは赤字などでわかりやすく表示されます）。Action Sheetを破棄するには、背景をタップする、デスクトップのパソコンの場合はエスケープキーを押すなど、複数の選択肢があります。 -## Inline Action Sheets (Recommended) +## インラインアクションシート (推奨) -`ion-action-sheet` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Action Sheet. +`ion-action-sheet` は、テンプレートに直接コンポーネントを記述することで使用することができます。これにより、アクションシートを表示するために配線する必要があるハンドラの数を減らすことができます。 import Trigger from '@site/static/usage/v7/action-sheet/inline/trigger/index.md'; -### Using `isOpen` +### `isOpen` を使う -The `isOpen` property on `ion-action-sheet` allows developers to control the presentation state of the Action Sheet from their application state. This means when `isOpen` is set to `true` the Action Sheet will be presented, and when `isOpen` is set to `false` the Action Sheet will be dismissed. +`ion-action-sheet` の `isOpen` プロパティは、開発者がアプリケーションの状態からアクションシートの表示状態を制御することを可能にします。つまり、`isOpen`が`true`に設定されるとアクションシートが表示され、`isOpen`が`false`に設定されるとアクションシートは解除されます。 -`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Action Sheet is dismissed. Developers should listen for the `ionActionSheetDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-action-sheet` from being tightly coupled with the state of the application. With a one way data binding, the Action Sheet only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Action Sheet needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug. +`isOpen` は一方通行のデータバインディングを使用しているため、アクションシートが終了したときに自動的に `false` に設定されることはありません。開発者は `ionActionSheetDidDismiss` または `didDismiss` イベントをリッスンして `isOpen` を `false` に設定する必要があります。この理由は、`ion-action-sheet` の内部がアプリケーションの状態と密接に結合するのを防ぐためです。一方通行のデータバインディングでは、アクションシートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、アクションシートは、ブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。 import IsOpen from '@site/static/usage/v7/action-sheet/inline/isOpen/index.md'; -## Controller Action Sheets +## Controller アクションシート -The `actionSheetController` can be used in situations where more control is needed over when the Action Sheet is presented and dismissed. +アクションシートの表示・非表示をより細かく制御したい場合は、`actionSheetController`を使用することができます。 import Controller from '@site/static/usage/v7/action-sheet/controller/index.md'; @@ -51,25 +51,25 @@ import Controller from '@site/static/usage/v7/action-sheet/controller/index.md'; ## Buttons -A button's `role` property can either be `destructive` or `cancel`. Buttons without a role property will have the default look for the platform. Buttons with the `cancel` role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the `buttons` array. Note: We recommend that `destructive` buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role. +Buttonの `role` プロパティは、 `destructive` か `cancel` のどちらかを利用できます。 roleプロパティがない場合は、プラットフォームに応じたデフォルトの外観となります。`cancel` role を持つButtonは、配列 `buttons` のどこに配置してもアクションシートの最下部に表示されます。 Note: `destructive` roleをつけるButtonは、一番上のButtonとして配置することをおすすめします。また、背景をタップしてアクションシートを破棄した場合、cancel role に設定されているhandlerが実行されます。 -A button can also be passed data via the `data` property on `ActionSheetButton`. This will populate the `data` field in the return value of the `onDidDismiss` method. +Buttonは `ActionSheetButton` の `data` プロパティを介してデータを渡すこともできます。これは `onDidDismiss` メソッドの戻り値にある `data` フィールドにデータを入力します。 ## Collecting Role Information on Dismiss -When the `didDismiss` event is fired, the `data` and `role` fields of the event detail can be used to gather information about how the Action Sheet was dismissed. +`didDismiss` イベントが発生すると、イベント詳細の `data` と `role` フィールドを使用して、アクションシートがどのように却下されたかについての情報を収集することができます。 import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/index.md'; -## Theming +## テーマ -Action Sheet uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. +アクションシートはscopedによるカプセル化を採用しており、実行時に各スタイルにクラスを追加することで、自動的にCSSをスコープ化します。CSSでscopedセレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。 -### Styling +### スタイリング -We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. +私たちは、 `create` メソッドで `cssClass` にカスタムクラスを渡し、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。このプロパティは、スペースで区切られた複数のクラスを受け付けることもできます。 ```css /* DOES NOT WORK - not specific enough */ @@ -87,27 +87,27 @@ import Styling from '@site/static/usage/v7/action-sheet/theming/styling/index.md -### CSS Custom Properties +## CSSカスタムプロパティ -Any of the defined [CSS Custom Properties](#css-custom-properties-1) can be used to style the Action Sheet without needing to target individual elements. +[CSSカスタムプロパティ](#css-custom-properties-1) は、個々の要素を対象とすることなく、アクションシートのスタイルに使用することができます。 import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-properties/index.md'; -## Accessibility +## アクセシビリティ ### Screen Readers -Action Sheets set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the action sheet is being used in an app. +アクションシートは、スクリーンリーダーにとって [アクセシブル](../reference/glossary#a11y) であるためにariaプロパティを設定しますが、これらのプロパティは、十分な説明になっていなかったり、アクションシートがアプリでどのように使用されているかに合っていなかったりする場合、オーバーライドすることができます。 #### Role -Action Sheets are given a `role` of [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role). In order to align with the ARIA spec, either the `aria-label` or `aria-labelledby` attribute must be set. +アクションシートには `role` として [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) が設定されます。ARIA仕様に合わせるためには、`aria-label`属性か`aria-labelledby`属性のどちらかを設定しなければなりません。 -#### Action Sheet Description +#### Action Sheet の概要 -It is strongly recommended that every Action Sheet have the `header` property defined, as Ionic will automatically set `aria-labelledby` to point to the header element. However, if you choose not to include a `header`, an alternative is to use the `htmlAttributes` property to provide a descriptive `aria-label` or set a custom `aria-labelledby` value. +Ionicは自動的にヘッダー要素を指すように `aria-labelledby` を設定するので、すべてのアクションシートには `header` プロパティを定義することを強く推奨します。しかし、`header`を含めない場合は、`htmlAttributes`プロパティを使って、説明的な`aria-label`を指定するか、カスタムの`aria-labelledby`値を設定することもできます。 @@ -161,9 +161,9 @@ const actionSheet = await actionSheetController.create({ -#### Action Sheet Buttons Description +#### Action Sheet Buttons の概要 -Buttons containing text will be read by a screen reader. If a button contains only an icon, or a description other than the existing text is desired, a label should be assigned to the button by passing `aria-label` to the `htmlAttributes` property on the button. +テキストを含むボタンはスクリーンリーダーによって読み取られる。ボタンがアイコンのみを含んでいる場合や、既存のテキスト以外の説明が必要な場合は、ボタンの `htmlAttributes` プロパティに `aria-label` を渡して、ラベルをボタンに割り当てる必要があります。 @@ -279,19 +279,19 @@ interface ActionSheetOptions { } ``` -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/alert.md b/docs/api/alert.md index 6563d2241ac..db06af13123 100644 --- a/docs/api/alert.md +++ b/docs/api/alert.md @@ -13,28 +13,28 @@ import Slots from '@ionic-internal/component-api/v7/alert/slots.md'; ion-alert: Ionic Alert Buttons with Custom Message Prompts - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; -An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a `header`, `subHeader` and `message`. +アラートは、ユーザーに情報を提示したり、Inputを使ってユーザーから情報を収集したりするダイアログである。アラートはアプリのコンテンツの上に表示され、アプリとの対話を再開する前に、ユーザーが手動で解除する必要があります。また、オプションで `header`、`subHeader`、`message` を持つことができます。 -## Inline Alerts (Recommended) +## インラインアラート(推奨) -`ion-alert` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Alert. +`ion-alert` は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、アラートを表示するために必要なハンドラの数を減らすことができます。 import Trigger from '@site/static/usage/v7/alert/presenting/trigger/index.md'; -### Using `isOpen` +### `isOpen` を使う -The `isOpen` property on `ion-alert` allows developers to control the presentation state of the Alert from their application state. This means when `isOpen` is set to `true` the Alert will be presented, and when `isOpen` is set to `false` the Alert will be dismissed. +`ion-alert` の `isOpen` プロパティは、開発者がアプリケーションの状態からアラートの表示状態を制御することを可能にします。つまり、`isOpen` を `true` に設定するとアラートが表示され、`isOpen` を `false` に設定するとアラートは解除されます。 -`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Alert is dismissed. Developers should listen for the `ionAlertDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-alert` from being tightly coupled with the state of the application. With a one way data binding, the Alert only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Alert needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug. +`isOpen` は一方通行のデータバインディングを使用しているため、アラートが解除されたときに自動的に `false` に設定されることはありません。開発者は `ionAlertDidDismiss` または `didDismiss` イベントを待ち、`isOpen` を `false` に設定する必要があります。この理由は、`ion-alert` の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、アラートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。双方向のデータバインディングでは、アラートはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にする可能性があります。 import IsOpen from '@site/static/usage/v7/alert/presenting/isOpen/index.md'; @@ -42,7 +42,7 @@ import IsOpen from '@site/static/usage/v7/alert/presenting/isOpen/index.md'; ## Controller Alerts -The `alertController` can be used in situations where more control is needed over when the Alert is presented and dismissed. +`alertController`は、アラートを表示するタイミングや解除するタイミングをより細かく制御する必要がある場合に使用することができる。 import Controller from '@site/static/usage/v7/alert/presenting/controller/index.md'; @@ -50,9 +50,9 @@ import Controller from '@site/static/usage/v7/alert/presenting/controller/index. ## Buttons -In the array of `buttons`, each button includes properties for its `text`, and optionally a `handler`. If a handler returns `false` then the alert will not automatically be dismissed when the button is clicked. All buttons will show up in the order they have been added to the `buttons` array from left to right. Note: The right most button (the last one in the array) is the main button. +`buttons` の配列には、各buttonの `text` のプロパティと、オプションで `handler` を利用することができます。 `handler` が `false` を返した場合、buttonがクリックされてもAlertは自動的に解除されません。すべての `buttons` は、左から右にボタン配列に追加された順序で表示されます。 Note: 一番右のボタン(配列の最後の1つ)がメインボタンです。 -Optionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role. +オプションで、`cancel`のような `role` プロパティをボタンに追加することができます。もし `cancel` ロールがボタンのいずれかに設定されている場合、バックドロップをタップしてアラートが解除されると、キャンセルロールを持つボタンから handler が起動されます。 import Buttons from '@site/static/usage/v7/alert/buttons/index.md'; @@ -61,7 +61,7 @@ import Buttons from '@site/static/usage/v7/alert/buttons/index.md'; ## Inputs -Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, `textarea` etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead. +Alertには、複数の異なるInputを含めることもでき、そのデータをアプリで受け取ることができます。 Inputはユーザーに情報の入力を促す簡単な方法として使用できます。Radios, checkboxes と text inputs textarea はすべて利用できますが、これらを混ぜて利用することはできません。例えば、Alertはすべてbutton Inputであったり、すべてcheckboxでのInputを持つことはできますが、同一のAlertにradioとcheckbox Inputを混ぜることはできません。ただし、"text" Inputでは、 `url`, `email`, `text` などの複数のtypeを混ぜて利用することはできます。アラートのガイドラインに収まらない複雑なForm UIが必要な場合は、代わりにModal内でFormを構築することをお勧めします。 ### Text Inputs Example @@ -75,11 +75,11 @@ import Radios from '@site/static/usage/v7/alert/inputs/radios/index.md'; -## Customization +## カスタマイズ -Alert uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. +Alertはscopedによるカプセル化を使用しており、実行時に各スタイルにクラスを追加することで自動的にCSSをスコープします。CSSでscopedセレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。 -We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. +`create` メソッドで `cssClass` にカスタムクラスを渡し、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。このプロパティは、スペースで区切られた複数のクラスを受け付けることもできます。 ```css /* DOES NOT WORK - not specific enough */ @@ -93,7 +93,7 @@ We recommend passing a custom class to `cssClass` in the `create` method and usi } ``` -Any of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Alert without needing to target individual elements: +[CSSカスタムプロパティ](#css-custom-properties) は、個々の要素をターゲットにすることなく、アラートのスタイルに使用することができます。 ```css .my-custom-class { @@ -106,24 +106,24 @@ import Customization from '@site/static/usage/v7/alert/customization/index.md'; :::note - If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. +IonicのAngularアプリを構築する場合、スタイルはグローバルなスタイルシートファイルに追加する必要があります。 ::: -## Accessibility +## アクセシビリティ ### Screen Readers -Alerts set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the alert is being used in an app. +アラートは、スクリーンリーダーにとって[アクセシブル](../reference/glossary#a11y)であるために、ariaプロパティを設定しますが、これらのプロパティは、十分な説明がない場合、またはアラートがアプリでどのように使用されているかと一致しない場合は、オーバーライドすることができます。 #### Role -Ionic automatically sets the Alert's `role` to either [`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role) if there are any inputs or buttons included, or [`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) if there are none. +Ionicは自動的にアラートの`role`を、入力やボタンがある場合は[`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role)に、何もない場合は[`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role)に設定します。 -#### Alert Description +#### Alert の概要 -If the `header` property is defined for the Alert, the `aria-labelledby` attribute will be automatically set to the header's ID. The `subHeader` element will be used as a fallback if `header` is not defined. Similarly, the `aria-describedby` attribute will be automatically set to the ID of the `message` element if that property is defined. +アラートに `header` プロパティが定義されている場合、`aria-labelledby` 属性は自動的にヘッダの ID に設定されます。 `header` が定義されていない場合、`subHeader` 要素がフォールバックとして使用されます。同様に、 `aria-describedby` 属性が定義されている場合は、自動的に `message` 要素の ID が設定されます。 -It is strongly recommended that your Alert have a `message`, as well as either a `header` or `subHeader`, in order to align with the ARIA spec. If you choose not to include a `header` or `subHeader`, an alternative is to provide a descriptive `aria-label` using the `htmlAttributes` property. +ARIAの仕様に合わせるために、アラートには `message` と `header` または `subHeader` を含めることを強くお勧めします。もし `header` や `subHeader` を含めない場合は、`htmlAttributes` プロパティを使用して、説明的な `aria-label` を指定することができます。 @@ -182,9 +182,9 @@ const alert = await alertController.create({ -All ARIA attributes can be manually overwritten by defining custom values in the `htmlAttributes` property of the Alert. +すべてのARIA属性は、アラートの`htmlAttributes`プロパティにカスタム値を定義することで、手動で上書きすることができます。 -#### Alert Buttons Description +#### Alert Buttons の概要 Buttons containing text will be read by a screen reader. If a description other than the existing text is desired, a label can be set on the button by passing `aria-label` to the `htmlAttributes` property on the button. @@ -331,19 +331,19 @@ interface AlertOptions { } ``` -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/app.md b/docs/api/app.md index 1ac4dc6805e..c92f455e3b6 100644 --- a/docs/api/app.md +++ b/docs/api/app.md @@ -10,37 +10,37 @@ import Slots from '@ionic-internal/component-api/v7/app/slots.md'; ion-app: Container Element for an Ionic Application - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; -App is a container element for an Ionic application. There should only be one `` element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the `` when they are presented. +AppはIonicアプリケーションのコンテナ要素です。プロジェクトごとに `` 要素は1つだけにしてください。アプリケーションには、menus, headers, content, footersなど、多くのIonicコンポーネントを含めることができます。オーバーレイコンポーネントは、表示されるときに `` に追加されます。 -Using `ion-app` enables the following behaviors: +`ion-app`を使用すると、以下の動作が可能になります。 -* [Keyboard Lifecycle Events](../developing/keyboard#keyboard-lifecycle-events) without the need for any native plugins -* [Hardware Back Button Listeners](../developing/hardware-back-button) for customizing the hardware back button behavior on Android devices -* Status bar support in Capacitor or Cordova which allows users to scroll to the top of the view by tapping the status bar -* Scroll assist utilities which scroll the content so focused text inputs are not covered by the on-screen keyboard -* [Ripple effect](./ripple-effect) when activating buttons on Material Design mode -* Other tap and focus utilities which make the experience of using an Ionic app feel more native +* [キーボードライフサイクルイベント](../developing/keyboard#keyboard-lifecycle-events) は、ネイティブプラグインを必要なくなります。 +* Android 端末のハードウェアバックボタンの動作をカスタマイズするための [Hardware Back Button Listeners](../developing/hardware-back-button) を使えます +* Capacitor や Cordova でステータスバーをサポートし、ステータスバーをタップすることでビューの最上部にスクロールできるようになります。 +* テキスト入力が画面上のキーボードにかからないように、コンテンツをスクロールさせるスクロールアシストユーティリティが使えます。 +* Material Design モードでのボタン操作時の[Ripple effect](./リップルエフェクト) が使えます。 +* Ionicアプリの使用感をよりネイティブなものにする、その他のタップやフォーカスのユーティリティが使えます。 -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/avatar.md b/docs/api/avatar.md index 0f61597f61c..782ea64a91f 100644 --- a/docs/api/avatar.md +++ b/docs/api/avatar.md @@ -11,18 +11,18 @@ import Slots from '@ionic-internal/component-api/v7/avatar/slots.md'; ion-avatar: Circular Application Avatar Icon Component - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object. +Avatarは通常、写真やアイコンをラップする円形のコンポーネントです。これらは、人またはオブジェクトを表示するために使用できます。 -Avatars can be used by themselves or inside of any element. If placed inside of an `ion-chip` or `ion-item`, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to `start` or `end`, respectively. +Avatarは、単独で使用することも、任意の要素の内部で使用することもできます。`ion-chip` または `ion-item` の内部に配置すると、Avatarは親コンポーネントに合わせてサイズ変更します。Avatarをitemの左側または右側に配置するには、`slot` を `start` か `end` に設定します。 -## Basic Usage +## 基本的な使い方 import Basic from '@site/static/usage/v7/avatar/basic/index.md'; @@ -40,27 +40,27 @@ import Item from '@site/static/usage/v7/avatar/item/index.md'; -## Theming +## テーマ -### CSS Custom Properties +## CSSカスタムプロパティ import CSSProps from '@site/static/usage/v7/avatar/theming/css-properties/index.md'; -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/back-button.md b/docs/api/back-button.md index 4b249e0f913..909e8217746 100644 --- a/docs/api/back-button.md +++ b/docs/api/back-button.md @@ -10,7 +10,7 @@ import Slots from '@ionic-internal/component-api/v7/back-button/slots.md'; ion-back-button: Custom Menu Back Button for Applications - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -18,39 +18,39 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -The back button navigates back in the app's history when clicked. It is only displayed when there is history in the navigation stack, unless [`defaultHref`](#default-back-history) is set. The back button displays different text and icon based on the mode, but this can be customized. +Back Buttonは、クリックされるとアプリの履歴に戻るようにナビゲートします。このボタンは、ナビゲーションスタックに履歴があるときのみ表示されます。ただし、 [`defaultHref`](#default-back-history) が設定されている場合は除きます。戻るボタンはモードに応じて異なるテキストとアイコンを表示しますが、これはカスタマイズすることができます。 -## Basic Usage +## 基本的な使い方 import Basic from '@site/static/usage/v7/back-button/basic/index.md'; -## Custom Back Button +## カスタムのBack Button -By default, the back button will display the text `"Back"` with a `"chevron-back"` icon on `ios`, and an `"arrow-back-sharp"` icon on `md`. This can be customized per back button component by setting the `icon` or `text` properties. Alternatively, it can be set globally using the `backButtonIcon` or `backButtonText` properties in the global config. See the [Config docs](../developing/config) for more information. +デフォルトでは、Back Buttonはテキスト `"Back"` と共に、`ios` では `"chevron-back"` アイコン、`md` では `"arrow-back-sharp"` アイコンを表示します。これは、`icon`または`text`プロパティを設定することで、戻るボタンコンポーネントごとにカスタマイズすることができます。また、グローバル設定の `backButtonIcon` または `backButtonText` プロパティを使用して、グローバルに設定することもできます。詳しくは、[Config docs](../developing/config) を参照してください。 import Custom from '@site/static/usage/v7/back-button/custom/index.md'; -## Default Back History +## デフォルトのBack履歴 -Occasionally an app may need to show the back button and navigate back when there is no history. This can be done by setting the `defaultHref` on the back button to a path. In order to use `defaultHref`, the app must contain a router with paths set. +時折、アプリが履歴がないときに戻るボタンを表示し、ナビゲートする必要がある場合があります。この場合、戻るボタンの `defaultHref` をパスに設定することで実現できます。 `defaultHref` を使用するには、アプリにパスが設定されたルーターが含まれている必要があります。 -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/backdrop.md b/docs/api/backdrop.md index c553e21a6ad..7a1a48a1662 100644 --- a/docs/api/backdrop.md +++ b/docs/api/backdrop.md @@ -12,39 +12,39 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Backdrops are full screen components that overlay other components. They are useful behind components that transition in on top of other content and can be used to dismiss that component. +Backdropは、他のコンポーネントをオーバーレイするためフルスクリーンのコンポーネントです。これらは、他のコンテンツの上に遷移するコンポーネントのバックグラウンドで役立ち、そのコンポーネントを削除するために使用できます。 -## Basic Usage +## 基本的な使い方 -The backdrop prevents clicking or tapping on the content behind it. It is transparent by default, so the below demo includes CSS to make it visible. +Backdropは、その後ろのコンテンツをクリックしたりタップしたりするのを防ぎます。デフォルトでは透明なので、下のデモではCSSで見えるようにしています。 import Basic from '@site/static/usage/v7/backdrop/basic/index.md'; -## Styling +## スタイリング -The backdrop can be customized by assigning CSS properties directly to the backdrop element. Common properties include `background-color`, `background` and `opacity`. +バックドロップは、CSSプロパティをバックドロップ要素に直接割り当てることで、カスタマイズすることができます。一般的なプロパティには `background-color`, `background`, `opacity` があります。 -Content can be displayed above the backdrop by setting a `z-index` on the content, higher than the backdrop (defaults to `2`). +コンテンツに `z-index` を設定し、背景よりも高い位置に表示させることができます（デフォルトは `2` です）。 import Styling from '@site/static/usage/v7/backdrop/styling/index.md'; -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/badge.md b/docs/api/badge.md index 5ebd44f1fda..b5cc2582245 100644 --- a/docs/api/badge.md +++ b/docs/api/badge.md @@ -10,22 +10,22 @@ import Slots from '@ionic-internal/component-api/v7/badge/slots.md'; ion-badge: iOS & Android App Notification Badge Icons - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are. Badges are hidden if no content is passed in. +バッジはインラインブロック要素で、通常は他の要素の近くに表示されます。通常、数字やその他の文字が含まれています。バッジは、ある要素に関連する追加項目があることを知らせたり、その項目の数を示したりするために使用されます。バッジは、コンテンツが渡されないと非表示になります。 -## Basic Usage +## 基本的な使い方 import Basic from '@site/static/usage/v7/badge/basic/index.md'; -## Theming +## テーマ ### Colors @@ -39,19 +39,19 @@ import CSSProps from '@site/static/usage/v7/badge/theming/css-properties/index.m -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/breadcrumb.md b/docs/api/breadcrumb.md index 5679d17a3c9..ec0d92798fe 100644 --- a/docs/api/breadcrumb.md +++ b/docs/api/breadcrumb.md @@ -13,9 +13,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -A Breadcrumb is a single navigation item that is a child of the Breadcrumbs component. A breadcrumb can link elsewhere in an app or it can be plain text. Each breadcrumb has a separator between it and the next breadcrumb and can optionally contain an icon. +Breadcrumbは、Breadcrumbsコンポーネントの子であり、単一のナビゲーションアイテムです。Breadcrumbは、アプリ内の他の場所にリンクすることも、プレーンテキストにすることもできます。Breadcrumbsは、次のBreadcrumbとの間にセパレータを持ち、オプションでアイコンを含むことができます。 -See the [Breadcrumbs](./breadcrumbs) documentation for more information. +詳しい説明は [Breadcrumbs](./breadcrumbs) を参照ください。 ## Interfaces @@ -29,7 +29,7 @@ interface BreadcrumbCollapsedClickEventDetail { ### BreadcrumbCustomEvent -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing . +必須ではありませんが、より強い型付けのために、このインターフェースを `CustomEvent` インターフェースの代わりに使用することができます。 ```typescript interface BreadcrumbCustomEvent extends CustomEvent { @@ -41,19 +41,19 @@ interface BreadcrumbCustomEvent extends CustomEvent { -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/breadcrumbs.md b/docs/api/breadcrumbs.md index cff44c2f872..162b5852469 100644 --- a/docs/api/breadcrumbs.md +++ b/docs/api/breadcrumbs.md @@ -14,9 +14,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Breadcrumbs are navigation items that are used to indicate where a user is on an app or site. They should be used for large sites and apps with hierarchically arranged pages. Breadcrumbs can be collapsed based on the maximum number that can show, and the collapsed indicator can be clicked on to present a popover with more information or expand the collapsed breadcrumbs. +Breadcrumbsは、ユーザーがアプリやサイトのどこにいるのかを示すために使用されるナビゲーションアイテムです。大規模なサイトや、階層的に配置されたページを持つアプリで使用する必要があります。Breadcrumbsは、表示可能な最大数に応じて折りたたむことができ、折りたたんだインジケータをクリックすると、詳細情報を示すポップオーバーが表示され、折りたたんだBreadcrumbを展開することができます。 -## Basic Usage +## 基本的な使い方 import Basic from '@site/static/usage/v7/breadcrumbs/basic/index.md'; @@ -24,7 +24,7 @@ import Basic from '@site/static/usage/v7/breadcrumbs/basic/index.md'; ## Using Icons -### Icons on Items +### アイテムでのアイコン import IconsOnItems from '@site/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md'; @@ -40,7 +40,7 @@ import CustomSeparators from '@site/static/usage/v7/breadcrumbs/icons/custom-sep ### Max Items -If there are more items than the value of `maxItems`, the breadcrumbs will be collapsed. By default, only the first and last items will be shown. +`maxItems` の値よりも多くのアイテムがある場合、breadcrumbsは折りたたまれます。デフォルトでは、最初と最後のアイテムのみが表示されます。 import MaxItems from '@site/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md'; @@ -48,7 +48,7 @@ import MaxItems from '@site/static/usage/v7/breadcrumbs/collapsing-items/max-ite ### Items Before or After Collapse -Once the items are collapsed, the number of items to show can be controlled by the `itemsBeforeCollapse` and `itemsAfterCollapse` properties. +アイテムが折りたたまれた後、表示するアイテムの数は `itemsBeforeCollapse` と `itemsAfterCollapse` プロパティで制御することができます。 import ItemsBeforeAfter from '@site/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md'; @@ -56,7 +56,7 @@ import ItemsBeforeAfter from '@site/static/usage/v7/breadcrumbs/collapsing-items ### Collapsed Indicator Click -- Expand Breadcrumbs -Clicking the collapsed indicator will fire the `ionCollapsedClick` event. This can be used to, for example, expand the breadcrumbs. +インジケータをクリックすると、`ionCollapsedClick` イベントが発生します。これは、例えば、breadcrumbsを展開するために使うことができます。 import ExpandOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md'; @@ -64,13 +64,13 @@ import ExpandOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/ex ### Collapsed Indicator Click -- Present Popover -The `ionCollapsedClick` event can also be used to present an overlay (in this case, an `ion-popover`) showing the hidden breadcrumbs. +また、`ionCollapsedClick` イベントは、隠されたパンくずを表示するオーバーレイ（この場合は `ion-popover` ）を提示するために使用することができます。 import PopoverOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md'; -## Theming +## テーマ ### Colors @@ -78,26 +78,26 @@ import Colors from '@site/static/usage/v7/breadcrumbs/theming/colors/index.md'; -### CSS Custom Properties +## CSSカスタムプロパティ import CSSProps from '@site/static/usage/v7/breadcrumbs/theming/css-properties/index.md'; -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/button.md b/docs/api/button.md index e84a7410d7d..50f66a388b4 100644 --- a/docs/api/button.md +++ b/docs/api/button.md @@ -10,16 +10,16 @@ import Slots from '@ionic-internal/component-api/v7/button/slots.md'; ion-button: Style Buttons with Custom CSS Properties - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way. +Buttonはクリック可能な要素を提供し、Form内や、標準の単機能なButton機能を必要とする任意の場所で使用できます。text、icon、またはその両方を表示できます。Buttonは、いくつかの属性を利用して特定の外観になるようにスタイル設定できます。 -## Basic Usage +## 基本的な使い方 import Basic from '@site/static/usage/v7/button/basic/index.md'; @@ -27,7 +27,7 @@ import Basic from '@site/static/usage/v7/button/basic/index.md'; ## Expand -This property lets you specify how wide the button should be. By default, buttons have `display: inline-block`, but setting this property will change the button to a full-width element with `display: block`. +このプロパティでは、ボタンの幅を指定することができます。デフォルトでは、ボタンは `display: inline-block` を持ちますが、このプロパティを設定すると、ボタンは `display: block` を持つ全角要素に変更されます。 import Expand from '@site/static/usage/v7/button/expand/index.md'; @@ -35,7 +35,7 @@ import Expand from '@site/static/usage/v7/button/expand/index.md'; ## Shape -This property lets you specify the shape of the button. By default, buttons are rectangular with a small border radius, but setting this to `"round"` will change the button to a rounded element. +このプロパティは、ボタンの形状を指定することができます。デフォルトでは、ボタンは小さなボーダー半径を持つ長方形ですが、これを `"round"` に設定すると、ボタンは丸みを帯びた要素に変更されます。 import Shape from '@site/static/usage/v7/button/shape/index.md'; @@ -44,7 +44,7 @@ import Shape from '@site/static/usage/v7/button/shape/index.md'; ## Fill -This property determines the background and border color of the button. By default, buttons have a solid background unless the button is inside of a toolbar, in which case it has a transparent background. +この属性は、Buttonのbackgroundとborder-colorを設定します。デフォルトでは、Buttonはtoolbar内にない限り、backgroundは塗りつぶされます。toolbar内にある場合は、backgroundは透明になります。 import Fill from '@site/static/usage/v7/button/fill/index.md'; @@ -52,7 +52,7 @@ import Fill from '@site/static/usage/v7/button/fill/index.md'; ## Size -This property specifies the size of the button. Setting this property will change the height and padding of a button. +この属性は、Buttonのサイズを指定します。この属性を設定すると、Buttonの高さとpaddingが変更されます import Size from '@site/static/usage/v7/button/size/index.md'; @@ -64,7 +64,7 @@ import Icons from '@site/static/usage/v7/button/icons/index.md'; -## Theming +## テーマ ### Colors @@ -72,43 +72,43 @@ import Colors from '@site/static/usage/v7/button/theming/colors/index.md'; -### CSS Custom Properties +## CSSカスタムプロパティ import CSSProps from '@site/static/usage/v7/button/theming/css-properties/index.md'; -## Accessibility +## アクセシビリティ -Buttons are built to be accessible, but may need some adjustments depending on their content. The button component renders a native [button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) which allows it to take advantage of the functionality that a native button provides. +ボタンはアクセスしやすいように作られていますが、その内容によっては調整が必要な場合があります。ボタンコンポーネントは、ネイティブの[button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)をレンダリングし、ネイティブのボタンが提供する機能を利用できるようにします。 ### Overflowing Text Content -There are many cases where a button's text content may overflow the container. It is recommended to wrap the text inside of the button when this happens so that all of the text can still be read. The button component will automatically adjust its height to accommodate the extra lines of text. +ボタンのテキスト・コンテンツがコンテナからはみ出す場合が多々あります。このような場合、すべてのテキストがまだ読めるように、ボタンの内側にテキストを折り返すことをお勧めします。ボタンコンポーネントは、テキストの余分な行を収容するために、その高さを自動的に調整します。 -The button text does not automatically wrap to the next line when the text is too long to fit. In order to make the text wrap, the `ion-text-wrap` class can be added, which will set the `white-space` property to `"normal"`. This will become the default in a future major release. +テキストが長すぎて収まらない場合、ボタンテキストは自動的に次の行に折り返されません。テキストを折り返すには、`ion-text-wrap`クラスを追加して、`white-space`プロパティを`"normal"`に設定します。これは将来のメジャーリリースでデフォルトになる予定である。 :::info -The `max-width` style is set on the button below for demo purposes only. Text wrapping will work with a dynamic button width. +max-width`スタイルは、デモのためだけに下のボタンに設定されています。テキストラッピングは動的なボタン幅で動作します。 ::: import TextWrapping from '@site/static/usage/v7/button/text-wrapping/index.md'; -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/buttons.md b/docs/api/buttons.md index cc8f5cf401c..2d81136da74 100644 --- a/docs/api/buttons.md +++ b/docs/api/buttons.md @@ -10,7 +10,7 @@ import Slots from '@ionic-internal/component-api/v7/buttons/slots.md'; ion-buttons: Toolbar Element with Named Slots for Buttons - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -18,9 +18,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -The Buttons component is a container element. It should be used inside of a [toolbar](./toolbar) and can contain several types of buttons, including standard [buttons](./button), [menu buttons](./menu-button), and [back buttons](./back-button). +Buttonsコンポーネントは、コンテナ要素です。 [ツールバー](./toolbar) の内部で使用し、標準の[ボタン](./button)、[メニューボタン](./menu-button)、[戻るボタン](./back-button)を含むいくつかのタイプのボタンを含めることができる。 -## Basic Usage +## 基本的な使い方 import Basic from '@site/static/usage/v7/buttons/basic/index.md'; @@ -29,7 +29,7 @@ import Basic from '@site/static/usage/v7/buttons/basic/index.md'; ## Buttons Placement -Buttons can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot. +ツールバー内のボタンは、スロットという名前を使って配置することができます。下図は各スロットの説明です。 | Slot | Description | |--------------|----------------------------------------------------------------------------------------------------------| @@ -43,9 +43,9 @@ import Placement from '@site/static/usage/v7/buttons/placement/index.md'; -## Types of Buttons +## Buttonsのタイプ -A button in a toolbar is styled to be clear by default, but this can be changed using the [`fill`](./button#fill) property on the button. The properties included on [back button](./back-button) and [menu button](./menu-button) in this example are for display purposes; see their respective documentation for proper usage. +ツールバーのボタンは、デフォルトでは透明ですが、ボタンの [`fill`](./button#fill) プロパティで変更することが可能です。この例で [バックボタン](./back-button) と [メニューボタン](./menu-button) に含まれるプロパティは表示目的であり、正しい使用方法はそれぞれのドキュメントをご覧ください。 import Types from '@site/static/usage/v7/buttons/types/index.md'; @@ -54,11 +54,11 @@ import Types from '@site/static/usage/v7/buttons/types/index.md'; ## Collapsible Buttons -The `collapse` property can be set on the buttons to collapse them when the header collapses. This is typically used with [collapsible large titles](./title#collapsible-large-titles). +ボタンに `collapse` プロパティを設定すると、ヘッダーが折りたたまれたときにボタンが折りたたまれます。これは通常、[collapsible large titles](./title#collapsible-large-titles) と共に使用します。 :::info -This feature is only available for iOS. +この機能はiOS modeでのみ有効です。 ::: @@ -68,19 +68,19 @@ import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsibl -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/card-content.md b/docs/api/card-content.md index ad6e5e51be8..be18d82c580 100644 --- a/docs/api/card-content.md +++ b/docs/api/card-content.md @@ -11,24 +11,24 @@ import Slots from '@ionic-internal/component-api/v7/card-content/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Card content is a child component of card that adds padding around its contents. It is recommended that any text content for a card should be placed inside of card content. +カードコンテンツは、カードの子コンポーネントで、そのコンテンツの周りにパディングを追加します。カードのテキストコンテンツは、カードコンテンツの中に配置することが推奨されます。 -See the [Card](./card) documentation for more information. +詳しくは、[Card](./card)のドキュメントを参照してください。 -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/card-header.md b/docs/api/card-header.md index c247d37e667..c3ac19f2bba 100644 --- a/docs/api/card-header.md +++ b/docs/api/card-header.md @@ -13,24 +13,24 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Card header is a child component of card that should be placed before the card content. It can contain a [card title](./card-title) and a [card subtitle](./card-subtitle). +カードヘッダは、カードの子コンポーネントで、カードコンテンツの前に配置する必要があります。カードタイトル](./card-title)と[カードサブタイトル](./card-subtitle)を含むことができます。 -See the [Card](./card) documentation for more information. +詳しくは、[Card](./card)のドキュメントを参照してください。 -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/card-subtitle.md b/docs/api/card-subtitle.md index 692caa70759..4aab84d40d9 100644 --- a/docs/api/card-subtitle.md +++ b/docs/api/card-subtitle.md @@ -13,24 +13,24 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Card subtitle is a child component of card that should be placed inside of a [card header](./card-header). +カードサブタイトルは、[カードヘッダ](./card-header)の内側に配置されるべき、cardの子コンポーネントです。 -See the [Card](./card) documentation for more information. +詳しくは、[Card](./card)のドキュメントを参照してください。 -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/card-title.md b/docs/api/card-title.md index 657552f95bf..cab2d59aae8 100644 --- a/docs/api/card-title.md +++ b/docs/api/card-title.md @@ -12,30 +12,30 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ion-card-title: Ionic App Card Title Component - + -Card title is a child component of card that should be placed inside of a [card header](./card-header). +Card titleはcardの子コンポーネントで、[card header](./card-header)の内側に配置する必要があります。 -See the [Card](./card) documentation for more information. +詳しくは、[Card](./card)のドキュメントを参照してください。 -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/card.md b/docs/api/card.md index 183166599b2..e4f5148d4cd 100644 --- a/docs/api/card.md +++ b/docs/api/card.md @@ -12,20 +12,20 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ion-card: Card UI Components for Ionic Framework API - + -Cards are containers that display content such as text, images, buttons, and lists. -A card can be a single component, but is often made up of a header, title, subtitle, -and content. Cards are broken up into several components to accommodate this structure: -[card header](./card-header), [card title](./card-title), [card subtitle](./card-subtitle), -and [card content](./card-content). +カードは、テキスト、画像、ボタン、リストなどのコンテンツを表示するためのコンテナです。 +カードは1つのコンポーネントで構成することもできますが、 +多くの場合、ヘッダー、タイトル、サブタイトル、コンテンツで構成されます。 +カードはこの構造に対応するため、いくつかのコンポーネントに分割されます。 +[カードヘッダ](./card-header)、[カードタイトル](./card-title)、[カードサブタイトル](./card-subtitle)、[カードコンテンツ](./card-content)。 -## Basic Usage +## 基本的な使い方 import Basic from '@site/static/usage/v7/card/basic/index.md'; @@ -53,7 +53,7 @@ import List from '@site/static/usage/v7/card/list/index.md'; -## Theming +## テーマ ### Colors @@ -61,26 +61,26 @@ import Colors from '@site/static/usage/v7/card/theming/colors/index.md'; -### CSS Custom Properties +## CSSカスタムプロパティ import CSSProps from '@site/static/usage/v7/card/theming/css-properties/index.md'; -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md index c43a878a0ce..91651affb23 100644 --- a/docs/api/checkbox.md +++ b/docs/api/checkbox.md @@ -11,7 +11,7 @@ import Slots from '@ionic-internal/component-api/v7/checkbox/slots.md'; ion-checkbox: Ionic App Checkbox to Select Multiple Options - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -19,9 +19,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property. +Checkboxを使用すると、一連のオプションから複数のオプションを選択できます。選択すると、チェックマークが付いた状態(checked)で表示されます。checkboxをクリックすると、 `checked` プロパティーが切り替わります。`checked` プロパティを設定して、プログラムで `checked` を切り替えることもできます。 -## Basic Usage +## 基本的な使い方 import Basic from '@site/static/usage/v7/checkbox/basic/index.md'; @@ -29,7 +29,7 @@ import Basic from '@site/static/usage/v7/checkbox/basic/index.md'; ## Label Placement -Developers can use the `labelPlacement` property to control how the label is placed relative to the control. This property mirrors the flexbox `flex-direction` property. +開発者は `labelPlacement` プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。このプロパティはフレックスボックスの `flex-direction` プロパティを反映しています。 import LabelPlacement from '@site/static/usage/v7/checkbox/label-placement/index.md'; @@ -49,7 +49,7 @@ import Alignment from '@site/static/usage/v7/checkbox/alignment/index.md'; ## Justification -Developers can use the `justify` property to control how the label and control are packed on a line. This property mirrors the flexbox `justify-content` property. +開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。このプロパティはフレックスボックスの `justify-content` プロパティを反映しています。 import Justify from '@site/static/usage/v7/checkbox/justify/index.md'; @@ -57,7 +57,7 @@ import Justify from '@site/static/usage/v7/checkbox/justify/index.md'; :::note -`ion-item` is only used in the demos to emphasize how `justify` works. It is not needed in order for `justify` to function correctly. +`ion-item`は、 `justify` がどのように機能するかを強調するためにデモで使用されているだけです。 `justify` が正しく機能するために必須ではありません。 ::: ## Indeterminate Checkboxes @@ -66,9 +66,9 @@ import Indeterminate from '@site/static/usage/v7/checkbox/indeterminate/index.md -## Theming +## テーマ -### CSS Custom Properties +## CSSカスタムプロパティ import CSSProps from '@site/static/usage/v7/checkbox/theming/css-properties/index.md'; @@ -87,7 +87,7 @@ interface CheckboxChangeEventDetail { ### CheckboxCustomEvent -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. +必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。 ```typescript interface CheckboxCustomEvent extends CustomEvent { @@ -96,15 +96,15 @@ interface CheckboxCustomEvent extends CustomEvent { } ``` -## Migrating from Legacy Checkbox Syntax +## レガシーなチェックボックス構文からのマイグレーション -A simpler checkbox syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup a checkbox, resolves accessibility issues, and improves the developer experience. +Ionic 7.0では、よりシンプルなチェックボックス構文が導入されました。この新しい構文は、チェックボックスの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。 -Developers can perform this migration one checkbox at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible. +開発者は、この移行を一度に1つのチェックボックスずつ実行することができます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。 -### Using the Modern Syntax +### 最新の構文の使い方 -Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-checkbox`. The placement of the label can be configured using the `labelPlacement` property on `ion-checkbox`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-checkbox`. +最新の構文を使用するには、`ion-label` を削除して、 `ion-checkbox` の中に直接ラベルを渡す必要があります。ラベルの配置は `ion-checkbox` の `labelPlacement` プロパティを使用して設定することができる。ラベルとコントロールの行の詰め方は、`ion-checkbox` の `justify` プロパティを使用して制御することができます。 import Migration from '@site/static/usage/v7/checkbox/migration/index.md'; @@ -112,27 +112,27 @@ import Migration from '@site/static/usage/v7/checkbox/migration/index.md'; :::note -In past versions of Ionic, `ion-item` was required for `ion-checkbox` to function properly. Starting in Ionic 7.0, `ion-checkbox` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-checkbox` to function properly. +Ionic の過去のバージョンでは、`ion-checkbox` が正しく機能するために `ion-item` が必要でした。Ionic 7.0 からは、`ion-checkbox` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-checkbox`が正しく機能するためには、`ion-item`はもはや必須ではありません。 ::: -### Using the Legacy Syntax +### レガシーな構文の使い方 -Ionic uses heuristics to detect if an app is using the modern checkbox syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-checkbox` to `true` to force that instance of the checkbox to use the legacy syntax. +Ionicは、アプリが最新のチェックボックス構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましい場合もあります。開発者は `ion-checkbox` の `legacy` プロパティを `true` に設定することで、そのチェックボックスのインスタンスがレガシー構文を使用するように強制できます。 -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/chip.md b/docs/api/chip.md index e99f976e051..586f78f2c5a 100644 --- a/docs/api/chip.md +++ b/docs/api/chip.md @@ -10,16 +10,16 @@ import Slots from '@ionic-internal/component-api/v7/chip/slots.md'; ion-chip: Text, Icon and Avatar for Ionic Framework Apps - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons. +Chipは連絡先などを複数の小さなエンティティで表示します。 Chipにはavatars, text, や iconsなど、いくつかの異なる要素を含めることができます。 -## Basic Usage +## 基本的な使い方 import Basic from '@site/static/usage/v7/chip/basic/index.md'; @@ -31,7 +31,7 @@ import SlotExample from '@site/static/usage/v7/chip/slots/index.md'; -## Theming +## テーマ ### Colors @@ -39,25 +39,25 @@ import Colors from '@site/static/usage/v7/chip/theming/colors/index.md'; -### CSS Custom Properties +## CSSカスタムプロパティ import CSSProps from '@site/static/usage/v7/chip/theming/css-properties/index.md'; -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/col.md b/docs/api/col.md index 0b72b2e9c69..305c472f8f1 100644 --- a/docs/api/col.md +++ b/docs/api/col.md @@ -10,7 +10,7 @@ import Slots from '@ionic-internal/component-api/v7/col/slots.md'; ion-col: Column Component Padding and Other Properties - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -18,31 +18,31 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Columns are cellular components of the [grid](./grid) system and go inside of a [row](./row). They will expand to fill the row. All content within a grid should go inside of a column. +Columnは、[Grid](./grid) システムのセルラーコンポーネントで、[row](./row)の内部に配置されます。列は行を埋めるように拡張されます。グリッド内のすべてのコンテンツは、カラムの内部に配置する必要があります。 -See the [grid](./grid) documentation for more information. +詳しくは、[grid](./grid)のドキュメントを参照してください。 ## Column Alignment -By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior. +デフォルトでは、カラムは行の高さ全体を埋めるように引き伸ばされます。カラムは[フレックスアイテム](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item)なので、この動作をカスタマイズするために、カラムに適用できるいくつかの[CSSクラス](/docs/layout/css-utilities#flex-item-properties) があります。 -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/content.md b/docs/api/content.md index d974b05dd44..a437a90020f 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -10,7 +10,7 @@ import Slots from '@ionic-internal/component-api/v7/content/slots.md'; ion-content: Scrollable Component for Ionic App Content - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -18,14 +18,14 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -The content component provides an easy to use content area with some useful methods -to control the scrollable area. There should only be one content in a single -view. +Contentコンポーネントは、スクロール可能領域を制御するいくつかの便利なメソッドを備えた、 +使いやすいコンテンツ領域を提供します。 +1つのビューに表示できるコンテンツは1つだけです。 -Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). +Contentは、他の多くのIonicコンポーネントと同様に、 [CSS Utilities](/docs/layout/css-utilities) で提供されるグローバルスタイルを使用するか、CSSおよび使用可能な [CSS Custom Properties](#css-custom-properties) を使用して個別にスタイル設定することによって、`padding` や `margin` などを変更するようにカスタマイズできます。 -## Basic Usage +## 基本的な使い方 import Basic from '@site/static/usage/v7/content/basic/index.md'; @@ -34,7 +34,7 @@ import Basic from '@site/static/usage/v7/content/basic/index.md'; ## Header & Footer -Content can be the only top-level component in a page, or it can be used alongside a [header](./header), [footer](./footer), or both. When used with a header or footer, it will adjust its size to fill the remaining height. +コンテンツは、ページ内の唯一のトップレベル・コンポーネントとすることも、[ヘッダー](./header)、[フッター](./footer)、またはその両方と一緒に使用することも可能です。ヘッダーやフッターと一緒に使用すると、残りの高さを埋めるようにサイズが調整されます。 import HeaderFooter from '@site/static/usage/v7/content/header-footer/index.md'; @@ -43,24 +43,24 @@ import HeaderFooter from '@site/static/usage/v7/content/header-footer/index.md'; ## Fullscreen Content -By default, content fills the space between a [header](./header) and [footer](./footer) but does not go behind them. In certain cases, it may be desired to have the content scroll behind the header and footer, such as when the `translucent` property is set on either of them, or `opacity` is set on the toolbar. This can be achieved by setting the `fullscreen` property on the content to `true`. +デフォルトでは、コンテンツは [ヘッダー](./header)と [フッター](./footer)の間のスペースを埋めますが、それらの背景にまわることはありません。例えば、ヘッダーとフッターのどちらかに `translucent` プロパティを設定した場合や、ツールバーに `opacity` を設定した場合など、特定のケースでは、コンテンツをヘッダーとフッターの後ろにスクロールさせることが望まれるかもしれない。これは、コンテンツの `fullscreen` プロパティを `true` に設定することで実現することができます。 import Fullscreen from '@site/static/usage/v7/content/fullscreen/index.md'; -## Fixed Content +## コンテンツの固定 -To place elements outside of the scrollable area, assign them to the `fixed` slot. Doing so will [absolutely position](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning) the element to the top left of the content. In order to change the position of the element, it can be styled using the [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position) CSS properties. +スクロール可能な領域の外側に要素を配置するには、`fixed`スロットに割り当てます。そうすることで、その要素はコンテンツの左上に[絶対位置](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning)されます。要素の位置を変えるには、CSSの[top, right, bottom, left](https://developer.mozilla.org/en-US/docs/Web/CSS/position)プロパティを使ってスタイルを設定することができます。 import Fixed from '@site/static/usage/v7/content/fixed/index.md'; -## Scroll Methods +## スクロールメソッド -Content provides [methods](#methods) that can be called to scroll the content to the bottom, top, or to a specific point. They can be passed a `duration` in order to smoothly transition instead of instantly changing the position. +コンテンツには [メソッド](#methods) が用意されており、これを呼び出すことでコンテンツを下、上、または特定のポイントにスクロールさせることができます。これらのメソッドには `duration` を渡すことができ、瞬時に位置を変更するのではなく、スムーズに移行することができます。 import ScrollMethods from '@site/static/usage/v7/content/scroll-methods/index.md'; @@ -68,14 +68,14 @@ import ScrollMethods from '@site/static/usage/v7/content/scroll-methods/index.md ## Scroll Events -Scroll events are disabled by default for content due to performance. However, they can be enabled by setting `scrollEvents` to `true`. This is necessary before listening to any of the scroll [events](#events). +スクロールイベントは、パフォーマンス上、コンテンツに対してデフォルトで無効化されています。しかし、`scrollEvents` を `true` に設定することで、有効にすることができます。これは、 スクロール [イベント](#events) を聞く前に必要です。 import ScrollEvents from '@site/static/usage/v7/content/scroll-events/index.md'; -## Theming +## テーマ ### Colors @@ -89,7 +89,7 @@ import CSSParts from '@site/static/usage/v7/content/theming/css-shadow-parts/ind -### CSS Custom Properties +## CSSカスタムプロパティ import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index.md'; @@ -140,7 +140,7 @@ interface ScrollDetail extends GestureDetail, ScrollBaseDetail { ### ScrollBaseCustomEvent -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScrollStart` and `ionScrollEnd` events. +必須ではありませんが、`ionScrollStart` と `ionScrollEnd` イベントをより強く型付けするために、`CustomEvent` インターフェースの代わりにこのインターフェースを利用することが可能です。 ```typescript interface ScrollBaseCustomEvent extends CustomEvent { @@ -151,7 +151,7 @@ interface ScrollBaseCustomEvent extends CustomEvent { ### ScrollCustomEvent -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScroll` event. +必須ではありませんが、`ionScroll` イベントをより強く型付けするために、`CustomEvent` インターフェースの代わりにこのインターフェースを利用することが可能です。 ```typescript interface ScrollCustomEvent extends ScrollBaseCustomEvent { @@ -160,19 +160,19 @@ interface ScrollCustomEvent extends ScrollBaseCustomEvent { ``` -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSSカスタムプロパティ ## Slots diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md index 62d4a91c7e0..ef67033e12c 100644 --- a/docs/api/datetime-button.md +++ b/docs/api/datetime-button.md @@ -17,27 +17,27 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Datetime Button links with a [Datetime](./datetime) component to display the formatted date and time. It also provides buttons to present the datetime in a modal, popover, and more. +Datetimeボタンは、[Datetime](./datetime) コンポーネントとリンクし、フォーマットされた日付と時刻を表示します。また、モーダルやポップオーバーなどで日時を表示するためのボタンも用意されています。 -## Overview +## 概要 -Datetime Button should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay. +Datetimeボタンは、スペースに制約がある場合に使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付や時刻のピッカーがオーバーレイで表示されます。 -When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the [keepContentsMounted property on ion-modal](./modal#keepcontentsmounted) or the [keepContentsMounted property on ion-popover](./popover#keepcontentsmounted). This allows the linked datetime instance to be mounted even if the overlay has not been presented yet. +Angular、React、VueなどのJavaScriptフレームワークでDatetime Buttonを使用する場合は、 [ion-modalのkeepContentsMountedプロパティ](./modal#keepcontentsmounted) または [ion-popover](./popover#keepcontentsmounted) を使用していることを確認してください。これにより、オーバーレイがまだ表示されていない場合でも、リンクされたdatetimeインスタンスがマウントされるようになります。 -## Basic Usage +## 基本的な使い方 import Basic from '@site/static/usage/v7/datetime-button/basic/index.md'; -## Localization +## ローカライゼーション -The localized text on `ion-datetime-button` is determined by the `locale` property on the associated `ion-datetime` instance. See [Datetime Localization](./datetime#localization) for more details. +`ion-datetime-button` のローカライズされたテキストは、関連する `ion-datetime` インスタンスの `locale` プロパティによって決まります。詳しくは、[Datetime Localization](./datetime#localization) を参照してください。 -## Usage with Modals and Popovers +## モーダルやポップオーバーと使う -`ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](./modal#inline-modals-recommended) and [Inline Popovers](./popover#inline-popovers) with the `keepContentsMounted` property set to `true` must be used. +`ion-datetime-button` は、マウントされた `ion-datetime` インスタンスと関連付ける必要があります。そのため、[Inline Modals](./modal#inline-modals-recommended) と [Inline Popovers](./popover#inline-popovers) は `keepContentsMounted` プロパティを `true` に設定して使用しなければなりません。 -## Properties +## プロパティ -## Events +## イベント -## Methods +## メソッド ## CSS Shadow Parts -## CSS Custom Properties +## CSS カスタムプロパティ ## Slots diff --git a/docs/api/datetime.md b/docs/api/datetime.md index cf9ed3071f7..d71d9fc0f78 100644 --- a/docs/api/datetime.md +++ b/docs/api/datetime.md @@ -42,34 +42,34 @@ import WheelStyling from '@site/static/usage/v7/datetime/styling/wheel-styling/i ion-datetime: Ionic API Input for Datetime Format Picker - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Datetimes present a calendar interface and time wheel, making it easy for users to select dates and times. Datetimes are similar to the native `input` elements of `datetime-local`, however, Ionic Framework's Datetime component makes it easy to display the date and time in the preferred format, and manage the datetime values. +Datetimeはカレンダーとタイムホイールのインターフェイスを表示し、ユーザーが簡単に日付と時刻を選択できるようにします。Datetimeはネイティブの `datetime-local` の `input` 要素と似ていますが、Ionic FrameworkのDatetimeコンポーネントを使用すると、好みのフォーマットで日付と時刻を表示したり、datetimeの値を管理することが簡単にできます。 -## Overview +## 概要 -Historically, handling datetime values within JavaScript, or even within HTML -inputs, has always been a challenge. Specifically, JavaScript's `Date` object is -notoriously difficult to correctly parse apart datetime strings or to format -datetime values. Even worse is how different browsers and JavaScript versions -parse various datetime strings differently, especially per locale. +これまで、JavaScriptやHTMLの入力でdatetimeの値を扱うことは、常に困難でした。 +入力でさえも、常に課題でした。 +特に、JavaScriptの `Date` オブジェクトは、datetime文字列を正しく解析したり、datetime値をフォーマットしたりするのが難しいことで有名です。 +さらに悪いことに、ブラウザやJavaScriptのバージョンによって、 +特にロケールごとに様々なdatetime文字列の解析が異なるのです。 -Fortunately, Ionic Framework's datetime input has been designed so developers can avoid -the common pitfalls, allowing developers to easily manipulate datetime values and give the user a simple datetime picker for a great user experience. +Ionic Frameworkのdatetimeは、開発者が一般的な落とし穴を回避できるように設計されており、 +開発者は簡単にdatetime値を操作し、ユーザーにシンプルなdatetimeピッカーを提供し、素晴らしいユーザーエクスペリエンスを提供することができます。 ### ISO 8601 Datetime Format: `YYYY-MM-DDTHH:mmZ` -Ionic Framework uses the [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) -for its value. The value is simply a string, rather than using JavaScript's -`Date` object. Using the ISO datetime format makes it easy to serialize -and parse within JSON objects and databases. +Ionic Frameworkでは、[ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を値として使用します。 +この値は、JavaScriptの `Date` オブジェクトを使用するのではなく、単純に文字列として使用されます。 +ISO datetimeフォーマットを使用することで、 +JSONオブジェクトやデータベース内でのシリアライズやパースが容易になります。 -Below are some examples of ISO 8601 formats that can be used with `ion-datetime`: +以下は、 `ion-datetime` で使用できる ISO 8601 フォーマットの例です: | Description | Format | Datetime Value Example | | -------------------- | ------------------------ | ------------------------------ | @@ -81,76 +81,76 @@ Below are some examples of ISO 8601 formats that can be used with `ion-datetime` | Timezone Offset | `YYYY-MM-DDTHH:mm:ssTZD` | `1994-12-15T13:47:20+05:00` | | Hour and Minute | `HH:mm` | `13:47` | -Note that the year is always four-digits, milliseconds (if it's added) is always -three-digits, and all others are always two-digits. So the number representing -January always has a leading zero, such as `01`. Additionally, the hour is -always in the 24-hour format, so `00` is `12am` on a 12-hour clock, `13` means -`1pm`, and `23` means `11pm`. +年号は常に4桁、ミリ秒は（加算される場合は）常に3桁、その他は常に2桁であることに注意してください。 +ミリ秒は3桁、その他は2桁である。 +ですから、1月を表す数字には 1月を表す数字には常に先頭のゼロ、例えば`01`が付きます。 +また、時刻は常に24時間表示で、 +12時間表示の時計では「00」は「午前12時」、「13」は「午後1時」、「23」は「午後3時」を意味します。 :::note -While seconds, milliseconds, and time zone can be specified using the ISO 8601 datetime format, `ion-datetime` does not provide an interface for second, millisecond, and time zone selection. Any second, millisecond, or time zone values provided will be ignored. +秒、ミリ秒、タイムゾーンは ISO 8601 datetime フォーマットで指定できますが、 `ion-datetime` は秒、ミリ秒、タイムゾーンを選択するためのインターフェイスを提供しません。秒、ミリ秒、タイムゾーンの値を指定しても無視されます。 ::: -## Basic Usage +## 基本的な使い方 -## Usage with Datetime Button +## 日付ボタンと使う -If you need to present a datetime in an overlay such as a modal or a popover, we recommend using [ion-datetime-button](./datetime-button). `ion-datetime-button` should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay. +モーダルやポップオーバーなどのオーバーレイで日付時刻を表示する必要がある場合は、 [ion-datetime-button](./datetime-button) を使用することをお勧めします。スペースに制約がある場合は、 `ion-datetime-button` を使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付と時刻のピッカーがオーバーレイで表示されます。 -## Setting Values Asynchronously +## 非同期に値を設定する -If its `value` is updated programmatically after a datetime has already been created, the datetime will automatically jump to the new date. However, it is recommended to avoid updating the `value` in this way when users are able to interact with the datetime, as this could be disorienting for those currently trying to select a date. For example, if a datetime's `value` is loaded by an asynchronous process, it is recommended to hide the datetime with CSS until the value has finished updating. +すでにdatetimeが作成された後にプログラムで`value`が更新されると、datetimeは自動的に新しい日付にジャンプします。しかし、ユーザーがdatetimeを操作しているときに、この方法で`value`を更新することは避けることをお勧めします。例えば、datetimeの`value`が非同期処理で読み込まれる場合、値の更新が終わるまでCSSでdatetimeを非表示にすることをお勧めします。 -## Date Constraints +## 日付コンテナ -### Max and Min Dates +### 日付の最小値と最大値 -To customize the minimum and maximum datetime values, the `min` and `max` component properties can be provided which may make more sense for the app's use-case. Following the same IS0 8601 format listed in the table above, each component can restrict which dates can be selected by the user. +日付の最小値と最大値をカスタマイズするには、 `min` と `max` コンポーネントプロパティを使用します。上の表にあるのと同じ IS0 8601 フォーマットに従って、各コンポーネントはユーザーが選択できる日付を制限することができます。 -The following example restricts date selection to March 2022 through May 2022 only. +以下の例では、日付の選択を2022年3月から2022年5月のみに制限しています。 -### Selecting Specific Values +### 特定の値を選択する -While the `min` and `max` properties allow you to restrict date selection to a certain range, the `monthValues`, `dayValues`, `yearValues`, `hourValues`, and `minuteValues` properties allow you choose specific days and times that users can select. +`min` と `max` プロパティでは、日付の選択をある範囲に制限することができますが、 `monthValues`, `dayValues`, `yearValues`, `hourValues`, `minuteValues` プロパティでは、ユーザーが選択できる特定の日や時刻を選択することが可能です。 -The following example allows minutes to be selected in increments of 15. It also allows for days to be selected in increments of 5. +次の例では、15分単位で分を選択することができます。また、日付を5刻みで選択することができます。 -### Advanced Date Constraints +### 高度な日付制限 -With the `isDateEnabled` property, developers can customize the `ion-datetime` to disable a specific day, range of dates, weekends or any custom rule using an ISO 8601 date string. -The `isDateEnabled` property accepts a function returning a boolean, indicating if a date is enabled. The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank. +`isDateEnabled` プロパティを使用すると、開発者は `ion-datetime` をカスタマイズして、ISO 8601 の日付文字列を使用して、特定の日、日付の範囲、週末、または任意のカスタムルールを無効にすることができる。 +isDateEnabled` プロパティは、日付が有効かどうかを示すブール値を返す関数を受け付ける。この関数は、レンダリングされた各日付、前月、当月、翌月に対して呼び出されます。カスタムの実装では、ジャンクを避けるためにパフォーマンスを最適化する必要があります。 -The following example shows how to disable all weekend dates. For more advanced date manipulation, we recommend using a date utility such as `date-fns`. +次の例では、週末の日付をすべて無効にする方法を示しています。より高度な日付操作を行うには、 `date-fns` のような日付ユーティリティを使用することをお勧めします。 -## Localization +## ローカライゼーション -Ionic Framework makes use of the [Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web API which allows us to automatically localize the month and day names according to the language and region set on the user's device. +Ionic Frameworkでは、[Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web APIを利用して、ユーザーの端末に設定されている言語や地域に応じて、月名と曜日名を自動的にローカライズすることが可能です。 -### Custom Locale +### カスタムロケール -For instances where you need a specific locale, you can use the `locale` property to set it. The locale controls both the language and the date and time formats that are displayed. +特定のロケールが必要な場合、 `locale` プロパティを使用して設定することができます。ロケールは、表示される言語と日付・時刻のフォーマットの両方を制御します。 -The following example shows how to set the locale to Spanish (Spain). +次の例では、ロケールをスペイン語（Spanish）に設定する方法を示しています。 :::note -The time label is not automatically localized. See [Time Label](#time-label) for more information. +時刻の表記は、自動的にローカライズされません。詳しくは [Time Label](#time-label) を参照してください。 ::: -### Hour Cycle +### 時間サイクル -`ion-datetime` will use the hour cycle that is specified by the `locale` property by default. For example, if `locale` is set to `en-US`, then `ion-datetime` will use a 12 hour cycle. +`ion-datetime` は、デフォルトで `locale` プロパティで指定された時間サイクルを使用します。例えば、 `locale` が `en-US` に設定されている場合、 `ion-datetime` は12時間のサイクルを使用します。 -There are 4 primary hour cycle types: +時間サイクルには4つのタイプがあります。 | Hour cycle type | Description | | --------------- | ------------------------------------------------------------ | @@ -160,77 +160,77 @@ There are 4 primary hour cycle types: | `'h24'` | Hour system using 1–24; corresponds to 'k' in pattern. The 24 hour clock, with midnight starting at 24:00. | :::note - Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle + ソース: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle ::: -There may be scenarios where you need to have more control over which hour cycle is used. This is where the `hourCycle` property can help. +どの時間のサイクルを使用するか、もっとコントロールする必要があるシナリオがあるかもしれません。このような場合には、 `hourCycle` プロパティが役に立ちます。 -In the following example, we can use the `hourCycle` property to force `ion-datetime` to use the 12 hour cycle even though the locale is `en-GB`, which uses a 24 hour cycle by default: +次の例では、 `hourCycle` プロパティを使用して、ロケールが `en-GB` であるにもかかわらず、 `ion-datetime` に12時間周期を使用するように強制することができます。 -### First Day of the Week +### 週初めの日 -For `ion-datetime`, the default first day of the week is Sunday. As of 2022, there is no browser API that lets Ionic automatically determine the first day of the week based on a device's locale, though there is on-going work regarding this (see: [TC39 GitHub](https://github.com/tc39/ecma402/issues/6)). +`ion-datetime`の場合、週初めの曜日はデフォルトで日曜日です。2022年現在、Ionicがデバイスのロケールに基づいて自動的に週の最初の曜日を決定するためのブラウザAPIはありませんが、これに関する作業は進行中です（参照: [TC39 GitHub](https://github.com/tc39/ecma402/issues/6) )． -### Time Label +### 時刻表記 -The time label is not automatically localized. Fortunately, Ionic makes it easy to provide custom localizations with the `time-label` slot. +時刻表記は自動的にローカライズされるわけではありません。幸いなことに、Ionicでは `time-label` スロットで簡単にカスタムのローカライズを提供することができます。 -### Locale Extension Tags +### ロケールエクステンションタグ -`ion-datetime` also supports [locale extension tags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) as part of the `Intl.Locale` API. These tags let you encode information about the locale in the locale string itself. Developers may prefer to use the extension tag approach if they are using the [Intl.Locale API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) in their apps. +`ion-datetime` は、 `Intl.Locale` API の一部として [locale extension tags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) もサポートしています。これらのタグを使用すると、ロケールに関する情報をロケール文字列自体にエンコードすることができます。開発者は、アプリの中で [Intl.Locale API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) を使っている場合、拡張タグのアプローチを使うことを好むかもしれません。 -For example, if you wanted to use a 12 hour cycle with the `en-GB` locale, you could provide extension tags instead of using both the `locale` and `hourCycle` properties: +たとえば、 `en-GB` ロケールで 12 時間周期を使用したい場合は、 `locale` と `hourCycle` の両方のプロパティを使用するのではなく、拡張タグを使用します。 :::note -Be sure to check the [Browser Compatibility Chart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility) for `Intl.Locale` before using it in your app. +アプリで使用する前に、 `Intl.Locale` の [Browser Compatibility Chart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility) を必ず確認してください。 ::: -## Presentation +## プレゼンテーション -By default, `ion-datetime` allows users to select both date and time. In addition, users have access to selecting the specific month, year, hour, and minute. +デフォルトでは、 `ion-datetime` は日付と時刻の両方を選択することができる。さらに、ユーザは特定の月、年、時間、分を選択することができます。 -Some use cases may call for only date selection or only time selection. The `presentation` property allows you to specify which pickers to show and the order to show them in. For example, setting `date-time` will have the calendar picker appear before the time picker. Setting `time-date` will have the calendar picker appear after the time picker. +ユースケースによっては、日付だけを選択したり、時間だけを選択したりすることもできます。 `presentation` プロパティでは、表示するピッカーとその順番を指定することができます。例えば、 `date-time` を設定すると、カレンダーピッカーがタイムピッカーよりも先に表示されます。 `time-date` を設定すると、カレンダーピッカーはtimeピッカーの後に表示されます。 -### Month and Year Selection +### 月と年の選択 -Month and year selection is available by passing `month-year`, `year-month`, `month`, or `year` to the `presentation` property. +月と年の選択は、 `presentation` プロパティに `month-year` , `year-month` , `month` , または `year` を渡すことで行うことができます。 -This example shows a datetime with the `month-year` configuration. +この例では、 `month-year` を設定した datetime を示しています。 -### Time Selection +### 時刻の選択 -Time selection is available by passing `date-time`, `time-date`, or `time` to the `presentation` property. +時刻の選択は、 `presentation` プロパティに `date-time`, `time-date`, `time` を渡すことで行うことができます。 -This example shows a datetime with the `time` configuration. +この例では、`time`の設定で datetime を表示しています。