Squeakers' Night in 未来パーティ 2.0 ブループレイン 梅澤真史 はじめての Seaside -Web アプリをもっと楽しく軽快に書く -

Squeakers' Night in 未来パーティ 2.0 補足 : キーボード入力 ← は、代入の意味 –_ ( アンダースコア ) で入力 –:= ( コロン + イコール ) で書いても良い ↑ は、リターンの意味 –^ ( キャレット ) で入力

Squeakers' Night in 未来パーティ 2.0 補足 : サンプルコードの読み込み ページ右上の マークに注目 Squeak の「開く... 」 -> 「ファイル・リスト」 でファイル リストを開く サンプルコード (SeasideLesson-BasicXXXX) のディレクトリを選択し、 ” name ” ボタンを押 すとファイルが名前順にリストされる “ filein ” で読み込み “ code ” でソースコードを読める 101

Squeakers' Night in 未来パーティ 2.0 Seaside の特徴 Web アプリケーションサーバ – インストールが楽 マルチプラットフォーム (Win, Mac, Linux) あれこれ他のものを入れる必要がない – 状態の保持が楽 アプリケーションの状態遷移を自動的に管理 Web アプリケーション開発環境 –Web ブラウザや、 Smalltalk のツールを使い、 快適に開発できる

Squeakers' Night in 未来パーティ 2.0 インストール SeasideJOne を使うのが最も簡単 – zip を展開して、起動するのみ。 – 「ダウンロードから 10 秒で立ち上がる Web アプリケーションサーバ + 開発環境」 Seaside 日本語化パッチ (SeasideJ) Windows, Mac, Linux 共通 –USB メモリに入れて持ち運べば、どこでも開発でき る !

Squeakers' Night in 未来パーティ 2.0 イメージ立ち上げ Squeak VM に Seaside のイメージを与えて起動 SeasideJOne では上記を行うための起動ファイ ルが用意されている –Windows win_seaside.bat をダブルクリック –Mac mac_seaside.command をダブルクリック –Linux SeasideJOne を展開したディレクトリに移動 し、./linux_seaside で起動

Squeakers' Night in 未来パーティ 2.0 Seaside の開始 SeasideJ の場合 – 起動 : KomSeasideJ startOn: – 終了 : KomSeasideJ stop. 一度実行 ( “ do it ” ) してイメージをセーブすれば 以後は自動起動する SeasideJOne では既に自動起動するように なっている

Squeakers' Night in 未来パーティ 2.0 最初のアクセス 管理ツールにアクセス – ユーザ名 : admin パスワード : admin –Seaside サーバが提供しているアプリケー ション（コンポーネント）群が表示される

Squeakers' Night in 未来パーティ 2.0 デモの確認 Counter にアクセス – –++ や -- のリンクをクリックしてみる – ブラウザの back ボタンを押してみる – 複数のブラウザを立ち上げてアクセスしてみ る

Squeakers' Night in 未来パーティ 2.0 何がうれしいのか ? 継続 (Continuation) – アプリケーションの状態が自動的にサーバ側 に保持される リクエストごとに接続が切れる HTTP なのに ! ブラウザの Back ボタンを押しても大丈夫 Web アプリでもっとも苦労する部分を気にしなく とも良い URL に、セッション ID と継続 ID が埋め込まれる

Squeakers' Night in 未来パーティ 2.0 充実の開発環境 Web ブラウザから – ハロー – インスペクタ – ブラウザ – スタイルシートエディタ – プロファイラ さらに Smalltalk のデバッガと連携 – インタラクティブな開発環境が、強力に開発を支 援してくれる

Squeakers' Night in 未来パーティ 2.0 Seaside の得意分野 複雑な処理の流れを持つ Web アプリで あっても簡単に作れる – 継続の威力 ( 真の ) オブジェクト指向で作れる –HTML や RDB のテーブルは気にする必要がな い – 単純な CRUD であれば Rails でいいが... RDB ありきではない。 DB は何でも良い

Squeakers' Night in 未来パーティ 2.0 Seaside の MVC よく Web 系にみられる「なんちゃって MVC 」で はない –C が関数の集合、 V は表示テンプレート、 M はただの データホルダ、などというものが MVC と呼ばれている が... Seaside の MVC は、 GUI で見られる本来の MVC に きわめて近い形 –VC 一体型 MVC – 高度に抽象化されており、 Web に関する雑多な知識が 不要 (HTTP 、 HTML 、 JavaScript など ) – 本当に GUI アプリを作る感覚でよい

