はじめに
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);
});
});
}
}