ionic-angular

Ionic + Angular アプリのガイドライン

これは SKILL ファイルであり、プロジェクトではありません。 ここでは決して npm install を実行しないでください。新しいプロジェクトを作成する場合は、プロジェクトのパスを尋ねるか、別のディレクトリ（例：~/Projects/<app>）にスキャフォールドしてください。

これらのリファレンスを参照するタイミング

プロジェクトのセットアップ：

• 新しい Angular Ionic プロジェクトの作成：new-app.md
• プロジェクト構造（フォルダー構成）：project-structure.md
• アプリの設定（main.ts、app.config.ts）：app-config.md
• ルーティング（遅延 loadComponent、タブ）：routing.md

ページとナビゲーション：

• オンボーディングガード（CanMatchFn — 遅延ルートのゲートには CanActivateFn よりもこちらを推奨）：onboarding-guard.md
• オンボーディングページ（動画の背景 + Swiper）：onboarding-page.md
• ペイウォールページ（RevenueCat）：paywall-page.md
• タブナビゲーション：tabs-navigation.md
• 設定ページ：settings-page.md

複数の領域に関わる項目：

• シグナル（signal、computed、effect、untracked、シグナルの入力／出力）：signals.md
• サービス（テーマ／オンボーディング／広告／購入／通知）：services.md
• 組み込みの制御フロー（@if／@for／@switch）：control-flow.md
• アクセシビリティ（ARIA、タッチターゲット、スクリーンリーダー）：accessibility.md
• @defer による遅延レンダリング（ペイウォール／オンボーディングの大きなチャンク）：defer-loading.md
• @ngx-translate/core による i18n：i18n-ngx-translate.md
• ベストプラクティス（スタンドアロン、ファイルの分割、シグナル優先、OnPush、inject()）：best-practices.md
• コマンド（ビルド／同期／オープン）：commands.md

ネイティブプラグイン関連の項目は ../ionic-shared/references/ にあります。AdMob、RevenueCat、プッシュ通知、ストレージ、テーマについては、必ずこちらにリンクしてください：

• admob.md
• revenuecat.md
• push-notifications.md
• storage.md
• theming.md
• localization-content.md

必須ページ（必ず作成）

• オンボーディング — スワイプ式、全画面の背景動画 + グラデーションオーバーレイ。
• ペイウォール — RevenueCat（週払い／年払い）。オンボーディングの直後に表示します。
• 設定 — 言語、テーマ、通知、広告の削除、オンボーディングのリセット。

必須ナビゲーション

ion-tabs + ion-tab-bar を使用してください。カスタムのタブバーを作成したり、サードパーティ製のタブライブラリを追加したりしないでください。

必須ライブラリ

npm install \
  @capacitor/preferences @capacitor/push-notifications \
  @capacitor/splash-screen @capacitor/status-bar \
  @revenuecat/purchases-capacitor @capacitor-community/admob \
  @ngx-translate/core @ngx-translate/http-loader \
  swiper

厳守事項（Angular 固有）

• ❌ 新しいページ／コンポーネントに NgModules を使用しないでください — スタンドアロンコンポーネントを使用してください。
• ❌ スタンドアロンコンポーネントで IonicModule を使用しないでください — 個別のコンポーネント（IonContent、IonButton、…）をインポートしてください。
• ❌ @Component にインラインの template や styles を記述しないでください — 必ず templateUrl と styleUrls を使い、.html、.ts、.scss ファイルを分けてください。
• ❌ 非推奨の @angular/http を使用しないでください — @angular/common/http を使用してください。
• ❌ any 型を使用しないでください — 適切な TypeScript 型を使用してください。
• ✅ リアクティブな状態にはシグナルを優先してください — signal()、computed()、effect() を使用します。適切な場合、サービスでは読み取り専用シグナルを公開してください。詳しくは signals.md を参照してください。安定版のシグナル API を使用し、「developer preview」／「experimental」と記された Angular の機能（例：linkedSignal、resource、Signal Forms）は正式版になるまで避けてください。
• ✅ 新しいコンポーネントにはシグナル入力／出力（input()、input.required()、output()）を使用してください。

完了を報告する前に

npm install
npx ng build
npx cap sync

ビルドはエラーなしで完了する必要があります。ネイティブでテストする前に、Web ビルドのたびに cap sync を実行する必要があります。