Embed Size (px)
Citation preview
なんとなく.js jQueryでajax2015/ 4/ 9 なんとなく.言語 岡本秀高
普通ならここで 自己紹介だけど・・・
内輪だけだし、 いらんよねw
今回のゴール
Ajaxで取得したデータを並べる
• ブラウザ上で簡単にコードを書く方法を知る
• Ajaxで取得したデータをカードっぽく並べる
• オープンデータを使ってみる 「ラ・フォル・ジュルネ びわ湖 2015」に関するオープンデータについて
http://opendata.shiga.jp/lfjb2015/
今日の流れ
• ブラウザ上でコードをテストする
• Ajaxでの通信を試みる
• 取得したデータを表示する
• （jQuery以外でやってみる）
ブラウザ上で コードを試す
CODEPEN
• ブラウザ上でHTML5のコードを書ける
CODEPEN
• ブラウザ上でHTML5のコードを書ける
• 編集内容をリアルタイムで確認可能
CODEPEN
• ブラウザ上でHTML5のコードを書ける
• 編集内容をリアルタイムで確認可能
• コード公開やクロスブラウザ対応も可能
CODEPEN
• ブラウザ上でHTML5のコードを書ける
• 編集内容をリアルタイムで確認可能
• コード公開やクロスブラウザ対応も可能
• 無料！
「Save」ボタンが出ればOK
ちょっと 触ってみる
HTMLに文字列を入れると・・・
テキストが表示される
CSSを追加すると・・・
CSSが適用される
今回触るのは「JS」タブ
Ajaxで 通信する
jQueryでの 基本部分
jQueryでAjaxを使う基本
$.ajax({
}).done(function(data) {
}).fail(function(data){
});
jQueryでAjaxを使う基本
$.ajax({
//Ajaxの通信内容
}).done(function(data) {
//Ajaxの通信に成功した時のコード
}).fail(function(data){
//Ajaxの通信に失敗した時のコード
});
とりあえず 動かそう
とりあえず書いてみよう$.ajax({
url: 'http://lfjb.biwako-hall.or.jp/events-jsonld/',
type:'GET',
dataType: 'json',
timeout:10000,
}).done(function(data) {
$(‘#ajax’).append('OK');
}).fail(function(data) {
$('#ajax').append('fail');
});
OKって出ました？ failが出ました？
なにも出ませんでした？
なんとなく 解説
Ajaxの通信内容を決める（例）
url: 'Ajaxで通信する相手のURL',
type:’通信方法',
dataType: '取得するデータタイプ',
timeout:待機時間,
Ajaxの通信内容を決める（例）
url: 'http://lfjb.biwako-hall.or.jp/events-jsonld/',
type:'GET',
dataType: 'json',
timeout:10000,
ざっくり意訳すると・・・
１、通信先は「http://lfjb.biwako-hall.or.jp/
events-jsonld/」というURL
２、通信方法はGET
３、JSONのデータを取りに行く
４、10000ミリ秒を越えたら通信中断
doneとfail
通信に成功したらdone、
失敗したらfailの中にあるfunctionが動作する。
doneとfail
通信に成功したらdone、
失敗したらfailの中にあるfunctionが動作する。
function(data)のdata部分に
Ajaxで得たデータが入る
success・error版もある
$.ajax({
//Ajaxの通信内容
}).success(function(data) {
//Ajaxの通信に成功した時のコード
}).error(function(data){
//Ajaxの通信に失敗した時のコード
});
success・error版もある
$.ajax({
//Ajaxの通信内容
}).success(function(data) {
//Ajaxの通信に成功した時のコード
}).error(function(data){
//Ajaxの通信に失敗した時のコード
});
jQuery1.8以上では 使わない！！
そもそも Ajaxとは？
Ajaxとは（Wikipediaより）
Ajaxは、ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。
XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。
AjaxはAsynchronous JavaScript + XML の略で、2005年2月18日に米国のインフォメーションアーキテクトであるJesse James Garrettにより名付けられた。
なるほど、 わからん
Ajaxとは（Wikipediaより）
Ajaxは、 ウェブブラウザ内で 非同期通信とインターフェイスの構築 などを行う技術の総称。
XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。
AjaxはAsynchronous JavaScript + XML の略で、2005年2月18日に米国のインフォメーションアーキテクトであるJesse James Garrettにより名付けられた。
リンクを 踏まずに データを得る
GoogleMapもAjax昔は地図をずらすのもリンクだった
はじめは なんとなくで
オK
データを 表示する
Ajaxで取得したJSONは doneの中で使う
さっきのコードを・・・$.ajax({
url: 'http://lfjb.biwako-hall.or.jp/events-jsonld/',
type:'GET',
dataType: 'json',
timeout:10000,
}).done(function(data) {
$(‘#ajax’).append('OK');
}).fail(function(data) {
$('#ajax').append('fail');
});
こう書き換えてみよう$.ajax({
//省略
}).done(function(data) {
for (var i = data.length - 1; i >= 0; i--) {
$('#ajax').append(data[i]["schema:name"]);
}
}).fail(function(data) {
$('#ajax').append('fail');
});
なんか出てきた
コードの意味をざっくりと
for (var i = data.length - 1; i >= 0; i--) {
//dataの長さから、iがゼロになるまで繰り返す
$(‘#ajax’).append(data[i]["schema:name"]);
//dataのi番目にある「schema:name」を表示
}
HTMLタグも書ける
for (var i = data.length - 1; i >= 0; i--) {
var html = “<p>” + data[i][“schema:name”] + “</p>”;
$(‘#ajax').append(html);
}
がっつり書いてみる
var html = "<ul>";
for (var i = data.length - 1; i >= 0; i--) {
html += "<li>" + data[i]["schema:name"] + "</li>";
}
html += "</ul>";
$(‘#ajax').append(html);
お題
こいつを 作る
ヒント
• 必要なCSSはすでに用意されてます
• CSSに合う形でHTMLを作れればOK！
• console.log(data)でJSONをチェック
console.log
console.log(data)
• dataという変数の中身を確認できるコード
• Chromeの開発ツールに表示される
• JSで困ったらとりあえずconsole.log！
お疲れ様 でした
m(_ _)m
おまけ
JSONP
XMLHttpRequest cannot load
http://domain2.example .
Origin http://domain1.example
is not allowed by Access-Control-Allow-Origin.
別ドメインに Ajax通信は 原則できない
なぜ？
XSS
でも 使いたい
JSONP
これが・・・
{ 'blog' : 'あと味', 'author' : 'jdg' }
こうなる
{ 'blog' : 'あと味', 'author' : 'jdg' }
callback({ 'blog' : 'あと味', 'author' : 'jdg' });
これが・・・$.ajax({
url: 'http://lfjb.biwako-hall.or.jp/events-jsonld/',
type:'GET',
dataType: 'json',
timeout:10000,
}).done(function(data) {
$(‘#ajax’).append('OK');
}).fail(function(data) {
$('#ajax').append('fail');
});
こうなる$.ajax({
url: ‘http://lfjb.biwako-hall.or.jp/events-jsonld/?jsonp=?',
type:'GET',
dataType: ‘jsonp', jsonp:’callback’
timeout:10000,
}).done(function(data) {
$(‘#ajax’).append('OK');
}).fail(function(data) {
$('#ajax').append('fail');
});
jQuery 以外のJS
React.jsFacebookが開発したライブラリ
React.js
• コンポーネント単位で再利用しやすい
• Fluxで処理が一方通行だからわかりやすい
• 高パフォーマンスを実現する仮想DOM
Angular.jsGoogleが開発したライブラリ
Angular.js
• 非同期で色々できる（双方向データバインド
• ng-appで適用範囲を選べる
• 日本語ドキュメントが多い
PolymerWebComponents用ポリフィル
Polymer
• WebComponentsを使って構築する
• ComponentsをimportすればだいたいOK
• 簡単なものならほぼNoJavaScript
