cloudspiral 2014年度 webアプリ講義（1日目）

Cloud Specialist Program Initiative for Reality-based Advanced Learning

分野・地域を越えた実践的情報教育協働ネットワーク

Webアプリクライアントサイド講義（1日目）

神戸大学

まつ本真佑

佐伯幸郎

まつしん

柗本真佑

@shinsuke_mat

好きな言語

1位．JavaScript

2位．Perl

3位．Java

2013 @Hawaii, US


分野・地域を越えた実践的情報教育協働ネットワーク© 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を返すインタフェース

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



おさらい

サーバサイドクライアントサイド

programAPIdata

libraryREST framework



おさらい

サーバサイドクライアントサイド

programAPIdata


RESTAPI

{json}

<xml>

http://



おさらい

サーバサイド

Java

Jersey

クライアントサイド

RESTAPI

{json}

<xml>

programAPIdata


自開発サービス

http://



おさらい

サーバサイド

Java

JerseyREST

API

http://

{json}

<xml>

programAPIdata


Java

Ruby

PHPRESTAPI

DWR

RailsREST

API

RESTAPI





おさらい

サーバサイド

Java

Jersey

外部サービス

RESTAPI

http://

{json}

<xml>

programAPIdata



Java

Ruby

PHPRESTAPI

DWR

RailsREST

API

RESTAPI


JavaRESTAPI

T4J



おさらい

サーバサイド

Java

Jersey

外部サービス

RESTAPI

http://

{json}

<xml>

programAPIdata



Java

Ruby

PHPRESTAPI

DWR

RailsREST

API

RESTAPI


JavaRESTAPI

T4J

RESTAPI

RESTAPI



講義の位置付け

サーバサイド

Java

Jersey

外部サービス

RESTAPI

http://

{json}

<xml>

programAPIdata



Java

Ruby

PHPRESTAPI

DWR

RailsREST

API

RESTAPI


JavaRESTAPI

T4J

RESTAPI

RESTAPI

JSjQuery

① REST APIの呼び出し




サーバサイド

Java

Jersey

外部サービス

RESTAPI

http://

{json}

<xml>

programAPIdata



Java

Ruby

PHPRESTAPI

DWR

RailsREST

API

RESTAPI


JavaRESTAPI

T4J

RESTAPI

RESTAPI

JSjQuery

HTML

CSS


② 呼び出し結果の処理




サーバサイド

Java

Jersey

外部サービス

RESTAPI

http://

{json}

<xml>

programAPIdata



Java

Ruby

PHPRESTAPI

DWR

RailsREST

API

RESTAPI


JavaRESTAPI

T4J

RESTAPI

RESTAPI

JSjQuery

HTML

CSS

HTML5API



③ HTML5 APIの呼び出し




サーバサイド

Java

Jersey

外部サービス

RESTAPI

http://

{json}

<xml>

programAPIdata



Java

Ruby

PHPRESTAPI

DWR

RailsREST

API

RESTAPI


JavaRESTAPI

T4J

RESTAPI

RESTAPI

JSjQuery

HTML

CSS

HTML5API




独自API

独自API

④ 独自APIの呼び出し




サーバサイド

Java

Jersey

外部サービス

RESTAPI

http://

{json}

<xml>

programAPIdata



Java

Ruby

PHPRESTAPI

DWR

RailsREST

API

RESTAPI


JavaRESTAPI

T4J

RESTAPI

RESTAPI

JSjQuery

HTML

CSS

HTML5API




独自API

独自API

④ 独自APIの呼び出し

ADSLとの戦い



やらないこと

サーバサイド

Java

Jersey

外部サービス

RESTAPI

http://

{json}

<xml>

programAPIdata



Java

Ruby

PHPRESTAPI

DWR

RailsREST

API

RESTAPI


JavaRESTAPI

T4J

RESTAPI

RESTAPI

JSjQuery

独自API

独自API

HTML5API

HTML

CSS




Java

サーバサイド

Ruby

PHPRESTAPI

DWR

Java

Jersey

JavaRESTAPI

T4J

Rails

RESTAPI

RESTAPI

HTML5API

RESTAPI

RESTAPI

RESTAPIJS

jQuery

HTML

CSS

http://

{json}

<xml>

独自API

独自API

programAPIdata



外部サービス自開発サービス

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

各種APIREST API 演

HTML5 API 演

Google Maps API 演

総合演習alpaca+ 演

公開サーバへのデプロイ演

アーキテクチャ設計

pre-PBL



10分でやるしかないJavaScriptの基礎全部は無理

混乱してそうなポイントだけフォロー

JavaScriptの基礎力

10分で分かるJavaScriptの基礎

var form = {userId: 'shin', pass: 'shin++'};

// DWR呼び出しSignUpController.execute(form, {callback : function(data) { /*成功時の処理*/ },exceptionHandler : updateErrorMsg

});

目標これの意味が分かるように



ChromeでF12 （開発者ツール） Console をクリック

まずは

ここでJSを記述して実行できる



基本的な文法は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');

}



配列と関数

おさらい

// 配列の定義var arr = ['rock', 'metal', 'diving'];console.log(arr[0]);

// 配列の追加arr.push('programming');

// 関数の定義function func() {

console.log('ookini');}

// 関数呼び出しfunc();



オブジェクト（構造データ）

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オブジェクトの中身



オブジェクト＋関数


// オブジェクトへの関数のセット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}






▼ {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, ･･･);






// 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のオブジェクト






DWR呼び出し（再掲）

DWR呼び出しの意味を考える

var form = {userId: 'shin', pass: 'shin++'};// DWR呼び出しSignUpController.execute(form, {callback : function(data) { /*成功時の処理*/ },exceptionHandler : updateErrorMsg

});






});

▶ {userId:"shin", pass:"shin++"}

第1引数の中身＝ formオブジェクト＝サーバに投げるデータ






});


第1引数の中身＝ formオブジェクト＝サーバに投げるデータ

第2引数＝2つの関数を持つオブジェクト（無名関数と updateErrorMsg）






});

▶ {callback:function, exceptionHandler:function}


第1引数の中身

第2引数の中身

＝ formオブジェクト＝サーバに投げるデータ

第2引数＝2つの関数を持つオブジェクト（無名関数と updateErrorMsg）



いっそ両方非無名関数にする

（余談）改良案？

var form = {userId: 'shin', pass: 'shin++'};// DWR呼び出しSignUpController.execute(form, {callback : updateWelcomeMsg,exceptionHandler : updateErrorMsg

});

function updateWelcomeMsg(data) {/*成功時の処理*/

}

余



いっそ両方無名関数にする


var form = {userId: 'shin', pass: 'shin++'};// DWR呼び出しSignUpController.execute(form, {callback : function(data) { /*成功時の処理*/ },exceptionHandler : function(..) { /*失敗時の処理*/ }

});

余



いっそ両方無名関数にする


var form = {userId: 'shin', pass: 'shin++'};// DWR呼び出しSignUpController.execute(form, {callback : function(data) { /*成功時の処理*/ },exceptionHandler : function(..) { /*失敗時の処理*/ }

});

ご意見ご感想お待ちしております

余



DWR関数の裏側がどうなっていたか？

（余談）コールバックの仕組み


});

// DWR関数の裏側（仮）SignUpController.execute = function(params, funcs) {// javaのメソッドを呼び出す（仮）var response = INVOKE_JAVA_METHOD(params);

if (success) funcs.callback(response);else funcs.exceptionHandler(...);

}

余



JSのオブジェクト ≒ Javaのオブジェクト

無名関数と非無名関数宣言の仕方が違うだけ，大差なし（名前空間が違う）

複雑な関数呼び出しを見つけたら･･･• 落ち着いて{}を探す

• {}の中身を外に切り出すのも一つの手

まとめ



var funcs = {callback:..., };SignUpController.execute(form, funcs);



そもそも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');



ただの関数の名前

$の意味

// 下2つは全く同じ$('#container').empty();jQuery('#container').empty();

