Transcript JavaScript&Ajax入門（PowerPoint）

JavaScript & Ajax入門
2008年1月25日（金）
アル・デザインワークス 新出純壱
自己紹介
•
•
•
•
•
•
•
•
プログラマーです。
けっこういろんな言語やってます。
個人事業やってます。
ウェブ制作者向けのパッケージソフト制作。
納期が無いのでラクです。
昔は東京とか福井で転々とSEやってました。
この中に、元上司とか元同僚がいます。
だれでしょう？
プログラマーの皆さんに
伝えたいこと
• プログラムに使われるな、プログラム
を使え
• プログラムは手段
• それで何をするかが重要
• スキルだけでなく「考え方」を学べ
セミナーの流れ
• 前半：背景などの説明
• 後半：実践（基本→Ajax）
• コードがたくさん登場しますが、全部
理解する必要はありません
• 考え方だけ掴むようにして下さい
• コードやURLは資料に印刷してあります
まずは簡単におさらい
• JavaScriptって何？
プログラム言語の一つです
• プログラム言語＝何かを自動的に操作
する為の命令体系
• 何か＝ここでは「ブラウザ」
• ブラウザ（の表示内容）を操作する為
の言語
• ※それ以外でも使われます
ほとんどのブラウザ上で
動作します
•
•
•
•
Internet Explorer
Firefox
Opera
Safari
様々な環境で動作します
•
•
•
•
•
Windows
Mac
Linux
iPhone/iPod touch
Wii
ブラウザ以外でも活躍します
•
•
•
•
Adobe AIR
Yahoo ウィジェット
Silverlight
Windows Script
つまり・・・
• ほとんどのOS上で動作し、
• インストール不要でブラウザ内で動き、
• 最近ではデスクトップアプリも作れる。
•=Javascriptは最強言語
Ajax?
• Asynchronous Javascript and XML
• （非同期なJavascriptとXML）
• JSを使って非同期に処理を行う
• 「XML」はデータ形式なのでさほど重要では
ない
（これがCSVだろうが本質は変わらない）
• 「非同期」の部分が重要
• 非同期？
非同期とは・・・
• サーバーへのリクエストの間もユー
ザーを待たせずに次の操作ができるこ
と
• ページ切替なしに、サーバから新しい
データを取ってくること
ユーザーを待たせないことが
重要
• 「この世で最も貴重なのは時間だから」
•
•
•
•
お金やモノは、持っている人は持っている
時間は誰にも等しい速さで消えさっていく
お金やモノをもっている人ほど時間を重要視
人は、時間の節約に喜んでお金を払う
Google幹部の人も言ってた
• 「我々の目標は、ユーザーの滞在時間
をゼロにすることだ」
• お客様をお待たせするのはもうやめま
しょう
Ajaxの広義の意味
• JavaScriptのパワーを最大限に生かすこと。
• 見栄えの向上
（アニメーションで注意をひきつける）
• 操作性の向上
（タブ、ツリービュー、スライダー等）
• 即時性の向上
（データ送信前チェック、事前読み込み）
実例を見てみよう
•
•
•
•
gucci
symbaloo
Amazon.com Loose Diamonds
Ajaxで作られたOS「StartForce」
まるでデスクトップアプリ
• 「クライアントへのインストールが不要なク
ライアント／サーバ型アプリケーション」
• プログラマーの皆様へ
既存のデスクトップアプリをウェブで置き換える動
きがさらに加速する
• ウェブデザイナーの皆様へ
「ネット上のチラシ」ではなく「アプリケーショ
ン」という捉え方がさらに加速する
その中心となる技術が…
• JavaScript（Ajax）です
• ここで第一部終了です
• ここからは、実際のコードをご紹介し
ていきます
第二部 実践編
• 細かい言語仕様は説明しません
• 「よくあるパターン」を３つ伝授します
• 技1. 要素の状態を変更する
• 技2. 要素が○されたら△する（イベント処
理）
• 技3. 一定間隔で△する（アニメーション）
• 基本、全てはこの技の組み合わせです
技1. 要素の状態を変更する
• 1) 要素（タグ）にid属性を付ける
<div id="box1">BOX</div>
• 2) 要素をidで取ってきて変数に入れる。
var box1 =
document.getElementById( 'box1' );
• 3) 変数経由で設定値を変更する。
box1.style.backgroundColor = 'red';
実際にやってみましょう(1)
• 要素に背景色を付ける
• 要素に文字列を表示する
技2. 要素が○されたら△する
（イベント処理）
• 例えば・・・
• ボタンがクリックされたらメッセージを表示する
• 画像がロードされたら表示する（最初は非表示にす
る）
• ○を「イベント」と言う。
onclick, onload
• △を「イベントハンドラ」と言う。
通常は関数で定義する
実際にやってみましょう(2)
• ボタンがクリックされたら処理を行う
技3. 一定間隔で△する
（アニメーション）
• 主にアニメーション処理に使う
• 例）0.1秒置きに画像のサイズを大きく
する→ズーム
• setInterval( イベントハンドラ, 100 );
100[ms]毎にイベントハンドラを実行
実際にやってみましょう(3)
• 画像をズームするアニメーション
• 使用する画像はここから取ってきまし
た
flickr explore interesting 7days
第二部終了
• JavaScriptで複雑そうな処理をしてい
ても、基本はこれらの組み合わせ
1) 要素（タグ）の状態を変える
2) イベントに応じて何かする
3) 定期的に（タイマー）実行
第三部
•
•
•
•
•
Ajaxライブラリの紹介
Ajaxライブラリを使った実践
非同期通信もやります！
Yahoo!Pipesも使ってみます！
時間、間に合うかな！？
Ajaxライブラリ
• 複雑なことをしなくても凄いことができる。
• ブラウザ間の互換性も吸収されている。
• 大きく分けて・・
・基本系（Ajax通信や便利関数）
・エフェクト系（アニメーション等）
・GUI部品系（タブ、スライダ、カレンダー…）
などがある。
膨大な数のライブラリがある
• あるＳＥのつぶやき：Ajaxライブラリ
まとめ
これ使っとけば間違いない
• 基本系＋エフェクト系＋GUI部品系
• prototype.js+script.aculo.us+GUI部品系
• jQuery (+GUI部品系)
※jQuery UIは、まだ整備中の段階
• dojo
• adobe spry
※spryのGUI部品はそれほど多くない
続き：GUI部品系
• Yahoo! UI Library（ウェブデザイナ向
き）
• Ext（プログラマ向き）
• この中でも今日はjQueryをご紹介
jQuery
• 基本系＋エフェクト系少し＋GUI部品
少し＝お得パック
• ウェブデザイナーでも扱える手軽さ
• 独特のメソッド・チェーン記述による
奥深さ
• http://jquery.com/
実際にやってみましょう(1)
• div要素に背景色をつけたり、
• クリックしたり、
• アニメーションさせたり
実際にやってみましょう(2)
• テーブルに縞々模様をつける
最後はAjax通信です
• サンプルコードの前に、Ajax通信の基
礎と、JSON/JSONPについてお話しま
す
Ajax通信の基本形
// データ取得完了後に実行する処理
function done( data )
{
// dataにサーバから取得した情報が入る
}
// Ajax通信でデータを取得開始
ajax.load( 'data.cgi?id=5', done );
取ってくるデータがXML
<person>
<first name>junichi</firstname>
<lastname>shinde</lastname>
</person>
var elems =
data.getElementsByTagName( 'firstname' );
var firstname = elems[0].firstChild.data;
// "junichi"と表示される
alert( firstname );
JSONというデータ形式
var person =
{
firstname : "junichi",
lastname : "shinde"
};
// "junichi"と表示される
alert( person.firstname );
Ajaxで読み込むデータを
JSONにしよう
{
firstname : "junichi",
lastname : "shinde"
}
// JSとして実行すると、オブジェクトに変換される
data = eval( '(' + data + ')' );
// "junichi"と表示される
alert( data.firstname );
関数も定義できる
{
firstname : "junichi",
lastname : "shinde",
getFullName : function()
{
return this.firstname + ' ' + this.lastname;
}
}
JSONを使うとデータの取得が
ラクチン
• でも、それだけじゃないもっと凄い利
用法がある。
クロスドメイン通信
// これはできない。
ajax.load(
'http://www.google.com/xxx.cgi',
handler
)
・このページが存在するドメイン外とは通信不可
・同一ドメインに仲介用のCGIを置いて対処
scriptタグの特性
<script src="http://www.google.com/xxx.js" />
• ドメイン外のjsを読み込んで実行できる。
• これってつまり、ドメイン外と通信し
てるんじゃ？
• scriptタグを使ってクロスドメイン通信
しよう！
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" />
JSONP
xxx.cgi?callback=関数名
→「関数名( JSON形式のデータ );」を返す
<script type="text/javascript">
function done( data )
{
// dataの処理
}
</script>
<script
src="http://www.google.com/xxx.cgi?callback=done" />
将来の話
• 数年以内に、Ajaxでもクロスドメイン
が可能になる
• しかし当面は古いブラウザ対応で
JSONPが残る
分かりにくかったと思います
• Ajax通信は基本的に同一ドメインとし
か通信できない
• でもJSONPに対応したサーバとなら、
scriptタグを使って通信できる！
• これだけ覚えておいて下さい
実際にやってみましょう
• 最後の山場です！
• 同一サーバ上のテキストデータを読み
込む
• 別ドメインからJSONPでRSSを読み込
んで表示
実際にやってみましょう
• はてなブックマーク人気エントリー
http://b.hatena.ne.jp/hotentry
• Yahoo!Pipes
http://pipes.yahoo.com/pipes/
GUI部品系ライブラリ
• Ext と Yahoo! UIが本命？
Ext
• Ext JS 2.0
http://extjs.com/
• APIドキュメント自体がExtのデモ
http://extjs.com/deploy/dev/docs/
• メッセージボックス表示処理を確認
jQuery UI
• これが最後のスライドです
• Extで怖気づいた方の為に、jQuery UI
の簡単さをご紹介
http://jquery.com/
•
•
•
•
タブメニュー
スライダー
アコーディオン
ダイアログ、etc...
正しいscriptタグの書き方を
教えて下さい
HTML
<script type="text/javascript">
<!-ここにコード
//-->
</script>
XHTML
<script type="text/javascript">
//<![CDATA[
ここにコード
//]]>
</script>
script中にタグが出現する
場合
・XHTMLの仕様上はOK。
・HTML4の場合は以下のように。
div.innerHTML = '<span>あいう</span>';
この「</」がNG。scriptタグの終了とみなされる
div.innerHTML = '<span>あいう<¥/span>';
div.innerHTML = '<span>あいう<' + '/span>';
外部JavaScriptの場合は問題なし。
SEOとアクセシビリティ
• JavaScriptで生成したコンテンツはク
ロールされない。
• スクリーンリーダーも読みあげてくれ
ない。
• display:noneの要素もクロールされに
くい。
• 操作性とのトレードオフ。
scriptはいつ実行される？
(1) bodyタグ内のscriptに直書き
<body>
<要素1 />
<script type="text/javascript">
dosomething();
</script>
<要素2 />
</body>
・要素1が読み込まれた後に実行。
・実行が終わってから要素2が読み込まれる。
・ページ表示が遅くなるので極力使わないこと。
scriptはいつ実行される？
(2) headに書いてbody.onloadで実行
<head>
<script type="text/javascript">
function dosomething(){
処理 }
// ここに body.onload = dosomething とは書けない。
</script>
</head>
<body onload="dosomething()">
<要素1 />
<要素2 />
</body>
• 全ての要素が読み込まれた後に実行。
• しかし、画像などのファイルも全て読むまで実行されない。
• ユーザーを待たせる事になる。
scriptはいつ実行される？
• HTML情報「だけ」が全て読み込まれた時点
で実行したいのだが・・・
•
•
•
•
•
DOMContentLoadedイベントがある。
IEとSafariは実装していない。
かなり無理やりな方法で実現することは可能。
でも、自分で作ってられない。
→Ajaxライブラリ
scriptはいつ実行される？
(4) jQueryの場合
$(document).ready()が全部やってくれる！
<head>
<script type="text/javascript">
$(document).ready( イベントハンドラ );
</script>
</head>
・他のAjaxライブラリにも同様の機能がある