Ionic2でサードパーティのJavaScriptライブラリを使う

7024 ワード
Angular2 TypeScript ionic2 Ionic3 TypeScript テキストリンク

はじめに

ionic/cordovaを使ってハイブリッドアプリを作成している時、ionicやcordovaのプラグインなどになっていない通常のJavaScriptライブラリを使いたいことがあります。
いくつか設定するだけで簡単に使えるので、その方法です。

前提

以下のライブラリを例にします。

<script src="http://cdn.peerjs.com/0.3/peer.js"></script>

これはWebRTCで使うシグナリングのサービス用ライブラリです。詳しくは以下のサイトをご覧ください。
peerjs

また、ionicのアプリは

ionic start ionic-peerj blank

で生成した物です。ionicのバージョンは3.9.2です。ディレクトリ構造は以下の通りです。

├── README.md
├── config.xml
├── hooks
├── ionic.config.json
├── node_modules
├── package-lock.json
├── package.json
├── resources
├── src
│   ├── app
│   │   ├── app.component.ts
│   │   ├── app.html
│   │   ├── app.module.ts
│   │   ├── app.scss
│   │   └── main.ts
│   ├── assets
│   ├── index.html
│   ├── manifest.json
│   ├── pages
│   │   └── home
│   │       ├── home.html
│   │       ├── home.scss
│   │       └── home.ts
│   ├── service-worker.js
│   └── theme
├── tsconfig.json
├── tslint.json
├── typings
│   ├── cordova-typings.d.ts
│   └── typings.d.ts
└── www
    ├── assets
    ├── build
    ├── index.html
    ├── manifest.json
    └── service-worker.js

設定

JavaScriptライブラリの読み込み設定

src/index.html の<head>セクションに使いたいライブラリを記述します。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
   |
  <script src="http://cdn.peerjs.com/0.3/peer.js"></script>
   |
</head>
<body>
   |
</body>
</html>

型情報の設定

typescriptでコンパイルを通すためには型の情報が必要なので、使うライブラリの関数の型情報をファイルに記述します。peerjsではPeer()を使うので、

declare var Peer: any;

をtypings/typings.d.tsに記述します。さらにこのファイルをtypescriptで使うためにtsconfig.jsonに以下の記述をします。

  "files":[
    "typings/typings.d.ts"
  ]

ライブラリの利用

src/pages/home/home.tsでpeerjsを使う例です。

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

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage implements OnInit {

    peer;

    constructor(public navCtrl: NavController) {
    }

    ngOnInit() {
        this.peer = new Peer({ key: '<yourkeyhere>' });

        this.peer.on('open', (id) => {
            console.log(`id: ${id}`);
        });

        this.peer.on('connection', function (conn) {
            conn.on('data', function (data) {
                // Will print 'hi!'
                console.log(data);
            });
        });
    }
}
AndroidのDOM解析XML
Webページの一般的なテクニック