SS2013@岐阜

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

2. UI design
Lightweight Formal Method
2
13年7月9日火曜日

3. 動機
• 軽量形式手法をより多くの人が手軽に使える
環境を作りたい
o 例えば、UIデザイナ
3
13年7月9日火曜日

4. 軽量形式手法とUIデザイン
それぞれのプロトタイピングの特徴
UIスケッチ
• 具体性
• ニュアンス
実行可能仕様
• 実行可能性
• 厳密性
4
13年7月9日火曜日

5. 軽量形式手法＋UIプロトタイピング
UIデザイナ 形式手法技術者
実行可能な
UIプロトタイプ
デザインデシジ
ョンの合意
5
13年7月9日火曜日

6. めざすところ
• 「機能モデル的に実現可能なUIデザイン」
かつ、
「適切なUIを構築可能な機能モデル」
ができるようなプロトタイプ環境を作りたい
6
13年7月9日火曜日

7. 本研究開発のアプローチ
UIをデザインすることと機能をモデリングすることを
共同デザインとして捉える
UIデザイナと形式手法技術者の間の「対話」のデザイン
プロトタイピング環境構築に必要な
ライブラリの実装
UIプロトタイピング環境の構築
7
13年7月9日火曜日

8. LIVE
8
13年7月9日火曜日

9. 合意形成のためのプロトタイピング
• プロトタイプの定義とビュー双方について
o 仮説的状況を実現して試行できること
o 何が起こっているのか理解できること
o 手に取って指し示して議論できること
そこで
o プロトタイプを定義する記述環境
o プロトタイプを使う実行環境
を同一にする ＝ ライブプロトタイピング環境
9
13年7月9日火曜日

10. SOMETHINGit
10
13年7月9日火曜日

11. SOMETHINGit
• Smalltalk (Squeak/Pharo) 上のライブラリ
o 外部インタプリタを呼び出す
§ VDM-SL (VDMJ)
§ Haskell (GHCi)
• ライブプロトタイピングを指向
o VDM-SLでの
Smalltalk流のライブな
プロトタイピングを可能にする
11
13年7月9日火曜日

12. SOMETHINGitによる
Smalltalk流プログラミング環境の実現
• 情報隠 を破るバックドア
• 実行時改変と継続実行
• 自由度の高いFFI
12
13年7月9日火曜日

13. Backdoors
13
13年7月9日火曜日

14. 情報隠 を破るバックドア
VDM-SLモジュールのstate内の変数はprivate
• 外部から値を読んだり書き込むためには
operationを通す必要がある
• そこでstate内の全変数に一括して読み書
きするpublicなアクセサを自動生成する
o setter
o getter
14
13年7月9日火曜日

15. 安全なバックドア
VDM-SL仕様中ではバックドアを利用できない
1. バックドア無しの仕様をVDMJにロードする
2. コンパイルエラーが発生しなければ
a. バックドアを自動生成し
b. バックドア付きの仕様を再ロードする
15
13年7月9日火曜日

16. 例：state変数の値を直接操作する
16
モジュールリスト 変数リスト 値
モジュールの
仕様記述
13年7月9日火曜日

17. count * 10を計算する
17
VDMの式
13年7月9日火曜日

18. count * 10 の答えは140
18
評価結果
13年7月9日火曜日

19. 140を
19
13年7月9日火曜日

20. 140を変数countの値に設定する
20
13年7月9日火曜日

21. 変数countの値が140になる
21
13年7月9日火曜日

22. 開発環境を「保存して終了」する
22
13年7月9日火曜日

23. 一旦、開発環境を終了した後で
23
13年7月9日火曜日

24. もう一度開発環境を開くと
終了前の状態が回復する
24
値がリセット
されていない
13年7月9日火曜日

25. Liveness
25
13年7月9日火曜日

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

27. 例：プロトタイプ実行中の仕様変更
27
13年7月9日火曜日

28. state変数としてgoal : intを追加
28
変数goalを追加
初期化を追加
13年7月9日火曜日

29. 変数goalを追加しても
元の変数の値は維持されている
29
リセット
されていない変数 goal が
追加されている
13年7月9日火曜日

30. 変数goalの値はinitの定義通り0
30
初期化
されている
13年7月9日火曜日

31. 変数goalを削除しても
変数countの値は維持される
31
リセット
されていない
13年7月9日火曜日

32. 実行時改変と継続実行のしくみ
1. バックドアを使って全モジュールのstateを
読み出す
2. 変更後の仕様をロードする
3. 変更後の仕様のバックドアを生成する
4. バックドア付きの仕様をロードする
5. バックドアを使って、全モジュールのstate
に書き込む
32
13年7月9日火曜日

33. Expression-based
Foreign Function Interface
33
13年7月9日火曜日

34. 自由度の高い言語間インターフェイス
通常の言語間インターフェイス(FFI)
• 関数名、引数の数と型、返り値の型
を前もって公開する
SOMETHINGitの表現式ベースのFFI
• 外部DSLとして任意の表現式を埋め込むことが可能
• ホスト言語側でゲスト言語の表現式を合成すること
で、単なる関数呼び出し以上の表現が可能
34
13年7月9日火曜日

35. 例：関数double
functions
double : int -> int
double(x) == x * 2
引数の２倍を返す関数
35
13年7月9日火曜日

36. 例：double(10)をSmalltalkで評価する
36
VDM仕様
VDM関数を
Smalltalkクロージャとして
呼び出す
10 * 2 = 20
13年7月9日火曜日

37. 例：Smalltalkのクロージャとしての
VDM double関数
37
Smalltalkの
クロージャ
VDM関数
VDM仕様
13年7月9日火曜日

38. 応用：ライブUIプロトタイピング環境
Lively Walk-Through
38
UIの
スケッチ画像
GUI部品
VDM仕様
合意事項
の記述
イベントログ
スケッチング
ツール
13年7月9日火曜日

39. Conclusion
39
13年7月9日火曜日

40. まとめ
• 軽量形式手法とUIデザイン
• UIデザイナと形式仕様技術者の対話としての
ライブUIプロトタイピング
• VDM-SLでライブプログラミング
§ 情報隠 を破るバックドア
§ 実行時改変と継続実行
§ 自由度の高いFFI 40
13年7月9日火曜日

41. 今後の課題
• さらに
o 生き生きとした
o 技術者やデザイナの間で会話が進む
o 多様なUI形態のデザインに使える
（タッチデバイス、ウェブUI、Kinect等）
o 使っていて楽しい
環境をめざします
41
13年7月9日火曜日

42. Thank you.
42
13年7月9日火曜日