JavaScript & Ajax 入門

1. JavaScript & Ajax入門 2008年1月25日（金） 　アル・デザインワークス 新出純壱

2. 自己紹介 • プログラマーです。 • けっこういろんな言語やってます。 • 個人事業やってます。 • ウェブ制作者向けのパッケージソフト制作。 • 納期が無いのでラクです。 • 昔は東京とか福井で転々とSEやってました。 • この中に、元上司とか元同僚がいます。 • だれでしょう？

3. プログラマーの皆さんに伝えたいこと • プログラムに使われるな、プログラムを使え • プログラムは手段 • それで何をするかが重要 • スキルだけでなく「考え方」を学べ

4. セミナーの流れ • 前半：背景などの説明 • 後半：実践（基本→Ajax） • コードがたくさん登場しますが、全部理解する必要はありません • 考え方だけ掴むようにして下さい • コードやURLは資料に印刷してあります

5. まずは簡単におさらい • JavaScriptって何？

6. プログラム言語の一つです • プログラム言語＝何かを自動的に操作する為の命令体系 • 何か＝ここでは「ブラウザ」 • ブラウザ（の表示内容）を操作する為の言語 • ※それ以外でも使われます

7. ほとんどのブラウザ上で動作します • Internet Explorer • Firefox • Opera • Safari

8. 様々な環境で動作します • Windows • Mac • Linux • iPhone/iPod touch • Wii

9. ブラウザ以外でも活躍します • Adobe AIR • Yahoo ウィジェット • Silverlight • Windows Script

10. つまり・・・ • ほとんどのOS上で動作し、 • インストール不要でブラウザ内で動き、 • 最近ではデスクトップアプリも作れる。 • =Javascriptは最強言語

11. Ajax? • Asynchronous Javascript and XML • 　（非同期なJavascriptとXML） • JSを使って非同期に処理を行う • 「XML」はデータ形式なのでさほど重要ではない（これがCSVだろうが本質は変わらない） • 「非同期」の部分が重要 • 非同期？

12. 非同期とは・・・ • サーバーへのリクエストの間もユーザーを待たせずに次の操作ができること • ページ切替なしに、サーバから新しいデータを取ってくること

13. ユーザーを待たせないことが重要 • 「この世で最も貴重なのは時間だから」 • お金やモノは、持っている人は持っている • 時間は誰にも等しい速さで消えさっていく • お金やモノをもっている人ほど時間を重要視 • 人は、時間の節約に喜んでお金を払う

14. Google幹部の人も言ってた • 「我々の目標は、ユーザーの滞在時間をゼロにすることだ」 • お客様をお待たせするのはもうやめましょう

15. Ajaxの広義の意味 • JavaScriptのパワーを最大限に生かすこと。 • 見栄えの向上 　（アニメーションで注意をひきつける） • 操作性の向上 　（タブ、ツリービュー、スライダー等） • 即時性の向上 　（データ送信前チェック、事前読み込み）

16. 実例を見てみよう • gucci • symbaloo • Amazon.com Loose Diamonds • Ajaxで作られたOS「StartForce」

17. まるでデスクトップアプリ • 「クライアントへのインストールが不要なクライアント／サーバ型アプリケーション」 • プログラマーの皆様へ 既存のデスクトップアプリをウェブで置き換える動きがさらに加速する • ウェブデザイナーの皆様へ 「ネット上のチラシ」ではなく「アプリケーション」という捉え方がさらに加速する

18. その中心となる技術が… • JavaScript（Ajax）です • ここで第一部終了です • ここからは、実際のコードをご紹介していきます

19. 第二部　実践編 • 細かい言語仕様は説明しません • 「よくあるパターン」を３つ伝授します • 技1. 要素の状態を変更する • 技2. 要素が○されたら△する（イベント処理） • 技3. 一定間隔で△する（アニメーション） • 基本、全てはこの技の組み合わせです

20. 技1. 要素の状態を変更する • 1) 要素（タグ）にid属性を付ける 　<div id="box1">BOX</div> • 2) 要素をidで取ってきて変数に入れる。 var box1 = document.getElementById( 'box1' ); • 3) 変数経由で設定値を変更する。 box1.style.backgroundColor = 'red';

21. 実際にやってみましょう(1) • 要素に背景色を付ける • 要素に文字列を表示する

22. 技2. 要素が○されたら△する（イベント処理） • 例えば・・・ • ボタンがクリックされたらメッセージを表示する • 画像がロードされたら表示する（最初は非表示にする） • ○を「イベント」と言う。onclick, onload • △を「イベントハンドラ」と言う。通常は関数で定義する

23. 実際にやってみましょう(2) • ボタンがクリックされたら処理を行う

24. 技3. 一定間隔で△する（アニメーション） • 主にアニメーション処理に使う • 例）0.1秒置きに画像のサイズを大きくする→ズーム • setInterval( イベントハンドラ, 100 ); 100[ms]毎にイベントハンドラを実行

