WEBVTT

00:00:07.640 --> 00:00:11.920 align:middle
こんにちは、この講義では
Seaside でのコンポーネントの

00:00:12.080 --> 00:00:14.480 align:middle
合成のパワーを見ようと思います。

00:00:14.640 --> 00:00:18.360 align:middle
再利用可能で状態を持つコンポーネントを
定義しました。

00:00:18.520 --> 00:00:21.760 align:middle
そこで
それらのコンポーネントを組み合わせて

00:00:21.920 --> 00:00:25.200 align:middle
複雑なアプリケーションを構築します。
前にも言った通り

00:00:25.360 --> 00:00:27.120 align:middle
アプリケーションとはルートコンポーネントです。

00:00:27.280 --> 00:00:31.760 align:middle
アプリケーションのライブなデバッグを
楽しんでみましょう。

00:00:31.920 --> 00:00:35.240 align:middle
Seaside でのコンポーネント合成の

00:00:35.400 --> 00:00:37.480 align:middle
3 つの重要なメカニズムを復習します。

00:00:37.640 --> 00:00:40.080 align:middle
1つ目は、コンポーネントの集約です。

00:00:40.240 --> 00:00:42.880 align:middle
覚えているでしょうか
以前 2 つのカウンターを定義しました。

00:00:43.040 --> 00:00:46.000 align:middle
1 つは通常の、こんな感じのカウンターと

00:00:46.160 --> 00:00:49.800 align:middle
もう 1 つは、ツイッターのカウンターでした。

00:00:49.960 --> 00:00:51.000 align:middle
よろしいですか？

00:00:51.160 --> 00:00:56.080 align:middle
カウンターのコンポーネンントを
1 つのビューに集約して

00:00:56.280 --> 00:00:58.280 align:middle
マルチカウンターアプリケーションを
構築するには、どうしたらよいでしょう？

00:00:58.440 --> 00:01:00.720 align:middle
1 つのページ内に沢山のカウンターを
表示したいのです。

00:01:00.880 --> 00:01:03.360 align:middle
例えば、この + をクリックすると

00:01:03.520 --> 00:01:06.680 align:middle
このカウンターの値のみが増加します。
いいですね？

00:01:06.840 --> 00:01:11.080 align:middle
沢山のコンポーネントを同じページに
集約するのは簡単です。

00:01:11.240 --> 00:01:13.800 align:middle
これを Seaside ではどうするのでしょう？
とても単純です。

00:01:13.960 --> 00:01:17.400 align:middle
いつもの通り
コンポーネントのサブクラスを定義します。

00:01:17.560 --> 00:01:19.720 align:middle
WAMultiCounter です。

00:01:19.880 --> 00:01:23.080 align:middle
インスタンス変数として、counters を定義します。
カウンターのコレクションです。

00:01:23.240 --> 00:01:28.480 align:middle
initialize メソッドでは
ここでは 5 つのカウンターのコレクションを作ります。

00:01:29.520 --> 00:01:30.440 align:middle
いいですか？

00:01:30.600 --> 00:01:34.840 align:middle
そして renderContentOn: メソッドを定義します。

00:01:35.000 --> 00:01:38.920 align:middle
counters コレクションを do: で列挙します。

00:01:39.080 --> 00:01:42.400 align:middle
そして各カウンターにそれぞれ

00:01:42.560 --> 00:01:47.000 align:middle
html オブジェクトで描画するようにします。
render: という特別なメソッドを使います。

00:01:47.160 --> 00:01:50.680 align:middle
render: メソッドは
html オブジェクトのメソッドで

00:01:50.840 --> 00:01:55.560 align:middle
コンポーネントを与えて
それを自分自身に描画します。

00:01:55.720 --> 00:01:58.640 align:middle
1 つ重要なメソッドがあります。
children です。

00:01:58.800 --> 00:02:02.640 align:middle
コンポーネントが他のコンポーネントを持つ時には

00:02:02.800 --> 00:02:05.560 align:middle
それらを renderContentOn: で描画するために

