JavaScript
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,905
On Slideshare
1,902
From Embeds
3
Number of Embeds
1

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 3

http://www.slideshare.net 3

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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 」   
  • 17. まるでデスクトップアプリ
    • 「クライアントへのインストールが不要なクライアント/サーバ型アプリケーション」
    • プログラマーの皆様へ
    •   既存のデスクトップアプリをウェブで置き換える動きがさらに加速する
    • ウェブデザイナーの皆様へ
    •   「ネット上のチラシ」ではなく「アプリケーション」という捉え方がさらに加速する
  • 18. その中心となる技術が…
    • JavaScript ( Ajax )です
    • ここで第一部終了です
    • ここからは、実際のコードをご紹介していきます
  • 19. 第二部 実践編
    • 細かい言語仕様は説明しません
    • 「よくあるパターン」を3つ伝授します
    • 技 1. 要素の状態を変更する
    • 技 2. 要素が○されたら△する(イベント処理)
    • 技 3. 一定間隔で△する(アニメーション)
    • 基本、全てはこの技の組み合わせです
  • 20. 技 1. 要素の状態を変更する
    • 1) 要素(タグ)に id 属性を付ける
    •   <div id=&quot;box1&quot;>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. 膨大な数のライブラリがある
    • あるSEのつぶやき: 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;
    • // &quot;junichi&quot; と表示される
    • alert( firstname );
  • 38. JSON というデータ形式
    • var person =
    • {
    • firstname : &quot;junichi&quot;,
    • lastname : &quot;shinde&quot;
    • };
    • // &quot;junichi&quot; と表示される
    • alert( person.firstname );
  • 39. Ajax で読み込むデータを JSON にしよう
    • {
    • firstname : &quot;junichi&quot;,
    • lastname : &quot;shinde&quot;
    • }
    • // JS として実行すると、オブジェクトに変換される
    • data = eval( '(' + data + ')' );
    • // &quot;junichi&quot; と表示される
    • alert( data.firstname );
  • 40. 関数も定義できる
    • {
    • firstname : &quot;junichi&quot;,
    • lastname : &quot;shinde&quot;,
    • getFullName : function()
    • {
    • return this.firstname + ' ' + this.lastname;
    • }
    • }
  • 41. JSON を使うとデータの取得がラクチン
    • でも、それだけじゃないもっと凄い利用法がある。
  • 42. クロスドメイン通信
    • // これはできない。
    • ajax.load(
    • 'http://www.google.com/xxx.cgi' ,
    • handler
    • )
    • ・このページが存在するドメイン外とは通信不可
    • ・同一ドメインに仲介用の CGI を置いて対処
  • 43. script タグの特性
    • <script src=&quot;http://www.google.com/xxx.js&quot; />
    • ドメイン外の js を読み込んで実行できる。
    • これってつまり、ドメイン外と通信してるんじゃ?
    • script タグを使ってクロスドメイン通信しよう!
  • 44. JSON を使ってこんな風に
    • xxx.js の中身:
    • done( { firstname : &quot;junichi&quot;,
    • lastname : &quot;shinde } );
    • <script type=&quot;text/javascript&quot;>
    • function done( data )
    • {
    • alert( data.firstname ); // &quot;junichi&quot; と表示される
    • }
    • </script>
    • <script src=&quot; http://www.google.com/xxx.js &quot; />
  • 45. JSONP
    • xxx.cgi?callback= 関数名
    • -> 「関数名 ( JSON 形式のデータ ); 」を返す
    • <script type=&quot;text/javascript&quot;>
    • function done( data )
    • {
    • // data の処理
    • }
    • </script>
    • <script src=&quot;http://www.google.com/xxx.cgi?callback=done&quot; />
  • 46. 将来の話
    • 数年以内に、 Ajax でもクロスドメインが可能になる
    • しかし当面は古いブラウザ対応で JSONP が残る
  • 47. 分かりにくかったと思います
    • Ajax 通信は基本的に同一ドメインとしか通信できない
    • でも JSONP に対応したサーバとなら、 script タグを使って通信できる!
    • これだけ覚えておいて下さい
  • 48. 実際にやってみましょう
    • 最後の山場です!
    • 同一サーバ上のテキストデータを読み込む
    • 別ドメインから JSONP で RSS を読み込んで表示
  • 49. 実際にやってみましょう
    • はてなブックマーク人気エントリー
    •   http://b.hatena.ne.jp/hotentry
    • Yahoo!Pipes http://pipes.yahoo.com/pipes/
  • 50. GUI 部品系ライブラリ
    • Ext と Yahoo! UI が本命?
  • 51. Ext
    • Ext JS 2.0 http://extjs.com/
    • API ドキュメント自体が Ext のデモ http://extjs.com/deploy/dev/docs/
    • メッセージボックス表示処理を確認
  • 52. jQuery UI
    • これが最後のスライドです
    • Ext で怖気づいた方の為に、 jQuery UI の簡単さをご紹介 http://jquery.com/
    • タブメニュー
    • スライダー
    • アコーディオン
    • ダイアログ、 etc...
  • 53. 正しい script タグの書き方を教えて下さい
    • HTML
    • <script type=&quot;text/javascript&quot;>
    • <!--
    • ここにコード
    • //-->
    • </script>
    • XHTML
    • <script type=&quot;text/javascript&quot;>
    • //<![CDATA[
    • ここにコード
    • //]]>
    • </script>
  • 54. script 中にタグが出現する 場合
    • ・ XHTML の仕様上は OK 。
    • ・ HTML4 の場合は以下のように。
    • div.innerHTML = '<span> あいう </span>';
    • この「 </ 」が NG 。 script タグの終了とみなされる
    • div.innerHTML = '<span> あいう </span>';
    • div.innerHTML = '<span> あいう <' + '/span>';
    • 外部 JavaScript の場合は問題なし。
  • 55. SEO とアクセシビリティ
    • JavaScript で生成したコンテンツはクロールされない。
    • スクリーンリーダーも読みあげてくれない。
    • display:none の要素もクロールされにくい。
    • 操作性とのトレードオフ。
  • 56. script はいつ実行される?
    • (1) body タグ内の script に直書き
    • <body>
    • < 要素 1 />
    • <script type=&quot;text/javascript&quot;>
    • dosomething();
    • </script>
    • < 要素 2 />
    • </body>
    • ・要素 1 が読み込まれた後に実行。
    • ・実行が終わってから要素 2 が読み込まれる。
    • ・ ページ表示が遅くなるので極力使わないこと 。
  • 57. script はいつ実行される?
    • (2) head に書いて body.onload で実行
    • <head>
    • <script type=&quot;text/javascript&quot;>
    • function dosomething(){ 処理 }
    • // ここに body.onload = dosomething とは書けない。
    • </script>
    • </head>
    • <body onload=&quot;dosomething()&quot;>
    • < 要素 1 />
    • < 要素 2 />
    • </body>
    • 全ての要素が読み込まれた後に実行。
    • しかし、画像などのファイルも全て読むまで実行されない。
    • ユーザーを待たせる事になる。
  • 58. script はいつ実行される?
    • HTML 情報「だけ」が全て読み込まれた時点で実行したいのだが・・・
    • DOMContentLoaded イベントがある。
    • IE と Safari は実装していない。
    • かなり無理やりな方法で実現することは可能。
    • でも、自分で作ってられない。
    • -> Ajax ライブラリ
  • 59. script はいつ実行される?
    • (4) jQuery の場合
    •   $(document).ready() が全部やってくれる!
    • <head>
    • <script type=&quot;text/javascript&quot;>
    • $(document).ready( イベントハンドラ );
    • </script>
    • </head>
    • ・他の Ajax ライブラリにも同様の機能がある