1
00:00:00,560 --> 00:00:01,360
こんにちは。

2
00:00:01,600 --> 00:00:04,880
この講義では Seaside ウェブフレームワークを
カバーします。

3
00:00:05,160 --> 00:00:08,240
Pharo でウェブアプリを構築するための
創造的な方法です。

4
00:00:08,480 --> 00:00:12,200
Seaside は強力で、かつ、柔軟です。

5
00:00:12,480 --> 00:00:17,240
Seaside は再利用可能でステートフルなコンポーネントを

6
00:00:17,600 --> 00:00:21,520
ステートレスなプロトコルである HTTP の
上に構築しています。

7
00:00:22,600 --> 00:00:26,040
Seaside はもちろん、そのままでセキュアです。

8
00:00:26,200 --> 00:00:29,200
Ajax などや REST アーキテクチャのような

9
00:00:29,360 --> 00:00:31,760
最新の Web2.0 テクノロジーを統合しています。

10
00:00:33,040 --> 00:00:36,200
これは Seaside の URL です。

11
00:00:36,920 --> 00:00:42,120
Seaside の無料オンラインブックのような
ドキュメンテーションを得ることができます。

12
00:00:42,400 --> 00:00:45,560
また、Seaside のチュートリアルも
一通り揃っています。

13
00:00:45,880 --> 00:00:49,520
さらに、Seaside メーリングリストで
質問することもできます。

14
00:00:49,800 --> 00:00:54,800
アクティブなコミュニティから
質問への答えが得られるでしょう。

15
00:00:56,320 --> 00:00:59,920
ちょっと歴史の話をします。
Seaside は 2002 年から提供されています。

16
00:01:00,080 --> 00:01:01,640
そしてアクティブにメンテナンスされています。

17
00:01:01,920 --> 00:01:04,520
Seaside フレームワークは

18
00:01:05,080 --> 00:01:07,800
Pharo の成功事例の多くの基礎になっています。

19
00:01:07,960 --> 00:01:11,200
それらの事例は Pharo のサイト
pharo.org で見ることができます。

20
00:01:11,640 --> 00:01:15,640
見ればわかる通り
ウェブのプロジェクトが多くあり

21
00:01:16,040 --> 00:01:18,520
その大部分が Seaside フレームワークを
使っています。

22
00:01:18,960 --> 00:01:23,960
前に言いましたが
Seaside はコンポーネントを中心にした

23
00:01:24,200 --> 00:01:26,680
ウェブフレームワークです。

24
00:01:26,840 --> 00:01:30,400
コンポーネントは再利用可能で
ステートフルなのものです。

25
00:01:30,640 --> 00:01:35,880
HTML でコンポーネントを描画するための
ドメイン特化言語（DSL）を持っています。

26
00:01:36,560 --> 00:01:39,160
それらのコンポーネントを構成するためのルールは

27
00:01:39,440 --> 00:01:43,160
後の講義でカバーします。

28
00:01:43,800 --> 00:01:46,760
ウェブアプリケーションは
ルートのコンポーネントです。

29
00:01:46,920 --> 00:01:51,160
Seaside では、アプリケーションを
実行中にデバッグすることができます。

30
00:01:51,640 --> 00:01:53,360
Pharo のデバッガーで。

31
00:01:53,720 --> 00:01:56,840
このコースの続く講義で

32
00:01:57,120 --> 00:02:01,080
フォームを自動生成するために使う
メタデータについて学びます。

33
00:02:02,680 --> 00:02:05,280
これらは

34
00:02:05,440 --> 00:02:10,080
2002年から開発されている Seaside
で作られたウェブアプリケーションの例です。

35
00:02:10,640 --> 00:02:12,560
いくつかを見てみましょう。

36
00:02:12,720 --> 00:02:16,200
このアプリケーションでは
グラフを豊富に使っていて

37
00:02:16,360 --> 00:02:20,320
コンポーネントを組み合わせて
複雑なアプリケーションを作っています。

38
00:02:20,920 --> 00:02:25,680
もう1つは、Pharo のウェブサイトで
見ることができる例ですが

