回答編集履歴
3
ノイズを削って読みやすく編集
test
CHANGED
@@ -42,27 +42,29 @@
|
|
42
42
|
|
43
43
|
ejsファイルを貰っても使い方がわからないので何も嬉しくありません。
|
44
44
|
|
45
|
+
以下のような順序で話が進みます。
|
45
46
|
|
46
47
|
|
47
|
-
Node.jsのExpressでWebサーバを構築します。
|
48
48
|
|
49
|
-
|
49
|
+
1. Node.js(Express)でWebサーバを構築
|
50
50
|
|
51
|
-
|
51
|
+
2. 訪問者がWebサイトに訪れる
|
52
52
|
|
53
|
+
3. ブラウザはHTMLファイルを貰うためにHTTPリクエストを送信
|
54
|
+
|
53
|
-
Node.jsはHTTPリクエストを受け取り、ejsをHTMLに変換してHTTPのレスポンスとして返
|
55
|
+
4. Node.jsはHTTPリクエストを受け取り、ejsをHTMLに変換してHTTPのレスポンスとして返す
|
54
56
|
|
55
57
|
|
56
58
|
|
57
59
|
HTTP通信はそこで終了。
|
58
60
|
|
59
|
-
|
60
|
-
|
61
|
-
後から追加の更新差分があるので再度HTMLを受け取ってくれ!
|
61
|
+
「後から追加の更新差分があるので再度HTMLを受け取ってくれ!」
|
62
62
|
|
63
63
|
…という風にNode.jsのWebサーバが働きかける事は出来ません。
|
64
64
|
|
65
|
+
|
66
|
+
|
65
|
-
|
67
|
+
サイトの閲覧者が自発的にF5キーを押してHTMLを受け取り直す事を期待してください。
|
66
68
|
|
67
69
|
|
68
70
|
|
@@ -84,15 +86,13 @@
|
|
84
86
|
|
85
87
|
|
86
88
|
|
87
|
-
|
89
|
+
JavaScript(以下JS)を使いましょう。
|
88
90
|
|
89
|
-
|
91
|
+
質問文のようなリロードを伴わずに後からHTMLを書き換えて表示情報を変更するほぼ唯一の手法です。
|
90
92
|
|
91
93
|
|
92
94
|
|
93
|
-
|
95
|
+
ブラウザには[DOM API](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)というライブラリが備え付けられており、JS越しに機能を使ってHTMLの文書構造を書き換える事が可能です。
|
94
|
-
|
95
|
-
(昔は他にもFlashやJavaアプレットやSilverlightという技術があったが全て廃れてJavaScriptの一人勝ち状態)
|
96
96
|
|
97
97
|
|
98
98
|
|
@@ -102,17 +102,17 @@
|
|
102
102
|
|
103
103
|
|
104
104
|
|
105
|
-
|
105
|
+
JSにはHTTPリクエストを送信して、
|
106
106
|
|
107
|
-
結果を文字列として受け取る仕組みがあります。
|
107
|
+
結果を文字列として受け取る「Ajax」と呼ばれる仕組みがあります。
|
108
|
+
|
109
|
+
例えば30秒毎にAjaxを送信して、帰ってくる文字列の変化を検知してDOMを書き換えてページを変更させるような仕組みを作る事で実現可能です。
|
108
110
|
|
109
111
|
|
110
112
|
|
111
|
-
|
113
|
+
これはJSでAjaxを送信して文字列の比較を行いDOMを編集するというコアな処理とは別に、
|
112
114
|
|
113
|
-
これはJavaScriptでAjaxを送信して文字列の比較を行いDOMを編集する処理の他に、
|
114
|
-
|
115
|
-
Node.jsで特定のパスでアクセスが来たらDBの値を参照して文字列として返すURL(エンドポイント)を実装する必要がありますので、実装コスト
|
115
|
+
Node.jsで特定のパスでアクセスが来たらDBの値を参照して文字列として返すURL(エンドポイント)を実装する必要がありますので、2つ合わせたコストが実装コストになるので非常に大変です。
|
116
116
|
|
117
117
|
|
118
118
|
|
2
多少読みやすくなるように文章を調整
test
CHANGED
File without changes
|
1
多少読みやすくなるように文章を調整
test
CHANGED
@@ -44,21 +44,31 @@
|
|
44
44
|
|
45
45
|
|
46
46
|
|
47
|
-
Node.jsのExpressで
|
47
|
+
Node.jsのExpressでWebサーバを構築します。
|
48
48
|
|
49
|
-
|
49
|
+
その後、訪問者がリンククリックやURLをアドレスバーに入力する等してWebサイトに訪れます。
|
50
50
|
|
51
|
+
ブラウザはHTMLファイルを貰うためにHTTPリクエストを送信します。
|
52
|
+
|
51
|
-
Node.jsはHTTPリクエストを受け取り、ejsをHTML
|
53
|
+
Node.jsはHTTPリクエストを受け取り、ejsをHTMLに変換してHTTPのレスポンスとして返します。
|
54
|
+
|
55
|
+
|
52
56
|
|
53
57
|
HTTP通信はそこで終了。
|
54
58
|
|
55
59
|
|
56
60
|
|
57
|
-
|
61
|
+
後から追加の更新差分があるので再度HTMLを受け取ってくれ!
|
58
62
|
|
59
|
-
|
63
|
+
…という風にNode.jsのWebサーバが働きかける事は出来ません。
|
60
64
|
|
61
|
-
更新して
|
65
|
+
更新して欲しければ、サイトの閲覧者にF5キー等を叩いて再度HTMLを受け取ってください。
|
66
|
+
|
67
|
+
|
68
|
+
|
69
|
+
しかし質問文の流れを読む限り、
|
70
|
+
|
71
|
+
「出来ません」が結論では困ると思うので次の章へ進みます。
|
62
72
|
|
63
73
|
|
64
74
|
|
@@ -70,25 +80,23 @@
|
|
70
80
|
|
71
81
|
|
72
82
|
|
73
|
-
その通りです。
|
74
|
-
|
75
83
|
フロントエンドの地獄へようこそ
|
76
84
|
|
77
85
|
|
78
86
|
|
79
|
-
ブラウザは
|
87
|
+
ブラウザには[DOM API](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)というライブラリが備え付けられており、
|
80
88
|
|
81
|
-
|
89
|
+
JavaScriptでその機能を使って文書構造を書き換える事が可能です。
|
82
90
|
|
83
91
|
|
84
92
|
|
85
|
-
|
93
|
+
JavaScriptを[DHTML(ダイナミックHTML)](http://e-words.jp/w/DHTML.html)という用語で呼ばれていた時代もあり、質問文のようなリロードを伴わず、後からHTMLを書き換えて表示情報を変更する為には欠かせない存在になっています。
|
86
94
|
|
87
|
-
JavaScript
|
95
|
+
(昔は他にもFlashやJavaアプレットやSilverlightという技術があったが全て廃れてJavaScriptの一人勝ち状態)
|
88
96
|
|
89
97
|
|
90
98
|
|
91
|
-
> でも
|
99
|
+
> でも予めjsファイルを作って置いてそれを実行するんでしょ?
|
92
100
|
|
93
101
|
DBの値が`hoge`から`piko`に変更されても検知出来ないんだから意味ないじゃん
|
94
102
|
|
@@ -100,11 +108,13 @@
|
|
100
108
|
|
101
109
|
|
102
110
|
|
103
|
-
例えば30秒毎にAjaxを送信して、
|
111
|
+
例えば30秒毎にAjaxを送信して、帰ってくる文字列の変化を検知してJavaScriptでDOMを書き換えてページを変更させるような仕組みを作る事で実現可能です。
|
112
|
+
|
113
|
+
これはJavaScriptでAjaxを送信して文字列の比較を行いDOMを編集する処理の他に、
|
114
|
+
|
115
|
+
Node.jsで特定のパスでアクセスが来たらDBの値を参照して文字列として返すURL(エンドポイント)を実装する必要がありますので、実装コストはかなり高くめんどくさいです。
|
104
116
|
|
105
117
|
|
106
|
-
|
107
|
-
シンプルに書けばそういう手順になりますが、
|
108
118
|
|
109
119
|
実際にコードを使って示していくと1冊の本みたいな情報量になりますので、
|
110
120
|
|