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

Slides:



Advertisements
Similar presentations
JavaScript における DOM 操作 XML 読み込み Ajax( 動的 HTML 編集 ) 情報システム工学科ラシキアゼミ 3年 H 107072 田中直樹.
Advertisements

Integrated Personal Page C05823 森本万里子 C05829 西山礼恵 C05899 高木華子.
XML ゼミ 独習 XML ~ 第 6 章 XHTML~ 6.1 XHTML の概要 6.2 XHTML の構造 谷津 哲平.
Internet Explorer 障害解析 最初の一歩 - IE のトラブルを理解する -. 概要 Internet Explorer を使用中に発生するトラブルの 種類と、調査のための切り分け方法を紹介します! (以降は IE と略称で表記します) よくあるお問い合わせ Web ページの表示が白画面のまま完了しない.
Copyright © Ariel Networks, Inc. AJAX 勉強会 アリエル・ネットワーク株式会社.
1 安全性の高いセッション管理方 式 の Servlet への導入 東京工業大学 理学部 千葉研究室所属 99-2270-6 松沼 正浩.
© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます prototype.js と Perl で Ajax 株式会社はてな 伊藤 直也
1 PHP プログラムの実行(まと め) 担当 岡村耕二 月曜日 2限 平成 22 年度 情報科学 III (理系コア科目・2年生) 本資料の一部は、堀良彰准教授、天野浩文准教授、菅沼明 准教授等による以前の講義資料をもとにしています。
1 なんとなく Ajax ~新しくて古い XMLHttp 川合孝典 (Kansai.pm) 2005/5/22.
コンピュータ基礎実習 ( 上級 ) 第九回 スタイルシート 清水淳紀. はじめに  今回の内容  スタイルシート (CSS) とは何か  CSS の役割  CSS の利点  スタイルシートの基本  CSS の記入方法  基本的な CSS の例.
第5章 JMPのインストールと基本操作 廣野元久
RailsによるAjaxの利用 回生 小野 実.
IIS 4.0で開発をするコツ Webアプリケーション構築.
情報処理実習 第05回 Excelマクロ機能入門 操作マクロ入門.
ブラウザの基本操作 前のページに戻る ブラウザの左上にある 「戻る」ボタンで、自分がたどってきた一つ前のページに戻ることができます。
ハルビン絵葉書コレクションシステムの再構築と機能追加 -サーバ側:PHPとMySQLを用いて
画像展示サイト“Fragments” 『閲覧しやすさ』と『デザイン性』を両立させた Webデザイン
JPAを利用した RESTful Webサービスの開発
デジタルポートフォリオ作成支援ツール PictFolio 使用マニュアル
CakePHPを業務に導入する Shin x blog 新原 雅司.
Win32APIとMFC H107102 古田雅基 H107048 佐藤一樹 H107126 山下洋平.
オペレーティングシステムⅡ 第5回 講師 松本 章代 VirtuaWin・・・仮想デスクトップソフト 2009/11/6.
文字書式設定(1) 方法1: ①文字書式を設定したい文字列を選択する。 ②「書式」メニュー → 「フォント」とクリックする。
スマホでも動作する JavaScript製 アドベンチャーゲームの作り方
Hot Pepper for iPod touch
C#によるWindowsFormApplication入門
アプレット (Applet)について.
伺か with なでしこ 発表者:しらたま /05/05 うかべん大阪#3.
ただで使えるソフトウェア ーインストールとお絵かきー
クイズ 「インターネットを使う前に」 ネチケット(情報モラル)について学ぼう.
ファイルの場所に関して.
JavaServlet&JSP入門 01K0018 中村太一.
ファイルシステムとコマンド.
第9回JavaScriptゼミ セクション6-2 発表者 直江 宗紀.
第1回 JavaScriptゼミ ・ scriptエレメント ・ 記述における諸注意 ・ 古いブラウザへの対応方法
オペレーティングシステムⅡ 第3回 講師 松本 章代 VirtuaWin・・・仮想デスクトップソフト 2009/10/16.
卒研:データベースチーム 第4回 DOMを使った処理
JavaScript Language Update
インターネット活用法 ~ブラウザ編~ 09016 上野喬.
Ajaxフレームワーク 松嶋慎太郎.
JQueryでAjax 藤田@ジャストプレイヤー ※参考しまくり文献 jQuery日本語リファレンス.
押さえておきたいIE8の セキュリティ新機能
XMLゼミ 5.1 XML文書と表示 5.2 CSS 5.3 XMLとXSL 高橋 辰裕.
XSL-FO + MathML MathML表示、PDF生成、SVG生成
パスファインダーの作成 slis. tsukuba. ac. jp/~fuyuki/cje2/CJE161018
基幹理工学研究科 情報理工学専攻 後藤研究室 修士1年 魏 元
基礎プログラミング演習 第1回.
実際にたたいてAPI APIの初歩からプログラムまで使用方法のAtoZ.
Titanium Studioを使った アプリ開発 Vol.1
第8章 Web技術とセキュリティ   岡本 好未.
【プログラミング応用】 必修2単位 通年 30週 授業形態:演習.
基礎プログラミング演習 第10回.
9.1 DOMの概要 9.2 DOMプログラミングの基礎 9.3 DOMのプログラミング例
基礎プログラミング演習 第5回 関数とイベントを使ったプログラム.
平成19年10月19日 図書系のための アプリケーション開発講習会
Shimatterシステムの トップダウン分析
JAVAについて 高橋 雅哉.
コンピュータ概論B ー ソフトウェアを中心に ー #02 システムソフトウェアと アプリケーションソフトウェア
プロジェクト演習Ⅱ インタラクティブゲーム制作
プログラミングⅠ 平成30年10月15日 森田 彦.
基礎プログラミング演習 第12回.
統計ソフトウエアRの基礎.
第1章 いよいよプログラミング!! ~文章の表示 printf~
基礎プログラミング演習 第6回.
Webページに動きを持たせるJavascript言語について 例題のプログラムを通して体験的に理解することとします。
ウェブデザイン演習 第6回.
Googleマップを活用した 生物調査データベースの構築
今の俺にシカクはねぇ!! 資格取得支援システム.
例題のプログラムを通して JavaScriptの仕組みを理解することとします。
うかべん 大阪#9 Uka3D資料.
Presentation transcript:

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

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

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

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

技1. 要素の状態を変更する 1) 要素(タグ)にid属性を付ける BOX 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部品系 (タブ、スライダ、カレンダー … ) などがある。

膨大な数のライブラリがある あるSEのつぶやき:Ajaxライブラリ まとめあるSEのつぶやき: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部品 少し=お得パック ウェブデザイナーでも扱える手軽さ 独特のメソッド・チェーン記述による 奥深さ

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

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

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

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

取ってくるデータがXML junichi shinde 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( ' handler ) ・このページが存在するドメイン外とは通信不可 ・同一ドメインに仲介用のCGIを置いて対処

scriptタグの特性 ドメイン外のjsを読み込んで実行できる。 これってつまり、ドメイン外と通信し てるんじゃ? scriptタグを使ってクロスドメイン通信 しよう!

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

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

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

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

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

実際にやってみましょう はてなブックマーク人気エントリー Yahoo!Pipes

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

Ext Ext JS APIドキュメント自体がExtのデモ メッセージボックス表示処理を確認

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

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

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

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

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

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

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

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