2026年版イオニクスアクションシートの完全ガイド

あなたは現在、2 つの状況のいずれかにいるかもしれません。 1 つ目は、画面に余分なボタンを詰め込まないように、少数のコンテキストアクションをきれいに表示する必要がある場合です。 2 つ目は、すでに Ionic Action Sheet を実装し、簡単なデモ版ではなかったが、実際の実装では問題が生じた場合です。

その差は重要です。アクションシートは単純に見えますが、インタラクションデザイン、フレームワークAPI、プラットフォームの動作、アクセシビリティ、リリース後のメンテナンスなど、複数の要素が交差しています。それらをすべて考慮せずに、アクションシートを単にポップアップにボタンを追加しただけでは、後期のQAで問題が生じることがあります。

イントロダクション
- なぜチームがそれにたどり着くのか
アクションシートコントローラーと API
Angular、React、Vue の実装例
カスタマイズとスタイリングのCSS
高度なトピックとプラットフォームの考慮事項
- Webコンポーネントまたはネイティブプラグイン
- プラットフォームモードとアクセシビリティの詳細
デモが動作する後で出るバグ

Ionic Action シートの紹介

ユーザーが現在のコンテキストに関連する小さな、集中した選択を必要とする場合、Ionic Action Sheetは適切なツールです。ドラフトを削除する。プロフィール写真を置き換える。ドキュメントを保存、共有、またはアーカイブする。これらのアクションは重要ですが、メインレイアウトに永久にスペースを占める価値はありません。

Ionicで、パターンは長い間一貫してきた。以前のIonicアプリでは、 $ionicActionSheet Ionic 1のアクションシートのドキュメントサマリーからTutorialsPoint show() コントローラー内。モダンアプリでは ion-action-sheetなぜチームがそれにたどり着くのか Ionic 1 アクションシートドキュメントの概要（TutorialsPoint）.

簡単なルールがあります:

rule

helps

help

アクションシートを使用します。 特定のアイテムに関連付けられた短い決定メニューのために。
アラートを使用します。 最小限のオプションで確認が必要な場合。
モーダルを使用します。 ユーザーがさらにコンテンツ、入力、またはスクロールが必要な場合。

実用的なルール: ボタンラベルが単独で立ち続けられない場合は、追加の段落テキストが必要な場合、強制的にアクションシートにインタラクションを入れないでください。

ハイブリッドアプリでは、このパターンはWeb-to-Nativeモデルにうまく収まる。UIはWeb層でレンダリングしやすく、タッチデバイスでネイティブに感じられる。Capacitorに興味があるチームが、Webとネイティブの境界をより明確に理解したい場合は、CapacitorがWebとネイティブを繋ぐ方法の分解を参考にしてください。 how Capacitor bridges web and native code __CAPGO_KEEP_0__

Understanding the Action Sheet Controller and API

アクションシートは、単なるインラインコンポーネントとして考えなくても、より簡単に理解できるようになります。それがより一時的なオーバーレイとして振る舞うようにします。それを作成し、表示し、ユーザーが待つと、結果を処理するためにそれを閉じます。

アクションシートのコントローラーにおけるアーキテクチャ、設定、APIコンポーネントのフローチャート図。

なぜAPIはコントローラー駆動型であるか

日常のIonicワークでは、コントローラーベースのアプローチが通常最も綺麗なオプションです。アクションシートは一時的なものなので、メニューがタップされたときにのみ表示されるため、ページに大量のテンプレートマークアップを置く必要がありません。

公式のIonicドキュメントでは、アクションシートを モーダルダイアログ と定義し、ユーザーによる閉じる動作のライフサイクルメソッドである onDidDismiss を重視しています。これは、Ionicアクションシートの__CAPGO_KEEP_0__ドキュメントで説明されています。その設計は、APIの構造を教えてくれます。まず表示し、閉じた後は反応するようにしてください。タイミングに関する仮定に依存した批判的ロジックを組み込まないでください。.code. を構築する方法を示しています。まず、表示します。閉じた後は反応します。タイミングに関する仮定に依存した重要なロジックを組み込まないでください。

チームは、__CAPGO_KEEP_0__の小さなサブセットしか必要としませんが、そのサブセットを正しく使用する必要があります。

ほとんどのチームは、API の小さなサブセットしか必要としませんが、そのサブセットを正しく使用する必要があります。

