Web area 2013-07-16

35
Webエリア

description

sample database posted on GitHub: https://github.com/miyako/4d-training-web-area

Transcript of Web area 2013-07-16

Page 1: Web area 2013-07-16

Webエリア

Page 2: Web area 2013-07-16

Webエリア

Page 3: Web area 2013-07-16

Webエリア

Webブラウザと同等の機能を有するフォームオブジェクト

Page 4: Web area 2013-07-16

Webエリア

Webブラウザと同等の機能を有するフォームオブジェクト

Webサービスを融合

Page 5: Web area 2013-07-16

Webエリア

Webブラウザと同等の機能を有するフォームオブジェクト

Webサービスを融合JSライブラリを利用

Page 6: Web area 2013-07-16

Webエリア

Webブラウザと同等の機能を有するフォームオブジェクト

Webサービスを融合JSライブラリを利用 }マッシュアップ

Page 7: Web area 2013-07-16

Webエリア

Webブラウザと同等の機能を有するフォームオブジェクト

Webサービスを融合JSライブラリを利用 }マッシュアップリモート

ローカル

Page 8: Web area 2013-07-16

Google Maps

マッシュアップ

https://developers.google.com/maps/documentation/javascript/tutorial#api_key

Page 9: Web area 2013-07-16

Google Maps

マッシュアップ

WA OPEN URL(*;OBJECT Get name(Object current);$url)

Page 10: Web area 2013-07-16

Google Maps

マッシュアップ

WA OPEN URL(*;OBJECT Get name(Object current);$url)

システムパスまたはURLを指定

Page 11: Web area 2013-07-16

Google Maps

マッシュアップ

WA OPEN URL(*;OBJECT Get name(Object current);$url)

システムパスまたはURLを指定

システムパスC:¥MyFolder¥My File.html

システムパスMacintosh HD:MyFolder:My File.html

URLfile:///C:/MyFolder/My%20File.html

URLfile:///MyFolder/My%20File.html

Page 12: Web area 2013-07-16

Google Maps

マッシュアップ

ARRAY TEXT($patterns;1)ARRAY BOOLEAN($access;1)

$patterns{1}:="webarea://*"$access{1}:=False

WA SET URL FILTERS(*;OBJECT Get name(Object current);$patterns;$access)

Page 13: Web area 2013-07-16

Google Maps

マッシュアップ

ARRAY TEXT($patterns;1)ARRAY BOOLEAN($access;1)

$patterns{1}:="webarea://*"$access{1}:=False

WA SET URL FILTERS(*;OBJECT Get name(Object current);$patterns;$access)

コールバックURLを設定

Page 14: Web area 2013-07-16

Google Maps

マッシュアップ

WA EXECUTE JAVASCRIPT FUNCTION(*;"Wa0";"codeAddress";...)

