吉田　翔

もしイチゴ農家の園主がSmalltalkの「Seaside」（で作られたシステム）を使ってみたら

愛知県のイチゴ農家がSeasideを使って愛知県トップを目指すストーリー？

http://swikis.ddo.jp/umejava/38

日本初？Seasideの紹介ページ

http://swikis.ddo.jp/umejava/38

日本初？Seasideの紹介ページ

これ以降何回か紹介されているけど「公開したよ」って話を聞かない

チュートリアル

チュートリアル

作ってみるチュートリアル

できた．終了！

作ってみるチュートリアル

できた．終了！

作ってみるチュートリアル

実際に一般公開してみた※本職とは関係ありません

いちご狩り予約管理システム澤田農園　http://www.sawadafarm.com

予約システムの導入経緯１

いちご狩り予約は電話とFAX

記録・管理

日ごとに整理

予約情報は紙に記録

苺狩りしたい

予約システムの導入経緯２

苺狩りしたい

気軽に予約できない 予約管理が手作業

システム導入前の問題

知りたい情報はどこに？

様子が分からない

•子どもでも取れるのか•汚れないか•通路は広いか

情報が複雑

システム導入前の問題

知りたい情報はどこに？

様子が分からない

•子どもでも取れるのか•汚れないか•通路は広いか

情報が複雑

システム導入前の問題

知りたい情報はどこに？

様子が分からない

•子どもでも取れるのか•汚れないか•通路は広いか

情報が複雑

コンセプト

sawadafarm.com

予約管理システム

１分で知って10分で予約

澤田農園サイト

sawadafarm.com

サイト全体を予約システムとする

１分で知って10分で管理

なぜSeaside？

• ポータブルな環境であったこと

• 予約画面のプロトタイプは３時間で作って，イメージを持ってもらえた

• ページ遷移の記述が非常に楽なこと

• Smalltalkで作ったシステムを一般公開してみたかった

• PHP，Ruby，Javaは何となく書けるけど・・・

フロー制御

一般画面 予約画面カレンダー表示処理

ユーザ操作システム遷移

予約状況確認画面（時間）

年間カレンダー

月カレンダー

予約

クリック

クリック

クリック クリック

クリック クリック

※A

クリック

編集削除クリック

※C

お客様予約入力遷移

クリック

一番変わりやすく面倒なところ

フロー制御

例: ログイン時のフロー

Web開発で悩む処理

認証成功

登録

認証失敗Login

main page

User register

login

user register

main

認証成功

登録

認証失敗

フロー制御

WATask>>goでフロー全体を記述

MyLoginComponent

MyUserRegisterComponent

MyMainComponent

MyTask

call:

answer:

認証失敗

認証成功

柔軟なフロー制御が記述可能

MyTask>>go! | user |! loginAnswer:= self call:(MyLoginComponent new).

! loginAnswer = #registerUser! ! ifTrue:[ user := self call:

(MyUserRegisterComponent new) ] ifFalse:[ user := loginAnswer ].

! user ifNotNil:[! ! self session login: user.].

self call:(MyMainComponent new).

WATask subclass:#MyTask

フロー制御

公開までの道のり

6月 11月 1月9月?月吉田への依頼?

画面設計仕様調整

Seasideでプロタイプでイメージを持ってもらう

コンセプトと意識改革

着手依頼 サーバ構築Webページ移行

予約システム公開

2012年2011年

便利なSeaside をどうやって作っていったかというと・・・

コンセプト

コンセプト

シンプルかつ直感的

コンセプト

素の澤田農園

コンセプト

素の澤田農園

要件

①予約月を選択 ②予約時間を選択 ③名前とアドレス入力

メールで本人確認

システム構成

Apache

PostgreSQL

Web AP (Smalltalk)

メール配信機能（バッチ処理）

Comanche

公開への道のり（日本語の対応）

|adapter|WAComancheAdaptor startOn: 8080.adapter := WAComancheAdaptor default.adapter codec: (GRCodec forEncoding: 'utf-8').adapter isRunning

Seaside 3.0系の場合

これらを実現する上でのまず最初におこなったのは・・・

公開への道のり（開発ツールの削除）

WAAdmin applicationDefaults removeParent: WADevelopmentConfiguration instance

WAAdmin applicationDefaults addParent: WADevelopmentConfiguration instance

ツールの削除

ツールの追加

公開への道のり（Apacheとの連携）

Apache

Web AP (Smalltalk)

Comanche Server

port:3000

port:80

access.html

静的で可能なページはSeasideで扱わないApacheのRewrite機能を使って実現

<VirtualHost *:80> RewriteEngine On RewriteRule ^/(swd.*)$ http://localhost:3000/$1 [P,L]</VirtualHost>

httpd.conf等にrewriteルールを記載する

http://www.sawadafarm.com/swdreservation

