1
00:00:00,480 --> 00:00:03,080
こんにちは、Pharo コースの

2
00:00:03,240 --> 00:00:05,600
今回の講義では、もう 2 つのトピックを

3
00:00:05,760 --> 00:00:07,360
掘り下げていきます。

4
00:00:07,520 --> 00:00:11,280
TinyBlog 演習では
今回やる内容を使うことになるでしょう。

5
00:00:11,520 --> 00:00:16,160
1つ目は、データを記述することで
どんなウェブ開発が可能になるか。

6
00:00:16,320 --> 00:00:18,360
2つ目は、Seaside が REST を
どう扱うかについてです。

7
00:00:18,520 --> 00:00:22,080
Seaside は Pharo での REST 向けの
フレームワークの1つです。

8
00:00:22,280 --> 00:00:24,520
では 1 つめの題材から始めましょう。

9
00:00:24,680 --> 00:00:27,640
Magritte はデータを一旦記述したら

10
00:00:27,800 --> 00:00:30,320
そのデータから数個のオブジェクトを生成できる

11
00:00:30,480 --> 00:00:33,680
という仮説に基いたフレームワークです。

12
00:00:33,880 --> 00:00:36,760
例えば、ウェブフォームやグラフィカルな
インターフェイスです。

13
00:00:36,920 --> 00:00:39,360
このコースでは特に

14
00:00:39,520 --> 00:00:42,800
Seaside コンポーネントを生成する方法をお見せます。

15
00:00:43,000 --> 00:00:46,160
より速くウェブアプリケーションを開発できるでしょう。

16
00:00:46,360 --> 00:00:49,160
例として Address（住所）クラスを使います。

17
00:00:49,320 --> 00:00:51,480
スイス式の住所では

18
00:00:51,920 --> 00:00:55,000
住所は、通り(street)と地域(place)と

19
00:00:56,680 --> 00:00:58,960
郵便番号(plz)と
州(canton)で定義されます。

20
00:00:59,320 --> 00:01:03,560
ここにある通りを示すインスタンスがあります。

21
00:01:04,040 --> 00:01:07,000
ここまでは、標準的なプログラミングです。

22
00:01:07,400 --> 00:01:09,000
さて、Magritte では

23
00:01:09,200 --> 00:01:11,720
クラスのフィールドを記述します。

24
00:01:11,880 --> 00:01:16,240
文字列を、通りの名前として定義します。

25
00:01:16,560 --> 00:01:19,640
郵便番号の記述はより興味深いです。

26
00:01:19,800 --> 00:01:21,920
まず、郵便番号なしでは

27
00:01:22,080 --> 00:01:25,240
住所は無効だと定義しています。

28
00:01:25,400 --> 00:01:28,080
郵便番号のない住所は無効なのです。

29
00:01:28,480 --> 00:01:33,800
そしてスイスの郵便番号は
1000から9999までの数字です。

30
00:01:33,960 --> 00:01:37,160
このことが NumberDescription で
規定されています。

31
00:01:37,400 --> 00:01:39,960
この情報を

32
00:01:40,120 --> 00:01:41,840
フォームの自動バリデーションに使います。

33
00:01:42,000 --> 00:01:46,840
地域(Place)も必須項目です。

34
00:01:47,000 --> 00:01:50,640
さらに、スイスには
26の州があります。

35
00:01:50,880 --> 00:01:54,800
州はリストされるものなので
SingleOptionDescription を使います。

36
00:01:55,080 --> 00:01:58,960
これも必須項目です。
選択肢は順序付けられて並べられます。

37
00:01:59,120 --> 00:02:03,120
なので、選択肢のリストは26項目になります。

38
00:02:03,800 --> 00:02:04,920
以上のことをしたら

39
00:02:05,240 --> 00:02:07,200
Magritte で何ができるのでしょう？

40
00:02:07,400 --> 00:02:10,880
ここに Pharo での住所の記述があります。

41
00:02:11,240 --> 00:02:16,320
descriptionStreet を StringDescription
として定義します。

42
00:02:17,800 --> 00:02:20,200
これこれのラベルや優先順位で。

43
00:02:20,360 --> 00:02:23,880
番地については
NumberDescription で定義します。

44
00:02:24,960 --> 00:02:27,640
別の優先順位を付けて
ラベルも付けます。

45
00:02:27,800 --> 00:02:32,200
required（必須）として
最小値と最大値を与えます。

46
00:02:32,520 --> 00:02:36,080
この記述を使って最初にできることは

47
00:02:36,240 --> 00:02:39,640
住所を読み取る簡単なプログラムを書いて

48
00:02:39,920 --> 00:02:41,200
その結果を生成することです。

49
00:02:41,560 --> 00:02:44,480
住所を受け取って

50
00:02:44,800 --> 00:02:47,080
それをこのプログラムに渡します。

51
00:02:47,480 --> 00:02:49,480
プログラムが簡単なレポートを生成します。

52
00:02:50,160 --> 00:02:52,520
通りの名前

53
00:02:55,400 --> 00:02:58,040
地域は Bern
州は Bern

54
00:02:58,200 --> 00:02:59,440
郵便番号は 3012。

55
00:02:59,640 --> 00:03:03,800
これでデータが記述されて

56
00:03:04,440 --> 00:03:06,440
レポートを生成できました。

57
00:03:06,920 --> 00:03:09,080
これは最も単純なものです。

58
00:03:09,240 --> 00:03:12,480
Seaside を使ってもっと
例えばコンポーネントを作るなど

59
00:03:12,880 --> 00:03:15,160
もっと複雑なことをやってみましょう。

60
00:03:15,400 --> 00:03:16,640
ここで言っていることは

61
00:03:17,240 --> 00:03:20,400
Address オブジェクトを

62
00:03:20,560 --> 00:03:22,600
この部分を生成するコンポーネントします。

63
00:03:24,760 --> 00:03:29,600
「Save」と「Cancel」が付いた
バリデーションフォームを追加します。


64
00:03:30,200 --> 00:03:33,160
そしてそれを表示する「call」コマンドを書きます。

65
00:03:33,320 --> 00:03:37,960
見ての通り、これをするのに
Seaside の DSL すら使っていません。

66
00:03:38,320 --> 00:03:41,880
記述することで、ウェブコンポーネントが
自動的に生成されます。

67
00:03:42,200 --> 00:03:43,600
これは強力です！

68
00:03:43,880 --> 00:03:46,560
ここに Quuve のスクリーンショットがあります。

69
00:03:46,840 --> 00:03:50,400
Quuve は
ポートフォリオ管理プラットフォームです。

70
00:03:50,600 --> 00:03:54,080
表示全体が
Seaside と Magritte でできています。

71
00:03:54,400 --> 00:03:57,160
レポートは全て自動的に生成されています。

72
00:03:58,280 --> 00:04:01,320
これによって生産性が著しく向上しています。

73
00:04:01,560 --> 00:04:05,800
このコースでは

74
00:04:05,960 --> 00:04:08,960
データを記述することで何ができるか
の直感を示しています。

75
00:04:09,960 --> 00:04:13,280
特にウェブコンポーネントの
自動生成について。

76
00:04:13,840 --> 00:04:15,560
TinyBlog でそれをすることになります。

77
00:04:15,760 --> 00:04:20,680
では、 Seaside の REST レイヤーで
何ができるかをお見せしましょう。

78
00:04:21,080 --> 00:04:25,920
視覚的なコンポーネントなしでの
クライアント・サーバー通信を可能にします。

79
00:04:26,280 --> 00:04:29,760
REST は Seaside に
綺麗に統合されています。

80
00:04:30,080 --> 00:04:32,440
ドメインオブジェクトをアノテーションします。

81
00:04:32,600 --> 00:04:36,040
URL のパラメータと
Smalltalk (Pharo) メソッドの

82
00:04:36,280 --> 00:04:38,720
自然な変換をします。

83
00:04:39,800 --> 00:04:43,760
複雑性に対しては

84
00:04:44,040 --> 00:04:47,880
フィルター (filter) を定義します。

85
00:04:48,120 --> 00:04:51,240
TinyBlog Restful Filter は

86
00:04:51,400 --> 00:04:54,800
WARestful のサブクラスですが
まあそれは本質ではありません。

87
00:04:55,160 --> 00:05:00,040
重要なのは、アプリケーションを作る時に
ここに追加するフィルターです。

88
00:05:00,480 --> 00:05:02,360
演習で見ることになります。

89
00:05:02,960 --> 00:05:06,560
さて、TinyBlog サーバー上の
全てのブログを得ることを

90
00:05:06,880 --> 00:05:09,840
考えてみましょう。