function codeAddress(address) {! ! ! ! geocoder.geocode( { 'address': address}, function(results, status) {! ! ! ! ! if (status == google.maps.GeocoderStatus.OK) {! ! ! ! ! ! map.setCenter(results[0].geometry.location);! ! ! ! ! ! var marker = new google.maps.Marker({! ! ! ! ! ! ! map: map,! ! ! ! ! ! ! position: results[0].geometry.location! ! ! ! ! ! });! ! ! ! ! ! window.location = "webarea://geocode/success/" + status;! ! ! ! ! } else {! ! ! ! ! ! window.location = "webarea://geocode/failure/" + status;!//!alert('Geocode was not successful for the following reason: ' + status);! ! ! ! ! }! ! ! ! });! ! ! }

Page 15: Web area 2013-07-16

Google Maps

マッシュアップ

WA EXECUTE JAVASCRIPT FUNCTION(*;"Wa0";"codeAddress";...)

function codeAddress(address) {! ! ! ! geocoder.geocode( { 'address': address}, function(results, status) {! ! ! ! ! if (status == google.maps.GeocoderStatus.OK) {! ! ! ! ! ! map.setCenter(results[0].geometry.location);! ! ! ! ! ! var marker = new google.maps.Marker({! ! ! ! ! ! ! map: map,! ! ! ! ! ! ! position: results[0].geometry.location! ! ! ! ! ! });! ! ! ! ! ! window.location = "webarea://geocode/success/" + status;! ! ! ! ! } else {! ! ! ! ! ! window.location = "webarea://geocode/failure/" + status;!//!alert('Geocode was not successful for the following reason: ' + status);! ! ! ! ! }! ! ! ! });! ! ! }

URLをコールバック

Page 16: Web area 2013-07-16

Google Maps

マッシュアップ

WA EXECUTE JAVASCRIPT FUNCTION(*;"Wa0";"codeAddress";...)

function codeAddress(address) {! ! ! ! geocoder.geocode( { 'address': address}, function(results, status) {! ! ! ! ! if (status == google.maps.GeocoderStatus.OK) {! ! ! ! ! ! map.setCenter(results[0].geometry.location);! ! ! ! ! ! var marker = new google.maps.Marker({! ! ! ! ! ! ! map: map,! ! ! ! ! ! ! position: results[0].geometry.location! ! ! ! ! ! });! ! ! ! ! ! window.location = "webarea://geocode/success/" + status;! ! ! ! ! } else {! ! ! ! ! ! window.location = "webarea://geocode/failure/" + status;!//!alert('Geocode was not successful for the following reason: ' + status);! ! ! ! ! }! ! ! ! });! ! ! }

URLをコールバック

On URL Filtering

Page 17: Web area 2013-07-16

Google Maps

マッシュアップ

Page 18: Web area 2013-07-16

Google Maps

マッシュアップ

GET PICTURE METADATA($Image->;GPS Latitude Deg;$degrees)GET PICTURE METADATA($Image->;GPS Latitude Min;$minutes)GET PICTURE METADATA($Image->;GPS Latitude Sec;$seconds)GET PICTURE METADATA($Image->;GPS Latitude Dir;$dir)

度分秒向 66,52,21N

度数(10進数) 66.87016

$Latitude->:=$degrees+($minutes*(100/6000))+($seconds*(100/600000))

$Latitude->:=$Latitude->*(Choose($dir="S";-1;1))

Page 19: Web area 2013-07-16

FusionCharts Free

マッシュアップ

http://www.fusioncharts.com/goodies/fusioncharts-free/

Page 20: Web area 2013-07-16

FusionCharts Free

マッシュアップ

Page 21: Web area 2013-07-16

メリット デメリット

フリー

XMLデータ

FusionCharts Free

マッシュアップ

Page 22: Web area 2013-07-16

メリット デメリット

フリー

XMLデータ

FusionCharts Free

マッシュアップ

Page 23: Web area 2013-07-16

FusionCharts Free

マッシュアップ

Page 24: Web area 2013-07-16

FusionCharts Free

マッシュアップ

Page 25: Web area 2013-07-16

FusionCharts Free

マッシュアップ

WA SET PREFERENCE(*;...;wa enable plugins;False)

Page 26: Web area 2013-07-16

FusionCharts Free

マッシュアップ

WA SET PREFERENCE(*;...;wa enable plugins;False)プラグインの使用を禁止

Page 27: Web area 2013-07-16

FusionCharts Free

マッシュアップ

XML SET OPTIONS($dom;XML Indentation;XML No indentation)

DOM EXPORT TO VAR($dom;$xml)DOM CLOSE XML($dom)

WA EXECUTE JAVASCRIPT FUNCTION(*;"Wa0";...;$xml)

Page 28: Web area 2013-07-16

FusionCharts Free

マッシュアップ

XML SET OPTIONS($dom;XML Indentation;XML No indentation)

DOM EXPORT TO VAR($dom;$xml)DOM CLOSE XML($dom)

WA EXECUTE JAVASCRIPT FUNCTION(*;"Wa0";...;$xml)XMLに改行コードが含まれてはいけない

Page 29: Web area 2013-07-16

マッシュアップ

Page 30: Web area 2013-07-16

http://www.highcharts.com/

Page 31: Web area 2013-07-16

http://d3js.org

Data-Driven Documents

Page 34: Web area 2013-07-16

http://www.jscharts.comhttp://www.chartjs.orghttp://www.ejschart.comhttp://www.rgraph.netdevelopers.google.comhttp://www.amcharts.comhttp://philogb.github.io/jit/index.htmlhttp://g.raphaeljs.comhttp://www.flotcharts.orghttp://www.sencha.com/products/extjs/http://www.zingchart.comhttp://omnipotent.net/jquery.sparkline/http://www.arcadiacharts.comhttp://bluff.jcoglan.comhttp://techoctave.com/charts/http://www.jqplot.comhttp://code.shutterstock.com/rickshaw/

Other Libraries

Page 35: Web area 2013-07-16

Webエリア