[ionic4入門] ionicのカスタマイズ性とクロスプラットフォームの仕組み!

Ionic Docs – Core Concepts

このページは上のリンクの翻訳になります。

ionicのコアコンポーネント

Ionicアプリケーションの開発を全く経験していない人にとっては、プロジェクトの背後にある哲学、概念、ツールを高度に理解することが役に立ちます。複雑なトピックに入る前に、Ionic Frameworkの基本とその動作について説明します。

UI Components

Ionic FrameworkはUIコンポーネントのライブラリであり、アプリケーションの一部として機能する再利用可能な要素です。 Ionic Componentsは、HTML、CSS、およびJavaScriptを使用してWeb標準で構築されています。コンポーネントはあらかじめ作成されていますが、カスタマイズ可能なデザインになっているため、各アプリケーションを独自のものにすることができ、各アプリごとに独自のルック・アンド・フィールを持たせることができます。すなわち、Ionic Componentsは、アプリケーション全体の外観をグローバルに変更することができます。外観のカスタマイズの詳細については、Themingを参照してください。

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

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

プラットフォームごとの設計変更により、ユーザーにとって使い慣れたアプリ体験を提供できます。 AppleのApp StoreからダウンロードしたIonicアプリはiOSテーマを取得し、AndroidのPlayストアからダウンロードしたIonicアプリはMaterial Designテーマを取得します。ブラウザからProgressive Web App(PWA)として表示されるアプリケーションの場合、IonicはデフォルトでMaterial Designテーマを使用します。さらに、特定のシナリオで使用するプラットフォームを決定することは、完全に構成可能です。プラットフォームの継続性に関する詳細はThemingにあります。

ナビゲーション

伝統的なWebアプリケーションは線形履歴を使用します。つまり、ユーザーはページに移動して戻るボタンを押して戻ることができます。対照的に、モバイルアプリケーションは、しばしば、並列「非線形」ナビゲーションを利用します。たとえば、タブ付きインターフェイスは、タブごとに個別のナビゲーションスタックを持つことができ、ユーザーがタブを移動して切り替えるときに決して場所を失わないようにします。

Ionicアプリは、このモバイルナビゲーションアプローチを採用しており、ネストすることもできる並行ナビゲーション履歴をサポートしています。すべて、ウェブ開発者がよく知っている使い慣れたブラウザスタイルのナビゲーションコンセプトを維持します。

Angularと@ionic/angularで構築されたアプリケーションの場合は、新しいすべてのionic 4 Angular アプリに搭載可能なAngular Routerを使用することをお勧めします。以前のバージョンのIonicは独自のカスタムルータを搭載していましたが、これまでのAngularのツールや開発者の経験を最大限に引き出すため、フレームワークの推奨ルータを使用しています。

 ネイティブアクセス

Web技術(Ionicアプリなど)で構築されたアプリの驚くべき機能は、デスクトップコンピュータ、携帯電話、タブレット、車、冷蔵庫などあらゆるプラットフォームで動作できることです。 Ionicアプリケーションのためのコードベースは、これらのプラットフォーム間で共有されるWeb標準と一般的なAPIに基づいているため、多くのプラットフォームで動作することができます。

Ionicの最も一般的な使用例の1つは、App StorePlay Storeの両方からダウンロードできるアプリを作成することです。 iOSとAndroidソフトウェア開発キット(SDK)の両方で、Ionicアプリをレンダリングする「ウェブビュー」が提供され、Native SDKの完全なアクセスが可能です。 CapacitorCordovaなどのプロジェクトは、IonicアプリにネイティブSDKへのアクセスを与えるためによく使用されます。これは、開発者が一般的なWeb開発ツールを使用してアプリケーションを素早く構築でき、さらに、デバイスの加速度計、カメラ、GPSなどのネイティブ機能にアクセスできることを意味します。

テーマ

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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする