WEBVTT

00:00:00.480 --> 00:00:03.080 align:middle
こんにちは、Pharo コースの

00:00:03.240 --> 00:00:05.600 align:middle
今回の講義では、もう 2 つのトピックを

00:00:05.760 --> 00:00:07.360 align:middle
掘り下げていきます。

00:00:07.520 --> 00:00:11.280 align:middle
TinyBlog 演習では
今回やる内容を使うことになるでしょう。

00:00:11.520 --> 00:00:16.160 align:middle
1つ目は、データを記述することで
どんなウェブ開発が可能になるか。

00:00:16.320 --> 00:00:18.360 align:middle
2つ目は、Seaside が REST を
どう扱うかについてです。

00:00:18.520 --> 00:00:22.080 align:middle
Seaside は Pharo での REST 向けの
フレームワークの1つです。

00:00:22.280 --> 00:00:24.520 align:middle
では 1 つめの題材から始めましょう。

00:00:24.680 --> 00:00:27.640 align:middle
Magritte はデータを一旦記述したら

00:00:27.800 --> 00:00:30.320 align:middle
そのデータから数個のオブジェクトを生成できる

00:00:30.480 --> 00:00:33.680 align:middle
という仮説に基いたフレームワークです。

00:00:33.880 --> 00:00:36.760 align:middle
例えば、ウェブフォームやグラフィカルな
インターフェイスです。

00:00:36.920 --> 00:00:39.360 align:middle
このコースでは特に

00:00:39.520 --> 00:00:42.800 align:middle
Seaside コンポーネントを生成する方法をお見せます。

00:00:43.000 --> 00:00:46.160 align:middle
より速くウェブアプリケーションを開発できるでしょう。

00:00:46.360 --> 00:00:49.160 align:middle
例として Address（住所）クラスを使います。

00:00:49.320 --> 00:00:51.480 align:middle
スイス式の住所では

00:00:51.920 --> 00:00:55.000 align:middle
住所は、通り(street)と地域(place)と

00:00:56.680 --> 00:00:58.960 align:middle
郵便番号(plz)と
州(canton)で定義されます。

00:00:59.320 --> 00:01:03.560 align:middle
ここにある通りを示すインスタンスがあります。

00:01:04.040 --> 00:01:07.000 align:middle
ここまでは、標準的なプログラミングです。

00:01:07.400 --> 00:01:09.000 align:middle
さて、Magritte では

00:01:09.200 --> 00:01:11.720 align:middle
クラスのフィールドを記述します。

00:01:11.880 --> 00:01:16.240 align:middle
文字列を、通りの名前として定義します。

00:01:16.560 --> 00:01:19.640 align:middle
郵便番号の記述はより興味深いです。

00:01:19.800 --> 00:01:21.920 align:middle
まず、郵便番号なしでは

00:01:22.080 --> 00:01:25.240 align:middle
住所は無効だと定義しています。

00:01:25.400 --> 00:01:28.080 align:middle
郵便番号のない住所は無効なのです。

00:01:28.480 --> 00:01:33.800 align:middle
そしてスイスの郵便番号は
1000から9999までの数字です。

00:01:33.960 --> 00:01:37.160 align:middle
このことが NumberDescription で
規定されています。

00:01:37.400 --> 00:01:39.960 align:middle
この情報を

00:01:40.120 --> 00:01:41.840 align:middle
フォームの自動バリデーションに使います。

00:01:42.000 --> 00:01:46.840 align:middle
地域(Place)も必須項目です。

00:01:47.000 --> 00:01:50.640 align:middle
さらに、スイスには
26の州があります。

00:01:50.880 --> 00:01:54.800 align:middle
州はリストされるものなので
SingleOptionDescription を使います。

00:01:55.080 --> 00:01:58.960 align:middle
これも必須項目です。
選択肢は順序付けられて並べられます。

00:01:59.120 --> 00:02:03.120 align:middle
なので、選択肢のリストは26項目になります。

00:02:03.800 --> 00:02:04.920 align:middle
以上のことをしたら

00:02:05.240 --> 00:02:07.200 align:middle
Magritte で何ができるのでしょう？

00:02:07.400 --> 00:02:10.880 align:middle
ここに Pharo での住所の記述があります。

00:02:11.240 --> 00:02:16.320 align:middle
descriptionStreet を StringDescription
として定義します。

00:02:17.800 --> 00:02:20.200 align:middle
これこれのラベルや優先順位で。

00:02:20.360 --> 00:02:23.880 align:middle
番地については
NumberDescription で定義します。

00:02:24.960 --> 00:02:27.640 align:middle
別の優先順位を付けて
ラベルも付けます。

