Ionicでグローバルで設定可能な項目を改めて見直そう

Ionicを使う時、モジュールをInitializeするためのメソッドを実行します。Angularなら provideIonicAngular 、Reactなら setupIonicReact 、Vueなら createApp メソッドの use 内ですね。

この時、引数を渡すと、Ionicの初期設定をオーバーライドして、アプリ全体に適用されます。この引数には、アニメーションの有効/無効、プラットフォームスタイル、ハードウェアの戻るボタンの有効/無効、ステータスバーのタップ時の挙動、アイコンのカスタマイズ、アニメーションのカスタマイズ、セキュリティ設定など、様々な項目が含まれます。

この記事では、Ionicのグローバル設定項目について改めて見直し、各項目の意味と使い方を解説します。

設定の仕方

Angular

provideIonicAngular({
  rippleEffect: false,
  mode: 'md',
})

React

setupIonicReact({
  rippleEffect: false,
  mode: 'md',
});

Vue

createApp(App).use(IonicVue, {
  rippleEffect: false,
  mode: 'md',
});

IonicConfig徹底解説：アプリのカスタマイズを極めるための設定項目

アニメーションと視覚効果

• animated?: boolean: アニメーションとトランジションをアプリ全体で有効/無効にします。デフォルトはtrue（有効）です。低スペックデバイスでアニメーションがカクつく場合にfalse（無効）に設定することで、動作をスムーズにすることができます。パフォーマンスとユーザーエクスペリエンスのバランスを考慮して設定しましょう。

• rippleEffect?: boolean: マテリアルデザインのリップル効果を有効/無効にします。デフォルトはtrue（有効）です。こちらも低スペックデバイスや、リップル効果が不要な場合にfalse（無効）に設定できます。

プラットフォームとハードウェアとの連携

• mode?: Mode: アプリ全体で使用するプラットフォームスタイルを決定します。ios、md（マテリアルデザイン）、autoなどから選択できます。autoはデバイスのOSを元に自動的に選択します。プラットフォーム固有のルックアンドフィールを適用したい場合に有効です。

• hardwareBackButton?: boolean: Androidデバイスでハードウェアの戻るボタンに対応するかどうかを設定します。モバイルデバイスではデフォルトでtrue（有効）です。この設定をfalseにすると、ハードウェアの戻るボタンが無効になります。

• statusTap?: boolean: ステータスバーをタップした際にスクロールをトップに移動させるかどうかを設定します。モバイルデバイスではデフォルトでtrue（有効）です。

バックボタンとメニューボタンのカスタマイズ

• backButtonIcon?: string: 全ての<ion-back-button>コンポーネントのデフォルトのアイコンを上書きします。カスタムアイコンを使用したい場合に便利です。

• backButtonText?: string: 全ての<ion-back-button>コンポーネントのデフォルトのテキストを上書きします。

• backButtonDefaultHref?: string: 全ての<ion-back-button>コンポーネントのデフォルトのhref属性を上書きします。

• menuIcon?: string: 全ての<ion-menu-button>コンポーネントのデフォルトのアイコンを上書きします。

• menuType?: string: 全ての<ion-menu>コンポーネントのデフォルトのメニュータイプを上書きします。デフォルトではアプリのモードに基づいて選択されます。

スピナー、トグル、その他コンポーネントのカスタマイズ

• spinner?: SpinnerTypes: 全ての<ion-spinner>コンポーネントのデフォルトのスピナーを上書きします。デフォルトではモード（iosまたはmd）に基づいて選択されます。

• toggleOnOffLabels?: boolean: 全ての<ion-toggle>コンポーネントのデフォルトのon/offラベルを有効/無効にします。

• loadingSpinner?: SpinnerTypes | null: ion-loading-controllerで作成された全てのion-loadingオーバーレイのデフォルトのスピナーを上書きします。

• refreshingIcon?: string: 全ての<ion-refresh-content>コンポーネントのデフォルトのアイコンを上書きします。

• refreshingSpinner?: SpinnerTypes | null: 全ての<ion-refresh-content>コンポーネントのデフォルトのスピナータイプを上書きします。

• infiniteLoadingSpinner?: SpinnerTypes | null: 全ての<ion-infinite-scroll-content>コンポーネントのデフォルトのスピナータイプを上書きします。

ジェスチャーとナビゲーション

• swipeBackEnabled?: boolean: アプリ全体で「スワイプして戻る」ジェスチャーを有効/無効にします。デフォルトはtrueです。

• tabButtonLayout?: TabButtonLayout: 全てのion-bar-buttonのデフォルトのレイアウトを上書きします。

アニメーションのカスタマイズ

navAnimation, actionSheetEnter, alertEnter, loadingEnter, modalEnter, popoverEnter, toastEnter, pickerEnter, actionSheetLeave, alertLeave, loadingLeave, modalLeave, popoverLeave, toastLeave, pickerLeave これらの項目は、それぞれ対応するIonicコンポーネントの表示・非表示時のアニメーションをカスタマイズするために使用します。AnimationBuilder を用いて独自のアニメーションを作成し、適用できます。高度なカスタマイズに利用します。

セキュリティとその他設定

• sanitizerEnabled?: boolean: カスタムHTMLを受け入れるコンポーネントのプロパティに対して基本的なDOMサニタイザーを有効/無効にします。セキュリティを強化するためにtrueに設定することを推奨します。

• innerHTMLTemplatesEnabled?: boolean: innerHTMLの使用を有効/無効にします。セキュリティ上のリスクを考慮し、必要がない限りfalseにすることを推奨します。

• platform?: PlatformConfig: デフォルトのプラットフォーム検出方法を上書きします。

• focusManagerPriority?: FocusManagerPriority[]: ページ遷移後に適切な要素にフォーカスを移動します。アクセシビリティを向上させるために使用します。（実験的な機能）

• experimentalCloseWatcher?: boolean: Escapeキーとハードウェアの戻るボタンを使用してメニューやオーバーレイを閉じ、ナビゲーションを行うために、Close Watcher APIを使用します。（実験的な機能、hardwareBackButtonもtrueにする必要があります）

• keyboardHeight, inputShims, scrollPadding, inputBlurring, scrollAssist, hideCaretOnScroll, persistConfig, _forceStatusbarPadding, _testing, _zoneGate, _ael, _rel, _ce: これらの項目は、内部的な設定であり、通常は直接操作する必要はありません。

まとめ

この解説が、IonicConfigを理解し、Ionicアプリ開発をより高度に進める上で役立つことを願っています。それぞれの項目を適切に設定することで、ユーザーエクスペリエンスを向上させ、パフォーマンスを最適化することができます。不明な点があれば、公式ドキュメントを参照ください。

それではまた。