25. 実際にやってみましょう(3) • 画像をズームするアニメーション • 使用する画像はここから取ってきました flickr explore interesting 7days

26. 第二部終了 • JavaScriptで複雑そうな処理をしていても、基本はこれらの組み合わせ 1) 要素（タグ）の状態を変える 2) イベントに応じて何かする 3) 定期的に（タイマー）実行

27. 第三部 • Ajaxライブラリの紹介 • Ajaxライブラリを使った実践 • 非同期通信もやります！ • Yahoo!Pipesも使ってみます！ • 時間、間に合うかな！？

28. Ajaxライブラリ • 複雑なことをしなくても凄いことができる。 • ブラウザ間の互換性も吸収されている。 • 大きく分けて・・ 　・基本系（Ajax通信や便利関数） 　・エフェクト系（アニメーション等） 　・GUI部品系（タブ、スライダ、カレンダー…） 　などがある。

29. 膨大な数のライブラリがある • あるＳＥのつぶやき：Ajaxライブラリまとめ

30. これ使っとけば間違いない • 基本系＋エフェクト系＋GUI部品系 • prototype.js+script.aculo.us+GUI部品系 • jQuery (+GUI部品系) ※jQuery UIは、まだ整備中の段階 • dojo • adobe spry ※spryのGUI部品はそれほど多くない

31. 続き：GUI部品系 • Yahoo! UI Library（ウェブデザイナ向き） • Ext（プログラマ向き） • この中でも今日はjQueryをご紹介

32. jQuery • 基本系＋エフェクト系少し＋GUI部品少し＝お得パック • ウェブデザイナーでも扱える手軽さ • 独特のメソッド・チェーン記述による奥深さ • http://jquery.com/

33. 実際にやってみましょう(1) • div要素に背景色をつけたり、 • クリックしたり、 • アニメーションさせたり

34. 実際にやってみましょう(2) • テーブルに縞々模様をつける

35. 最後はAjax通信です • サンプルコードの前に、Ajax通信の基礎と、JSON/JSONPについてお話します

36. Ajax通信の基本形 // データ取得完了後に実行する処理 function done( data ) { // dataにサーバから取得した情報が入る } // Ajax通信でデータを取得開始 ajax.load( 'data.cgi?id=5', done );

37. 取ってくるデータがXML <person> <first name>junichi</firstname> <lastname>shinde</lastname> </person> var elems = data.getElementsByTagName( 'firstname' ); var firstname = elems[0].firstChild.data; // "junichi"と表示される alert( firstname );

38. JSONというデータ形式 var person = { firstname : "junichi", lastname : "shinde" }; // "junichi"と表示される alert( person.firstname );

39. Ajaxで読み込むデータをJSONにしよう { firstname : "junichi", lastname : "shinde" } // JSとして実行すると、オブジェクトに変換される data = eval( '(' + data + ')' ); // "junichi"と表示される alert( data.firstname );

40. 関数も定義できる { firstname : "junichi", lastname : "shinde", getFullName : function() { return this.firstname + ' ' + this.lastname; } }

41. JSONを使うとデータの取得がラクチン • でも、それだけじゃないもっと凄い利用法がある。

42. クロスドメイン通信 // これはできない。 ajax.load( 'http://www.google.com/xxx.cgi', handler ) ・このページが存在するドメイン外とは通信不可 ・同一ドメインに仲介用のCGIを置いて対処

43. scriptタグの特性 <script src="http://www.google.com/xxx.js" /> • ドメイン外のjsを読み込んで実行できる。 • これってつまり、ドメイン外と通信してるんじゃ？ • scriptタグを使ってクロスドメイン通信しよう！

44. JSONを使ってこんな風に xxx.jsの中身： done( { firstname : "junichi", lastname : "shinde } ); <script type="text/javascript"> function done( data ) { alert( data.firstname ); // "junichi"と表示される } </script> <script src="http://www.google.com/xxx.js" />

45. JSONP xxx.cgi?callback=関数名 →「関数名( JSON形式のデータ );」を返す <script type="text/javascript"> function done( data ) { // dataの処理 } </script> <script src="http://www.google.com/xxx.cgi?callback=done" />

46. 将来の話 • 数年以内に、Ajaxでもクロスドメインが可能になる • しかし当面は古いブラウザ対応でJSONPが残る

47. 分かりにくかったと思います • Ajax通信は基本的に同一ドメインとしか通信できない • でもJSONPに対応したサーバとなら、scriptタグを使って通信できる！ • これだけ覚えておいて下さい

48. 実際にやってみましょう • 最後の山場です！ • 同一サーバ上のテキストデータを読み込む • 別ドメインからJSONPでRSSを読み込んで表示

49. 実際にやってみましょう • はてなブックマーク人気エントリー http://b.hatena.ne.jp/hotentry • Yahoo!Pipeshttp://pipes.yahoo.com/pipes/

50. GUI部品系ライブラリ • Ext と Yahoo! UIが本命？