カテゴリー: 日本語

Ionic コアコンセプト

投稿日: | 投稿者: Jinbaek Lee

Ionicアプリ開発を初めて行う人にとっては、プロジェクトの背後にある中核となる哲学、概念、およびツールについて高度な理解を得ることが役立ちます。複雑なトピックに飛び込む前に、Ionic Frameworkの基本とその仕組みについて説明します。

UIコンポーネント

Ionic FrameworkはUIコンポーネントのライブラリです。UIコンポーネントは、アプリケーションの構成要素として機能する再利用可能な要素です。イオンコンポーネントはウェブ標準HTML、CSS、およびJavaScriptを使用します。コンポーネントはあらかじめ構築されていますが、高度にカスタマイズできるようにゼロから設計されているため、アプリは各コンポーネントを独自に作成でき、各アプリに独自のルックアンドフィールを持たせることができます。具体的には、Ionicコンポーネントを簡単にテーマ化して、アプリ全体の外観をグローバルに変更できます。外観のカスタマイズの詳細については、テーマ。

プラットフォームの継続性

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

プラットフォーム間で微妙な設計変更を行うことにより、ユーザーは使い慣れたアプリエクスペリエンスを提供されます。AppleのApp StoreからダウンロードしたIonicアプリはiOSテーマを取得し、AndroidのPlay StoreからダウンロードしたIonicアプリはMaterial Designテーマを取得します。ブラウザからプログレッシブWebアプリ（PWA）として表示されるアプリの場合、Ionicはデフォルトでマテリアルデザインテーマを使用します。さらに、特定のシナリオで使用するプラットフォームの決定は完全に構成可能です。プラットフォームの継続性に関する詳細は、テーマ。

従来のWebアプリは線形の履歴を使用します。つまり、ユーザーはページに進み、戻るボタンを押して戻ることができます。この例としては、ユーザーがブラウザーの線形履歴スタックを前後に移動するウィキペディア周辺をクリックすることがあります。

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

Ionicアプリはこのモバイルナビゲーションアプローチを採用しており、Web開発者が使い慣れたブラウザースタイルのナビゲーション概念を維持しながら、ネスト可能な並列ナビゲーション履歴をサポートしています。

Angularおよび@ionic/angularで構築されたアプリの場合、新しいIonic 4 Angularアプリごとにすぐに使用できるAngular Routerを使用することをお勧めします。Ionicの以前のバージョンには独自のカスタムルーターが付属していましたが、最高のツールと開発者のエクスペリエンスを提供するために、フレームワークの推奨ルーターの使用に移行しました。

ネイティブアクセス

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

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

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

テーマ

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