はじめに

こんにちは、ベーコン婆男です。

今までKurento Media Serverのチュートリアルデモをいくつか紹介しました。Kurentoサーバでできることのイメージを持っていただけたのではないでしょうか。

ここからは、Kurentoサーバを使ったスマホのWebRTCアプリを開発していきたいと思います。

まずは「WebRTCでマルチパーティ接続」でご紹介したKurento Room DemoアプリをAndroidとiOSで動作させたいと思います。Kurento Room DemoがAndroidとiOSで動作するようになれば、スマホやタブレットで多人数のWeb会議を行うことができるようになります。

開発に当たっては、WebViewを使ったハイブリッドアプリを採用します。理由はKurento RoomのKurento Room JavaScript Clientライブラリを利用できることと、ハイブリッドアプリで開発すればAndroidでもiOSでも基本的に同一コードで動作するためです。
（一部、AndroidとiOSでWebRTCのAPIの仕様が異なるため、OS依存のコードが必要ですが、ほとんど同一コードで動作可能です。）

まずは、Androidでの開発方法を説明し、そのあと、iOSについて説明していきます。

本記事では、Android向けのKurento Room Demoアプリを開発するにあたり、ハイブリッドアプリの開発環境の構築手順について説明します。

開発環境(Android向け)

• 開発ターゲット：Android 4.2+
• 開発用PC： Windows10
• 開発ツール：Microsoft Visual Studio Code（無償）
• 開発フレームワーク： Cordova + AngularJS + Ionic

開発環境の構築手順

以下の開発ツールをインストールします。

1. JDK
2. Node.js
3. Android SDK
4. Cordova
5. Ionic
6. Visual Studio Code

1.JDK～4.Cordovaのインストール

こちらのサイトでインストール手順が詳しく記載されていますので手順に従ってインストールしてください。なお、Android SDKの「SDK Tool Only」のインストーラは2018年1月時点で該当サイトに見つからなかったため、代わりにAndroid Studioをインストールしました。SDK Toolは、Android Studionの起動後のセットアップでインストールされます。

5.Ionicのインストール

Cordovaのインストールと同様にnmpでインストールします。AngularJSも一緒にインストールされます。

$ npm install -g ionic

6.Visual Studio Code(VS Code)のインストール

Visual Studio Codeのサイトからインストーラをダウンロードして、インストールしてください。必要に応じて、ソース管理のGitをインストールしてください。

また、VS Codeの拡張機能として、Cordova Toolをインストールしてください。

Visual Studio Codeは、他のエディタを利用しても構いませんが、個人的には無料で使えて、軽量なエディタとして、使いやすいと思います。

開発環境の確認

サンプルプロジェクトを作成し、ionicとandroid SDKが問題なくインストールされているか確認します。Windowsのコマンドプロンプトもしくは、Windows PowerShellから各コマンドを実行してください。

サンプルプロジェクトの作成とビルド

• プロジェクトの作成

$ ionic start test blank --type ionic1

プロジェクト作成中に以下の質問があるので、それぞれ回答

Would you like to integrate your new app with Cordova to target native iOS and Android? (y/N)

→　yを選択

Install the free Ionic Pro SDK and connect your app?

→　nを選択

• プロジェクトにandroidの設定を追加

$ ionic cordova platform add android

• ビルド

$ ionic cordova build android

エミュレータで確認

• エミュレータの作成
  • Android Studio > Tools > Android > AVD Manger からAVDを起動
  • AVDのCreate Virtual Devicesで、エミュレータを作成。AndroidのAPI Levelは、API Level 17以上(Android 4.2+)を選択。

• エミュレータで実行

$ ionic cordova emulate android

実機で確認

andoroid端末を開発PCにUSBで接続

$ ionic cordova run android

トラブルシューティング

• Android端末をPCに接続しても認識されない
  • こちらのサイトに認識方法が記載されているので参照
    （端末が認識されているかどうかは、コンソールで、$ adb devices で確認できる）
  • デバイスマネージャで、USB　Composite Deviceにビックリマークがついていた場合は、一旦そのドライバを削除し、Android端末を抜き差しして認識し直す
  • Android端末側のUSBの認識タイプを、「Photo transfer(PTP)」を選択してみる

• Androidのエミュレータが作成できない（Android Studioで、AVDアイコンが非活性）
  • Android　Studioで、新規プロジェクト作成し、Event Logにエラーが表示されている場合は、そのエラーリンクをクリックして、必要なモジュールをインストール
  • Android Studioを管理者権限で実行

• ionic startでプロジェクト作成する時エラーがでる。
  • 必要なAndroid SDK Platformのバージョンがインストールされていない可能性があるので、SDK Managerから追加。(2018年1月時点では、Android SDK Platform 26)

以上