Your SlideShare is downloading. ×
Web Basics 2013-01-10
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Web Basics 2013-01-10

225
views

Published on

2012年後期から毎週開催。4D v13 Webサーバーの基本講習です。

2012年後期から毎週開催。4D v13 Webサーバーの基本講習です。

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
225
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Webセミナー
  • 2. 基本
  • 3. 基本 フロントエンド コミュニケーション バックエンド HTML CSS JavaScript jQuery JSON HTTP On Web Connection 4Dタグ WEB SEND FILE
  • 4. 基本 フロントエンド バックエンド HTML CSS JavaScript jQuery JSON On Web Connection 4Dタグ WEB SEND FILE
  • 5. 基本 フロントエンド バックエンド
  • 6. 基本 フロントエンド バックエンド
  • 7. 基本 フロントエンド バックエンド
  • 8. 基本 Webクライアント コミュニケーション Webサーバー
  • 9. 基本 Webクライアント コミュニケーション Webサーバー http://192.168.1.114:8080/hello.html リクエスト
  • 10. 基本 Webクライアント コミュニケーション Webサーバー http://192.168.1.114:8080/hello.html レスポンス リクエスト
  • 11. 基本 http://192.168.1.114:8080/hello.html リクエスト
  • 12. 基本 http://192.168.1.114:8080/hello.html リクエスト
  • 13. 基本 http://192.168.1.114:8080/hello.html リクエスト プロトコル
  • 14. 基本 http://192.168.1.114:8080/hello.html リクエスト プロトコル ホスト
  • 15. 基本 http://192.168.1.114:8080/hello.html リクエスト プロトコル ホスト ポート
  • 16. 基本 http://192.168.1.114:8080/hello.html リクエスト プロトコル ホスト ポート リクエスト
  • 17. 基本 Webクライアント コミュニケーション Webサーバー http://192.168.1.114:8080/hello.html レスポンス リクエスト
  • 18. 基本 レスポンス
  • 19. 基本 レスポンス
  • 20. 基本 レスポンス
  • 21. 基本 レスポンス
  • 22. 基本 フロントエンド バックエンド
  • 23. 基本 バックエンド
  • 24. 基本 バックエンド スタティック(静)
  • 25. 基本 バックエンド • 静的なコンテンツ スタティック(静)
  • 26. 基本 バックエンド • 静的なコンテンツ • HTML スタティック(静)
  • 27. 基本 バックエンド • 静的なコンテンツ • HTML • 画像 スタティック(静)
  • 28. 基本 バックエンド • 静的なコンテンツ • HTML • 画像 • リクエスト処理前に出力済 スタティック(静)
  • 29. 基本 バックエンド • 静的なコンテンツ • HTML • 画像 • リクエスト処理前に出力済 スタティック(静)
  • 30. 基本 • 静的なコンテンツ • HTML • 画像 • リクエスト処理前に出力済 スタティック(静) バックエンド
  • 31. 基本 • 静的なコンテンツ • HTML • 画像 • リクエスト処理前に出力済 スタティック(静) バックエンド
  • 32. 基本 • 静的なコンテンツ • HTML • 画像 • リクエスト処理前に出力済 スタティック(静) バックエンド
  • 33. 基本 • 静的なコンテンツ • HTML • 画像 • リクエスト処理前に出力済 スタティック(静) バックエンド
  • 34. 基本 • 静的なコンテンツ • HTML • 画像 • リクエスト処理前に出力済 スタティック(静) バックエンド
  • 35. 基本 • 静的なコンテンツ • HTML • 画像 • リクエスト処理前に出力済 スタティック(静) バックエンド
  • 36. 基本 • 静的なコンテンツ • HTML • 画像 • リクエスト処理前に出力済 スタティック(静) バックエンド
  • 37. 基本 • 静的なコンテンツ • HTML • 画像 • リクエスト処理前に出力済 スタティック(静) バックエンド WEB START SERVER If(OK=1) //success End if
  • 38. 基本 バックエンド • 静的なコンテンツ • HTML • 画像 • リクエスト処理前に出力済 スタティック(静)
  • 39. 基本 バックエンド ダイナミック(動)
  • 40. 基本 • 動的なコンテンツ バックエンド ダイナミック(動)
  • 41. 基本 • 動的なコンテンツ • HTML バックエンド ダイナミック(動)
  • 42. 基本 • 動的なコンテンツ • HTML • 画像 バックエンド ダイナミック(動)
  • 43. 基本 • 動的なコンテンツ • HTML • 画像 • リクエスト処理時に出力 バックエンド ダイナミック(動)
  • 44. 基本 4Dタグ バックエンド
  • 45. 基本 4Dタグ バックエンド • 4DTEXT
  • 46. 基本 4Dタグ バックエンド • 4DTEXT • 4DHTML
  • 47. 基本 4Dタグ バックエンド • 4DTEXT • 4DHTML • 4DSCRIPT
  • 48. 基本 4Dタグ バックエンド • 4DTEXT • 4DHTML • 4DSCRIPT • 4DINCLUDE
  • 49. 基本 4Dタグ バックエンド • 4DTEXT • 4DHTML • 4DSCRIPT • 4DINCLUDE • 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
  • 50. 基本 4Dタグ バックエンド • 4DTEXT • 4DHTML • 4DSCRIPT • 4DINCLUDE • 4DIF, 4DELSE, 4DELSEIF, 4DENDIF • 4DLOOP, 4DENDLOOP
  • 51. 基本 4Dタグ バックエンド • 4DTEXT • 4DHTML • 4DSCRIPT • 4DINCLUDE • 4DIF, 4DELSE, 4DELSEIF, 4DENDIF • 4DLOOP, 4DENDLOOP • 4DBASE
  • 52. 基本 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])-->件のレ コードがみつかりました。
  • 53. 基本 4Dタグ • 4DTEXT • 4DHTML • 4DSCRIPT • 4DINCLUDE • 4DIF, 4DELSE, 4DELSEIF, 4DENDIF • 4DLOOP, 4DENDLOOP • 4DBASE <h1>ようこそ<!--#4DHTML [CONTACTS]FirstName--></h1> <p>ユーザー名: <!--#4DHTML vtUserName--></p> <!--#4DHTML myArray{7}-->
  • 54. 基本 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>"
  • 55. 基本 4Dタグ • 4DTEXT • 4DHTML • 4DSCRIPT • 4DINCLUDE • 4DIF, 4DELSE, 4DELSEIF, 4DENDIF • 4DLOOP, 4DENDLOOP • 4DBASE
  • 56. 基本 4Dタグ • 4DTEXT • 4DHTML • 4DSCRIPT • 4DINCLUDE • 4DIF, 4DELSE, 4DELSEIF, 4DENDIF • 4DLOOP, 4DENDLOOP • 4DBASE <!--#4DSCRIPT/MethodName/Param-->
  • 57. 基本 4Dタグ • 4DTEXT • 4DHTML • 4DSCRIPT • 4DINCLUDE • 4DIF, 4DELSE, 4DELSEIF, 4DENDIF • 4DLOOP, 4DENDLOOP • 4DBASE <!--#4DSCRIPT/MethodName/Param--> /Param
  • 58. 基本 4Dタグ • 4DTEXT • 4DHTML • 4DSCRIPT • 4DINCLUDE • 4DIF, 4DELSE, 4DELSEIF, 4DENDIF • 4DLOOP, 4DENDLOOP • 4DBASE <!--#4DSCRIPT/MethodName/Param--> /Param 公開メソッド
  • 59. 基本 4Dタグ • 4DTEXT • 4DHTML • 4DSCRIPT • 4DINCLUDE • 4DIF, 4DELSE, 4DELSEIF, 4DENDIF • 4DLOOP, 4DENDLOOP • 4DBASE <!--#4DSCRIPT/MethodName/Param--> /Param 公開メソッド
  • 60. 基本 4Dタグ • 4DTEXT • 4DHTML • 4DSCRIPT • 4DINCLUDE • 4DIF, 4DELSE, 4DELSEIF, 4DENDIF • 4DLOOP, 4DENDLOOP • 4DBASE
  • 61. 基本 4Dタグ • 4DTEXT • 4DHTML • 4DSCRIPT • 4DINCLUDE • 4DIF, 4DELSE, 4DELSEIF, 4DENDIF • 4DLOOP, 4DENDLOOP • 4DBASE <!--#4DINCLUDE header/menu.html-->
  • 62. 基本 4Dタグ • 4DTEXT • 4DHTML • 4DSCRIPT • 4DINCLUDE • 4DIF, 4DELSE, 4DELSEIF, 4DENDIF • 4DLOOP, 4DENDLOOP • 4DBASE
  • 63. 基本 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>
  • 64. 基本 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>
  • 65. 基本 4Dタグ • 4DTEXT • 4DHTML • 4DSCRIPT • 4DINCLUDE • 4DIF, 4DELSE, 4DENDIF • 4DLOOP, 4DENDLOOP • 4DBASE
  • 66. 基本 4Dタグ • 4DTEXT • 4DHTML • 4DSCRIPT • 4DINCLUDE • 4DIF, 4DELSE, 4DENDIF • 4DLOOP, 4DENDLOOP • 4DBASE <!--4DLOOP (arrCities)--> <p><!--4DTEXT arrCities{arrCities}--></p> <!--4DENDLOOP-->
  • 67. 基本 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-->
  • 68. 基本 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-->
  • 69. 基本 4Dタグ • 4DTEXT • 4DHTML • 4DSCRIPT • 4DINCLUDE • 4DIF, 4DELSE, 4DENDIF • 4DLOOP, 4DENDLOOP • 4DBASE
  • 70. 基本 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-->
  • 71. 基本 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
  • 72. 基本 Webクライアント コミュニケーション Webサーバー
  • 73. 基本 Webクライアント コミュニケーション Webサーバー http://192.168.1.114:8080/hello.html リクエスト
  • 74. 基本 Webクライアント コミュニケーション Webサーバー http://192.168.1.114:8080/hello.html リクエスト .html
  • 75. 基本 Webクライアント コミュニケーション Webサーバー http://192.168.1.114:8080/hello.html リクエスト .html
  • 76. 基本 Webクライアント コミュニケーション Webサーバー
  • 77. 基本 Webクライアント コミュニケーション Webサーバー http://192.168.1.114:8080/hello.shtml リクエスト
  • 78. 基本 Webクライアント コミュニケーション Webサーバー http://192.168.1.114:8080/hello.shtml リクエスト .shtml
  • 79. 基本 Webクライアント コミュニケーション Webサーバー レスポンス ファイル読み込み 4Dタグ処理 http://192.168.1.114:8080/hello.shtml リクエスト .shtml
  • 80. 基本 Webクライアント コミュニケーション Webサーバー
  • 81. 基本 Webクライアント コミュニケーション Webサーバー http://192.168.1.114/4DACTION/myMethod/hello リクエスト
  • 82. 基本 Webクライアント コミュニケーション Webサーバー http://192.168.1.114/4DACTION/myMethod/hello リクエスト /4DACTION/myMethod/hello
  • 83. 基本 Webクライアント コミュニケーション Webサーバー メソッド実行 http://192.168.1.114/4DACTION/myMethod/hello リクエスト
  • 84. 基本 Webクライアント コミュニケーション Webサーバー メソッド実行 http://192.168.1.114/4DACTION/myMethod/hello リクエスト WEB SEND FILE
  • 85. 基本 Webクライアント コミュニケーション Webサーバー レスポンス メソッド実行 4Dタグ処理 http://192.168.1.114/4DACTION/myMethod/hello リクエスト ファイル読み込み WEB SEND FILE
  • 86. 基本 Webクライアント コミュニケーション Webサーバー
  • 87. 基本 Webクライアント コミュニケーション Webサーバー http://192.168.1.114/hello リクエスト
  • 88. 基本 Webクライアント コミュニケーション Webサーバー http://192.168.1.114/hello リクエスト /hello
  • 89. 基本 Webクライアント コミュニケーション Webサーバー On Web Connection http://192.168.1.114/hello リクエスト
  • 90. 基本 Webクライアント コミュニケーション Webサーバー On Web Connection http://192.168.1.114/hello リクエスト WEB SEND FILE
  • 91. 基本 Webクライアント コミュニケーション Webサーバー レスポンス On Web Connection 4Dタグ処理 http://192.168.1.114/hello リクエスト ファイル読み込み WEB SEND FILE
  • 92. 基本 On Web Connection
  • 93. 基本 On Web Connection
  • 94. 基本 On Web Connection • $1リクエスト
  • 95. 基本 On Web Connection • $1リクエスト • $2 HTTPヘッダ+ボディ(一部)
  • 96. 基本 On Web Connection • $1リクエスト • $2 HTTPヘッダ+ボディ(一部) • $3 クライアントIPアドレス
  • 97. 基本 On Web Connection • $1リクエスト • $2 HTTPヘッダ+ボディ(一部) • $3 クライアントIPアドレス • $4 サーバーIPアドレス
  • 98. 基本 On Web Connection • $1リクエスト • $2 HTTPヘッダ+ボディ(一部) • $3 クライアントIPアドレス • $4 サーバーIPアドレス • $5 ユーザー名
  • 99. 基本 On Web Connection • $1リクエスト • $2 HTTPヘッダ+ボディ(一部) • $3 クライアントIPアドレス • $4 サーバーIPアドレス • $5 ユーザー名 • $6 パスワード
  • 100. 基本 On Web Connection • $1リクエスト • $2 HTTPヘッダ+ボディ(一部) • $3 クライアントIPアドレス • $4 サーバーIPアドレス • $5 ユーザー名 • $6 パスワード WEB GET VARIABLES
  • 101. 基本 On Web Connection • $1リクエスト • $2 HTTPヘッダ+ボディ(一部) • $3 クライアントIPアドレス • $4 サーバーIPアドレス • $5 ユーザー名 • $6 パスワード WEB GET HTTP HEADER WEB GET VARIABLES
  • 102. 基本 On Web Connection • $1リクエスト • $2 HTTPヘッダ+ボディ(一部) • $3 クライアントIPアドレス • $4 サーバーIPアドレス • $5 ユーザー名 • $6 パスワード WEB GET HTTP BODY WEB GET HTTP HEADER WEB GET VARIABLES
  • 103. 基本 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
  • 104. まとめ
  • 105. 基本
  • 106. 基本 • スタティック(静) • HTML ページ • images 画像 • css スタイル • js スクリプト
  • 107. 基本 • スタティック(静) • HTML ページ • images 画像 • css スタイル • js スクリプト • ダイナミック(動) • HTML ページ • images 画像 • json データ
  • 108. 基本 • スタティック(静) • HTML ページ • images 画像 • css スタイル • js スクリプト • ダイナミック(動) • HTML ページ • images 画像 • json データ
  • 109. 基本 • ダイナミック(動) • HTML ページ • images 画像 • json データ
  • 110. 基本 • ダイナミック(動) • HTML ページ • images 画像 • json データ
  • 111. 基本 • ダイナミック(動) • HTML ページ • images 画像 • json データ • 4Dタグ • On Web Connection • .shtml • 4DACTION
  • 112. 基本 • ダイナミック(動) • HTML ページ • images 画像 • json データ • 4Dタグ • On Web Connection • .shtml • 4DACTION
  • 113. 基本 • 4Dタグ • On Web Connection • .shtml • 4DACTION
  • 114. 基本 • 4Dタグ • On Web Connection • .shtml • 4DACTION
  • 115. 基本 • 4Dタグ • On Web Connection • .shtml • 4DACTION • WEB GET VARIABLES • WEB SEND FILE • WEB GET HTTP HEADER • WEB GET HTTP BODY
  • 116. 基本 • 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
  • 117. jQuery
  • 118. 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
  • 119. 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
  • 120. 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
  • 121. 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
  • 122. 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
  • 123. 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
  • 124. 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
  • 125. 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
  • 126. 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
  • 127. 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
  • 128. 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
  • 129. 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
  • 130. 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
  • 131. 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
  • 132. 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
  • 133. 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
  • 134. 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
  • 135. 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
  • 136. 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
  • 137. 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
  • 138. 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
  • 139. 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
  • 140. デバッグ
  • 141. デバッグ フロントエンド バックエンド
  • 142. デバッグ フロントエンド バックエンド
  • 143. デバッグ フロントエンド バックエンド TRACE
  • 144. デバッグ フロントエンド バックエンド TRACE
  • 145. デバッグ フロントエンド バックエンド
  • 146. デバッグ フロントエンド バックエンド F12(開発者ツール)
  • 147. デバッグ フロントエンド バックエンド F12(開発者ツール)
  • 148. デバッグ フロントエンド バックエンド
  • 149. デバッグ フロントエンド バックエンド ⌥⌘I(デベロッパーツール)
  • 150. デバッグ フロントエンド バックエンド ⌥⌘I(デベロッパーツール)
  • 151. デバッグ フロントエンド バックエンド
  • 152. デバッグ フロントエンド バックエンド F12(Firebug)
  • 153. デバッグ フロントエンド バックエンド F12(Firebug)
  • 154. デバッグ フロントエンド バックエンド
  • 155. デバッグ フロントエンド バックエンド ⌥⌘I(Webインスペクタ)
  • 156. デバッグ フロントエンド バックエンド ⌥⌘I(Webインスペクタ)
  • 157. デバッグ
  • 158. デバッグ
  • 159. デバッグ
  • 160. デバッグ
  • 161. デバッグ
  • 162. デバッグ
  • 163. デバッグ
  • 164. デバッグ
  • 165. モバイル
  • 166. 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 モバイル
  • 167. 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 モバイル
  • 168. モバイル
  • 169. 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
  • 170. モバイル 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
  • 171. モバイル
  • 172. モバイル
  • 173. jQuery Mobile
  • 174. jQuery Mobile
  • 175. jQuery Mobile
  • 176. 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
  • 177. 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
  • 178. 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
  • 179. jQuery Mobile
  • 180. jQuery Mobile
  • 181. jQuery Mobile
  • 182. JSON
  • 183. JSON http://ja.wikipedia.org/JSON
  • 184. JSON http://ja.wikipedia.org/JSON • JavaScriptオブジェクトの表記法を応用したデータ形式
  • 185. JSON http://ja.wikipedia.org/JSON • JavaScriptオブジェクトの表記法を応用したデータ形式 • JSON = JavaScript Object Notation
  • 186. JSON http://ja.wikipedia.org/JSON • JavaScriptオブジェクトの表記法を応用したデータ形式 • JSON = JavaScript Object Notation • JSON # JavaScript
  • 187. JSON http://ja.wikipedia.org/JSON • JavaScriptオブジェクトの表記法を応用したデータ形式 • JSON = JavaScript Object Notation • JSON # JavaScript Inspired
  • 188. JSON http://ja.wikipedia.org/JSON • JavaScriptオブジェクトの表記法を応用したデータ形式 • JSON = JavaScript Object Notation • JSON # JavaScript 『JSONは余計な脂肪を除いたXMLの代役』 ダグラス・クロックフォード http://www.json.org/fatfree.html Inspired
  • 189. JSONデータの例 [ “Miyako”, “Keisuke”, “95015”, 38, true ]
  • 190. JSONデータの例 [ “Miyako”, “Keisuke”, “95015”, 38, true ] 配列
  • 191. JSONデータの例 文字列 [ “Miyako”, “Keisuke”, “95015”, 38, true ] 配列
  • 192. JSONデータの例 文字列 数値 [ “Miyako”, “Keisuke”, “95015”, 38, true ] 配列
  • 193. JSONデータの例 文字列 ブール 数値 [ “Miyako”, “Keisuke”, “95015”, 38, true ] 配列
  • 194. JSONの特徴 [ “Miyako”, “Keisuke”, “95015”, 38, true ]
  • 195. JSONの特徴 JSON特性 メリット 軽量フォーマット HTTP経由に最適 汎用性の高いデータ型と構造 プログラミング言語 に依存しない 標準テキスト 人間が理解 簡潔 (それでも豊かな表現力) 容易に解析 [ “Miyako”, “Keisuke”, “95015”, 38, true ]
  • 196. JSONの特徴 JSON特性 メリット 軽量フォーマット HTTP経由に最適 汎用性の高いデータ型と構造 プログラミング言語 に依存しない 標準テキスト 人間が理解 簡潔 (それでも豊かな表現力) 容易に解析 1 [ “Miyako”, “Keisuke”, “95015”, 38, true ]
  • 197. JSONの特徴 JSON特性 メリット 軽量フォーマット HTTP経由に最適 汎用性の高いデータ型と構造 プログラミング言語 に依存しない 標準テキスト 人間が理解 簡潔 (それでも豊かな表現力) 容易に解析 2 1 [ “Miyako”, “Keisuke”, “95015”, 38, true ]
  • 198. JSONの特徴 JSON特性 メリット 軽量フォーマット HTTP経由に最適 汎用性の高いデータ型と構造 プログラミング言語 に依存しない 標準テキスト 人間が理解 簡潔 (それでも豊かな表現力) 容易に解析 2 3 1 [ “Miyako”, “Keisuke”, “95015”, 38, true ]
  • 199. JSONの特徴 JSON特性 メリット 軽量フォーマット HTTP経由に最適 汎用性の高いデータ型と構造 プログラミング言語 に依存しない 標準テキスト 人間が理解 簡潔 (それでも豊かな表現力) 容易に解析 2 3 4 1 [ “Miyako”, “Keisuke”, “95015”, 38, true ]
  • 200. クライアント サーバー JSON転送の流れ
  • 201. http://server.com/q?lastName=keisuke 1 HTTPリクエスト クライアント サーバー JSON転送の流れ
  • 202. http://server.com/q?lastName=keisuke 1 2 HTTPリクエスト クエリの実行 JSONの組み立て クライアント サーバー JSON転送の流れ
  • 203. http://server.com/q?lastName=keisuke 1 2 3 HTTPリクエスト クエリの実行 JSONの組み立て HTTPレスポンス クライアント サーバー JSON転送の流れ [ “Miyako”, “Keisuke”, “95015”, 38, true ]
  • 204. http://server.com/q?lastName=keisuke 1 2 3 4 HTTPリクエスト クエリの実行 JSONの組み立て JSONデータを解析 HTTPレスポンス クライアント サーバー JSON転送の流れ [ “Miyako”, “Keisuke”, “95015”, 38, true ]
  • 205. JSONデータ型と4D
  • 206. JSONデータ型と4D JSON型 構造体 値 4D型 object ✔ array ✔ 配列 string ✔ テキスト number ✔ 実数/整数 true/false ✔ ブール null ✔
  • 207. JSONデータ型と4D JSON型 構造体 値 4D型 object ✔ array ✔ 配列 string ✔ テキスト number ✔ 実数/整数 true/false ✔ ブール null ✔
  • 208. JSONデータ型と4D JSON型 構造体 値 4D型 object ✔ array ✔ 配列 string ✔ テキスト number ✔ 実数/整数 true/false ✔ ブール null ✔
  • 209. JSONデータ型と4D JSON型 構造体 値 4D型 object ✔ array ✔ 配列 string ✔ テキスト number ✔ 実数/整数 true/false ✔ ブール null ✔
  • 210. JSONデータ型と4D JSON型 構造体 値 4D型 object ✔ array ✔ 配列 string ✔ テキスト number ✔ 実数/整数 true/false ✔ ブール null ✔
  • 211. JSONデータ型と4D JSON型 構造体 値 4D型 object ✔ array ✔ 配列 string ✔ テキスト number ✔ 実数/整数 true/false ✔ ブール null ✔
  • 212. JSONデータ型と4D JSON型 構造体 値 4D型 object ✔ array ✔ 配列 string ✔ テキスト number ✔ 実数/整数 true/false ✔ ブール null ✔
  • 213. JSONデータ型と4D JSON型 構造体 値 4D型 object ✔ array ✔ 配列
  • 214. JSONデータ型と4D JSON型 構造体 値 4D型 object ✔ array ✔ 配列 値は構造体の中にだけ存在する
  • 215. [ “Miyako”, “Keisuke”, “95015”, 38, true ] JSON配列の例
  • 216. [ “Miyako”, “Keisuke”, “95015”, 38, true ] myArray JSON配列の例
  • 217. [ “Miyako”, “Keisuke”, “95015”, 38, true ] myArray 配列インデックス 値 myArray[0] ➤ Miyako myArray[1] ➤ Keisuke myArray[2] ➤ 95015 myArray[3] ➤ 38 myArray[4] ➤ true JSON配列の例
  • 218. [ “Miyako”, “Keisuke”, “95015”, 38, true ] JSON配列の例 配列インデックス 値 myArray{1} ➤ Miyako myArray{2} ➤ Keisuke myArray{3} ➤ 95015 myArray{4} ➤ 38 myArray{5} ➤ true myArray
  • 219. JSONオブジェクトの例 { “firstName” : “Keisuke”, “lastName” : “Miyako”, “city” : “Tokyo”, “state” : “JP”, “zip” : “95015”, “age” : 38, “male” : true }
  • 220. JSONオブジェクトの例 オブジェクト { “firstName” : “Keisuke”, “lastName” : “Miyako”, “city” : “Tokyo”, “state” : “JP”, “zip” : “95015”, “age” : 38, “male” : true }
  • 221. JSONオブジェクトの例 キー オブジェクト { “firstName” : “Keisuke”, “lastName” : “Miyako”, “city” : “Tokyo”, “state” : “JP”, “zip” : “95015”, “age” : 38, “male” : true }
  • 222. JSONオブジェクトの例 値キー オブジェクト { “firstName” : “Keisuke”, “lastName” : “Miyako”, “city” : “Tokyo”, “state” : “JP”, “zip” : “95015”, “age” : 38, “male” : true }
  • 223. 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 }
  • 224. 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 }
  • 225. 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 }
  • 226. オブジェクト表記 { “firstName” : “Keisuke”, “lastName” : “Miyako”, “city” : “Tokyo”, “state” : “JP”, “zip” : “95015”, “age” : 38, “male” : true }
  • 227. オブジェクト表記 { “firstName” : “Keisuke”, “lastName” : “Miyako”, “city” : “Tokyo”, “state” : “JP”, “zip” : “95015”, “age” : 38, “male” : true } myObject
  • 228. オブジェクト表記 キー 値 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
  • 229. Nested Object 構造体は値 { “cell” : “734-555-1234”, “work” : “734-555-2468”, “home” : “734-555-1357” }
  • 230. Nested Object 構造体は値 { “cell” : “734-555-1234”, “work” : “734-555-2468”, “home” : “734-555-1357” } phone
  • 231. 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
  • 232. Nested Object 構造体は値 { “cell” : “734-555-1234”, “work” : “734-555-2468”, “home” : “734-555-1357” } phone
  • 233. Nested Object 構造体は値 { “cell” : “734-555-1234”, “work” : “734-555-2468”, “home” : “734-555-1357” } { “firstName” : “Keisuke”, “lastName” : “Miyako”, “phone” : } phone
  • 234. Nested Object 構造体は値 { “cell” : “734-555-1234”, “work” : “734-555-2468”, “home” : “734-555-1357” } { “firstName” : “Keisuke”, “lastName” : “Miyako”, “phone” : } contact phone
  • 235. 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
  • 236. 構造体のネスト ネストできるものネストできるものネストできるもの オブジェクト 配列
  • 237. 構造体のネスト ネストできるものネストできるものネストできるもの オブジェクト 配列 オブジェクト 配列 値 ✔ ✔ ✔ ✔ ✔ ✔
  • 238. 構造体のネスト ネストできるものネストできるものネストできるもの オブジェクト 配列 オブジェクト 配列 値 ✔ ✔ ✔ ✔ ✔ ✔
  • 239. 構造体のネスト ネストできるものネストできるものネストできるもの オブジェクト 配列 オブジェクト 配列 値 ✔ ✔ ✔ ✔ ✔ ✔
  • 240. 構造体のネスト •ネストされた構造体は階層構造を形成する ネストできるものネストできるものネストできるもの オブジェクト 配列 オブジェクト 配列 値 ✔ ✔ ✔ ✔ ✔ ✔
  • 241. 構造体のネスト •ネストされた構造体は階層構造を形成する •階層数に制限はない ネストできるものネストできるものネストできるもの オブジェクト 配列 オブジェクト 配列 値 ✔ ✔ ✔ ✔ ✔ ✔
  • 242. 配列のネスト [ [ 4, “Cape”, 699.00 ], [ 6, “Cowl”, 1195.00 ], [ 3, “Boots”, 395.00 ], [ 1, “Batwing”, 697199.00 ] ]
  • 243. 配列のネスト lineItem [ [ 4, “Cape”, 699.00 ], [ 6, “Cowl”, 1195.00 ], [ 3, “Boots”, 395.00 ], [ 1, “Batwing”, 697199.00 ] ]
  • 244. 配列のネスト lineItem lineItem[1][ [ 4, “Cape”, 699.00 ], [ 6, “Cowl”, 1195.00 ], [ 3, “Boots”, 395.00 ], [ 1, “Batwing”, 697199.00 ] ]
  • 245. 配列のネスト lineItem lineItem[1][ [ 4, “Cape”, 699.00 ], [ 6, “Cowl”, 1195.00 ], [ 3, “Boots”, 395.00 ], [ 1, “Batwing”, 697199.00 ] ] lineItem[1][2]
  • 246. オブジェクトのネスト { “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} ] }
  • 247. オブジェクトのネスト { “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} ] }
  • 248. オブジェクトのネスト 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} ] }
  • 249. オブジェクトのネスト { “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
  • 250. オブジェクトのネスト { “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
  • 251. オブジェクトのネスト { “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
  • 252. 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
  • 253. 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
  • 254. 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
  • 255. 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
  • 256. { ! "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
  • 257. function saveContact(){ ! $.post('data/update', $("#contactForm").serialize(), function(data){ ! ! loadContacts(); ! ! }) } JSON WebFolder/js/contact-mobile.js
  • 258. function saveContact(){ ! $.post('data/update', $("#contactForm").serialize(), function(data){ ! ! loadContacts(); ! ! }) } JSON WebFolder/js/contact-mobile.js
  • 259. 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
  • 260. 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
  • 261. 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
  • 262. 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
  • 263. 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 データオブジェクトの作成
  • 264. 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 データオブジェクトの作成
  • 265. Webセミナー 終