WEBVTT

00:00:00.680 --> 00:00:03.920 align:middle
こんにちは！この講義では
Seasideについて学びます。

00:00:04.080 --> 00:00:06.400 align:middle
Seaside の、特に HTML を生成する
部分について学びます。

00:00:07.560 --> 00:00:10.680 align:middle
Seaside のコンポーネントは全て

00:00:10.840 --> 00:00:13.640 align:middle
renderContentOn: メッセージに反応する
ことを覚えていますね。

00:00:14.120 --> 00:00:18.640 align:middle
このメッセージがあることによって
適切な HTML コードを生成することができます。

00:00:19.000 --> 00:00:22.360 align:middle
このメソッドには引数 html があります。

00:00:23.120 --> 00:00:27.000 align:middle
この引数には WAHtmlCanvas クラスか
そのサブクラスのインスタンスが渡されます。

00:00:27.240 --> 00:00:31.760 align:middle
正しい HTML を生成するための専用 API
としてプログラマに提供されています。

00:00:32.120 --> 00:00:34.720 align:middle
カウンターのコードはこれです。

00:00:34.880 --> 00:00:39.880 align:middle
ここの html オブジェクトは、見出しや
アンカーやスペース等を生成するために使われています。

00:00:40.920 --> 00:00:44.400 align:middle
今日の講義ではこの言語についてより
掘り下げていきます。

00:00:46.160 --> 00:00:50.400 align:middle
この専用言語は
複数のブラシでできています。

00:00:50.880 --> 00:00:55.720 align:middle
それぞれのブラシが特定の HTML タグを
生成するための専用になっています。

00:00:56.120 --> 00:00:59.280 align:middle
その API はオブジェクト指向的です。

00:01:01.240 --> 00:01:05.080 align:middle
オブジェクトへのメッセージ送信で構成され

00:01:05.400 --> 00:01:09.080 align:middle
HTML コードの正しさを保証します。

00:01:09.320 --> 00:01:12.600 align:middle
ただし、メッセージに誤りがあれば別ですが。

00:01:15.000 --> 00:01:18.520 align:middle
ここにこの専用言語の例があります。

00:01:19.160 --> 00:01:22.120 align:middle
html オブジェクトにメッセージ div を送ります。

00:01:22.360 --> 00:01:24.160 align:middle
すると 1 つのオブジェクトを描画します。

00:01:24.880 --> 00:01:28.280 align:middle
このオブジェクトは

00:01:29.520 --> 00:01:31.480 align:middle
html の div を生成する専用のブラシです。

00:01:31.640 --> 00:01:34.120 align:middle
ここには id: メッセージと

00:01:34.640 --> 00:01:36.520 align:middle
with: メッセージが含まれています。

00:01:37.040 --> 00:01:41.720 align:middle
これで id 属性が title となっている
div 要素を生成します。

00:01:41.920 --> 00:01:47.720 align:middle
この文字列が title という id が付けられた
div 要素の中身になります。

00:01:49.320 --> 00:01:53.240 align:middle
より複雑なものを生成することもできます。

00:01:54.200 --> 00:01:56.800 align:middle
最初は同じです。
html div id: 'list'.

00:01:57.080 --> 00:01:59.040 align:middle
これが div の行ですが

00:01:59.760 --> 00:02:02.560 align:middle
他に沢山のタグを
div の内側に入れることができます。

00:02:02.880 --> 00:02:07.400 align:middle
with: に文字列を送る代わりに
スクリプトを送ります。

00:02:07.920 --> 00:02:11.080 align:middle
そのスクリプトでは
html オブジェクトを再利用して

00:02:11.320 --> 00:02:13.800 align:middle
他のブラシによって色々なタグを生成できます。

00:02:13.960 --> 00:02:16.360 align:middle
html span class: 'item'
とすると

00:02:16.520 --> 00:02:21.080 align:middle
class 属性とその内容を持つ
span 要素を生成します。

00:02:24.360 --> 00:02:26.600 align:middle
ここでループを使うことができます。

00:02:26.960 --> 00:02:29.800 align:middle
この DSL は Pharo と同じぐらい強力です。

00:02:29.960 --> 00:02:34.120 align:middle
ここで、順序なしリスト(unorderedList)
を生成します。

00:02:35.240 --> 00:02:37.160 align:middle
ul 要素です。

00:02:38.040 --> 00:02:40.360 align:middle
id 属性を持っています。

00:02:40.520 --> 00:02:43.880 align:middle
順序なしリストには
複数のリストアイテムがあります。

00:02:44.120 --> 00:02:45.720 align:middle
ここにあります。

00:02:46.080 --> 00:02:49.000 align:middle
ループを使うだけで生成することができます。

00:02:49.480 --> 00:02:52.360 align:middle
ここに 1 to: 5 do: ループがあります。

00:02:53.200 --> 00:02:56.600 align:middle
Pharo の古典的なループです。
5 つのリストアイテムを生成します。

00:02:57.000 --> 00:03:00.640 align:middle
それぞれには
class 属性として'item'が付いていて

00:03:00.800 --> 00:03:03.640 align:middle
名前が付けられています。

00:03:03.920 --> 00:03:06.680 align:middle
名前にはループ変数を末尾につけました。

00:03:08.040 --> 00:03:10.080 align:middle
Item 1、 Item 2、 Item 3、…
という具合です。

00:03:12.600 --> 00:03:14.680 align:middle
さらに進めて

00:03:14.840 --> 00:03:17.760 align:middle
リストアイテムごとに

00:03:18.480 --> 00:03:20.440 align:middle
ループ変数が偶数か奇数かによって

00:03:20.880 --> 00:03:23.600 align:middle
CSS クラスを指定することができます。

00:03:24.400 --> 00:03:28.480 align:middle
典型的には、例のここにあるように
class:if:メッセージを使います。

00:03:28.960 --> 00:03:33.120 align:middle
もし次の条件が true の場合には
このクラス属性を付けなさい、という意味です。

00:03:33.320 --> 00:03:36.960 align:middle
ここに 偶数の場合の記述があります。

00:03:37.320 --> 00:03:41.040 align:middle
生成されたコードを見ると
1 つ目のリストアイテムには

00:03:41.480 --> 00:03:43.400 align:middle
CSS クラスが指定されていて

00:03:43.800 --> 00:03:44.880 align:middle
itemodd となっています。

00:03:45.040 --> 00:03:48.720 align:middle
2 つ目のアイテムは CSS クラスが
itemeven になっています。

00:03:49.040 --> 00:03:52.080 align:middle
これは even、これは odd、という具合です。

00:03:52.800 --> 00:03:54.880 align:middle
この構文は簡潔明瞭です。

00:03:55.200 --> 00:03:59.200 align:middle
DSL で HTML を生成するために
Pharo の力を結集させています。

00:04:00.720 --> 00:04:03.360 align:middle
この専用言語のもう 1 つの特徴は

00:04:03.520 --> 00:04:04.640 align:middle
拡張性です。

00:04:04.800 --> 00:04:07.720 align:middle
例えば Bootstrap のような
現代的な CSS フレームワークに

00:04:07.880 --> 00:04:10.240 align:middle
簡単に対応することができます。

00:04:10.760 --> 00:04:12.920 align:middle
この CSS フレームワークは
CSS クラスを使って

00:04:13.160 --> 00:04:16.680 align:middle
魅力的な HTML 要素を生成します。

00:04:16.840 --> 00:04:19.440 align:middle
例えば 緑や青の背景など。

00:04:20.080 --> 00:04:23.200 align:middle
この専用言語を拡張するためには
どうしたらいいのでしょう？

00:04:23.360 --> 00:04:26.680 align:middle
ここにあるような 特別なブラシがあります。

00:04:27.000 --> 00:04:30.880 align:middle
接頭辞 として tbs がついています。
「twitter bootstrap」を意味しています。

00:04:31.160 --> 00:04:34.560 align:middle
tbsAlert メッセージを html オブジェクトに送ると

00:04:34.880 --> 00:04:38.440 align:middle
Twitter Bootstrap フレームワークに適合した

00:04:38.600 --> 00:04:41.680 align:middle
HTML の要素を生成します。

00:04:43.440 --> 00:04:48.840 align:middle
TBS フレームワークを利用するための
たくさんのブラシがあります。

00:04:49.000 --> 00:04:52.720 align:middle
tbsButton でツイッターボタンや

00:04:52.880 --> 00:04:55.320 align:middle
ボタングループをこのように
描画することができます。

00:04:55.480 --> 00:05:00.960 align:middle
見ての通り、これら 3 つのボタンは皆
1 つのグループに属しています。

00:05:02.480 --> 00:05:06.840 align:middle
前回やったカウンターの例に戻ります。

00:05:07.200 --> 00:05:08.960 align:middle
簡単なカウンターを定義しました。

00:05:09.240 --> 00:05:12.400 align:middle
ここで
Twitter Bootstrap版を作ってみましょう。

00:05:12.600 --> 00:05:16.760 align:middle
とても簡単です。前に作ったカウンターの
サブクラスを作ります。

00:05:16.920 --> 00:05:18.840 align:middle
WATwitterCounter クラスです。

00:05:19.560 --> 00:05:22.320 align:middle
このクラスの

