メインコンテンツへスキップ
バージョン：v8

プラットフォーム

Platform サービスは、現在のデバイスに関する情報を取得するために使用できます。デバイスに関連付けられたすべてのプラットフォームを platforms メソッドを使用して取得できます。これには、アプリがタブレットから表示されているか、モバイルデバイスまたはブラウザ上にあるか、および正確なプラットフォーム（iOS、Androidなど）が含まれます。デバイスの向き、右から左への言語方向を使用しているかどうか、その他多くの情報を取得できます。この情報を使用すると、あらゆるデバイスに合わせてアプリを完全にカスタマイズできます。

使用法​

import { Platform } from '@ionic/angular';

@Component({...})
export class MyPage {
  constructor(public platform: Platform) {

  }
}

メソッド​

is​

説明ユーザーが使用しているプラットフォームに応じて、is(platformName) は true または false を返します。同じアプリが複数のプラットフォーム名に対して true を返す場合があることに注意してください。たとえば、iPad から実行されているアプリは、プラットフォーム名 mobile、ios、ipad、および tablet に対して true を返します。さらに、アプリが Cordova から実行されている場合は、cordova が true になります。
シグネチャis(platformName: Platforms) => boolean

パラメータ​

名前型説明
platformNamePlatformsプラットフォームの名前。使用可能なオプションは、android、capacitor、cordova、desktop、electron、hybrid、ios、ipad、iphone、mobile、phablet、pwa、tablet です。

プラットフォーム​

以下は、可能なすべてのプラットフォーム値と対応する説明を一覧表示した表です。

プラットフォーム名説明
androidAndroid を実行しているデバイス
capacitorCapacitor を実行しているデバイス
cordovaCordova を実行しているデバイス
desktopデスクトップデバイス
electronElectron を実行しているデスクトップデバイス
hybridCapacitor または Cordova を実行しているデバイス
iosiOS を実行しているデバイス
ipadiPad デバイス
iphoneiPhone デバイス
mobileモバイルデバイス
mobilewebモバイルデバイスで実行されている Web ブラウザ
phabletファブレットデバイス
pwaPWA アプリ
tabletタブレットデバイス

プラットフォーム検出関数のカスタマイズ​

特定のプラットフォームを検出するために使用される関数は、グローバルの Ionic 設定で代替関数を提供することでオーバーライドできます。各関数はパラメータとして window を受け取り、ブール値を返します。

import { IonicModule } from '@ionic/angular';

@NgModule({
  ...
  imports: [
    BrowserModule,
    IonicModule.forRoot({
      platform: {
        /** The default `desktop` function returns false for devices with a touchscreen.
        * This is not always wanted, so this function tests the User Agent instead.
        **/
        'desktop': (win) => {
          const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(win.navigator.userAgent);
          return !isMobile;
        }
      },
    }),
    AppRoutingModule
  ],
  ...
})
type PlatformConfig = {
  android?: ((win: Window) => boolean) | undefined;
  capacitor?: ((win: Window) => boolean) | undefined;
  cordova?: ((win: Window) => boolean) | undefined;
  desktop?: ((win: Window) => boolean) | undefined;
  electron?: ((win: Window) => boolean) | undefined;
  hybrid?: ((win: Window) => boolean) | undefined;
  ios?: ((win: Window) => boolean) | undefined;
  ipad?: ((win: Window) => boolean) | undefined;
  iphone?: ((win: Window) => boolean) | undefined;
  mobile?: ((win: Window) => boolean) | undefined;
  mobileweb?: ((win: Window) => boolean) | undefined;
  phablet?: ((win: Window) => boolean) | undefined;
  pwa?: ((win: Window) => boolean) | undefined;
  tablet?: ((win: Window) => boolean) | undefined;
};

platforms​

説明どのデバイスを使用しているかによって、platforms は複数の値を返すことができます。可能な各値は、プラットフォームの階層です。たとえば、iPhone では、mobile、ios、および iphone を返します。
シグネチャplatforms() => string[]

ready​

説明プラットフォームの準備が完了し、ネイティブ機能が呼び出せるようになったときに、Promise を返します。アプリが Web ブラウザ内から実行されている場合、Promise は DOM の準備が完了すると解決されます。アプリが Cordova などのアプリケーションエンジンから実行されている場合、Promise は Cordova が deviceready イベントをトリガーすると解決されます。解決された値は readySource で、使用されたプラットフォームを記述します。

たとえば、Cordova の準備が完了すると、解決された準備ソースは cordova になります。デフォルトの準備ソースの値は dom になります。readySource は、アプリの実行元のプラットフォームに応じて異なるロジックを実行する必要がある場合に役立ちます。たとえば、Capacitor と Cordova のみでステータスバープラグインを実行できるため、Web でステータスバープラグインのロジックを実行すべきではありません。
シグネチャready() => Promise<string>

isRTL​

説明このアプリが右から左への言語方向を使用しているかどうかを返します。アプリの index.html ファイルに、<html dir="ltr"> または <html dir="rtl"> など、正しい dir 属性値が設定されていることをお勧めします。W3C: HTML における構造マークアップと右から左へのテキスト
シグネチャisRTL() => boolean

isLandscape​

説明アプリがランドスケープモードの場合は true を返します。
シグネチャisLandscape() => boolean

isPortrait​

説明アプリがポートレートモードの場合は true を返します。
シグネチャisPortrait() => boolean

width​

説明window.innerWidth を使用して、プラットフォームのビューポートの幅を取得します。
シグネチャwidth() => number

height​

説明window.innerHeight を使用して、プラットフォームのビューポートの高さを取得します。
シグネチャheight() => number

url​

説明現在の URL を取得します。
シグネチャurl() => string

testUserAgent​

説明式がユーザーエージェント文字列に含まれている場合は true を返します。
シグネチャtestUserAgent(expression: string) => boolean

パラメータ​

名前型説明
式文字列ユーザーエージェントで確認する文字列

イベント​

pause​

pause イベントは、ネイティブプラットフォームがアプリケーションをバックグラウンドに移行したときに発生します。通常、ユーザーが別のアプリケーションに切り替えたときです。このイベントは、Cordova/Capacitor アプリがバックグラウンドに移行したときに発生しますが、標準の Web ブラウザでは発生しません。

例​

this.platform.pause.subscribe(async () => {
  alert('Pause event detected');
});

resize​

resize イベントは、ブラウザウィンドウの寸法が変更されたときに発生します。これは、ブラウザウィンドウのサイズが物理的に変更された場合、またはデバイスの向きが変わった場合に発生します。

例​

this.platform.resize.subscribe(async () => {
  alert('Resize event detected');
});

resume​

resume イベントは、ネイティブプラットフォームがバックグラウンドからアプリケーションを取り出したときに発生します。このイベントは、Cordova/Capacitor アプリがバックグラウンドから戻ってきたときに発生しますが、標準の Web ブラウザでは発生しません。

例​

this.platform.resume.subscribe(async () => {
  alert('Resume event detected');
});

目次

このページを編集