1
00:00:00,680 --> 00:00:03,920
こんにちは！この講義では
Seasideについて学びます。

2
00:00:04,080 --> 00:00:06,400
Seaside の、特に HTML を生成する
部分について学びます。

3
00:00:07,560 --> 00:00:10,680
Seaside のコンポーネントは全て

4
00:00:10,840 --> 00:00:13,640
renderContentOn: メッセージに反応する
ことを覚えていますね。

5
00:00:14,120 --> 00:00:18,640
このメッセージがあることによって
適切な HTML コードを生成することができます。

6
00:00:19,000 --> 00:00:22,360
このメソッドには引数 html があります。

7
00:00:23,120 --> 00:00:27,000
この引数には WAHtmlCanvas クラスか
そのサブクラスのインスタンスが渡されます。

8
00:00:27,240 --> 00:00:31,760
正しい HTML を生成するための専用 API
としてプログラマに提供されています。

9
00:00:32,120 --> 00:00:34,720
カウンターのコードはこれです。

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

11
00:00:40,920 --> 00:00:44,400
今日の講義ではこの言語についてより
掘り下げていきます。

12
00:00:46,160 --> 00:00:50,400
この専用言語は
複数のブラシでできています。

13
00:00:50,880 --> 00:00:55,720
それぞれのブラシが特定の HTML タグを
生成するための専用になっています。

14
00:00:56,120 --> 00:00:59,280
その API はオブジェクト指向的です。

15
00:01:01,240 --> 00:01:05,080
オブジェクトへのメッセージ送信で構成され

16
00:01:05,400 --> 00:01:09,080
HTML コードの正しさを保証します。

17
00:01:09,320 --> 00:01:12,600
ただし、メッセージに誤りがあれば別ですが。

18
00:01:15,000 --> 00:01:18,520
ここにこの専用言語の例があります。

19
00:01:19,160 --> 00:01:22,120
html オブジェクトにメッセージ div を送ります。

20
00:01:22,360 --> 00:01:24,160
すると 1 つのオブジェクトを描画します。

21
00:01:24,880 --> 00:01:28,280
このオブジェクトは

22
00:01:29,520 --> 00:01:31,480
html の div を生成する専用のブラシです。

23
00:01:31,640 --> 00:01:34,120
ここには id: メッセージと

24
00:01:34,640 --> 00:01:36,520
with: メッセージが含まれています。

25
00:01:37,040 --> 00:01:41,720
これで id 属性が title となっている
div 要素を生成します。

26
00:01:41,920 --> 00:01:47,720
この文字列が title という id が付けられた
div 要素の中身になります。

27
00:01:49,320 --> 00:01:53,240
より複雑なものを生成することもできます。

28
00:01:54,200 --> 00:01:56,800
最初は同じです。
html div id: 'list'.

29
00:01:57,080 --> 00:01:59,040
これが div の行ですが

30
00:01:59,760 --> 00:02:02,560
他に沢山のタグを
div の内側に入れることができます。

31
00:02:02,880 --> 00:02:07,400
with: に文字列を送る代わりに
スクリプトを送ります。

32
00:02:07,920 --> 00:02:11,080
そのスクリプトでは
html オブジェクトを再利用して

33
00:02:11,320 --> 00:02:13,800
他のブラシによって色々なタグを生成できます。

34
00:02:13,960 --> 00:02:16,360
html span class: 'item'
とすると

35
00:02:16,520 --> 00:02:21,080
class 属性とその内容を持つ
span 要素を生成します。

36
00:02:24,360 --> 00:02:26,600
ここでループを使うことができます。

37
00:02:26,960 --> 00:02:29,800
この DSL は Pharo と同じぐらい強力です。

38
00:02:29,960 --> 00:02:34,120
ここで、順序なしリスト(unorderedList)
を生成します。

39
00:02:35,240 --> 00:02:37,160
ul 要素です。

40
00:02:38,040 --> 00:02:40,360
id 属性を持っています。

41
00:02:40,520 --> 00:02:43,880
順序なしリストには
複数のリストアイテムがあります。

42
00:02:44,120 --> 00:02:45,720
ここにあります。

43
00:02:46,080 --> 00:02:49,000
ループを使うだけで生成することができます。

44
00:02:49,480 --> 00:02:52,360
ここに 1 to: 5 do: ループがあります。

45
00:02:53,200 --> 00:02:56,600
Pharo の古典的なループです。
5 つのリストアイテムを生成します。

46
00:02:57,000 --> 00:03:00,640
それぞれには
class 属性として'item'が付いていて

47
00:03:00,800 --> 00:03:03,640
名前が付けられています。

48
00:03:03,920 --> 00:03:06,680
名前にはループ変数を末尾につけました。

49
00:03:08,040 --> 00:03:10,080
Item 1、 Item 2、 Item 3、…
という具合です。

50
00:03:12,600 --> 00:03:14,680
さらに進めて

51
00:03:14,840 --> 00:03:17,760
リストアイテムごとに

52
00:03:18,480 --> 00:03:20,440
ループ変数が偶数か奇数かによって

53
00:03:20,880 --> 00:03:23,600
CSS クラスを指定することができます。

54
00:03:24,400 --> 00:03:28,480
典型的には、例のここにあるように
class:if:メッセージを使います。

55
00:03:28,960 --> 00:03:33,120
もし次の条件が true の場合には
このクラス属性を付けなさい、という意味です。

56
00:03:33,320 --> 00:03:36,960
ここに 偶数の場合の記述があります。

57
00:03:37,320 --> 00:03:41,040
生成されたコードを見ると
1 つ目のリストアイテムには

58
00:03:41,480 --> 00:03:43,400
CSS クラスが指定されていて

59
00:03:43,800 --> 00:03:44,880
itemodd となっています。

60
00:03:45,040 --> 00:03:48,720
2 つ目のアイテムは CSS クラスが
itemeven になっています。

61
00:03:49,040 --> 00:03:52,080
これは even、これは odd、という具合です。

62
00:03:52,800 --> 00:03:54,880
この構文は簡潔明瞭です。

63
00:03:55,200 --> 00:03:59,200
DSL で HTML を生成するために
Pharo の力を結集させています。

64
00:04:00,720 --> 00:04:03,360
この専用言語のもう 1 つの特徴は

65
00:04:03,520 --> 00:04:04,640
拡張性です。

66
00:04:04,800 --> 00:04:07,720
例えば Bootstrap のような
現代的な CSS フレームワークに

67
00:04:07,880 --> 00:04:10,240
簡単に対応することができます。

68
00:04:10,760 --> 00:04:12,920
この CSS フレームワークは
CSS クラスを使って

69
00:04:13,160 --> 00:04:16,680
魅力的な HTML 要素を生成します。

70
00:04:16,840 --> 00:04:19,440
例えば 緑や青の背景など。

71
00:04:20,080 --> 00:04:23,200
この専用言語を拡張するためには
どうしたらいいのでしょう？

72
00:04:23,360 --> 00:04:26,680
ここにあるような 特別なブラシがあります。

73
00:04:27,000 --> 00:04:30,880
接頭辞 として tbs がついています。
「twitter bootstrap」を意味しています。

74
00:04:31,160 --> 00:04:34,560
tbsAlert メッセージを html オブジェクトに送ると

75
00:04:34,880 --> 00:04:38,440
Twitter Bootstrap フレームワークに適合した

76
00:04:38,600 --> 00:04:41,680
HTML の要素を生成します。

77
00:04:43,440 --> 00:04:48,840
TBS フレームワークを利用するための
たくさんのブラシがあります。

78
00:04:49,000 --> 00:04:52,720
tbsButton でツイッターボタンや

79
00:04:52,880 --> 00:04:55,320
ボタングループをこのように
描画することができます。

80
00:04:55,480 --> 00:05:00,960
見ての通り、これら 3 つのボタンは皆
1 つのグループに属しています。

81
00:05:02,480 --> 00:05:06,840
前回やったカウンターの例に戻ります。

82
00:05:07,200 --> 00:05:08,960
簡単なカウンターを定義しました。

83
00:05:09,240 --> 00:05:12,400
ここで
Twitter Bootstrap版を作ってみましょう。

84
00:05:12,600 --> 00:05:16,760
とても簡単です。前に作ったカウンターの
サブクラスを作ります。

85
00:05:16,920 --> 00:05:18,840
WATwitterCounter クラスです。

86
00:05:19,560 --> 00:05:22,320
このクラスの

87
00:05:24,400 --> 00:05:25,760
クラス側へ行って

88
00:05:26,120 --> 00:05:29,520
initialize メソッドを定義して

89
00:05:29,680 --> 00:05:34,280
このコンポーネントは TBS 開発ライブラリを
使うと指定します。

90
00:05:34,600 --> 00:05:39,320
ここに TBSDevelopmentLibrary と
JQDevelopmentLibrary がありますが

91
00:05:39,800 --> 00:05:42,600
これらは JavaScript　や CSS 用の
フレームワークです。

92
00:05:45,960 --> 00:05:49,880
次に、このクラスのインスタンス側に戻って

93
00:05:50,040 --> 00:05:52,600
renderContextOn: メソッドを

94
00:05:52,760 --> 00:05:54,960
既存のものの上に再定義します。

95
00:05:55,240 --> 00:05:58,040
ブラシの名前は tbs で始まります。

96
00:05:58,680 --> 00:06:02,080
tbsButtonGroup や tbsButton
などという具合に。

97
00:06:02,440 --> 00:06:05,000
しかし通常のコードを変えることはありません。

98
00:06:05,160 --> 00:06:08,560
self increase と 

99
00:06:09,320 --> 00:06:11,080
self decrease のコールバックから
成っています。

100
00:06:11,360 --> 00:06:13,000
何も変わりません。

101
00:06:14,080 --> 00:06:18,280
TBSを使う部分は HTML 描画ブラシだけです。

102
00:06:19,640 --> 00:06:22,440
では、カウンターがどうなるか見てみましょう。

103
00:06:22,600 --> 00:06:26,520
＋ボタンとーボタンが
ボタングループになっています。

104
00:06:26,680 --> 00:06:29,160
そしてカウンター値がバッジに表示されます。

105
00:06:29,400 --> 00:06:31,440
これが Bootstrap 版です。

106
00:06:34,560 --> 00:06:37,680
Bootstrap だけに留まりません。

107
00:06:37,840 --> 00:06:40,920
自分のスタイルルールを
定義することができます。

108
00:06:41,080 --> 00:06:44,240
例えば、ここで

109
00:06:44,840 --> 00:06:48,200
奇数番目のエレメントは

110
00:06:48,720 --> 00:06:50,800
奇数用の odd クラスにすることに
決めたとします。

111
00:06:51,640 --> 00:06:56,400
カウンター値を TBS バッジとして描画するたびに

112
00:06:56,880 --> 00:07:00,920
つまりカウンター値が表示されるわけですが

113
00:07:01,480 --> 00:07:05,120
CSS の odd クラスを

114
00:07:05,640 --> 00:07:07,840
値が奇数の場合にだけ追加します。

115
00:07:10,760 --> 00:07:14,600
この CSS クラスはこの条件が
true になる時にのみ追加されます。

116
00:07:16,200 --> 00:07:18,600
CSS の odd クラスを定義するために

117
00:07:18,760 --> 00:07:21,800
カウンターに style メソッドを定義しました。

118
00:07:21,960 --> 00:07:25,800
このメソッドは文字列を
CSS スタイルルールに応じて描画します。

119
00:07:25,960 --> 00:07:29,080
.odd color: red
とすると奇数の場合には

120
00:07:29,440 --> 00:07:30,480
カウンターを赤くします。

121
00:07:31,360 --> 00:07:32,360
まとめると

122
00:07:32,920 --> 00:07:37,200
ウェブアプリケーションはルートのコンポーネントです。
Seaside はルートのコンポーネントです。

123
00:07:37,760 --> 00:07:42,200
全てのコンポーネントは renderContentOn: によって
HTML で描画されます。

124
00:07:42,440 --> 00:07:47,280
そして強力で拡張性のある専用言語があります。

125
00:07:47,800 --> 00:07:52,120
この専用言語では、ブラシを使って
HTML を簡単に生成することができます。

126
00:07:52,680 --> 00:07:57,280
そして既存の CSS フレームワーク用に
拡張することができます。

127
00:07:57,440 --> 00:07:59,520
例えば、Bootstrap、JQuery、UI などです。

128
00:08:00,800 --> 00:08:04,720
ループのような
Pharo のスクリプトとしての表現力を有効に使って

129
00:08:05,200 --> 00:08:07,840
一連の要素を簡単に生成することができます。