Your SlideShare is downloading. ×
0
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>ようこそ<!...
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<h1>ようこそ<!...
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<h1>ようこそ<!...
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--#4DSCR...
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--#4DSCR...
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--#4DSCR...
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--#4DSCR...
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--#4DINC...
基本
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>
<!--...
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<div>
<!--...
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--4DLOOP (arrCitie...
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--4DLOOP (arrCitie...
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--4DLOOP (arrCitie...
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--4DINCLUDE header...
基本
4Dタグ
• 4DTEXT
• 4DHTML
• 4DSCRIPT
• 4DINCLUDE
• 4DIF, 4DELSE, 4DENDIF
• 4DLOOP, 4DENDLOOP
• 4DBASE
<!--4DINCLUDE header...
基本
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 FI...
基本
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 VARIAB...
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ+ボディ(一部)
• $3 クライアントIPアドレス
• $4 サーバーIPアドレス
• $5 ユーザー名
• $6 パスワード
WEB GET HTTP H...
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ+ボディ(一部)
• $3 クライアントIPアドレス
• $4 サーバーIPアドレス
• $5 ユーザー名
• $6 パスワード
WEB GET HTTP B...
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ+ボディ(一部)
• $3 クライアントIPアドレス
• $4 サーバーIPアドレス
• $5 ユーザー名
• $6 パスワード
WEB GET HTTP B...
まとめ
基本
基本
• スタティック(静)
• 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...
基本
• 4Dタグ
• On Web Connection
• .shtml
• 4DACTION
• WEB GET VARIABLES
• WEB SEND FILE
• WEB GET HTTP HEADER
• WEB GET HTTP...
jQuery
jQuery
<script src="/js/jquery.js"></script>
<script>
$(function(){! //$(document).ready(function()の短縮形
$.getJSON("/Contac...
jQuery
<script src="/js/jquery.js"></script>
<script>
$(function(){! //$(document).ready(function()の短縮形
$.getJSON("/Contac...
jQuery
<script src="/js/jquery.js"></script>
<script>
$(function(){! //$(document).ready(function()の短縮形
$.getJSON("/Contac...
jQuery
<script src="/js/jquery.js"></script>
<script>
$(function(){! //$(document).ready(function()の短縮形
$.getJSON("/Contac...
jQuery
On Web Connection
C_TEXT($1;$2;$3;$4;$5;$6)
$request:=$1
Case of
: ($request="/Contacts/data")
ALL RECORDS([Contact...
jQuery
[
<!--4DLOOP [Contacts]-->
! {
! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",
! "firstName":"<!--4DTEXT ...
jQuery
[
<!--4DLOOP [Contacts]-->
! {
! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",
! "firstName":"<!--4DTEXT ...
jQuery
[
<!--4DLOOP [Contacts]-->
! {
! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",
! "firstName":"<!--4DTEXT ...
jQuery
[
<!--4DLOOP [Contacts]-->
! {
! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",
! "firstName":"<!--4DTEXT ...
jQuery
[
<!--4DLOOP [Contacts]-->
! {
! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",
! "firstName":"<!--4DTEXT ...
C_TEXT($1;$0)
If (Count parameters>0)
$0:=$1
If (Length($0)#0)
$0:=Replace string($0;"";"";*)
$0:=Replace string($0;""";""...
C_TEXT($1;$0)
If (Count parameters>0)
$0:=$1
If (Length($0)#0)
$0:=Replace string($0;"";"";*)
$0:=Replace string($0;""";""...
C_TEXT($1;$0)
If (Count parameters>0)
$0:=$1
If (Length($0)#0)
$0:=Replace string($0;"";"";*)
$0:=Replace string($0;""";""...
C_TEXT($1;$0)
If (Count parameters>0)
$0:=$1
If (Length($0)#0)
$0:=Replace string($0;"";"";*)
$0:=Replace string($0;""";""...
jQuery
[
<!--4DLOOP [Contacts]-->
! {
! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",
! "firstName":"<!--4DTEXT ...
jQuery
[
<!--4DLOOP [Contacts]-->
! {
! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",
! "firstName":"<!--4DTEXT ...
C_POINTER($1)
C_TEXT($0)
If (Count parameters>0)
If (Not(Nil($1)))
If (Table(Table($1))=$1)
If (Records in selection($1->)...
C_POINTER($1)
C_TEXT($0)
If (Count parameters>0)
If (Not(Nil($1)))
If (Table(Table($1))=$1)
If (Records in selection($1->)...
C_POINTER($1)
C_TEXT($0)
If (Count parameters>0)
If (Not(Nil($1)))
If (Table(Table($1))=$1)
If (Records in selection($1->)...
C_POINTER($1)
C_TEXT($0)
If (Count parameters>0)
If (Not(Nil($1)))
If (Table(Table($1))=$1)
If (Records in selection($1->)...
C_POINTER($1)
C_TEXT($0)
If (Count parameters>0)
If (Not(Nil($1)))
If (Table(Table($1))=$1)
If (Records in selection($1->)...
jQuery
<script src="/js/jquery.js"></script>
<script>
$(function(){! //$(document).ready(function()の短縮形
$.getJSON("/Contac...
デバッグ
デバッグ
フロントエンド バックエンド
デバッグ
フロントエンド バックエンド
デバッグ
フロントエンド バックエンド
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;$headerVal...
C_BOOLEAN($0;$isMobile)
ARRAY TEXT($headerNames;0)
ARRAY TEXT($headerValues;0)
WEB GET HTTP HEADER($headerNames;$headerVal...
モバイル
C_TEXT($1)
ARRAY LONGINT($pos;0)
ARRAY LONGINT($len;0)
If (Match regex("((.+).(.+))";$1;1;$pos;$len))
$fileName:=Substring...
モバイル
On Web Connection
C_TEXT($1;$2;$3;$4;$5;$6)
$request:=$1
$isMobile:=w_isMobile
Case of
: ($request="/Contacts/")
ALL ...
モバイル
モバイル
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
<head>
! <meta charset="utf-8" />
! <meta name="viewport" content="width=device-width, initial-scale=1">
! <...
jQuery Mobile
<head>
! <meta charset="utf-8" />
! <meta name="viewport" content="width=device-width, initial-scale=1">
! <...
jQuery Mobile
<head>
! <meta charset="utf-8" />
! <meta name="viewport" content="width=device-width, initial-scale=1">
! <...
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...
JSON
http://ja.wikipedia.org/JSON
• JavaScriptオブジェクトの表記法を応用したデータ形式
• JSON = JavaScript Object Notation
• JSON # JavaScript...
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”, “Keis...
JSONの特徴
JSON特性 メリット
軽量フォーマット HTTP経由に最適
汎用性の高いデータ型と構造
プログラミング言語
に依存しない
標準テキスト 人間が理解
簡潔 (それでも豊かな表現力) 容易に解析
1
[ “Miyako”, “Ke...
JSONの特徴
JSON特性 メリット
軽量フォーマット HTTP経由に最適
汎用性の高いデータ型と構造
プログラミング言語
に依存しない
標準テキスト 人間が理解
簡潔 (それでも豊かな表現力) 容易に解析
2
1
[ “Miyako”, “...
JSONの特徴
JSON特性 メリット
軽量フォーマット HTTP経由に最適
汎用性の高いデータ型と構造
プログラミング言語
に依存しない
標準テキスト 人間が理解
簡潔 (それでも豊かな表現力) 容易に解析
2
3
1
[ “Miyako”,...
JSONの特徴
JSON特性 メリット
軽量フォーマット HTTP経由に最適
汎用性の高いデータ型と構造
プログラミング言語
に依存しない
標準テキスト 人間が理解
簡潔 (それでも豊かな表現力) 容易に解析
2
3
4
1
[ “Miyako...
クライアント サーバー
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...
http://server.com/q?lastName=keisuke
1
2
3
4
HTTPリクエスト
クエリの実行
JSONの組み立て
JSONデータを解析
HTTPレスポンス
クライアント サーバー
JSON転送の流れ
[
“Miya...
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
...
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSON配列の例
配列インデックス 値
myArray{1} ➤ Miyako
myArray{2} ➤ Keisuke
myArray{3} ➤ 95015...
JSONオブジェクトの例
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“city” : “Tokyo”,
“state” : “JP”,
“zip” : “95015”,
“age” : ...
JSONオブジェクトの例
オブジェクト
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“city” : “Tokyo”,
“state” : “JP”,
“zip” : “95015”,
“...
JSONオブジェクトの例
キー
オブジェクト
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“city” : “Tokyo”,
“state” : “JP”,
“zip” : “95015”...
JSONオブジェクトの例
値キー
オブジェクト
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“city” : “Tokyo”,
“state” : “JP”,
“zip” : “95015...
JSONオブジェクトの例
値キー
オブジェクト
{ “male” : true,
“city” : “Tokyo”,
“lastName” : “Miyako”,
“age” : 38,
“zip” : “95015”,
“firstName”...
JSONオブジェクトの例
値キー
順不問
オブジェクト
{ “male” : true,
“city” : “Tokyo”,
“lastName” : “Miyako”,
“age” : 38,
“zip” : “95015”,
“firstN...
JSONオブジェクトの例
値キー
オブジェクトはキー/値ペア(連想配列)
順不問
オブジェクト
{ “male” : true,
“city” : “Tokyo”,
“lastName” : “Miyako”,
“age” : 38,
“zip...
オブジェクト表記
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“city” : “Tokyo”,
“state” : “JP”,
“zip” : “95015”,
“age” : 38,
...
オブジェクト表記
{ “firstName” : “Keisuke”,
“lastName” : “Miyako”,
“city” : “Tokyo”,
“state” : “JP”,
“zip” : “95015”,
“age” : 38,
...
オブジェクト表記
キー 値
myObject.firstName ➤ Keisuke
myObject.lastName ➤ Miyako
myObject.zip ➤ 95015
myObject.age ➤ 38
{ “firstName”...
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...
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...
Nested
Object
構造体は値
{ “cell” : “734-555-1234”,
“work” : “734-555-2468”,
“home” : “734-555-1357”
}
{ “firstName” : “Keisuke...
Nested
Object
構造体は値
キー 値
contact.phone.cell ➤ 734-555-1234
contact.phone.work ➤ 734-555-2468
contact.phone.home ➤ 734-555-...
構造体のネスト
ネストできるものネストできるものネストできるもの
オブジェクト
配列
構造体のネスト
ネストできるものネストできるものネストできるもの
オブジェクト
配列
オブジェクト 配列 値
✔ ✔ ✔
✔ ✔ ✔
構造体のネスト
ネストできるものネストできるものネストできるもの
オブジェクト
配列
オブジェクト 配列 値
✔ ✔ ✔
✔ ✔ ✔
構造体のネスト
ネストできるものネストできるものネストできるもの
オブジェクト
配列
オブジェクト 配列 値
✔ ✔ ✔
✔ ✔ ✔
構造体のネスト
•ネストされた構造体は階層構造を形成する
ネストできるものネストできるものネストできるもの
オブジェクト
配列
オブジェクト 配列 値
✔ ✔ ✔
✔ ✔ ✔
構造体のネスト
•ネストされた構造体は階層構造を形成する
•階層数に制限はない
ネストできるものネストできるものネストできるもの
オブジェクト
配列
オブジェクト 配列 値
✔ ✔ ✔
✔ ✔ ✔
配列のネスト
[
[ 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...
配列のネスト
lineItem
lineItem[1][
[ 4, “Cape”, 699.00 ],
[ 6, “Cowl”, 1195.00 ],
[ 3, “Boots”, 395.00 ],
[ 1, “Batwing”, 697199...
オブジェクトのネスト
{ “number” : “37584”,
“customerID” : “1690”,
“customerName” : “Bruce Wayne”,
“subtotal” : 708350.00,
“salesTax”...
オブジェクトのネスト
{ “number” : “37584”,
“customerID” : “1690”,
“customerName” : “Bruce Wayne”,
“subtotal” : 708350.00,
“salesTax”...
オブジェクトのネスト
invoice
{ “number” : “37584”,
“customerID” : “1690”,
“customerName” : “Bruce Wayne”,
“subtotal” : 708350.00,
“s...
オブジェクトのネスト
{ “number” : “37584”,
“customerID” : “1690”,
“customerName” : “Bruce Wayne”,
“subtotal” : 708350.00,
“salesTax”...
オブジェクトのネスト
{ “number” : “37584”,
“customerID” : “1690”,
“customerName” : “Bruce Wayne”,
“subtotal” : 708350.00,
“salesTax”...
オブジェクトのネスト
{ “number” : “37584”,
“customerID” : “1690”,
“customerName” : “Bruce Wayne”,
“subtotal” : 708350.00,
“salesTax”...
function selectContact(ContactId){
! $.getJSON('data', 'id='+ContactId, function(data){
! ! !
$("#contactId").val(data.con...
function selectContact(ContactId){
! $.getJSON('data', 'id='+ContactId, function(data){
! ! !
$("#contactId").val(data.con...
C_TEXT($1;$2;$3;$4;$5;$6)
$request:=$1
Case of
: ($request="/Contacts/data?id=@")
ARRAY TEXT($names;0)
ARRAY TEXT($values;...
C_TEXT($1;$2;$3;$4;$5;$6)
$request:=$1
Case of
: ($request="/Contacts/data?id=@")
ARRAY TEXT($names;0)
ARRAY TEXT($values;...
{
! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",
! "firstName":"<!--4DTEXT w_escapeText([Contacts]firstName)-->...
function saveContact(){
! $.post('data/update', $("#contactForm").serialize(), function(data){
! ! loadContacts();
! ! })
...
function saveContact(){
! $.post('data/update', $("#contactForm").serialize(), function(data){
! ! loadContacts();
! ! })
...
C_BOOLEAN($0;$isPost)
ARRAY TEXT($headerNames;0)
ARRAY TEXT($headerValues;0)
WEB GET HTTP HEADER($headerNames;$headerValue...
C_BOOLEAN($0;$isPost)
ARRAY TEXT($headerNames;0)
ARRAY TEXT($headerValues;0)
WEB GET HTTP HEADER($headerNames;$headerValue...
C_BOOLEAN($0;$isPost)
ARRAY TEXT($headerNames;0)
ARRAY TEXT($headerValues;0)
WEB GET HTTP HEADER($headerNames;$headerValue...
C_TEXT($1;$2;$3;$4;$5;$6)
$request:=$1
Case of
: ($request="/Contacts/")
Contacts_Send_page
: ($request="/Contacts/data")
...
C_DATE($1;$date)
C_TIME($2;$time)
C_TEXT($0)
If (Count parameters>0)
$date:=$1
If (Count parameters>1)
$time:=$2
Else
$tim...
C_DATE($1;$date)
C_TIME($2;$time)
C_TEXT($0)
If (Count parameters>0)
$date:=$1
If (Count parameters>1)
$time:=$2
Else
$tim...
Webセミナー
終
Upcoming SlideShare
Loading in...5
×

Web Basics 2013-01-10

248

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
248
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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セミナー 終
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×