Upload
kmiyako
View
224
Download
0
Embed Size (px)
Citation preview
Web Area Phone HomeDeveloper Conference Tokyo 2014
Webエリア4Dと会話する
original presentation by Laurent Esnault
ロホン・エノー
Web Area Phone HomeDeveloper Conference Tokyo 2014
+最新のアップデート+セキュリティ修正+馴染みの振る舞い- Mac / Windowsで違いあり- OSのバージョンとともに変化
システム実装
Web Area Phone HomeDeveloper Conference Tokyo 2014
+Mac / Windowsで同じ+システムに左右されない安定性 +4Dとの⾼い親和性
統合WebKit
Web Area Phone HomeDeveloper Conference Tokyo 2014
+Mac / Windowsで同じ+システムに左右されない安定性 +4Dとの⾼い親和性- セキュリティ修正なし- 振る舞いに違和感
統合WebKit
Web Area Phone HomeDeveloper Conference Tokyo 2014
•Webアクセスにはシステム • UIにはWebKit
HTML5/CSS3で⾼品質・ダイナミックなインタフェースを実現
判断基準
ユーザーインタフェース
Web Area Phone HomeDeveloper Conference Tokyo 2014
• システムが4Dを呼び,4DがIE/Safari/Webkitを呼び,そこからプラグインが呼び出される
対応しているが…
プラグインについて
Web Area Phone HomeDeveloper Conference Tokyo 2014
• システムが4Dを呼び,4DがIE/Safari/Webkitを呼び,そこからプラグインが呼び出される• プラグインは⾃分がブラウザの内部で動作している,
と思い込んでいる
対応しているが…
プラグインについて
Web Area Phone HomeDeveloper Conference Tokyo 2014
• システムが4Dを呼び,4DがIE/Safari/Webkitを呼び,そこからプラグインが呼び出される• プラグインは⾃分がブラウザの内部で動作している,
と思い込んでいる• 4D,プロセス,ウィンドウ等について,
まったく意識していない
対応しているが…
プラグインについて
Web Area Phone HomeDeveloper Conference Tokyo 2014
• システムが4Dを呼び,4DがIE/Safari/Webkitを呼び,そこからプラグインが呼び出される• プラグインは⾃分がブラウザの内部で動作している,
と思い込んでいる• 4D,プロセス,ウィンドウ等について,
まったく意識していない• 隔離性の乏しさは不安定の原因に
対応しているが…
プラグインについて
Web Area Phone HomeDeveloper Conference Tokyo 2014
• システムが4Dを呼び,4DがIE/Safari/Webkitを呼び,そこからプラグインが呼び出される• プラグインは⾃分がブラウザの内部で動作している,
と思い込んでいる• 4D,プロセス,ウィンドウ等について,
まったく意識していない• 隔離性の乏しさは不安定の原因に• 出来る限り避けたほうが無難
対応しているが…
プラグインについて
Web Area Phone HomeDeveloper Conference Tokyo 2014
•統合WebKit• HTMLをResourcesフォルダーに•コンテキストメニューを有効に
セットアップ
Web Area Phone HomeDeveloper Conference Tokyo 2014
•統合WebKit• HTMLをResourcesフォルダーに•コンテキストメニューを有効に•Web インスペクターを有効に
WA SET PREFERENCE(*;“Web”;WA enable Web inspector;True)
セットアップ
Web Area Phone HomeDeveloper Conference Tokyo 2014
•統合WebKit• HTMLをResourcesフォルダーに•コンテキストメニューを有効に•Web インスペクターを有効に
WA SET PREFERENCE(*;“Web”;WA enable Web inspector;True)
• $4dを有効に
セットアップ
Web Area Phone HomeDeveloper Conference Tokyo 2014
選択肢
•ファイルURLを開く o WA OPEN URL
• HTML ソースを構築してセット o WA SET PAGE CONTENT
初期化
Web Area Phone HomeDeveloper Conference Tokyo 2014
WA Evaluate JavaScript
•WA Execute JavaScriptから名称変更 •戻り値データ型を指定するための引数を追加
C_OBJECT($o) $o:=WA Evaluate JavaScript(*;”web”;”window.location”;Is object)
Is boolean Is date Is time
Is object Is text Is real Is longInt
JavaScriptコール
Web Area Phone HomeDeveloper Conference Tokyo 2014
WA EXECUTE JAVASCRIPT FUNCTION
•関数オブジェクトとして評価できるものであればどんな⽂字列でも渡すことができる •引数はJSデータ型に変換 •戻り値は代⼊に合わせて変換
C_REAL($m) $s:="March 21, 2012“ WA EXECUTE JAVASCRIPT FUNCTION(*;”web”;”Date.parse”;$m;$s)
JavaScriptコール
Web Area Phone HomeDeveloper Conference Tokyo 2014
スカラータイプタイプキャスト
C_OBJECT Object
C_TEXT String
C_STRING String
C_REAL Number
C_LONGINT Number
C_INTEGER Number
C_BOOLEAN Boolean
C_TIME Number milliseconds
C_DATE String ISO 8601
Web Area Phone HomeDeveloper Conference Tokyo 2014
•JavaScriptと同じルール •C_TEXTへの型変換はtoString()のコール同じ; toJSON()ではないので注意 •Objectは“[object Object]”になる •nullおよびundefinedは, 0, false, “”になる •Array, Object, 空ではない⽂字列,0ではない数値はtrueになる
型変換タイプキャスト
Web Area Phone HomeDeveloper Conference Tokyo 2014
オブジェクトに包んで渡す
C_OBJECT($o)ARRAY REAL($prices;0)fillPrices(->$prices)OB SET ARRAY($o;”prices”;$array)WA EXECUTE JAVASCRIPT FUNCTION(*;”web”;”listPrices”;*;$o)
タイプキャスト配列
Web Area Phone HomeDeveloper Conference Tokyo 2014
• ファイルURL file://dbResourcesFolder/pict.png
• データURI<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
タイプキャストピクチャ
Web Area Phone HomeDeveloper Conference Tokyo 2014
C_DATE <-> Date 変換にはJSONを使⽤Date.toJSON() はローカルタイムゾーンを反映する
タイプキャスト⽇付と時間
Web Area Phone HomeDeveloper Conference Tokyo 2014
C_DATE <-> Date 変換にはJSONを使⽤Date.toJSON() はローカルタイムゾーンを反映する
(new Date(2014,1,26)).toJSON() => "2014-02-25T15:00:00.000Z"JSON Stringify(!2014/02/26!) => "2014-02-25T15:00:00Z"
タイプキャスト⽇付と時間
Web Area Phone HomeDeveloper Conference Tokyo 2014
C_DATE <-> Date 変換にはJSONを使⽤Date.toJSON() はローカルタイムゾーンを反映する
(new Date(2014,1,26)).toJSON() => "2014-02-25T15:00:00.000Z"JSON Stringify(!2014/02/26!) => "2014-02-25T15:00:00Z"
タイムゾーンを超えてデータを交換する場合は注意!
タイプキャスト⽇付と時間
Web Area Phone HomeDeveloper Conference Tokyo 2014
C_DATE <-> Date 変換にはJSONを使⽤Date.toJSON() はローカルタイムゾーンを反映する
(new Date(2014,1,26)).toJSON() => "2014-02-25T15:00:00.000Z"JSON Stringify(!2014/02/26!) => "2014-02-25T15:00:00Z"
タイムゾーンを超えてデータを交換する場合は注意!
ローカルタイムゾーンを無視したい場合: SET DATABASE PARAMETER(JSON use local time;0)
タイプキャスト⽇付と時間
Web Area Phone HomeDeveloper Conference Tokyo 2014
$d1:=!2014/2/26!$iso:=String($d1;ISO Date GMT)
タイプキャスト⽇付と時間
$iso=“2014-02-25T15:00:00Z”
Web Area Phone HomeDeveloper Conference Tokyo 2014
$d1:=!2014/2/26!$iso:=String($d1;ISO Date GMT)$d2:=Date($iso)
•Date/String関数はISO 8601をサポート•いずれもローカルタイムゾーンを使⽤•String(ISO Date GMT)とDate() は反対の関係
タイプキャスト⽇付と時間
$iso=“2014-02-25T15:00:00Z”
Web Area Phone HomeDeveloper Conference Tokyo 2014
4Dコールバック
普通のJavaScript関数と同じようにプロジェクトメソッドをコールすることができる
Web Area Phone HomeDeveloper Conference Tokyo 2014
すべてのプロジェクトメソッドは$4dオブジェクトのメソッド(関数プロパティ)として利⽤できる
4Dコールバック
<button onclick=“$4d.doBeep()”> Beep </button>
Web Area Phone HomeDeveloper Conference Tokyo 2014
4D メソッドの呼び出しは⾮同期 $0を受け取るためにはコールバック関数を使⽤する
4Dコールバック
$4d.doRequest( “どうなの?”, function( response) { alert( response+“だそうです。”); });