39
00:02:26,040 --> 00:02:28,840
複雑な表を食い合わせて

40
00:02:29,000 --> 00:02:32,440
レポートを出力しています。

41
00:02:32,880 --> 00:02:36,440
Seaside フレームワークを使うと
とてもシンプルに構築することができます。

42
00:02:38,120 --> 00:02:41,360
Seaside の主要なコンセプトは
コンポーネントです。

43
00:02:41,680 --> 00:02:44,800
コンポーネントは Seaside フレームワークが
提供する

44
00:02:44,960 --> 00:02:47,120
WAComponent のサブクラスです。

45
00:02:47,720 --> 00:02:50,520
コンポーネントは再利用可能で
ステートフルです。

46
00:02:50,680 --> 00:02:55,040
HTML の div 等の要素として描画されます。

47
00:02:55,960 --> 00:03:00,440
Seaside ではウェブアプリケーションには
ルートのコンポーネントが

48
00:03:00,760 --> 00:03:02,720
（この場合は WACounter ですが）

49
00:03:02,920 --> 00:03:06,080
置かれています。

50
00:03:06,240 --> 00:03:10,400
これは Counter という名前がつけられて
URL からその名前でアクセスできます。

51
00:03:11,040 --> 00:03:14,560
ここに Counter アプリケーション例の
URL があります。

52
00:03:14,760 --> 00:03:17,840
これは HTML で描画されたコンポーネントです。

53
00:03:18,200 --> 00:03:21,840
カウンターの値はゼロです。
ここに 2 つのリンクがあります。

54
00:03:22,160 --> 00:03:25,240
++ をクリックするとインクリメントして

55
00:03:25,480 --> 00:03:28,200
-- をクリックするとデクリメントします。

56
00:03:29,160 --> 00:03:32,720
このアプリケーションを実装するコードは
とてもシンプルです。

57
00:03:33,000 --> 00:03:36,520
WAComponent のサブクラスとして
WACounter を作ります。

58
00:03:36,680 --> 00:03:39,160
インスタンス変数 count を持っています。

59
00:03:39,760 --> 00:03:43,480
初期化メソッドがカウンタを 0 にセットします。

60
00:03:44,040 --> 00:03:47,800
値をインクリメントするメソッドと
デクリメントするメソッドがあります。

61
00:03:48,640 --> 00:03:51,720
ここで HTML の部分が必要になります。

62
00:03:52,000 --> 00:03:54,520
それで counter を HTML に描画します。

63
00:03:54,680 --> 00:03:57,520
やることは 描画方法をメソッドとして
与えてあげることだけです。

64
00:03:57,680 --> 00:03:59,800
renderContentOn: に引数がつきます。

65
00:04:00,360 --> 00:04:03,160
引数を使って HTML コードを生成できます。

66
00:04:04,520 --> 00:04:08,280
ここに WACounter クラスの
renderContentOn: の

67
00:04:08,520 --> 00:04:09,880
例があります。

68
00:04:10,040 --> 00:04:14,280
この引数は
通常の Pharo のオブジェクトですが

69
00:04:15,360 --> 00:04:19,080
Seaside から提供される
WAHtmlCanvas クラスのインスタンスです。

70
00:04:19,400 --> 00:04:23,520
このオブジェクトにメッセージを送って
HTML コードを生成します。

71
00:04:23,680 --> 00:04:25,920
見出しや
アンカーつまりリンクなど。

72
00:04:26,360 --> 00:04:29,160
callback: メッセージで

73
00:04:29,320 --> 00:04:32,560
リンクがクリックされた時に実行する
コードブロックを指定できます。

74
00:04:32,720 --> 00:04:35,520
ここでは ++ リンクがクリックされたら

75
00:04:35,680 --> 00:04:38,320
self increase が実行されます。

76
00:04:38,560 --> 00:04:43,920
-- をクリックすることで
self decrease が実行されます。

77
00:04:44,440 --> 00:04:45,400
とてもシンプルですね。

78
00:04:46,880 --> 00:04:51,840
リンクをクリックして
コールバックでエラーが発生したら

