第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ブラウザーが固まっているように見えて、使い勝手が悪く、不安定なアプリケーションだと思われてしまいます。

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

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら