iliad or seaside

55
Smalltalk勉強会 - Iliad 吉田 2010-05-27 2010-06-01 改良版 Iliad or Seaside ? 1 201063日木曜日

Upload: sho-yoshida

Post on 05-Dec-2014

208 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Iliad or Seaside

Smalltalk勉強会 - Iliad

吉田 翔2010-05-272010-06-01 改良版

Iliad or Seaside ?

12010年6月3日木曜日

Page 2: Iliad or Seaside

Smalltalk勉強会 - Iliad

Iliadのインストール

• iliad-8.1-Squeak4.1-ja-all-in-one.zip

iliad-8.1, 日本語パッチ適用済み

• iliad-8.1-Squeak4.1-ja-all-in-one-Demo.zip

iliad-8.1, 日本語パッチ適用済み, サンプルコード

22010年6月3日木曜日

Page 3: Iliad or Seaside

Smalltalk勉強会 - Iliad

このスライド補足

MyTestApplication.st

iliad-8.1-Squeak4.1-ja-all-in-one-Demo.zip内の./demosource/ にソースコードがあります

32010年6月3日木曜日

Page 4: Iliad or Seaside

Smalltalk勉強会 - Iliad

Iliadチュートリアル

SwazooIliad startOn: 9090.サーバの起動

SwazooIliad stop.サーバの停止

Workspaceで以下のコードをdo it

42010年6月3日木曜日

Page 5: Iliad or Seaside

Smalltalk勉強会 - Iliad

Iliad起動確認

Webブラウザで http://localhost:9090/browseにアクセス

52010年6月3日木曜日

Page 6: Iliad or Seaside

Smalltalk勉強会 - Iliad

IliadでHello World

Hello Worldと表示するWeb Appを作成する

62010年6月3日木曜日

Page 7: Iliad or Seaside

Smalltalk勉強会 - Iliad

IliadのXHTMLレンダリング

•テンプレート方式ではない

•レンダラオブジェクトにメッセージを送ることでXHTMLが生成される

72010年6月3日木曜日

Page 8: Iliad or Seaside

Smalltalk勉強会 - Iliad

コントローラーの作成

コントローラであるILApplicationのサブクラスを作成(MyTestApplicationとして定義)

MyTestApplication>>(class)path! ^'myTestApp'

アプリケーションを呼び出すためのパスを指定する

Webブラウザで http://localhost:9090/myTestAppにアクセス真っ白な画面が表示される

82010年6月3日木曜日

Page 9: Iliad or Seaside

Smalltalk勉強会 - Iliad

XHTMLレンダリング

index ^ [:e | ! ! e text: 'Hello World'. ].

MyTestApplication

メソッドカテゴリはcontrollersにすること

デフォルトコントローラとして呼び出されるindexに以下のコードを記述

e はILXHTMLElementのインスタンスMyTestApplication.st

92010年6月3日木曜日

Page 10: Iliad or Seaside

Smalltalk勉強会 - Iliad

IliadとSeasideの比較

•Seasideとの違い•どちらを選択すべきか

SmalltalkのWeb Framework

102010年6月3日木曜日

Page 11: Iliad or Seaside

Smalltalk勉強会 - Iliad

IliadとSeasideの比較項目

•XHTMLのレンダリング

•CSS, JavaScript

•フロー制御

•SessionとResponse(参考)

•開発環境と対応Smalltalk

112010年6月3日木曜日

Page 12: Iliad or Seaside

Smalltalk勉強会 - Iliad

XHTMLのレンダリング (1)

見出し <h1>I love Squeak</h1>

122010年6月3日木曜日

Page 13: Iliad or Seaside

Smalltalk勉強会 - Iliad

XHTMLのレンダリング (1)

見出し <h1>I love Squeak</h1>

index ^ [:e | ! ! e h1: 'I love Squeak'. ].

renderContentOn:html html heading:'I love Squeak.' level:1.

ILApplication subclass

WAComponent subclass

132010年6月3日木曜日

Page 14: Iliad or Seaside

Smalltalk勉強会 - Iliad

XHTMLのレンダリング (2)

リスト

<ul> <li>Apple</li> <li>Banana</li> <li>Orange</li></ul>

142010年6月3日木曜日

Page 15: Iliad or Seaside

