セミナーレポート：デジハリ「Ajaxマスター講座」開講記念 気になるAjaxライブラリ・連発デモライブ
デジハリの「Ajaxマスター講座」開講記念（という名の宣伝）セミナーがあったので参加してきました。雑誌「Source & Script」連動企画とのこと。
以下、内容を時系列で覚え書き。
[1] Ajaxとは
Asynchronous JavaScript + xml
<e-wordsより引用(抜粋)>
Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとxml形式のデータのやり取りを行なって処理を進めていく対話型Webアプリケーションの実装形態。★ポイント
- クライアント側はJavaScript
- 画面遷移と非同期でサーバとのHTTP通信
- 処理にWebページのリロードを伴わない
- 主にxmlのやりとり
[2] Ajaxを利用したサイト紹介
<資料より一部抜粋>
- Google Maps⇒移動/拡大/縮小に画面遷移を伴わない地図サービス
- livedoor Reader⇒RSSリーダー
- ObjectGraph Dictionary⇒Google Suggest風英和辞書
- CALC5⇒グラフ描画機能付計算機
- Ajax IME⇒Webベースの日本語入力ツール
- Realtime validation using Ajax⇒フォームの入力内容をリアルタイムの検証
- わかやま風景.com⇒GoogleMaps+Duoblog風地域マップ
★ポイント
- 画面表示の裏側でデータのやり取りをしている
- 意外とxmlデータを用いていない
- JavaScriptはユーザが閲覧可能
- JavaScriptでは他サーバへのアクセスが不可能→サーバサイドのプログラムが必要
[3] Ajax技術の詳細
※雑誌「Source & Script」で紹介しているライブラリの解説
◎prototype.jp
⇒Ajaxライブラリのデファクトスタンダード。getElementByIdでの要素へのアクセスを関数化→$()
[TIPS]エンターキーを押しても画面遷移させない
<form ～～～ onSubmit="xxxx; return false;">
○script.aculo.us
⇒UI系。prototype.jsを使用
○Rico
⇒UI系
○Yahoo! UI Library
⇒UI系。Yahoo!が提供
○Adobe Spry
⇒xml読み込みも。Adobeが提供。記述方法が特殊で、smartyなどのテンプレートエンジンのようにHTMLに変数を埋め込む（JS的にそれってどうなの？）
○lightbox.js
⇒画像表示（最近流行ってきた）。prototype.jsを使用
○jQuery
⇒通信系？
[4] Ajax開発苦労話
○クロスブラウザ
－IEが手強い、Opera,Safariも
⇒prototype.jsでブラウザの差を吸収
－JSはOKだがAjaxがNGな古いブラウザもある
○ブラウザのキャッシュ
－POSTでデータ通信
－送信データに日付などのクエリを付加
○実際はxmlをほとんど使わない
⇒JSONを使用
JSのデータ形式
データ量が少なく、Ajaxと馴染みやすい
○SEO
－サービス上貴重な情報を扱うならAjaxではクロールされにくい
○ドメイン越え
－基本的にはJSではなくサーバサイドで行う
[5] Ajaxのこれから
○とりあえず現状はprototype.js
＜今後楽しみなライブラリ＞
・Mochikit
・Google Web Toolkit
－JAVAのコードからJSを書き出し
⇒もしかしたらJAVAが流行る？
○今後もJSでのドメイン越えはNG
⇒サーバサイドの技術は必要
○サーバサイドの言語は？
⇒システム系ならJAVA、Web系ならPHP
（mixi,はてなはPerl）
[6] プログラムの再利用と保護
★JSは公開されたプログラム
○守る
⇒圧縮と難読化
○攻める
⇒良サイトのソースを参照する
Google Code Search
[7] 質疑応答
Q:
デザイナとプログラマの切り分けについて。
UI(動き)の設計はデザイナの仕事だが敷居が高いのでは？
現状とプログラマから見た理想は？
個人的には、Adobe SpryだとMVCの分離が楽そうに見える。
A:
プログラマが全てやっているのが実情だが、
出来ればサーバからデータ(JSON)を投げたら、
クライアント側のAjax部分はデザイナに担当して欲しい。
⇒まずは、興味を持つところから始めて欲しい。
確かにデザイナ的にはAdobe Spryの方が楽かもしれないが、
プログラマとしてはソフトウェアメーカー提供のライブラリには抵抗あり。
