WEBVTT

00:00:00.560 --> 00:00:01.360 align:middle
こんにちは。

00:00:01.600 --> 00:00:04.880 align:middle
この講義では Seaside ウェブフレームワークを
カバーします。

00:00:05.160 --> 00:00:08.240 align:middle
Pharo でウェブアプリを構築するための
創造的な方法です。

00:00:08.480 --> 00:00:12.200 align:middle
Seaside は強力で、かつ、柔軟です。

00:00:12.480 --> 00:00:17.240 align:middle
Seaside は再利用可能でステートフルなコンポーネントを

00:00:17.600 --> 00:00:21.520 align:middle
ステートレスなプロトコルである HTTP の
上に構築しています。

00:00:22.600 --> 00:00:26.040 align:middle
Seaside はもちろん、そのままでセキュアです。

00:00:26.200 --> 00:00:29.200 align:middle
Ajax などや REST アーキテクチャのような

00:00:29.360 --> 00:00:31.760 align:middle
最新の Web2.0 テクノロジーを統合しています。

00:00:33.040 --> 00:00:36.200 align:middle
これは Seaside の URL です。

00:00:36.920 --> 00:00:42.120 align:middle
Seaside の無料オンラインブックのような
ドキュメンテーションを得ることができます。

00:00:42.400 --> 00:00:45.560 align:middle
また、Seaside のチュートリアルも
一通り揃っています。

00:00:45.880 --> 00:00:49.520 align:middle
さらに、Seaside メーリングリストで
質問することもできます。

00:00:49.800 --> 00:00:54.800 align:middle
アクティブなコミュニティから
質問への答えが得られるでしょう。

00:00:56.320 --> 00:00:59.920 align:middle
ちょっと歴史の話をします。
Seaside は 2002 年から提供されています。

00:01:00.080 --> 00:01:01.640 align:middle
そしてアクティブにメンテナンスされています。

00:01:01.920 --> 00:01:04.520 align:middle
Seaside フレームワークは

00:01:05.080 --> 00:01:07.800 align:middle
Pharo の成功事例の多くの基礎になっています。

00:01:07.960 --> 00:01:11.200 align:middle
それらの事例は Pharo のサイト
pharo.org で見ることができます。

00:01:11.640 --> 00:01:15.640 align:middle
見ればわかる通り
ウェブのプロジェクトが多くあり

00:01:16.040 --> 00:01:18.520 align:middle
その大部分が Seaside フレームワークを
使っています。

00:01:18.960 --> 00:01:23.960 align:middle
前に言いましたが
Seaside はコンポーネントを中心にした

00:01:24.200 --> 00:01:26.680 align:middle
ウェブフレームワークです。

00:01:26.840 --> 00:01:30.400 align:middle
コンポーネントは再利用可能で
ステートフルなのものです。

00:01:30.640 --> 00:01:35.880 align:middle
HTML でコンポーネントを描画するための
ドメイン特化言語（DSL）を持っています。

00:01:36.560 --> 00:01:39.160 align:middle
それらのコンポーネントを構成するためのルールは

00:01:39.440 --> 00:01:43.160 align:middle
後の講義でカバーします。

00:01:43.800 --> 00:01:46.760 align:middle
ウェブアプリケーションは
ルートのコンポーネントです。

00:01:46.920 --> 00:01:51.160 align:middle
Seaside では、アプリケーションを
実行中にデバッグすることができます。

00:01:51.640 --> 00:01:53.360 align:middle
Pharo のデバッガーで。

00:01:53.720 --> 00:01:56.840 align:middle
このコースの続く講義で

00:01:57.120 --> 00:02:01.080 align:middle
フォームを自動生成するために使う
メタデータについて学びます。

00:02:02.680 --> 00:02:05.280 align:middle
これらは

00:02:05.440 --> 00:02:10.080 align:middle
2002年から開発されている Seaside
で作られたウェブアプリケーションの例です。

00:02:10.640 --> 00:02:12.560 align:middle
いくつかを見てみましょう。

00:02:12.720 --> 00:02:16.200 align:middle
このアプリケーションでは
グラフを豊富に使っていて

00:02:16.360 --> 00:02:20.320 align:middle
コンポーネントを組み合わせて
複雑なアプリケーションを作っています。

00:02:20.920 --> 00:02:25.680 align:middle
もう1つは、Pharo のウェブサイトで
見ることができる例ですが

