Ionic Native化されていないCordovaのプラグインを使う - Mapboxを例に

Ionic Native化されているCordovaプラグインは、皆さん御存知の通りnpmで簡単に使うことができます。
※Ionic Nativeとは、Ionicフレームワークの機能で、使用することでCordovaプラグインをIonicで簡単に使えるようになります。

これが非常に便利で、多くの便利なプラグインは、既にIonic Native化されています。Ionic NativeはIonic2から使える様になっています。

Ionic Nativeの場合

転載するまでもないんですが、Google Mapsを使うときは下記のような感じですよね。

$ ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"
$ npm install --save @ionic-native/google-maps

import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 LatLng,
 CameraPosition,
 MarkerOptions,
 Marker
} from '@ionic-native/google-maps';

export class MapPage {
 constructor(private googleMaps: GoogleMaps) {}

非Ionic Nativeの場合

Ionic Nativeで、殆どの機能が実装できるため、あえてNative化されていないCordovaプラグインを使う機会自体がそんなにないのですが、Open Street MapをベースにしたMapboxのプラグインを使う機会に出くわしました。

プラグインのインストール自体はIonicのCLIで

ionic  cordova plugin add cordova-plugin-mapbox --variable ACCESS_TOKEN=your.access.token

というようにやればいいんですが、Ionicの便利な機能にあやかりまくっていたので、「あれ？Nativeじゃない時どうするんだ？」と手が止まりまして。

調べた結果が

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

declare var Mapbox:any;

このようにImport文の後に書いてあげるだけで、そのまま使えるようになります。

  loadMap() {
      Mapbox.show({...})
  }

解説によっては、platformから持ってくるとか色々書いてあるところもありましたが、この方法が最もシンプルかつ簡単でした。