メインコンテンツにスキップ
バージョン: v8

コアコンセプト

Ionicアプリ開発の初心者にとって、プロジェクトの背後にある中核となる理念、概念、ツールについて、概要を理解しておくと役に立ちます。複雑なトピックに進む前に、Ionic Frameworkとは何か、どのように動作するのかについて、基本的な事柄を説明します。

UIコンポーネント​

Ionic FrameworkはUIコンポーネントのライブラリです。UIコンポーネントとは、アプリケーションの構成要素となる再利用可能な要素です。Ionicコンポーネントは、HTML、CSS、JavaScriptを使用してWeb標準に基づいて構築されています。コンポーネントは事前に構築されていますが、高度にカスタマイズできるように設計されているため、アプリは各コンポーネントを独自のものにすることができ、各アプリは独自のルックアンドフィールを持つことができます。具体的には、Ionicコンポーネントは、アプリ全体で外観をグローバルに変更するために簡単にテーマ設定できます。外観のカスタマイズの詳細については、テーマ設定を参照してください。

アダプティブスタイリング​

アダプティブスタイリングは、Ionic Frameworkの組み込み機能であり、アプリ開発者は複数のプラットフォームで同じコードベースを使用できます。すべてのIonicコンポーネントは、アプリが実行されているプラットフォームに合わせて外観を調整します。たとえば、iPhoneやiPadなどのAppleデバイスは、Apple独自のiOSデザイン言語を使用しています。同様に、Androidデバイスは、Googleのデザイン言語であるマテリアルデザインを使用しています。

プラットフォーム間で微妙なデザイン変更を行うことで、ユーザーになじみのあるアプリエクスペリエンスが提供されます。AppleのApp StoreからダウンロードされたIonicアプリはiOSテーマを取得し、AndroidのPlay StoreからダウンロードされたIonicアプリはマテリアルデザインテーマを取得します。ブラウザからプログレッシブウェブアプリ（PWA）として表示されるアプリの場合、Ionicはデフォルトでマテリアルデザインテーマを使用します。さらに、特定のシナリオでどのプラットフォームを使用するかを完全に設定できます。アダプティブスタイリングの詳細については、テーマ設定を参照してください。

従来のWebアプリは線形履歴を使用します。つまり、ユーザーはページに進んで移動し、戻るボタンを押して戻ることができます。この例としては、ユーザーがブラウザの線形履歴スタックを進んだり戻ったりするWikipediaのクリックが挙げられます。

対照的に、モバイルアプリは多くの場合、並列の「非線形」ナビゲーションを利用します。たとえば、タブ付きインターフェースは、各タブに個別のナビゲーションスタックを持つことができ、ユーザーがタブ間を移動して切り替えるときに場所を見失うことがないようにします。

Ionicアプリは、このモバイルナビゲーションアプローチを採用しており、ネストすることもできる並列ナビゲーション履歴をサポートしながら、Web開発者になじみのあるブラウザスタイルのナビゲーションの概念を維持しています。

Angularと@ionic/angularで構築されたアプリの場合、新しいIonic 4 Angularアプリごとにすぐに使用できるAngular Routerを使用することをお勧めします。

ネイティブアクセス​

Webテクノロジー（Ionicアプリなど）で構築されたアプリの驚くべき機能は、デスクトップコンピューター、電話、タブレット、車、冷蔵庫など、事実上あらゆるプラットフォームで実行できることです。Ionicアプリの同じコードベースは、Web標準とこれらのプラットフォーム間で共有される共通APIに基づいているため、多くのプラットフォームで動作できます。

Ionicの最も一般的なユースケースの1つは、App StoreとPlay Storeの両方からダウンロードできるアプリを構築することです。iOSとAndroidの両方のソフトウェア開発キット（SDK）は、IonicアプリをレンダリングするWebビューを提供しながら、ネイティブSDKへの完全なアクセスを可能にします。

CapacitorやCordovaなどのプロジェクトは、IonicアプリにネイティブSDKへのアクセスを提供するためによく使用されます。つまり、開発者は一般的なWeb開発ツールを使用してアプリをすばやく構築し、デバイスの加速度計、カメラ、GPSなどのネイティブ機能にアクセスできます。

テーマ設定​

Ionic Frameworkは、CSSを使用して構築されており、CSSプロパティ（変数）が提供する柔軟性を活用できます。これにより、Web標準に準拠しながら見栄えの良いアプリを非常に簡単に設計できます。開発者が優れたデフォルト値を使用できるように、一連の色を提供していますが、ブランド、会社、または目的のカラーパレットに一致するデザインを作成するために、それらをオーバーライドすることをお勧めします。アプリケーションの背景色からテキストの色まで、すべてを完全にカスタマイズできます。アプリのテーマ設定の詳細については、テーマ設定を参照してください。

イベント​

多くのIonicコンポーネントは、CustomEventを使用して、コンポーネントの重要な状態変更を開発者に通知します。たとえば、ion-datetimeコンポーネントは、選択した日付が変更されるたびにionChangeを発行します。

開発者は、通常どおりclickなどの標準イベントを使用できます。ただし、コンポーネントのシャドウルート内で発行される多くのイベントは、ホスト要素に再ターゲットされます。これにより、ユーザーが1回クリックしただけでも、複数のclickハンドラーが実行される可能性があります。そのため、開発者はIonicコンポーネントの状態変更を適切に通知されるために、Ionicのイベントに依存する必要があります。Ionicのイベントには、標準イベントとの衝突を避けるために、プレフィックスとしてionが付きます。各コンポーネントのドキュメントページには、開発者がアプリケーションでリッスンできる使用可能なイベントのリストがあります。

目次

このページを編集