Zenn
🐕

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

2024/11/29に公開
Angular
JavaScript
React
Vue.js
Ionic
tech

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

それではまた。

Discussion