mcpField
I
ionic-app-icon-splash

ionic-app-icon-splash

github.com/erkamyamanデザイン・UI1647 回インストール1 週間前に更新
リポジトリ

ionic-app-icon-splash について

ionic-app-icon-splashは、Capacitorアプリ向けにiOSとAndroidのアイコンやスプラッシュ画面を生成するスキルです。ネイティブアプリの素材を用意する開発者向けで、元のPNGから各サイズのファイルを作成し、ネイティブプロジェクトに配置します。

主な機能

  1. 01元のPNGからアイコン素材を生成
  2. 02スプラッシュ画面のバリエーションを生成
  3. 03ネイティブプロジェクトのフォルダーへ配置
  4. 04iOSとAndroidに対応

活用シーン

  1. 01申請前に既定のCapacitorアイコンを置き換え
  2. 021枚の元画像から複数サイズのアイコンを作成
  3. 03スプラッシュ画像の変更後にネイティブプロジェクトを同期

インストール

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

$npx skills add https://github.com/erkamyaman/ionic-capacitor-skills --skill ionic-app-icon-splash

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

同梱ファイルreferences/generate.mdreferences/platform-specifics.md

詳細

アプリアイコンとスプラッシュの生成

iOS と Android では、それぞれ約 25 種類のアイコンサイズと 4 種類以上のスプラッシュ画面のバリエーションが必要です。@capacitor/assets を使うと、1 つのソース PNG（アイコン）と 1 つのソース PNG（スプラッシュ）からすべて生成し、適切なネイティブフォルダーにコピーできます。ストアに提出する前に、デフォルトの Capacitor アイコンを必ず置き換えてください。

参照するタイミング

  • ソースアセットの仕様と生成コマンド：generate.md
  • iOS / Android の詳細とライトモード／ダークモードのスプラッシュ画面：platform-specifics.md

厳守事項

  • ✅ ソースアイコン：1024×1024 PNG、透明部分なし、角丸なし（iOS がマスクを追加します）。
  • ✅ ソーススプラッシュ：2732×2732 PNG、ロゴを中央に配置し、背景色を単色にします。
  • ✅ ソース PNG を変更するたびに、npx capacitor-assets generate を再実行してください。
  • ✅ 生成後に npx cap sync を実行し、新しいファイルをネイティブプロジェクトに反映してください。
  • ❌ ios/App/App/Assets.xcassets/AppIcon.appiconset/ や android/app/src/main/res/mipmap-*/ 内の生成ファイルを手動で編集しないでください。次回の生成で上書きされます。
  • ❌ デフォルトの Capacitor コンパスアイコンをそのままリリースしないでください。App Review で気づかれます。

ライブラリ

npm install --save-dev @capacitor/assets

コメント

Markdown 対応