第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ブラウザーが固まっているように見えて、使い勝手が悪く、不安定なアプリケーションだと思われてしまいます。
現実のアプリケーションでも、サーバーと通信するときなど、リクエストを送ってからレスポンス(結果)が返ってくるまで数秒以上かかることはしばしば起こります。