お客さん用の静的画面(モックアップ)とPG用の動的画面
サーチマン佐藤です。
こんにちは。
今日は、今回の講習にも出てくるのですが、
静的画面（モックアップ）から
動的画面への流れ、について。
「静的画面」とは、
Webアプリなどで、まだ実際のプログラムは動作しないけど、
出来上がりがイメージできる画面。
例えば、こちらです。
http://www.searchman.info/tmp/
↑に何か入れて、送信をクリックしてください。
プログラムが動いてないので、
「未登録太郎」しか出てきませんが、
しかし、「出来上がりは、こんな感じですよ～」って、
お客さんとの打ち合わせには使えますね。
この画面を、モックアップ、
もしくは「静的画面」と呼ぶのですが、
この「静的画面」みながら、
あーだこーだやって、OK出れば、
プログラムで動くようにする。
それが、こちら。
↓に、何か入れて送信をクリック。
http://3.113.7.96/
今度は、きちっと名前が出てきますね。
こちらを、「動的画面」と呼びます。
「静的画面」を作り、
「動的画面」を作る。
まあ、大雑把すぎますが（笑）、
これが、Webアプリ作成の流れですね。
じゃあ、具体的に誰が作るのか？と言えば、
一般的には、
「静的画面」はWebデザイナーが作り、
「動的画面」はプログラマーが作る。
Webデザイナーさんから、
「HTML+CSS」みたいな感じで、
静的画面が納品され、
例えば、JSPとか使って、
コードを埋め込んで、
動的画面を作っていく。
しかし、ここで問題になるのが、
Webデザイナーとプログラマーの協業。
動的画面にする時、
微妙にデザインが壊れるとか、
コードを埋め込むと、
モックアップとして使えなくなるとか、
デザインの仕様変更があれば、
せっかく埋め込んだコードが、
新しい画面でやり直しとか、
混乱しているうちに、
モックアップ用のタグが残ったままとか、
まあ、大変なわけです。
経験あるでしょ（苦笑）。
で、そんな協業を、
より効率的にしようと出てきたのが、
Thymeleaf（タイムリーフ）なんですね。
Thymeleafは、
Webページのフレームワークで、
Springでも使うのですが、
そのメリットは、次回説明するとして、
今日は、その前座で、
一つクイズやっておきましょう。
以下の画面があります。
（Thymeleafを使ってます）
「静的画面」
http://www.searchman.info/tmp/
（未登録太郎しか出てきませんね）
「動的画面」
http://3.113.7.96/
（入力した名前が、きちっと出ますね）
「静的画面」のソースから、
プログラマーが「動的画面」を作る際、
「未登録太郎」は、どうするのでしょうか？
一つクリックしてくださいね。
以上になります。
次回、アンケートをもとに、
みていきましょう。
ではでは、また。
ありがとうございました。
------------------------------------