index.html の実装

まず、Web アプリで初めに読み込まれる index.html ファイルから見ていきます。

このページでは、順に次の 3 つの定義を行っています。

スクリプト等の読み込み
SDK の初期化処理の実行
コンテンツの作成

スクリプト等の読み込み

HTML の先頭にある <head> 要素で、Kii Cloud SDK の JavaScript ソース、各ページの機能が実装された JavaScript ソース 2 件、および、スタイルシートを読み込んでいます。

以下のように、各ファイルを埋め込んでいます。

<script type="text/javascript" src="html5-cloud-sdk-v2.4.2.js"></script>
<script type="text/javascript" src="login-page-callback.js"></script>
<script type="text/javascript" src="list-page-callback.js"></script>
<link rel="stylesheet" href="hellokii.css" />

すでに説明したように、Hello Kii ではコールバック版と Promise 版の両方で同じ機能を実装しています。ここでは、login-page-callback.js と list-page-callback.js が設定されているため、コールバック版の JavaScript ファイルが参照されます。

<script> タグで Kii Cloud SDK も読み込ませている点にご注意ください。自分で Web アプリを作成する場合も、ダウンロードした Kii Cloud SDK を、Web アプリの構成ファイルの一部として配布/公開する必要があります。

SDK の初期化処理の実行

<head> 要素内に以下のスクリプトを定義しています。window.onload イベントのハンドラーに設定しているため、HTML ページの読み込み時に自動実行されます。ここでは Kii Cloud SDK の初期化処理を行います。

<script type="text/javascript">
  // Initialize the page.
  window.onload = function() {
    // Initialize the Kii Cloud SDK.
    Kii.initializeWithSite("12345678", "abcdef0123456789abcdef0123456789", KiiSite.JP);
  }
</script>

Kii.initializeWithSite() は SDK の初期化メソッドです。ここでのパラメータは 3 つあり、順にアプリケーションの AppID、AppKey（任意の値）、サーバー設置場所を表します。

Kii Cloud には、多数の開発者が作成した多数のアプリケーションが存在しており、それぞれを識別するため、AppID を使用します。これらの値は開発者ポータルでアプリケーションを作成したときに生成されます。

下の図のように、モバイルアプリの初期化処理では、AppID を指定します。図の AppID = 1111 の例のように、複数のプラットフォームから同じ値を指定すると、同じアプリケーションのユーザーやデータを参照することもできます。

Hello Kii では、開発者ポータルからソースコードをダウンロードする際、開発者ポータルが自動的に AppID と AppKey を埋め込んで、開発者ポータルアカウント専用の ZIP ファイルを作成します。そのため、プロジェクトを開いた段階で、このページの初めに示したような初期化コードがすでに埋め込まれています。

新規にプロジェクトを作成する場合、この値を自分で埋め込む必要があります。アクセスキーの確認とリセットの内容に従って、アプリケーショの AppID を確認してください。

注意

AppID を知っていてもアプリケーションは攻撃できませんが、ClientID と ClientSecret を使えば、アプリケーション内の全データに対して管理者権限でのアクセスができてしまいます。ClientID と ClientSecret は開発者ポータルへのログインパスワードと同等の厳重な管理が必要です。

Kii のサポートに問い合わせる場合は AppID とサーバー設置場所のみお知らせいただければ十分です。

コンテンツの作成

最後に <body> 要素内に HTML ページを定義します。

今回は、ログイン画面とデータ一覧画面の両方のページを <div> 要素内に記述しておき、style 属性の display プロパティで切り替えることによってページ遷移を実現します。

以下は定義内容の概略です。<div> 要素が 3 つあり、それぞれ、ヘッダ部分、ログイン画面、データ一覧画面を定義します。login-page と list-page で style 属性の display プロパティを切り替えることで、ログイン画面とデータ一覧画面の画面遷移を実現します。

<body>
  <div class="app-header">
    Hello Kii
  </div>

  <div id="login-page" class="app-body">
    ...... contents of the user login screen ......
  </div>

  <div id="list-page" class="app-body" style="display: none">
    ...... contents of the data listing screen ......
  </div>
</html>

この画面遷移の仕組みは Hello Kii の説明用に簡略化したものであり、通常のサービスが要求する規模では管理しきれなくなるはずです。実際の Web アプリを開発する場合、Web アプリ構築用のフレームワークを使用することでページ遷移を実現してください。

次は...

ログイン画面の処理について説明します。API の使用方法などを見ていきます。

ログイン画面の実装に移動してください。

より詳しく学びたい方へ

モバイルアプリを新規に作成する方法は JavaScript アプリ開発の準備をご覧ください。
セキュリティにセキュリティの情報をまとめています。AppID を知っていても第三者が攻撃できない点を確認できます。