jQueryMobileで複数のプラットフォームに対応する


Webにアクセスできるモバイル端末の登場により、プログラマが対応しなければならないプラットフォームが大量に増えた。個々のモバイルOS向けにネイティブアプリを開発するのは、コスト的にも無理だといわれている。

モバイル端末の性能と機能を最大限に引き出すためには、そのプラットフォーム用の開発キットを使ってネイティブアプリを開発するのが良い。

一方、性能要件が緩く、開発期間が限られ、複数のプラットフォームに対応するときには、通常のWeb開発と同じようにJavaScript,HTML,CSSを使ってネイティブアプリ並みのWebアプリを作るのが良い。

jQueryはもっともポピュラーなJavaScriptライブラリといわれている。jQuery上に構築されたjQueryMobileは、主要なモバイル端末で共通にふるまうユーザーインターフェースを提供している。

jQueryMobileは、各プラットフォームのネイティブブラウザ上で、CSSとJavaScriptの完全なサポートを目指している。jQueryMobileは、HTML5のdata-属性を活用して、ページ要素の挙動や外観を変更している。HTML5のdata-属性を使うと、任意のデータをDOM要素に追加することができる。

モバイル向けのユーザーインターフェース要素に加え、jQueryMobileは次のような機能を提供している。

・モバイル風のページ遷移

・tap,swipe,orientationイベント

・アクセシビリティ機能

・デバイスの方向や画面サイズに適応したレイアウト

・テーマ設定フレームワーク

・AJAXによるページ読み込みと履歴管理

 


JavaScriptの機能で使わないほうが良いもの


現在、すべてのブラウザで利用できる言語はJavaScriptのみとされている。JavaScriptは軽量で表現力豊かな優れた特徴がある一方、多くの設計ミスを抱えている。バグを予防するために、JavaScriptの機能で使わないほうが良いものをあげると、次のようになる。

1: ==

2: !=

3: with

4: eval

5: continue

6: breakなしのswitch

7: ブロックなしのif

8: ブロックなしのwhile

9: ブロックなしのdo

10: ブロックなしのfor

11: ++

12: —

13: ビット演算子

14: function省略記法

15: 変数型のラッパーオブジェクト

16: new

17: void

JavaScriptの構文チェックツールとして知られているJSLintは、ソースコードをスキャンして問題点を発見し、問題の内容や位置を出力する。JSLintは、すべての変数と関数は予め定義されているものと仮定している。


グローバル変数に依存しているJavaScript


JavaScriptの最大の欠点は、グローバル変数に依存していることだと言われている。グローバル変数には、すべてのスコープからアクセスできるため、グローバル変数に依存しているプログラムは、挙動が不安定になってしまう。

グローバル変数に依存しているプログラムでは、プログラムからサブルーチンを呼び出し実行することを困難にしてしまう。複数のサブルーチンが同じグローバル変数を共有している場合、発見するのが難しいバグになってしまう。

グローバル変数は多くの言語で利用できるが、JavaScriptの問題は、グローバル変数を使わなければプログラムが書けないことにある。JavaScriptでグローバル変数を定義する方法は次の3つになる。

1: var count = 0;

2: window.count = 0;

3: count = 0;

1の方法は、var文を関数の外に記述する。2の方法は、グローバルオブジェクトに直接プロパティを追加する。3の方法は、変数名を記述する。

定義し忘れた変数をグローバル変数として扱うというJavaScriptの仕様では、発見するのが難しいバグを作り出してしまう危険がある。

Cに由来する言語では、ブロック(中括弧で囲まれた処理ブロック)はスコープを生じるため、ブロック内で定義された変数には、そのブロック外からはアクセスできない。JavaScriptの場合、ブロックのシンタックスは有効にもかかわらず、スコープは無効になる。このように、JavaScriptのブロック内で定義された変数には、ブロックの外側からでもアクセスできる。通常、変数は最初に利用されるタイミングで定義するのが良いが、JavaScriptの場合は、すべての変数を関数の先頭で定義するほうが良い。

 


ブラウザで3Dグラフィックスを表示させるThree.js