00:02:05.720 --> 00:02:09.800 align:middle
内部のコンポーネントを宣言しなければなりません。
そして children メソッドが

00:02:09.960 --> 00:02:11.760 align:middle
それらのコンポーネントのコレクションを
構築しなければなりません。

00:02:11.920 --> 00:02:15.440 align:middle
そのコンポーネントが描画すべき
全てのコンポーネントです。

00:02:15.600 --> 00:02:18.800 align:middle
ここでは counters コレクションを使います。

00:02:18.960 --> 00:02:21.680 align:middle
このメソッドを定義することは重要です。

00:02:22.600 --> 00:02:25.560 align:middle
というわけで、コンポーネントの集約

00:02:25.720 --> 00:02:27.840 align:middle
による合成の基本ルールは簡単です。

00:02:28.000 --> 00:02:30.920 align:middle
あるコンポーネントがそのサブコンポーネントを

00:02:31.080 --> 00:02:35.680 align:middle
インスタンス変数に持ちます。
今回の例では counters です。いいですね？

00:02:35.840 --> 00:02:38.440 align:middle
そして renderContentOn: メソッドでは

00:02:38.600 --> 00:02:41.760 align:middle
html オブジェクトに

00:02:41.920 --> 00:02:46.600 align:middle
render: メッセージを送り
各サブコンポーネントを描画します。

00:02:47.480 --> 00:02:49.440 align:middle
そして children メソッドを再定義して

00:02:49.600 --> 00:02:52.000 align:middle
全てのサブコンポーネントを宣言します。

00:02:53.080 --> 00:02:54.480 align:middle
この 3 つは必須です。

00:02:57.240 --> 00:03:00.000 align:middle
異なる種類のサブコンポーネントを
集約することもできます。

00:03:00.160 --> 00:03:02.280 align:middle
同じ種類である必要はありません。

00:03:02.440 --> 00:03:06.800 align:middle
これまでは単純にカウンターを
組み合わせただけですが

00:03:06.960 --> 00:03:09.920 align:middle
次はアプリケーションを作ります。
MyApp コンポーネントです。

00:03:10.080 --> 00:03:12.520 align:middle
initialize メソッドでは
コレクションを作りますが

00:03:12.680 --> 00:03:15.320 align:middle
今回はコレクションに

00:03:15.480 --> 00:03:19.200 align:middle
Greeter（挨拶）アプリケーションを入れます。
前の講義で使ったものです。

00:03:19.360 --> 00:03:22.600 align:middle
そしてツイッターカウンターとカウンターの
3 つのコンポーネントです。

00:03:22.760 --> 00:03:25.680 align:middle
children メソッドは

00:03:25.840 --> 00:03:29.200 align:middle
全てのサブコンポーネントを作り

00:03:29.360 --> 00:03:30.960 align:middle
renderContextOn: では

00:03:31.120 --> 00:03:35.560 align:middle
children を列挙して
自分を描画するようにします。

00:03:35.720 --> 00:03:37.880 align:middle
つまり html render: each をします。

00:03:38.040 --> 00:03:40.480 align:middle
つまり、Greeter、ツイッターカウンター
そしてカウンターについて

00:03:40.640 --> 00:03:43.400 align:middle
html render: します。

00:03:43.560 --> 00:03:44.800 align:middle
どうなるか見てみましょう。

00:03:44.960 --> 00:03:49.880 align:middle
ここに Greeter コンポーネントがあります。
ウェブページ上に表示されています。

00:03:50.040 --> 00:03:52.840 align:middle
ここに、ツイッターカウンターが表示されて

00:03:53.000 --> 00:03:55.240 align:middle
通常のカンターはここに表示されています。

00:03:55.400 --> 00:03:58.640 align:middle
これでコンポーネントを合成して
それぞれが独立して動作します。

00:03:58.800 --> 00:04:00.960 align:middle
+ をクリックしたり
Say Hello をクリックしたりなど

00:04:01.120 --> 00:04:02.840 align:middle
コンポーネントは完璧に動きます。

