SlideShare a Scribd company logo
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
Webアプリ
クライアントサイド講義(1日目)
神戸大学
まつ本 真佑
佐伯 幸郎
まつしん
柗本 真佑
@shinsuke_mat
好きな言語
1位.JavaScript
2位.Perl
3位.Java
2013 @Hawaii, US
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 6
 REST (Roy Fielding)
 Webのアーキテクチャスタイル
 かなり抽象的な概念,今日は無視
 REST (Amazon)
 REST API
• http://api.openweathermap.org/data/2.5/weather?q=kobe&mode=xml
• http://express.heartrails.com/api/json?method=getStations&x=135.2234&y=34.7544
おさらいと再定義
REST APIでアクセスできるシステム
HTTPアクセスに対してXML/JSONを返すインタフェース
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 7
おさらい
サーバサイドクライアントサイド
program
API
data
library
REST framework
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 8
おさらい
サーバサイドクライアントサイド
program
API
data
library
REST framework
REST
API
{json}
<xml>
http://
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 9
おさらい
サーバサイド
Java
Jersey
クライアントサイド
REST
API
{json}
<xml>
program
API
data
library
REST framework
自開発サービス
http://
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 10
おさらい
サーバサイド
Java
Jersey
REST
API
http://
{json}
<xml>
program
API
data
library
REST framework
Java
Ruby
PHPREST
API
DWRRails
REST
API
REST
API
クライアントサイド
自開発サービス
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 11
おさらい
サーバサイド
Java
Jersey
外部サービス
REST
API
http://
{json}
<xml>
program
API
data
library
REST framework
自開発サービス
Java
Ruby
PHPREST
API
DWRRails
REST
API
REST
API
クライアントサイド
Java
REST
API
T4J
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 12
おさらい
サーバサイド
Java
Jersey
外部サービス
REST
API
http://
{json}
<xml>
program
API
data
library
REST framework
自開発サービス
Java
Ruby
PHPREST
API
DWRRails
REST
API
REST
API
クライアントサイド
Java
REST
API
T4J
REST
API
REST
API
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 13
講義の位置付け
サーバサイド
Java
Jersey
外部サービス
REST
API
http://
{json}
<xml>
program
API
data
library
REST framework
自開発サービス
Java
Ruby
PHPREST
API
DWRRails
REST
API
REST
API
クライアントサイド
Java
REST
API
T4J
REST
API
REST
API
JS
jQuery
① REST APIの呼び出し
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 14
講義の位置付け
サーバサイド
Java
Jersey
外部サービス
REST
API
http://
{json}
<xml>
program
API
data
library
REST framework
自開発サービス
Java
Ruby
PHPREST
API
DWRRails
REST
API
REST
API
クライアントサイド
Java
REST
API
T4J
REST
API
REST
API
JS
jQuery
HTML
CSS
① REST APIの呼び出し
② 呼び出し結果の処理
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 15
講義の位置付け
サーバサイド
Java
Jersey
外部サービス
REST
API
http://
{json}
<xml>
program
API
data
library
REST framework
自開発サービス
Java
Ruby
PHPREST
API
DWRRails
REST
API
REST
API
クライアントサイド
Java
REST
API
T4J
REST
API
REST
API
JS
jQuery
HTML
CSS
HTML5
API
① REST APIの呼び出し
② 呼び出し結果の処理
③ HTML5 APIの呼び出し
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 16
講義の位置付け
サーバサイド
Java
Jersey
外部サービス
REST
API
http://
{json}
<xml>
program
API
data
library
REST framework
自開発サービス
Java
Ruby
PHPREST
API
DWRRails
REST
API
REST
API
クライアントサイド
Java
REST
API
T4J
REST
API
REST
API
JS
jQuery
HTML
CSS
HTML5
API
① REST APIの呼び出し
② 呼び出し結果の処理
③ HTML5 APIの呼び出し
独自
API
独自
API
④ 独自APIの
呼び出し
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 17
講義の位置付け
サーバサイド
Java
Jersey
外部サービス
REST
API
http://
{json}
<xml>
program
API
data
library
REST framework
自開発サービス
Java
Ruby
PHPREST
API
DWRRails
REST
API
REST
API
クライアントサイド
Java
REST
API
T4J
REST
API
REST
API
JS
jQuery
HTML
CSS
HTML5
API
① REST APIの呼び出し
② 呼び出し結果の処理
③ HTML5 APIの呼び出し
独自
API
独自
API
④ 独自APIの
呼び出し
ADSLとの戦い
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 18
やらないこと
サーバサイド
Java
Jersey
外部サービス
REST
API
http://
{json}
<xml>
program
API
data
library
REST framework
自開発サービス
Java
Ruby
PHPREST
API
DWRRails
REST
API
REST
API
クライアントサイド
Java
REST
API
T4J
REST
API
REST
API
JS
jQuery
独自
API
独自
API
HTML5
API
HTML
CSS
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 19
講義の位置付け
Java
サーバサイド
Ruby
PHPREST
API
DWR
Java
Jersey
Java
REST
API
T4J
Rails
REST
API
REST
API
HTML5
API
REST
API
REST
API
REST
APIJS
jQuery
HTML
CSS
http://
{json}
<xml>
独自
API
独自
API
program
API
data
library
REST framework
クライアントサイド
外部サービス自開発サービス
Webアプリを1から作れるようになる
• 要求~設計 (UML講義)
• Java・DB・テスト (前期Spiral)
• サーバサイドのRESTサービス化 (小出先生)
• クライアントサイドでのAPI呼び出し・UI構築
• クラウド環境への開発アプリのデプロイ
GOAL 1/2
By Maurizio D'Arrigo (https://www.flickr.com/photos/keylosa/184606430)
GOAL 2/2
By Maurizio D'Arrigo (https://www.flickr.com/photos/keylosa/184606430)
また明日▶
 10分で分かる.*
10分で分かるJavaScript
10分で分かるjQuery
 各種API
REST API 演
HTML5 API 演
Google Maps API 演
 総合演習
alpaca+ 演
公開サーバへのデプロイ 演
 アーキテクチャ設計
 pre-PBL
 10分で分かる.*
10分で分かるJavaScript
10分で分かるjQuery
 各種API
REST API 演
HTML5 API 演
Google Maps API 演
 総合演習
alpaca+ 演
公開サーバへのデプロイ 演
 アーキテクチャ設計
 pre-PBL
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 24
 10分でやるしかないJavaScriptの基礎
 全部は無理
 混乱してそうなポイントだけフォロー
 JavaScriptの基礎力
10分で分かるJavaScriptの基礎
var form = {userId: 'shin', pass: 'shin++'};
// DWR呼び出し
SignUpController.execute(form, {
callback : function(data) { /*成功時の処理*/ },
exceptionHandler : updateErrorMsg
});
目標
これの意味が分かるように
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 25
 ChromeでF12 (開発者ツール)
 Console をクリック
まずは
ここでJSを記述して
実行できる
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 26
 基本的な文法はJavaと同じ
おさらい
// 変数の代入
var name = 'shin';
var age = 31;
// for文
for(var i = 0; i < 10; i++) {
console.log('hello, ' + name);
}
// if文
if (age < 0) {
console.log('age must larger than 0');
}
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 27
 配列と関数
おさらい
// 配列の定義
var arr = ['rock', 'metal', 'diving'];
console.log(arr[0]);
// 配列の追加
arr.push('programming');
// 関数の定義
function func() {
console.log('ookini');
}
// 関数呼び出し
func();
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 28
 オブジェクト (構造データ)
JavaScriptのオブジェクト
// オブジェクトの定義
var shin = {name : 'shinsuke'};
// オブジェクトの中身へのアクセス
console.log('hi, ' + shin.name);
// オブジェクトへの数値の追加
shin.age = 31;
// オブジェクトへの配列の追加
shin.hobbies = ['rock', 'metal', 'diving'];
console.log('he likes ' + shin.hobbies[0]);
▶ {name:"shinsuke", age:31, hobbies:Array[3]}
shinオブジェクトの中身
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 29
 オブジェクト + 関数
JavaScriptのオブジェクト
// オブジェクトへの関数のセット
function func() {
console.log('ookini');
}
shin.say = func;
// 呼び出し
shin.say();
// (別のやり方) オブジェクトへの無名関数(匿名関数)のセット
shin.say = function() {
console.log('ookini');
};
▶ {name:"shinsuke", age:31, hobbies:Array[3], say:function}
shinオブジェクトの中身
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 30
 shinオブジェクトの中身
JavaScriptのオブジェクト
▼ {name:"shinsuke", age:31, hobbies:Array[3], say:function}
{ name: "shinsuke",
age: 31,
hobbies: ["rock","metal","diving"],
say: function() }
データと関数を持つ
=属性と操作を持つ
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 31
 shinオブジェクトの中身
