第12回からは「解説編」として、日報アプリに実装した要素を詳しく解説しています。

 「実践編」では、Webアプリケーションの構成に従い、以下の順で進めました。

  • 画面の構造を定義する(HTML)
  • 画面のレイアウトを定義する(CSS)
  • 画面の操作や、処理を定義する(JavaScript)

 「解説編」でも基本はこの構造に従って進めていますが、解説編の最後である今回はJavaScriptを使った画面の操作や、処理の定義です。日報アプリケーションでは、以下の要素技術を使用しました。

  • 基本的なJavaScriptの実装
  • Ajaxと非同期処理
  • CSS Animation
  • File API

 このうち、HTML5の開発を行う上で重要な基礎となるAjaxと非同期処理、およびHTML5の仕様の1つであるCSS Animationについてもう少し詳しく解説します。

非同期処理とAjax

 ほとんどのアプリケーションでは、サーバーへのデータの登録やサーバーからのデータの取得など、クライアントとサーバー間で通信してデータをやり取りする必要があります。また、HTML5のAPIのほとんどは非同期処理の形で実装されているため、HTML5を使ったWebアプリケーションを作る上では、非同期処理について理解をしておくことはとても重要です。ここでは、実装を見ながらその仕組みを解説していきます。

登録ボタンを押下してサーバーに日報を登録する
登録ボタンを押下してサーバーに日報を登録する
[画像のクリックで拡大表示]

 サーバーと通信する場合には、Ajaxを使用します。Ajax(= Asynchronous JavaScript + XML)はサーバーと非同期で通信を行う仕組みです。今回使っているjQueryやhifiveでもajaxというメソッドが用意され、それを通してサーバー通信を行っています。以下は、特定のURLにPOSTメソッドでJSONデータを送る例です。


var reportLogic = {
    /**
     * ロジック名
     *
     * @type String
     * @memberOf itpro.sample.report.logic.ReportLogic
     */
    __name: 'itpro.sample.report.logic.ReportLogic',

    register: function(reportData) {
        return h5.ajax(REGIST_URL, {
            type: 'post',
            data: JSON.stringify(reportData)
        });
    }
};

コード例:ajaxを使った登録メソッドの定義(index.js 5行目)

 このよう書くと、非同期でサーバーと通信を行うことができます。この、先ほどから出ている「非同期」という言葉ですが、JavaScript、特にサーバーと連携するアプリケーションやHTML5のAPIを使う場合、必要不可欠な概念です。

 Webブラウザーは基本的に、JavaScriptコードを実行するとき、コードを上から順に1行ずつ実行します。関数を呼び出すと、その関数の実行が終了するまで(return文によって呼び出し元の関数に戻ってくるまで)次の行には進みません。さらに、JavaScriptコード実行中は他の処理は待ち状態になります。

 したがって、処理に非常に時間がかかると、Webブラウザーはマウス操作もキー入力も受け付けず固まってしまいます。これでは、ユーザーから見ると頻繁にWebブラウザーが固まっているように見えて、使い勝手が悪く、不安定なアプリケーションだと思われてしまいます。

 現実のアプリケーションでも、サーバーと通信するときなど、リクエストを送ってからレスポンス(結果)が返ってくるまで数秒以上かかることはしばしば起こります。