E.1.1 IMAPSエージェントアプリケーション

1. viewportは作成した画面がスマートフォンの画面にフィットするように指定するものです。サンプルでは画面サイズを固定にしています。拡大と縮 小を可能にする場合は変更してください。

   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

2. 外部JavaScriptファイルを定義します

   IMAPSアプリを作成するためには以下のJavaScriptファイルをインクルードする必要があります。

   <script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
   <script type="text/javascript" src="js/imaps.js"></script>

   双方向通信サービスと利用するためには以下のJavaScriptファイルをインクルードする必要があります。

   サーバ名の部分は、 双方向通信サービスをインストールしたサーバを指定してください。

   ポート番号はデフォルトの3300の場合を想定しています。

   <script src="http://サーバ名:3300/socket.io/socket.io.js"></script>

   サンプルのチャットアプリでは、「servername.js」内で「サーバ名」を指定しています。

3. ルームに参加するための画面と参加後のメッセージ送受信の画面を作成します。

   ルームに参加するための画面では、ルーム名と参加者名を決定し、指定したルームに参加します。

   基本の流れは、

   ルームに参加　→　メッセージ送受信　→　ルーム退室

   となりますので、ルーム参加後の画面ではメッセージ送信と退室操作のみでき、参加操作はできないようにすることがポイントです。

   チャットアプリでは参加するための画面とメッセージ送受信の画面を表示/非表示の切り替えるようにし、１つのHTMLファイルで実装しています。

   チャットアプリでは、roomA, roomB, roomC を選択可能としています。

   <select id="room">
       <option value="roomA"> roomA </option>
       <option value="roomB"> roomB </option>
       <option value="roomC"> roomC </option>
   </select>
   

1. IMAPSエージェントアプリケーションの起動処理が完了するのを待つため、以下の処理を最初に実施し、functionの中に双方向通信サービスとの処理(2,3,5,7,8,10,11の手順)を実装します。

   document.addEventListener("deviceready", function(){
       // 双方向通信サービスとの処理
   }, false);
   

2. サーバとコネクションを確立します。/websocketは必須です。
   サーバ名の部分は、双方向通信サービスをインストールしたサーバを指定してください。

   socket = io.connect('http://サーバ名:3300/websocket');

   サンプルのチャットアプリでは、「servername.js」内で「サーバ名」を指定しています。
3. コネクションが確立されると、サーバから'connect'イベントが送られてきます。
   以下の処理を実装し、受信できるようにします。

   socket.on('connect', function () {});

4. ルームに参加します。

   'join'イベントとルーム名と参加者名をサーバに送信します。

   ルーム名と参加者名は、 {'room': room, 'name': name} の形式で送信する必要があります。

   function sendjoin () {
       var r = document.getElementById("room").value;
       var n = document.getElementById("name").value;
       socket.emit('join', {
           'room': r,
           'name': n
       });
   }
   

5. 参加可能になると、サーバから'join'イベントが送られてきます。

   送られてくるデータ(data)は、ルーム名と参加者名とIDであり、data.room、data.name、data.idで参照可能です。

   ここでは、メッセージを作成し、画面に表示しています。

   socket.on('join', function(data) {
       var value = 'Join [' + data.room + '] as [' + data.name + '] ';
       document.getElementById("JoinRoom").innerHTML += value;
   });

   ここには記載しませんが、サンプルではこの後ルームに参加するための画面と参加後のメッセージ送受信の画面を切り替える処理を入れてあります。
6. メッセージを送信します。

   メッセージをサーバに送信しています。

   'send'イベントとメッセージをサーバに送信します。

   ここでは、自分が参加しているルームの参加者全員にメッセージを送信しています。

   function sendAll() {
       var data = msgBox.value;
       socket.emit('send', {
           'data': data
       });
       msgBox.value = "";
   }
   

   自分が参加しているルームの特定の人にメッセージを送信する場合は以下のように実装します（自分には送信されません）。

   function sendPerson() {
       var toId = document.getElementById("toId").value;
       var ids = [];
       ids.push(toId);
       var myself = false;
       var data = msgBox.value;
       socket.emit('send', {
           'ids': ids,
           'myself': myself,
           'data': data
       });
       msgBox.value = "";
   }
   

7. 他の参加者がメッセージを送信すると、サーバから'receive'イベントが送られてきて、メッセージを受信できます。

   送られてくるデータ(data)は、送信者名とメッセージとIDであり、data.name、data.data、data.idで参照可能です。

   ここではメッセージを作成し、画面に表示しています。

   socket.on('receive', function(data) {
       var value = data.name + ': ' + data.data;
       update(value);
   });
   

8. 他の参加者が同じルームに参加すると、サーバから'coming'イベントが送られてきます。

   送られてくるデータ(data)は、参加者名とIDであり、data.name、data.idで参照可能です。

   ここではメッセージを作成し、画面に表示しています。

   socket.on('coming', function(data) {
       var value = '[' + data.name + '] has come.';
       update(value);
   });
   

9. ルームから退室します。
   送信するデータはありませんので、'leave'イベントのみ送信します。

   function leavebtn(){
       socket.emit('leave');
   };
   

   ここには記載しませんが、サンプルではこの後ルームに参加するための画面と参加後のメッセージ送受信の画面を切り替える処理を入れてあります。
10. 他の参加者がルームから退室すると、サーバから'leave'イベントが送られてきます。

    送られてくるデータ(data)は、退室した参加者の名前とIDであり、data.name、data.idで参照可能です。

    ここではメッセージを作成し、画面に表示しています。

    socket.on('leave', function(data) {
        var value = '[' + data.name + '] has left.';
        update(value);
    });
    

11. 他の参加者がコネクションを切断すると、サーバからdisconnectイベントが送られてきます。

    送られてくるデータ(data)は、接続を切断した参加者の名前とIDであり、data.name、data.idで参照可能です。

    ここではメッセージを作成し、画面に表示しています。

    socket.on('disconnect', function (data) {
        var value = '[' + data.name + '] has disconnected.';
        update(value);
    });
    

<?xml version="1.0" encoding="utf-8"?>
<imaps-application>
    <name>チャット</name>
    <version>1.0</version>
    <apiset>2.1</apiset>
    <description>双方向通信 チャット</description>
    <icon>icon.png</icon>
    <toolbar-setting>
      <forward>visible</forward>
    </toolbar-setting>
</imaps-application>