オプション	機能すること	なぜ重要か
`header`	上部ラベルを設定	アクションが曖昧になる可能性がある場合に役立つ
`subHeader`	二次テキストを追加	アクションが明確な説明が必要な場合に役立つ
`buttons`	利用可能なアクションを定義	ここでは、動作と視覚的強調が生きている
`cssClass`	カスタムクラスを追加	グローバルハックの代わりにスコープ内のスタイリングに不可欠
`mode`	iOSまたはMDスタイリングを強制	プラットフォーム間で制御されたテストに役立つ。

ボタン設定は、そこで失敗が起こる場所です。一般的なボタンには次の要素があります。

text 、
icon 、
handler 、
role 、

role 、 destructive 、 cancel 、

、

、

ライフサイクルを意図的に使用してください:

シートを作成します。
await present().
await onDidDismiss().
返されたロールまたはデータを読み取ります。
次のアクションをトリガーします。

そのパターンは面白くないですが、それが機能する理由です。

Angularスタイルのシンプルな例の形です:

const sheet = await this.actionSheetController.create({
  header: 'Photo options',
  buttons: [
    {
      text: 'Take Photo',
      icon: 'camera',
      handler: () => {
        console.log('take photo');
      }
    },
    {
      text: 'Delete Photo',
      role: 'destructive',
      icon: 'trash'
    },
    {
      text: 'Cancel',
      role: 'cancel'
    }
  ]
});

await sheet.present();

const result = await sheet.onDidDismiss();
console.log('dismissed with role:', result.role);

あなたが API から覚えておくべき1つのことは、次のことです: イオニックアクションシートは、表示される時点で終了していません。終了するのは、閉じる時点です。

Angular、React、Vueの実装例

フレームワークは異なりますが、メンタルモデルは同じです。すべてのバージョンは同じインタラクションを作成します:ユーザーはアイコンをタップし、プロフィール写真のオプションを表示し、1つのアクションを選択し、アプリはオーバーレイが閉じた後、対応します。

Angular、React、VueのモバイルアプリUI画面デザインの3つが表示されます。食品配達のインターフェイスを示しています。

メディアアップロードのオフライン状態も扱っている場合は、この Vue、Angular、Reactでオフライン画面を作成する写真アクションは、ネットワーク依存のフローに直接つながることが多いので、以下の例とよく組み合わさります。

Angularの例

Ionic Angularでは、最も一般的なアプローチは、コンポーネントまたはページに ActionSheetController Angularチームは、通常、2つの場所で間違いを犯します。ボタンハンドラーにロジックを多く移す、またはUIのトランジションを調整するより安全な場所であるdismissalのpromiseを忘れることです。

import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';

@Component({
  selector: 'app-profile-photo',
  template: `
    <ion-button expand="block" (click)="openPhotoActions()">
      Profile Photo Options
    </ion-button>
  `
})
export class ProfilePhotoComponent {
  constructor(private actionSheetController: ActionSheetController) {}

  async openPhotoActions() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Profile photo',
      subHeader: 'Choose what to do next',
      buttons: [
        {
          text: 'Take Photo',
          icon: 'camera',
          handler: () => {
            console.log('Open camera flow');
          }
        },
        {
          text: 'Choose from Library',
          icon: 'images',
          handler: () => {
            console.log('Open photo library flow');
          }
        },
        {
          text: 'Remove Current Photo',
          role: 'destructive',
          icon: 'trash',
          handler: () => {
            console.log('Remove current photo');
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    });

    await actionSheet.present();

    const { role } = await actionSheet.onDidDismiss();
    console.log('Action sheet dismissed with role:', role);
  }
}

Reactの例

Ionic React

Reactのhook useIonActionSheet gives you a compact functional API that fits naturally with event handlers.

import React from 'react';
import { IonButton, useIonActionSheet } from '@ionic/react';

const ProfilePhotoActions: React.FC = () => {
  const [presentActionSheet] = useIonActionSheet();

  const openPhotoActions = () => {
    presentActionSheet({
      header: 'Profile photo',
      subHeader: 'Choose what to do next',
      buttons: [
        {
          text: 'Take Photo',
          icon: 'camera',
          handler: () => {
            console.log('Open camera flow');
          }
        },
        {
          text: 'Choose from Library',
          icon: 'images',
          handler: () => {
            console.log('Open photo library flow');
          }
        },
        {
          text: 'Remove Current Photo',
          role: 'destructive',
          icon: 'trash',
          handler: () => {
            console.log('Remove current photo');
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ],
      onDidDismiss: (event) => {
        console.log('Dismissed with role:', event.detail.role);
      }
    });
  };

  return (
    <IonButton expand="block" onClick={openPhotoActions}>
      Profile Photo Options
    </IonButton>
  );
};

export default ProfilePhotoActions;

React’s hook API is ergonomic, but the same rule applies. Keep the immediate handler focused on the chosen action. Use dismissal callbacks for cleanup, analytics, or follow-up UI state.

Vue 例

Ionic Vue actionSheetController コンポジション内できれいに動作します。API。

<template>
  <ion-button expand="block" @click="openPhotoActions">
    Profile Photo Options
  </ion-button>
</template>

<script setup lang="ts">
import { IonButton, actionSheetController } from '@ionic/vue';

const openPhotoActions = async () => {
  const actionSheet = await actionSheetController.create({
    header: 'Profile photo',
    subHeader: 'Choose what to do next',
    buttons: [
      {
        text: 'Take Photo',
        icon: 'camera',
        handler: () => {
          console.log('Open camera flow');
        }
      },
      {
        text: 'Choose from Library',
        icon: 'images',
        handler: () => {
          console.log('Open photo library flow');
        }
      },
      {
        text: 'Remove Current Photo',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Remove current photo');
        }
      },
      {
        text: 'Cancel',
        role: 'cancel'
      }
    ]
  });

  await actionSheet.present();

  const result = await actionSheet.onDidDismiss();
  console.log('Dismissed with role:', result.role);
};
</script>

Vueプロジェクトでは、副作用をどこに置くかという実用的な違いがあります。カメラやファイルピッカーのロジックを組み合わせて使用する場合、そのハンドラから呼び出して、コントローラーcodeを薄くしてください。

フレームワーク固有のcodeを小さく保ちましょう。カメラ、アップロード、削除、分析のビジネスロジックはアクションシートの設定とは別に実行してください。

カスタマイズとスタイリングのCSS

デフォルトのイオニックアクションシートのスタイリングはプロトタイプ用に十分ですが、ブランド化されたアプリでは十分ではなく、デザインがより密なスペース、異なるフォント、より明確な破棄アクションを必要とする場合には十分ではありません。

Appleテーマのグラフィックデザインの例を使用した6つの異なるCSSカスタマイズとスタイリングのテクニックを示すウェブデザインプレゼンテーションスライド。

チームがアプリがよりネイティブの製品に感じさせたい場合に、このアクションシートのスタイリングに関する記事の基本的なJSとCSSの設定でネイティブアプリの見た目を実現するはアクションシートのスタイリングの有用な相談相手です。

cssClassからグローバルオーバーライドを始めましょう

最初のスタイリングルールは簡単です。アプリ全体のアクションシートをターゲットにしないようにしてください。特定のバリアントをスコープするには cssClass を使用してください。

const sheet = await actionSheetController.create({
  header: 'File actions',
  cssClass: 'file-actions-sheet',
  buttons: [
    { text: 'Rename' },
    { text: 'Delete', role: 'destructive' },
    { text: 'Cancel', role: 'cancel' }
  ]
});

そのインスタンスのみのスタイルを適用します。

.file-actions-sheet {
  --background: #101418;
  --color: #f5f7fa;
  --backdrop-opacity: 0.4;
}

そのアプローチは、後でセレクタを追跡するのではなく、よりスケーラブルです。

カスタムプロパティを使用して幅広いテーマを設定します。

CSSカスタムプロパティは、コンポーネント構造を戦うことなく、全体的な雰囲気を変更する最速の方法です。

一般的な使用例は次のとおりです。

背景色とテキスト色 アプリが暗いカスタムパレットを持つ場合
バックドロップの不透明度 デフォルトの暗めの影が弱すぎるか重すぎる場合
スペーシングとサイズ 視覚的な密度が他のインターフェイスと一致する場合

.file-actions-sheet {
  --background: #1b1f24;
  --color: #ffffff;
  --backdrop-opacity: 0.32;
  --button-color: #dce3ea;
  --button-background-hover: #2a3138;
}

影のパーツを使用して精度が必要な場合

デザインがターゲットの変更を求めるようになったら、カスタムプロパティだけでは十分ではない場合があります。その場合、Shadow Partsが役立ちます。これにより、行動シートの内部エリアを直接スタイル化できます。

.file-actions-sheet::part(container) {
  border-radius: 18px 18px 0 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
}

.file-actions-sheet::part(button) {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.file-actions-sheet::part(backdrop) {
  backdrop-filter: blur(4px);
}

通常、コンポーネントを過度にスタイリングすると、システムレベルの選択メニューのようには感じられなくなります。画像カード、サムネイル、長い説明、複雑な行レイアウトが必要な場合は、行動シートのパターンを超えていることになります。

良いカスタマイズパスは、コンポーネントがアプリに合うようにすることです。それを偽装するのではなく。

高度なトピックとプラットフォームの考慮事項

生産的な行動シートは、ほとんどのチュートリアルが認めるよりも大きな決定スペースに存在します。ただし、ボタンラベルを選択するだけではありません。オーバーレイがIonicのWeb層によってレンダリングされるか、ネイティブUIに委ねられるか、プラットフォーム固有の動作の強さ、そしてシートがすべてのユーザーにとって理解できるようにする方法など、さまざまな要素を決定する必要があります。

背景が黒の抽象3D形状と、緑の背景の石に置かれた果物の2つの画像のスプリット。

Webコンポーネントまたはネイティブプラグイン

Ionicアプリを標準で構築している場合、 ion-action-sheet あなたのアプリがCapacitorベースで、ホストOSがシートをレンダリングすることを望む場合は、ネイティブルートは

If your app is Capacitor-based and you want the host operating system to render the sheet, the native route is @capacitor/action-sheet、インストールされている showActions(options) -> Promise<ShowActionsResult>__CAPGO_KEEP_0__ npm install @capacitor/action-sheet と同期されます。 npx cap sync、また、以下のことを指摘しています。 PWA Elementsは、WebとPWAのコンテキストで必要です。 は Capacitor アクションシートプラグインドキュメント.

それが、実用的なトレードオフの表を提供します。

選択	強み	コスト
`ion-action-sheet`	テーマの設定が簡単になり、共有されたWeb UIパターン	ネイティブの忠実性がわずかに低下
`@capacitor/action-sheet`	ホストOSのレンダリングと、プラットフォームの強い感覚	ブラウザとPWAのコンテキストで実装の制約が増える

視覚的の一貫性がアプリのUIと同じであることが重要な場合は、Webコンポーネントを使用します。プラットフォームの忠実性が深いCSS制御よりも重要な場合は、ネイティブプラグインを使用します。

プラットフォームモードとアクセシビリティの詳細

IonicはiOSとMaterial Designモードに対応し、それがスペース、動き、全体的な視覚的なtoneに影響します。両方のモードでスタイリングが同じように動作することを前提にしないでください。両方のモードを意図的にテストすることをお勧めします、特にチームがすべてのプラットフォームで単一のモードを強制する場合。

アクションシートは小さく感じるため、アクセシビリティが見落とされることが多いですが、基本的な事項はまだ重要です:

明確なボタンラベルを使用 コンテキストから切り離された場合でも意味を理解できる
リスクのあるアクション destructive リスクのあるアクションは予約 明確なラベル
明確なラベルを使用 cancel 明確なラベル ユーザーが明確な出口を確保できるようにする。
装飾的な曖昧さを避ける。 複数のアクションが似た音を発するが、非常に異なる結果をもたらす場合。

スクリーンリーダーまたは認知負荷制約のあるユーザーが、ラベルの曖昧さによって「単純」オーバーレイを単純に経験しない。

ネイティブとウェブアプローチは異なる問題を解決するため、ここでは鋭いエッジがある。ウェブコンポーネントでは、外観と統合の制御が可能になる。ネイティブプラグインでは、プラットフォームの強い統合が可能になる。どちらも自動的に優れているわけではない。正解は、現在のアプリの痛点が視覚的一貫性、実装のスピード、またはシステムネイティブの動作であるかどうかに依存する。

トラブルシューティングの落とし穴と、ライブUI修正の配信。

ほとんどのアイオニックアクションシートのバグは、最初に3つのボタンをワイヤアップし、シミュレータでタップするときに現れません。実際のナビゲーションと状態のトランジションと組み合わせて、シートがスタイリングされたときに現れます。

デモが動作するときに現れるバグ。

最初のクラスのバグはタイミングです。ロジックが code が閉じるのを待たずに実行されるため、オーバーレイがアニメーション中のルート変更や、コンポーネントのレンダリングと競合する状態の更新が見られます。

2番目のクラスはレイアウトです。アイオニックの問題レポートでは、行動シートがiOSのデバイスの特定の条件下で、下部セーフエリアを重ねることが報告されています。特に、__CAPGO_KEEP_0__ が非ゼロの場合、問題レポートでは、アイオニックのドキュメントのデモでこの問題を再現することも可能であると記載されています。 --ion-safe-area-bottom 問題レポートは、下部セーフエリアの重ねについての __CAPGO_KEEP_0__ の問題について記載されています。問題レポートは、下部セーフエリアの重ねについての GitHub の問題について記載されています。. この問題は、デバイスの形状、モード、カスタムCSSに依存するため、遅いQAで見逃されることが多い。

実用的な安全エリア修正

アプリがシートをホームインジケーターエリアに近い位置に表示する場合、スコープドオーバーライドを使用するのではなく、広範なグローバルパッチを使用するのではなく始めましょう。

.safe-area-sheet::part(container) {
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
}

次に、作成するアクションシートでクラスを適用してください。

const sheet = await actionSheetController.create({
  header: 'More actions',
  cssClass: 'safe-area-sheet',
  buttons: [
    { text: 'Archive' },
    { text: 'Delete', role: 'destructive' },
    { text: 'Cancel', role: 'cancel' }
  ]
});

これは、すべてのオーバーレイを変更することなく、具体的な場所を提供して、プロパティデバイステストを置き換えるものではありません。

ライブアップデートの重要性とUIの欠陥

リリースオペレーションの実用的な現実が明らかになります。安全エリアの不正規、破損したパディングルール、または破壊的なボタンの色がJavaScriptまたはCSSに存在する場合、バグがプロダクションに送信されると、待ち時間が長くなることなく、ユーザーの不満が数日続くことになります。

1つの実用的なオプションは、live updateサービスです。Capacitorアプリケーションに適用することができます。 Capgo 更新されたWebバンドルを提供することで、チームはJavaScript、CSS、コピー、設定、資産の修正をアプリストアのレビューを待たずに実行できます。これは、実際にアクションシートのスタイリングまたはオーバーレイのバグがQAを通過した場合に直接関連しています。

UIオーバーレイは、安全ネットが実際に効果を発揮するような機能です。小さなスタイリングの変更で簡単に破損し、通常はネイティブcodeを再構築することなく修正できるためです。

あなたのチームがIonicまたはCapacitorアプリを定期的にリリースする場合、 Capgo リリースワークフローの一部として評価する価値があります。

2026年版イオニックアクションシートの完全ガイドから続けてください。

イオニックアクションシートを使用している場合 2026年版イオニックアクションシートの完全ガイド イオニックアクションシートを使用してビジネス用途のCapgoエンタープライズ Capgoエンタープライズの製品ワークフローイオニックエンタープライズプラグインの代替イオニックエンタープライズプラグインの代替の製品ワークフロー Capgoの代替 Capgoの代替の製品ワークフロー Capgoコンサルティング Capgoコンサルティングの製品ワークフローについて Capgoプレミアムサポート Capgoプレミアムサポートの製品ワークフローについて

イオニックアクションシート: 2026年の完全ガイド

目次

Ionic Action シートの紹介

rule

Understanding the Action Sheet Controller and API

なぜAPIはコントローラー駆動型であるか

チームは、__CAPGO_KEEP_0__の小さなサブセットしか必要としませんが、そのサブセットを正しく使用する必要があります。

、

Angular、React、Vueの実装例

Angularの例

Ionic React

Vue 例

カスタマイズとスタイリングのCSS

cssClassからグローバルオーバーライドを始めましょう

カスタムプロパティを使用して幅広いテーマを設定します。

影のパーツを使用して精度が必要な場合

高度なトピックとプラットフォームの考慮事項

Webコンポーネントまたはネイティブプラグイン

プラットフォームモードとアクセシビリティの詳細

トラブルシューティングの落とし穴と、ライブUI修正の配信。

デモが動作するときに現れるバグ。

実用的な安全エリア修正

ライブアップデートの重要性とUIの欠陥

2026年版イオニックアクションシートの完全ガイドから続けてください。

イオニック アクション シート: 2026年の完全ガイド

目次

Ionic Action シートの紹介

rule

Understanding the Action Sheet Controller and API

なぜAPIはコントローラー駆動型であるか

チームは、__CAPGO_KEEP_0__の小さなサブセットしか必要としませんが、そのサブセットを正しく使用する必要があります。

、

Angular、React、Vueの実装例

Angularの例

Ionic React

Vue 例

カスタマイズとスタイリングのCSS

cssClassからグローバルオーバーライドを始めましょう

カスタムプロパティを使用して幅広いテーマを設定します。

影のパーツを使用して精度が必要な場合

高度なトピックとプラットフォームの考慮事項

Webコンポーネントまたはネイティブプラグイン

プラットフォームモードとアクセシビリティの詳細

トラブルシューティングの落とし穴と、ライブUI修正の配信。

デモが動作するときに現れるバグ。

実用的な安全エリア修正

ライブアップデートの重要性とUIの欠陥

2026年版イオニックアクションシートの完全ガイドから続けてください。

イオニックアクションシート: 2026年の完全ガイド