研究作業報告【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 デバッグ手法

　様々な要素が絡み合った 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マップサービスの構築のための情報収集に取り組むこととする。

研究作業報告【10月3日(水)】

≪取り組んだこと≫
〇開発環境・サンプルプログラムの作成

　以前Yahooジオシティーズで作成した無料ホームページを使い、Google Maps APIプログラミング用のマップが表示されるように設定した。
　−GoogleでGoogle Maps API keyを取得
　−取得したkeyを当ホームページに使用
し、マップ上に緯度・経度の値が表示されるサンプルプログラムを作成しようとしたが、JavaScript関連のエラーが出たため、先の段階に進めなかった。


【参考文献】
Google Maps APIプログラミング：http://www.geekpage.jp/web/google-maps-api/
開発用HP：http://island.geocities.jp/thunder6032/



〇当研究の方向性について

　話し合った結果、現段階で仕様変更をするのは時期尚早。もし仕様変更するのであれば、今あるサービスではなく、そのサービスにはないものを追加するとか、そのサービスの課題を見つけ、解決案を考え開発するといったことをやる必要性が出てくる。今は、既存のマップサービスから緯度経度情報をどのように取得するかについて研究し、新たなマップサービスの構築、課題点を見つけることに論点を絞ることとする。

　上記の話は一先ず(´･ω･ﾉ)ﾉｵｲﾄｲﾃ

　とりあえず10月末までに、SMSのマップサービスの構築とまでは行かなくても、一つの区切りが付くところまで完成させること。




≪課題≫
　Google Maps APIを利用したサンプルプログラムについては、まずJavaScriptに関する知識を深めておく必要がある。ある程度知識を蓄えた後、Ajax・PHP・JSON・JavaScript等のプログラム言語を用い、プログラム作成に取り組むこととする。

研究作業報告【10月2日(火)】

≪取り組んだこと≫
〇既存のマップサービスから緯度経度情報を取得する方法についての考察

　（現時点では）緯度経度情報を取得する方法として、

　（Ⅰ）郵便番号や住所
　（Ⅱ）地図のリンク先URL
　（Ⅲ）地名、ランドマーク

の3つから出来ることが分かった。
　（Ⅰ）、（Ⅱ）は、実際にGoogle Mapsサービスを利用する際、調べたい位置情報を入力する必要があるが、（Ⅲ）はURLから緯度経度情報を取得するだけである。
　以上のことから、当研究に一番良さそうなのを選ぶとすると（Ⅱ）であると思う。インターネットで色々検索してみた結果、リンク先URLには緯度・経度の情報が含まれている。その情報を取得し、当マップサービスに適用する。しかし、リンク先URLにも欠点があり、リンクとなっている位置情報しか読み取れないため、当研究の水準を満たすことが出来ない。



〇緯度・経度情報を取得できる他のマップサービスの一覧

・Mapion
・Yahooマップ
・アルプス社の電子地図「プロアトラス」
・カシミール3D
・MapFan Web
・livedoor地図
・its-moGuide
・Goo地図
・ウォッちず
・ゼンリン社の電子地図
・Zi


【参考文献URL】
http://loca.ash.jp/htm/latitude.htm



〇マップサービスの仕様変更についての考察

　ソーシャルマップサービス(SMS)とは、地図をホワイトボードのようにユーザーが自由に使い書き込みができ、ユーザー同士で地図上の情報を共有できるサービス。


【機能】
1.ユーザーがマップ上に自由に記事の書き込み、編集、削除を行える機能
2.求人情報、不動産、お店の口コミ、旅行、思い出など9種類のカテゴリ
3.モバイル端末での目的地までのナビゲーション機能　（AUのEZナビウォークアプリ,DoCoMoのナビタイムアプリに対応） 4.友達同士で地図上のレイヤーを共有する機能
5.モバイル端末から位置情報を地図上に表示する機能
6.モバイル端末から近くにある情報をカテゴリ別に閲覧できる機能
7.各書き込み記事内容のトラックバック・RSS対応


　上記のソーシャルマップサービスのような地図情報を共有できるようなものを作ってみてはどうか。




≪課題≫
　既存のマップサービスから緯度経度情報を取得する方法を調査するとともに、他マップサービスの緯度経度情報の取得の仕方を調べる。