Squeakers' Night in 未来パーティ 2.0 コンポーネント V と C に該当する –HTML を生成して (V) 、ユーザからのイベン トを受け付ける (C) WAComponent – コンポーネントの抽象クラス Seaside でアプリを作るときは、まずこのクラス を 継承する

Squeakers' Night in 未来パーティ 2.0 コンポーネントの定義 WAComponent のサブクラスとして MyComponent を定義 MyComponent を Seaside に登録する – 定義して MyComponent initialize を ” do it ” – 白紙の画面が表示される MyComponent class>>initialize self registerAsApplication: ‘sample’

Squeakers' Night in 未来パーティ 2.0 コンポーネントの表示 ( レンダリ ング ) HTML を直に書かない – 他の Web アプリ開発フレームワークで見られ るような、いわゆるテンプレートは使わない テンプレートは生きたコードではない – 正しい HTML になるかのチェックが大変 – デバッグも面倒 –Smalltalk の開発環境でチェックできない – メッセージ送信でより簡単に HTML を生成でき る

Squeakers' Night in 未来パーティ 2.0 レンダリングの手順 WAComponent>>rendererClass をオーバーライド –WAHtmlRenderer を使うこともできるがレガシー扱い –WARenderCanvas のほうが綺麗に書ける。 2.7 からデフォルト WAComponent>>renderContentOn: html をオーバーライド – 引数として rendererClass で返したクラスのインスタンスが やってくる MyComponent>>rendererClass ↑WARenderCanvas MyComponent>>renderContentOn: html html text: ‘ こんにちは ’ 001

Squeakers' Night in 未来パーティ 2.0 レンダリングの例 リスト テーブル イメージ html orderedList: [ #(foo bar) do: [:each | html listItem: [ html text: each]]]. html table: [ html tableRow: [ #(foo bar) do: [:each | html tableData: [html text: each]]]]. html imageForm: ActiveWorld submorphs first imageForm. 002

Squeakers' Night in 未来パーティ 2.0 コールバック GUI でいうところの「イベントハンド ラ」 リンクやフォームのボタンが押された ときの処理を記述する –Smalltalk のブロックで書く html anchor callback: [self inform: Time now]; text: ‘ 今の時刻は ?' 003

Squeakers' Night in 未来パーティ 2.0 コールバックの例 フォームの場合 |morph| morph ← ActiveWorld submorphs first. html form: [ html textInput value: morph extent; callback: [:value | morph extent: (Point readFrom: value)]. html submitButton value: ‘ サイズ変更 ’. ]. html imageForm: morph imageForm 004

Squeakers' Night in 未来パーティ 2.0 フォームの例 on:of: を使ってモデルと関連づける –callback: の簡略版 –customer の name 、 address メソッドが呼ばれて値 が表示される –Submit すると、 customer の name: 、 address: メ ソッドが呼ばれて値が入る html form: [ html textInput on: #name of: customer. html textInput on: #address of: customer. html submitButton. ] 005

Squeakers' Night in 未来パーティ 2.0 状態の保持 単にコンポーネントにインスタンス変数を定 義 すればよい – 手動でセッションの辞書に値を出し入れなどしな い 継続を使って状態を保持させる ( ブラウザの Back ボタ ン対応 ) には、最初に明示的に登録する –object は self でもインスタンス変数でも良い MyComponent>>initialize self session registerObjectForBacktracking: object.

Squeakers' Night in 未来パーティ 2.0 演習 (1) Seaside のカウンターのサンプル (WACounter) を調べよう –WACounter browse と “ do it ” –registerObjectForBacktracking: を コメントアウトして振る舞いの違いを確認 しよう – ハローをクリックして開発環境の動きを確 認してみよう

Squeakers' Night in 未来パーティ 2.0 コンポーネントの入れ子 (1) できあがったコンポーネントは、他のコン ポー ネントに埋め込んで使用できる –WAMultiCounter は変数 counters に WACounter を 持ち、以下のようにレンダリングできる –children メソッドをオーバーライドして、子供の コンポーネントを返すようにしておく WAMultiCounter>>children ↑ counters WAMultiCounter>>renderContentOn: html counters do: [:ea | html render: ea] separatedBy: [html horizontalRule]