JavaScriptのオブジェクト
▼ {name:"shinsuke", age:31, hobbies:Array[3], say:function}
{ name: "shinsuke",
age: 31,
hobbies: ["rock","metal","diving"],
say: function() }
// JAVAでのクラス宣言
public class Person {
public String name;
public int age;
public List<String> hobbies;
public void say() {
System.out.println("ookini");
};
// JAVAでのインスタンス化
Person shin = new Person("shinsuke", 31, ・・・);
データと関数を持つ
=属性と操作を持つ
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 32
 shinオブジェクトの中身
JavaScriptのオブジェクト
// JAVAでのクラス宣言
public class Person {
public String name;
public int age;
public List<String> hobbies;
public void say() {
System.out.println("ookini");
};
// JAVAでのインスタンス化
Person shin = new Person("shinsuke", 31, ・・・);
JavaScriptのオブジェクト
≒
Javaのオブジェクト
▼ {name:"shinsuke", age:31, hobbies:Array[3], say:function}
{ name: "shinsuke",
age: 31,
hobbies: ["rock","metal","diving"],
say: function() }
データと関数を持つ
=属性と操作を持つ
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 33
 DWR呼び出し (再掲)
DWR呼び出しの意味を考える
var form = {userId: 'shin', pass: 'shin++'};
// DWR呼び出し
SignUpController.execute(form, {
callback : function(data) { /*成功時の処理*/ },
exceptionHandler : updateErrorMsg
});
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 34
 DWR呼び出し (再掲)
DWR呼び出しの意味を考える
var form = {userId: 'shin', pass: 'shin++'};
// DWR呼び出し
SignUpController.execute(form, {
callback : function(data) { /*成功時の処理*/ },
exceptionHandler : updateErrorMsg
});
▶ {userId:"shin", pass:"shin++"}
第1引数の中身 = formオブジェクト = サーバに投げるデータ
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 35
 DWR呼び出し (再掲)
DWR呼び出しの意味を考える
var form = {userId: 'shin', pass: 'shin++'};
// DWR呼び出し
SignUpController.execute(form, {
callback : function(data) { /*成功時の処理*/ },
exceptionHandler : updateErrorMsg
});
▶ {userId:"shin", pass:"shin++"}
第1引数の中身 = formオブジェクト = サーバに投げるデータ
第2引数=2つの関数を持つオブジェクト
(無名関数 と updateErrorMsg)
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 36
 DWR呼び出し (再掲)
DWR呼び出しの意味を考える
var form = {userId: 'shin', pass: 'shin++'};
// DWR呼び出し
SignUpController.execute(form, {
callback : function(data) { /*成功時の処理*/ },
exceptionHandler : updateErrorMsg
});
▶ {callback:function, exceptionHandler:function}
▶ {userId:"shin", pass:"shin++"}
第1引数の中身
第2引数の中身
= formオブジェクト = サーバに投げるデータ
第2引数=2つの関数を持つオブジェクト
(無名関数 と updateErrorMsg)
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 37
 いっそ両方非無名関数にする
(余談) 改良案?
var form = {userId: 'shin', pass: 'shin++'};
// DWR呼び出し
SignUpController.execute(form, {
callback : updateWelcomeMsg,
exceptionHandler : updateErrorMsg
});
function updateWelcomeMsg(data) {
/*成功時の処理*/
}
余
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 38
 いっそ両方無名関数にする
(余談) 改良案?
var form = {userId: 'shin', pass: 'shin++'};
// DWR呼び出し
SignUpController.execute(form, {
callback : function(data) { /*成功時の処理*/ },
exceptionHandler : function(..) { /*失敗時の処理*/ }
});
余
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 39
 いっそ両方無名関数にする
(余談) 改良案?
var form = {userId: 'shin', pass: 'shin++'};
// DWR呼び出し
SignUpController.execute(form, {
callback : function(data) { /*成功時の処理*/ },
exceptionHandler : function(..) { /*失敗時の処理*/ }
});
ご意見ご感想
お待ちしております
余
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 40
 DWR関数の裏側がどうなっていたか?
(余談) コールバックの仕組み
var form = {userId: 'shin', pass: 'shin++'};
// DWR呼び出し
SignUpController.execute(form, {
callback : function(data) { /*成功時の処理*/ },
exceptionHandler : updateErrorMsg
});
// DWR関数の裏側 (仮)
SignUpController.execute = function(params, funcs) {
// javaのメソッドを呼び出す (仮)
var response = INVOKE_JAVA_METHOD(params);
if (success) funcs.callback(response);
else funcs.exceptionHandler(...);
}
余
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 41
 JSのオブジェクト ≒ Javaのオブジェクト
 無名関数と非無名関数
 宣言の仕方が違うだけ,大差なし (名前空間が違う)
 複雑な関数呼び出しを見つけたら・・・
• 落ち着いて{}を探す
• {}の中身を外に切り出すのも一つの手
まとめ
▼ {name:"shinsuke", age:31, hobbies:Array[3], say:function}
{ name: "shinsuke",
age: 31,
hobbies: ["rock","metal","diving"],
say: function() }
var funcs = {callback:..., };
SignUpController.execute(form, funcs);
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 46
 そもそもjQueryとは?
 ≠ Japanese Query
 ≠ JavaScriptを神言語にしてくれる謎アイテム
 = JavaScriptのだるい部分を簡単にしてくれるライブラリ
10分でやるしかないjQueryの基礎
// <hoge id="container"> の中身を空にする
document.getElementById('container').innerHTML = null;
$('#container').empty();
// <div>の背景を赤色にする
document.getElementsByTagName('div')[0].style.background = 'red';
$('div').css('background', 'red');
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 47
 ただの関数の名前
$の意味
// 下2つは全く同じ
$('#container').empty();
jQuery('#container').empty();
// 下2つは全く同じ
$('div').css('background', 'red');
jQuery('div').css('background', 'red');
// (補足) JSでは$は特殊記号ではない
var $ = 10;
$ += 5;
console.log($);
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 48
 http://semooh.jp/jquery/
jQuery日本語リファレンス
困ったらここを読む
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 49
 DOMの操作 ≒ XML構造データの操作
 XML構造のデータって?
• 本文のHTML
• REST APIから取得したXML
 2つの手順
 1. 要素を選択する (セレクタ)
 2. 要素を操作する
jQueryでできること
$('#container').empty();
$('div').css('background', 'red');
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 50
 セレクタ
ステップ1.要素を選択する
<div id="container">
<p id="title">ゆうすけのページへようこそ!</p>
<p class="accent">キリバン踏み逃げ禁止!</p>
<a href="http://google.com">googleへ移動</a>
</div>
<script>
// id名で選ぶ
$('#container').find();
// クラス名で選ぶ
$('.accent').find();
// タグ名で選ぶ
$('p').a();
</script>
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 51
 DOM操作例
ステップ2.要素を操作する 1/2
<div id="container">
<p id="title">ゆうすけのページへようこそ!</p>
<p class="accent">キリバン踏み逃げ禁止!</p>
<a href="http://google.com">googleへ移動</a>
</div>
<script>
// 指定要素のテキストを書き換える & 属性を書き換える
$('a').text('yahooへ移動');
$('a').attr('href', 'http://yahoo.com');
// 指定要素の背景を黄色にする
$('#container').css('background', 'yellow');
// 指定要素の最後に要素を追加する
$('div').append('<p>©copyright by yusuke</p>');
</script>
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 52
 DOM操作例
ステップ2.要素を操作する 2/2
<div id="container">
<p id="title">ゆうすけのページへようこそ!</p>
<p class="accent">キリバン踏み逃げ禁止!</p>
<a href="http://google.com">googleへ移動</a>
</div>
<script>
// 指定要素(複数)のテキストを書き換える
$('p').text('this page has moved');
// 指定要素(複数)の0番目だけを空にする
$('p').eq(0).text('!!!!!!!!!');
</script>
1.
要素を選択
↓2.
要素を操作 →
 10分で分かる.*
10分で分かるJavaScript
10分で分かるjQuery
 各種API
REST API 演
HTML5 API 演
Google Maps API 演
 総合演習
alpaca+ 演
公開サーバへのデプロイ 演
 アーキテクチャ設計
 pre-PBL
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 55
 Eclipse起動
 C:¥pbl¥eclipse.lnk
 Eclipse上でSVNチェックアウト
 http://192.168.100.10/svn/20140xx/webapp/
• UID:20140xx pass:20140xx
 Apache起動
 C:¥pbl¥apache.lnk
• Windowsセキュリティ警告 → 「許可」
• 本講義の最中は立ち上げっぱなしにしておくこと
準備
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 56
 ブラウザから動作確認
 http://localhost:50080/webapp/
 Eclipseで編集
 index.html に学籍番号と氏名を書込む
 ブラウザで更新
 書込んだ内容が反映されているか確認
動作確認
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 57
演習題材
 alpaca- (アルパカマイナス)
 RESTful Web Service
 プレゼンにちゃちゃを入れるサービス
 演習用に機能を削ったalpaca
 前提
 サーバサイドは開発完了
 公開REST API
 http://192.168.100.10:8080/alpaca_cx/api/like
 http://192.168.100.10:8080/alpaca_cx/api/comment?msg=hello
 http://192.168.100.10:8080/alpaca_cx/api/report
alpaca- のWebクライアントを作ろう
By Silhouette Design, http://kage-design.com/
x=グループ番号
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 58
 1. APIをどう呼ぶか
 2. 呼び出した結果をどう処理するか
REST API利用の2つのポイント
$.ajax({
url: 'http://...',
success: function(xml) { ... }
});
$('total_like', xml).text();
$('message', xml).text();
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 59
1. APIをどう呼ぶか (1/2)
// 引数なし・返り値なし (/api/like等)
$.ajax({
url: 'http://.../api/like'
});
// 引数あり・返り値なし (/api/comment?msg=hello等)
$.ajax({
url: 'http://.../api/comment',
data: {msg: 'hello'}
});
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 60
1. APIをどう呼ぶか (2/2)
// 引数なし・返り値あり (/api/report等)
$.ajax({
url: 'http://.../api/report',
success: function(xml) {
// 成功時の処理
}
});
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 61
2. 呼び出した結果をどう処理するか
// report APIの返り値を用意 (ダミーデータ)
var xml = '<report><comment><date>2014-08-27T14:42:02.284+0900</date><message>さようなら</message></comment><comment><date>2014-08-27T14:41:55.220+0900</date><message>こんにちは</message></comment><presenter>c0</presenter><total_like>15</total_like></report>';
// <name>の中のテキストを取り出す
console.log($('total_like', xml).text());
// <message>の中のテキストを取り出す (失敗例)
console.log($('message', xml).text());
// <message>の中のテキストを一つずつ取り出す
var messages = $('message', xml);
for (var i = 0; i < messages.size(); i++) {
console.log(messages.eq(i).text());
}
// (スマートなやり方) $.each()を使う (略)
<report>
<comment>
<date>2014-08-27T14:42:02.284+
<message>さようなら</message>
</comment>
<comment>
<date>2014-08-27T14:41:55.220+
<message>こんにちは</message>
</comment>
<presenter>c0</presenter>
<total_like>15</total_like>
</report>
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 62
 役に立ちそうなコードの断片集
(おまけ) コードスニペット (1/2)
// 指定要素の中に要素を追加
$('#board').append('<p>!!!</p>');
// <input type="text">の入力内容を消す ([]を使った属性フィルタ)
$('input[type="text"]').val('');
// id="submit" を押下した際の処理を定義
$('#like').click(function(){
console.log('clicked!');
});
// 1秒ごとに実行する
window.setInterval(function() {
console.log('looping...');
}, 1000);
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 63
 役に立ちそうなコードの断片集
(おまけ) コードスニペット (2/2)
// API呼び出しに失敗した際の処理を定義する
$.ajax({
url : 'http://.../',
success: function(data) {},
error: function(xhr, status, error) {
console.log(error.message);
}
});
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 64
演習1: alpaca- クライアント
演
 4つの機能を完成させよう
 いいねの投稿
 いいね回数の表示
 コメントの投稿
 コメントの表示
 開発対象のソースコード
 alpaca.html (ひな形)
 js/alpaca.js (開発のメイン部分)
 css/default.css (任意)
動作イメージ
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 65
 Wikipediaより
 キーワード:
「非同期通信」 & 「インターフェイスの構築」
 論より証拠,次ページへ
(余談) Ajaxって何?
余
ウェブブラウザ内で非同期通信とインターフェイスの構築などを
行う技術の総称。通信結果に応じてダイナミックHTMLで動的に
ページの一部を書き換えるというアプローチを取る。
http://ja.wikipedia.org/wiki/Ajax
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 67
 サンプル
 http://localhost:50080/webapp/example/ajax.html
Ajaxによる非同期通信
<body>
<textarea></textarea><br>
<img src="image/alpaca-half.png">
<script src="js/jquery-2.1.1.min.js"></script>
<script>
// 処理に時間のかかる重たいAPI(仮)を呼び出す
$.ajax({
url : 'http://192.168.100.10:8080/lama/api/heavy',
async : true, // 非同期にするかどうか (デフォルトではtrue)
});
</script>
</body>
余
ブラウザの挙動とは非同期にサーバ通信可能
=ブラウザが固まらない
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 68
 サンプル
 https://twitter.com/signup
Ajaxによるインタフェースの構築
余
画面遷移なしにサーバと通信できる
=動的なWebアプリが作れる
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 69
 Wikipediaより
 非同期通信
 ブラウザの挙動とは非同期にサーバ通信可能
 インターフェイスの構築
 画面遷移なしにサーバと通信できる
Ajaxまとめ
余
ウェブブラウザ内で非同期通信とインターフェイスの構築などを
行う技術の総称。通信結果に応じてダイナミックHTMLで動的に
ページの一部を書き換えるというアプローチを取る。
http://ja.wikipedia.org/wiki/Ajax
リアルタイム & インタラクティブなWebアプリが可能
 10分で分かる.*
10分で分かるJavaScript
10分で分かるjQuery
 各種API
REST API 演
HTML5 API 演
Google Maps API 演
 総合演習
alpaca+ 演
公開サーバへのデプロイ 演
 アーキテクチャ設計
 pre-PBL
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 71
 WWWの登場 ('89)
 構造文章の閲覧,ハイパーリンク
 Mosaic登場 & CSS勧告 ('94-'96)
 構造文章の閲覧,ハイパーリンク,装飾,画像
 HTML5の登場 ('08)
 構造文章の閲覧,ハイパーリンク,装飾,画像,音声,動画,オフラ
インアプリ,現在地取得,図の描画,Webストレージ(DB),マルチス
レッド,ローカルファイル操作,双方向通信,バッテリー状況取得,
Drag&Drop,カメラ・・・
ブラウザ & HTMLの進化
・・・ 混乱期 (ブラウザ戦争 & W3C vs WHATWG)
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 72
 題材: 国際会議への投稿&発表
 実験
• 開発環境 (Eclipse Orion),結果集計 (Google Spreadsheet)
 論文執筆
• Tex執筆・コンパイル (Google Drive + Latexlab)
• 関連研究調査 (Google Scholar),音楽・動画 (Amazon MP3/Youtube)
• 発表申し込み・投稿 (Easychair)
 旅程計画
• 航空券,ホテル (各Webサイト)
 発表
• スライド作成・発表 (Google Drive)
• 写真撮影 (WebRTC API),写真管理 (Picasa)
ブラウザでできること
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 73
 題材: 国際会議への投稿&発表
 実験
• 開発環境 (Eclipse Orion),結果集計 (Google Spreadsheet)
 論文執筆
• Tex執筆・コンパイル (Google Drive + Latexlab)
• 関連研究調査 (Google Scholar),音楽・動画 (Amazon MP3/Youtube)
• 発表申し込み・投稿 (Easychair)
 旅程計画
• 航空券,ホテル (各Webサイト)
 発表
• スライド作成・発表 (Google Drive)
• 写真撮影 (WebRTC API),写真管理 (Picasa)
ブラウザでできること
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 74
 ユーザの現在地情報を取得するAPI
 HTML5 APIの一つ
 携帯端末との相性が良い
 WiFi/携帯基地局/GPS/IPアドレスなどから計算される
• 具体的な方法はブラウザに依存
 プライバシーの問題もあるのでオプトイン型
 ユーザの許可が必須
Geolocation API
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 75
Geolocation APIの使い方
▼ geolocationAPI対応のブラウザか調べる
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showLocation,showError);
}
else {
alert('not supported');
};
function showLocation(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
// 取得した座標をブラウザに表示する (未完成)
}
function showError(error) {
// エラーメッセージを表示する (未完成)
}
▲座標を取得する
-第1引数: 成功時の関数 (showLocation)
-第2引数: 失敗時の関数 (showError)
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 76
 地図オブジェクトを取得するAPI
 XMLやJSONを返すサービスではない
 非REST型,独自仕様のAPI
 マニュアル必須
•https://developers.google.com/maps/documentation/javascript/
examples/
Google Maps API
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 77
Google Maps APIの使い方
// gmaps専用の緯度経度オブジェクトを作る (座標は任意)
var latlng = new google.maps.LatLng(latitude, longitude);
// 地図のオプションを決める
var opts = {zoom : 16, center : latlng};
// 地図を描画 (<hoge id="map">のHTML要素に地図を書込む)
map = new google.maps.Map($('#map').get(0), opts);
// (おまけ) 地図上にマーカーを落とす
new google.maps.Marker({position : latlng, map : map});
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 78
 現在位置の緯度経度をテキストで表示しよう
 geo.html
 js/geo.js
 現在位置の地図を表示しよう
 geomap.html
 js/geomap.js
演習2: Geolocation & Maps API
演
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 79
 Chrome開発者ツールより
(余談) Geolocation APIをごまかす
▼ ①emulationを有効化 ▼②クリック
余
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 80
 HTML5 APIの一つ
 カメラを制御できる
 http://localhost:50080/webapp/example/camera.html
(余談) WebRTC API
余
 10分で分かる.*
10分で分かるJavaScript
10分で分かるjQuery
 各種API
REST API 演
HTML5 API 演
Google Maps API 演
 総合演習
alpaca+ 演
公開サーバへのデプロイ 演
 アーキテクチャ設計
 pre-PBL
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 82
 地図を表示する機能
 地図を移動する機能
 コメント欄に入力された緯度経度に地図を飛ばす
 現在地を書込む機能
 ボタンを押すとコメント欄に現在地が入力される
alpaca+ を作ろう
夜この店いかん? {35.000 135.000} 投稿
{35.000 135.000} 投稿 現在地
演
 10分で分かる.*
10分で分かるJavaScript
10分で分かるjQuery
 各種API
REST API 演
HTML5 API 演
Google Maps API 演
 総合演習
alpaca+ 演
公開サーバへのデプロイ 演
 アーキテクチャ設計
 pre-PBL
また明日▶
分野・地域を越えた実践的情報教育協働ネットワーク
Cloud Specialist Program Initiative for Reality-based
Advanced Learning
参考資料
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 86
 Google JavaScript Style Guide 和訳
 http://cou929.nu/data/google_javascript_style_guide/
• '' と "" をどう使い分けるか?
• ファイルの命名規則をどうすべきか?
• ・・・
 認証なしで利用できるオープンAPIリスト
 http://192.168.100.10/docs/2014/0903_webapp/openapis.txt
参考URL
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 87
 サーバサイド言語: Java
 RESTフレームワーク: Jersey
 サーブレットコンテナ: Tomcat
 DB: MongoDB
alpaca-のシステムアーキテクチャ
C:¥> mongo 192.168.100.10
MongoDB shell version: 2.4.4
connecting to: 192.168.100.10/test
> use alpaca
> show collections
comment
like
system.indexes
>
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 88
 XML文書にアクセスするためのインタフェース
 ブラウザ上でJSからXMLを操作するためのAPI
 JSでDOMを操作する ≒ HTMLを操作する
 昔はブラウザごとにDOMが異なっていた 特にIE*
 =ブラウザによってDOMが異なる
 =Web開発者は死ぬ
 jQueryはこの問題も解決してくれる
DOMって何?
document.getElementById('container').innerHTML = null;
* W3C DOM Compatibility, http://www.quirksmode.org/compatibility.html
コレ コレ
Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2014/9/3,4 89
参考図書

More Related Content

What's hot

【初公開】チャットワーク検索機能を支える技術
【初公開】チャットワーク検索機能を支える技術【初公開】チャットワーク検索機能を支える技術
【初公開】チャットワーク検索機能を支える技術
Yoshinori Fujiwara
 
Building a Flutter Development Environment with VSCode and Useful Extensions
Building a Flutter Development Environment with VSCode and Useful ExtensionsBuilding a Flutter Development Environment with VSCode and Useful Extensions
Building a Flutter Development Environment with VSCode and Useful Extensions
Shotaro Suzuki
 
IoTビジネス共創ラボ 第4回勉強会(2017 07-03)
IoTビジネス共創ラボ 第4回勉強会(2017 07-03)IoTビジネス共創ラボ 第4回勉強会(2017 07-03)
IoTビジネス共創ラボ 第4回勉強会(2017 07-03)
博宣 今村
 
AWSで動画共有サイトを作成して全社に公開
AWSで動画共有サイトを作成して全社に公開AWSで動画共有サイトを作成して全社に公開
AWSで動画共有サイトを作成して全社に公開
ToruKubota4
 
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
Toshiaki Maki
 
さくらのクラウド サービス開発とデータセンター運用
さくらのクラウド サービス開発とデータセンター運用さくらのクラウド サービス開発とデータセンター運用
さくらのクラウド サービス開発とデータセンター運用
SAKURA Internet Inc.
 
[de:code 2019 振り返り Night!] Data Platform
[de:code 2019 振り返り Night!] Data Platform[de:code 2019 振り返り Night!] Data Platform
[de:code 2019 振り返り Night!] Data Platform
Naoki (Neo) SATO
 
WatsonQA応用編~BluemixとWatson Engagement Advisor(WEA)連携~
WatsonQA応用編~BluemixとWatson Engagement Advisor(WEA)連携~ WatsonQA応用編~BluemixとWatson Engagement Advisor(WEA)連携~
WatsonQA応用編~BluemixとWatson Engagement Advisor(WEA)連携~
Harada Kazuki
 
オートモーティブ領域における 位置情報関連アルゴリズムあれこれ
オートモーティブ領域における 位置情報関連アルゴリズムあれこれオートモーティブ領域における 位置情報関連アルゴリズムあれこれ
オートモーティブ領域における 位置情報関連アルゴリズムあれこれ
DeNA
 
Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例
Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例
Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例
gree_tech
 

What's hot (10)

【初公開】チャットワーク検索機能を支える技術
【初公開】チャットワーク検索機能を支える技術【初公開】チャットワーク検索機能を支える技術
【初公開】チャットワーク検索機能を支える技術
 
Building a Flutter Development Environment with VSCode and Useful Extensions
Building a Flutter Development Environment with VSCode and Useful ExtensionsBuilding a Flutter Development Environment with VSCode and Useful Extensions
Building a Flutter Development Environment with VSCode and Useful Extensions
 
IoTビジネス共創ラボ 第4回勉強会(2017 07-03)
IoTビジネス共創ラボ 第4回勉強会(2017 07-03)IoTビジネス共創ラボ 第4回勉強会(2017 07-03)
IoTビジネス共創ラボ 第4回勉強会(2017 07-03)
 
AWSで動画共有サイトを作成して全社に公開
AWSで動画共有サイトを作成して全社に公開AWSで動画共有サイトを作成して全社に公開
AWSで動画共有サイトを作成して全社に公開
 
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
 
さくらのクラウド サービス開発とデータセンター運用
さくらのクラウド サービス開発とデータセンター運用さくらのクラウド サービス開発とデータセンター運用
さくらのクラウド サービス開発とデータセンター運用
 
[de:code 2019 振り返り Night!] Data Platform
[de:code 2019 振り返り Night!] Data Platform[de:code 2019 振り返り Night!] Data Platform
[de:code 2019 振り返り Night!] Data Platform
 
WatsonQA応用編~BluemixとWatson Engagement Advisor(WEA)連携~
WatsonQA応用編~BluemixとWatson Engagement Advisor(WEA)連携~ WatsonQA応用編~BluemixとWatson Engagement Advisor(WEA)連携~
WatsonQA応用編~BluemixとWatson Engagement Advisor(WEA)連携~
 
オートモーティブ領域における 位置情報関連アルゴリズムあれこれ
オートモーティブ領域における 位置情報関連アルゴリズムあれこれオートモーティブ領域における 位置情報関連アルゴリズムあれこれ
オートモーティブ領域における 位置情報関連アルゴリズムあれこれ
 
Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例
Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例
Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例
 

Similar to CloudSpiral 2014年度 Webアプリ講義(1日目)

XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介Shotaro Suzuki
 
ハンズオン勉強会 はじめてのJavaScriptとSPARQL
ハンズオン勉強会 はじめてのJavaScriptとSPARQLハンズオン勉強会 はじめてのJavaScriptとSPARQL
ハンズオン勉強会 はじめてのJavaScriptとSPARQL
Taisuke Fukuno
 
rePiT2015_アジャイルソフトウェア開発教育のためのチケットシステムを用いたプロジェクト定量評価手法
rePiT2015_アジャイルソフトウェア開発教育のためのチケットシステムを用いたプロジェクト定量評価手法rePiT2015_アジャイルソフトウェア開発教育のためのチケットシステムを用いたプロジェクト定量評価手法
rePiT2015_アジャイルソフトウェア開発教育のためのチケットシステムを用いたプロジェクト定量評価手法
Hiroshi Igaki
 
JAWSDAYS2016 Technical Deep DIVE
JAWSDAYS2016 Technical Deep DIVE JAWSDAYS2016 Technical Deep DIVE
JAWSDAYS2016 Technical Deep DIVE
陽平 山口
 
APIMeetup 20170329_ichimura
APIMeetup 20170329_ichimuraAPIMeetup 20170329_ichimura
APIMeetup 20170329_ichimura
Tomohiro Ichimura
 
ochacafe#6 人にもマシンにもやさしいAPIのエコシステム
ochacafe#6 人にもマシンにもやさしいAPIのエコシステムochacafe#6 人にもマシンにもやさしいAPIのエコシステム
ochacafe#6 人にもマシンにもやさしいAPIのエコシステム
オラクルエンジニア通信
 
「お手軽な機械学習サービス」で、ルーティンワークに立ち向かおう!
「お手軽な機械学習サービス」で、ルーティンワークに立ち向かおう!「お手軽な機械学習サービス」で、ルーティンワークに立ち向かおう!
「お手軽な機械学習サービス」で、ルーティンワークに立ち向かおう!
a know
 
20190731 Azure Functions x Line at Azure Tech Lab #4
20190731 Azure Functions x Line at Azure Tech Lab #420190731 Azure Functions x Line at Azure Tech Lab #4
20190731 Azure Functions x Line at Azure Tech Lab #4
Issei Hiraoka
 
laravel x モバイルアプリ
laravel x モバイルアプリlaravel x モバイルアプリ
laravel x モバイルアプリ
Masaki Oshikawa
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Akira Inoue
 
次期Office製品群の新しい開発モデルの解説
次期Office製品群の新しい開発モデルの解説次期Office製品群の新しい開発モデルの解説
次期Office製品群の新しい開発モデルの解説kumo2010
 
オラクルGo! 位置情報アプリをクラウドで簡単に作ってみた
オラクルGo! 位置情報アプリをクラウドで簡単に作ってみたオラクルGo! 位置情報アプリをクラウドで簡単に作ってみた
オラクルGo! 位置情報アプリをクラウドで簡単に作ってみた
Yosuke Arai
 
GraphQL入門 (AWS AppSync)
GraphQL入門 (AWS AppSync)GraphQL入門 (AWS AppSync)
GraphQL入門 (AWS AppSync)
Amazon Web Services Japan
 
勉強会force#3 iOSアプリ開発
勉強会force#3 iOSアプリ開発勉強会force#3 iOSアプリ開発
勉強会force#3 iOSアプリ開発Kazuki Nakajima
 
AWS Lambda + Python資料 ver0.94 20160825
AWS Lambda + Python資料 ver0.94 20160825AWS Lambda + Python資料 ver0.94 20160825
AWS Lambda + Python資料 ver0.94 20160825
Yasuharu Suzuki
 
Introduction to extensions and other useful features for developing apps usin...
Introduction to extensions and other useful features for developing apps usin...Introduction to extensions and other useful features for developing apps usin...
Introduction to extensions and other useful features for developing apps usin...
Shotaro Suzuki
 
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティスHTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
アシアル株式会社
 
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web  ~ Progressive Web Apps の実装と応用 ~進化する Web  ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~
Microsoft Azure Japan
 
JavaOne2017参加報告 Microservices topic & approach #jjug
JavaOne2017参加報告 Microservices topic & approach #jjugJavaOne2017参加報告 Microservices topic & approach #jjug
JavaOne2017参加報告 Microservices topic & approach #jjug
Yahoo!デベロッパーネットワーク
 
Ruby開発者のためのHeroku入門
Ruby開発者のためのHeroku入門Ruby開発者のためのHeroku入門
Ruby開発者のためのHeroku入門
Salesforce Developers Japan
 

Similar to CloudSpiral 2014年度 Webアプリ講義(1日目) (20)

XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
 
ハンズオン勉強会 はじめてのJavaScriptとSPARQL
ハンズオン勉強会 はじめてのJavaScriptとSPARQLハンズオン勉強会 はじめてのJavaScriptとSPARQL
ハンズオン勉強会 はじめてのJavaScriptとSPARQL
 
rePiT2015_アジャイルソフトウェア開発教育のためのチケットシステムを用いたプロジェクト定量評価手法
rePiT2015_アジャイルソフトウェア開発教育のためのチケットシステムを用いたプロジェクト定量評価手法rePiT2015_アジャイルソフトウェア開発教育のためのチケットシステムを用いたプロジェクト定量評価手法
rePiT2015_アジャイルソフトウェア開発教育のためのチケットシステムを用いたプロジェクト定量評価手法
 
JAWSDAYS2016 Technical Deep DIVE
JAWSDAYS2016 Technical Deep DIVE JAWSDAYS2016 Technical Deep DIVE
JAWSDAYS2016 Technical Deep DIVE
 
APIMeetup 20170329_ichimura
APIMeetup 20170329_ichimuraAPIMeetup 20170329_ichimura
APIMeetup 20170329_ichimura
 
ochacafe#6 人にもマシンにもやさしいAPIのエコシステム
ochacafe#6 人にもマシンにもやさしいAPIのエコシステムochacafe#6 人にもマシンにもやさしいAPIのエコシステム
ochacafe#6 人にもマシンにもやさしいAPIのエコシステム
 
「お手軽な機械学習サービス」で、ルーティンワークに立ち向かおう!
「お手軽な機械学習サービス」で、ルーティンワークに立ち向かおう!「お手軽な機械学習サービス」で、ルーティンワークに立ち向かおう!
「お手軽な機械学習サービス」で、ルーティンワークに立ち向かおう!
 
20190731 Azure Functions x Line at Azure Tech Lab #4
20190731 Azure Functions x Line at Azure Tech Lab #420190731 Azure Functions x Line at Azure Tech Lab #4
20190731 Azure Functions x Line at Azure Tech Lab #4
 
laravel x モバイルアプリ
laravel x モバイルアプリlaravel x モバイルアプリ
laravel x モバイルアプリ
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
 
次期Office製品群の新しい開発モデルの解説
次期Office製品群の新しい開発モデルの解説次期Office製品群の新しい開発モデルの解説
次期Office製品群の新しい開発モデルの解説
 
オラクルGo! 位置情報アプリをクラウドで簡単に作ってみた
オラクルGo! 位置情報アプリをクラウドで簡単に作ってみたオラクルGo! 位置情報アプリをクラウドで簡単に作ってみた
オラクルGo! 位置情報アプリをクラウドで簡単に作ってみた
 
GraphQL入門 (AWS AppSync)
GraphQL入門 (AWS AppSync)GraphQL入門 (AWS AppSync)
GraphQL入門 (AWS AppSync)
 
勉強会force#3 iOSアプリ開発
勉強会force#3 iOSアプリ開発勉強会force#3 iOSアプリ開発
勉強会force#3 iOSアプリ開発
 
AWS Lambda + Python資料 ver0.94 20160825
AWS Lambda + Python資料 ver0.94 20160825AWS Lambda + Python資料 ver0.94 20160825
AWS Lambda + Python資料 ver0.94 20160825
 
Introduction to extensions and other useful features for developing apps usin...
Introduction to extensions and other useful features for developing apps usin...Introduction to extensions and other useful features for developing apps usin...
Introduction to extensions and other useful features for developing apps usin...
 
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティスHTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
 
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web  ~ Progressive Web Apps の実装と応用 ~進化する Web  ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~
 
JavaOne2017参加報告 Microservices topic & approach #jjug
JavaOne2017参加報告 Microservices topic & approach #jjugJavaOne2017参加報告 Microservices topic & approach #jjug
JavaOne2017参加報告 Microservices topic & approach #jjug
 
Ruby開発者のためのHeroku入門
Ruby開発者のためのHeroku入門Ruby開発者のためのHeroku入門
Ruby開発者のためのHeroku入門
 

CloudSpiral 2014年度 Webアプリ講義(1日目)