79
00:04:52,000 --> 00:04:56,600
ここで意図的にブレークポイントを
挿入してありますが、これでエラーになります。

80
00:04:57,040 --> 00:05:00,240
decrese メソッドに
ブレークポイントを挿入しました。

81
00:05:00,600 --> 00:05:05,120
カウンターがゼロより小さい値になれば
self が停止（halt）します。

82
00:05:05,520 --> 00:05:08,240
するとデバッガが立ち上がります。

83
00:05:09,040 --> 00:05:12,440
見ての通り
これをウェブアプリでやったら

84
00:05:12,600 --> 00:05:14,480
デバッガがここに表示されます。

85
00:05:14,640 --> 00:05:19,440
ここにプログラムのアプリケーションスタックが
renderContentOn: のところで表示されます。

86
00:05:20,120 --> 00:05:22,720
そしてここに decrease があります。

87
00:05:23,600 --> 00:05:25,480
haltIf: で停止しました。

88
00:05:25,800 --> 00:05:28,680
ここでコードを修正することができます。

89
00:05:29,000 --> 00:05:30,560
Proceed をクリックします。

90
00:05:30,960 --> 00:05:34,040
すると HTML レスポンスを受け取ります。

91
00:05:34,200 --> 00:05:36,080
何事もなかったかのように。

92
00:05:39,080 --> 00:05:42,800
ウェブアプリでのもう 1 つの問題は
「戻る」ボタンです。

93
00:05:43,240 --> 00:05:45,480
「戻る」をクリックすると

94
00:05:45,640 --> 00:05:48,600
サーバーとクライアントの同期が壊れます。

95
00:05:48,960 --> 00:05:53,640
カウンタを 5 回インクリメントしたとします。
今、スクリーン上に 5 が表示されています。

96
00:05:53,880 --> 00:05:57,600
そしてブラウザの「戻る」ボタンをクリックすると

97
00:05:57,920 --> 00:05:59,840
カウンタは 4 と表示されます。

98
00:06:00,000 --> 00:06:03,520
しかしサーバーは「戻る」ボタンを押した
ことによる更新がされていません。

99
00:06:03,680 --> 00:06:08,640
なので、また ++ をクリックすると
スクリーンには 6 が表示されます。

100
00:06:09,280 --> 00:06:13,320
問題は、サーバー側は
まだ 5 だと思っていることです。

101
00:06:13,640 --> 00:06:14,800
5 + 1 は 6 です。

102
00:06:15,320 --> 00:06:18,520
Seaside を使うと「戻る」ボタンの扱いが
とても楽になります。

103
00:06:18,680 --> 00:06:22,160
WACounter クラスに
新しいメソッド states を定義します。

104
00:06:22,600 --> 00:06:26,560
states は「戻る」ボタンが押された時のために

105
00:06:26,720 --> 00:06:28,520
保存しておくべき状態の配列を返します。

106
00:06:28,680 --> 00:06:32,360
この場合には
self つまりカウンターのみです。

107
00:06:33,200 --> 00:06:36,640
さて、「戻る」ボタンをクリックして
++ をクリックしてみると

108
00:06:36,880 --> 00:06:38,680
5 になるはずです。

109
00:06:41,640 --> 00:06:46,280
コールバックは Pharo の力を全て備えた

110
00:06:46,520 --> 00:06:49,040
コードブロックです。

111
00:06:49,360 --> 00:06:53,440
コールバックには Pharo の
どんなコードでも書くことができます。

112
00:06:54,040 --> 00:06:56,960
さらに複雑な例を用意しました。

113
00:06:57,240 --> 00:07:01,160
カウンターを 1 増やすか
あるいは 2 増やすかを

114
00:07:01,320 --> 00:07:05,200
count の値が奇数か偶数かで
分岐することができます。

115
00:07:05,760 --> 00:07:11,720
偶数の場合には偶数の場合よりも速く増加します。

116
00:07:12,560 --> 00:07:17,000
見ての通り、Pharo はコールバックとして

117
00:07:17,160 --> 00:07:18,920
本当にパワフルな言語です。

118
00:07:21,560 --> 00:07:25,840
元の例に戻ると、 ++をクリックすると

