Martin Donadieu
Content Marketer
目次
- イオニック アクション シートの導入
- APIとアクション シート コントローラーの理解
- Angular、React、Vue用の実装例
- CSSを使用したカスタマイズとスタイリング
- 高度なトピックとプラットフォームの考慮事項
- トラブルシューティングの落とし穴とライブUI修正
イオニックアクションシートの導入
ユーザーが現在のコンテキストに関連付けられた小さく集中した選択を行う必要がある場合、イオニックアクションシートは適切なツールです。ドキュメントを保存、共有、またはアーカイブする。プロフィール写真を置き換える。ドラフトを削除する。これらのアクションは重要ですが、メインレイアウトに永久的なスペースを占める価値はありません。
In Ionicでは、パターンは長い間一貫してきた。Earlier Ionicアプリは、TutorialsPointがサービスを「画面の下部からスライドアップするパネル」と説明しているサービスを使用していた。サービスをインジェクトし、コントローラーで呼び出すことで表示される。Modernアプリは、が使用されているが、インタラクションモデルは依然として同じで、認識しやすい。つまり、コンポーネントは、Ionicがフレームワークの世代を超えてモバイルUIパターンを維持している、Ionic 1アクションシートドキュメントの概要からTutorialsPointのより明確な例である。 $ionicActionSheet この連続性は、実際のプロジェクトでは便利である。コンポーネントは、毎回のリリースで変わるトレンドの抽象化ではない。iOSとAndroidのオプションメニューにマップし、Angular、React、Vueプロジェクトでも自然に感じられる、安定したモバイルファーストパターンである。 show() チームがこれにたどり着く理由 ion-action-sheetアクションシートは、ユーザーがすでにコンテキストを理解している場合に、コンパクトなリストの次のステップが必要な場合にうまく機能する。ユーザーが説明、検証、または複数のフォームフィールドが必要な場合に機能しない。 簡単なルールが役立つ。.
アクションシートは、特定のアイテムに結びついた短い決定メニューの場合に使用する。
アラートは使用する
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__
- __CAPGO_KEEP_0__ __CAPGO_KEEP_0__
- __CAPGO_KEEP_0__ 確認が必要な場合、最小限のオプションで。
- モーダルを使用します。 ユーザーがさらにコンテンツ、入力フィールド、またはスクロールを必要とする場合。
実用的なルール: __CAPGO_KEEP_0__で開発しているチームが、ウェブとネイティブの境界をより明確に理解したい場合、この__CAPGO_KEEP_0__がウェブとネイティブをどのように結びついているかを理解することは価値がある。
Capacitorがウェブとネイティブをどのように結びついているか how Capacitor bridges web and native code アクション シートは、単なるインライン コンポーネントとして考えなくても、より簡単に理解できるようになる。
アクション シート コントローラーとAPI
アクション シートのアーキテクチャ、設定、__CAPGO_KEEP_0__の構成図
APIは制御されるため
In Ionic の日常作業では、コントローラー ベースのアプローチが最も綺麗なオプションです。アクション シートは一時的なものなので、メニューがタップされた後に出現するため、ページに大きなテンプレート マークアップを置く必要がありません。
公式の Ionic ドキュメントでは、アクション シートを "ユーザーによる閉じ方が必要なモーダル ダイアログ" と定義し、閉じ方のライフサイクル メソッド、例えば "Ionic Action Sheet __CAPGO_KEEP_0__ ドキュメント" の "" に関する論理を重視しています。 設計は、__CAPGO_KEEP_0__ を構造化する方法を教えています。最初に表示し、閉じた後は反応してください。タイミングに関する仮定に依存した批判的ロジックを組み込まないでください。 実際に重要なオプション onDidDismiss ほとんどのチームは、__CAPGO_KEEP_0__ の小さなサブセットしか必要としませんが、そのサブセットを正しく使用する必要があります。 Ionic Action Sheet API docs. That design tells you how to structure your code. Present first. React after dismissal. Don’t wire critical logic to assumptions about timing.
なぜ重要か
API
| __CAPGO_KEEP_0__ | __CAPGO_KEEP_0__ | __CAPGO_KEEP_0__ |
|---|---|---|
header | タップラベルを設定 | 状況によって行動が曖昧になる場合に役立つ |
subHeader | 追加テキストを表示します。 | アクションが明確にされていないときに役立ちます。 |
buttons | 利用可能なアクションを定義します。 | この部分では、動作と視覚的な強調が実現されます。 |
cssClass | カスタムクラスを追加します。 | scoped stylingのための重要な設定はグローバルなハックではなく |
mode | iOSまたはMDスタイリングを強制します。 | プラットフォーム間の制御されたテストに役立つ |
ボタン設定は、そこでよく間違いが起きる場所です。一般的なボタンには以下のようなものがあります。
text__CAPGO_KEEP_0__の可視ラベルです。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);If you remember only one thing from the API, remember this: イオニックアクションシートは、表示された時点で終了していない。終了するのは、閉じた時点だ。
Angular、React、Vueの実装例
フレームワークごとにシンタックスが異なるが、メンタルモデルは同じだ。すべてのバージョンは同じインタラクションを生成する:ユーザーはアバターをタップし、プロフィール写真のオプションを表示し、1つのアクションを選択し、アプリはオーバーレイが閉じた後、対応する。
メディアアップロードのオフライン状態も扱っている場合は、この「Vue、Angular、Reactでオフライン画面を作る」ガイドが 下の例と組み合わせることができる。写真アクションは、ネットワーク依存のフローに直接つながることが多いからだ。 Angularの例
__CAPGO_KEEP_0__
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チームは、通常、2つの場所で間違いを犯します。 1 つ目は、ボタンハンドラーに論理を多く移動することです。 2 つ目は、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のhookAPIは、エラジックですが、同じルールが適用されます。 すぐにハンドラーに焦点を当てて、選択されたアクションに集中してください。 除去コールバックを使用して、クリーンアップ、分析、またはフォローアップのUIステートを使用してください。
Vueの例
Ionic Vueでは actionSheetController が、CompositionAPI内できれいに機能します。
<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
デフォルトのイオニックアクションシートのスタイリングは、プロトタイプ用には十分ですが、ブランド化されたアプリ用では十分ではなく、デザインがより密なスペーシング、異なるフォント、または破壊的なアクションが明確である場合には十分ではありません。
チームがアプリがより一般的なウェブラッパーではなく、よりネイティブな製品に感じさせたい場合、この ネイティブアプリの見た目の基本的な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に委ねられるか、プラットフォーム固有の動作の強さ、そしてシートがすべてのユーザーにとって理解できるようにする方法について決定する必要があります。
Webコンポーネントまたはネイティブプラグイン
標準的なIonicアプリを構築している場合 ion-action-sheet 通常、デフォルトです。スタイルを簡単に変更でき、他のアプリのオーバーレイシステムと一貫して動作し、柔軟性があります。
あなたのアプリがCapacitorベースで、ホストOSがシートをレンダリングしたい場合は、ネイティブルートは @capacitor/action-sheet ionicがプラグインを取り巻いていることをドキュメントしている showActions(options) -> Promise<ShowActionsResult>、インストールされている npm install @capacitor/action-sheet 、syncされている npx cap sync、そして 、も含めながらも、 in the Capacitor アクション シート プラグイン ドキュメント.
その結果、実用的な取引-offs テーブルが得られます。
| 選択 | 強み | コスト |
|---|---|---|
ion-action-sheet | アプリのUIパターンを共有し、テーマ設定を簡素化 | ネイティブの忠実性が僅かに低下 |
@capacitor/action-sheet | ホストOSによるレンダリングと強力なプラットフォーム感 | ブラウザとPWAのコンテキストで実装の制約が増える |
アプリの視覚的一貫性が大事な場合、Webコンポーネントを使用してください。プラットフォームの忠実性が深いCSS制御よりも大事な場合、ネイティブプラグインを使用してください。
プラットフォームモードとアクセシビリティの詳細
iOSとMaterial Designモードに適応することができ、スペース、動き、全体的な視覚的なtoneに影響します。両方のモードでスタイリングが同じように動作することを前提にしないでください。両方のモードを意図的にテストし、特にチームがすべてのプラットフォームで単一のモードを強制する場合に特別に。
アクセシビリティも見落とされることが多いです。アクションシートが小さく感じるからです。基本はまだ重要です。
- 明確なボタンテキストを使用してください コンテキストからも意味がわかるように。
- リスクのあるアクション
destructiveは予約してください そうすると、インターフェイスは意図を伝えます。 - 明示的に
cancelユーザーが明確な出口のパスを持つようにしてください。 装飾的な曖昧さを避けてください - 複数のアクションが似たような音を出すが、非常に異なる結果をもたらす場合に特に。 明確なボタンラベルを使用してください
Aスクリーンリーダーや認知負荷制限のユーザーは、ラベルの曖昧なオーバーレイを「単純」に経験しない。
nativeアプローチとWebアプローチは、異なる問題を解決する。Webコンポーネントは、外観と統合の制御を提供します。ネイティブプラグインは、プラットフォームの強い統合を提供します。どちらも自動的に優れているわけではありません。正解は、現在のアプリケーションの痛みが視覚的一貫性、実装のスピード、またはシステムネイティブの動作であるかどうかにかかっています。
トラブルシューティングの落とし穴とライブUI修正の配信
Ionicアクションシートの多くのバグは、最初に3つのボタンをワイヤアップし、シミュレータでタップすることで表示されません。実際にスタイリングされたシート、最新のデバイスでテストされたシート、実際のナビゲーションと状態のトランジションと組み合わせたときに表示されます。
デモが動作するバグ
最初のクラスのバグはタイミングです。ロジックは code が閉じるのを待っていないため、早すぎます。オーバーレイがアニメーション中のときにルートが変更され、またはコンポーネントのレンダリングと競合する状態の更新が見られます。
2番目のクラスはレイアウトです。 Ionic の問題は、iOS デバイスの特定の条件下でアクションシートが下部セーフエリアを重ねることが報告されています。特に、is 非ゼロの場合、問題の報告書は、 Ionic のドキュメントのデモでこの問題を再現できることも注目しています。 --ion-safe-area-bottom __CAPGO_KEEP_0__ の問題で下部セーフエリアの重ねについての問題についての問題 the GitHub issue about bottom safe area overlapThe bugs that show up after the demo works
Apractical safe area fix
アプリがホームインジケーターエリアに近い位置でシートを表示する場合、scoped overrideを使用するのではなく、広範なグローバルパッチを使用するのではなく、始めてください。
.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欠陥に対処するための安全な場所を得ることができます。
UI欠陥のためのライブアップデートの重要性
リリースオペレーションの実際的な現実が明らかになります。安全エリアの不具合、破損したパディングルール、または破壊的なボタンの色がJavaScriptまたはCSSに存在します。もしもそのバグがプロダクションに送信されると、フルストアリリースを待つことによって、視覚的な欠陥がユーザーの不満に変わり、数日間続くことになります。
1つの実用的オプションは、Capacitorアプリ用のライブアップデートサービスです。たとえば Capgo 更新されたウェブバンドルを配信することで、チームはJavaScript、CSS、コピー、設定、資産の修正をJavaScript、CSS、コピー、設定、資産の修正をアプリストアのレビューを待たずに、送信できます。これは、行動シートのスタイリングまたはオーバーレイのバグがQAを通過した場合に直接関連しています。
UIオーバーレイは、安全なネットワークが効果を発揮するような特性です。小さなスタイリングの変更で簡単に破損し、通常、ネイティブcodeを再構築することなく修正できるためです。
チームが定期的にIonicまたはCapacitorアプリを送信する場合 Capgo はリリースワークフローの一部として評価する価値があります。 これは、ロールアウトチャネルと更新動作を制御しながら、問題の修正、エクステンションのバグ、スタイルの不具合、コピーのミスなど、ウェブ層の修正をプッシュする方法を提供します。
イオニックアクションシート：2026年版の完全ガイド
が利用している場合 イオニックアクションシート：2026年版の完全ガイド を使用して、移行とエンタープライズオペレーションの計画に接続する場合は、__CAPGO_KEEP_0__ エンタープライズ の製品ワークフロー内でCapgo エンタープライズ for the product workflow in Capgo Enterprise, の製品ワークフロー内でイオニックエンタープライズプラグイン の代替品 の製品ワークフロー内でCapgo for the product workflow in Capgo Alternatives, Capgo 製品ワークフローについてはCapgoコンサルティングにご相談ください。 Capgoプレミアムサポート 製品ワークフローについてはCapgoプレミアムサポートにご相談ください。
