あなたは現在、2つの状況のいずれかにいるかもしれません。 1 つは、画面に余分なボタンを詰め込まないように、少数のコンテキストアクションをクリーンに表示する方法が必要な状況、もう 1 つは、既に Ionic アクション シートを実装し、簡単なデモ版のものと実用的な実装が異なることを発見した状況です。
そのギャップは重要です。アクション シートは単純に見えますが、インタラクション デザイン、フレームワーク API、プラットフォームの動作、アクセシビリティ、リリース後のメンテナンスと交差しています。アクション シートを単にポップアップにボタンを追加するだけでは、通常はQAの後期で壊れる部分を無視することになります。
目次
- Ionic アクション シートの導入
- アクション シート コントローラーとAPIの理解
- Angular、React、Vueの実装例
- CSSを使用したカスタマイズとスタイリング
- 高度なトピックとプラットフォームの考慮事項
- トラブルシューティングの落とし穴とライブUI修正の配信
Ionicsのアクションシートの紹介
ユーザーが現在の状況に関連付けられた小さく集中した選択を必要とするとき、Ionicsのアクションシートは適切なツールです。ドロップダウンメニューを削除する。プロフィール写真を置き換える。ドキュメントを保存、共有、またはアーカイブする。これらのアクションは重要ですが、メインレイアウトに永久にスペースを占める価値はありません。
Ionicsでは、パターンは長い間一貫してきた。 $ionicActionSheet サービス show() TutorialsPointはサービスを注入し、サービスを呼び出すことで画面の下部からスライドアップするパネンであると説明している。 ion-action-sheetサービス サービス.
TutorialsPointのIonics 1アクションシートのドキュメントサマリーから
Why teams keep reaching for it
ユーザーがすでに状況を理解している場合、ユーザーがコンパクトな次のステップのリストしか必要としない場合、行動シートはうまく機能します。ただし、ユーザーが説明、検証、または複数のフォームフィールドが必要な場合、行動シートはうまく機能しません。
簡単なルールがあります。
- 行動シートを使用して 短い決定メニューを特定のアイテムに関連付けるときに。
- 確認に最小限のオプションが必要な場合にアラートを使用してください。 モーダルを使用して
- ユーザーがさらにコンテンツ、入力、またはスクロールが必要な場合。 実用的なルール:
ボタンラベルが追加の段落テキストなしで立つことができない場合、行動シートを強制するのではなく、インタラクションをモーダルに切り替えてください。 ハイブリッドアプリでは、このパターンはWeb-to-Nativeモデルにうまく収まるので、UIはWeb層でレンダリングし、タッチデバイスでネイティブに感じることができます。__CAPGO_KEEP_0__で開発しているチームが、境界の明確なメンタルモデルを持つことを望む場合は、この分解を参照してください。
Capacitor how Capacitor bridges web and native code __CAPGO_KEEP_1__ におけるアクションシートの位置付け
アクションシートコントローラーと API の理解
アクションシートは、単なるインラインコンポーネントとして考えなくても、より簡単に理解できるようになります。アクションシートは、ライフサイクルを持つ仮想的なオーバーレイとして振る舞います。作成、表示、ユーザーの待機、そしてdismissal後の結果の処理です。
なぜ API はコントローラー駆動型であるか
日常のIonicワークでは、コントローラーベースのアプローチが通常最も綺麗なオプションです。アクションシートは一時的なものです。ユーザーがオーバーフロー アイコンをタップするとのみ表示されるメニューのため、大きなテンプレートマークアップがページに残ることを避けたいのです。
公式のIonicドキュメントでは、アクションシートを モーダルダイアログ と定義し、ユーザーによるdismissalライフサイクルメソッド onDidDismiss の重要性を強調しています。 Ionicアクションシート API ドキュメント. そのデザインは、code を構造化する方法を教えています。最初に表示し、拒否された後は反応してください。タイミングに関する仮定に依存した批判的ロジックを接続してはいけません。
実際に重要なオプション
ほとんどのチームは、API の小さなサブセットしか必要としませんが、そのサブセットを正しく使用する必要があります。
| オプション | 何をするか | なぜ重要か |
|---|---|---|
header | 上部ラベルを設定 | アクションが曖昧である場合のコンテキストが良好 |
subHeader | 二次テキストを追加 | アクションが明確な説明が必要な場合に便利 |
buttons | 利用可能なアクションを定義 | ここでは、行動と視覚的強調が生きています |
cssClass | 追加のクラスを定義 | グローバルハックの代わりにスコープ内でスタイリングするのに不可欠 |
mode | iOSまたはMDスタイリングを強制 | プラットフォーム間で制御されたテストに役立つ |
ボタンの設定でよく間違いが起きる。一般的なボタンには以下のような要素が含まれる。
text表示されるラベル用。icon視覚的なヒントが必要な場合。handler即時コールバックロジック用。roleセマンティックな動作とプラットフォームスタイリング用。
role 装飾的なものではない。 destructive 危険なアクションの場合、削除など。 cancel エスケープパス用。 それらのロールは、選択肢を提示するアクションシートの表示と、プレッシャー下でリストを読むユーザーの読み方に影響を与える。
Dangerous actionsは選択肢の端にあり、視覚的重みが同じ中立的なアクションと混ぜるのではなく、辺にあります。
拒否は契約の一部です。
一般的なバグは、開発者がアクションシートを開き、ハンドラーの結果が十分だと仮定し、オーバーレイが完全に閉じる前にナビゲーションまたはステートの更新をトリガーすることです。その結果、不規則なトランジション、古いステート、またはテストでレース条件が生じることがあります。
ライフサイクルを意図的に使用してください。
- シートを作成します。
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つのアクションを選択し、アプリはオーバーレイが閉じた後で反応します。
メディアアップロードのオフライン状態も処理する場合は、この Vue、Angular、Reactでオフライン画面を作成する方法のガイドが 例の下でよく相性が良いです。写真アクションは通常、ネットワーク依存のフローに直接つながります。
Angular例
Ionic Angularでは、最も一般的なアプローチはコンポーネントまたはページに ActionSheetController をインジェクトすることです。
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);
}
}Angularチームは、通常、1つの場所で間違いを犯します。ロジックをボタンハンドラーに移動する、またはUIのトランジションを安全に調整するために使用するべきであるdismissal promiseを忘れることです。
React例
Ionic Reactでは useIonActionSheet がコンパクトで機能的なAPIを提供し、イベントハンドラーと自然にフィットします。
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のhook APIは使いやすいですが、同じルールが適用されます。即時のハンドラーは選択されたアクションに焦点を当ててください。キャンセルコールバックを使用して、クリーンアップ、分析、またはフォローアップUIステートのために。
Vueの例
Ionic Vueでは actionSheetController Composition 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でカスタマイズとスタイリング
デフォルトのIonicアクションシートスタイリングはプロトタイプ用に十分ですが、ブランド化されたアプリでは十分ではなく、デザインがより密なスペーシング、異なるフォント、またはより明確な破壊アクションを必要とする場合には十分ではありません。
チームがアプリがよりネイティブな製品のように感じるようにするために、ウェブラッパーとしての一般的なものから離れようとしている場合、この ネイティブアプリの見た目の基本的なJSとCSS設定 アクションシートのスタイリングの有用な相談相手です。
__CAPGO_KEEP_0__
cssクラスを使用して、グローバルオーバーライドより前にスタイルを適用します 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に委ねられるか、プラットフォーム固有の動作の強さ、ユーザー全員が理解できるようにする方法など、さまざまな要素を考慮する必要があります。
Webコンポーネントまたはネイティブプラグイン
標準的なIonicアプリを構築している場合、 ion-action-sheet 通常はデフォルトです。スタイルが簡単で、他のアプリのオーバーレイシステムと一貫して動作するためです。
あなたのアプリがCapacitorに基づいており、ホストOSがシートをレンダリングしたい場合は、ネイティブルートを使用します @capacitor/action-sheet. ionicのドキュメントではプラグインを showActions(options) -> Promise<ShowActionsResult>, installed with npm install @capacitor/action-sheet と npx cap sync, while also noting that の両方でインストールし、syncする in the Capacitor Action Sheet plugin docs.
__CAPGO_KEEP_0__アクションシートプラグインのドキュメント
| Choice | Strength | 選択肢名義の強みコスト |
|---|---|---|
ion-action-sheet | より簡単なテーマ設定と共有されたWeb UI パターン | より少ないネイティブの忠実性 |
@capacitor/action-sheet | ホスト OS のレンダリングとより強いプラットフォームの感覚 | ブラウザとPWAのコンテキストで実装の制約が増える |
視覚的的一貫性がアプリに重要な場合、Webコンポーネントを使用してください。プラットフォームの忠実性が深いCSS制御よりも重要な場合、ネイティブプラグインを使用してください。
プラットフォームモードとアクセシビリティの詳細
IonicはiOSとMaterial Designモードに適応できますが、それはスペーシング、モーション、総合的な視覚的なtoneに影響を与えます。両方のモードでスタイリングが同じように動作することを前提にしないでください。両方のモードを意図的にテストし、特にチームがすべてのプラットフォームで単一のモードを強制する場合にそうしてください。
アクセシビリティも見落とされがちです。アクションシートが小さく感じるからです。基本的なことはまだ重要です:
- 明確なボタンテキストを使用してください コンテキストから切り離しても意味をなします。
- リスクのあるアクション
destructiveリスクのあるアクションに予約してください インターフェイスは意図を伝えるようにコミュニケーションをとる。 - 「__CAPGO_KEEP_0__」
cancel明確なものを選ぶ 装飾的な曖昧さを避ける - 似た音で聞こえるが、実際には結果が大きく異なるアクションが複数ある場合 スクリーンリーダーを使用しているユーザーや認知負荷の制約があるユーザーにとって、「単純な」オーバーレイは、ラベルが曖昧な場合、「単純」ではない。
ネイティブとWebアプローチは異なる問題を解決する。Webコンポーネントでは、外観と統合の制御が可能になる。ネイティブプラグインでは、プラットフォームの統合が強化される。どちらも自動的に優れているわけではない。正解は、現在のアプリの痛点が視覚的一貫性、実装のスピード、またはシステムネイティブの動作であるかによって決まる。
トラブルシューティングの落とし穴とライブUI修正の配信
ほとんどのIonicアクションシートのバグは、最初に3つのボタンをワイヤアップし、シミュレーターでタップすることで現れません。実際にスタイリングされたシート、テストされた新しいデバイス、実際のナビゲーションと状態のトランジションと組み合わせたときに現れます。
デモが動作する最初のクラスのバグ
タイミングのクラスは最初のクラスのバグです。__CAPGO_KEEP_0__が閉じるのを待たずにロジックが実行されるため、ルートの変更がオーバーレイがアニメーション中のときや、コンポーネントのレンダリングと競合する状態の更新が見えるようになります。
ロジックが実行されるタイミングが早すぎるため、codeが閉じるのを待たずにロジックが実行されるため、ルートの変更がオーバーレイがアニメーション中のときや、コンポーネントのレンダリングと競合する状態の更新が見えるようになります。
2 番目のクラスはレイアウトです。 ionic の問題として知られており、iOS デバイスの特定の条件下でアクション シートが下部セーフエリアに重なり合うことが報告されています。 例えば、__CAPGO_KEEP_0__ のセーフエリア重なり問題で、Ionic のドキュメントのデモで再現できることもあります。 --ion-safe-area-bottom これは、デバイスの形状、モード、カスタム CSS に依存するため、チームが遅い QA 時期までこのような問題を逃すことが多いです。 the GitHub issue about bottom safe area overlapアプリがホームインジケーターエリアにシートを表示する場合は、スコープドオーバーライドを使用するのではなく、広範なグローバルパッチを使用するのではなく、始めてみましょう。
次に、アクションシートを作成するときにクラスを適用してみましょう。
これは、すべてのオーバーレイを変更することなく、具体的な場所を提供することで、プロパティデバイステストを実行することなく、UI ディフェクトを修正するための実用的な方法です。
.safe-area-sheet::part(container) {
padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
}UI ディフェクトの実用的な意味
const sheet = await actionSheetController.create({
header: 'More actions',
cssClass: 'safe-area-sheet',
buttons: [
{ text: 'Archive' },
{ text: 'Delete', role: 'destructive' },
{ text: 'Cancel', role: 'cancel' }
]
});リリースオペレーションの実用的な現実性が明らかになります。セーフエリアの不具合、破損したパディングルール、破壊的なボタンの色が JavaScript または CSS に生じた場合、待ち時間が長くなるまで、ユーザーの不満を数日間続けることになることがよくあります。
1 つの実用的なオプションは、__CAPGO_KEEP_0__ アプリ用のライブアップデートサービスです。 例えば、__CAPGO_KEEP_0__
ライブアップデートの重要性
One practical option is a live update service for Capacitor apps. For example, Capgo __CAPGO_KEEP_0__はアプリストアのレビューを待たずにJavaScript、CSS、コピー、設定、資産の修正をチームが配信できるように、最新のWebバンドルを提供します。これは、UIオーバーレイなどのバグがQAで通過したときに直接関連しています。
UIオーバーレイは、安全ネットが実際に効果を発揮するような機能です。UIオーバーレイは、視認性が高く、スタイリングの小さな変更で簡単に破損し、通常はネイティブのcodeを再構築することなく修正できます。
IonicまたはCapacitorアプリを定期的に配信するチームは、Capacitorをリリースワークフローの一部として評価する価値があります。Capacitorは、UIオーバーレイのレイアウトのバグ、スタイリングの後退、コピーミスなど、リリース後に修正できるWeb層の問題に対処する方法を提供します。ロールアウトチャネルと更新の動作を制御することができます。 Capgo __CAPGO_KEEP_0__を使用している場合、
Ionicアクションシート：2026年版の完全ガイド
を計画とエンタープライズオペレーションの移行に使用し、それを__CAPGO_KEEP_0__エンタープライズと接続する場合は、__CAPGO_KEEP_0__エンタープライズの製品ワークフローに__CAPGO_KEEP_0__エンタープライズを接続することをお勧めします。 Ionicエンタープライズプラグインの代替品を探している場合、__CAPGO_KEEP_0__エンタープライズを検討してください。 __CAPGO_KEEP_0__エンタープライズ Capgoエンタープライズ Capgoエンタープライズ __CAPGO_KEEP_0__エンタープライズ Ionic Enterprise プラグイン代替の製品ワークフローについて Capgo 代替 for the product workflow in Capgo Alternatives, Capgo コンサルティング for the product workflow in Capgo Consulting, and Capgo プレミアムサポート for the product workflow in Capgo Premium Support.
