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

More Related Content

PDF
IoTとUXデザイン
PDF
Developers Summit 2013【15-E-3】モバイルファースト再考(Rethinking Mobile First)
PDF
ABC2014 Winter: Material Design
PDF
ABC2014 Spring: UI/UX Design Trends 2014
PPTX
パッションがとっても大切だった話
PDF
マンガボックスのアプリができるまで
PDF
Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意
KEY
テックヒルズ
IoTとUXデザイン
Developers Summit 2013【15-E-3】モバイルファースト再考(Rethinking Mobile First)
ABC2014 Winter: Material Design
ABC2014 Spring: UI/UX Design Trends 2014
パッションがとっても大切だった話
マンガボックスのアプリができるまで
Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意
テックヒルズ

What's hot (20)

PPTX
UX actually is all around us. - UXを感じよう -
PDF
アプリ時代はデザイナーとエンジニア! 一方その頃ディレクターって?
PPTX
Uno Platform か Blazor
PDF
キーボードアプリとSketchのススメ
PDF
デザイナーとエンジニアが話す、iOSアプリケーション開発
PDF
はじめてのUXとUIの話
PDF
UIの話は会議室でするな
PDF
ユーザーの心に刺ささるためには - UX実践編 -
PPTX
Sketch 3 を使って、コンテンツの魅力を 最大限に活かしたUIを作ろう
PDF
モックアップ共有のススメ
PDF
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
PDF
BotFramework と LUIS を使ったアプリの開発
PPTX
オープンセミナー2020@広島 懇親会LT
PPTX
リモートワークで10kgダイエットした話
PDF
Xcodeとstoryboardのすごさを思い知る、ソースコードを書かないプログラミング
PPTX
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
PDF
モバイルUIプログラミング(3/9プロ生勉強会LT)
PDF
【試⾏錯誤】スマホデザインプロセス のHoloLensへの適⽤
PDF
Prottとsketchとzeplinのススメ
PDF
Sketchで変わるワークフロー
UX actually is all around us. - UXを感じよう -
アプリ時代はデザイナーとエンジニア! 一方その頃ディレクターって?
Uno Platform か Blazor
キーボードアプリとSketchのススメ
デザイナーとエンジニアが話す、iOSアプリケーション開発
はじめてのUXとUIの話
UIの話は会議室でするな
ユーザーの心に刺ささるためには - UX実践編 -
Sketch 3 を使って、コンテンツの魅力を 最大限に活かしたUIを作ろう
モックアップ共有のススメ
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
BotFramework と LUIS を使ったアプリの開発
オープンセミナー2020@広島 懇親会LT
リモートワークで10kgダイエットした話
Xcodeとstoryboardのすごさを思い知る、ソースコードを書かないプログラミング
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
モバイルUIプログラミング(3/9プロ生勉強会LT)
【試⾏錯誤】スマホデザインプロセス のHoloLensへの適⽤
Prottとsketchとzeplinのススメ
Sketchで変わるワークフロー
Ad

Viewers also liked (15)

PPTX
Scala.jsはじめました!
PDF
Groovyの営業マン
PDF
あなたがSchemeを使うべき10の理由
PPTX
なにが?どうなる?WebGL
PDF
Rubyist started to learn Groovy - things important to leran new LL
PDF
PPTX
ご注文はライブラリですか?
PDF
HTML5 Conference 2015 WebGLハンズオン資料
PPTX
開発現場で使えるかもしれないGroovy
PDF
CSS3Rendererを使ってiOSでもサクサク3D
KEY
恐るべきApache, Web勉強会@福岡
PDF
桐島、Rubyやめるってよ
PPTX
Rubyからscalaに変えるべき15の理由
PDF
D3.jsと学ぶVisualization(可視化)の世界
PDF
Scala.js触ってみた
Scala.jsはじめました!
Groovyの営業マン
あなたがSchemeを使うべき10の理由
なにが?どうなる?WebGL
Rubyist started to learn Groovy - things important to leran new LL
ご注文はライブラリですか?
HTML5 Conference 2015 WebGLハンズオン資料
開発現場で使えるかもしれないGroovy
CSS3Rendererを使ってiOSでもサクサク3D
恐るべきApache, Web勉強会@福岡
桐島、Rubyやめるってよ
Rubyからscalaに変えるべき15の理由
D3.jsと学ぶVisualization(可視化)の世界
Scala.js触ってみた
Ad

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

PDF
Jumvo 2.0 における デザイナーとエンジニアの連携
PDF
ソフトウェアUI妥当性確認の形式化に向けて
PDF
[UX]は投げ捨てろ!
KEY
Android開発者とデザイナーの効率的な連携について
PDF
Indigo Studio で作るプロトタイプ
PDF
スマホアプリの"手触り"や"美的センス"について~WebSig会議 vol.33:1stセッション
PPTX
もっとサーバーレスを手軽に便利に!Azure Logic Apps
PDF
機能はちゃんと試してからリリースしようねという話
PPTX
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
PPTX
Web制作に便利な機能いろいろ!Microsoft Azureの概要
PDF
The Mobile Frontier at HTML5 Conference 2013/11/30
PDF
第6回.NET中心会議パネルディスカッション 0923
PDF
UIも大事だよ。という話。@Opt Group Tech Day
PPTX
世界を変えるクラウドサインの取り組み
PDF
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
PDF
UIデザインのプロセス
PDF
今更はじめるQuartz Composer
PPTX
UI/UXデザインでサイトを改善しよう
PDF
コントロールベンダー視点での Command line interface (CLI)
PPTX
Grareco ws 150620
Jumvo 2.0 における デザイナーとエンジニアの連携
ソフトウェアUI妥当性確認の形式化に向けて
[UX]は投げ捨てろ!
Android開発者とデザイナーの効率的な連携について
Indigo Studio で作るプロトタイプ
スマホアプリの"手触り"や"美的センス"について~WebSig会議 vol.33:1stセッション
もっとサーバーレスを手軽に便利に!Azure Logic Apps
機能はちゃんと試してからリリースしようねという話
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
Web制作に便利な機能いろいろ!Microsoft Azureの概要
The Mobile Frontier at HTML5 Conference 2013/11/30
第6回.NET中心会議パネルディスカッション 0923
UIも大事だよ。という話。@Opt Group Tech Day
世界を変えるクラウドサインの取り組み
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
UIデザインのプロセス
今更はじめるQuartz Composer
UI/UXデザインでサイトを改善しよう
コントロールベンダー視点での Command line interface (CLI)
Grareco ws 150620

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