00:02:26.040 --> 00:02:28.840 align:middle
複雑な表を食い合わせて

00:02:29.000 --> 00:02:32.440 align:middle
レポートを出力しています。

00:02:32.880 --> 00:02:36.440 align:middle
Seaside フレームワークを使うと
とてもシンプルに構築することができます。

00:02:38.120 --> 00:02:41.360 align:middle
Seaside の主要なコンセプトは
コンポーネントです。

00:02:41.680 --> 00:02:44.800 align:middle
コンポーネントは Seaside フレームワークが
提供する

00:02:44.960 --> 00:02:47.120 align:middle
WAComponent のサブクラスです。

00:02:47.720 --> 00:02:50.520 align:middle
コンポーネントは再利用可能で
ステートフルです。

00:02:50.680 --> 00:02:55.040 align:middle
HTML の div 等の要素として描画されます。

00:02:55.960 --> 00:03:00.440 align:middle
Seaside ではウェブアプリケーションには
ルートのコンポーネントが

00:03:00.760 --> 00:03:02.720 align:middle
（この場合は WACounter ですが）

00:03:02.920 --> 00:03:06.080 align:middle
置かれています。

00:03:06.240 --> 00:03:10.400 align:middle
これは Counter という名前がつけられて
URL からその名前でアクセスできます。

00:03:11.040 --> 00:03:14.560 align:middle
ここに Counter アプリケーション例の
URL があります。

00:03:14.760 --> 00:03:17.840 align:middle
これは HTML で描画されたコンポーネントです。

00:03:18.200 --> 00:03:21.840 align:middle
カウンターの値はゼロです。
ここに 2 つのリンクがあります。

00:03:22.160 --> 00:03:25.240 align:middle
++ をクリックするとインクリメントして

00:03:25.480 --> 00:03:28.200 align:middle
-- をクリックするとデクリメントします。

00:03:29.160 --> 00:03:32.720 align:middle
このアプリケーションを実装するコードは
とてもシンプルです。

00:03:33.000 --> 00:03:36.520 align:middle
WAComponent のサブクラスとして
WACounter を作ります。

00:03:36.680 --> 00:03:39.160 align:middle
インスタンス変数 count を持っています。

00:03:39.760 --> 00:03:43.480 align:middle
初期化メソッドがカウンタを 0 にセットします。

00:03:44.040 --> 00:03:47.800 align:middle
値をインクリメントするメソッドと
デクリメントするメソッドがあります。

00:03:48.640 --> 00:03:51.720 align:middle
ここで HTML の部分が必要になります。

00:03:52.000 --> 00:03:54.520 align:middle
それで counter を HTML に描画します。

00:03:54.680 --> 00:03:57.520 align:middle
やることは 描画方法をメソッドとして
与えてあげることだけです。

00:03:57.680 --> 00:03:59.800 align:middle
renderContentOn: に引数がつきます。

00:04:00.360 --> 00:04:03.160 align:middle
引数を使って HTML コードを生成できます。

00:04:04.520 --> 00:04:08.280 align:middle
ここに WACounter クラスの
renderContentOn: の

00:04:08.520 --> 00:04:09.880 align:middle
例があります。

00:04:10.040 --> 00:04:14.280 align:middle
この引数は
通常の Pharo のオブジェクトですが

00:04:15.360 --> 00:04:19.080 align:middle
Seaside から提供される
WAHtmlCanvas クラスのインスタンスです。

00:04:19.400 --> 00:04:23.520 align:middle
このオブジェクトにメッセージを送って
HTML コードを生成します。

00:04:23.680 --> 00:04:25.920 align:middle
見出しや
アンカーつまりリンクなど。

00:04:26.360 --> 00:04:29.160 align:middle
callback: メッセージで

00:04:29.320 --> 00:04:32.560 align:middle
リンクがクリックされた時に実行する
コードブロックを指定できます。

00:04:32.720 --> 00:04:35.520 align:middle
ここでは ++ リンクがクリックされたら

00:04:35.680 --> 00:04:38.320 align:middle
self increase が実行されます。

00:04:38.560 --> 00:04:43.920 align:middle
-- をクリックすることで
self decrease が実行されます。

00:04:44.440 --> 00:04:45.400 align:middle
とてもシンプルですね。

