chore(i18n): sync main into translation/jp

.github/workflows/CI.yml

@@ -36,7 +36,7 @@ jobs:
     steps:
     - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - name: ⚙️ Use Node.js
-      uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+      uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
       with:
         node-version: ${{ env.NODE_VERSION }}
         cache: npm
@@ -78,7 +78,7 @@ jobs:
     steps:
     - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - name: ⚙️ Use Node.js
-      uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+      uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
       with:
         node-version: ${{ env.NODE_VERSION }}
         cache: npm

docs/angular/quickstart.mdx

@@ -110,7 +110,7 @@ And its template in `app.component.html`:
 Routes are defined in `app.routes.ts`:
 
 ```ts title="src/app/app.routes.ts"
-import { Routes } from '@angular/router';
+import type { Routes } from '@angular/router';
 
 export const routes: Routes = [
   {
@@ -376,7 +376,7 @@ export class NewPage implements OnInit {
 
   ngOnInit() {}
 
-  scrollToBottom = () => {
+  scrollToBottom = (): void => {
     this.content.scrollToBottom(300);
   };
 }
@@ -435,9 +435,7 @@ ionic cap open android
 </DocsCard>
 
 <DocsCard header="Capacitorドキュメント" href="https://capacitorjs.com/docs/" icon="/icons/guide-capacitor-icon.png">
-  <p>
-    Capacitorを使用してネイティブデバイス機能にアクセスし、アプリをiOS、Android、Webにデプロイする方法を探索します。
-  </p>
+  Capacitorを使用してネイティブデバイス機能にアクセスし、アプリをiOS、Android、Webにデプロイする方法を探索します。
 </DocsCard>
 
 </DocsCards>

docs/angular/your-first-app.mdx

@@ -111,8 +111,8 @@ import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular';
 // CHANGE: Add the following import
 import { defineCustomElements } from '@ionic/pwa-elements/loader';
 
-import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
+import { routes } from './app/app.routes';
 
 // CHANGE: Call the element loader before the `bootstrapApplication` call
 defineCustomElements(window);
@@ -191,11 +191,11 @@ ionic serve
 ```html
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>Photo Gallery</ion-title>
+    <ion-title> Photo Gallery </ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
+<ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
       <ion-title size="large">Photo Gallery</ion-title>
@@ -239,4 +239,29 @@ ionic serve
 </ion-tabs>
 ```
 
+Then open `src/app/tabs/tabs.page.ts` and register the `images` icon in place of `ellipse`, so the new icon can display:
+
+```ts
+import { Component, EnvironmentInjector, inject } from '@angular/core';
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+// CHANGE: Update import
+import { triangle, images, square } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-tabs',
+  templateUrl: 'tabs.page.html',
+  styleUrls: ['tabs.page.scss'],
+  imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel],
+})
+export class TabsPage {
+  public environmentInjector = inject(EnvironmentInjector);
+
+  constructor() {
+    // CHANGE: Register the `images` icon instead of `ellipse`
+    addIcons({ triangle, images, square });
+  }
+}
+```
+
 これは、Ionic でできるすべての素晴らしいことの始まりに過ぎません。次に、Web でカメラ撮影機能を実装し、その後 iOS と Android 用にビルドします。

docs/angular/your-first-app/2-taking-photos.mdx

@@ -45,12 +45,12 @@ import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
 })
 export class PhotoService {
   // CHANGE: Add the gallery method
-  public async addNewToGallery() {
+  public async addNewToGallery(): Promise<void> {
     // Take a photo
     const capturedPhoto = await Camera.getPhoto({
-      resultType: CameraResultType.Uri,
-      source: CameraSource.Camera,
-      quality: 100,
+      resultType: CameraResultType.Uri, // file-based data; provides best performance
+      source: CameraSource.Camera, // automatically take a new photo with the camera
+      quality: 100, // highest quality (0 to 100)
     });
   }
 }
@@ -78,6 +78,7 @@ import {
 // CHANGE: Register the camera icon used by the FAB
 import { addIcons } from 'ionicons';
 import { camera } from 'ionicons/icons';
+
 // CHANGE: Import the PhotoService
 import { PhotoService } from '../services/photo.service';
 
@@ -98,7 +99,7 @@ export class Tab2Page {
   }
 
   // CHANGE: Add `addPhotoToGallery()` method
-  addPhotoToGallery() {
+  addPhotoToGallery(): void {
     this.photoService.addNewToGallery();
   }
 }
@@ -166,7 +167,7 @@ export class PhotoService {
   // CHANGE: Add the `photos` signal
   public photos = signal<UserPhoto[]>([]);
 
-  public async addNewToGallery() {
+  public async addNewToGallery(): Promise<void> {
     // ...existing code...
   }
 }
@@ -176,12 +177,12 @@ Over in the `addNewToGallery` method, add the newly captured photo to the beginn
 
 ```ts
 // CHANGE: Update `addNewToGallery()` method