119
00:07:26,240 --> 00:07:30,720
新しいウィンドウが開いて

120
00:07:31,920 --> 00:07:35,600
偶数だと知らせてくれます。

121
00:07:36,800 --> 00:07:40,560
次に、挨拶アプリの書き方をお見せします。

122
00:07:40,720 --> 00:07:43,160
ユーザーは自分の名前を入力します。

123
00:07:43,400 --> 00:07:47,720
ここに入力します。
そして「Say Hello,」をクリックすると

124
00:07:48,640 --> 00:07:52,680
「Hi」に続いてユーザーの名前が
表示するようにしたいと思います。

125
00:07:53,040 --> 00:07:55,160
ここで最初に入力します。

126
00:07:56,760 --> 00:08:01,600
これを Seaside で実装するのは
とても簡単です。

127
00:08:01,960 --> 00:08:05,160
WAComponent のサブクラスとして
Greeter クラスを作ります。

128
00:08:05,360 --> 00:08:07,240
インスタンス変数は username です。

129
00:08:07,400 --> 00:08:10,240
ここでお見せしている
renderContentOn: メソッドは

130
00:08:10,880 --> 00:08:14,080
username フィールドを表示します。

131
00:08:14,240 --> 00:08:15,920
次の行は textinput です。

132
00:08:16,120 --> 00:08:20,680
前に見た、「Bob」と入力した
あのテキストフィールドです。

133
00:08:20,840 --> 00:08:22,520
コールバックを定義します。

134
00:08:22,760 --> 00:08:26,240
今回は 引数 value 付きのブロックです。

135
00:08:26,760 --> 00:08:30,840
引数 value に渡されるのは

136
00:08:31,360 --> 00:08:33,480
ユーザーが入力した文字列です。

137
00:08:33,800 --> 00:08:36,280
それをインスタンス変数に代入します。

138
00:08:36,440 --> 00:08:39,000
Greeter コンポーネントの username です。

139
00:08:39,520 --> 00:08:42,960
次に submit ボタンがクリックされた時に

140
00:08:43,320 --> 00:08:48,040
self inform: を使って
新しいコンポーネントを呼び出します。

141
00:08:48,200 --> 00:08:51,520
「Hi, Bob」と表示するようにします。

142
00:08:51,920 --> 00:08:56,480
文字列「Hi」と、username として
入力された文字列を連結します。

143
00:09:00,040 --> 00:09:03,760
ウェブアプリを開発したことがある人たちには

144
00:09:03,920 --> 00:09:06,320
Seaside ではリクエストや URL から
パラメータを得るために自分でパースする

145
00:09:06,760 --> 00:09:11,800
必要がないことに気付いたでしょうか。

146
00:09:11,960 --> 00:09:16,520
XML 設定ファイルなどのファイルやページは
必要ありません。

147
00:09:16,920 --> 00:09:20,240
次のページへのリンクについても
私は何も言いませんでした。

148
00:09:20,640 --> 00:09:23,480
今まで言ってきたことは
コンポーネントと

149
00:09:23,640 --> 00:09:25,320
オブジェクトとメッセージの話だけです。

150
00:09:25,640 --> 00:09:27,160
コールバックや

151
00:09:27,320 --> 00:09:32,160
Pharo のデバッガーで
ライブにデバッグすることを話しました。

152
00:09:33,360 --> 00:09:36,960
まとめると、Seaside では
簡単にウェブアプリケーションを構築できます。

153
00:09:37,200 --> 00:09:41,960
ルートとなるコンポーネントが 1 つあって
コンポーネントを組み合わせて

154
00:09:42,240 --> 00:09:44,400
より複雑なアプリケーションを構築します。

155
00:09:44,600 --> 00:09:48,000
コンポーネントは renderContentOn: で
そのコンポーネント自身を HTML で描画します。

156
00:09:48,680 --> 00:09:51,960
豊かなドメイン特化言語を使って

157
00:09:52,240 --> 00:09:55,240
それぞれのコンポーネントの
HTML コードを生成することができます。

158
00:09:55,400 --> 00:09:58,680
次のビデオでより詳細に説明します。