00:02:27.800 --> 00:02:32.200 align:middle
required（必須）として
最小値と最大値を与えます。

00:02:32.520 --> 00:02:36.080 align:middle
この記述を使って最初にできることは

00:02:36.240 --> 00:02:39.640 align:middle
住所を読み取る簡単なプログラムを書いて

00:02:39.920 --> 00:02:41.200 align:middle
その結果を生成することです。

00:02:41.560 --> 00:02:44.480 align:middle
住所を受け取って

00:02:44.800 --> 00:02:47.080 align:middle
それをこのプログラムに渡します。

00:02:47.480 --> 00:02:49.480 align:middle
プログラムが簡単なレポートを生成します。

00:02:50.160 --> 00:02:52.520 align:middle
通りの名前

00:02:55.400 --> 00:02:58.040 align:middle
地域は Bern
州は Bern

00:02:58.200 --> 00:02:59.440 align:middle
郵便番号は 3012。

00:02:59.640 --> 00:03:03.800 align:middle
これでデータが記述されて

00:03:04.440 --> 00:03:06.440 align:middle
レポートを生成できました。

00:03:06.920 --> 00:03:09.080 align:middle
これは最も単純なものです。

00:03:09.240 --> 00:03:12.480 align:middle
Seaside を使ってもっと
例えばコンポーネントを作るなど

00:03:12.880 --> 00:03:15.160 align:middle
もっと複雑なことをやってみましょう。

00:03:15.400 --> 00:03:16.640 align:middle
ここで言っていることは

00:03:17.240 --> 00:03:20.400 align:middle
Address オブジェクトを

00:03:20.560 --> 00:03:22.600 align:middle
この部分を生成するコンポーネントします。

00:03:24.760 --> 00:03:29.600 align:middle
「Save」と「Cancel」が付いた
バリデーションフォームを追加します。

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

00:03:33.320 --> 00:03:37.960 align:middle
見ての通り、これをするのに
Seaside の DSL すら使っていません。

00:03:38.320 --> 00:03:41.880 align:middle
記述することで、ウェブコンポーネントが
自動的に生成されます。

00:03:42.200 --> 00:03:43.600 align:middle
これは強力です！

00:03:43.880 --> 00:03:46.560 align:middle
ここに Quuve のスクリーンショットがあります。

00:03:46.840 --> 00:03:50.400 align:middle
Quuve は
ポートフォリオ管理プラットフォームです。

00:03:50.600 --> 00:03:54.080 align:middle
表示全体が
Seaside と Magritte でできています。

00:03:54.400 --> 00:03:57.160 align:middle
レポートは全て自動的に生成されています。

00:03:58.280 --> 00:04:01.320 align:middle
これによって生産性が著しく向上しています。

00:04:01.560 --> 00:04:05.800 align:middle
このコースでは

00:04:05.960 --> 00:04:08.960 align:middle
データを記述することで何ができるか
の直感を示しています。

00:04:09.960 --> 00:04:13.280 align:middle
特にウェブコンポーネントの
自動生成について。

00:04:13.840 --> 00:04:15.560 align:middle
TinyBlog でそれをすることになります。

00:04:15.760 --> 00:04:20.680 align:middle
では、 Seaside の REST レイヤーで
何ができるかをお見せしましょう。

00:04:21.080 --> 00:04:25.920 align:middle
視覚的なコンポーネントなしでの
クライアント・サーバー通信を可能にします。

00:04:26.280 --> 00:04:29.760 align:middle
REST は Seaside に
綺麗に統合されています。

00:04:30.080 --> 00:04:32.440 align:middle
ドメインオブジェクトをアノテーションします。

00:04:32.600 --> 00:04:36.040 align:middle
URL のパラメータと
Smalltalk (Pharo) メソッドの

00:04:36.280 --> 00:04:38.720 align:middle
自然な変換をします。

00:04:39.800 --> 00:04:43.760 align:middle
複雑性に対しては

00:04:44.040 --> 00:04:47.880 align:middle
フィルター (filter) を定義します。

00:04:48.120 --> 00:04:51.240 align:middle
TinyBlog Restful Filter は

00:04:51.400 --> 00:04:54.800 align:middle
WARestful のサブクラスですが
まあそれは本質ではありません。

00:04:55.160 --> 00:05:00.040 align:middle
重要なのは、アプリケーションを作る時に
ここに追加するフィルターです。

00:05:00.480 --> 00:05:02.360 align:middle
演習で見ることになります。

00:05:02.960 --> 00:05:06.560 align:middle
さて、TinyBlog サーバー上の
全てのブログを得ることを

00:05:06.880 --> 00:05:09.840 align:middle
考えてみましょう。

00:05:11.120 --> 00:05:11.960 align:middle
これがそのやり方です。