00:04:46.880 --> 00:04:51.840 align:middle
リンクをクリックして
コールバックでエラーが発生したら

00:04:52.000 --> 00:04:56.600 align:middle
ここで意図的にブレークポイントを
挿入してありますが、これでエラーになります。

00:04:57.040 --> 00:05:00.240 align:middle
decrese メソッドに
ブレークポイントを挿入しました。

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

00:05:05.520 --> 00:05:08.240 align:middle
するとデバッガが立ち上がります。

00:05:09.040 --> 00:05:12.440 align:middle
見ての通り
これをウェブアプリでやったら

00:05:12.600 --> 00:05:14.480 align:middle
デバッガがここに表示されます。

00:05:14.640 --> 00:05:19.440 align:middle
ここにプログラムのアプリケーションスタックが
renderContentOn: のところで表示されます。

00:05:20.120 --> 00:05:22.720 align:middle
そしてここに decrease があります。

00:05:23.600 --> 00:05:25.480 align:middle
haltIf: で停止しました。

00:05:25.800 --> 00:05:28.680 align:middle
ここでコードを修正することができます。

00:05:29.000 --> 00:05:30.560 align:middle
Proceed をクリックします。

00:05:30.960 --> 00:05:34.040 align:middle
すると HTML レスポンスを受け取ります。

00:05:34.200 --> 00:05:36.080 align:middle
何事もなかったかのように。

00:05:39.080 --> 00:05:42.800 align:middle
ウェブアプリでのもう 1 つの問題は
「戻る」ボタンです。

00:05:43.240 --> 00:05:45.480 align:middle
「戻る」をクリックすると

00:05:45.640 --> 00:05:48.600 align:middle
サーバーとクライアントの同期が壊れます。

00:05:48.960 --> 00:05:53.640 align:middle
カウンタを 5 回インクリメントしたとします。
今、スクリーン上に 5 が表示されています。

00:05:53.880 --> 00:05:57.600 align:middle
そしてブラウザの「戻る」ボタンをクリックすると

00:05:57.920 --> 00:05:59.840 align:middle
カウンタは 4 と表示されます。

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

00:06:03.680 --> 00:06:08.640 align:middle
なので、また ++ をクリックすると
スクリーンには 6 が表示されます。

00:06:09.280 --> 00:06:13.320 align:middle
問題は、サーバー側は
まだ 5 だと思っていることです。

00:06:13.640 --> 00:06:14.800 align:middle
5 + 1 は 6 です。

00:06:15.320 --> 00:06:18.520 align:middle
Seaside を使うと「戻る」ボタンの扱いが
とても楽になります。

00:06:18.680 --> 00:06:22.160 align:middle
WACounter クラスに
新しいメソッド states を定義します。

00:06:22.600 --> 00:06:26.560 align:middle
states は「戻る」ボタンが押された時のために

00:06:26.720 --> 00:06:28.520 align:middle
保存しておくべき状態の配列を返します。

00:06:28.680 --> 00:06:32.360 align:middle
この場合には
self つまりカウンターのみです。

00:06:33.200 --> 00:06:36.640 align:middle
さて、「戻る」ボタンをクリックして
++ をクリックしてみると

00:06:36.880 --> 00:06:38.680 align:middle
5 になるはずです。

00:06:41.640 --> 00:06:46.280 align:middle
コールバックは Pharo の力を全て備えた

00:06:46.520 --> 00:06:49.040 align:middle
コードブロックです。

00:06:49.360 --> 00:06:53.440 align:middle
コールバックには Pharo の
どんなコードでも書くことができます。

00:06:54.040 --> 00:06:56.960 align:middle
さらに複雑な例を用意しました。

00:06:57.240 --> 00:07:01.160 align:middle
カウンターを 1 増やすか
あるいは 2 増やすかを

00:07:01.320 --> 00:07:05.200 align:middle
count の値が奇数か偶数かで
分岐することができます。

00:07:05.760 --> 00:07:11.720 align:middle
偶数の場合には偶数の場合よりも速く増加します。

00:07:12.560 --> 00:07:17.000 align:middle
見ての通り、Pharo はコールバックとして

00:07:17.160 --> 00:07:18.920 align:middle
本当にパワフルな言語です。

00:07:21.560 --> 00:07:25.840 align:middle
元の例に戻ると、 ++をクリックすると

00:07:26.240 --> 00:07:30.720 align:middle
新しいウィンドウが開いて

