mcpField
I
ionic

ionic

github.com/mindrally開発287801 回インストール3 週間前に更新
リポジトリ

ionic について

クロスプラットフォームのモバイルアプリ開発を支援する Ionic スキルです。機能別構成、Ionic UI コンポーネント、性能、ネイティブ連携、Firebase、テストを扱います。

主な機能

  1. 01機能別のプロジェクト構成
  2. 02Ionic のナビゲーションと UI コンポーネント
  3. 03レスポンシブなスタイルとテーマ設定
  4. 04遅延読み込みと性能の指針
  5. 05ネイティブプラグインと Web フォールバック
  6. 06Firebase の設定とテストの指針

活用シーン

  1. 01クロスプラットフォーム Ionic アプリの構成
  2. 02レスポンシブなモバイル画面の構築
  3. 03ネイティブ機能の連携とプラグインのテスト

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mindrally/skills --skill ionic

インストール後、Claude Code で/ionicを入力して読み込まれたか確認します。

詳細

Ionic の開発

Ionic を使用したクロスプラットフォームのモバイルアプリケーション開発のエキスパートです。

コア原則

  • 正確な Ionic の例を使い、簡潔で技術的な回答を作成します
  • スケーラブルなアプリケーションには、機能ベースの構成を使用します
  • Ionic の組み込みコンポーネントを活用し、一貫性のある UI を実現します
  • Ionic Angular プロジェクトでは、Angular のベストプラクティスに従います

プロジェクト構成

機能ベースの構成
src/
├── app/
│   ├── features/
│   │   ├── auth/
│   │   ├── home/
│   │   └── settings/
│   ├── shared/
│   │   ├── components/
│   │   ├── services/
│   │   └── pipes/
│   └── core/
│       ├── guards/
│       └── interceptors/
├── assets/
└── theme/

Ionic コンポーネント

ナビゲーション
import { NavController } from '@ionic/angular';

constructor(private navCtrl: NavController) {}

navigateForward() {
  this.navCtrl.navigateForward('/details');
}

navigateBack() {
  this.navCtrl.back();
}
UI コンポーネント
  • ページ構造には ion-header、ion-content、ion-footer を使用します
  • リストには ion-list、ion-item を活用します
  • アクションには ion-button、ion-fab を使用します
  • オーバーレイには ion-modal、ion-popover を適用します

スタイル設定

  • コンポーネント固有のスタイルには SCSS を使用します
  • テーマ設定には Ionic の CSS 変数を活用します
  • 必要に応じてプラットフォーム固有のスタイルを適用します
  • さまざまな画面サイズに対応するには、レスポンシブユーティリティを使用します
:host {
  --ion-background-color: var(--ion-color-light);
}

.custom-card {
  --background: var(--ion-color-primary-tint);
}

パフォーマンス

遅延読み込み
  • 機能モジュールに遅延読み込みを実装します
  • ルーティング設定では loadChildren を使用します
  • コードを論理的なチャンクに分割します
最適化
  • 長いリストには仮想スクロールを使用します
  • 適切な画像読み込み戦略を実装します
  • ツリーシェイキングでバンドルサイズを最小限に抑えます

ネイティブ連携

Cordova/Capacitor プラグイン
  • ネイティブ機能には Ionic Native ラッパーを使用します
  • ネイティブ機能にはウェブのフォールバックを実装します
  • プラットフォーム間の違いを適切に処理します
import { Camera } from '@ionic-native/camera/ngx';

async takePicture() {
  const image = await this.camera.getPicture(options);
  return image;
}

Firebase 連携

  • Firebase サービスには AngularFire を使用します
  • 適切な Firestore トランザクションを実装します
  • リアルタイム更新を効率的に処理します
  • 複数の書き込みにはバッチ操作を使用します

環境設定

  • 開発、ステージング、本番環境向けに環境を設定します
  • API エンドポイントには環境ファイルを使用します
  • シークレットを安全に管理します

テスト

  • サービスとコンポーネントの単体テストを作成します
  • Ionic のテストユーティリティを使用します
  • ネイティブプラグインのモックを適切にテストします

コメント

Markdown 対応