// 下2つは全く同じ$('div').css('background', 'red');jQuery('div').css('background', 'red');

// （補足） JSでは$は特殊記号ではないvar $ = 10;$ += 5;console.log($);



http://semooh.jp/jquery/

jQuery日本語リファレンス

困ったらここを読む

http://semooh.jp/jquery/



DOMの操作 ≒ XML構造データの操作 XML構造のデータって？

• 本文のHTML

• REST APIから取得したXML

2つの手順 1. 要素を選択する（セレクタ）

2. 要素を操作する

jQueryでできること

$('#container').empty();$('div').css('background', 'red');



セレクタ

ステップ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>



DOM操作例

ステップ2．要素を操作する 1/2


</div><script>// 指定要素のテキストを書き換える & 属性を書き換える$('a').text('yahooへ移動');$('a').attr('href', 'http://yahoo.com');

// 指定要素の背景を黄色にする$('#container').css('background', 'yellow');

// 指定要素の最後に要素を追加する$('div').append('<p>©copyright by yusuke</p>');

</script>

http://yahoo.com



DOM操作例

ステップ2．要素を操作する 2/2


</div><script>// 指定要素（複数）のテキストを書き換える$('p').text('this page has moved');

// 指定要素（複数）の0番目だけを空にする$('p').eq(0).text('！！！！！！！！！');

</script>

1. 要素を選択

↓2. 要素を操作 →




HTML5 API 演

Google Maps API 演




pre-PBL



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セキュリティ警告 → 「許可」

• 本講義の最中は立ち上げっぱなしにしておくこと

準備

http://192.168.100.10/svn/20140xx/webapp/



ブラウザから動作確認 http://localhost:50080/webapp/

Eclipseで編集 index.html に学籍番号と氏名を書込む

ブラウザで更新書込んだ内容が反映されているか確認

動作確認

http://localhost:50080/webapp/



演習題材

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=グループ番号

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/report



1. APIをどう呼ぶか

2. 呼び出した結果をどう処理するか

REST API利用の2つのポイント

$.ajax({url: 'http://...',success: function(xml) { ... }

});

$('total_like', xml).text();$('message', xml).text();



1. APIをどう呼ぶか（1/2）

// 引数なし・返り値なし (/api/like等)$.ajax({

url: 'http://.../api/like'});

// 引数あり・返り値なし (/api/comment?msg=hello等)$.ajax({

url: 'http://.../api/comment',data: {msg: 'hello'}

});



1. APIをどう呼ぶか（2/2）

// 引数なし・返り値あり (/api/report等)$.ajax({

url: 'http://.../api/report',success: function(xml) {// 成功時の処理

}});



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+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>



役に立ちそうなコードの断片集

（おまけ）コードスニペット（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);



役に立ちそうなコードの断片集

（おまけ）コードスニペット（2/2）

// API呼び出しに失敗した際の処理を定義する$.ajax({

url : 'http://.../',success: function(data) {},error: function(xhr, status, error) {console.log(error.message);

}});



演習1： alpaca- クライアント演

4つの機能を完成させよういいねの投稿

いいね回数の表示

コメントの投稿

コメントの表示

開発対象のソースコード alpaca.html （ひな形）

js/alpaca.js （開発のメイン部分）

css/default.css (任意)

動作イメージ



Wikipediaより

キーワード：「非同期通信」 & 「インターフェイスの構築」論より証拠，次ページへ

（余談） Ajaxって何？余

ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。

http://ja.wikipedia.org/wiki/Ajax



サンプル 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>

余

ブラウザの挙動とは非同期にサーバ通信可能＝ブラウザが固まらない

http://localhost:50080/webapp/ajax.html



サンプル https://twitter.com/signup

Ajaxによるインタフェースの構築余

画面遷移なしにサーバと通信できる＝動的なWebアプリが作れる

https://twitter.com/signup



Wikipediaより

非同期通信ブラウザの挙動とは非同期にサーバ通信可能

インターフェイスの構築画面遷移なしにサーバと通信できる

Ajaxまとめ余

ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。

