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

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

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」 Ajaxで作られたOS「StartForce」

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

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

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

20 技1. 要素の状態を変更する 1) 要素（タグ）にid属性を付ける BOX 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ライブラリ まとめあるＳＥのつぶやき：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 junichi shinde 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タグの特性 ドメイン外のjsを読み込んで実行できる。 これってつまり、ドメイン外と通信し てるんじゃ？ scriptタグを使ってクロスドメイン通信 しよう！

44 JSONを使ってこんな風に xxx.jsの中身： done( { firstname : "junichi", lastname : "shinde } ); function done( data ) { alert( data.firstname ); // "junichi"と表示される }

45 JSONP xxx.cgi?callback=関数名 →「関数名( JSON形式のデータ );」を返す function done( data ) { // dataの処理 }

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

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

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

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

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

51 Ext Ext JS 2.0 http://extjs.com/ http://extjs.com/ APIドキュメント自体がExtのデモ http://extjs.com/deploy/dev/docs/ http://extjs.com/deploy/dev/docs/ メッセージボックス表示処理を確認

52 jQuery UI これが最後のスライドです Extで怖気づいた方の為に、jQuery UI の簡単さをご紹介 http://jquery.com/ http://jquery.com/ タブメニュー スライダー アコーディオン ダイアログ、etc...

53 正しいscriptタグの書き方を 教えて下さい HTML <!-- ここにコード //--> XHTML //<![CDATA[ ここにコード //]]>

54 script中にタグが出現する 場合 ・XHTMLの仕様上はOK。 ・HTML4の場合は以下のように。 div.innerHTML = ' あいう '; この「</」がNG。scriptタグの終了とみなされる div.innerHTML = ' あいう '; 外部JavaScriptの場合は問題なし。

55 SEOとアクセシビリティ JavaScriptで生成したコンテンツはク ロールされない。 スクリーンリーダーも読みあげてくれ ない。 display:noneの要素もクロールされに くい。 操作性とのトレードオフ。

56 scriptはいつ実行される？ (1) bodyタグ内のscriptに直書き dosomething(); ・要素1が読み込まれた後に実行。 ・実行が終わってから要素2が読み込まれる。 ・ページ表示が遅くなるので極力使わないこと 。

57 scriptはいつ実行される？ (2) headに書いてbody.onloadで実行 function dosomething(){処理 } // ここに body.onload = dosomething とは書けない。 全ての要素が読み込まれた後に実行。 しかし、画像などのファイルも全て読むまで実行されない。 ユーザーを待たせる事になる。

58 scriptはいつ実行される？ HTML情報「だけ」が全て読み込まれた時点 で実行したいのだが・・・ DOMContentLoadedイベントがある。 IEとSafariは実装していない。 かなり無理やりな方法で実現することは可能。 でも、自分で作ってられない。 →Ajaxライブラリ

59 scriptはいつ実行される？ (4) jQueryの場合 $(document).ready()が全部やってくれる！ $(document).ready( イベントハンドラ ); ・他のAjaxライブラリにも同様の機能がある