バージョン: v8

クロスプラットフォーム

Ionicは、どのプラットフォームを構築する場合でも、開発を容易にするためにゼロから構築されています。 Ionicアプリは真のクロスプラットフォームであり、単一のコードベースからAndroid、iOS、Electron、およびプログレッシブウェブアプリ（PWA）として実行できます。これらのプラットフォームで動作するようにアプリを最適化する際には、いくつかの注意点があります。

ハードウェアAPI

ネイティブアプリケーションでは、カメラを開いたり、ジオロケーションにアクセスしたりするなど、デバイスと通信するためにAPI呼び出しを行うのが一般的です。ネイティブブリッジがないため、これらのAPI呼び出しはWeb環境で呼び出された場合は機能しません。 Ionicはこれを処理するいくつかの方法があります。

Ionic Native

Ionic Nativeには、ネイティブ環境内にあるかどうかを検出するための独自の内部ロジックがあります。ランタイムエラーをスローする代わりに、ネイティブ環境ではなく、Cordovaプラグインが使用できない場合は警告を出力します。アプリは壊れず、ネイティブ機能はなくても引き続き動作します。

プラットフォームの検出

アプリのロジックでは、ネイティブAPI呼び出しを行う必要がある場合は常に、最初にネイティブ環境のステータスを確認することをお勧めします。例えば

this.platform.ready().then(() => {
  // 'hybrid' detects both Cordova and Capacitor
  if (this.platform.is('hybrid')) {
    // make your native API calls
  } else {
    // fallback to browser APIs
  }
});

このコードは、ネイティブAPIへのアクセスが不確実な環境をターゲットにする場合に非常に役立ちます。

ブラウザのフォールバック

人々が使用する多くのネイティブAPI（たとえば、File API）は、ブラウザでは使用できません。 APIは常に改善され、ネイティブに追いつくため、調査することをお勧めします。最初の2つのポイントを考慮すると、アプリが実行されているプラットフォームに適応する優れたエクスペリエンスを簡単に作成できます。

レスポンシブUI

さまざまなデバイスで使用される可能性のあるアプリのデプロイを計画する場合、アプリが大きな画面サイズでもスムーズに動作することを確認することが重要です。

レイアウト

多くの人はアプリのレイアウトにほとんど気づきませんが、エクスペリエンスと使いやすさに大きな影響を与える可能性があります。この一般的なUIパターンを考えてみましょう

<ion-content>
  <ion-item>
    <ion-label>Item 1</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Item 2</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Item 3</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Item 4</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Item 5</ion-label>
  </ion-item>
</ion-content>

これは、それぞれ幅100％の5つのアイテムをレンダリングします。これは電話では見栄えが良いかもしれませんが、大きな画面でこれを表示するのは別の話です。画面の幅が広いと、アイテムが画面全体に引き伸ばされてしまい、画面スペースが未使用のままになります。

このエクスペリエンスを向上させるために、アイテムをグリッドコンポーネントでラップできます。ビューは、大きな画面でより使いやすくなるように簡単に書き直すことができます

<ion-grid>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>Item 1</ion-label>
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
        <ion-label>Item 2</ion-label>
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
        <ion-label>Item 3</ion-label>
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
        <ion-label>Item 4</ion-label>
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
        <ion-label>Item 5</ion-label>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-grid>

アイテムをion-grid要素でラップすることにより、Ionicグリッドシステムがレイアウトに追加されます。各アイテムを列でラップすると、アイテムはグリッド内で同じ行に沿って等幅になります.

<ion-grid>要素にfixed属性を追加することで、これをさらに進めることができます。これにより、グリッドは画面サイズに基づいて固定幅になります。これは、グリッドに幅がないとアイテムが再び引き伸ばされ始める大きな画面に最適です。

ion-colプロパティを追加することにより、グリッドをさらにカスタマイズして列のサイズを変更できます。

<ion-grid fixed>
  <ion-row>
    <ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3">
      <ion-item>
        <ion-label>Item 1</ion-label>
      </ion-item>
    </ion-col>
    <ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3">
      <ion-item>
        <ion-label>Item 2</ion-label>
      </ion-item>
    </ion-col>
    <ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3">
      <ion-item>
        <ion-label>Item 3</ion-label>
      </ion-item>
    </ion-col>
    <ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3">
      <ion-item>
        <ion-label>Item 4</ion-label>
      </ion-item>
    </ion-col>
    <ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3">
      <ion-item>
        <ion-label>Item 5</ion-label>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-grid>

上記の例では多くのことが行われています。重要なポイントは次のとおりです

ion-colは、それに追加されたsize属性から幅を取得します。ここで、sizeの値は、使用可能な列の総数から占める列の数です。デフォルトで使用可能な列の数は12です。
size属性には、ブレークポイントsize-{breakpoint}を追加できます。この値は、指定されたブレークポイント以上のサイズを設定します。

グリッドを使用したカスタマイズの詳細については、グリッドのドキュメントを参照してください。

ストレージ

ほとんどのアプリは、ある時点で何らかのデータをローカルに保存する必要があります。 XHRリクエストからJSONを保存する場合でも、認証トークンを保存する場合でも、さまざまなストレージオプションが利用可能です。これに加えて、アプリがネイティブ環境で実行されている場合は、完全なSQLiteデータベースを作成してデータをそこに保存できます。これらすべての異なるストレージメカニズムには、それぞれ長所と短所がありますが、Ionic開発者はそれを心配する必要はありません。

Ionicストレージ

この場合、Ionicのストレージライブラリは、複数環境のユースケースに最適な候補です。十分にテストされたLocalForageライブラリの上に構築されたIonicのストレージクラスは、現在のランタイムに最適なストレージソリューションを選択する適応可能なストレージメカニズムを提供します。

現在、これは、ネイティブ、IndexedDB（使用可能な場合）、WebSql、またはローカルストレージのSQLiteを介して実行されることを意味します。これらすべてを処理することにより、安定したAPIを使用してストレージに書き込むことができます。

class MyClass {
  constructor(public storage: Storage) {}

  async setData(key, value) {
    const res = await this.storage.set(key, value);
    console.log(res);
  }

  async getData(key) {
    const keyVal = await this.storage.get(key);
    console.log('Key is', keyVal);
  }
}

PouchDBなど、同様の適応可能なストレージメカニズムを提供する他のストレージソリューションもあります。

クロスプラットフォーム

ハードウェアAPI​

Ionic Native​

プラットフォームの検出​

ブラウザのフォールバック​

レスポンシブUI​

レイアウト​

ストレージ​

Ionicストレージ​

目次