42
ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit 小田朋宏 ()SRA 中小路久美代 ()SRA 山本恭裕 東京工業大学 1 1379日火曜日

ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

Embed Size (px)

DESCRIPTION

SS2013@岐阜

Citation preview

Page 1: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

ライブ UI プロトタイピングに向けたマルチ言語環境 SOMETHINGit

小田朋宏 (株)SRA中小路久美代 (株)SRA山本恭裕 東京工業大学

1

13年7月9日火曜日

Page 2: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

UI designLightweight Formal Method

2

13年7月9日火曜日

Page 3: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

動機

• 軽量形式手法をより多くの人が手軽に使える環境を作りたいo 例えば、UIデザイナ

3

13年7月9日火曜日

Page 4: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

軽量形式手法とUIデザインそれぞれのプロトタイピングの特徴

UIスケッチ• 具体性• ニュアンス

実行可能仕様• 実行可能性• 厳密性

4

13年7月9日火曜日

Page 5: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

軽量形式手法+UIプロトタイピング

UIデザイナ 形式手法技術者

実行可能なUIプロトタイプデザインデシジョンの合意

5

13年7月9日火曜日

Page 6: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

めざすところ

• 「機能モデル的に実現可能なUIデザイン」 かつ、「適切なUIを構築可能な機能モデル」 ができるようなプロトタイプ環境を作りたい

6

13年7月9日火曜日

Page 7: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

本研究開発のアプローチUIをデザインすることと機能をモデリングすることを共同デザインとして捉える

UIデザイナと形式手法技術者の間の「対話」のデザイン

プロトタイピング環境構築に必要なライブラリの実装

UIプロトタイピング環境の構築

7

13年7月9日火曜日

Page 8: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

LIVE

8

13年7月9日火曜日

Page 9: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

合意形成のためのプロトタイピング• プロトタイプの定義とビュー双方について

o 仮説的状況を実現して試行できることo 何が起こっているのか理解できることo 手に取って指し示して議論できること

そこでo プロトタイプを定義する記述環境o プロトタイプを使う実行環境

を同一にする = ライブプロトタイピング環境9

13年7月9日火曜日

Page 10: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

SOMETHINGit

10

13年7月9日火曜日

Page 11: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

SOMETHINGit

• Smalltalk (Squeak/Pharo) 上のライブラリo 外部インタプリタを呼び出す

§ VDM-SL (VDMJ)§ Haskell (GHCi)

• ライブプロトタイピングを指向o VDM-SLでの

Smalltalk流のライブなプロトタイピングを可能にする

11

13年7月9日火曜日

Page 12: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

SOMETHINGitによるSmalltalk流プログラミング環境の実現• 情報隠蔽を破るバックドア• 実行時改変と継続実行• 自由度の高いFFI

12

13年7月9日火曜日

Page 13: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

Backdoors

13

13年7月9日火曜日

Page 14: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

情報隠蔽を破るバックドアVDM-SLモジュールのstate内の変数はprivate

• 外部から値を読んだり書き込むためにはoperationを通す必要がある

• そこでstate内の全変数に一括して読み書きするpublicなアクセサを自動生成するo settero getter

14

13年7月9日火曜日

Page 15: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

安全なバックドア

VDM-SL仕様中ではバックドアを利用できない

1.バックドア無しの仕様をVDMJにロードする2.コンパイルエラーが発生しなければ

a. バックドアを自動生成しb. バックドア付きの仕様を再ロードする

15

13年7月9日火曜日

Page 16: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

例:state変数の値を直接操作する

16

モジュールリスト 変数リスト 値

モジュールの仕様記述

13年7月9日火曜日

Page 17: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

count * 10を計算する

17

VDMの式

13年7月9日火曜日

Page 18: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

count * 10 の答えは140

18

評価結果

13年7月9日火曜日

Page 19: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

140を

19

13年7月9日火曜日

Page 20: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

140を変数countの値に設定する

20

13年7月9日火曜日

Page 21: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

変数countの値が140になる

21

13年7月9日火曜日

Page 22: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

開発環境を「保存して終了」する

22

13年7月9日火曜日

Page 23: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

一旦、開発環境を終了した後で

23

13年7月9日火曜日

Page 24: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

もう一度開発環境を開くと終了前の状態が回復する

24

値がリセットされていない

13年7月9日火曜日

Page 25: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

Liveness

25

13年7月9日火曜日

Page 26: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

ライブプログラミング実行中のプログラムのソースコードを変更したら即座にその実行に反映されるプログラミング= 脱 Edit-Compile-Run サイクル

26

13年7月9日火曜日

Page 27: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

例:プロトタイプ実行中の仕様変更

27

13年7月9日火曜日

Page 28: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

state変数としてgoal : intを追加

28

変数goalを追加初期化を追加

13年7月9日火曜日

Page 29: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

変数goalを追加しても元の変数の値は維持されている

29

リセットされていない変数 goal が

追加されている

13年7月9日火曜日

Page 30: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

変数goalの値はinitの定義通り0

30

初期化されている

13年7月9日火曜日

Page 31: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

変数goalを削除しても変数countの値は維持される

31

リセットされていない

13年7月9日火曜日

Page 32: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

実行時改変と継続実行のしくみ1.バックドアを使って全モジュールのstateを読み出す

2.変更後の仕様をロードする3.変更後の仕様のバックドアを生成する4.バックドア付きの仕様をロードする5.バックドアを使って、全モジュールのstateに書き込む

32

13年7月9日火曜日

Page 33: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

Expression-basedForeign Function Interface

33

13年7月9日火曜日

Page 34: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

自由度の高い言語間インターフェイス通常の言語間インターフェイス(FFI)• 関数名、引数の数と型、返り値の型を前もって公開する

SOMETHINGitの表現式ベースのFFI• 外部DSLとして任意の表現式を埋め込むことが可能• ホスト言語側でゲスト言語の表現式を合成することで、単なる関数呼び出し以上の表現が可能

34

13年7月9日火曜日

Page 35: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

例:関数double

functionsdouble : int -> intdouble(x) == x * 2

引数の2倍を返す関数

35

13年7月9日火曜日

Page 36: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

例:double(10)をSmalltalkで評価する

36

VDM仕様

VDM関数をSmalltalkクロージャとして呼び出す

10 * 2 = 20

13年7月9日火曜日

Page 37: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

例:Smalltalkのクロージャとしての  VDM double関数

37

Smalltalkのクロージャ

 VDM関数

VDM仕様

13年7月9日火曜日

Page 38: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

応用:ライブUIプロトタイピング環境   Lively Walk-Through

38

UIのスケッチ画像

GUI部品

VDM仕様

合意事項の記述

イベントログ

スケッチングツール

13年7月9日火曜日

Page 39: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

Conclusion

39

13年7月9日火曜日

Page 40: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

まとめ

• 軽量形式手法とUIデザイン

• UIデザイナと形式仕様技術者の対話としてのライブUIプロトタイピング

• VDM-SLでライブプログラミング§ 情報隠蔽を破るバックドア§ 実行時改変と継続実行§ 自由度の高いFFI 40

13年7月9日火曜日

Page 41: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

今後の課題• さらに

o 生き生きとしたo 技術者やデザイナの間で会話が進むo 多様なUI形態のデザインに使える(タッチデバイス、ウェブUI、Kinect等)

o 使っていて楽しい環境をめざします

41

13年7月9日火曜日

Page 42: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit

Thank you.

42

13年7月9日火曜日