wakanda#5

107
Shibuya, Tokyo Wakanda presented by 勉強会 #5 2013-10-8

Upload: kmiyako

Post on 12-May-2015

705 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Wakanda#5

Shibuya, Tokyo

Wakanda

presented by

勉強会 #52013-10-8

Page 2: Wakanda#5

Shibuya, Tokyo

Wakanda 6

agenda

http://www.wakanda.org/roadmap

Page 3: Wakanda#5

Shibuya, Tokyo

design

studio enhancements

Page 4: Wakanda#5

Shibuya, Tokyo

design

studio enhancements

ページ間のコピー&ペースト

Page 5: Wakanda#5

Shibuya, Tokyo

design

studio enhancements

ページ間のコピー&ペースト

足りない重要ファイルを赤字で強調

Page 6: Wakanda#5

Shibuya, Tokyo

design

studio enhancements

ページ間のコピー&ペースト

足りない重要ファイルを赤字で強調

Page 7: Wakanda#5

Shibuya, Tokyo

design

studio enhancements

ページ間のコピー&ペースト

足りない重要ファイルを赤字で強調

z-order

Page 8: Wakanda#5

Shibuya, Tokyo

design

studio enhancements

ページ間のコピー&ペースト

足りない重要ファイルを赤字で強調

WAK5

WAK6

z-order

Page 9: Wakanda#5

Shibuya, Tokyo

video

widget

~WAK4

WAK5~

Page 10: Wakanda#5

v5

YES

YES

Shibuya, Tokyo

video

widget

Page 11: Wakanda#5

v5 v6

YES YES

YES YES

NO YES

NO YES

Shibuya, Tokyo

video

mp4, webm, ogg: 相対ファイルパスまたはURLで指定

widget

Page 12: Wakanda#5

Shibuya, Tokyo

video

http://doc.wakanda.org/Widgets-API/Video/playerReady.304-1026828.en.html

On Load Progress

On Start Playing

On End Playing

On Pause

On Duration Change

On Time Update

On Error

widget

Page 13: Wakanda#5

Shibuya, Tokyo

video

http://doc.wakanda.org/Widgets-API/Video/playerReady.304-1026828.en.html

On Load Progress On Player Ready + WAK6

On Start Playing

On End Playing

On Pause

On Duration Change

On Time Update

On Error

widget

Page 14: Wakanda#5

Shibuya, Tokyo

events

calendar text input

canvas menu bar

checkbox navigation view

combo box select

image section

radio button group split view

slide switch

text

widget

Page 15: Wakanda#5

Shibuya, Tokyo

calendar

On Show On Mouse Move

On Before Show On Mouse Out

On Hide On Mouse Over

On Change On Mouse Up

On Click

On Double Click

On Mouse Down

widget

Page 16: Wakanda#5

Shibuya, Tokyo

calendar

On Show On Mouse Move

On Before Show On Mouse Out

On Hide On Mouse Over

On Change On Mouse Up

On Click

On Double Click

On Mouse Down

widget

Page 17: Wakanda#5

Shibuya, Tokyo

canvas

On Click On Touch Cancel

On Double Click On Touch End

On Mouse Down On Touch Start

On Mouse Move

On Mouse Out

On Mouse Over

On Mouse Up

widget

Page 18: Wakanda#5

Shibuya, Tokyo

canvas

On Click On Touch Cancel

On Double Click On Touch End

On Mouse Down On Touch Start

On Mouse Move On Touch Move + WAK6

On Mouse Out

On Mouse Over

On Mouse Up

widget

Page 19: Wakanda#5

Shibuya, Tokyo

checkbox

On Blur On Mouse Over

On Change On Mouse Up

On Focus

On Click

On Mouse Down

On Mouse Move

On Mouse Out

widget

Page 20: Wakanda#5

Shibuya, Tokyo

checkbox

On Blur On Mouse Over

On Change On Mouse Up

On Focus

On Click

On Mouse Down

On Mouse Move

On Mouse Out

widget

Page 21: Wakanda#5

Shibuya, Tokyo

combo box

On Blur On Mouse Over

On Change On Mouse Up

On Focus

On Click

On Mouse Down

On Mouse Move

On Mouse Out

widget

Page 22: Wakanda#5

Shibuya, Tokyo

combo box

On Blur On Mouse Over

On Change On Mouse Up

On Focus

On Click

On Mouse Down

On Mouse Move

On Mouse Out

widget

Page 23: Wakanda#5