91
00:05:11,120 --> 00:05:11,960
これがそのやり方です。

92
00:05:12,160 --> 00:05:15,680
まず、RestfulFilterクラスに
メソッドを定義します。

93
00:05:17,040 --> 00:05:20,320
listAllというメソッドです。

94
00:05:21,520 --> 00:05:25,280
そのメソッドはアンカーに対応します。

95
00:05:26,280 --> 00:05:30,720
REST プロトコルから GET することで

96
00:05:31,160 --> 00:05:33,200
JSON 形式の文字列を生成します。

97
00:05:33,360 --> 00:05:37,760
Pharo の文字列ストリームを作って

98
00:05:38,080 --> 00:05:41,600
ストリームにそこにある全てのブログを格納します。

99
00:05:42,000 --> 00:05:45,280
それぞれのブログについて
イテレーターを使って

100
00:05:45,640 --> 00:05:48,400
それぞれのブログを
JavaScript に変換して

101
00:05:48,800 --> 00:05:50,400
コンマで区切ります。

102
00:05:51,360 --> 00:05:53,040
これで欲しかったものが手に入ります。

103
00:05:53,200 --> 00:05:57,200
では、もう少し高度なことを
してみたいと思います。

104
00:05:58,000 --> 00:06:03,280
タイトルでブログを検索したいとします。

105
00:06:04,440 --> 00:06:06,760
ここで、例えば post を使うことができます。

106
00:06:07,080 --> 00:06:11,560
このブログが欲しいといって
タイトルを与えます。

107
00:06:11,760 --> 00:06:16,160
タイトルを引数とする post メソッドを定義します。

108
00:06:16,720 --> 00:06:18,640
path も併せて使います。

109
00:06:18,880 --> 00:06:24,360
URL が http…post/

110
00:06:25,200 --> 00:06:28,880
ときて、さらに何かがくると
それがタイトルです。

111
00:06:29,200 --> 00:06:33,280
この中括弧の内側の部分です。

112
00:06:35,520 --> 00:06:39,720
JSON形式のテキストを生成します。

113
00:06:40,080 --> 00:06:44,080
そして TinyBlog の機能を呼び出します。

114
00:06:44,240 --> 00:06:48,520
この引数で示されたタイトルのポストはありますか？
と問い合わせます。

115
00:06:49,200 --> 00:06:51,640
もしなければ、エラーを返します。

116
00:06:51,800 --> 00:06:55,200
あるならば、それをストリームに入れて
JSONにします。

117
00:06:55,640 --> 00:06:57,800
できることは沢山あります。

118
00:06:58,120 --> 00:07:01,120
検索をするのなら
同じやり方でできます。

119
00:07:05,000 --> 00:07:06,640
URLのところに

120
00:07:06,920 --> 00:07:10,760
search?title= と入力すると
自動的にマッチします。

121
00:07:10,920 --> 00:07:13,880
タイトルがここにあります。

122
00:07:16,520 --> 00:07:20,160
こうやって Seaside で REST を
することができます。

123
00:07:20,560 --> 00:07:24,560
Seaside でグラフィカルなコンポーネントと

124
00:07:24,720 --> 00:07:27,680
ドメインの機能を

125
00:07:27,840 --> 00:07:28,880
REST API で提供することができます。

126
00:07:29,560 --> 00:07:32,440
GET のみをお見せしましたが

127
00:07:32,760 --> 00:07:36,840
他の REST の機能も利用可能です。

128
00:07:37,240 --> 00:07:39,160
Delete、Post、Get、など。

129
00:07:40,440 --> 00:07:43,720
また、Seaside と Magritte を
組み合わせる方法も見せました。

130
00:07:43,880 --> 00:07:46,600
Magritte は強力なフォームを
自動的に生成します。

131
00:07:47,040 --> 00:07:48,840
そして、REST も良く統合されています。

132
00:07:49,080 --> 00:07:53,000
REST をするために Teapot を
使う人もよくいます。

133
00:07:53,160 --> 00:07:56,440
Teapot は Zinc の上位レイヤーで
REST のプロトタイプをすることができます。

134
00:07:56,960 --> 00:08:01,200
REST API を動作させる方法を見つけるのに
手っ取り早い方法です。

135
00:08:01,680 --> 00:08:02,760
楽しんでみてください。

136
00:08:02,920 --> 00:08:06,640
Web Enterprise 本に
ドキュメントがあります。