00:04:04.880 --> 00:04:08.000 align:middle
では、もう 1 つ次のステージに進みましょう。

00:04:08.160 --> 00:04:12.200 align:middle
Webページ上に
一度に全部のコンポーネントが欲しいのではなく

00:04:12.360 --> 00:04:15.720 align:middle
毎回 1 つずつ表示したいとします。
例えば、メニューでどのサブコンポーネントを

00:04:15.880 --> 00:04:17.560 align:middle
表示するか選択できるようにします。

00:04:17.720 --> 00:04:19.840 align:middle
通常は、グリーターだけがあればよくて

00:04:20.000 --> 00:04:22.120 align:middle
ここのツイッターカウンターをクリックした時だけ

00:04:22.280 --> 00:04:26.120 align:middle
ツイッターカウンターを表示します。

00:04:26.280 --> 00:04:28.800 align:middle
どうやって作ったらよいのでしょうか？
簡単です。

00:04:28.960 --> 00:04:31.880 align:middle
MyApp アプリケーションに

00:04:32.040 --> 00:04:35.440 align:middle
インスタンス変数 selectedChild
を追加します。

00:04:35.600 --> 00:04:38.760 align:middle
デフォルトでは最初のサブコンポーネントで

00:04:38.920 --> 00:04:40.960 align:middle
初期化します。

00:04:41.120 --> 00:04:44.280 align:middle
renderContentOn: メソッドを修正して

00:04:44.440 --> 00:04:46.640 align:middle
メニューを表示します。

00:04:46.800 --> 00:04:50.680 align:middle
どのサブコンポーネントを表示するかを
選択することができるようにします。

00:04:50.840 --> 00:04:55.000 align:middle
そして、 html render: をします。
ただし、表示したいサブコンポーネントだけです。

00:04:55.160 --> 00:04:56.520 align:middle
とても簡単です。

00:04:56.680 --> 00:05:00.440 align:middle
メニューでは順序なしリストを生成して

00:05:00.600 --> 00:05:04.120 align:middle
全てのサブコンポーネントを

00:05:04.280 --> 00:05:06.680 align:middle
インデックス付きで列挙して

00:05:08.160 --> 00:05:11.480 align:middle
サブコンポーネントごとにリスト要素を生成します。

00:05:11.640 --> 00:05:13.680 align:middle
ここでアンカーを生成します。

00:05:13.840 --> 00:05:17.480 align:middle
アンカーはクリック可能なリンクで

00:05:17.640 --> 00:05:22.600 align:middle
クリックするとコールバックが呼ばれます。
このブロックです。

00:05:22.760 --> 00:05:27.600 align:middle
つまり、仕組みは簡単で
ユーザーに選択されたコンポーネントは

00:05:27.760 --> 00:05:31.480 align:middle
self children はコレクションなので

00:05:31.640 --> 00:05:33.320 align:middle
self children at: i

00:05:33.480 --> 00:05:35.000 align:middle
となります。

00:05:35.160 --> 00:05:38.200 align:middle
いいですか？
ここで i は

00:05:38.360 --> 00:05:41.640 align:middle
self children の中での

00:05:41.800 --> 00:05:43.360 align:middle
インデックスです。

00:05:45.200 --> 00:05:49.680 align:middle
全てのサブコンポーネントを列挙して

00:05:49.840 --> 00:05:52.320 align:middle
どのサブコンポーネントを表示するか
あるいは表示しないのかを

00:05:52.480 --> 00:05:54.600 align:middle
制御することはとても簡単なのです。

00:05:56.080 --> 00:05:59.640 align:middle
2 つ目の合成のメカニズムは
コールアンサー と呼ばれるものです。

00:05:59.800 --> 00:06:02.080 align:middle
これまでサブコンポーネントの集約を
見てきましたが

00:06:02.240 --> 00:06:05.800 align:middle
これからコールアンサーメカニズムを
見ていきます。

00:06:05.960 --> 00:06:09.960 align:middle
コンポーネント A のコードで

00:06:10.120 --> 00:06:14.280 align:middle
こんなコードを書くことを

