SlideShare a Scribd company logo
1 of 265
Download to read offline
Webセミナー
基本
基本
フロントエンド コミュニケーション バックエンド
HTML
CSS
JavaScript
jQuery
JSON
HTTP
On Web Connection
4Dタグ
WEB SEND FILE
基本
フロントエンド バックエンド
HTML
CSS
JavaScript
jQuery
JSON
On Web Connection
4Dタグ
WEB SEND FILE
基本
フロントエンド バックエンド
基本
フロントエンド バックエンド
基本
フロントエンド バックエンド
基本
Webクライアント コミュニケーション Webサーバー
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114:8080/hello.html
リクエスト
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114:8080/hello.html
レスポンス
リクエスト
基本
http://192.168.1.114:8080/hello.html
リクエスト
基本
http://192.168.1.114:8080/hello.html
リクエスト
基本
http://192.168.1.114:8080/hello.html
リクエスト
プロトコル
基本
http://192.168.1.114:8080/hello.html
リクエスト
プロトコル
ホスト
基本
http://192.168.1.114:8080/hello.html
リクエスト
プロトコル
ホスト
ポート
基本
http://192.168.1.114:8080/hello.html
リクエスト
プロトコル
ホスト
ポート
リクエスト
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114:8080/hello.html
レスポンス
リクエスト
基本
レスポンス
基本
レスポンス
基本
レスポンス
基本
レスポンス
基本
フロントエンド バックエンド
基本
バックエンド
基本
バックエンド
スタティック(静)
基本
バックエンド
• 静的なコンテンツ
スタティック(静)
基本
バックエンド
• 静的なコンテンツ
• HTML
スタティック(静)
基本
バックエンド
• 静的なコンテンツ
• HTML
• 画像
スタティック(静)
基本
バックエンド
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック(静)
基本
バックエンド
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック(静)
基本
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック(静) バックエンド
基本
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック(静) バックエンド
基本
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック(静) バックエンド
基本
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック(静) バックエンド
基本
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック(静) バックエンド
基本
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック(静) バックエンド
基本
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック(静) バックエンド
基本
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック(静) バックエンド
WEB START SERVER
If(OK=1)
//success
End if
基本
バックエンド
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック(静)
基本
バックエンド
ダイナミック(動)
基本
• 動的なコンテンツ
バックエンド
ダイナミック(動)
基本
• 動的なコンテンツ
• HTML
バックエンド
ダイナミック(動)
基本
• 動的なコンテンツ
• HTML
• 画像
バックエンド
ダイナミック(動)
基本
• 動的なコンテンツ
• HTML
• 画像
• リクエスト処理時に出力
バックエンド
ダイナミック(動)
基本
4Dタグ バックエンド
基本
4Dタグ バックエンド
• 4DTEXT
基本
4Dタグ バックエンド
• 4DTEXT
• 4DHTML
基本
4Dタグ バックエンド
• 4DTEXT
• 4DHTML
• 4DSCRIPT
基本
4Dタグ バックエンド
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
基本
4Dタグ バックエンド
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
基本
4Dタグ バックエンド
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
基本
4Dタグ バックエンド
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<h1>ようこそ<!--#4DTEXT [CONTACTS]FirstName--></h1>
<p>ユーザー名: <!--#4DTEXT vtUserName--></p>
<!--#4DTEXT myArray{7}-->
<!--#4DTEXT Current time-->
<!--#4DTEXT Records in selection([INVOICES])-->件のレ
コードがみつかりました。
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<h1>ようこそ<!--#4DHTML [CONTACTS]FirstName--></h1>
<p>ユーザー名: <!--#4DHTML vtUserName--></p>
<!--#4DHTML myArray{7}-->
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<h1>ようこそ<!--#4DHTML [CONTACTS]FirstName--></h1>
<p>ユーザー名: <!--#4DHTML vtUserName--></p>
<!--#4DHTML myArray{7}-->
[Contacts]lastName:="<b>MIYAKO</b> Keisuke"
vtUserName:= "<font color="red">MIYAKO</font>"
myArray{7}:="<a href="http://www.4d.com">4D</a>"
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--#4DSCRIPT/MethodName/Param-->
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--#4DSCRIPT/MethodName/Param-->
/Param
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--#4DSCRIPT/MethodName/Param-->
/Param
公開メソッド
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--#4DSCRIPT/MethodName/Param-->
/Param
公開メソッド
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--#4DINCLUDE header/menu.html-->
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<div>
<!--4DIF (vNumRecords>0)-->
<p><!--4DTEXT vNumRecords-->件みつかりました。</p>
<!--4DELSE-->
<p>何もみつかりませんでした。</p>
<!--4DENDIF-->
</div>
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<div>
<!--4DIF (vNumRecords>0)-->
<p><!--4DTEXT vNumRecords-->件みつかりました。</p>
<!--4DELSE-->
<p>何もみつかりませんでした。</p>
<!--4DENDIF-->
</div>
<div>
<!--4DIF (Condition1)-->
<!--4DINCLUDE menu1.html-->
<!--4DELSEIF (Condition2)-->
<!--4DINCLUDE menu2.html-->
<!--4DELSEIF (Condition3)-->
<!--4DINCLUDE menu3.html-->
<!--4DELSE-->
<!--4DINCLUDE menu.html-->
<!--4DENDIF-->
</div>
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--4DLOOP (arrCities)-->
<p><!--4DTEXT arrCities{arrCities}--></p>
<!--4DENDLOOP-->
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--4DLOOP (arrCities)-->
<p><!--4DTEXT arrCities{arrCities}--></p>
<!--4DENDLOOP-->
<!--4DLOOP [CONTACTS]-->
<p><!--4DTEXT [CONTACTS]firstName--></p>
<!--4DENDLOOP-->
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--4DLOOP (arrCities)-->
<p><!--4DTEXT arrCities{arrCities}--></p>
<!--4DENDLOOP-->
<!--4DLOOP [CONTACTS]-->
<p><!--4DTEXT [CONTACTS]firstName--></p>
<!--4DENDLOOP-->
<!--4DLOOP allowAction-->
<p><!--4DTEXT actionResult--></p>
<!--4DENDLOOP-->
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--4DINCLUDE header.html-->
<!--4DBASE folder/-->
<!--4DINCLUDE subpage1.html-->
<!--4DINCLUDE subpage2.html-->
<!--4DINCLUDE subpage3.html-->
<!--4DBASE sub/-->
<!--4DINCLUDE subpage4.html-->
<!--4DINCLUDE subpage5.html-->
<!--4DINCLUDE subpage6.html-->
<!--4DBASE WEBFOLDER-->
<!--4DINCLUDE footer.html-->
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--4DINCLUDE header.html-->
<!--4DBASE folder/-->
<!--4DINCLUDE subpage1.html-->
<!--4DINCLUDE subpage2.html-->
<!--4DINCLUDE subpage3.html-->
<!--4DBASE sub/-->
<!--4DINCLUDE subpage4.html-->
<!--4DINCLUDE subpage5.html-->
<!--4DINCLUDE subpage6.html-->
<!--4DBASE WEBFOLDER-->
<!--4DINCLUDE footer.html-->
Webfolder/header.html
Webfolder/folder/subpage1.html
Webfolder/folder/subpage2.html
Webfolder/folder/subpage3.html
Webfolder/folder/sub/subpage4.html
Webfolder/folder/sub/subpage5.html
Webfolder/folder/sub/subpage6.html
Webfolder/footer.html
基本
Webクライアント コミュニケーション Webサーバー
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114:8080/hello.html
リクエスト
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114:8080/hello.html
リクエスト
.html
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114:8080/hello.html
リクエスト
.html
基本
Webクライアント コミュニケーション Webサーバー
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114:8080/hello.shtml
リクエスト
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114:8080/hello.shtml
リクエスト
.shtml
基本
Webクライアント コミュニケーション Webサーバー
レスポンス
ファイル読み込み
4Dタグ処理
http://192.168.1.114:8080/hello.shtml
リクエスト
.shtml
基本
Webクライアント コミュニケーション Webサーバー
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114/4DACTION/myMethod/hello
リクエスト
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114/4DACTION/myMethod/hello
リクエスト
/4DACTION/myMethod/hello
基本
Webクライアント コミュニケーション Webサーバー
メソッド実行
http://192.168.1.114/4DACTION/myMethod/hello
リクエスト
基本
Webクライアント コミュニケーション Webサーバー
メソッド実行
http://192.168.1.114/4DACTION/myMethod/hello
リクエスト
WEB SEND FILE
基本
Webクライアント コミュニケーション Webサーバー
レスポンス
メソッド実行
4Dタグ処理
http://192.168.1.114/4DACTION/myMethod/hello
リクエスト
ファイル読み込み
WEB SEND FILE
基本
Webクライアント コミュニケーション Webサーバー
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114/hello
リクエスト
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114/hello
リクエスト
/hello
基本
Webクライアント コミュニケーション Webサーバー
On Web Connection
http://192.168.1.114/hello
リクエスト
基本
Webクライアント コミュニケーション Webサーバー
On Web Connection
http://192.168.1.114/hello
リクエスト
WEB SEND FILE
基本
Webクライアント コミュニケーション Webサーバー
レスポンス
On Web Connection
4Dタグ処理
http://192.168.1.114/hello
リクエスト
ファイル読み込み
WEB SEND FILE
基本
On Web Connection
基本
On Web Connection
基本
On Web Connection
• $1リクエスト
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ+ボディ(一部)
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ+ボディ(一部)
• $3 クライアントIPアドレス
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ+ボディ(一部)
• $3 クライアントIPアドレス
• $4 サーバーIPアドレス
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ+ボディ(一部)
• $3 クライアントIPアドレス
• $4 サーバーIPアドレス
• $5 ユーザー名
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ+ボディ(一部)
• $3 クライアントIPアドレス
• $4 サーバーIPアドレス
• $5 ユーザー名
• $6 パスワード
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ+ボディ(一部)
• $3 クライアントIPアドレス
• $4 サーバーIPアドレス
• $5 ユーザー名
• $6 パスワード
WEB GET VARIABLES
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ+ボディ(一部)
• $3 クライアントIPアドレス
• $4 サーバーIPアドレス
• $5 ユーザー名
• $6 パスワード
WEB GET HTTP HEADER
WEB GET VARIABLES
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ+ボディ(一部)
• $3 クライアントIPアドレス
• $4 サーバーIPアドレス
• $5 ユーザー名
• $6 パスワード
WEB GET HTTP BODY
WEB GET HTTP HEADER
WEB GET VARIABLES
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ+ボディ(一部)
• $3 クライアントIPアドレス
• $4 サーバーIPアドレス
• $5 ユーザー名
• $6 パスワード
WEB GET HTTP BODY
WEB GET HTTP HEADER
WEB GET HTTP BODY PARTS
WEB GET VARIABLES
まとめ
基本
基本
• スタティック(静)
• HTML ページ
• images 画像
• css スタイル
• js スクリプト
基本
• スタティック(静)
• HTML ページ
• images 画像
• css スタイル
• js スクリプト
• ダイナミック(動)
• HTML ページ
• images 画像
• json データ
基本
• スタティック(静)
• HTML ページ
• images 画像
• css スタイル
• js スクリプト
• ダイナミック(動)
• HTML ページ
• images 画像
• json データ
基本
• ダイナミック(動)
• HTML ページ
• images 画像
• json データ
基本
• ダイナミック(動)
• HTML ページ
• images 画像
• json データ
基本
• ダイナミック(動)
• HTML ページ
• images 画像
• json データ
• 4Dタグ
• On Web Connection
• .shtml
• 4DACTION
基本
• ダイナミック(動)
• HTML ページ
• images 画像
• json データ
• 4Dタグ
• On Web Connection
• .shtml
• 4DACTION
基本
• 4Dタグ
• On Web Connection
• .shtml
• 4DACTION
基本
• 4Dタグ
• On Web Connection
• .shtml
• 4DACTION
基本
• 4Dタグ
• On Web Connection
• .shtml
• 4DACTION
• WEB GET VARIABLES
• WEB SEND FILE
• WEB GET HTTP HEADER
• WEB GET HTTP BODY
基本
• 4Dタグ
• On Web Connection
• .shtml
• 4DACTION
• WEB GET VARIABLES
• WEB SEND FILE
• WEB GET HTTP HEADER
• WEB GET HTTP BODY
• WEB SEND TEXT
• WEB SEND BLOB
• WEB SEND RAW DATA
• WEB SEND HTTP REDIRECT
jQuery
jQuery
<script src="/js/jquery.js"></script>
<script>
$(function(){! //$(document).ready(function()の短縮形
$.getJSON("/Contacts/data", function(data){!
var contactsList = '<ul>';
! ! ! ! ! !
$.each(data, function(index, value){!
contactsList = contactsList + '<li uid="' + value.contactId + '">';
contactsList = contactsList + value.lastName;
contactsList = contactsList + value.firstName + '</li>';!
});
!
contactsList += '</ul>';
! ! ! ! ! !
$("#contactList").html(contactsList);! ! !
})
});
</script>!
WebFolder/Contacts/index.html
jQuery
<script src="/js/jquery.js"></script>
<script>
$(function(){! //$(document).ready(function()の短縮形
$.getJSON("/Contacts/data", function(data){!
var contactsList = '<ul>';
! ! ! ! ! !
$.each(data, function(index, value){!
contactsList = contactsList + '<li uid="' + value.contactId + '">';
contactsList = contactsList + value.lastName;
contactsList = contactsList + value.firstName + '</li>';!
});
!
contactsList += '</ul>';
! ! ! ! ! !
$("#contactList").html(contactsList);! ! !
})
});
</script>!
WebFolder/Contacts/index.html
jQuery
<script src="/js/jquery.js"></script>
<script>
$(function(){! //$(document).ready(function()の短縮形
$.getJSON("/Contacts/data", function(data){!
var contactsList = '<ul>';
! ! ! ! ! !
$.each(data, function(index, value){!
contactsList = contactsList + '<li uid="' + value.contactId + '">';
contactsList = contactsList + value.lastName;
contactsList = contactsList + value.firstName + '</li>';!
});
!
contactsList += '</ul>';
! ! ! ! ! !
$("#contactList").html(contactsList);! ! !
})
});
</script>!
WebFolder/Contacts/index.html
jQuery
<script src="/js/jquery.js"></script>
<script>
$(function(){! //$(document).ready(function()の短縮形
$.getJSON("/Contacts/data", function(data){!
var contactsList = '<ul>';
! ! ! ! ! !
$.each(data, function(index, value){!
contactsList = contactsList + '<li uid="' + value.contactId + '">';
contactsList = contactsList + value.lastName;
contactsList = contactsList + value.firstName + '</li>';!
});
!
contactsList += '</ul>';
! ! ! ! ! !
$("#contactList").html(contactsList);! ! !
})
});
</script>!
WebFolder/Contacts/index.html
jQuery
On Web Connection
C_TEXT($1;$2;$3;$4;$5;$6)
$request:=$1
Case of
: ($request="/Contacts/data")
ALL RECORDS([Contacts])
$filePath:=Get 4D folder(Current Resources folder)+
"json"+Folder separator+"contacts.html"
WEB SEND FILE($filePath)
End case
jQuery
[
<!--4DLOOP [Contacts]-->
! {
! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",
! "firstName":"<!--4DTEXT w_escapeText([Contacts]firstName)-->",
! "lastName":"<!--4DTEXT w_escapeText([Contacts]lastName)-->",
! "email":"<!--4DTEXT w_escapeText([Contacts]email)-->",
! "mobilePhone":"<!--4DTEXT w_escapeText([Contacts]mobilePhone)-->"
! }<!--4DTEXT w_endOfArrayItem(->[Contacts])-->
<!--4DENDLOOP-->
]
Resources/json/contacts.html
jQuery
[
<!--4DLOOP [Contacts]-->
! {
! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",
! "firstName":"<!--4DTEXT w_escapeText([Contacts]firstName)-->",
! "lastName":"<!--4DTEXT w_escapeText([Contacts]lastName)-->",
! "email":"<!--4DTEXT w_escapeText([Contacts]email)-->",
! "mobilePhone":"<!--4DTEXT w_escapeText([Contacts]mobilePhone)-->"
! }<!--4DTEXT w_endOfArrayItem(->[Contacts])-->
<!--4DENDLOOP-->
]
Resources/json/contacts.html
jQuery
[
<!--4DLOOP [Contacts]-->
! {
! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",
! "firstName":"<!--4DTEXT w_escapeText([Contacts]firstName)-->",
! "lastName":"<!--4DTEXT w_escapeText([Contacts]lastName)-->",
! "email":"<!--4DTEXT w_escapeText([Contacts]email)-->",
! "mobilePhone":"<!--4DTEXT w_escapeText([Contacts]mobilePhone)-->"
! }<!--4DTEXT w_endOfArrayItem(->[Contacts])-->
<!--4DENDLOOP-->
]
Resources/json/contacts.html
jQuery
[
<!--4DLOOP [Contacts]-->
! {
! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",
! "firstName":"<!--4DTEXT w_escapeText([Contacts]firstName)-->",
! "lastName":"<!--4DTEXT w_escapeText([Contacts]lastName)-->",
! "email":"<!--4DTEXT w_escapeText([Contacts]email)-->",
! "mobilePhone":"<!--4DTEXT w_escapeText([Contacts]mobilePhone)-->"
! }<!--4DTEXT w_endOfArrayItem(->[Contacts])-->
<!--4DENDLOOP-->
]
Resources/json/contacts.html
jQuery
[
<!--4DLOOP [Contacts]-->
! {
! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",
! "firstName":"<!--4DTEXT w_escapeText([Contacts]firstName)-->",
! "lastName":"<!--4DTEXT w_escapeText([Contacts]lastName)-->",
! "email":"<!--4DTEXT w_escapeText([Contacts]email)-->",
! "mobilePhone":"<!--4DTEXT w_escapeText([Contacts]mobilePhone)-->"
! }<!--4DTEXT w_endOfArrayItem(->[Contacts])-->
<!--4DENDLOOP-->
]
Resources/json/contacts.html
C_TEXT($1;$0)
If (Count parameters>0)
$0:=$1
If (Length($0)#0)
$0:=Replace string($0;"";"";*)
$0:=Replace string($0;""";""";*)
$0:=Replace string($0;"/";"/";*)
$0:=Replace string($0;Char(Backspace);"b";*)
$0:=Replace string($0;Char(FF ASCII code);"f";*)
$0:=Replace string($0;"n";"n";*)
$0:=Replace string($0;"r";"r";*)
$0:=Replace string($0;"t";"t";*)
End if
End if
w_escapeText
jQuery
C_TEXT($1;$0)
If (Count parameters>0)
$0:=$1
If (Length($0)#0)
$0:=Replace string($0;"";"";*)
$0:=Replace string($0;""";""";*)
$0:=Replace string($0;"/";"/";*)
$0:=Replace string($0;Char(Backspace);"b";*)
$0:=Replace string($0;Char(FF ASCII code);"f";*)
$0:=Replace string($0;"n";"n";*)
$0:=Replace string($0;"r";"r";*)
$0:=Replace string($0;"t";"t";*)
End if
End if
w_escapeText
jQuery
C_TEXT($1;$0)
If (Count parameters>0)
$0:=$1
If (Length($0)#0)
$0:=Replace string($0;"";"";*)
$0:=Replace string($0;""";""";*)
$0:=Replace string($0;"/";"/";*)
$0:=Replace string($0;Char(Backspace);"b";*)
$0:=Replace string($0;Char(FF ASCII code);"f";*)
$0:=Replace string($0;"n";"n";*)
$0:=Replace string($0;"r";"r";*)
$0:=Replace string($0;"t";"t";*)
End if
End if
w_escapeText
jQuery
C_TEXT($1;$0)
If (Count parameters>0)
$0:=$1
If (Length($0)#0)
$0:=Replace string($0;"";"";*)
$0:=Replace string($0;""";""";*)
$0:=Replace string($0;"/";"/";*)
$0:=Replace string($0;Char(Backspace);"b";*)
$0:=Replace string($0;Char(FF ASCII code);"f";*)
$0:=Replace string($0;"n";"n";*)
$0:=Replace string($0;"r";"r";*)
$0:=Replace string($0;"t";"t";*)
End if
End if
w_escapeText
jQuery
jQuery
[
<!--4DLOOP [Contacts]-->
! {
! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",
! "firstName":"<!--4DTEXT w_escapeText([Contacts]firstName)-->",
! "lastName":"<!--4DTEXT w_escapeText([Contacts]lastName)-->",
! "email":"<!--4DTEXT w_escapeText([Contacts]email)-->",
! "mobilePhone":"<!--4DTEXT w_escapeText([Contacts]mobilePhone)-->"
! }<!--4DTEXT w_endOfArrayItem(->[Contacts])-->
<!--4DENDLOOP-->
]
Resources/json/contacts.html
jQuery
[
<!--4DLOOP [Contacts]-->
! {
! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",
! "firstName":"<!--4DTEXT w_escapeText([Contacts]firstName)-->",
! "lastName":"<!--4DTEXT w_escapeText([Contacts]lastName)-->",
! "email":"<!--4DTEXT w_escapeText([Contacts]email)-->",
! "mobilePhone":"<!--4DTEXT w_escapeText([Contacts]mobilePhone)-->"
! }<!--4DTEXT w_endOfArrayItem(->[Contacts])-->
<!--4DENDLOOP-->
]
Resources/json/contacts.html
C_POINTER($1)
C_TEXT($0)
If (Count parameters>0)
If (Not(Nil($1)))
If (Table(Table($1))=$1)
If (Records in selection($1->)#Selected record number($1->))
$0:=","
End if
End if
End if
End if
w_endOfArrayItem
jQuery
C_POINTER($1)
C_TEXT($0)
If (Count parameters>0)
If (Not(Nil($1)))
If (Table(Table($1))=$1)
If (Records in selection($1->)#Selected record number($1->))
$0:=","
End if
End if
End if
End if
w_endOfArrayItem
jQuery
C_POINTER($1)
C_TEXT($0)
If (Count parameters>0)
If (Not(Nil($1)))
If (Table(Table($1))=$1)
If (Records in selection($1->)#Selected record number($1->))
$0:=","
End if
End if
End if
End if
w_endOfArrayItem
jQuery
C_POINTER($1)
C_TEXT($0)
If (Count parameters>0)
If (Not(Nil($1)))
If (Table(Table($1))=$1)
If (Records in selection($1->)#Selected record number($1->))
$0:=","
End if
End if
End if
End if
w_endOfArrayItem
jQuery
C_POINTER($1)
C_TEXT($0)
If (Count parameters>0)
If (Not(Nil($1)))
If (Table(Table($1))=$1)
If (Records in selection($1->)#Selected record number($1->))
$0:=","
End if
End if
End if
End if
w_endOfArrayItem
jQuery
jQuery
<script src="/js/jquery.js"></script>
<script>
$(function(){! //$(document).ready(function()の短縮形
$.getJSON("/Contacts/data", function(data){!
var contactsList = '<ul>';
! ! ! ! ! !
$.each(data, function(index, value){!
contactsList = contactsList + '<li uid="' + value.contactId + '">';
contactsList = contactsList + value.lastName;
contactsList = contactsList + value.firstName + '</li>';!
});
!
contactsList += '</ul>';
! ! ! ! ! !
$("#contactList").html(contactsList);! ! !
})
});
</script>!
WebFolder/Contacts/index.html
デバッグ
デバッグ
フロントエンド バックエンド
デバッグ
フロントエンド バックエンド
デバッグ
フロントエンド バックエンド
TRACE
デバッグ
フロントエンド バックエンド
TRACE
デバッグ
フロントエンド バックエンド
デバッグ
フロントエンド バックエンド
F12(開発者ツール)
デバッグ
フロントエンド バックエンド
F12(開発者ツール)
デバッグ
フロントエンド バックエンド
デバッグ
フロントエンド バックエンド
⌥⌘I(デベロッパーツール)
デバッグ
フロントエンド バックエンド
⌥⌘I(デベロッパーツール)
デバッグ
フロントエンド バックエンド
デバッグ
フロントエンド バックエンド
F12(Firebug)
デバッグ
フロントエンド バックエンド
F12(Firebug)
デバッグ
フロントエンド バックエンド
デバッグ
フロントエンド バックエンド
⌥⌘I(Webインスペクタ)
デバッグ
フロントエンド バックエンド
⌥⌘I(Webインスペクタ)
デバッグ
デバッグ
デバッグ
デバッグ
デバッグ
デバッグ
デバッグ
デバッグ
モバイル
C_BOOLEAN($0;$isMobile)
ARRAY TEXT($headerNames;0)
ARRAY TEXT($headerValues;0)
WEB GET HTTP HEADER($headerNames;$headerValues)
C_LONGINT($i)
$i:=Find in array($headerNames;"User-Agent")
If ($i#-1)
$userAgent:=$headerValues{$i}
$isMobile:=True
Case of
: (Position("iPhone";$userAgent)#0)
: (Position("iPad";$userAgent)#0)
: (Position("Android";$userAgent)#0)
Else
$isMobile:=False
End case
End if
$0:=$isMobilew_isMobile
モバイル
C_BOOLEAN($0;$isMobile)
ARRAY TEXT($headerNames;0)
ARRAY TEXT($headerValues;0)
WEB GET HTTP HEADER($headerNames;$headerValues)
C_LONGINT($i)
$i:=Find in array($headerNames;"User-Agent")
If ($i#-1)
$userAgent:=$headerValues{$i}
$isMobile:=True
Case of
: (Position("iPhone";$userAgent)#0)
: (Position("iPad";$userAgent)#0)
: (Position("Android";$userAgent)#0)
Else
$isMobile:=False
End case
End if
$0:=$isMobilew_isMobile
モバイル
モバイル
C_TEXT($1)
ARRAY LONGINT($pos;0)
ARRAY LONGINT($len;0)
If (Match regex("((.+).(.+))";$1;1;$pos;$len))
$fileName:=Substring($1;$pos{2};$len{2})
$fileType:=Substring($1;$pos{3};$len{3})
$filePath:=Get 4D folder(Current Resources folder)+
$fileType+Folder separator+$fileName+".html"
WEB SEND FILE($filePath)
End if
モバイル
w_sendFile
モバイル
On Web Connection
C_TEXT($1;$2;$3;$4;$5;$6)
$request:=$1
$isMobile:=w_isMobile
Case of
: ($request="/Contacts/")
ALL RECORDS([Contacts])
If ($isMobile)
w_sendFile ("contacts-mobile.html")
Else
w_sendFile ("contacts-desktop.html")
End if
End case
モバイル
モバイル
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
<head>
! <meta charset="utf-8" />
! <meta name="viewport" content="width=device-width, initial-scale=1">
! <title>Contacts</title>
! <!--jQuery Mobile関連のスタイルシートです。-->! !
! <link rel="stylesheet" href="/css/jquery.mobile-1.2.0.min.css" />
! <link rel="stylesheet" href="/css/jquery.mobile.theme-1.2.0.min.css" />
! <link rel="stylesheet" href="/css/jquery.mobile.structure-1.2.0.min.css" />
! <!--はじめにjQuery本体を読み込みます。-->! !
! <script src="/js/jquery-1.8.2.min.js"></script>
! <!--つづけてjQuery Mobileを読み込みます。-->!! ! !
! <script src="/js/jquery.mobile-1.2.0.min.js"></script>
</head>
Resources/html/contacts-mobile.html
jQuery Mobile
<head>
! <meta charset="utf-8" />
! <meta name="viewport" content="width=device-width, initial-scale=1">
! <title>Contacts</title>
! <!--jQuery Mobile関連のスタイルシートです。-->! !
! <link rel="stylesheet" href="/css/jquery.mobile-1.2.0.min.css" />
! <link rel="stylesheet" href="/css/jquery.mobile.theme-1.2.0.min.css" />
! <link rel="stylesheet" href="/css/jquery.mobile.structure-1.2.0.min.css" />
! <!--はじめにjQuery本体を読み込みます。-->! !
! <script src="/js/jquery-1.8.2.min.js"></script>
! <!--つづけてjQuery Mobileを読み込みます。-->!! ! !
! <script src="/js/jquery.mobile-1.2.0.min.js"></script>
</head>
Resources/html/contacts-mobile.html
jQuery Mobile
<head>
! <meta charset="utf-8" />
! <meta name="viewport" content="width=device-width, initial-scale=1">
! <title>Contacts</title>
! <!--jQuery Mobile関連のスタイルシートです。-->! !
! <link rel="stylesheet" href="/css/jquery.mobile-1.2.0.min.css" />
! <link rel="stylesheet" href="/css/jquery.mobile.theme-1.2.0.min.css" />
! <link rel="stylesheet" href="/css/jquery.mobile.structure-1.2.0.min.css" />
! <!--はじめにjQuery本体を読み込みます。-->! !
! <script src="/js/jquery-1.8.2.min.js"></script>
! <!--つづけてjQuery Mobileを読み込みます。-->!! ! !
! <script src="/js/jquery.mobile-1.2.0.min.js"></script>
</head>
Resources/html/contacts-mobile.html
jQuery Mobile
jQuery Mobile
jQuery Mobile
JSON
JSON
http://ja.wikipedia.org/JSON
JSON
http://ja.wikipedia.org/JSON
• JavaScriptオブジェクトの表記法を応用したデータ形式
JSON
http://ja.wikipedia.org/JSON
• JavaScriptオブジェクトの表記法を応用したデータ形式
• JSON = JavaScript Object Notation
JSON
http://ja.wikipedia.org/JSON
• JavaScriptオブジェクトの表記法を応用したデータ形式
• JSON = JavaScript Object Notation
• JSON # JavaScript
JSON
http://ja.wikipedia.org/JSON
• JavaScriptオブジェクトの表記法を応用したデータ形式
• JSON = JavaScript Object Notation
• JSON # JavaScript
Inspired
JSON
http://ja.wikipedia.org/JSON
• JavaScriptオブジェクトの表記法を応用したデータ形式
• JSON = JavaScript Object Notation
• JSON # JavaScript
『JSONは余計な脂肪を除いたXMLの代役』
ダグラス・クロックフォード http://www.json.org/fatfree.html
Inspired
JSONデータの例
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSONデータの例
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
配列
JSONデータの例
文字列
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
配列
JSONデータの例
文字列 数値
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
配列
JSONデータの例
文字列
ブール
数値
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
配列
JSONの特徴
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSONの特徴
JSON特性 メリット
軽量フォーマット HTTP経由に最適
汎用性の高いデータ型と構造
プログラミング言語
に依存しない
標準テキスト 人間が理解
簡潔 (それでも豊かな表現力) 容易に解析
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSONの特徴
JSON特性 メリット
軽量フォーマット HTTP経由に最適
汎用性の高いデータ型と構造
プログラミング言語
に依存しない
標準テキスト 人間が理解
簡潔 (それでも豊かな表現力) 容易に解析
1
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSONの特徴
JSON特性 メリット
軽量フォーマット HTTP経由に最適
汎用性の高いデータ型と構造
プログラミング言語
に依存しない
標準テキスト 人間が理解
簡潔 (それでも豊かな表現力) 容易に解析
2
1
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSONの特徴
JSON特性 メリット
軽量フォーマット HTTP経由に最適
汎用性の高いデータ型と構造
プログラミング言語
に依存しない
標準テキスト 人間が理解
簡潔 (それでも豊かな表現力) 容易に解析
2
3
1
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSONの特徴
JSON特性 メリット
軽量フォーマット HTTP経由に最適
汎用性の高いデータ型と構造
プログラミング言語
に依存しない
標準テキスト 人間が理解
簡潔 (それでも豊かな表現力) 容易に解析
2
3
4
1
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
クライアント サーバー
JSON転送の流れ
http://server.com/q?lastName=keisuke
1
HTTPリクエスト
クライアント サーバー
JSON転送の流れ
http://server.com/q?lastName=keisuke
1
2
HTTPリクエスト
クエリの実行
JSONの組み立て
クライアント サーバー
JSON転送の流れ
http://server.com/q?lastName=keisuke
1
2
3
HTTPリクエスト
クエリの実行
JSONの組み立て
HTTPレスポンス
クライアント サーバー
JSON転送の流れ
[
“Miyako”,
“Keisuke”,
“95015”,
38, true ]
http://server.com/q?lastName=keisuke
1
2
3
4
HTTPリクエスト
クエリの実行
JSONの組み立て
JSONデータを解析
HTTPレスポンス
クライアント サーバー
JSON転送の流れ
[
“Miyako”,
“Keisuke”,
“95015”,
38, true ]
JSONデータ型と4D
JSONデータ型と4D
JSON型 構造体 値 4D型
object ✔
array ✔ 配列
string ✔ テキスト
number ✔ 実数/整数
true/false ✔ ブール
null ✔
JSONデータ型と4D
JSON型 構造体 値 4D型
object ✔
array ✔ 配列
string ✔ テキスト
number ✔ 実数/整数
true/false ✔ ブール
null ✔
JSONデータ型と4D
JSON型 構造体 値 4D型
object ✔
array ✔ 配列
string ✔ テキスト
number ✔ 実数/整数
true/false ✔ ブール
null ✔
JSONデータ型と4D
JSON型 構造体 値 4D型
object ✔
array ✔ 配列
string ✔ テキスト
number ✔ 実数/整数
true/false ✔ ブール
null ✔
JSONデータ型と4D
JSON型 構造体 値 4D型
object ✔
array ✔ 配列
string ✔ テキスト
number ✔ 実数/整数
true/false ✔ ブール
null ✔
JSONデータ型と4D
JSON型 構造体 値 4D型
object ✔
array ✔ 配列
string ✔ テキスト
number ✔ 実数/整数
true/false ✔ ブール
null ✔
JSONデータ型と4D
JSON型 構造体 値 4D型
object ✔
array ✔ 配列
string ✔ テキスト
number ✔ 実数/整数
true/false ✔ ブール
null ✔
JSONデータ型と4D
JSON型 構造体 値 4D型
object ✔
array ✔ 配列
JSONデータ型と4D
JSON型 構造体 値 4D型
object ✔
array ✔ 配列
値は構造体の中にだけ存在する
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSON配列の例
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
myArray
JSON配列の例
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
myArray
配列インデックス 値
myArray[0] ➤ Miyako
myArray[1] ➤ Keisuke
myArray[2] ➤ 95015
myArray[3] ➤ 38
myArray[4] ➤ true
JSON配列の例
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSON配列の例
配列インデックス 値
myArray{1} ➤ Miyako
myArray{2} ➤ Keisuke
myArray{3} ➤ 95015
myArray{4} ➤ 38
myArray{5} ➤ true
myArray
JSONオブジェクトの例
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“city” : “Tokyo”,
“state” : “JP”,
“zip” : “95015”,
“age” : 38,
“male” : true
}
JSONオブジェクトの例
オブジェクト
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“city” : “Tokyo”,
“state” : “JP”,
“zip” : “95015”,
“age” : 38,
“male” : true
}
JSONオブジェクトの例
キー
オブジェクト
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“city” : “Tokyo”,
“state” : “JP”,
“zip” : “95015”,
“age” : 38,
“male” : true
}
JSONオブジェクトの例
値キー
オブジェクト
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“city” : “Tokyo”,
“state” : “JP”,
“zip” : “95015”,
“age” : 38,
“male” : true
}
JSONオブジェクトの例
値キー
オブジェクト
{ “male” : true,
“city” : “Tokyo”,
“lastName” : “Miyako”,
“age” : 38,
“zip” : “95015”,
“firstName” : “Keisuke”,
“state” : “JP”
}
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“city” : “Tokyo”,
“state” : “JP”,
“zip” : “95015”,
“age” : 38,
“male” : true
}
JSONオブジェクトの例
値キー
順不問
オブジェクト
{ “male” : true,
“city” : “Tokyo”,
“lastName” : “Miyako”,
“age” : 38,
“zip” : “95015”,
“firstName” : “Keisuke”,
“state” : “JP”
}
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“city” : “Tokyo”,
“state” : “JP”,
“zip” : “95015”,
“age” : 38,
“male” : true
}
JSONオブジェクトの例
値キー
オブジェクトはキー/値ペア(連想配列)
順不問
オブジェクト
{ “male” : true,
“city” : “Tokyo”,
“lastName” : “Miyako”,
“age” : 38,
“zip” : “95015”,
“firstName” : “Keisuke”,
“state” : “JP”
}
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“city” : “Tokyo”,
“state” : “JP”,
“zip” : “95015”,
“age” : 38,
“male” : true
}
オブジェクト表記
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“city” : “Tokyo”,
“state” : “JP”,
“zip” : “95015”,
“age” : 38,
“male” : true
}
オブジェクト表記
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“city” : “Tokyo”,
“state” : “JP”,
“zip” : “95015”,
“age” : 38,
“male” : true
}
myObject
オブジェクト表記
キー 値
myObject.firstName ➤ Keisuke
myObject.lastName ➤ Miyako
myObject.zip ➤ 95015
myObject.age ➤ 38
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“city” : “Tokyo”,
“state” : “JP”,
“zip” : “95015”,
“age” : 38,
“male” : true
}
myObject
Nested
Object
構造体は値
{ “cell” : “734-555-1234”,
“work” : “734-555-2468”,
“home” : “734-555-1357”
}
Nested
Object
構造体は値
{ “cell” : “734-555-1234”,
“work” : “734-555-2468”,
“home” : “734-555-1357”
}
phone
Nested
Object
構造体は値
キー 値
phone.cell ➤ 734-555-1234
phone.work ➤ 734-555-2468
phone.home ➤ 734-555-1357
{ “cell” : “734-555-1234”,
“work” : “734-555-2468”,
“home” : “734-555-1357”
}
phone
Nested
Object
構造体は値
{ “cell” : “734-555-1234”,
“work” : “734-555-2468”,
“home” : “734-555-1357”
}
phone
Nested
Object
構造体は値
{ “cell” : “734-555-1234”,
“work” : “734-555-2468”,
“home” : “734-555-1357”
}
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“phone” :
}
phone
Nested
Object
構造体は値
{ “cell” : “734-555-1234”,
“work” : “734-555-2468”,
“home” : “734-555-1357”
}
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“phone” :
}
contact
phone
Nested
Object
構造体は値
キー 値
contact.phone.cell ➤ 734-555-1234
contact.phone.work ➤ 734-555-2468
contact.phone.home ➤ 734-555-1357
{ “cell” : “734-555-1234”,
“work” : “734-555-2468”,
“home” : “734-555-1357”
}
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“phone” :
}
contact
phone
構造体のネスト
ネストできるものネストできるものネストできるもの
オブジェクト
配列
構造体のネスト
ネストできるものネストできるものネストできるもの
オブジェクト
配列
オブジェクト 配列 値
✔ ✔ ✔
✔ ✔ ✔
構造体のネスト
ネストできるものネストできるものネストできるもの
オブジェクト
配列
オブジェクト 配列 値
✔ ✔ ✔
✔ ✔ ✔
構造体のネスト
ネストできるものネストできるものネストできるもの
オブジェクト
配列
オブジェクト 配列 値
✔ ✔ ✔
✔ ✔ ✔
構造体のネスト
•ネストされた構造体は階層構造を形成する
ネストできるものネストできるものネストできるもの
オブジェクト
配列
オブジェクト 配列 値
✔ ✔ ✔
✔ ✔ ✔
構造体のネスト
•ネストされた構造体は階層構造を形成する
•階層数に制限はない
ネストできるものネストできるものネストできるもの
オブジェクト
配列
オブジェクト 配列 値
✔ ✔ ✔
✔ ✔ ✔
配列のネスト
[
[ 4, “Cape”, 699.00 ],
[ 6, “Cowl”, 1195.00 ],
[ 3, “Boots”, 395.00 ],
[ 1, “Batwing”, 697199.00 ]
]
配列のネスト
lineItem
[
[ 4, “Cape”, 699.00 ],
[ 6, “Cowl”, 1195.00 ],
[ 3, “Boots”, 395.00 ],
[ 1, “Batwing”, 697199.00 ]
]
配列のネスト
lineItem
lineItem[1][
[ 4, “Cape”, 699.00 ],
[ 6, “Cowl”, 1195.00 ],
[ 3, “Boots”, 395.00 ],
[ 1, “Batwing”, 697199.00 ]
]
配列のネスト
lineItem
lineItem[1][
[ 4, “Cape”, 699.00 ],
[ 6, “Cowl”, 1195.00 ],
[ 3, “Boots”, 395.00 ],
[ 1, “Batwing”, 697199.00 ]
]
lineItem[1][2]
オブジェクトのネスト
{ “number” : “37584”,
“customerID” : “1690”,
“customerName” : “Bruce Wayne”,
“subtotal” : 708350.00,
“salesTax” : 63751.50,
“total” : 772101.50,
“lineItem” : [ {“qty”:4, “desc”:”Cape”, “price”:699.00},
{“qty”:6, “desc”:”Cowl”, “price”:1195.00},
{“qty”:3, “desc”:”Boots”, “price”:395.00},
{“qty”:1, “desc”:”Batwing”, “price”:697199.00}
]
}
オブジェクトのネスト
{ “number” : “37584”,
“customerID” : “1690”,
“customerName” : “Bruce Wayne”,
“subtotal” : 708350.00,
“salesTax” : 63751.50,
“total” : 772101.50,
“lineItem” : [ {“qty”:4, “desc”:”Cape”, “price”:699.00},
{“qty”:6, “desc”:”Cowl”, “price”:1195.00},
{“qty”:3, “desc”:”Boots”, “price”:395.00},
{“qty”:1, “desc”:”Batwing”, “price”:697199.00}
]
}
オブジェクトのネスト
invoice
{ “number” : “37584”,
“customerID” : “1690”,
“customerName” : “Bruce Wayne”,
“subtotal” : 708350.00,
“salesTax” : 63751.50,
“total” : 772101.50,
“lineItem” : [ {“qty”:4, “desc”:”Cape”, “price”:699.00},
{“qty”:6, “desc”:”Cowl”, “price”:1195.00},
{“qty”:3, “desc”:”Boots”, “price”:395.00},
{“qty”:1, “desc”:”Batwing”, “price”:697199.00}
]
}
オブジェクトのネスト
{ “number” : “37584”,
“customerID” : “1690”,
“customerName” : “Bruce Wayne”,
“subtotal” : 708350.00,
“salesTax” : 63751.50,
“total” : 772101.50,
“lineItem” : [ {“qty”:4, “desc”:”Cape”, “price”:699.00},
{“qty”:6, “desc”:”Cowl”, “price”:1195.00},
{“qty”:3, “desc”:”Boots”, “price”:395.00},
{“qty”:1, “desc”:”Batwing”, “price”:697199.00}
]
}
invoice.lineItem
invoice
オブジェクトのネスト
{ “number” : “37584”,
“customerID” : “1690”,
“customerName” : “Bruce Wayne”,
“subtotal” : 708350.00,
“salesTax” : 63751.50,
“total” : 772101.50,
“lineItem” : [ {“qty”:4, “desc”:”Cape”, “price”:699.00},
{“qty”:6, “desc”:”Cowl”, “price”:1195.00},
{“qty”:3, “desc”:”Boots”, “price”:395.00},
{“qty”:1, “desc”:”Batwing”, “price”:697199.00}
]
}
invoice
invoice.lineItem[1]
invoice.lineItem
オブジェクトのネスト
{ “number” : “37584”,
“customerID” : “1690”,
“customerName” : “Bruce Wayne”,
“subtotal” : 708350.00,
“salesTax” : 63751.50,
“total” : 772101.50,
“lineItem” : [ {“qty”:4, “desc”:”Cape”, “price”:699.00},
{“qty”:6, “desc”:”Cowl”, “price”:1195.00},
{“qty”:3, “desc”:”Boots”, “price”:395.00},
{“qty”:1, “desc”:”Batwing”, “price”:697199.00}
]
}
invoice
invoice.lineItem[1]
invoice.lineItem[1].desc
invoice.lineItem
function selectContact(ContactId){
! $.getJSON('data', 'id='+ContactId, function(data){
! ! !
$("#contactId").val(data.contactId);
! $("#firstName").val(data.firstName);
! $("#lastName").val(data.lastName);
! $("#email").val(data.email);
! $("#mobilePhone").val(data.mobilePhone);
! ! !
})
! return true;
}
JSON
WebFolder/js/contact-mobile.js
function selectContact(ContactId){
! $.getJSON('data', 'id='+ContactId, function(data){
! ! !
$("#contactId").val(data.contactId);
! $("#firstName").val(data.firstName);
! $("#lastName").val(data.lastName);
! $("#email").val(data.email);
! $("#mobilePhone").val(data.mobilePhone);
! ! !
})
! return true;
}
JSON
WebFolder/js/contact-mobile.js
C_TEXT($1;$2;$3;$4;$5;$6)
$request:=$1
Case of
: ($request="/Contacts/data?id=@")
ARRAY TEXT($names;0)
ARRAY TEXT($values;0)
WEB GET VARIABLES($names;$values)
$i:=Find in array($names;"id")
If ($i#-1)
QUERY([Contacts];[Contacts]id=$values{$i})
w_sendFile ("contact.json")
End if
End case
JSON
On Web Connection
C_TEXT($1;$2;$3;$4;$5;$6)
$request:=$1
Case of
: ($request="/Contacts/data?id=@")
ARRAY TEXT($names;0)
ARRAY TEXT($values;0)
WEB GET VARIABLES($names;$values)
$i:=Find in array($names;"id")
If ($i#-1)
QUERY([Contacts];[Contacts]id=$values{$i})
w_sendFile ("contact.json")
End if
End case
JSON
On Web Connection
{
! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",
! "firstName":"<!--4DTEXT w_escapeText([Contacts]firstName)-->",
! "lastName":"<!--4DTEXT w_escapeText([Contacts]lastName)-->",
! "email":"<!--4DTEXT w_escapeText([Contacts]email)-->",
! "mobilePhone":"<!--4DTEXT w_escapeText([Contacts]mobilePhone)-->"
}
JSON
Resources/json/contact.html
function saveContact(){
! $.post('data/update', $("#contactForm").serialize(), function(data){
! ! loadContacts();
! ! })
}
JSON
WebFolder/js/contact-mobile.js
function saveContact(){
! $.post('data/update', $("#contactForm").serialize(), function(data){
! ! loadContacts();
! ! })
}
JSON
WebFolder/js/contact-mobile.js
C_BOOLEAN($0;$isPost)
ARRAY TEXT($headerNames;0)
ARRAY TEXT($headerValues;0)
WEB GET HTTP HEADER($headerNames;$headerValues)
C_LONGINT($i)
$i:=Find in array($headerNames;"X-METHOD")
$isPost:=False
If ($i#-1)
$isPost:=($headerValues{$i}="POST")
$i:=Find in array($headerNames;"X-METHOD-OVERRIDE")
If ($i#-1)
$isPost:=False
End if
End if
$0:=$isPost
まとめ
w_isPost
C_BOOLEAN($0;$isPost)
ARRAY TEXT($headerNames;0)
ARRAY TEXT($headerValues;0)
WEB GET HTTP HEADER($headerNames;$headerValues)
C_LONGINT($i)
$i:=Find in array($headerNames;"X-METHOD")
$isPost:=False
If ($i#-1)
$isPost:=($headerValues{$i}="POST")
$i:=Find in array($headerNames;"X-METHOD-OVERRIDE")
If ($i#-1)
$isPost:=False
End if
End if
$0:=$isPost
まとめ
w_isPost
C_BOOLEAN($0;$isPost)
ARRAY TEXT($headerNames;0)
ARRAY TEXT($headerValues;0)
WEB GET HTTP HEADER($headerNames;$headerValues)
C_LONGINT($i)
$i:=Find in array($headerNames;"X-METHOD")
$isPost:=False
If ($i#-1)
$isPost:=($headerValues{$i}="POST")
$i:=Find in array($headerNames;"X-METHOD-OVERRIDE")
If ($i#-1)
$isPost:=False
End if
End if
$0:=$isPost
まとめ
w_isPost
C_TEXT($1;$2;$3;$4;$5;$6)
$request:=$1
Case of
: ($request="/Contacts/")
Contacts_Send_page
: ($request="/Contacts/data")
Contacts_Send_all
: ($request="/Contacts/data?id=@")
Contacts_Send_1
: ($request="/Contacts/data/update")
Contacts_Update
End case
まとめ
On Web Connection
C_DATE($1;$date)
C_TIME($2;$time)
C_TEXT($0)
If (Count parameters>0)
$date:=$1
If (Count parameters>1)
$time:=$2
Else
$time:=Current time
End if
Else
$date:=Current date
$time:=Current time
End if
$0:=String($date;ISO Date GMT;$time)
w_escapeDate
データオブジェクトの作成
C_DATE($1;$date)
C_TIME($2;$time)
C_TEXT($0)
If (Count parameters>0)
$date:=$1
If (Count parameters>1)
$time:=$2
Else
$time:=Current time
End if
Else
$date:=Current date
$time:=Current time
End if
$0:=String($date;ISO Date GMT;$time)
w_escapeDate
データオブジェクトの作成
Webセミナー
終

More Related Content

Similar to Web Basics 2013-01-10

Tags 2013-07-02
Tags 2013-07-02Tags 2013-07-02
Tags 2013-07-02kmiyako
 
behatエクステンションの作り方
behatエクステンションの作り方behatエクステンションの作り方
behatエクステンションの作り方Ryo Tomidokoro
 
最近、僕がハマったFuelPHPの紹介
最近、僕がハマったFuelPHPの紹介最近、僕がハマったFuelPHPの紹介
最近、僕がハマったFuelPHPの紹介Naoto Mawatari
 
もう XAMPP / MAMP はいらない!
Vagrant で作る PHP 開発環境
もう XAMPP / MAMP はいらない!
Vagrant で作る PHP 開発環境もう XAMPP / MAMP はいらない!
Vagrant で作る PHP 開発環境
もう XAMPP / MAMP はいらない!
Vagrant で作る PHP 開発環境Masashi Shinbara
 
Firefox5+HTML5×5
Firefox5+HTML5×5Firefox5+HTML5×5
Firefox5+HTML5×5dynamis
 
FukuokaPHP 3
FukuokaPHP 3FukuokaPHP 3
FukuokaPHP 3ichikaway
 
PHP, Now and Then 2011
PHP, Now and Then 2011PHP, Now and Then 2011
PHP, Now and Then 2011Rui Hirokawa
 
OWASP WordPressセキュリティ実装ガイドライン (セキュアなWordPressの構築ハンズオン手順書)
OWASP WordPressセキュリティ実装ガイドライン (セキュアなWordPressの構築ハンズオン手順書)OWASP WordPressセキュリティ実装ガイドライン (セキュアなWordPressの構築ハンズオン手順書)
OWASP WordPressセキュリティ実装ガイドライン (セキュアなWordPressの構築ハンズオン手順書)OWASP Nagoya
 
Firefox with HTML+CSS
Firefox with HTML+CSSFirefox with HTML+CSS
Firefox with HTML+CSSdynamis
 
Xml builderの紹介
Xml builderの紹介Xml builderの紹介
Xml builderの紹介Hiraku Nakano
 
omoon.org の裏側 〜FuelPHP の task 活用例〜
omoon.org の裏側 〜FuelPHP の task 活用例〜omoon.org の裏側 〜FuelPHP の task 活用例〜
omoon.org の裏側 〜FuelPHP の task 活用例〜Sotaro Omura
 
Long Life Web Performance Optimization
Long Life Web Performance OptimizationLong Life Web Performance Optimization
Long Life Web Performance OptimizationKoji Ishimoto
 
OWASP Nagoya_WordPress_Handson_3
OWASP Nagoya_WordPress_Handson_3OWASP Nagoya_WordPress_Handson_3
OWASP Nagoya_WordPress_Handson_3OWASP Nagoya
 
PHP in Java -Quercus- によるレガシーマイグレーション実例 #jjug_ccc #ccc_r12
PHP in Java -Quercus- によるレガシーマイグレーション実例 #jjug_ccc #ccc_r12PHP in Java -Quercus- によるレガシーマイグレーション実例 #jjug_ccc #ccc_r12
PHP in Java -Quercus- によるレガシーマイグレーション実例 #jjug_ccc #ccc_r12Ryuji Yamashita
 
モダンmod_perl入門 #yapcasia
モダンmod_perl入門 #yapcasiaモダンmod_perl入門 #yapcasia
モダンmod_perl入門 #yapcasia鉄次 尾形
 
Hive on Spark を活用した高速データ分析 - Hadoop / Spark Conference Japan 2016
Hive on Spark を活用した高速データ分析 - Hadoop / Spark Conference Japan 2016Hive on Spark を活用した高速データ分析 - Hadoop / Spark Conference Japan 2016
Hive on Spark を活用した高速データ分析 - Hadoop / Spark Conference Japan 2016Nagato Kasaki
 

Similar to Web Basics 2013-01-10 (20)

Tags 2013-07-02
Tags 2013-07-02Tags 2013-07-02
Tags 2013-07-02
 
behatエクステンションの作り方
behatエクステンションの作り方behatエクステンションの作り方
behatエクステンションの作り方
 
最近、僕がハマったFuelPHPの紹介
最近、僕がハマったFuelPHPの紹介最近、僕がハマったFuelPHPの紹介
最近、僕がハマったFuelPHPの紹介
 
もう XAMPP / MAMP はいらない!
Vagrant で作る PHP 開発環境
もう XAMPP / MAMP はいらない!
Vagrant で作る PHP 開発環境もう XAMPP / MAMP はいらない!
Vagrant で作る PHP 開発環境
もう XAMPP / MAMP はいらない!
Vagrant で作る PHP 開発環境
 
Firefox5+HTML5×5
Firefox5+HTML5×5Firefox5+HTML5×5
Firefox5+HTML5×5
 
FukuokaPHP 3
FukuokaPHP 3FukuokaPHP 3
FukuokaPHP 3
 
PHP, Now and Then 2011
PHP, Now and Then 2011PHP, Now and Then 2011
PHP, Now and Then 2011
 
Haikara
HaikaraHaikara
Haikara
 
OWASP WordPressセキュリティ実装ガイドライン (セキュアなWordPressの構築ハンズオン手順書)
OWASP WordPressセキュリティ実装ガイドライン (セキュアなWordPressの構築ハンズオン手順書)OWASP WordPressセキュリティ実装ガイドライン (セキュアなWordPressの構築ハンズオン手順書)
OWASP WordPressセキュリティ実装ガイドライン (セキュアなWordPressの構築ハンズオン手順書)
 
How to run P4 BMv2
How to run P4 BMv2How to run P4 BMv2
How to run P4 BMv2
 
Firefox with HTML+CSS
Firefox with HTML+CSSFirefox with HTML+CSS
Firefox with HTML+CSS
 
Xml builderの紹介
Xml builderの紹介Xml builderの紹介
Xml builderの紹介
 
AlfrescoとSolr(中編)
AlfrescoとSolr(中編)AlfrescoとSolr(中編)
AlfrescoとSolr(中編)
 
omoon.org の裏側 〜FuelPHP の task 活用例〜
omoon.org の裏側 〜FuelPHP の task 活用例〜omoon.org の裏側 〜FuelPHP の task 活用例〜
omoon.org の裏側 〜FuelPHP の task 活用例〜
 
Long Life Web Performance Optimization
Long Life Web Performance OptimizationLong Life Web Performance Optimization
Long Life Web Performance Optimization
 
OWASP Nagoya_WordPress_Handson_3
OWASP Nagoya_WordPress_Handson_3OWASP Nagoya_WordPress_Handson_3
OWASP Nagoya_WordPress_Handson_3
 
PHP in Java -Quercus- によるレガシーマイグレーション実例 #jjug_ccc #ccc_r12
PHP in Java -Quercus- によるレガシーマイグレーション実例 #jjug_ccc #ccc_r12PHP in Java -Quercus- によるレガシーマイグレーション実例 #jjug_ccc #ccc_r12
PHP in Java -Quercus- によるレガシーマイグレーション実例 #jjug_ccc #ccc_r12
 
モダンmod_perl入門 #yapcasia
モダンmod_perl入門 #yapcasiaモダンmod_perl入門 #yapcasia
モダンmod_perl入門 #yapcasia
 
OSC福岡 20111203
OSC福岡 20111203OSC福岡 20111203
OSC福岡 20111203
 
Hive on Spark を活用した高速データ分析 - Hadoop / Spark Conference Japan 2016
Hive on Spark を活用した高速データ分析 - Hadoop / Spark Conference Japan 2016Hive on Spark を活用した高速データ分析 - Hadoop / Spark Conference Japan 2016
Hive on Spark を活用した高速データ分析 - Hadoop / Spark Conference Japan 2016
 

More from kmiyako

Build an iOS app with Ionic and 4D
Build an iOS app with Ionic and 4DBuild an iOS app with Ionic and 4D
Build an iOS app with Ionic and 4Dkmiyako
 
4D WORLD TOUR 2017
4D WORLD TOUR 20174D WORLD TOUR 2017
4D WORLD TOUR 2017kmiyako
 
Inside Multi-Threading
Inside Multi-ThreadingInside Multi-Threading
Inside Multi-Threadingkmiyako
 
Mirroring
MirroringMirroring
Mirroringkmiyako
 
Objects Fields
Objects FieldsObjects Fields
Objects Fieldskmiyako
 
Code Optimisation
Code OptimisationCode Optimisation
Code Optimisationkmiyako
 
Auto Update
Auto UpdateAuto Update
Auto Updatekmiyako
 
Classic Query Editor
Classic Query EditorClassic Query Editor
Classic Query Editorkmiyako
 
Web area-phone-home
Web area-phone-homeWeb area-phone-home
Web area-phone-homekmiyako
 
MONET研究会 #14
MONET研究会 #14MONET研究会 #14
MONET研究会 #14kmiyako
 
初心者からプロフェッショナルまで~データベース開発ソフト4Dの魅力を徹底紹介~
初心者からプロフェッショナルまで~データベース開発ソフト4Dの魅力を徹底紹介~初心者からプロフェッショナルまで~データベース開発ソフト4Dの魅力を徹底紹介~
初心者からプロフェッショナルまで~データベース開発ソフト4Dの魅力を徹底紹介~kmiyako
 
Journaling slides
Journaling slidesJournaling slides
Journaling slideskmiyako
 
Unicode-v11-5
Unicode-v11-5Unicode-v11-5
Unicode-v11-5kmiyako
 
Unicode-v11-0
Unicode-v11-0Unicode-v11-0
Unicode-v11-0kmiyako
 
アップグレードセミナー
アップグレードセミナーアップグレードセミナー
アップグレードセミナーkmiyako
 
4D Write Pro
4D Write Pro4D Write Pro
4D Write Prokmiyako
 

More from kmiyako (20)

Build an iOS app with Ionic and 4D
Build an iOS app with Ionic and 4DBuild an iOS app with Ionic and 4D
Build an iOS app with Ionic and 4D
 
4D WORLD TOUR 2017
4D WORLD TOUR 20174D WORLD TOUR 2017
4D WORLD TOUR 2017
 
Leaflet
LeafletLeaflet
Leaflet
 
Inside Multi-Threading
Inside Multi-ThreadingInside Multi-Threading
Inside Multi-Threading
 
4D Tags
4D Tags4D Tags
4D Tags
 
Mirroring
MirroringMirroring
Mirroring
 
Objects Fields
Objects FieldsObjects Fields
Objects Fields
 
Code Optimisation
Code OptimisationCode Optimisation
Code Optimisation
 
Auto Update
Auto UpdateAuto Update
Auto Update
 
Classic Query Editor
Classic Query EditorClassic Query Editor
Classic Query Editor
 
Web area-phone-home
Web area-phone-homeWeb area-phone-home
Web area-phone-home
 
MONET研究会 #14
MONET研究会 #14MONET研究会 #14
MONET研究会 #14
 
4d
4d4d
4d
 
初心者からプロフェッショナルまで~データベース開発ソフト4Dの魅力を徹底紹介~
初心者からプロフェッショナルまで~データベース開発ソフト4Dの魅力を徹底紹介~初心者からプロフェッショナルまで~データベース開発ソフト4Dの魅力を徹底紹介~
初心者からプロフェッショナルまで~データベース開発ソフト4Dの魅力を徹底紹介~
 
Xslt
XsltXslt
Xslt
 
Journaling slides
Journaling slidesJournaling slides
Journaling slides
 
Unicode-v11-5
Unicode-v11-5Unicode-v11-5
Unicode-v11-5
 
Unicode-v11-0
Unicode-v11-0Unicode-v11-0
Unicode-v11-0
 
アップグレードセミナー
アップグレードセミナーアップグレードセミナー
アップグレードセミナー
 
4D Write Pro
4D Write Pro4D Write Pro
4D Write Pro
 

Recently uploaded

「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦Sadao Tokuyama
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 

Recently uploaded (12)

2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 

Web Basics 2013-01-10