Web アプリの作成

まずは、Web アプリを新規作成し、Kii Cloud SDK を組み込んで簡単なテストを行います。

Web アプリの新規作成

適当なディレクトリに HTML ファイルと JS ファイルを用意して、これを目的の Web アプリとします。

ここでは以下のような空の処理としておき、後の作業でこれらを拡張します。

index.html

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript">
      window.onload = function() {
        execute();
      }
    </script>
  </head>

  <body>
    JavaScript MQTT Push Notification Tutorial
  </body>
</html>

main.js

function execute() {
}

現段階では起動時に execute 関数を実行するだけの Web アプリとして動作します。ブラウザーで index.html を開くと、次のような画面が表示されます。

今後の作業のため、ブラウザーを開発者モードに切り替え、コンソール等を確認できるようにしておきます。

Kii Cloud SDK の組み込み

リファレンスガイドの「JavaScript アプリ開発の準備」に従って、Kii Cloud SDK を利用する準備を行います。

それぞれの手順は操作が複雑なため、JavaScript SDK の導入手順へのリンクによって詳細な操作方法を示しています。各ページの手順を実行した後は、このページに戻ってください。

ここで必要な設定は以下の 2 つです。

Kii Cloud でのアプリケーションの作成

Kii Cloud の開発者ポータルにログインして、アプリケーションを作成します。プッシュ通知はこのアプリケーション配下で実行させます。

アプリケーションは以下の条件で作成します。
- アプリケーション名：「Push Notification」など、わかりやすい名前を付けてください。
- サーバー設置場所：Web アプリ配布先の地域に近い場所を選択してください。
最終的に、Kii Cloud 上にアプリケーションを作成し、それを識別するための AppID を入手できます。

アプリケーションの作成を開いて、「コラボレーターの追加」の 直前まで の手順を実行し、このページに戻ってきてください。
Kii Cloud SDK の導入

先ほど作成した Web アプリに、Kii Cloud SDK を組み込みます。

Web アプリへの SDK の導入を開いて、手順をすべて実行し、このページに戻ってきてください。

プッシュ通知（MQTT）の導入にあるプッシュ通知の導入手順は実行不要です。この後で詳細な手順を示します。

ここまでで、index.html は以下のようになっているはずです。Kii.initializeWithSite() の AppID と KiiSite は作成先アプリケーションのものに読み替えてください。また、JS ファイルのパスも実際の配置に応じて読み替えてください。

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="KiiSDK.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript">
      window.onload = function() {
        Kii.initializeWithSite("11111111", "22222222222222222222222222222222", KiiSite.JP);
        execute();
      }
    </script>
  </head>

  <body>
    JavaScript MQTT Push Notification Tutorial
  </body>
</html>

Kii Cloud の機能をテスト

ここまでの設定で、Web アプリから Kii Cloud の API を呼び出せる状態になっています。正しく組み込めたかどうか、テストのためユーザーを作成してみます。

作成したユーザーは、後の工程で使用します。Kii Cloud のプッシュ通知は、通知対象がユーザーであるため、そのユーザーを事前に作成しておきます。ここでは、簡易的に固定のユーザー名とパスワードで作成しますが、実際の Web アプリではこのチュートリアルの最後に示すヒントによって代わりの方法を使用できます。

作成するユーザーは以下のとおりです。

ユーザー名：user1
パスワード：123ABC

次のコードを main.js ファイルに追加します。

function execute() {
  var username = "user1";
  var password = "123ABC";
  var user = KiiUser.userWithUsername(username, password);
  user.register().then(
    function(theUser) {
      alert("Succeeded");
    }
  ).catch(
    function(error) {
      var errorString = error.message;
      alert("Error: " + errorString);
    }
  );
}

ここでは、以下の処理を行っています。

register メソッドの実行により、固定のユーザー名とパスワードで Kii Cloud 上にユーザーを作成します。
作成結果は Promise によって通知されます。結果を受けて alert でメッセージ表示を行います。

Promise を使った実装方法は、チュートリアルや、リファレンスガイドをご覧ください。

実行テスト

実装後、一度 Web アプリを起動して実行してみます。Web アプリ起動後に「Succeeded」と表示されれば成功です。

2 回以上実行すると、ユーザーの重複により「USER_ALREADY_EXISTS」エラーとなるはずですが、ユーザーは作成できているため問題ありません。

これ以外のエラーが発生する場合、ここまでの設定手順をもう一度確認してください。特に、Kii Cloud SDK の組み込みで実装した Kii.initialize が実行されているか、AppID とサーバー設置場所が作成したアプリケーションと一致しているかを確認してください。また、ブラウザーのコンソールにエラーが表示されていないか確認してください。

ユーザー作成処理の削除

一度ユーザーを作成すると、処理は不要になります。追加したユーザー作成処理は、削除、または、コメントアウトしておきます。

次のステップライブラリーの組み込みに進みましょう。

<< JavaScript（Web）プッシュ通知設定チュートリアル

ライブラリーの組み込み >>