00:06:15.040 --> 00:06:19.120 align:middle
コンポーネント A が
コンポーネント B をコールする、と言います。

00:06:19.280 --> 00:06:24.240 align:middle
何が起こるかというと、ウェブページ上で
コンポーネントB がコンポーネントAを覆い隠して

00:06:24.400 --> 00:06:26.120 align:middle
処理をします。

00:06:26.280 --> 00:06:28.880 align:middle
しばらくするとコンポーネント B が
「もう自分の処理は終わりです。」

00:06:29.040 --> 00:06:31.200 align:middle
「アンサーをして結果を返します。」
と言います。

00:06:31.360 --> 00:06:33.760 align:middle
ここで、結果は☆印です。

00:06:33.920 --> 00:06:36.440 align:middle
そしてこの結果が X に保存されます。

00:06:37.320 --> 00:06:40.080 align:middle
call component: B の結果として。

00:06:40.240 --> 00:06:43.280 align:middle
ここで、コンポーネント A が
ウェブページ上にまた表示されて

00:06:43.440 --> 00:06:46.080 align:middle
コンポーネント A はこの結果を使って
何かをすることができます。

00:06:46.720 --> 00:06:48.000 align:middle
例をお見せしましょう。

00:06:48.160 --> 00:06:51.760 align:middle
ここにコンポーネントがあります。
カウンターです。

00:06:51.920 --> 00:06:54.920 align:middle
ここに Set Value ボタンを追加してあります。

00:06:55.080 --> 00:06:57.440 align:middle
Set Value をクリックするとユーザーは

00:06:57.600 --> 00:06:59.560 align:middle
カウンターの新しい値を入力できるとします。

00:06:59.720 --> 00:07:03.440 align:middle
Set Value をクリックすると
新しいコンポーネントが表示されて

00:07:03.600 --> 00:07:07.000 align:middle
Greeter コンポーネントのように
何かを入力することができて

00:07:07.160 --> 00:07:10.360 align:middle
OK をクリックすると
それをカウンターの新しい値とします。

00:07:10.520 --> 00:07:14.120 align:middle
そしてカウンターコンポーネントに戻ります。

00:07:14.280 --> 00:07:18.080 align:middle
ここでカウンターの値はさきほどユーザーが
入力した値になっています。

00:07:18.280 --> 00:07:19.600 align:middle
いいですか？

00:07:19.760 --> 00:07:22.080 align:middle
これらの一連のコンポーネントを

00:07:23.000 --> 00:07:24.640 align:middle
どう実装するのでしょう？

00:07:24.800 --> 00:07:29.200 align:middle
まず、ツイッターカウンターです。
renderContentOn: メソッドに

00:07:29.360 --> 00:07:33.320 align:middle
ボタンを追加します。

00:07:33.480 --> 00:07:37.160 align:middle
Set Value ボタンです。

00:07:37.320 --> 00:07:41.000 align:middle
このボタンをクリックすると
このコールバックが実行されます。

00:07:41.160 --> 00:07:43.960 align:middle
setCountToUserValue メソッドです。

00:07:44.120 --> 00:07:46.600 align:middle
SetCountToUserValue は
ここで定義されています。

00:07:46.760 --> 00:07:50.120 align:middle
そこでは
ダイアログボックスを用意します。

00:07:50.280 --> 00:07:53.920 align:middle
Seaside のダイアログボックス
コンポーネントを使います。

00:07:54.080 --> 00:07:56.000 align:middle
ここでダイアログボックスを構成します。

00:07:56.160 --> 00:07:59.320 align:middle
「Enter a new value for the counter」
（カウンターの新しい値を入力してください）

00:07:59.480 --> 00:08:02.200 align:middle
デフォルト値は 0 で
OK ボタンが必要です。

00:08:02.840 --> 00:08:04.320 align:middle
次にやることは

00:08:04.480 --> 00:08:07.080 align:middle
この行です。
この行が興味深い要素です。

00:08:07.840 --> 00:08:09.040 align:middle
ここです。