Smalltalk勉強会 - Iliad

XHTMLのレンダリング (2)

リスト <ul><li>...</li></ul>

index ^ [:e | | ul |! ! ul := e ul.! ! #('Apple' 'Banana' 'Orange') do:[:v | | li |! ! ! li := ul li. ! ! ! li text: v ]].

DomによるXML処理と同じイメージ

152010年6月3日木曜日

Page 16: Iliad or Seaside

Smalltalk勉強会 - Iliad

XHTMLのレンダリング (2)

リスト <ul><li>...</li></ul>

renderContentOn:html! html unorderedList:[! ! #('Apple' 'Banana' 'Orange') do:[:v |! ! html listItem:v ]].

162010年6月3日木曜日

Page 17: Iliad or Seaside

Smalltalk勉強会 - Iliad

XHTMLのレンダリング (3)

テーブル<table border="1"> <tr> <td>Apple</td> <td>Banana</td> <td>Orange</td> </tr></table>

172010年6月3日木曜日

Page 18: Iliad or Seaside

Smalltalk勉強会 - Iliad

XHTMLのレンダリング (3)

テーブル

index! ^ [:e | | table row |! ! table := e table border:1.! ! row := table tr.! ! #('Apple' 'Banana' 'Orange') do:[:v | | td |! ! ! td := row td. ! ! ! td text: v ]].

ILApplication subclass

182010年6月3日木曜日

Page 19: Iliad or Seaside

Smalltalk勉強会 - Iliad

XHTMLのレンダリング (3)

テーブル

renderContentOn:html! html table border:1; with:[! ! html tableRow:[! ! #('Apple' 'Banana' 'Orange') do:[:v |! ! html tableData:v ]]].

WAComponent subclass

192010年6月3日木曜日

Page 20: Iliad or Seaside

Smalltalk勉強会 - Iliad

XHTMLレンダリング

Raw data

index ^ [:e | ! ! e html: '<h1>aaa</h1>'. ].

renderContentOn:html html html:'<h1>aaa</h1>'.

WAComponent subclass

ILApplication subclass

HTMLをそのまま出力

202010年6月3日木曜日

Page 21: Iliad or Seaside

Smalltalk勉強会 - Iliad

XHTMLのレンダリング違い

Blockをreturnする記述方法

tagをそのままイメージで利用できる

tagの正式名を知らないとメッセージを送れない

212010年6月3日木曜日

Page 22: Iliad or Seaside

Smalltalk勉強会 - Iliad

JavaScript,CSSの導入

1.Iliad, SeasideともにSqueak imageにソースを読み込み

2.アプリケーション側でライブラリの選択

以下の手順が必要

222010年6月3日木曜日

Page 23: Iliad or Seaside

Smalltalk勉強会 - Iliad

外部ソース(CSS,JavaScirpt)の読み込み

ILMemoryDirectoryのsubclassを作成

MyMemoryDirectory addFileAt:'./css/main.css'

MyMemoryDirectory addAllFilesIn:'./css/'

または

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

232010年6月3日木曜日

Page 24: Iliad or Seaside

Smalltalk勉強会 - Iliad

CSS,JavaScriptの導入準備

MyMemoryDirectory >> path! ^'stylesheets'

MyMemoryDirectory(class)>>initialize! "self initialize"! ILFileHandler addDirectory: self new

MyMemoryDirectory.st

Library.ws

アプリケーションを呼び出すためのパスを指定する

ILFileHandlerに登録

242010年6月3日木曜日

Page 25: Iliad or Seaside

Smalltalk勉強会 - Iliad

CSS,JavaScriptの導入

imageに読み込んだCSS

252010年6月3日木曜日

Page 26: Iliad or Seaside

Smalltalk勉強会 - Iliad

ライブラリの選択

styles ! ^#('/stylesheets/main.css')

updatePage: aPage! super updatePage: aPage.! aPage head stylesheet href: '/stylesheet/main.css'

ILApplication subclass

ILWidget subclass

262010年6月3日木曜日

Page 27: Iliad or Seaside

Smalltalk勉強会 - Iliad

ILWidgetとは

•ILApplicationの子要素になるクラス

•インターフェースの構成と値の保持が可能

sample http://localhost:9090/examples/counters/

272010年6月3日木曜日

Page 28: Iliad or Seaside

Smalltalk勉強会 - Iliad

JavaScript

HTMLレンダリングにメッセージを送るだけで生成されるJavaScript

contents! ^[:e |! ! e p onClick:(...); text:'1+1?'.].

ILWidget subclass

282010年6月3日木曜日

Page 29: Iliad or Seaside

Smalltalk勉強会 - Iliad

JavaScript,CSSの導入準備

WAFileLibraryのsubclassを作成

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

MyFileLibrary addAllFilesIn: './css/'.

または

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

292010年6月3日木曜日

Page 30: Iliad or Seaside

Smalltalk勉強会 - Iliad

JavaScript,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

ライブラリの選択

302010年6月3日木曜日

Page 31: Iliad or Seaside

Smalltalk勉強会 - Iliad

Ajax

JQuery

script.aculo.us

JQuery(Seaside 3.0より利用可能)

標準Ajaxライブラリ

312010年6月3日木曜日

Page 32: Iliad or Seaside

Smalltalk勉強会 - Iliad

フロー制御

例: ログイン時のフロー

Web開発で悩む処理

認証成功

登録

認証失敗Login

main page

User register

322010年6月3日木曜日

Page 33: Iliad or Seaside

Smalltalk勉強会 - Iliad

login

user register

main

認証成功

登録

認証失敗

332010年6月3日木曜日

Page 34: Iliad or Seaside

Smalltalk勉強会 - Iliad

フロー制御

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

342010年6月3日木曜日

Page 35: Iliad or Seaside

Smalltalk勉強会 - Iliad

フロー制御(Seaside)

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

MyLoginComponent

MyUserRegisterComponent

MyMainComponent

MyTask

call:

answer:

認証失敗

認証成功

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

352010年6月3日木曜日

Page 36: Iliad or Seaside

Smalltalk勉強会 - Iliad

フロー制御

MyIliad-Login.st

ControllerであるILApplicationでフローを管理

一般的なWeb Frameworkと同様な考え方

Ruby on Rails, Zend Framework

MyIliad-Login.stをfile inして確認してください

362010年6月3日木曜日

Page 37: Iliad or Seaside

Smalltalk勉強会 - Iliad

フロー制御(Iliad - 1)

ILApplication subclass: #MyFlowApplication! instanceVariableNames: 'flow'! classVariableNames: ''! poolDictionaries: ''! category: 'MyIliad-Login'

MyIliad-Login.st

index! ^ [:e | ! ! e build: self flow.]

login! flow := MyLoginWidget new

main! flow := MyMainWidget new.

register! flow := MyUserRegisterWidget new.

flow! ^ flow ifNil:[ flow := MyLoginWidget new ]

flow: anObject! flow := anObject

コントローラが子要素(Widget)を置き換える

372010年6月3日木曜日

Page 38: Iliad or Seaside

Smalltalk勉強会 - Iliad

フロー制御(Iliad - 2)ILWidget subclass: #MyLoginWidget! instanceVariableNames: 'user'! classVariableNames: ''! poolDictionaries: ''! category: 'MyIliad-Login'

login! ((user user = 'admin') and:[ user password = 'admin']) ! ! ifTrue:[ self application main. ]! ! ifFalse:[! ! ! self application register. ]. MyIliad-Login.st

コントローラに任せる

contents ^[:e | e form build: [:form | form text:'User ID'. form input action:[:v | user user: v. ]. form text:'Password'. form password action:[:v | user password: v. ]. form button text: 'create'; action: [ self login ]]]

382010年6月3日木曜日

Page 39: Iliad or Seaside

Smalltalk勉強会 - Iliad

フロー制御(Iliad - 3)

ILWidget subclass: #MyUserRegisterWidget! instanceVariableNames: 'user'! classVariableNames: ''! poolDictionaries: ''! category: 'MyIliad-Login'

addUser! "ここにユーザ追加処理"! self application main.

MyIliad-Login.st

contents ^[:e | e form build: [:form | form text:'User ID'. form input action:[:v | user user: v. ]. form text:'Password'. form password action:[:v | user password: v. ]. form button text: 'create'; action: [ self addUser ]]]

コントローラに任せる

392010年6月3日木曜日

Page 40: Iliad or Seaside

Smalltalk勉強会 - Iliad

フロー制御

•Controllerが遷移処理を行なわなければならない

•Seasideとは違いブラウザのバックボタンを実行されると整合性が取れない(従来のWeb Frameworkと同じ)

•IliadはILWidgetが利用できる点で従来より良い

402010年6月3日木曜日

Page 41: Iliad or Seaside

Smalltalk勉強会 - Iliad

Advance

•Session

•Response

参考SmalltalkでWebサイトを作りたい人へ

412010年6月3日木曜日

Page 42: Iliad or Seaside

Smalltalk勉強会 - Iliad

Session

SessionManager sessionClass: MySession

現時点で分かった方法

ILSessionのサブクラスを作成

422010年6月3日木曜日

Page 43: Iliad or Seaside

Smalltalk勉強会 - Iliad

Session

>>(class) initialize app := MyTask registerAsApplication: 'myTask'. app preferenceAt: #sessionClass put: MySession.

WASessionのサブクラスを作成

WAComponent subclass

432010年6月3日木曜日

Page 44: Iliad or Seaside

Smalltalk勉強会 - Iliad

Response (1)

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

XML, RSS,SVG...

画像ファイル等のダウンローダ

442010年6月3日木曜日

Page 45: Iliad or Seaside

Smalltalk勉強会 - Iliad

Response (2)

respondOn: aResponse aResponse contentType:'text/xml'; contents: self svg.

ILApplication subclass

MySVGApplication.st

self svg はSVGのテキストを返すメソッド

respondOn:をオーバライドする

452010年6月3日木曜日

Page 46: Iliad or Seaside

Smalltalk勉強会 - Iliad

Response (3)

2.8系

renderContentOn:html self session returnResponse: (WAResponse new !! contentType: 'text/xml'; ! ! nextPutAll: self makeSVG;! ! yourself)

WAComponent subclass

462010年6月3日木曜日

Page 47: Iliad or Seaside

Smalltalk勉強会 - Iliad

Response (4)

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

contentType: 'text/xml']

3.0系

WAComponent subclass

472010年6月3日木曜日

Page 48: Iliad or Seaside

Smalltalk勉強会 - Iliad

Response (5)

Responseを用いたsvgの出力

482010年6月3日木曜日

Page 49: Iliad or Seaside

Smalltalk勉強会 - Iliad

開発環境

ブラウザ上での開発

日本語 Documents

少ない

多い

492010年6月3日木曜日

Page 50: Iliad or Seaside

Smalltalk勉強会 - Iliad

ブラウザ上での開発

•Browser

•Halo

•Stylesheet

•Debugger

Iliadには実装されていない

502010年6月3日木曜日

Page 51: Iliad or Seaside

Smalltalk勉強会 - Iliad

日本語への対応方法

梅澤さんより日本語化パッチ提供 (Pharoでも利用可能)

GRUtf8SqCodec.st

ILSite default codec: (GRUtf8SqCodec new).

GRUtf8SqCodec.st をfile inする

Workspaceで以下のコードをdo it

512010年6月3日木曜日

Page 52: Iliad or Seaside

Smalltalk勉強会 - Iliad

対応Smalltalk

SqueakPharo

VisualWorks

GNU Smalltalk

GemStoneDolphin Smalltalk

VASmalltalk

SqueakPharoGNU Smalltalk

VisualWorks(対応予定)

522010年6月3日木曜日

Page 53: Iliad or Seaside

Smalltalk勉強会 - Iliad

Iliadの個人的感想

•Smalltalk以外のWebプログラマが移行するにはいいかも

•まだまだDocumentsが足りない

•Web上での開発ができるとよい

•非常に軽量で探索しやすい

532010年6月3日木曜日

Page 54: Iliad or Seaside

Smalltalk勉強会 - Iliad

参考情報

• Iliad http://www.iliadproject.org/index

• Seaside http://www.seaside.st/

• GNU Smalltalk http://smalltalk.gnu.org/

Iliad メーリングリストhttp://groups.google.fr/group/iliad

542010年6月3日木曜日

Page 55: Iliad or Seaside

Smalltalk勉強会 - Iliad

みなさんはどう思いましたか?

552010年6月3日木曜日