00:05:24.400 --> 00:05:25.760 align:middle
クラス側へ行って

00:05:26.120 --> 00:05:29.520 align:middle
initialize メソッドを定義して

00:05:29.680 --> 00:05:34.280 align:middle
このコンポーネントは TBS 開発ライブラリを
使うと指定します。

00:05:34.600 --> 00:05:39.320 align:middle
ここに TBSDevelopmentLibrary と
JQDevelopmentLibrary がありますが

00:05:39.800 --> 00:05:42.600 align:middle
これらは JavaScript　や CSS 用の
フレームワークです。

00:05:45.960 --> 00:05:49.880 align:middle
次に、このクラスのインスタンス側に戻って

00:05:50.040 --> 00:05:52.600 align:middle
renderContextOn: メソッドを

00:05:52.760 --> 00:05:54.960 align:middle
既存のものの上に再定義します。

00:05:55.240 --> 00:05:58.040 align:middle
ブラシの名前は tbs で始まります。

00:05:58.680 --> 00:06:02.080 align:middle
tbsButtonGroup や tbsButton
などという具合に。

00:06:02.440 --> 00:06:05.000 align:middle
しかし通常のコードを変えることはありません。

00:06:05.160 --> 00:06:08.560 align:middle
self increase と 

00:06:09.320 --> 00:06:11.080 align:middle
self decrease のコールバックから
成っています。

00:06:11.360 --> 00:06:13.000 align:middle
何も変わりません。

00:06:14.080 --> 00:06:18.280 align:middle
TBSを使う部分は HTML 描画ブラシだけです。

00:06:19.640 --> 00:06:22.440 align:middle
では、カウンターがどうなるか見てみましょう。

00:06:22.600 --> 00:06:26.520 align:middle
＋ボタンとーボタンが
ボタングループになっています。

00:06:26.680 --> 00:06:29.160 align:middle
そしてカウンター値がバッジに表示されます。

00:06:29.400 --> 00:06:31.440 align:middle
これが Bootstrap 版です。

00:06:34.560 --> 00:06:37.680 align:middle
Bootstrap だけに留まりません。

00:06:37.840 --> 00:06:40.920 align:middle
自分のスタイルルールを
定義することができます。

00:06:41.080 --> 00:06:44.240 align:middle
例えば、ここで

00:06:44.840 --> 00:06:48.200 align:middle
奇数番目のエレメントは

00:06:48.720 --> 00:06:50.800 align:middle
奇数用の odd クラスにすることに
決めたとします。

00:06:51.640 --> 00:06:56.400 align:middle
カウンター値を TBS バッジとして描画するたびに

00:06:56.880 --> 00:07:00.920 align:middle
つまりカウンター値が表示されるわけですが

00:07:01.480 --> 00:07:05.120 align:middle
CSS の odd クラスを

00:07:05.640 --> 00:07:07.840 align:middle
値が奇数の場合にだけ追加します。

00:07:10.760 --> 00:07:14.600 align:middle
この CSS クラスはこの条件が
true になる時にのみ追加されます。

00:07:16.200 --> 00:07:18.600 align:middle
CSS の odd クラスを定義するために

00:07:18.760 --> 00:07:21.800 align:middle
カウンターに style メソッドを定義しました。

00:07:21.960 --> 00:07:25.800 align:middle
このメソッドは文字列を
CSS スタイルルールに応じて描画します。

00:07:25.960 --> 00:07:29.080 align:middle
.odd color: red
とすると奇数の場合には

00:07:29.440 --> 00:07:30.480 align:middle
カウンターを赤くします。

00:07:31.360 --> 00:07:32.360 align:middle
まとめると

00:07:32.920 --> 00:07:37.200 align:middle
ウェブアプリケーションはルートのコンポーネントです。
Seaside はルートのコンポーネントです。

00:07:37.760 --> 00:07:42.200 align:middle
全てのコンポーネントは renderContentOn: によって
HTML で描画されます。

00:07:42.440 --> 00:07:47.280 align:middle
そして強力で拡張性のある専用言語があります。

00:07:47.800 --> 00:07:52.120 align:middle
この専用言語では、ブラシを使って
HTML を簡単に生成することができます。

00:07:52.680 --> 00:07:57.280 align:middle
そして既存の CSS フレームワーク用に
拡張することができます。

00:07:57.440 --> 00:07:59.520 align:middle
例えば、Bootstrap、JQuery、UI などです。

00:08:00.800 --> 00:08:04.720 align:middle
ループのような
Pharo のスクリプトとしての表現力を有効に使って

00:08:05.200 --> 00:08:07.840 align:middle
一連の要素を簡単に生成することができます。