00:08:10.200 --> 00:08:13.400 align:middle
ここで、このコンポーネント、つまり self は

00:08:13.560 --> 00:08:15.800 align:middle
（覚えていますか？
self はツイッターカウンターです）

00:08:15.960 --> 00:08:19.480 align:middle
さきほど構築したダイアログボックスをコールします。

00:08:19.640 --> 00:08:21.080 align:middle
そして結果を受け取ります。

00:08:21.720 --> 00:08:24.360 align:middle
結果はカウンターの新しいカウント値に使います。

00:08:24.520 --> 00:08:27.280 align:middle
そして最後に

00:08:27.440 --> 00:08:29.800 align:middle
count つまりこのカウンタの値は

00:08:29.960 --> 00:08:33.560 align:middle
ユーザーから入力された値を数値として
新しい値とします。

00:08:34.520 --> 00:08:35.480 align:middle
とても単純です。

00:08:35.920 --> 00:08:38.200 align:middle
内部的には
この WAInputDialog の動作を

00:08:38.400 --> 00:08:40.560 align:middle
確認することができます。

00:08:40.720 --> 00:08:44.760 align:middle
Seaside の再利用可能なコンポーネントで
とても古典的なものですが

00:08:44.920 --> 00:08:47.000 align:middle
1 つ特別な機能があります。

00:08:47.160 --> 00:08:51.320 align:middle
それは、answer: メソッドで
結果を送り返すことです。

00:08:52.080 --> 00:08:55.000 align:middle
このコンポーネントの

00:08:55.160 --> 00:08:56.720 align:middle
renderContentOn: メソッドを見ると

00:08:56.880 --> 00:08:59.720 align:middle
OK ボタンをクリックすると

00:08:59.880 --> 00:09:02.040 align:middle
それは実際には submit ボタンで

00:09:02.200 --> 00:09:06.280 align:middle
コールバックとなるブロックを持っています。
そのコールバックでは

00:09:06.960 --> 00:09:10.560 align:middle
self answer: value をします。

00:09:11.040 --> 00:09:15.120 align:middle
つまり、このコンポーネントは結果を

00:09:15.280 --> 00:09:18.520 align:middle
自分をコールしたコンポーネントに
送るということです。

00:09:18.680 --> 00:09:22.440 align:middle
実際、コールされた場所に制御を戻し

00:09:22.600 --> 00:09:24.520 align:middle
結果を送ります。

00:09:25.760 --> 00:09:27.400 align:middle
コール/アンサーメカニズムを見てきました。

00:09:27.560 --> 00:09:30.440 align:middle
最後のコンポーネント合成のメカニズムを
見ようと思います。

00:09:30.600 --> 00:09:33.120 align:middle
タスクメカニズムです。

00:09:33.960 --> 00:09:35.160 align:middle
本当に、とても簡単です。

00:09:35.320 --> 00:09:37.880 align:middle
タスクはコンポーネントに似ていますが
UI 部品ではありません。

00:09:38.040 --> 00:09:41.320 align:middle
したがって、renderContentOn: も
HTML の生成もありません。

00:09:41.480 --> 00:09:44.000 align:middle
複数のコンポーネントを指揮して

00:09:44.160 --> 00:09:48.640 align:middle
時間の経過に従って
どう実行していくかを記述します。

00:09:48.800 --> 00:09:51.480 align:middle
まず最初にこのコンポーネントが実行して
次にあのコンポーネントで、という具合に。

00:09:51.640 --> 00:09:55.960 align:middle
スクリーンの裏側のコールアンサー
のようなものです。

00:09:56.120 --> 00:09:58.920 align:middle
Adder というタスクを定義します。

00:09:59.080 --> 00:10:02.120 align:middle
全てのタスクは go メソッドを持っています。

00:10:02.280 --> 00:10:04.680 align:middle
ここで、例えばこのタスクでは

00:10:04.840 --> 00:10:09.800 align:middle
ユーザーに数値を入力するよう訊きます。
self request: firstNumber です。