http://ja.wikipedia.org/wiki/Ajax

リアルタイム & インタラクティブなWebアプリが可能




HTML5 API 演

Google Maps API 演




pre-PBL



WWWの登場（'89）構造文章の閲覧，ハイパーリンク

Mosaic登場 & CSS勧告（'94-'96）構造文章の閲覧，ハイパーリンク，装飾，画像

HTML5の登場（'08）構造文章の閲覧，ハイパーリンク，装飾，画像，音声，動画，オフラ

インアプリ，現在地取得，図の描画，Webストレージ（DB），マルチスレッド，ローカルファイル操作，双方向通信，バッテリー状況取得，Drag&Drop，カメラ･･･

ブラウザ & HTMLの進化

・・・混乱期（ブラウザ戦争 & W3C vs WHATWG）



題材：国際会議への投稿＆発表実験

• 開発環境（Eclipse Orion），結果集計（Google Spreadsheet）

論文執筆• Tex執筆・コンパイル（Google Drive + Latexlab）

• 関連研究調査（Google Scholar），音楽・動画（Amazon MP3/Youtube）

• 発表申し込み・投稿（Easychair）

旅程計画• 航空券，ホテル（各Webサイト）

発表• スライド作成・発表（Google Drive）

• 写真撮影（WebRTC API），写真管理（Picasa）

ブラウザでできること



ユーザの現在地情報を取得するAPI HTML5 APIの一つ

携帯端末との相性が良い

WiFi/携帯基地局/GPS/IPアドレスなどから計算される• 具体的な方法はブラウザに依存

プライバシーの問題もあるのでオプトイン型ユーザの許可が必須

Geolocation API



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)



地図オブジェクトを取得するAPI XMLやJSONを返すサービスではない

非REST型，独自仕様のAPI

マニュアル必須• https://developers.google.com/maps/documentation/javascript/examples/

Google Maps API

https://developers.google.com/maps/documentation/javascript/examples/



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});



現在位置の緯度経度をテキストで表示しよう geo.html

js/geo.js

現在位置の地図を表示しよう geomap.html

js/geomap.js

演習2： Geolocation & Maps API演



Chrome開発者ツールより

（余談） Geolocation APIをごまかす

▼ ①emulationを有効化 ▼②クリック

余



HTML5 APIの一つカメラを制御できる

http://localhost:50080/webapp/example/camera.html

（余談） WebRTC API余

http://localhost:50080/webapp/example/camera.html




HTML5 API 演

Google Maps API 演




pre-PBL



地図を表示する機能

地図を移動する機能コメント欄に入力された緯度経度に地図を飛ばす

現在地を書込む機能ボタンを押すとコメント欄に現在地が入力される

alpaca+ を作ろう

夜この店いかん？ {35.000 135.000} 投稿

{35.000 135.000} 投稿現在地

演




HTML5 API 演

Google Maps API 演




pre-PBL

また明日▶

分野・地域を越えた実践的情報教育協働ネットワーク


参考資料



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

http://cou929.nu/data/google_javascript_style_guide/

http://192.168.100.10/docs/2014/0903_webapp/openapis.txt



サーバサイド言語： Java

RESTフレームワーク： Jersey

サーブレットコンテナ： Tomcat

DB： MongoDB

alpaca-のシステムアーキテクチャ

C:¥> mongo 192.168.100.10MongoDB shell version: 2.4.4connecting to: 192.168.100.10/test> use alpaca> show collectionscommentlikesystem.indexes>



XML文書にアクセスするためのインタフェースブラウザ上でJSからXMLを操作するためのAPI

JSでDOMを操作する ≒ HTMLを操作する

昔はブラウザごとにDOMが異なっていた特にIE*

＝ブラウザによってDOMが異なる

＝Web開発者は死ぬ

ｊQueryはこの問題も解決してくれる

DOMって何？

document.getElementById('container').innerHTML = null;

* W3C DOM Compatibility, http://www.quirksmode.org/compatibility.html

コレコレ



参考図書

cloudspiral 2014年度 webアプリ講義（1日目）

Education