Shibuya, Tokyo

image

On Click On Touch Cancel

On Double Click On Touch End

On Mouse Down On Touch Start

On Mouse Move

On Mouse Out

On Mouse Over

On Mouse Up

widget

Page 24: Wakanda#5

Shibuya, Tokyo

image

On Click On Touch Cancel

On Double Click On Touch End

On Mouse Down On Touch Start

On Mouse Move On Touch Move + WAK6

On Mouse Out

On Mouse Over

On Mouse Up

widget

Page 25: Wakanda#5

Shibuya, Tokyo

radio button group

On Blur On Mouse Over

On Change On Mouse Up

On Focus

On Click

On Mouse Down

On Mouse Move

On Mouse Out

widget

Page 26: Wakanda#5

Shibuya, Tokyo

On Blur On Mouse Over

On Change On Mouse Up

On Focus

On Click

On Mouse Down

On Mouse Move

On Mouse Out

widget

radio button group

Page 27: Wakanda#5

Shibuya, Tokyo

slide

On Touch Cancel On Change

On Touch End On Stop

On Touch Move

On Touch Start

On Create

On Start

On Slide

widget

Page 28: Wakanda#5

Shibuya, Tokyo

slide

On Touch Cancel On Change

On Touch End On Stop

On Touch Move

On Touch Start

On Create

On Start

On Slide

widget

Page 29: Wakanda#5

Shibuya, Tokyo

text

On Blur On Mouse Out On Touch End

On Change On Mouse Over On Touch Start

On Focus On Mouse Up

On Click On Key Up

On Double Click On Key Down

On Mouse Down On Select

On Mouse Move On Touch Cancel

widget

Page 30: Wakanda#5

Shibuya, Tokyo

text

On Blur On Mouse Out On Touch End

On Change On Mouse Over On Touch Start

On Focus On Mouse Up

On Click On Key Up

On Double Click On Key Down

On Mouse Down On Select

On Mouse Move On Touch Cancel

widget

Page 31: Wakanda#5

Shibuya, Tokyo

text input

On Blur On Mouse Out On Touch End

On Change On Mouse Over On Touch Start

On Focus On Mouse Up

On Click On Key Up

On Double Click On Key Down

On Mouse Down On Select

On Mouse Move On Touch Cancel

widget

Page 32: Wakanda#5

Shibuya, Tokyo

text input

On Blur On Mouse Out On Touch End

On Change On Mouse Over On Touch Start

On Focus On Mouse Up

On Click On Key Up

On Double Click On Key Down

On Mouse Down On Select

On Mouse Move On Touch Cancel

widget

Page 33: Wakanda#5

Shibuya, Tokyo

menu bar

On Click

On Mouse Down

On Mouse Move

On Mouse Out

On Mouse Over

On Mouse Up

widget

Page 34: Wakanda#5

Shibuya, Tokyo

menu bar

On Click On Touch End + WAK6

On Mouse Down On Touch Start + WAK6

On Mouse Move

On Mouse Out

On Mouse Over

On Mouse Up

On Touch Cancel + WAK6

widget

Page 35: Wakanda#5

Shibuya, Tokyo

navigation view

On Click

On Double Click

On Mouse Down

On Mouse Move

On Mouse Out

On Mouse Over

On Mouse Up

widget

Page 36: Wakanda#5

Shibuya, Tokyo

navigation view

On Click On Touch Cancel + WAK6

On Double Click On Touch End + WAK6

On Mouse Down On Touch Move + WAK6

On Mouse Move On Touch Start + WAK6

On Mouse Out

On Mouse Over

On Mouse Up

widget

Page 37: Wakanda#5

Shibuya, Tokyo

split view

On Click

On Double Click

On Mouse Down

On Mouse Move

On Mouse Out

On Mouse Over

On Mouse Up

widget

Page 38: Wakanda#5

Shibuya, Tokyo

split view

On Click

On Double Click

On Mouse Down

On Mouse Move

On Mouse Out

On Mouse Over

On Mouse Up

widget

Page 39: Wakanda#5

Shibuya, Tokyo

select

On Blur On Mouse Over

On Change On Mouse Up

On Focus

On Click

On Mouse Down

On Mouse Move

On Mouse Out

widget

Page 40: Wakanda#5

Shibuya, Tokyo

select

On Blur On Mouse Over

On Change On Mouse Up

On Focus On Touch Cancel + WAK6

On Click On Touch End + WAK6

On Mouse Down On Touch Start + WAK6