00:10:09.960 --> 00:10:13.360 align:middle
そして2番目の数値を入力するよう訊いて
value2 とします。

00:10:13.520 --> 00:10:17.160 align:middle
そして、それら 2 つの数の合計を

00:10:17.320 --> 00:10:21.120 align:middle
ここで伝えます。いいですね？

00:10:21.280 --> 00:10:25.240 align:middle
最後の行では、このコンポーネントを
アプリケーションとして登録します。

00:10:25.400 --> 00:10:28.240 align:middle
ブラウザからアクセスするための
古典的なウェブアプリケーションです。

00:10:29.920 --> 00:10:31.560 align:middle
内部では

00:10:31.720 --> 00:10:34.680 align:middle
request: メソッドはどのように
実装されているのでしょう？

00:10:34.840 --> 00:10:36.360 align:middle
request: メソッドは

00:10:36.520 --> 00:10:41.600 align:middle
内部的にはコールアンサーを使っています。

00:10:41.800 --> 00:10:44.040 align:middle
前のスライドでの

00:10:44.200 --> 00:10:47.640 align:middle
ここで request: をすると、内部的に

00:10:47.800 --> 00:10:50.120 align:middle
もう 1 つのコンポーネンントをコールします。

00:10:50.280 --> 00:10:54.520 align:middle
元からあるものではなくて
WAInputDialog コンポーネントをコールします。

00:10:54.680 --> 00:10:56.560 align:middle
そのコンポーネントが文字列を表示して

00:10:56.720 --> 00:10:59.920 align:middle
このコンポーネントがリクエストした側に
結果を返します。

00:11:00.080 --> 00:11:03.440 align:middle
この例では、誰がリクエストをしたでしょう？
Adder です。

00:11:03.600 --> 00:11:06.440 align:middle
なので、Adder が値を value1 に受け取ります。

00:11:06.600 --> 00:11:09.960 align:middle
同じことが value2 にもあって
そして inform: します。

00:11:10.120 --> 00:11:13.440 align:middle
inform: がどう実装されているかを見ると

00:11:13.600 --> 00:11:17.160 align:middle
inform: もコール/アンサーを使っていますが
別のコンポーネントで行なっています。

00:11:17.320 --> 00:11:19.680 align:middle
FormDialog です。

00:11:19.840 --> 00:11:22.360 align:middle
self call: FormDialog すると

00:11:22.520 --> 00:11:25.760 align:middle
文字列を OK ボタン付きで表示して

00:11:25.920 --> 00:11:28.040 align:middle
「はい、これで彼はこの文字列を見ました」
と言います。

00:11:28.800 --> 00:11:31.040 align:middle
これらの合成の全ての形態において

00:11:31.240 --> 00:11:33.120 align:middle
知っておくべきことは

00:11:33.280 --> 00:11:36.080 align:middle
HTTP リクエストや URL や

00:11:36.240 --> 00:11:39.880 align:middle
パースや設定などについて一切話さなかった
ということです。

00:11:40.040 --> 00:11:42.880 align:middle
リクエストのルーティングについても
全く話していません。

00:11:43.040 --> 00:11:46.680 align:middle
次のページへのリンクなどは
一切何もしていません。

00:11:46.840 --> 00:11:50.160 align:middle
お話したことは、コンポーネントのことです。

00:11:50.320 --> 00:11:52.640 align:middle
状態を持つコンポーネントを使って
合成できること

00:11:52.800 --> 00:11:55.000 align:middle
3 つの形態の合成があること

00:11:55.160 --> 00:11:57.120 align:middle
コンポーネントは他のコンポーネントを
カプセル化すること

00:11:57.280 --> 00:11:59.480 align:middle
コンポーネントは他のコンポーネントを
コールすることができること

00:11:59.640 --> 00:12:03.480 align:middle
そして Seaside でワークフローを定義して
コンポーネントを 1 本の線として繋げることです。

00:12:03.640 --> 00:12:04.920 align:middle
これはとても強力で

00:12:05.080 --> 00:12:07.840 align:middle
ライブなデバッグが可能になっています。