ionic-shared について
Angular、React、Vue を使う Ionic Capacitor アプリ向けの共通リファレンススキルです。ネイティブプラグイン、アプリ設定、ストレージ、安全対策、リリースの指針をまとめ、各フレームワーク用スキルから参照できます。
主な機能
- 01Capacitor 設定の指針
- 02環境変数と API キーの扱い
- 03永続ストレージの推奨事項
- 04テーマ、広告、購入機能
- 05通知とローカライズ
- 06ストア公開とテストの指針
活用シーン
- 01Capacitor のプラットフォーム設定
- 02安全なストレージとキー運用の選択
- 03アプリへの共通ネイティブ機能の追加
- 04アプリの公開とテストの準備
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ erkamyaman/ ionic-capacitor-skills --skill ionic-sharedインストール後、Claude Code で/ionic-sharedを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/admob.mdapp-store-notes.mdcapacitor-config.mdenvironments-and-keys.mdlocalization-content.mdpush-notifications.mdrevenuecat.mdstorage.mdtesting-checklist.mdtheming.md詳細
Ionic Shared(Capacitor)ガイドライン
Ionic Capacitor アプリ向けのフレームワーク横断ガイダンスです。フレームワークのスキル(ionic-angular、ionic-react、ionic-vue)から、ネイティブプラグインとコンテンツに関するトピックをここにリンクし、同じコードを3回繰り返さないようにしています。
これらのリファレンスを参照するタイミング
- Capacitor の設定/ネイティブプラットフォーム:capacitor-config.md
- 環境と API キー(フレームワークごとの環境変数、安全にアプリに含められるもの):environments-and-keys.md
- 永続ストレージ(
@capacitor/preferences):storage.md - テーマの切り替え(ライト/ダーク/システム):theming.md
- AdMob バナー広告:admob.md
- RevenueCat の購入/ペイウォールのロジック:revenuecat.md
- プッシュ通知:push-notifications.md
- 翻訳文字列(TR/EN):localization-content.md
- App Store/Play Store の申請に関する注意事項:app-store-notes.md
- リリース前テストのチェックリスト:testing-checklist.md
ハードルール(すべてのフレームワークに適用)
- ✅ Ionic Framework、Capacitor、各フレームワーク(Angular/React/Vue)の最新の安定バージョンを使用してください。新しいプロジェクトをスキャフォールディングするときは、古いメジャーバージョンに固定せず、
npm install <pkg>で最新バージョンが解決されるようにしてください。不確かな場合は、npm view <pkg> versionで確認してください。SKILL.mdの例に特定のバージョン番号を書かないでください。すぐに古くなるためです。 - ✅ API キーと広告ユニット ID は環境変数から読み込み、ソースにハードコードしないでください。モバイルバンドルは秘密情報を保管する場所ではありません。アプリに含めてよいのは、公開可能なキー(RevenueCat SDK キー、AdMob ユニット ID、Firebase ウェブ設定、Sentry DSN)のみです。秘密のキー(Stripe の
sk_…、OpenAI/Anthropic、RevenueCat REST シークレット)は必ずバックエンドの背後に置いてください。environments-and-keys.mdを参照してください。 - ✅
isTestingフラグは、ハードコードされたtrueではなく、ビルドモードに連動させてください。本番環境にinitializeForTesting: trueまたはisTesting: trueを含めて出荷すると、AdMob アカウントが停止される可能性があります。 - ❌
localStorageを直接使用しないでください。@capacitor/preferencesを使用してください。 - ❌
@ionic/storageを使用しないでください。@capacitor/preferencesを使用してください。 - ❌
cordova-plugin-*を使用しないでください。Capacitor の同等機能を使用してください。 - ❌
ngx-admob-freeなどの非推奨の広告ライブラリを使用しないでください。@capacitor-community/admobを使用してください。 - ❌ Capacitor プラグインのメソッドを同期的に呼び出さないでください。必ず
awaitしてください。 - ✅ ネイティブ専用コードは必ず
Capacitor.isNativePlatform()でガードしてください。 - ✅ Capacitor プラグインをインストールまたは更新した後は、必ず
npx cap syncを実行してください。
必須の共通ライブラリ
npm install \
@capacitor/app \
@capacitor/preferences \
@capacitor/push-notifications \
@capacitor/splash-screen \
@capacitor/status-bar \
@revenuecat/purchases-capacitor \
@capacitor-community/admob \
swiper
@capacitor/appはionic-deep-links(およびappUrlOpen/appStateChangeをリッスンするスキル)で必要なため、共通の基本構成に含まれます。
これらは、フレームワーク固有の i18n ライブラリに加えてインストールします(各フレームワークのSKILL.mdを参照してください)。
コメント
Markdown 対応