On Mouse Move

On Mouse Out

widget

Page 41: Wakanda#5

Shibuya, Tokyo

section

On Click

On Double Click

On Mouse Down

On Mouse Move

On Mouse Out

On Mouse Over

On Mouse Up

widget

Page 42: Wakanda#5

Shibuya, Tokyo

section

On Click On Touch Cancel + WAK6

On Double Click On Touch End + WAK6

On Mouse Down On Touch Move + WAK6

On Mouse Move On Touch Start + WAK6

On Mouse Out

On Mouse Over

On Mouse Up

widget

Page 43: Wakanda#5

Shibuya, Tokyo

switch

On Click On Touch End

On Mouse Down On Touch Start

On Mouse Move On Touch Move

On Mouse Out

On Mouse Over

On Mouse Up

On Touch Cancel

widget

Page 44: Wakanda#5

Shibuya, Tokyo

switch

On Click On Touch End

On Mouse Down On Touch Start

On Mouse Move On Touch Move

On Mouse Out

On Mouse Over

On Mouse Up

On Touch Cancel

widget

Page 45: Wakanda#5

Shibuya, Tokyo

wakanda dynamic delivery

WD2

page配信の新しい仕組み

WAF optimiserモデルに代わるもの

http://forum.wakanda.org/forumdisplay.php?37-Wakanda-Dynamic-Delivery

pageを実行するために必要な最少限のコンテンツを配信ネットワーク・トラフィック量を抑制(モバイル対策)ライブラリに追加されたウィジェット・テーマの総数に影響されない

page毎のマニフェストファイル (package.json)ダイナミック・ローダー: minify版のライブラリを都度ビルドダイナミック・キャッシュ: minify版のライブラリを再利用(デフォルト)

/Wakanda-Dynamic-Delivery-WD2/Wakanda-Dynamic-Delivery-WD2.100-1028663.en.html

Page 46: Wakanda#5

Shibuya, Tokyo

wakanda dynamic delivery

WD2

http://forum.wakanda.org/forumdisplay.php?37-Wakanda-Dynamic-Delivery

WAF optimiser 100

ダイナミック・ローダー 50

ダイナミック・キャッシュ 25

page配信の新しい仕組み

WAF optimiserモデルに代わるもの

page読み込み時間

/Wakanda-Dynamic-Delivery-WD2/Wakanda-Dynamic-Delivery-WD2.100-1028663.en.html

Page 47: Wakanda#5

Shibuya, Tokyo

wakanda dynamic delivery

WD2

http://forum.wakanda.org/forumdisplay.php?37-Wakanda-Dynamic-Delivery

page配信の新しい仕組み

WAF optimiserモデルに代わるもの

後方互換性

WAF optimiserモデルの使用を継続(既存・新ページ)WD2に移行(既存ページを変換)既存ページはWAF optimiserモデル,新ページはWD2(デフォルト)

/Wakanda-Dynamic-Delivery-WD2/Wakanda-Dynamic-Delivery-WD2.100-1028663.en.html

Page 48: Wakanda#5

Shibuya, Tokyo

preferences.json

{    "gui":{        "wd2": {            "migrate": false,            "create": false        }    }}

Library/Application Support/Wakanda Studio/

C:\Users\{userName}\AppData\Roaming\Wakanda Studio\

WAF optimiserモデルの使用を継続(既存・新ページ)WD2に移行(既存ページを変換)既存ページはWAF optimiserモデル,新ページはWD2(デフォルト)

WD2

/Wakanda-Dynamic-Delivery-WD2/Wakanda-Dynamic-Delivery-WD2.100-1028663.en.html

Page 49: Wakanda#5

Shibuya, Tokyo

preferences.json

{    "gui":{        "wd2": {            "migrate": true,            "create": true        }    }}

Library/Application Support/Wakanda Studio/

C:\Users\{userName}\AppData\Roaming\Wakanda Studio\

WAF optimiserモデルの使用を継続(既存・新ページ)WD2に移行(既存ページを変換)既存ページはWAF optimiserモデル,新ページはWD2(デフォルト)

WD2

/Wakanda-Dynamic-Delivery-WD2/Wakanda-Dynamic-Delivery-WD2.100-1028663.en.html

Page 50: Wakanda#5

Shibuya, Tokyo

preferences.json

{    "gui":{        "wd2": {            "migrate": false,            "create": true        }    }}

Library/Application Support/Wakanda Studio/

