web area-phone-home

Web Area Phone HomeDeveloper Conference Tokyo 2014

Webエリア4Dと会話する

original presentation by Laurent Esnault

ロホン・エノー


どちらのWebエリア?


+最新のアップデート+セキュリティ修正+馴染みの振る舞い

システム実装


+最新のアップデート+セキュリティ修正+馴染みの振る舞い- Mac / Windowsで違いあり- OSのバージョンとともに変化

システム実装


+Mac / Windowsで同じ+システムに左右されない安定性 +4Dとの⾼い親和性

統合WebKit


+Mac / Windowsで同じ+システムに左右されない安定性 +4Dとの⾼い親和性- セキュリティ修正なし- 振る舞いに違和感

統合WebKit


•Webアクセスにはシステム • UIにはWebKit

HTML5/CSS3で⾼品質・ダイナミックなインタフェースを実現

判断基準

ユーザーインタフェース


使⽤例


Wakanda Studio

使⽤例


対応しているが…

プラグインについて


• システムが4Dを呼び，4DがIE/Safari/Webkitを呼び，そこからプラグインが呼び出される




• システムが4Dを呼び，4DがIE/Safari/Webkitを呼び，そこからプラグインが呼び出される• プラグインは⾃分がブラウザの内部で動作している,

と思い込んでいる





と思い込んでいる• 4D，プロセス，ウィンドウ等について，

まったく意識していない






まったく意識していない• 隔離性の乏しさは不安定の原因に






まったく意識していない• 隔離性の乏しさは不安定の原因に• 出来る限り避けたほうが無難




セットアップ


•統合WebKit

セットアップ


•統合WebKit• HTMLをResourcesフォルダーに

セットアップ


•統合WebKit• HTMLをResourcesフォルダーに•コンテキストメニューを有効に

セットアップ


•統合WebKit• HTMLをResourcesフォルダーに•コンテキストメニューを有効に•Web インスペクターを有効に

WA SET PREFERENCE(*;“Web”;WA enable Web inspector;True)

セットアップ


•統合WebKit• HTMLをResourcesフォルダーに•コンテキストメニューを有効に•Web インスペクターを有効に

WA SET PREFERENCE(*;“Web”;WA enable Web inspector;True)

• $4dを有効に

セットアップ


選択肢

•ファイルURLを開く o WA OPEN URL

• HTML ソースを構築してセット o WA SET PAGE CONTENT

初期化


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コール


WA EXECUTE JAVASCRIPT FUNCTION

•関数オブジェクトとして評価できるものであればどんな⽂字列でも渡すことができる •引数はJSデータ型に変換 •戻り値は代⼊に合わせて変換

C_REAL($m) $s:="March 21, 2012“ WA EXECUTE JAVASCRIPT FUNCTION(*;”web”;”Date.parse”;$m;$s)

JavaScriptコール


デモンストレーションCarousel


スカラータイプタイプキャスト

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


•JavaScriptと同じルール •C_TEXTへの型変換はtoString()のコール同じ; toJSON()ではないので注意 •Objectは“[object Object]”になる •nullおよびundefinedは， 0, false, “”になる •Array, Object, 空ではない⽂字列，0ではない数値はtrueになる

型変換タイプキャスト


オブジェクトに包んで渡す

タイプキャスト配列


オブジェクトに包んで渡す

C_OBJECT($o)ARRAY REAL($prices;0)fillPrices(->$prices)OB SET ARRAY($o;”prices”;$array)WA EXECUTE JAVASCRIPT FUNCTION(*;”web”;”listPrices”;*;$o)

タイプキャスト配列


タイプキャストピクチャ


• ファイルURL file://dbResourcesFolder/pict.png

• データURI<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

タイプキャストピクチャ


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)



$d1:=!2014/2/26!$iso:=String($d1;ISO Date GMT)


$iso=“2014-02-25T15:00:00Z”


$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”


• JavaScriptエラーを4Dに転送

エラーハンドリング


4Dコールバック

普通のJavaScript関数と同じようにプロジェクトメソッドをコールすることができる


すべてのプロジェクトメソッドは$4dオブジェクトのメソッド（関数プロパティ）として利⽤できる


<button onclick=“$4d.doBeep()”> Beep </button>


4D メソッドの呼び出しは⾮同期 $0を受け取るためにはコールバック関数を使⽤する


$4d.doRequest( “どうなの?”, function( response) { alert( response+“だそうです。”); });


最後に⼀⾔

web area-phone-home

Technology