こんにちは。
この講義では Seaside ウェブフレームワークを カバーします。
Pharo でウェブアプリを構築するための 創造的な方法です。
Seaside は強力で、かつ、柔軟です。
Seaside は再利用可能でステートフルなコンポーネントを
ステートレスなプロトコルである HTTP の 上に構築しています。
Seaside はもちろん、そのままでセキュアです。
Ajax などや REST アーキテクチャのような
最新の Web2.0 テクノロジーを統合しています。
これは Seaside の URL です。
Seaside の無料オンラインブックのような ドキュメンテーションを得ることができます。
また、Seaside のチュートリアルも 一通り揃っています。
さらに、Seaside メーリングリストで 質問することもできます。
アクティブなコミュニティから 質問への答えが得られるでしょう。
ちょっと歴史の話をします。 Seaside は 2002 年から提供されています。
そしてアクティブにメンテナンスされています。
Seaside フレームワークは
Pharo の成功事例の多くの基礎になっています。
それらの事例は Pharo のサイト pharo.org で見ることができます。
見ればわかる通り ウェブのプロジェクトが多くあり
その大部分が Seaside フレームワークを 使っています。
前に言いましたが Seaside はコンポーネントを中心にした
ウェブフレームワークです。
コンポーネントは再利用可能で ステートフルなのものです。
HTML でコンポーネントを描画するための ドメイン特化言語（DSL）を持っています。
それらのコンポーネントを構成するためのルールは
後の講義でカバーします。
ウェブアプリケーションは ルートのコンポーネントです。
Seaside では、アプリケーションを 実行中にデバッグすることができます。
Pharo のデバッガーで。
このコースの続く講義で
フォームを自動生成するために使う メタデータについて学びます。
これらは
2002年から開発されている Seaside で作られたウェブアプリケーションの例です。
いくつかを見てみましょう。
このアプリケーションでは グラフを豊富に使っていて
コンポーネントを組み合わせて 複雑なアプリケーションを作っています。
もう1つは、Pharo のウェブサイトで 見ることができる例ですが
複雑な表を食い合わせて
レポートを出力しています。
Seaside フレームワークを使うと とてもシンプルに構築することができます。
Seaside の主要なコンセプトは コンポーネントです。
コンポーネントは Seaside フレームワークが 提供する
WAComponent のサブクラスです。
コンポーネントは再利用可能で ステートフルです。
HTML の div 等の要素として描画されます。
Seaside ではウェブアプリケーションには ルートのコンポーネントが
（この場合は WACounter ですが）
置かれています。
これは Counter という名前がつけられて URL からその名前でアクセスできます。
ここに Counter アプリケーション例の URL があります。
これは HTML で描画されたコンポーネントです。
カウンターの値はゼロです。 ここに 2 つのリンクがあります。
++ をクリックするとインクリメントして
-- をクリックするとデクリメントします。
このアプリケーションを実装するコードは とてもシンプルです。
WAComponent のサブクラスとして WACounter を作ります。
インスタンス変数 count を持っています。
初期化メソッドがカウンタを 0 にセットします。
値をインクリメントするメソッドと デクリメントするメソッドがあります。
ここで HTML の部分が必要になります。
それで counter を HTML に描画します。
やることは 描画方法をメソッドとして 与えてあげることだけです。
renderContentOn: に引数がつきます。
引数を使って HTML コードを生成できます。
ここに WACounter クラスの renderContentOn: の
例があります。
この引数は 通常の Pharo のオブジェクトですが
Seaside から提供される WAHtmlCanvas クラスのインスタンスです。
このオブジェクトにメッセージを送って HTML コードを生成します。
見出しや アンカーつまりリンクなど。
callback: メッセージで
リンクがクリックされた時に実行する コードブロックを指定できます。
ここでは ++ リンクがクリックされたら
self increase が実行されます。
-- をクリックすることで self decrease が実行されます。
とてもシンプルですね。
リンクをクリックして コールバックでエラーが発生したら
ここで意図的にブレークポイントを 挿入してありますが、これでエラーになります。
decrese メソッドに ブレークポイントを挿入しました。
カウンターがゼロより小さい値になれば self が停止（halt）します。
するとデバッガが立ち上がります。
見ての通り これをウェブアプリでやったら
デバッガがここに表示されます。
ここにプログラムのアプリケーションスタックが renderContentOn: のところで表示されます。
そしてここに decrease があります。
haltIf: で停止しました。
ここでコードを修正することができます。
Proceed をクリックします。
すると HTML レスポンスを受け取ります。
何事もなかったかのように。
ウェブアプリでのもう 1 つの問題は 「戻る」ボタンです。
「戻る」をクリックすると
サーバーとクライアントの同期が壊れます。
カウンタを 5 回インクリメントしたとします。 今、スクリーン上に 5 が表示されています。
そしてブラウザの「戻る」ボタンをクリックすると
カウンタは 4 と表示されます。
しかしサーバーは「戻る」ボタンを押した ことによる更新がされていません。
なので、また ++ をクリックすると スクリーンには 6 が表示されます。
問題は、サーバー側は まだ 5 だと思っていることです。
5 + 1 は 6 です。
Seaside を使うと「戻る」ボタンの扱いが とても楽になります。
WACounter クラスに 新しいメソッド states を定義します。
states は「戻る」ボタンが押された時のために
保存しておくべき状態の配列を返します。
この場合には self つまりカウンターのみです。
さて、「戻る」ボタンをクリックして ++ をクリックしてみると
5 になるはずです。
コールバックは Pharo の力を全て備えた
コードブロックです。
コールバックには Pharo の どんなコードでも書くことができます。
さらに複雑な例を用意しました。
カウンターを 1 増やすか あるいは 2 増やすかを
count の値が奇数か偶数かで 分岐することができます。
偶数の場合には偶数の場合よりも速く増加します。
見ての通り、Pharo はコールバックとして
本当にパワフルな言語です。
元の例に戻ると、 ++をクリックすると
新しいウィンドウが開いて
偶数だと知らせてくれます。
次に、挨拶アプリの書き方をお見せします。
ユーザーは自分の名前を入力します。
ここに入力します。 そして「Say Hello,」をクリックすると
「Hi」に続いてユーザーの名前が 表示するようにしたいと思います。
ここで最初に入力します。
これを Seaside で実装するのは とても簡単です。
WAComponent のサブクラスとして Greeter クラスを作ります。
インスタンス変数は username です。
ここでお見せしている renderContentOn: メソッドは
username フィールドを表示します。
次の行は textinput です。
前に見た、「Bob」と入力した あのテキストフィールドです。
コールバックを定義します。
今回は 引数 value 付きのブロックです。
引数 value に渡されるのは
ユーザーが入力した文字列です。
それをインスタンス変数に代入します。
Greeter コンポーネントの username です。
次に submit ボタンがクリックされた時に
self inform: を使って 新しいコンポーネントを呼び出します。
「Hi, Bob」と表示するようにします。
文字列「Hi」と、username として 入力された文字列を連結します。
ウェブアプリを開発したことがある人たちには
Seaside ではリクエストや URL から パラメータを得るために自分でパースする
必要がないことに気付いたでしょうか。
XML 設定ファイルなどのファイルやページは 必要ありません。
次のページへのリンクについても 私は何も言いませんでした。
今まで言ってきたことは コンポーネントと
オブジェクトとメッセージの話だけです。
コールバックや
Pharo のデバッガーで ライブにデバッグすることを話しました。
まとめると、Seaside では 簡単にウェブアプリケーションを構築できます。
ルートとなるコンポーネントが 1 つあって コンポーネントを組み合わせて
より複雑なアプリケーションを構築します。
コンポーネントは renderContentOn: で そのコンポーネント自身を HTML で描画します。
豊かなドメイン特化言語を使って
それぞれのコンポーネントの HTML コードを生成することができます。
次のビデオでより詳細に説明します。