C:\Users\{userName}\AppData\Roaming\Wakanda Studio\

WAF optimiserモデルの使用を継続(既存・新ページ)WD2に移行(既存ページを変換)既存ページはWAF optimiserモデル,新ページはWD2(デフォルト)

WD2

/Wakanda-Dynamic-Delivery-WD2/Wakanda-Dynamic-Delivery-WD2.100-1028663.en.html

Page 51: Wakanda#5

Shibuya, Tokyo

/Conversion-Notes/Migrating-to-Wakanda-6.200-1013342.en.html

migrate: true

WD2

<meta name="WAF.packageJson"/>

{page}.waPage/index.package.json

既存のpageをWakanda 6で開けば自動的にタグが追加されるタグの追加されたpageを保存すれば自動的にファイルが作成される

Page 52: Wakanda#5

Shibuya, Tokyo

/Conversion-Notes/Migrating-to-Wakanda-6.200-1013342.en.html

package.json

WD2

{ "name": "Untitled1/Untitled1.waPage/index.html", "version": "1.0.0", "loadDependencies": [{ "id": "lilac", "type": "theme" }, { "id": "Untitled1.waPage/styles/index.css", "path": "WEBFOLDER", "type": "style" }, { "id": "application.css", "path": "WEBFOLDER", "type": "style" }]}

Page 53: Wakanda#5

Shibuya, Tokyo

/Conversion-Notes/Migrating-to-Wakanda-6.200-1013342.en.html

package.json

WD2

{ "name": "Untitled1/Untitled1.waPage/index.html", "version": "1.0.0", "loadDependencies": [{ "id": "lilac", "type": "theme" }, { "id": "Untitled1.waPage/styles/index.css", "path": "WEBFOLDER", "type": "style" }, { "id": "application.css", "path": "WEBFOLDER", "type": "style" }]}

WEBFOLDERWIDGETS_CUSTOMTHEMES_CUSTOM

バーチャル・ファイルシステム

Page 54: Wakanda#5

Shibuya, Tokyo

/Conversion-Notes/Migrating-to-Wakanda-6.200-1013342.en.html

package.json

WD2

{ "name": "Untitled1/Untitled1.waPage/index.html", "version": "1.0.0", "loadDependencies": [{ "id": "lilac", "type": "theme" }, { "id": "Untitled1.waPage/styles/index.css", "path": "WEBFOLDER", "type": "style" }, { "id": "application.css", "path": "WEBFOLDER", "type": "style" }]}

path省略: WAFパッケージ

Page 55: Wakanda#5

Shibuya, Tokyo

/Configuration-and-Settings-Files/Project-Settings-File.300-684392.en.html

builder handler service

WD2

<?xml version="1.0" encoding="UTF-8"?><settings>" <project />" <http />" <service name="webApp" />" <service name="rpc" />" <service name="dataStore" />" <service name="upload" ... />" <service name="Git HTTP Service" />" <service " " name="Builder handler" " " modulePath="services/builder-service" " " enabled="true" " " max-age="0" " " hardCache="false" />" <virtualFolder location="/WIDGETS_CUSTOM/" name="widgets-custom" />" <virtualFolder location="/THEMES_CUSTOM/" name="themes-custom" />" <resources />" <javaScript /></settings>

{project}/Settings.waSettings

Page 56: Wakanda#5

Shibuya, Tokyo

/Configuration-and-Settings-Files/Project-Settings-File.300-684392.en.html

builder handler service

WD2

<?xml version="1.0" encoding="UTF-8"?><settings>" <project />" <http />" <service name="webApp" />" <service name="rpc" />" <service name="dataStore" />" <service name="upload" ... />" <service name="Git HTTP Service" />" <service " " name="Builder handler" " " modulePath="services/builder-service" " " enabled="true" " " max-age="0" " " hardCache="false" />" <virtualFolder location="/WIDGETS_CUSTOM/" name="widgets-custom" />" <virtualFolder location="/THEMES_CUSTOM/" name="themes-custom" />" <resources />" <javaScript /></settings>

{project}/Settings.waSettings

Page 59: Wakanda#5

Shibuya, Tokyo

/Conversion-Notes/Migrating-to-Wakanda-6.200-1013342.en.html

WD2

wakanda dynamic delivery

セットアップmeta name="WAF.packageJson"index.package.jsonservice name="Builder handler"{ }

-desktop~waf-build.js?useReferer=1-desktop~waf-build.css?useReferer=1/waf-optimize.js

waf-optimize.css

