ファイル構成

このページ以降では、ソースコードの詳細を説明します。

Hello Kii モバイルアプリは以下のソースコードから構成されています。

• index.html

  メインのページとなる HTML ファイルです。

  画面構成の定義と、関連するファイルの読み込みを行っています。Single Page Application の実装方法に基づいて、このページ内のデータを書き換えることによって画面遷移や画面更新を行います。Hello Kii では、簡易的に、style 属性の display プロパティの設定によって画面切り替えを実現しているため、すべての画面のコンテンツがこのファイルに含まれます。

• KiiSDK.min.js

  Kii Cloud SDK です。Web アプリ内で Kii Cloud SDK を使用するには、SDK の JS ファイルをダウンロードし、HTML ページと同時に参照できる状態にする必要があります。

  ここでは、開発者ポータルからダウンロードした SDK をそのまま添付しています。

• login-page-callback.js および list-page-callback.js

  Hello Kii の機能を実装した JavaScript のソースです。それぞれ、ログイン画面とデータ一覧画面の機能に相当します。

  JavaScript SDK では、Kii Cloud の呼び出しをコールバックと Promise という 2 通りの方法で実現しており、開発時はどちらか一方の方式を選択できます。Hello Kii では、両方の実装方法を示すため、同じ機能を実現した 2 通りの JS ファイルを用意しています。Hello Kii のダウンロード時には、コールバック版を参照するように index.html ファイルに設定されています。

  コールバックと Promise の違いについては、Promise の利用 で説明します。

• login-page-promise.js および list-page-promise.js

  JavaScript のソースの Promise 版です。Hello Kii をダウンロードした状態ではどこからも参照されていません。

  コールバックでの実装方法の後で Promise の利用について説明しますので、チュートリアルの開始時点ではそのままにしておいてください。

• hellokii.css

  index.html ファイルから参照される CSS ファイルです。Web アプリを開発する際は、通常の HTML サイトと同様にスタイルシートを登録できます。

  Hello Kii では、画面のデザインのみが記述されているため、説明は省略します。CSS の実装方法を習得済みであれば、特に解析する必要もありません。

次は...

index.html ファイルの内容について説明します。

index.html の実装 に移動してください。