『2020ライブ・エンタテインメント白書』サマリー - PIA...Title 『2020ライブ・エンタテインメント白書』サマリー Created Date 9/4/2020 3:34:20
ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
-
Upload
tomohiro-oda -
Category
Technology
-
view
766 -
download
8
description
Transcript of ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
![Page 1: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/1.jpg)
ライブ UI プロトタイピングに向けたマルチ言語環境 SOMETHINGit
小田朋宏 (株)SRA中小路久美代 (株)SRA山本恭裕 東京工業大学
1
13年7月9日火曜日
![Page 2: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/2.jpg)
UI designLightweight Formal Method
2
13年7月9日火曜日
![Page 3: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/3.jpg)
動機
• 軽量形式手法をより多くの人が手軽に使える環境を作りたいo 例えば、UIデザイナ
3
13年7月9日火曜日
![Page 4: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/4.jpg)
軽量形式手法とUIデザインそれぞれのプロトタイピングの特徴
UIスケッチ• 具体性• ニュアンス
実行可能仕様• 実行可能性• 厳密性
4
13年7月9日火曜日
![Page 5: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/5.jpg)
軽量形式手法+UIプロトタイピング
UIデザイナ 形式手法技術者
実行可能なUIプロトタイプデザインデシジョンの合意
5
13年7月9日火曜日
![Page 6: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/6.jpg)
めざすところ
• 「機能モデル的に実現可能なUIデザイン」 かつ、「適切なUIを構築可能な機能モデル」 ができるようなプロトタイプ環境を作りたい
6
13年7月9日火曜日
![Page 7: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/7.jpg)
本研究開発のアプローチUIをデザインすることと機能をモデリングすることを共同デザインとして捉える
UIデザイナと形式手法技術者の間の「対話」のデザイン
プロトタイピング環境構築に必要なライブラリの実装
UIプロトタイピング環境の構築
7
13年7月9日火曜日
![Page 8: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/8.jpg)
LIVE
8
13年7月9日火曜日
![Page 9: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/9.jpg)
合意形成のためのプロトタイピング• プロトタイプの定義とビュー双方について
o 仮説的状況を実現して試行できることo 何が起こっているのか理解できることo 手に取って指し示して議論できること
そこでo プロトタイプを定義する記述環境o プロトタイプを使う実行環境
を同一にする = ライブプロトタイピング環境9
13年7月9日火曜日
![Page 10: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/10.jpg)
SOMETHINGit
10
13年7月9日火曜日
![Page 11: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/11.jpg)
SOMETHINGit
• Smalltalk (Squeak/Pharo) 上のライブラリo 外部インタプリタを呼び出す
§ VDM-SL (VDMJ)§ Haskell (GHCi)
• ライブプロトタイピングを指向o VDM-SLでの
Smalltalk流のライブなプロトタイピングを可能にする
11
13年7月9日火曜日
![Page 12: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/12.jpg)
SOMETHINGitによるSmalltalk流プログラミング環境の実現• 情報隠蔽を破るバックドア• 実行時改変と継続実行• 自由度の高いFFI
12
13年7月9日火曜日
![Page 13: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/13.jpg)
Backdoors
13
13年7月9日火曜日
![Page 14: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/14.jpg)
情報隠蔽を破るバックドアVDM-SLモジュールのstate内の変数はprivate
• 外部から値を読んだり書き込むためにはoperationを通す必要がある
• そこでstate内の全変数に一括して読み書きするpublicなアクセサを自動生成するo settero getter
14
13年7月9日火曜日
![Page 15: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/15.jpg)
安全なバックドア
VDM-SL仕様中ではバックドアを利用できない
1.バックドア無しの仕様をVDMJにロードする2.コンパイルエラーが発生しなければ
a. バックドアを自動生成しb. バックドア付きの仕様を再ロードする
15
13年7月9日火曜日
![Page 16: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/16.jpg)
例:state変数の値を直接操作する
16
モジュールリスト 変数リスト 値
モジュールの仕様記述
13年7月9日火曜日
![Page 17: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/17.jpg)
count * 10を計算する
17
VDMの式
13年7月9日火曜日
![Page 18: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/18.jpg)
count * 10 の答えは140
18
評価結果
13年7月9日火曜日
![Page 19: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/19.jpg)
140を
19
13年7月9日火曜日
![Page 20: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/20.jpg)
140を変数countの値に設定する
20
13年7月9日火曜日
![Page 21: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/21.jpg)
変数countの値が140になる
21
13年7月9日火曜日
![Page 22: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/22.jpg)
開発環境を「保存して終了」する
22
13年7月9日火曜日
![Page 23: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/23.jpg)
一旦、開発環境を終了した後で
23
13年7月9日火曜日
![Page 24: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/24.jpg)
もう一度開発環境を開くと終了前の状態が回復する
24
値がリセットされていない
13年7月9日火曜日
![Page 25: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/25.jpg)
Liveness
25
13年7月9日火曜日
![Page 26: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/26.jpg)
ライブプログラミング実行中のプログラムのソースコードを変更したら即座にその実行に反映されるプログラミング= 脱 Edit-Compile-Run サイクル
26
13年7月9日火曜日
![Page 27: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/27.jpg)
例:プロトタイプ実行中の仕様変更
27
13年7月9日火曜日
![Page 28: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/28.jpg)
state変数としてgoal : intを追加
28
変数goalを追加初期化を追加
13年7月9日火曜日
![Page 29: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/29.jpg)
変数goalを追加しても元の変数の値は維持されている
29
リセットされていない変数 goal が
追加されている
13年7月9日火曜日
![Page 30: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/30.jpg)
変数goalの値はinitの定義通り0
30
初期化されている
13年7月9日火曜日
![Page 31: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/31.jpg)
変数goalを削除しても変数countの値は維持される
31
リセットされていない
13年7月9日火曜日
![Page 32: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/32.jpg)
実行時改変と継続実行のしくみ1.バックドアを使って全モジュールのstateを読み出す
2.変更後の仕様をロードする3.変更後の仕様のバックドアを生成する4.バックドア付きの仕様をロードする5.バックドアを使って、全モジュールのstateに書き込む
32
13年7月9日火曜日
![Page 33: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/33.jpg)
Expression-basedForeign Function Interface
33
13年7月9日火曜日
![Page 34: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/34.jpg)
自由度の高い言語間インターフェイス通常の言語間インターフェイス(FFI)• 関数名、引数の数と型、返り値の型を前もって公開する
SOMETHINGitの表現式ベースのFFI• 外部DSLとして任意の表現式を埋め込むことが可能• ホスト言語側でゲスト言語の表現式を合成することで、単なる関数呼び出し以上の表現が可能
34
13年7月9日火曜日
![Page 35: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/35.jpg)
例:関数double
functionsdouble : int -> intdouble(x) == x * 2
引数の2倍を返す関数
35
13年7月9日火曜日
![Page 36: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/36.jpg)
例:double(10)をSmalltalkで評価する
36
VDM仕様
VDM関数をSmalltalkクロージャとして呼び出す
10 * 2 = 20
13年7月9日火曜日
![Page 37: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/37.jpg)
例:Smalltalkのクロージャとしての VDM double関数
37
Smalltalkのクロージャ
VDM関数
VDM仕様
13年7月9日火曜日
![Page 38: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/38.jpg)
応用:ライブUIプロトタイピング環境 Lively Walk-Through
38
UIのスケッチ画像
GUI部品
VDM仕様
合意事項の記述
イベントログ
スケッチングツール
13年7月9日火曜日
![Page 39: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/39.jpg)
Conclusion
39
13年7月9日火曜日
![Page 40: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/40.jpg)
まとめ
• 軽量形式手法とUIデザイン
• UIデザイナと形式仕様技術者の対話としてのライブUIプロトタイピング
• VDM-SLでライブプログラミング§ 情報隠蔽を破るバックドア§ 実行時改変と継続実行§ 自由度の高いFFI 40
13年7月9日火曜日
![Page 41: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/41.jpg)
今後の課題• さらに
o 生き生きとしたo 技術者やデザイナの間で会話が進むo 多様なUI形態のデザインに使える(タッチデバイス、ウェブUI、Kinect等)
o 使っていて楽しい環境をめざします
41
13年7月9日火曜日
![Page 42: ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit](https://reader034.fdocuments.net/reader034/viewer/2022052223/559ae4161a28ab87798b46b1/html5/thumbnails/42.jpg)
Thank you.
42
13年7月9日火曜日