Three.jsはWebGLをラップし、扱いやすくしたJavascriptライブラリとして知られている。WebGLは、ウェブブラウザで3Dグラフィックスを表示させるための標準仕様で、実装はJavaScriptとネイティブOpenGLからなる。

対応ブラウザは次のようになる。

[PC]
Edge
Google Chrome 8 以降
Internet Explorer 11 以降
Mozilla Firefox 4 以降
Opera 12 以降
Safari 5.1 以降
[モバイル]
Android ブラウザ – Android 5.0 以降
BlackBerry 10
Edge
Firefox for Mobile
Google Chrome for Android 25
Internet Explorer Mobile 11
Opera Mobile 12 (Android のみ)
Safari 8 – iOS 8 以降
Tizen 1.0

three_js_demo


Windowオブジェクトのdocumentプロパティ


Windowオブジェクトには、クライアントサイドJavaScriptのすべてのAPIのプロパティ、メソッド、コンストラクタが定義されている。例えば、locationプロパティは、ウィンドウに現在表示されているURLを表すLocationオブジェクトを参照する。このlocationプロパティを使って、新しいURLを表示させることもできる。また、alert()メソッドはダイアログボックスにメッセージを表示する。

Windowオブジェクトのプロパティの中でも、documentプロパティは良く使われている。このdocumentプロパティは、ウィンドウに表示されているコンテンツを表すDocumentオブジェクトを参照する。

DocumentオブジェクトのgetElementById()メソッドは、id属性値を使って、ドキュメント要素(HTMLタグ内のすべてのコンテンツ)を検索した結果をElementオブジェクトとして返す。

Elementオブジェクトには、styleプロパティとclassNameプロパティがあり、これらを使ってスクリプトからドキュメント要素のCSSスタイルを指定したり、要素に適用するCSSクラス名を変更できる。

Window、Document、Elementオブジェクトに定義されている、イベントハンドラプロパティを使うことにより、イベントが発生したときに関数を呼び出せるようになる。イベントハンドラの中でも、Windowオブジェクトのonloadハンドラが良く使われている。通常、JavaScriptコードは、onloadイベントハンドラに記述され、ウィンドウに表示されるドキュメントのコンテンツが操作可能になるとonloadハンドラが呼び出される。クライアントサイドJavaScriptでは、イベントハンドラを頻繁に利用するため、入れ子型の関数がよく使われている。

 


AjaxフレームワークとしてのjQuery


通常のWebアプリケーションでは、クライアントからのリクエストを受け取ったサーバが処理結果をクライアントへ送り、Webページを再表示していた。

Ajaxは、XMLHttpRequestを使ったHTTP通信の結果に対応して、ページの一部を書き換えている(ダイナミックHTMLを使用)。例えば、商品検索でユーザがキー入力している最中に、検索を行い結果を表示していく例もある。

Ajaxでは、各ブラウザのDHTMLの違いをコードで吸収する必要がある。また、動的にページの一部が書き換えられるため、デザインとコードを簡単に分離できないという問題点もある。

AjaxフレームワークとしてjQueryを利用することで、各ブラウザのDHTMLの違いを意識する必要はなくなり、デザインとコードの分離も可能になるとされている。

jQueryのAjaxユーティリティには、1つの高レベルメソッドと4つの高レベル関数が定義されている。

load()メソッド:引数としてURLをload()メソッドに渡せば、URLのコンテンツがロードされ、既存のコンテンツに上書きされる。load()メソッドは通常HTTP GETリクエストを送信するが、データオブジェクトを引数にした場合は、POSTリクエストを送信する。

getScript()関数:1番目の引数に指定されたURLからJavaScriptコードをロードし実行したあと、2番目の引数として指定されているコールバック関数を1度だけ呼び出す。

getJSON()関数:1番目の引数に指定されたURLからJSONデータをロードし、2番目の引数として指定されているコールバック関数の1番目の引数にロードしたJSONデータを設定する。

get()関数:GETリクエストで1番目の引数に指定されたURLからコンテンツを取得したあと、2番目の引数として指定されているコールバック関数に取得したコンテンツを渡す。

post()関数:POSTリクエストで1番目の引数に指定されたURLからコンテンツを取得したあと、2番目の引数として指定されているコールバック関数に取得したコンテンツを渡す。