  • 1. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク Webアプリ クライアントサイド講義(1日目) 神戸大学 まつ本 真佑 佐伯 幸郎
  • 3. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 6  REST (Roy Fielding)  Webのアーキテクチャスタイル  かなり抽象的な概念,今日は無視  REST (Amazon)  REST API • http://api.openweathermap.org/data/2.5/weather?q=kobe&mode=xml • http://express.heartrails.com/api/json?method=getStations&x=135.2234&y=34.7544 おさらいと再定義 REST APIでアクセスできるシステム HTTPアクセスに対してXML/JSONを返すインタフェース
  • 4. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 7 おさらい サーバサイドクライアントサイド program API data library REST framework
  • 5. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 8 おさらい サーバサイドクライアントサイド program API data library REST framework REST API {json} <xml> http://
  • 6. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 9 おさらい サーバサイド Java Jersey クライアントサイド REST API {json} <xml> program API data library REST framework 自開発サービス http://
  • 7. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 10 おさらい サーバサイド Java Jersey REST API http:// {json} <xml> program API data library REST framework Java Ruby PHPREST API DWRRails REST API REST API クライアントサイド 自開発サービス
  • 8. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 11 おさらい サーバサイド Java Jersey 外部サービス REST API http:// {json} <xml> program API data library REST framework 自開発サービス Java Ruby PHPREST API DWRRails REST API REST API クライアントサイド Java REST API T4J
  • 9. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 12 おさらい サーバサイド Java Jersey 外部サービス REST API http:// {json} <xml> program API data library REST framework 自開発サービス Java Ruby PHPREST API DWRRails REST API REST API クライアントサイド Java REST API T4J REST API REST API
  • 10. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 13 講義の位置付け サーバサイド Java Jersey 外部サービス REST API http:// {json} <xml> program API data library REST framework 自開発サービス Java Ruby PHPREST API DWRRails REST API REST API クライアントサイド Java REST API T4J REST API REST API JS jQuery ① REST APIの呼び出し
  • 11. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 14 講義の位置付け サーバサイド Java Jersey 外部サービス REST API http:// {json} <xml> program API data library REST framework 自開発サービス Java Ruby PHPREST API DWRRails REST API REST API クライアントサイド Java REST API T4J REST API REST API JS jQuery HTML CSS ① REST APIの呼び出し ② 呼び出し結果の処理
  • 12. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 15 講義の位置付け サーバサイド Java Jersey 外部サービス REST API http:// {json} <xml> program API data library REST framework 自開発サービス Java Ruby PHPREST API DWRRails REST API REST API クライアントサイド Java REST API T4J REST API REST API JS jQuery HTML CSS HTML5 API ① REST APIの呼び出し ② 呼び出し結果の処理 ③ HTML5 APIの呼び出し
  • 13. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 16 講義の位置付け サーバサイド Java Jersey 外部サービス REST API http:// {json} <xml> program API data library REST framework 自開発サービス Java Ruby PHPREST API DWRRails REST API REST API クライアントサイド Java REST API T4J REST API REST API JS jQuery HTML CSS HTML5 API ① REST APIの呼び出し ② 呼び出し結果の処理 ③ HTML5 APIの呼び出し 独自 API 独自 API ④ 独自APIの 呼び出し
  • 14. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 17 講義の位置付け サーバサイド Java Jersey 外部サービス REST API http:// {json} <xml> program API data library REST framework 自開発サービス Java Ruby PHPREST API DWRRails REST API REST API クライアントサイド Java REST API T4J REST API REST API JS jQuery HTML CSS HTML5 API ① REST APIの呼び出し ② 呼び出し結果の処理 ③ HTML5 APIの呼び出し 独自 API 独自 API ④ 独自APIの 呼び出し ADSLとの戦い
  • 15. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 18 やらないこと サーバサイド Java Jersey 外部サービス REST API http:// {json} <xml> program API data library REST framework 自開発サービス Java Ruby PHPREST API DWRRails REST API REST API クライアントサイド Java REST API T4J REST API REST API JS jQuery 独自 API 独自 API HTML5 API HTML CSS
  • 16. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 19 講義の位置付け Java サーバサイド Ruby PHPREST API DWR Java Jersey Java REST API T4J Rails REST API REST API HTML5 API REST API REST API REST APIJS jQuery HTML CSS http:// {json} <xml> 独自 API 独自 API program API data library REST framework クライアントサイド 外部サービス自開発サービス
  • 17. Webアプリを1から作れるようになる • 要求~設計 (UML講義) • Java・DB・テスト (前期Spiral) • サーバサイドのRESTサービス化 (小出先生) • クライアントサイドでのAPI呼び出し・UI構築 • クラウド環境への開発アプリのデプロイ GOAL 1/2 By Maurizio D'Arrigo (https://www.flickr.com/photos/keylosa/184606430)
  • 18. GOAL 2/2 By Maurizio D'Arrigo (https://www.flickr.com/photos/keylosa/184606430) また明日▶
  • 19.  10分で分かる.* 10分で分かるJavaScript 10分で分かるjQuery  各種API REST API 演 HTML5 API 演 Google Maps API 演  総合演習 alpaca+ 演 公開サーバへのデプロイ 演  アーキテクチャ設計  pre-PBL
  • 20.  10分で分かる.* 10分で分かるJavaScript 10分で分かるjQuery  各種API REST API 演 HTML5 API 演 Google Maps API 演  総合演習 alpaca+ 演 公開サーバへのデプロイ 演  アーキテクチャ設計  pre-PBL
  • 21. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 24  10分でやるしかないJavaScriptの基礎  全部は無理  混乱してそうなポイントだけフォロー  JavaScriptの基礎力 10分で分かるJavaScriptの基礎 var form = {userId: 'shin', pass: 'shin++'}; // DWR呼び出し SignUpController.execute(form, { callback : function(data) { /*成功時の処理*/ }, exceptionHandler : updateErrorMsg }); 目標 これの意味が分かるように
  • 22. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 25  ChromeでF12 (開発者ツール)  Console をクリック まずは ここでJSを記述して 実行できる
  • 23. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 26  基本的な文法はJavaと同じ おさらい // 変数の代入 var name = 'shin'; var age = 31; // for文 for(var i = 0; i < 10; i++) { console.log('hello, ' + name); } // if文 if (age < 0) { console.log('age must larger than 0'); }
  • 24. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 27  配列と関数 おさらい // 配列の定義 var arr = ['rock', 'metal', 'diving']; console.log(arr[0]); // 配列の追加 arr.push('programming'); // 関数の定義 function func() { console.log('ookini'); } // 関数呼び出し func();
  • 25. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 28  オブジェクト (構造データ) JavaScriptのオブジェクト // オブジェクトの定義 var shin = {name : 'shinsuke'}; // オブジェクトの中身へのアクセス console.log('hi, ' + shin.name); // オブジェクトへの数値の追加 shin.age = 31; // オブジェクトへの配列の追加 shin.hobbies = ['rock', 'metal', 'diving']; console.log('he likes ' + shin.hobbies[0]); ▶ {name:"shinsuke", age:31, hobbies:Array[3]} shinオブジェクトの中身
  • 26. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 29  オブジェクト + 関数 JavaScriptのオブジェクト // オブジェクトへの関数のセット function func() { console.log('ookini'); } shin.say = func; // 呼び出し shin.say(); // (別のやり方) オブジェクトへの無名関数(匿名関数)のセット shin.say = function() { console.log('ookini'); }; ▶ {name:"shinsuke", age:31, hobbies:Array[3], say:function} shinオブジェクトの中身
  • 27. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 30  shinオブジェクトの中身 JavaScriptのオブジェクト ▼ {name:"shinsuke", age:31, hobbies:Array[3], say:function} { name: "shinsuke", age: 31, hobbies: ["rock","metal","diving"], say: function() } データと関数を持つ =属性と操作を持つ
  • 28. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 31  shinオブジェクトの中身 JavaScriptのオブジェクト ▼ {name:"shinsuke", age:31, hobbies:Array[3], say:function} { name: "shinsuke", age: 31, hobbies: ["rock","metal","diving"], say: function() } // JAVAでのクラス宣言 public class Person { public String name; public int age; public List<String> hobbies; public void say() { System.out.println("ookini"); }; // JAVAでのインスタンス化 Person shin = new Person("shinsuke", 31, ・・・); データと関数を持つ =属性と操作を持つ
  • 29. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 32  shinオブジェクトの中身 JavaScriptのオブジェクト // JAVAでのクラス宣言 public class Person { public String name; public int age; public List<String> hobbies; public void say() { System.out.println("ookini"); }; // JAVAでのインスタンス化 Person shin = new Person("shinsuke", 31, ・・・); JavaScriptのオブジェクト ≒ Javaのオブジェクト ▼ {name:"shinsuke", age:31, hobbies:Array[3], say:function} { name: "shinsuke", age: 31, hobbies: ["rock","metal","diving"], say: function() } データと関数を持つ =属性と操作を持つ
  • 30. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 33  DWR呼び出し (再掲) DWR呼び出しの意味を考える var form = {userId: 'shin', pass: 'shin++'}; // DWR呼び出し SignUpController.execute(form, { callback : function(data) { /*成功時の処理*/ }, exceptionHandler : updateErrorMsg });
  • 31. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 34  DWR呼び出し (再掲) DWR呼び出しの意味を考える var form = {userId: 'shin', pass: 'shin++'}; // DWR呼び出し SignUpController.execute(form, { callback : function(data) { /*成功時の処理*/ }, exceptionHandler : updateErrorMsg }); ▶ {userId:"shin", pass:"shin++"} 第1引数の中身 = formオブジェクト = サーバに投げるデータ
  • 32. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 35  DWR呼び出し (再掲) DWR呼び出しの意味を考える var form = {userId: 'shin', pass: 'shin++'}; // DWR呼び出し SignUpController.execute(form, { callback : function(data) { /*成功時の処理*/ }, exceptionHandler : updateErrorMsg }); ▶ {userId:"shin", pass:"shin++"} 第1引数の中身 = formオブジェクト = サーバに投げるデータ 第2引数=2つの関数を持つオブジェクト (無名関数 と updateErrorMsg)
  • 33. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 36  DWR呼び出し (再掲) DWR呼び出しの意味を考える var form = {userId: 'shin', pass: 'shin++'}; // DWR呼び出し SignUpController.execute(form, { callback : function(data) { /*成功時の処理*/ }, exceptionHandler : updateErrorMsg }); ▶ {callback:function, exceptionHandler:function} ▶ {userId:"shin", pass:"shin++"} 第1引数の中身 第2引数の中身 = formオブジェクト = サーバに投げるデータ 第2引数=2つの関数を持つオブジェクト (無名関数 と updateErrorMsg)
  • 34. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 37  いっそ両方非無名関数にする (余談) 改良案? var form = {userId: 'shin', pass: 'shin++'}; // DWR呼び出し SignUpController.execute(form, { callback : updateWelcomeMsg, exceptionHandler : updateErrorMsg }); function updateWelcomeMsg(data) { /*成功時の処理*/ } 余
  • 35. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 38  いっそ両方無名関数にする (余談) 改良案? var form = {userId: 'shin', pass: 'shin++'}; // DWR呼び出し SignUpController.execute(form, { callback : function(data) { /*成功時の処理*/ }, exceptionHandler : function(..) { /*失敗時の処理*/ } }); 余
  • 36. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 39  いっそ両方無名関数にする (余談) 改良案? var form = {userId: 'shin', pass: 'shin++'}; // DWR呼び出し SignUpController.execute(form, { callback : function(data) { /*成功時の処理*/ }, exceptionHandler : function(..) { /*失敗時の処理*/ } }); ご意見ご感想 お待ちしております 余
  • 37. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 40  DWR関数の裏側がどうなっていたか? (余談) コールバックの仕組み var form = {userId: 'shin', pass: 'shin++'}; // DWR呼び出し SignUpController.execute(form, { callback : function(data) { /*成功時の処理*/ }, exceptionHandler : updateErrorMsg }); // DWR関数の裏側 (仮) SignUpController.execute = function(params, funcs) { // javaのメソッドを呼び出す (仮) var response = INVOKE_JAVA_METHOD(params); if (success) funcs.callback(response); else funcs.exceptionHandler(...); } 余
  • 38. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 41  JSのオブジェクト ≒ Javaのオブジェクト  無名関数と非無名関数  宣言の仕方が違うだけ,大差なし (名前空間が違う)  複雑な関数呼び出しを見つけたら・・・ • 落ち着いて{}を探す • {}の中身を外に切り出すのも一つの手 まとめ ▼ {name:"shinsuke", age:31, hobbies:Array[3], say:function} { name: "shinsuke", age: 31, hobbies: ["rock","metal","diving"], say: function() } var funcs = {callback:..., }; SignUpController.execute(form, funcs);
  • 39. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 46  そもそもjQueryとは?  ≠ Japanese Query  ≠ JavaScriptを神言語にしてくれる謎アイテム  = JavaScriptのだるい部分を簡単にしてくれるライブラリ 10分でやるしかないjQueryの基礎 // <hoge id="container"> の中身を空にする document.getElementById('container').innerHTML = null; $('#container').empty(); // <div>の背景を赤色にする document.getElementsByTagName('div')[0].style.background = 'red'; $('div').css('background', 'red');
  • 40. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 47  ただの関数の名前 $の意味 // 下2つは全く同じ $('#container').empty(); jQuery('#container').empty(); // 下2つは全く同じ $('div').css('background', 'red'); jQuery('div').css('background', 'red'); // (補足) JSでは$は特殊記号ではない var $ = 10; $ += 5; console.log($);
  • 41. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 48  http://semooh.jp/jquery/ jQuery日本語リファレンス 困ったらここを読む
  • 42. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 49  DOMの操作 ≒ XML構造データの操作  XML構造のデータって? • 本文のHTML • REST APIから取得したXML  2つの手順  1. 要素を選択する (セレクタ)  2. 要素を操作する jQueryでできること $('#container').empty(); $('div').css('background', 'red');
  • 43. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 50  セレクタ ステップ1.要素を選択する <div id="container"> <p id="title">ゆうすけのページへようこそ!</p> <p class="accent">キリバン踏み逃げ禁止!</p> <a href="http://google.com">googleへ移動</a> </div> <script> // id名で選ぶ $('#container').find(); // クラス名で選ぶ $('.accent').find(); // タグ名で選ぶ $('p').a(); </script>
  • 44. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 51  DOM操作例 ステップ2.要素を操作する 1/2 <div id="container"> <p id="title">ゆうすけのページへようこそ!</p> <p class="accent">キリバン踏み逃げ禁止!</p> <a href="http://google.com">googleへ移動</a> </div> <script> // 指定要素のテキストを書き換える & 属性を書き換える $('a').text('yahooへ移動'); $('a').attr('href', 'http://yahoo.com'); // 指定要素の背景を黄色にする $('#container').css('background', 'yellow'); // 指定要素の最後に要素を追加する $('div').append('<p>©copyright by yusuke</p>'); </script>
  • 45. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 52  DOM操作例 ステップ2.要素を操作する 2/2 <div id="container"> <p id="title">ゆうすけのページへようこそ!</p> <p class="accent">キリバン踏み逃げ禁止!</p> <a href="http://google.com">googleへ移動</a> </div> <script> // 指定要素(複数)のテキストを書き換える $('p').text('this page has moved'); // 指定要素(複数)の0番目だけを空にする $('p').eq(0).text('!!!!!!!!!'); </script>
  • 47.  10分で分かる.* 10分で分かるJavaScript 10分で分かるjQuery  各種API REST API 演 HTML5 API 演 Google Maps API 演  総合演習 alpaca+ 演 公開サーバへのデプロイ 演  アーキテクチャ設計  pre-PBL
  • 48. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 55  Eclipse起動  C:¥pbl¥eclipse.lnk  Eclipse上でSVNチェックアウト  http://192.168.100.10/svn/20140xx/webapp/ • UID:20140xx pass:20140xx  Apache起動  C:¥pbl¥apache.lnk • Windowsセキュリティ警告 → 「許可」 • 本講義の最中は立ち上げっぱなしにしておくこと 準備
  • 49. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 56  ブラウザから動作確認  http://localhost:50080/webapp/  Eclipseで編集  index.html に学籍番号と氏名を書込む  ブラウザで更新  書込んだ内容が反映されているか確認 動作確認
  • 50. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 57 演習題材  alpaca- (アルパカマイナス)  RESTful Web Service  プレゼンにちゃちゃを入れるサービス  演習用に機能を削ったalpaca  前提  サーバサイドは開発完了  公開REST API  http://192.168.100.10:8080/alpaca_cx/api/like  http://192.168.100.10:8080/alpaca_cx/api/comment?msg=hello  http://192.168.100.10:8080/alpaca_cx/api/report alpaca- のWebクライアントを作ろう By Silhouette Design, http://kage-design.com/ x=グループ番号
  • 51. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 58  1. APIをどう呼ぶか  2. 呼び出した結果をどう処理するか REST API利用の2つのポイント $.ajax({ url: 'http://...', success: function(xml) { ... } }); $('total_like', xml).text(); $('message', xml).text();
  • 52. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 59 1. APIをどう呼ぶか (1/2) // 引数なし・返り値なし (/api/like等) $.ajax({ url: 'http://.../api/like' }); // 引数あり・返り値なし (/api/comment?msg=hello等) $.ajax({ url: 'http://.../api/comment', data: {msg: 'hello'} });
  • 53. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 60 1. APIをどう呼ぶか (2/2) // 引数なし・返り値あり (/api/report等) $.ajax({ url: 'http://.../api/report', success: function(xml) { // 成功時の処理 } });
  • 54. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 61 2. 呼び出した結果をどう処理するか // report APIの返り値を用意 (ダミーデータ) var xml = '<report><comment><date>2014-08-27T14:42:02.284+0900</date><message>さようなら</message></comment><comment><date>2014-08-27T14:41:55.220+0900</date><message>こんにちは</message></comment><presenter>c0</presenter><total_like>15</total_like></report>'; // <name>の中のテキストを取り出す console.log($('total_like', xml).text()); // <message>の中のテキストを取り出す (失敗例) console.log($('message', xml).text()); // <message>の中のテキストを一つずつ取り出す var messages = $('message', xml); for (var i = 0; i < messages.size(); i++) { console.log(messages.eq(i).text()); } // (スマートなやり方) $.each()を使う (略) <report> <comment> <date>2014-08-27T14:42:02.284+ <message>さようなら</message> </comment> <comment> <date>2014-08-27T14:41:55.220+ <message>こんにちは</message> </comment> <presenter>c0</presenter> <total_like>15</total_like> </report>
  • 55. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 62  役に立ちそうなコードの断片集 (おまけ) コードスニペット (1/2) // 指定要素の中に要素を追加 $('#board').append('<p>!!!</p>'); // <input type="text">の入力内容を消す ([]を使った属性フィルタ) $('input[type="text"]').val(''); // id="submit" を押下した際の処理を定義 $('#like').click(function(){ console.log('clicked!'); }); // 1秒ごとに実行する window.setInterval(function() { console.log('looping...'); }, 1000);
  • 56. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 63  役に立ちそうなコードの断片集 (おまけ) コードスニペット (2/2) // API呼び出しに失敗した際の処理を定義する $.ajax({ url : 'http://.../', success: function(data) {}, error: function(xhr, status, error) { console.log(error.message); } });
  • 57. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 64 演習1: alpaca- クライアント 演  4つの機能を完成させよう  いいねの投稿  いいね回数の表示  コメントの投稿  コメントの表示  開発対象のソースコード  alpaca.html (ひな形)  js/alpaca.js (開発のメイン部分)  css/default.css (任意) 動作イメージ
  • 58. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 65  Wikipediaより  キーワード: 「非同期通信」 & 「インターフェイスの構築」  論より証拠,次ページへ (余談) Ajaxって何? 余 ウェブブラウザ内で非同期通信とインターフェイスの構築などを 行う技術の総称。通信結果に応じてダイナミックHTMLで動的に ページの一部を書き換えるというアプローチを取る。 http://ja.wikipedia.org/wiki/Ajax
  • 59. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 67  サンプル  http://localhost:50080/webapp/example/ajax.html Ajaxによる非同期通信 <body> <textarea></textarea><br> <img src="image/alpaca-half.png"> <script src="js/jquery-2.1.1.min.js"></script> <script> // 処理に時間のかかる重たいAPI(仮)を呼び出す $.ajax({ url : 'http://192.168.100.10:8080/lama/api/heavy', async : true, // 非同期にするかどうか (デフォルトではtrue) }); </script> </body> 余 ブラウザの挙動とは非同期にサーバ通信可能 =ブラウザが固まらない
  • 60. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 68  サンプル  https://twitter.com/signup Ajaxによるインタフェースの構築 余 画面遷移なしにサーバと通信できる =動的なWebアプリが作れる
  • 61. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 69  Wikipediaより  非同期通信  ブラウザの挙動とは非同期にサーバ通信可能  インターフェイスの構築  画面遷移なしにサーバと通信できる Ajaxまとめ 余 ウェブブラウザ内で非同期通信とインターフェイスの構築などを 行う技術の総称。通信結果に応じてダイナミックHTMLで動的に ページの一部を書き換えるというアプローチを取る。 http://ja.wikipedia.org/wiki/Ajax リアルタイム & インタラクティブなWebアプリが可能
  • 62.  10分で分かる.* 10分で分かるJavaScript 10分で分かるjQuery  各種API REST API 演 HTML5 API 演 Google Maps API 演  総合演習 alpaca+ 演 公開サーバへのデプロイ 演  アーキテクチャ設計  pre-PBL
  • 63. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 71  WWWの登場 ('89)  構造文章の閲覧,ハイパーリンク  Mosaic登場 & CSS勧告 ('94-'96)  構造文章の閲覧,ハイパーリンク,装飾,画像  HTML5の登場 ('08)  構造文章の閲覧,ハイパーリンク,装飾,画像,音声,動画,オフラ インアプリ,現在地取得,図の描画,Webストレージ(DB),マルチス レッド,ローカルファイル操作,双方向通信,バッテリー状況取得, Drag&Drop,カメラ・・・ ブラウザ & HTMLの進化 ・・・ 混乱期 (ブラウザ戦争 & W3C vs WHATWG)
  • 64. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 72  題材: 国際会議への投稿&発表  実験 • 開発環境 (Eclipse Orion),結果集計 (Google Spreadsheet)  論文執筆 • Tex執筆・コンパイル (Google Drive + Latexlab) • 関連研究調査 (Google Scholar),音楽・動画 (Amazon MP3/Youtube) • 発表申し込み・投稿 (Easychair)  旅程計画 • 航空券,ホテル (各Webサイト)  発表 • スライド作成・発表 (Google Drive) • 写真撮影 (WebRTC API),写真管理 (Picasa) ブラウザでできること
  • 65. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 73  題材: 国際会議への投稿&発表  実験 • 開発環境 (Eclipse Orion),結果集計 (Google Spreadsheet)  論文執筆 • Tex執筆・コンパイル (Google Drive + Latexlab) • 関連研究調査 (Google Scholar),音楽・動画 (Amazon MP3/Youtube) • 発表申し込み・投稿 (Easychair)  旅程計画 • 航空券,ホテル (各Webサイト)  発表 • スライド作成・発表 (Google Drive) • 写真撮影 (WebRTC API),写真管理 (Picasa) ブラウザでできること
  • 66. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 74  ユーザの現在地情報を取得するAPI  HTML5 APIの一つ  携帯端末との相性が良い  WiFi/携帯基地局/GPS/IPアドレスなどから計算される • 具体的な方法はブラウザに依存  プライバシーの問題もあるのでオプトイン型  ユーザの許可が必須 Geolocation API
  • 67. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 75 Geolocation APIの使い方 ▼ geolocationAPI対応のブラウザか調べる if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showLocation,showError); } else { alert('not supported'); }; function showLocation(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; // 取得した座標をブラウザに表示する (未完成) } function showError(error) { // エラーメッセージを表示する (未完成) } ▲座標を取得する -第1引数: 成功時の関数 (showLocation) -第2引数: 失敗時の関数 (showError)
  • 68. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 76  地図オブジェクトを取得するAPI  XMLやJSONを返すサービスではない  非REST型,独自仕様のAPI  マニュアル必須 •https://developers.google.com/maps/documentation/javascript/ examples/ Google Maps API
  • 69. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 77 Google Maps APIの使い方 // gmaps専用の緯度経度オブジェクトを作る (座標は任意) var latlng = new google.maps.LatLng(latitude, longitude); // 地図のオプションを決める var opts = {zoom : 16, center : latlng}; // 地図を描画 (<hoge id="map">のHTML要素に地図を書込む) map = new google.maps.Map($('#map').get(0), opts); // (おまけ) 地図上にマーカーを落とす new google.maps.Marker({position : latlng, map : map});
  • 70. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 78  現在位置の緯度経度をテキストで表示しよう  geo.html  js/geo.js  現在位置の地図を表示しよう  geomap.html  js/geomap.js 演習2: Geolocation & Maps API 演
  • 71. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 79  Chrome開発者ツールより (余談) Geolocation APIをごまかす ▼ ①emulationを有効化 ▼②クリック 余
  • 72. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 80  HTML5 APIの一つ  カメラを制御できる  http://localhost:50080/webapp/example/camera.html (余談) WebRTC API 余
  • 73.  10分で分かる.* 10分で分かるJavaScript 10分で分かるjQuery  各種API REST API 演 HTML5 API 演 Google Maps API 演  総合演習 alpaca+ 演 公開サーバへのデプロイ 演  アーキテクチャ設計  pre-PBL
  • 74. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 82  地図を表示する機能  地図を移動する機能  コメント欄に入力された緯度経度に地図を飛ばす  現在地を書込む機能  ボタンを押すとコメント欄に現在地が入力される alpaca+ を作ろう 夜この店いかん? {35.000 135.000} 投稿 {35.000 135.000} 投稿 現在地 演
  • 75.  10分で分かる.* 10分で分かるJavaScript 10分で分かるjQuery  各種API REST API 演 HTML5 API 演 Google Maps API 演  総合演習 alpaca+ 演 公開サーバへのデプロイ 演  アーキテクチャ設計  pre-PBL
  • 78. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 86  Google JavaScript Style Guide 和訳  http://cou929.nu/data/google_javascript_style_guide/ • '' と "" をどう使い分けるか? • ファイルの命名規則をどうすべきか? • ・・・  認証なしで利用できるオープンAPIリスト  http://192.168.100.10/docs/2014/0903_webapp/openapis.txt 参考URL
  • 79. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 87  サーバサイド言語: Java  RESTフレームワーク: Jersey  サーブレットコンテナ: Tomcat  DB: MongoDB alpaca-のシステムアーキテクチャ C:¥> mongo 192.168.100.10 MongoDB shell version: 2.4.4 connecting to: 192.168.100.10/test > use alpaca > show collections comment like system.indexes >
  • 80. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 88  XML文書にアクセスするためのインタフェース  ブラウザ上でJSからXMLを操作するためのAPI  JSでDOMを操作する ≒ HTMLを操作する  昔はブラウザごとにDOMが異なっていた 特にIE*  =ブラウザによってDOMが異なる  =Web開発者は死ぬ  jQueryはこの問題も解決してくれる DOMって何? document.getElementById('container').innerHTML = null; * W3C DOM Compatibility, http://www.quirksmode.org/compatibility.html コレ コレ
  • 81. Cloud Specialist Program Initiative for Reality-based Advanced Learning 分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2014/9/3,4 89 参考図書