Squeakers' Night in 未来パーティ 2.0 コンポーネントの入れ子 (2) 入れ子階層のルートになり得るコンポーネントには、 クラスメソッドの canBeRoot を定義する “ Configure ” リンクの ” Root Component ” の項で、 URL を指定したときにルートとして表示されるコンポー ネントを設定できる –URL は別だが、起動されるのは同じコンポーネントとした いとき などに有効 WAMultiCounter class>>canBeRoot ↑true

Squeakers' Night in 未来パーティ 2.0 call: と answer: 別のコンポーネントに制御を移すには call: を使 う – 新たな ( モーダル ) ダイアログを開くイメージ いつでも answer: で call: した側に戻ることがで きる – 画面遷移のための XML など不要 ! A B call: answer: A>>methodA value ← self call: (B new) B>>methodB self answer: value

Squeakers' Night in 未来パーティ 2.0 スタイルシートの指定 (1) レンダリング時に、 class: や id: などで css のスタイルを指定 MyComponent>>renderContentOn: html html heading class: 'topic'; with: ' 見出しです '. html paragraph class: 'contents'; with: ' これが Seaside'. html div class: 'cool'; with: [ html orderedList: [ #(foo bar) do: [:each | html listItem: [ html text: each]]]. ] 006

Squeakers' Night in 未来パーティ 2.0 スタイルシートの指定 (2) WAComponent>>style をオーバーライド –css の文字列を返す ブラウザからデバッグツールで編集・確認が可能 MyComponent>>style ↑' h1 { test-align: center; }.topic { color: red;}.contents { color: blue; }.cool { margin: 5%; } li { background-color: #ecf3e1; border: 1px solid #c5dea1; } ' 006

Squeakers' Night in 未来パーティ 2.0 スタイルシートの指定 (3) 複雑なスタイルシートの管理には StyleLibrary の仕組みを使う –WAStyleLibrary を継承 – 継承したクラスで、適当な名前のメソッド を いくつか定義し、 css 文字列を返すように する “Configure” リンクの ” Libraries ” の項で、 そのスタイルクラスをコンポーネント が使うように追加指定する 007

Squeakers' Night in 未来パーティ 2.0 演習 (2) To Do List のソースを読んでみよう – コンポーネントの入れ子の確認 ToDoListRoot –call: と answer: の確認 ToDoListRoot>>addItem –style の確認 ToDoListItemViewer>> style –registerObjectForBacktracking: の確認 ToDoListRoot>>initialize 101

Squeakers' Night in 未来パーティ 2.0 トランザクション Back ボタンで戻ることができない 処理の区切りを作りたい場合 –WAComponent>>isolate: を使う 継続の区切り。ブロック内でしか、行き来でき ない ワークフロー的な処理の流れを示すた めの WATask クラスが用意されている –WATask>>go をオーバーライドする –WAStoreTask を参照のこと

Squeakers' Night in 未来パーティ 2.0 ワークフローの記述例 MyShoppingTask>>go cart ← WAStoreCart new. self isolate: [[self fillCart. self confirmContentsOfCart] whileFalse]. self isolate: [| shipping | shipping _ self getShippingAddress. self shipTo: shipping]. self displayConfirmation.

Squeakers' Night in 未来パーティ 2.0 デコレーション 既存のコンポーネントに、表示や振る 舞いを動的に追加する 共通の表示や振る舞いを、継承とは 独立してまとめあげ、再利用できる component addDecoration: (WAWindowDecoration new)

Squeakers' Night in 未来パーティ 2.0 デコレーションの例 WAWindowDecoration – 「閉じる」ボタンを追加 WABasicAuthentication – 認証機能を追加 WAValidationDecoration – 入力データの有効性チェックを追加

Squeakers' Night in 未来パーティ 2.0 ドメインモデルとの接続 モデル系のクラスは、コンポーネント とはまったく独立して定義する コンポーネントは、モデルをインスタ ンス 変数で保持する コンポーネントは単にモデルの値を変 えて、表示するのみ (V と C に徹する ) 異なるコンポーネント間でモデルを共 有してよい ( マルチビュー )

Squeakers' Night in 未来パーティ 2.0 演習 (3) 簡易ショップのソースを読んでみよう – モデルはビューを決して知らない ‘ SeasideLesson-Store-Model ’ のモデル群 –VC はモデルを表示・操作する ‘ SeasideLesson-Store-View ’ のコンポーネント群 –isolate: の動きを確認 住所送信後では Back できない MyOrderListView >> checkAddressAndShip

Squeakers' Night in 未来パーティ 2.0 DB との接続 (1) OODB を使うと楽 –OmniBaseJ –Magma O/R マッパーも有り –Glorp c2-814e-12e38299edc0http://map.squeak.org/package/c31e c2-814e-12e38299edc0

Squeakers' Night in 未来パーティ 2.0 DB との接続 (2) Seaside のセッションと DB のセッションとの統 合 –WASession のサブクラスを作り、 DB のセッションを インスタンス変数として持たせる – できたサブクラスをコンポーネントが使えるよう に ” Configure ” で Session Class に設定する – コンポーネントに DB 保存や取得のメソッドを定義す る –Seaside セッション終了時に、 WASession>>unregistered が呼ばれるので、 DB セッションもそこで確実に閉じるようにする MyComponent>>store: domainObject self session store: domainObject MySession>>unregistered self db close

Squeakers' Night in 未来パーティ 2.0 DB との接続 (3) OmniBaseJ – – 使い方 : DBAccessor – を選択した場合は...

Squeakers' Night in 未来パーティ 2.0 DB との接続 (4) 格納 取り出し 解放 MyDBSession>>store: object SBOmniBaseAccessor commitDo: [:transaction | transaction root at: #key put: object]. MyDBSession>>getAt: key ↑SBOmniBaseAccessor readDo: [:transaction | transaction root at: #key]. MyDBSession>>unregistered SBOmniBaseAccessor closeDb.

Squeakers' Night in 未来パーティ 2.0 その他、便利な部品群 WASimpleNavigation – タブを使ったページの切り替え WATableReport – リッチなテーブルの表示 ( ソート機能など ) WALabelledFormDialog – ラベル付きフォームの生成 WABatchedList – 複数ページビュー ( ページング ) の作成

Squeakers' Night in 未来パーティ 2.0 設定の管理 “ Configure ” で設定ツールが開く –Deployment モードの切り替え –Lang の設定など (SeasideJ) – コンポーネントからは self application preferenceAt: #deploymentMode などとして、値を参照できる 自分用に設定事項を追加した Configuration を作ることも可能 –WASystemConfiguration のサブクラスを 作成する

Squeakers' Night in 未来パーティ 2.0 Seaside の拡張 ShoreComponents – 便利なウィジェット群 BeachSand –Configuration をファイルに保存 MEWA or Magritte – モデルのメタ情報からコンポーネントを自動生成 する Scriptaculous –Scristaculous (Web 2.0 系の JavaScript ライブラリ 群 ) JavaScript を意識せずに Seaside から利用できる 2.6 から Seaside に搭載済み

Squeakers' Night in 未来パーティ 2.0 Scriptaculous の例 onClick: で effect を指定 ” Configure ” リンクの Libraries から SULibrary を MyComponent に追加 MyComponent>>renderContentOn: html html heading id: 'topic'; with: ' 見出しです '. html anchor onClick: (html effect id: 'topic'; toggleBlind); with: ' これが Seaside'. 008

Squeakers' Night in 未来パーティ 2.0 運用について Squeak を headless モード ( 画面無し ) で起 動 –squeak – headless Apache との組み合わせ –ProxyPass と ProxyPassReverse を httpd.conf で設定 SSL の使用 –Seaside そのものは SSL をサポートしない –Stunnel などを間に置くことで代用 ProxyPass /seaside/ ProxyPassReverse /seaside/

Squeakers' Night in 未来パーティ 2.0 まとめ Seaside は、 Web アプリケーションを迅 速に作るためのフレームワーク –GUI アプリを書ける人であれば習得はきわ めて速い –Web のしがらみを離れて、すべてを Smalltalk で、「自然に」書いていくことが できる Ver. 2.7 の開発が急速に進行中 –Watch していればきっと時代の最先端