00:05:12.160 --> 00:05:15.680 align:middle
まず、RestfulFilterクラスに
メソッドを定義します。

00:05:17.040 --> 00:05:20.320 align:middle
listAllというメソッドです。

00:05:21.520 --> 00:05:25.280 align:middle
そのメソッドはアンカーに対応します。

00:05:26.280 --> 00:05:30.720 align:middle
REST プロトコルから GET することで

00:05:31.160 --> 00:05:33.200 align:middle
JSON 形式の文字列を生成します。

00:05:33.360 --> 00:05:37.760 align:middle
Pharo の文字列ストリームを作って

00:05:38.080 --> 00:05:41.600 align:middle
ストリームにそこにある全てのブログを格納します。

00:05:42.000 --> 00:05:45.280 align:middle
それぞれのブログについて
イテレーターを使って

00:05:45.640 --> 00:05:48.400 align:middle
それぞれのブログを
JavaScript に変換して

00:05:48.800 --> 00:05:50.400 align:middle
コンマで区切ります。

00:05:51.360 --> 00:05:53.040 align:middle
これで欲しかったものが手に入ります。

00:05:53.200 --> 00:05:57.200 align:middle
では、もう少し高度なことを
してみたいと思います。

00:05:58.000 --> 00:06:03.280 align:middle
タイトルでブログを検索したいとします。

00:06:04.440 --> 00:06:06.760 align:middle
ここで、例えば post を使うことができます。

00:06:07.080 --> 00:06:11.560 align:middle
このブログが欲しいといって
タイトルを与えます。

00:06:11.760 --> 00:06:16.160 align:middle
タイトルを引数とする post メソッドを定義します。

00:06:16.720 --> 00:06:18.640 align:middle
path も併せて使います。

00:06:18.880 --> 00:06:24.360 align:middle
URL が http…post/

00:06:25.200 --> 00:06:28.880 align:middle
ときて、さらに何かがくると
それがタイトルです。

00:06:29.200 --> 00:06:33.280 align:middle
この中括弧の内側の部分です。

00:06:35.520 --> 00:06:39.720 align:middle
JSON形式のテキストを生成します。

00:06:40.080 --> 00:06:44.080 align:middle
そして TinyBlog の機能を呼び出します。

00:06:44.240 --> 00:06:48.520 align:middle
この引数で示されたタイトルのポストはありますか？
と問い合わせます。

00:06:49.200 --> 00:06:51.640 align:middle
もしなければ、エラーを返します。

00:06:51.800 --> 00:06:55.200 align:middle
あるならば、それをストリームに入れて
JSONにします。

00:06:55.640 --> 00:06:57.800 align:middle
できることは沢山あります。

00:06:58.120 --> 00:07:01.120 align:middle
検索をするのなら
同じやり方でできます。

00:07:05.000 --> 00:07:06.640 align:middle
URLのところに

00:07:06.920 --> 00:07:10.760 align:middle
search?title= と入力すると
自動的にマッチします。

00:07:10.920 --> 00:07:13.880 align:middle
タイトルがここにあります。

00:07:16.520 --> 00:07:20.160 align:middle
こうやって Seaside で REST を
することができます。

00:07:20.560 --> 00:07:24.560 align:middle
Seaside でグラフィカルなコンポーネントと

00:07:24.720 --> 00:07:27.680 align:middle
ドメインの機能を

00:07:27.840 --> 00:07:28.880 align:middle
REST API で提供することができます。

00:07:29.560 --> 00:07:32.440 align:middle
GET のみをお見せしましたが

00:07:32.760 --> 00:07:36.840 align:middle
他の REST の機能も利用可能です。

00:07:37.240 --> 00:07:39.160 align:middle
Delete、Post、Get、など。

00:07:40.440 --> 00:07:43.720 align:middle
また、Seaside と Magritte を
組み合わせる方法も見せました。

00:07:43.880 --> 00:07:46.600 align:middle
Magritte は強力なフォームを
自動的に生成します。

00:07:47.040 --> 00:07:48.840 align:middle
そして、REST も良く統合されています。

00:07:49.080 --> 00:07:53.000 align:middle
REST をするために Teapot を
使う人もよくいます。

00:07:53.160 --> 00:07:56.440 align:middle
Teapot は Zinc の上位レイヤーで
REST のプロトタイプをすることができます。

00:07:56.960 --> 00:08:01.200 align:middle
REST API を動作させる方法を見つけるのに
手っ取り早い方法です。

00:08:01.680 --> 00:08:02.760 align:middle
楽しんでみてください。

00:08:02.920 --> 00:08:06.640 align:middle
Web Enterprise 本に
ドキュメントがあります。