Page 60: Wakanda#5

Shibuya, Tokyo

/Conversion-Notes/Migrating-to-Wakanda-6.200-1013342.en.html

WD2

wakanda dynamic delivery

http://127.0.0.1:8081/index.waPage/index.html?debug=1minifyしないで個別にファイルを送信

http://127.0.0.1:8081/waf-reset-build-cachecacheをクリア

http://127.0.0.1:8081/waf-reset-build-cache?minifyCores=1cacheをクリア+次に備えてコア・ライブラリをminify

Page 61: Wakanda#5

Shibuya, Tokyo

send files

XHR

var res;var file = File(ds.getModelFolder().path + "/Resources/sample.png");xhr = new XMLHttpRequest();xhr.open('PUT', "http://httpbin.org/put");xhr.setRequestHeader('Content-Type', "image/png");xhr.onreadystatechange = function() { " var state = this.readyState; if (state == 4) { res = 'response: ' + this.responseText; }}xhr.send(file);res;

WAK5: send(String data)WAK6: send(String| File data)

/XMLHttpRequest/XMLHttpRequest-Instances-Requests/send.301-867462.en.html

Page 62: Wakanda#5

Shibuya, Tokyo

send files

XHR

var res;var file = File(ds.getModelFolder().path + "/Resources/sample.png");xhr = new XMLHttpRequest();xhr.open('PUT', "http://httpbin.org/put");xhr.setRequestHeader('Content-Type', "image/png");xhr.onreadystatechange = function() { " var state = this.readyState; if (state == 4) { res = 'response: ' + this.responseText; }}xhr.send(file);res;

/XMLHttpRequest/XMLHttpRequest-Instances-Requests/send.301-867462.en.html

ds.getDataFolder(); // data folderds.getModelFolder(); // waModel foldergetFolder(); // waProject foldergetWalibFolder(); // Wakanda Server.app/Contents/walib/

Page 63: Wakanda#5

Shibuya, Tokyo

send files

XHR

var res;var file = File(ds.getModelFolder().path + "/Resources/sample.png");xhr = new XMLHttpRequest();xhr.open('PUT', "http://httpbin.org/put");xhr.setRequestHeader('Content-Type', "image/png");xhr.onreadystatechange = function() { " var state = this.readyState; if (state == 4) { res = 'response: ' + this.responseText; }}xhr.send(file);res;

/XMLHttpRequest/XMLHttpRequest-Constructor.201-867268.en.html

send() : サーバーサイドは同期通信のみContent-Type : バイナリデータは指定

Page 64: Wakanda#5

Shibuya, Tokyo

send files

XHR

var res;var file = File(ds.getModelFolder().path + "/Resources/sample.png");xhr = new XMLHttpRequest();xhr.open('PUT', "http://httpbin.org/put");xhr.setRequestHeader('Content-Type', "image/png");xhr.onreadystatechange = function() { " var state = this.readyState; if (state == 4) { res = 'response: ' + this.responseText; }}xhr.send(file);res;

/XMLHttpRequest/XMLHttpRequest-Constructor.201-867268.en.html

httpbin : クライアントのテストに便利

Page 65: Wakanda#5

Shibuya, Tokyo

send files

XHR

var res;var file = File(ds.getModelFolder().path + "/Resources/sample.png");xhr = new XMLHttpRequest();xhr.open('PUT', "http://httpbin.org/put");xhr.setRequestHeader('Content-Type', "image/png");xhr.onreadystatechange = function() { " var state = this.readyState; if (state == 4) { res = 'response: ' + this.responseText; }}xhr.send(file);res;

/XMLHttpRequest/XMLHttpRequest-Constructor.201-867268.en.html

0 // UNSET1 // OPENED2 // HEADERS_RECEIVED3 // LOADING4 // DONE

Page 66: Wakanda#5

Shibuya, Tokyo

push event

/Creating-a-Custom-Widget-v6/designerjs.200-1026376.en.html

https://github.com/AMorgaut/wakanda-eventsource

event source

http://caniuse.com/#search=eventsource

(絶え間なく要求する代わりに)サーバーからデータを連続的に送信する仕組み

Internet Explorer < 10 : pollyfillで対応https://github.com/Yaffle/EventSource

http://www.w3.org/TR/eventsource/http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html

Page 67: Wakanda#5

Shibuya, Tokyo

push event

/Creating-a-Custom-Widget-v6/designerjs.200-1026376.en.html

event source

(絶え間なく要求する代わりに)サーバーからデータを連続的に送信する仕組み

pro con

polling basic ajax HTTP overhead

long polling infinite iframe hack

WebSocket API full duplex special protocol

EventSource no special protocol not full duplex

Page 68: Wakanda#5

Shibuya, Tokyo

push event

/Creating-a-Custom-Widget-v6/designerjs.200-1026376.en.html

event source

require('wakanda-eventsource').start();

require('wakanda-eventsource').push('message');

Page 69: Wakanda#5

Shibuya, Tokyo

push event

/Creating-a-Custom-Widget-v6/designerjs.200-1026376.en.html

event source

require('wakanda-eventsource').start();

require('wakanda-eventsource').pushEvent({ 'customEventName', 'message'});

Page 70: Wakanda#5

Shibuya, Tokyo

push event

/Creating-a-Custom-Widget-v6/designerjs.200-1026376.en.html

event source

require('wakanda-eventsource').start();

require('wakanda-eventsource').pushEvent( 'customEventName', messageObject, true // encode in JSON);

Page 71: Wakanda#5

Shibuya, Tokyo

push event

/Creating-a-Custom-Widget-v6/designerjs.200-1026376.en.html

event source

var sse = new EventSource('/eventsource');

sse.onmessage = function onservermessage(event) { console.log(event)};

Page 72: Wakanda#5

Shibuya, Tokyo

evaluate JS

command line

/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html

Wakanda\ Server.app/Contents/MacOS/Wakanda\ Server

Wakanda Server.exe

wakanda_server_name [script_path]

Page 73: Wakanda#5

Shibuya, Tokyo

evaluate JS

command line

/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html

Wakanda\ Server.app/Contents/MacOS/Wakanda\ Server

Wakanda Server.exe

wakanda_server_name [script_path]

serverを起動

Page 74: Wakanda#5

Shibuya, Tokyo

evaluate JS

command line

/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html

Wakanda\ Server.app/Contents/MacOS/Wakanda\ Server

Wakanda Server.exe

wakanda_server_name [script_path]

serverを起動

scriptを評価: solution, projectに依存しないAPI

Page 75: Wakanda#5

Shibuya, Tokyo

evaluate JS

command line

/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html

Wakanda\ Server.app/Contents/MacOS/Wakanda\ Server

Wakanda Server.exe

wakanda_server_name [script_path]

serverを起動

scriptを評価: solution, projectに依存しないAPI

consoleにメッセージを出力

Page 76: Wakanda#5

Shibuya, Tokyo

evaluate JS

command line

/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html

Wakanda\ Server.app/Contents/MacOS/Wakanda\ Server

Wakanda Server.exe

wakanda_server_name [script_path]

serverを起動

scriptを評価: solution, projectに依存しないAPI

consoleにメッセージを出力 console.info("info");console.log("log");

console.error("error");console.warn("warn");

Page 77: Wakanda#5

Shibuya, Tokyo

evaluate JS

command line

/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html

Wakanda\ Server.app/Contents/MacOS/Wakanda\ Server

Wakanda Server.exe

wakanda_server_name [script_path]

serverを起動

scriptを評価: solution, projectに依存しないAPI

返り値: null

consoleにメッセージを出力 console.info("info");console.log("log");

console.error("error");console.warn("warn");

Page 78: Wakanda#5

Shibuya, Tokyo

evaluate JS

command line

/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html

Wakanda\ Server.app/Contents/MacOS/Wakanda\ Server

Wakanda Server.exe

wakanda_server_name [script_path]

serverを起動

scriptを評価: solution, projectに依存しないAPI

返り値: null

serverを終了

consoleにメッセージを出力 console.info("info");console.log("log");

console.error("error");console.warn("warn");

Page 79: Wakanda#5

Shibuya, Tokyo

launch solution

command line

/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html

Wakanda\ Server.app/Contents/MacOS/Wakanda\ Server

Wakanda Server.exe

wakanda_server_name [solution_path]

--admin-port=http_port_number [default=8080]--admin-ssl-port=http_port_number [default=4433]--admin-password=password

Page 80: Wakanda#5

Shibuya, Tokyo

launch solution

command line

/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html

Wakanda\ Server.app/Contents/MacOS/Wakanda\ Server

Wakanda Server.exe

wakanda_server_name [solution_path]

--admin-port=http_port_number [default=8080]--admin-ssl-port=http_port_number [default=4433]--admin-password=password --debug-off

WAK4~

Page 81: Wakanda#5

Shibuya, Tokyo

launch solution

command line

/Evaluating-a-JS-script-using-a-Command-Line.300-958090.en.html

Wakanda\ Server.app/Contents/MacOS/Wakanda\ Server

Wakanda Server.exe

wakanda_server_name [solution_path]

--admin-port=http_port_number [default=8080]--admin-ssl-port=http_port_number [default=4433]--admin-password=password--debug-off--debugger=remote--debugger=wakanda--debugger=none [default=none] --syslog

WAK5~

Page 82: Wakanda#5

Shibuya, Tokyo

launch solution

command line

/Launching-Wakanda-Server-using-a-Command-Line.300-583228.en.html

Wakanda\ Server.app/Contents/MacOS/Wakanda\ Server

wakanda_server_name [solution_path]

--admin-port=http_port_number [default=8080]--admin-ssl-port=http_port_number [default=4433]--admin-password=password --debug-off--debugger=remote--debugger=wakanda--debugger=none [default=none] --syslog

WAK5~

{solutionPath}/Logs/Untitled_log_1.txt: と同じ内容をシステムログに記録

Page 83: Wakanda#5

Shibuya, Tokyo

launch solution

command line

/Launching-Wakanda-Server-using-a-Command-Line.300-583228.en.html

Wakanda\ Server.app/Contents/MacOS/Wakanda\ Server

wakanda_server_name [solution_path]

--admin-port=http_port_number [default=8080]--admin-ssl-port=http_port_number [default=4433]--admin-password=password --debug-off--debugger=remote--debugger=wakanda--debugger=none [default=none] --syslog

WAK5~

sudo nano /etc/syslog.conf

user.* /var/log/user.log

{solutionPath}/Logs/Untitled_log_1.txt: と同じ内容をシステムログに記録

Page 84: Wakanda#5

Shibuya, Tokyo

Wakanda-Studio-Reference-Guide/GUI-Designer-Preferences.200-1023373.ja.html

designer

preferences.json{    "gui":{        "dataGrid": {            "maxColumnDisplay": 10,            "maxColumnCreate": 10        },        "autoForm": {            "maxAttributeDisplay": 10,            "maxAttributeCreate": 10        }        "formGenerator": {            "maxAttribute": 10        }    }}

Library/Application Support/Wakanda Studio/

C:\Users\{userName}\AppData\Roaming\Wakanda Studio\

Page 85: Wakanda#5

Shibuya, Tokyo

Wakanda-Studio-Reference-Guide/GUI-Designer-Preferences.200-1023373.ja.html

designer

preferences.json{ "gui":{ snapping : { magneticGrid : { automaticallyActive : true, onlySnapToSiblings : true, color : "red" } } }}

Library/Application Support/Wakanda Studio/

C:\Users\{userName}\AppData\Roaming\Wakanda Studio\

WAK5~

Page 86: Wakanda#5

Shibuya, Tokyo

Wakanda-Studio-Reference-Guide/GUI-Designer-Preferences.200-1023373.ja.html

designer

preferences.json

{ "gui":{ themes : { desktop: "lilac", smartphone: "cupertino", tablet: "cupertinoIpad" } }}

Library/Application Support/Wakanda Studio/

C:\Users\{userName}\AppData\Roaming\Wakanda Studio\

WAK5~

Page 87: Wakanda#5

Shibuya, Tokyo

Wakanda-Studio-Reference-Guide/GUI-Designer-Preferences.200-1023373.ja.html

desktop smartphone tablet

default cupertino cupertino

metal cupertinoIpad cupertinoIpad

lilac

light

softGray

designer preferences

predefined themes

Page 88: Wakanda#5

Shibuya, Tokyo

custom themes

themes

/Wakanda-Studio-Reference-Guide/GUI-Designer-Pages/Theme.300-1024435.en.html

Users/{userName}/Documents/Wakanda/Themes/{themeName}/

C:\Users\{userName}\Documents\Wakanda\Themes\{themeName}\

既存theme複製

新規theme作成or

orコミュニティthemeインストール

http://doc.wakanda.org/Wakanda0.v6/help/Title/en/page3906.html

Page 90: Wakanda#5

Shibuya, Tokyo

custom widget

widget

/Users/{userName}/Documents/Wakanda/Widgets/

C:\Users\{userName}\Documents\Wakanda\Widgets\

/Architecture-of-Wakanda-Applications/Custom-Widget.200-1024545.en.html

css - folder スタイルシート

designer.js プロパティリスト,デザインスクリプト

icons - folder アイコン

package.json ファイル構成

widget.js ランタイムスクリプト

Page 92: Wakanda#5

Shibuya, Tokyo

custom widget

widget

/Creating-a-Custom-Widget-v6/Creating-a-Custom-Widget-v6.100-1023095.en.html

studioでドラッグ&ドロップstudioでプレビューstudioでプロパティ設定studioでイベント設定studioでスタイル設定他ajaxフレームワークをdataSourceにバインド

メリット:

Page 93: Wakanda#5

Shibuya, Tokyo

custom widget

widget

/Creating-a-Custom-Widget-v6/Creating-a-Custom-Widget-v6.100-1023095.en.html

メリット:

Page 94: Wakanda#5

Shibuya, Tokyo

custom widget

widget

/Creating-a-Custom-Widget-v6/Creating-a-Custom-Widget-v6.100-1023095.en.html

studioでドラッグ&ドロップstudioでプレビューstudioでプロパティ設定studioでイベント設定studioでスタイル設定他ajaxフレームワークをdataSourceにバインド

メリット:

Page 95: Wakanda#5

Shibuya, Tokyo

custom widget

widget

/Installing-Wakanda/Libraries-and-Plug-ins-Loaded-by-WAF.200-734790.en.html

メリット:

included in WAF included in WAF

Page 96: Wakanda#5

Shibuya, Tokyo

custom widget

widget

/Installing-Wakanda/Libraries-and-Plug-ins-Loaded-by-WAF.200-734790.en.html

studioでドラッグ&ドロップstudioでプレビューstudioでプロパティ設定studioでイベント設定studioでスタイル設定他ajaxフレームワークをdataSourceにバインド

メリット:

included in WAF included in WAF

Page 99: Wakanda#5

Shibuya, Tokyo

widget

/Creating-a-Custom-Widget-v6/Creating-a-Custom-Widget-v6.100-1023095.en.html

名前の先頭は大文字 widget = JavaScriptクラス

Page 100: Wakanda#5

Shibuya, Tokyo

widget

/Creating-a-Custom-Widget-v6/Creating-a-Custom-Widget-v6.100-1023095.en.html

名前の先頭は大文字 widget = JavaScriptクラス

Page 101: Wakanda#5

Shibuya, Tokyo

designer web inspector

widget

{Wakanda Studio}/Contents/Resources/default.waPreferences

{Wakanda Studio}/../Resources/default.waPreferences

<preferences> <com.wakanda> <debugging web_inspector="false"/> <MDIColor alpha="255" blue="171" green="171" red="171"/> <general serverPath =""/> <outline sorting="byName"/> <outline lightMode="true"/> ... </com.wakanda></preferences>

Page 102: Wakanda#5

Shibuya, Tokyo

designer web inspector

widget

{Wakanda Studio}/Contents/Resources/default.waPreferences

{Wakanda Studio}/../Resources/default.waPreferences

default.waPreferences

<preferences> <com.wakanda> <debugging web_inspector="false"/>

<general defaultSolutionFolder="Macintosh HD:Users:miyako:Desktop:" createGIT="false" createBlankProject="true"/><solutionExplorer defaultPage="1"/><method_editor></method_editor> </com.wakanda></preferences>

Page 103: Wakanda#5

Shibuya, Tokyo

designer web inspector

widget

<preferences> <com.wakanda> <debugging web_inspector="true"/>

<general defaultSolutionFolder="Macintosh HD:Users:miyako:Desktop:" createGIT="false" createBlankProject="true"/><solutionExplorer defaultPage="1"/><method_editor></method_editor> </com.wakanda></preferences>

/Users/{userName}/Library/Application Support/Wakanda Studio/

C:\Users\{User Name}\AppData\Roaming\Wakanda Studio\

Wakanda Studio.waPreferences

Page 104: Wakanda#5

Shibuya, Tokyo

icons

widget

/Creating-a-Custom-Widget-v6/packagejson.200-1026497.en.html

size 16 x 16

type image/png

name widget.png - setIcon()

Page 105: Wakanda#5

Shibuya, Tokyo

icons

widget

sips -z 16 16 icon.png widget.png

/Creating-a-Custom-Widget-v6/packagejson.200-1026497.en.html

size 16 x 16

type image/png

name widget.png - setIcon()

Page 107: Wakanda#5

Shibuya, Tokyo

Wakanda

presented by

勉強会 #52013-10-8