00:07:31.920 --> 00:07:35.600 align:middle
偶数だと知らせてくれます。

00:07:36.800 --> 00:07:40.560 align:middle
次に、挨拶アプリの書き方をお見せします。

00:07:40.720 --> 00:07:43.160 align:middle
ユーザーは自分の名前を入力します。

00:07:43.400 --> 00:07:47.720 align:middle
ここに入力します。
そして「Say Hello,」をクリックすると

00:07:48.640 --> 00:07:52.680 align:middle
「Hi」に続いてユーザーの名前が
表示するようにしたいと思います。

00:07:53.040 --> 00:07:55.160 align:middle
ここで最初に入力します。

00:07:56.760 --> 00:08:01.600 align:middle
これを Seaside で実装するのは
とても簡単です。

00:08:01.960 --> 00:08:05.160 align:middle
WAComponent のサブクラスとして
Greeter クラスを作ります。

00:08:05.360 --> 00:08:07.240 align:middle
インスタンス変数は username です。

00:08:07.400 --> 00:08:10.240 align:middle
ここでお見せしている
renderContentOn: メソッドは

00:08:10.880 --> 00:08:14.080 align:middle
username フィールドを表示します。

00:08:14.240 --> 00:08:15.920 align:middle
次の行は textinput です。

00:08:16.120 --> 00:08:20.680 align:middle
前に見た、「Bob」と入力した
あのテキストフィールドです。

00:08:20.840 --> 00:08:22.520 align:middle
コールバックを定義します。

00:08:22.760 --> 00:08:26.240 align:middle
今回は 引数 value 付きのブロックです。

00:08:26.760 --> 00:08:30.840 align:middle
引数 value に渡されるのは

00:08:31.360 --> 00:08:33.480 align:middle
ユーザーが入力した文字列です。

00:08:33.800 --> 00:08:36.280 align:middle
それをインスタンス変数に代入します。

00:08:36.440 --> 00:08:39.000 align:middle
Greeter コンポーネントの username です。

00:08:39.520 --> 00:08:42.960 align:middle
次に submit ボタンがクリックされた時に

00:08:43.320 --> 00:08:48.040 align:middle
self inform: を使って
新しいコンポーネントを呼び出します。

00:08:48.200 --> 00:08:51.520 align:middle
「Hi, Bob」と表示するようにします。

00:08:51.920 --> 00:08:56.480 align:middle
文字列「Hi」と、username として
入力された文字列を連結します。

00:09:00.040 --> 00:09:03.760 align:middle
ウェブアプリを開発したことがある人たちには

00:09:03.920 --> 00:09:06.320 align:middle
Seaside ではリクエストや URL から
パラメータを得るために自分でパースする

00:09:06.760 --> 00:09:11.800 align:middle
必要がないことに気付いたでしょうか。

00:09:11.960 --> 00:09:16.520 align:middle
XML 設定ファイルなどのファイルやページは
必要ありません。

00:09:16.920 --> 00:09:20.240 align:middle
次のページへのリンクについても
私は何も言いませんでした。

00:09:20.640 --> 00:09:23.480 align:middle
今まで言ってきたことは
コンポーネントと

00:09:23.640 --> 00:09:25.320 align:middle
オブジェクトとメッセージの話だけです。

00:09:25.640 --> 00:09:27.160 align:middle
コールバックや

00:09:27.320 --> 00:09:32.160 align:middle
Pharo のデバッガーで
ライブにデバッグすることを話しました。

00:09:33.360 --> 00:09:36.960 align:middle
まとめると、Seaside では
簡単にウェブアプリケーションを構築できます。

00:09:37.200 --> 00:09:41.960 align:middle
ルートとなるコンポーネントが 1 つあって
コンポーネントを組み合わせて

00:09:42.240 --> 00:09:44.400 align:middle
より複雑なアプリケーションを構築します。

00:09:44.600 --> 00:09:48.000 align:middle
コンポーネントは renderContentOn: で
そのコンポーネント自身を HTML で描画します。

00:09:48.680 --> 00:09:51.960 align:middle
豊かなドメイン特化言語を使って

00:09:52.240 --> 00:09:55.240 align:middle
それぞれのコンポーネントの
HTML コードを生成することができます。

00:09:55.400 --> 00:09:58.680 align:middle
次のビデオでより詳細に説明します。