-public async addNewToGallery() {
+public async addNewToGallery(): Promise<void> {
   // Take a photo
   const capturedPhoto = await Camera.getPhoto({
-    resultType: CameraResultType.Uri,
-    source: CameraSource.Camera,
-    quality: 100
+    resultType: CameraResultType.Uri, // file-based data; provides best performance
+    source: CameraSource.Camera, // automatically take a new photo with the camera
+    quality: 100, // highest quality (0 to 100)
   });
 
   // CHANGE: Add the new photo to the front of the photos signal
@@ -207,12 +208,12 @@ import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
 export class PhotoService {
   public photos = signal<UserPhoto[]>([]);
 
-  public async addNewToGallery() {
+  public async addNewToGallery(): Promise<void> {
     // Take a photo
     const capturedPhoto = await Camera.getPhoto({
-      resultType: CameraResultType.Uri,
-      source: CameraSource.Camera,
-      quality: 100,
+      resultType: CameraResultType.Uri, // file-based data; provides best performance
+      source: CameraSource.Camera, // automatically take a new photo with the camera
+      quality: 100, // highest quality (0 to 100)
     });
 
     this.photos.update((photos) => [

docs/angular/your-first-app/3-saving-photos.mdx

@@ -47,7 +47,8 @@ We can use this new method immediately in `addNewToGallery()`.
 
 ```ts
 import { Injectable, signal } from '@angular/core';
-import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
+import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
+import type { Photo } from '@capacitor/camera';
 
 @Injectable({
   providedIn: 'root',
@@ -56,12 +57,12 @@ export class PhotoService {
   public photos = signal<UserPhoto[]>([]);
 
   // CHANGE: Update the `addNewToGallery()` method
-  public async addNewToGallery() {
+  public async addNewToGallery(): Promise<void> {
     // Take a photo
     const capturedPhoto = await Camera.getPhoto({
-      resultType: CameraResultType.Uri,
-      source: CameraSource.Camera,
-      quality: 100,
+      resultType: CameraResultType.Uri, // file-based data; provides best performance
+      source: CameraSource.Camera, // automatically take a new photo with the camera
+      quality: 100, // highest quality (0 to 100)
     });
 
     // CHANGE: Add `savedImageFile`
@@ -93,7 +94,7 @@ Then, pass the data to the Filesystem's `writeFile` method. Recall that we displ
 Create a new helper method, `base64FromPath()`, to implement the necessary logic for running on the web:
 
 ```ts
-import { Injectable } from '@angular/core';
+import { Injectable, signal } from '@angular/core';
 import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
 import type { Photo } from '@capacitor/camera';
 // CHANGE: Add import
@@ -164,12 +165,12 @@ import { Filesystem, Directory } from '@capacitor/filesystem';
 export class PhotoService {
   public photos = signal<UserPhoto[]>([]);
 
-  public async addNewToGallery() {
+  public async addNewToGallery(): Promise<void> {
     // Take a photo
     const capturedPhoto = await Camera.getPhoto({
-      resultType: CameraResultType.Uri,
-      source: CameraSource.Camera,
-      quality: 100,
+      resultType: CameraResultType.Uri, // file-based data; provides best performance
+      source: CameraSource.Camera, // automatically take a new photo with the camera
+      quality: 100, // highest quality (0 to 100)
     });
 
     // Save the picture and add it to photo collection

docs/angular/your-first-app/4-loading-photos.mdx

@@ -33,7 +33,7 @@ export class PhotoService {
 Next, at the end of the `addNewToGallery()` method, add a call to `Preferences.set()` to save the `photos` array. By adding it here, the `photos` array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved.
 
 ```ts
-import { Injectable } from '@angular/core';
+import { Injectable, signal } from '@angular/core';
 import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
 import type { Photo } from '@capacitor/camera';
 import { Filesystem, Directory } from '@capacitor/filesystem';
@@ -47,12 +47,12 @@ export class PhotoService {
   // ...existing code...
 
   // CHANGE: Update `addNewToGallery()` method
-  public async addNewToGallery() {
+  public async addNewToGallery(): Promise<void> {
     // Take a photo
     const capturedPhoto = await Camera.getPhoto({
-      resultType: CameraResultType.Uri,
-      source: CameraSource.Camera,
-      quality: 100,
+      resultType: CameraResultType.Uri, // file-based data; provides best performance
+      source: CameraSource.Camera, // automatically take a new photo with the camera
+      quality: 100, // highest quality (0 to 100)
     });
 
     const savedImageFile = await this.savePicture(capturedPhoto);
@@ -82,7 +82,7 @@ export class PhotoService {
   // ...existing code...
 
   // CHANGE: Add the method to load the photo data
-  public async loadSaved() {
+  public async loadSaved(): Promise<void> {
     // Retrieve cached photo array data
     const { value: photoList } = await Preferences.get({ key: this.PHOTO_STORAGE });
     this.photos.set((photoList ? JSON.parse(photoList) : []) as UserPhoto[]);
@@ -97,21 +97,21 @@ export class PhotoService {
   // ...existing code...
 
   // CHANGE: Update the `loadSaved()` method
-  public async loadSaved() {
+  public async loadSaved(): Promise<void> {
     // Retrieve cached photo array data
     const { value: photoList } = await Preferences.get({ key: this.PHOTO_STORAGE });
     const photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[];
 
     // CHANGE: Display the photo by reading into base64 format
     for (const photo of photos) {
       // Read each saved photo's data from the Filesystem
-      const file = await Filesystem.readFile({
+      const readFile = await Filesystem.readFile({
         path: photo.filepath,
         directory: Directory.Data,
       });
 
       // Web platform only: Load the photo as base64 data
-      photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
+      photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
     }
 
     // CHANGE: Set the signal so the gallery view updates
@@ -137,12 +137,12 @@ export class PhotoService {
 
   private PHOTO_STORAGE: string = 'photos';
 
-  public async addNewToGallery() {
+  public async addNewToGallery(): Promise<void> {
     // Take a photo
     const capturedPhoto = await Camera.getPhoto({
-      resultType: CameraResultType.Uri,
-      source: CameraSource.Camera,
-      quality: 100,
+      resultType: CameraResultType.Uri, // file-based data; provides best performance
+      source: CameraSource.Camera, // automatically take a new photo with the camera
+      quality: 100, // highest quality (0 to 100)
     });
 
     // Save the picture and add it to photo collection
@@ -192,20 +192,20 @@ export class PhotoService {
     });
   }
 
-  public async loadSaved() {
+  public async loadSaved(): Promise<void> {
     // Retrieve cached photo array data
     const { value: photoList } = await Preferences.get({ key: this.PHOTO_STORAGE });
     const photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[];
 
     for (const photo of photos) {
       // Read each saved photo's data from the Filesystem
-      const file = await Filesystem.readFile({
+      const readFile = await Filesystem.readFile({
         path: photo.filepath,
         directory: Directory.Data,
       });
 
       // Web platform only: Load the photo as base64 data
-      photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
+      photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
     }
 
     this.photos.set(photos);
@@ -223,7 +223,8 @@ Our `PhotoService` can now load the saved images, but we'll need to update `tab2
 Update `tab2.page.ts` to look like the following:
 
 ```ts
-import { Component, OnInit, inject } from '@angular/core';
+import type { OnInit } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   IonHeader,
   IonToolbar,
@@ -238,6 +239,7 @@ import {
 } from '@ionic/angular';
 import { addIcons } from 'ionicons';
 import { camera } from 'ionicons/icons';
+
 import { PhotoService } from '../services/photo.service';
 
 @Component({
@@ -254,11 +256,11 @@ export class Tab2Page implements OnInit {
   }
 
   // CHANGE: Add call to `loadSaved()` when navigating to the Photos tab
-  async ngOnInit() {
+  async ngOnInit(): Promise<void> {
     await this.photoService.loadSaved();
   }
 
-  addPhotoToGallery() {
+  addPhotoToGallery(): void {
     this.photoService.addNewToGallery();
   }
 }