Web Basics 2013-01-10

454 views

Published on

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
454
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Basics 2013-01-10

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

×