http://www.sawadafarm.com/access.html

公開への道のり（画像ファイルとCSS）

WAFileLibraryのsubclassを作成

MyFileLibrary addFileAt:'./css/main.css'.

MyFileLibrary addAllFilesIn: './css/'.

または

Workspace上で以下のコードを実行

一般的にはimageファイルに取り込む方法がある

公開への道のり（画像ファイルとCSS）

>>updateRoot:anHtmlRoot super updateRoot: anHtmlRoot. anHtmlRoot stylesheet url: MyFileLibrary / #mainCss.

>>(class) initialize! |app|! app := (WAAdmin register: self asApplicationAt: '...')! ! addLibrary: MyFileLibrary.

WAComponent subclass

WAComponent subclass

ライブラリの選択

公開への道のり（画像ファイルとCSS）

>>updateRoot:anHtmlRoot super updateRoot: anHtmlRoot. anHtmlRoot stylesheet resourceUrl: self baseUrl ,'main.css'.

WAComponent subclass

今回の方法Smalltalk imageでcss等を管理しない

•imageファイルの軽量化•画像，cssの修正を独立できる•Web APのソースが管理しやすくなる

公開への道のり（バッチの呼び出し）

メール送信機能はSmalltalkで作れなかった

仮予約通知本予約通知キャンセルおよび自動キャンセル通知前日予約集計通知お客様質問通知

時間がなかった日本語の取り扱いに懸念点があった

メール送信機能

理由

公開への道のり（バッチの呼び出し）

OSProcess command:ʼcancelMail.rbʼ.

※実際には絶対パスでスクリプトを指定すること

OSProcessを用いるMetacelloのプロジェクトのConfigurationOfOSProcess※1

導入すればよい

System performOnServer: 'date'

Gemstoneの場合 OSProcessは不要

Web AP (Smalltalk) メール配信機能（バッチ処理）

※1 第23回Smalltalk勉強会 資料参考

公開への道のり（PostgreSQLとの接続）

SqueakDatabaseAccessor DefaultDriver:(Smalltalk at: #NativePostgresDriver).

ConfigurationOfGlorpDBX project lastVersion load:'Core'.

Glorp※1を用いる

※1 第12回Smalltalk勉強会 資料参考

Glorpを普通に使いたいならCoreがおすすめ

インストール後，PostgreSQLのドライバーをデフォルトとするため以下を実行

公開への道のり（ソースコードの管理）

一般的にはMonticelloおよびSqueakSourceのサーバを立てて管理

今回Gitを利用•HTMLファイル等の管理も行う必要があったため

　　※Source.stを管理するだけ•SSL通信でアクセス可能•現在，クラス単位のstファイルを出力して管理するツールを検討中

公開への道のり（バグの管理）

Redmine

チケット管理およびタスク管理が便利

すみませんRubyです・・・

公開への道のり（おまけ）

自動生成されるXHMTML以外の情報の出力

•XML, RSS,SVG...•画像ファイル等のダウンローダ

学生の頃でWard法クラスター分析したのものをデンドログラムを表現を作るときに活用

公開への道のり（おまけ）

renderContentOn: html! self requestContext respond: [:response |! ! response ! ! initializeOn: self svg ;

contentType: 'text/xml']

WAComponent subclass

公開への道のり（おまけ）

Responseを用いたsvgの出力

デモ

現在の澤田農園Webサイトの状況

• 昨年（2010秋～2011春）と比べるとサイトアクセス数は２倍

• 予約は好調（平均サイト滞在時間は5分）

• 大きなシステムトラブルはなし

• 予約システム公開後，２回仕様変更（積極的な業務改善）

• 更なる要望なども上がっている

具体的な結果は夏頃

現在の澤田農園Webサイトの状況

• 昨年（2010秋～2011春）と比べるとサイトアクセス数は２倍

• 予約は好調（平均サイト滞在時間は5分）

• 大きなシステムトラブルはなし

• 予約システム公開後，２回仕様変更（積極的な業務改善）

• 更なる要望なども上がっている

Smalltalkのシステムでも十分満足してもらえる具体的な結果は夏頃

Smalltalkを使って良かった点・悪かった点

良かった点 悪かった点

•プロトタイプがすぐに作れてイメージを持ってもらえた•Smalltalk（Pharo）でもパフォーマンスとして問題ないことが実感できた

•画面デザインと分業して作ると大変（SmalltalkでHTMLまでも記述する欠点？）•ログ出力ライブラリ•POSIXの正規表現ライブラリしかない

今後の改善

• 画面設計からのSeasideへの反映（画面モックをどのように反映するか）

• 共通ソースの管理（Gitでの管理を容易にする）

• リカバリと障害検知対策の強化（ログ等）

その他Seasideでバグ管理システムがあるといいのでは

作って終わりではなく公開もしましょう