研究作業報告【10月5日(金)】
≪取り組んだこと≫
〇Ajaxのメリットとデメリット
【メリット】
〔HTML＋サーバーサイド(PHP、Perl、Javaなど)に対して〕
・ページ遷移なしで高速に画面を書き換えられる
・サーバー処理待ちをしない非同期リクエストが可能
・PHPやPerlなどのサーバー側処理を各PCへ分散できる
・受信するデータ量を減らせる
・リアルタイムなインタラクティブ性能が高くなる
〔Flashに対して〕
・ブラウザのデフォルトの標準インターフェースの中で動作する
・Ajaxは有料ソフトなしで開発できる
・プラグインの起動時間がなく、Macでもさくさく動作
【デメリット】
・クロスブラウザ化のノウハウが必要
・Ajaxを使えないブラウザ対策も必要
・JavaScript部分はオープンソースゆえに差別化が難しい
・HTTPクライアントの機能が限定されている
・セキュリティへの配慮が不可欠
・現在の処理状況についてのインフォメーションが必要
・リクエストを多発しすぎると逆にサーバー負荷が増えかねない
〇Ajax利用・応用に必要なスキル
Ajax を活用した Web アプリケーション開発には Java プログラマが現在身につけているであろう知識が有効であることは確かである。しかし、それだけではいくつかの要素が欠けている。特に現在の Ajax を取り巻く状況を考えると、 Webサーバ／クライアントとしてのプログラム開発と、 Ajax ならではのユーザインタフェースデザインの部分が同一の開発メンバーでなされる状況が多い。 Ajax の場合、大規模Webサイトの構築のように、デザイナーとプログラマの作業がきれいには分離できない。そこで、エンジニア、プログラマには、ユーザインタフェースに関するデザイン的要素のスキルも重要となってくる。
下記に Ajax に必要と思われるスキルセットを挙げておく。足りない部分、弱い部分があれば、順次補っていくことをお薦めする。
また、Webページの更新部分を更新された瞬間に背景を黄色で表示し、じょじょに薄く（背景色に）していくといった Yellow Fade Technique が Ajax では一般的になりつつある。また、Ajax の注意点である、データロード中、情報の更新中であることを示す AjaxLoad といった各種アイコンの利用も常套手段だ。これらの流行のユーザインタフェースをうまく取り入れていくのも重要なスキルのひとつである。
【Ajaxに必要なスキルセット】
・JavaScript（ECMA Script／Jscript）に関する広範囲で深い知識と、関連する JavaScript ライブラリを利用するための知識
・DHTML（DynamicHTML）に関する知識
・CSS（Cascading Style Sheets)
・CSS でコントロールできる様々な要素に関しての知識
・http（http status）
・サーバとブラウザ間における http通信、ステータスに関する詳しい知識
・XML（eXtensible Markup Language）
・非同期通信時に利用する XML データの設計技術、XMLを展開／解析する技術
・XML（eXtensible Markup Language）
・非同期通信時に利用する XML データの設計技術、XMLを展開／解析する技術
・DOM（Document Object Model）に関する知識
・JavaEE（Servlet／JSP／JSF）またはPHPまたは.NETなどサーバサイドの技術
・さらに Ajax 対応のサーバサイドライブラリの活用技術
・Web ユーザインタフェースデザインに関する知識
・Web ユーザインタフェースエフェクトに関する知識
・Web ユーザビリティ（使い易さ）に関する知識
・各種開発ツールとの親和性
Ajax 関連の開発ツールはまだまだ発展途上の段階である。強力な統合開発環境や、定番の開発ツールがまだ無い中で、様々なツールをうまく組み合わせて開発を進めていくのが得策だ。
〇Ajax 開発手順と、デバッグ手順
Ajax と一口に言っても、さまざまな性質を持った開発のタイプに分けられる。
Aタイプ: まずは Ajax ありき、Ajax 的サービスを作ってみるという段階、プロトタイピング
Bタイプ: 既存の Web アプリケーションをより使い易くする意味での Ajax 化
Cタイプ: 従来には無かった新しい発想でのユーザインタフェースを提供する意味での Ajax
Ajax の場合、従来型の状態遷移図やユーザインタフェース規定など書面や設計書にするのが難しいものばかりである。実際のところプログラム開発を進めながら、動作タイミングや、ユーザインタフェースの詳細を固めていく場合も多いであろう。それぞれ完成物の目的や、イメージを描きつつ、押さえるべきポイントを外さずに開発を進めていこう。
〇Ajax 的設計、開発における押さえるべきポイント
・Ajax の特徴である非同期通信におけるデータの構成と通信量の調整
・非同期通信のタイミング、回数と、Webページ操作感の調整
・JavaScript プログラムの実行スピード
・JavaScript プログラムのメンテナンス性
・何をサーバ側に任せ、何をクライアント側で操作することにするかの切り分け
・Model-View-Controller の役割分担
・各種ブラウザ依存の部分と、ブラウザに関係の無い骨格部分の把握
・ユーザが使って楽しい、分り易いユーザインタフェースの提供
・データ通信や、データの保存、各種操作におけるセキュリティの確保
様々な要素が絡み合った Ajax 的 Web アプリケーションの開発／テスト／デバッグは大変難しく、時間がかかる。現時点では有用で質の高い Ajax ライブラリを活用するのが最適解ではないかと考えられる（詳細は次回で紹介）。デバッグ手法には様々なアプローチがあれど、基本は細かなログを出して把握することから始まる。
・まずは何はなくともサーバー側のエラーログをチェック
・JavaScript の部分を .js に切り出して構文チェックし、おかしな部分を発見する
・Venkman JavaScript Debugger など JavaScript 専用のデバッガを活用
・debug.js など JavaScript 用デバッグプリントライブラリを活用
・URL入力域に 1行 JavaScript を入力して実行チェック
・Ajax デバッグに活用できるツール
〇XMLHttpRequest
一般的にAjaxで行われるHTTP通信は、「XMLHttpRequest」という規格を利用していて、現在の一般的なWebブラウザの大半で実装されている。
・XMLHttpRequestオブジェクトの送受信
XMLHttpRequestオブジェクトを作成してHTTPリクエストを発行し、サーバへ接続してデータやリクエストを送り、responseTextまたはresponseXMLプロパティで受信する流れとなっている。XMLHttpRequestオブジェクトの送受信については、実際にプログラムを組むときに研究することとする。
〇Google Maps APIについて
・Google Maps設置までの流れ
・Google Maps APIのサイトを開く
・設置したいサイトのAPIキーを申し込む
・APIキーとサンプルHTMLが表示される
・自分のサイトに設置してみる
・APIを使ってカスタマイズ開始
・Google Mapsの動作ブラウザと対処方法
Google Maps APIはすべてのブラウザに互換性があるわけではない。WindowsやMaxのIE5以前やNetscape4x以前などのブラウザでは動作しない。ページに配置したGoogle Mapsが、今あるブラウザのどれで動作するのかしないのかを一人で調べるのは大変な作業である。また、今後登場するブラウザについて監視し続けるのは、多くの人にとってほとんど実現不可能だろう。
このような場合に備えて、Google Mapsにはブラウザの互換性を調べてくれる「GBrowserIsCompatible()」という関数が用意され、メンテナンスされている。例として、下記のようにスクリプトを記述するだけで、ブラウザの種類に応じた自動分岐が可能となっている。
if(!GBrowserIsCompatible()){
//Google Mapsが動作しないブラウザ用の処理
} else {
//動作する場合の処理
}
〇JavaScriptについて
下記の参考文献に記載している「みんなのプログラミング無料講座 JavaScript」を読み、一度JavaScriptについて復習した。基本的なことしかやっていないが、プログラム的なことは実際にプログラミングをしてる際、必要に応じて行うこととする。
〇開発用HPに関する考察
Google Maps APIv2を利用したマップを表示する上で、注意しないといけないことがあると思われる。Google Maps APIを取得したときに表示されたサンプルソースをそのままHPに貼り付けると問題なく動作する。しかし、前バージョンのサンプルを使うと、JavaScriptエラーで「オブジェクトがありません」などと表示されてしまう。このことにより、Google Maps APIのバージョンにより、使える関数使えない関数があると思われる。
【参考文献】
高橋登史朗著、入門Ajax BEGINNER'S GUIDE：ASYNCHRONOUS JAVASCRIPT＋XML
相乗効果で得をする Ajax と Java の可能性：http://sdc.sun.co.jp/java/series/ajax/200605.html
みんなのプログラミング無料講座 JavaScript：http://www015.upp.so-net.ne.jp/heyjude/script01.html
≪課題≫
Google Maps APIv1とGoogle Maps APIv2の違いに関する調査が終わり次第、SMSマップサービスの構築のための情報収集に取り組むこととする。
