Submit Search
ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
3 likes
1,324 views
Tomohiro Oda
SS2013@岐阜
Technology
Read more
1 of 42
Download now
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
More Related Content
PDF
IoTとUXデザイン
Hiroki Hosaka
PDF
Developers Summit 2013【15-E-3】モバイルファースト再考(Rethinking Mobile First)
Nobuya Sato
PDF
ABC2014 Winter: Material Design
Nobuya Sato
PDF
ABC2014 Spring: UI/UX Design Trends 2014
Nobuya Sato
PPTX
パッションがとっても大切だった話
Mutsumi Okano
PDF
マンガボックスのアプリができるまで
tomo tsubota
PDF
Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意
Nobuya Sato
KEY
テックヒルズ
tomo tsubota
IoTとUXデザイン
Hiroki Hosaka
Developers Summit 2013【15-E-3】モバイルファースト再考(Rethinking Mobile First)
Nobuya Sato
ABC2014 Winter: Material Design
Nobuya Sato
ABC2014 Spring: UI/UX Design Trends 2014
Nobuya Sato
パッションがとっても大切だった話
Mutsumi Okano
マンガボックスのアプリができるまで
tomo tsubota
Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意
Nobuya Sato
テックヒルズ
tomo tsubota
What's hot
(20)
PPTX
UX actually is all around us. - UXを感じよう -
Akihiro Mukai
PDF
アプリ時代はデザイナーとエンジニア! 一方その頃ディレクターって?
Takahiro YAMAGUCHI
PPTX
Uno Platform か Blazor
Hiroyuki Mori
PDF
キーボードアプリとSketchのススメ
Yuichi Yoshida
PDF
デザイナーとエンジニアが話す、iOSアプリケーション開発
Kenta Ohsugi
PDF
はじめてのUXとUIの話
Kazuki Yamashita
PDF
UIの話は会議室でするな
Shingo Katsushima
PDF
ユーザーの心に刺ささるためには - UX実践編 -
Midori Hirose
PPTX
Sketch 3 を使って、コンテンツの魅力を 最大限に活かしたUIを作ろう
Naoki Masuda
PDF
モックアップ共有のススメ
Kazuyoshi Goto
PDF
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
theguild
PDF
BotFramework と LUIS を使ったアプリの開発
Atsushi Yokohama (BEACHSIDE)
PPTX
オープンセミナー2020@広島 懇親会LT
株式会社ビットゼミ
PPTX
リモートワークで10kgダイエットした話
Masaki Suzuki
PDF
Xcodeとstoryboardのすごさを思い知る、ソースコードを書かないプログラミング
Kazuki Sato
PPTX
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
Hiroyuki Arai
PDF
モバイルUIプログラミング(3/9プロ生勉強会LT)
Satoshi Watanabe
PDF
【試⾏錯誤】スマホデザインプロセス のHoloLensへの適⽤
So-hei Hatakeyama
PDF
Prottとsketchとzeplinのススメ
Asami Yamamoto
PDF
Sketchで変わるワークフロー
Asami Yamamoto
UX actually is all around us. - UXを感じよう -
Akihiro Mukai
アプリ時代はデザイナーとエンジニア! 一方その頃ディレクターって?
Takahiro YAMAGUCHI
Uno Platform か Blazor
Hiroyuki Mori
キーボードアプリとSketchのススメ
Yuichi Yoshida
デザイナーとエンジニアが話す、iOSアプリケーション開発
Kenta Ohsugi
はじめてのUXとUIの話
Kazuki Yamashita
UIの話は会議室でするな
Shingo Katsushima
ユーザーの心に刺ささるためには - UX実践編 -
Midori Hirose
Sketch 3 を使って、コンテンツの魅力を 最大限に活かしたUIを作ろう
Naoki Masuda
モックアップ共有のススメ
Kazuyoshi Goto
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
theguild
BotFramework と LUIS を使ったアプリの開発
Atsushi Yokohama (BEACHSIDE)
オープンセミナー2020@広島 懇親会LT
株式会社ビットゼミ
リモートワークで10kgダイエットした話
Masaki Suzuki
Xcodeとstoryboardのすごさを思い知る、ソースコードを書かないプログラミング
Kazuki Sato
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
Hiroyuki Arai
モバイルUIプログラミング(3/9プロ生勉強会LT)
Satoshi Watanabe
【試⾏錯誤】スマホデザインプロセス のHoloLensへの適⽤
So-hei Hatakeyama
Prottとsketchとzeplinのススメ
Asami Yamamoto
Sketchで変わるワークフロー
Asami Yamamoto
Ad
Viewers also liked
(15)
PPTX
Scala.jsはじめました!
K Kinzal
PDF
Groovyの営業マン
orange clover
PDF
あなたがSchemeを使うべき10の理由
yadokari electric
PPTX
なにが?どうなる?WebGL
rch850 -
PDF
Rubyist started to learn Groovy - things important to leran new LL
Uchio Kondo
PDF
Symbol GC
Narihiro Nakamura
PPTX
ご注文はライブラリですか?
orekyuu
PDF
HTML5 Conference 2015 WebGLハンズオン資料
Kazuya Hiruma
PPTX
開発現場で使えるかもしれないGroovy
zgmf_mbfp03
PDF
CSS3Rendererを使ってiOSでもサクサク3D
AdvancedTechNight
KEY
恐るべきApache, Web勉強会@福岡
Aya Komuro
PDF
桐島、Rubyやめるってよ
Narihiro Nakamura
PPTX
Rubyからscalaに変えるべき15の理由
Yukishige Nakajo
PDF
D3.jsと学ぶVisualization(可視化)の世界
AdvancedTechNight
PDF
Scala.js触ってみた
Asami Abe
Scala.jsはじめました!
K Kinzal
Groovyの営業マン
orange clover
あなたがSchemeを使うべき10の理由
yadokari electric
なにが?どうなる?WebGL
rch850 -
Rubyist started to learn Groovy - things important to leran new LL
Uchio Kondo
Symbol GC
Narihiro Nakamura
ご注文はライブラリですか?
orekyuu
HTML5 Conference 2015 WebGLハンズオン資料
Kazuya Hiruma
開発現場で使えるかもしれないGroovy
zgmf_mbfp03
CSS3Rendererを使ってiOSでもサクサク3D
AdvancedTechNight
恐るべきApache, Web勉強会@福岡
Aya Komuro
桐島、Rubyやめるってよ
Narihiro Nakamura
Rubyからscalaに変えるべき15の理由
Yukishige Nakajo
D3.jsと学ぶVisualization(可視化)の世界
AdvancedTechNight
Scala.js触ってみた
Asami Abe
Ad
Similar to ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
(20)
PDF
Jumvo 2.0 における デザイナーとエンジニアの連携
Norihisa Nagano
PDF
ソフトウェアUI妥当性確認の形式化に向けて
Shuji Kinoshita
PDF
[UX]は投げ捨てろ!
c-mitsuba
KEY
Android開発者とデザイナーの効率的な連携について
lychee .
PDF
Indigo Studio で作るプロトタイプ
インフラジスティックス・ジャパン株式会社
PDF
スマホアプリの"手触り"や"美的センス"について~WebSig会議 vol.33:1stセッション
WebSig24/7
PPTX
もっとサーバーレスを手軽に便利に!Azure Logic Apps
典子 松本
PDF
機能はちゃんと試してからリリースしようねという話
Yu Morita
PPTX
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
典子 松本
PPTX
Web制作に便利な機能いろいろ!Microsoft Azureの概要
典子 松本
PDF
The Mobile Frontier at HTML5 Conference 2013/11/30
Yukio Andoh
PDF
第6回.NET中心会議パネルディスカッション 0923
Hub DotnetDeveloper
PDF
UIも大事だよ。という話。@Opt Group Tech Day
Tetsuya Takeda
PPTX
世界を変えるクラウドサインの取り組み
Yoshinori OHTA
PDF
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
Satoru Yamaguchi
PDF
UIデザインのプロセス
Junichi Suzuki
PDF
今更はじめるQuartz Composer
祐磨 堀
PPTX
UI/UXデザインでサイトを改善しよう
Kentaro Ohkouchi
PDF
コントロールベンダー視点での Command line interface (CLI)
Daizen Ikehara
PPTX
Grareco ws 150620
masashi tsuzaki
Jumvo 2.0 における デザイナーとエンジニアの連携
Norihisa Nagano
ソフトウェアUI妥当性確認の形式化に向けて
Shuji Kinoshita
[UX]は投げ捨てろ!
c-mitsuba
Android開発者とデザイナーの効率的な連携について
lychee .
Indigo Studio で作るプロトタイプ
インフラジスティックス・ジャパン株式会社
スマホアプリの"手触り"や"美的センス"について~WebSig会議 vol.33:1stセッション
WebSig24/7
もっとサーバーレスを手軽に便利に!Azure Logic Apps
典子 松本
機能はちゃんと試してからリリースしようねという話
Yu Morita
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
典子 松本
Web制作に便利な機能いろいろ!Microsoft Azureの概要
典子 松本
The Mobile Frontier at HTML5 Conference 2013/11/30
Yukio Andoh
第6回.NET中心会議パネルディスカッション 0923
Hub DotnetDeveloper
UIも大事だよ。という話。@Opt Group Tech Day
Tetsuya Takeda
世界を変えるクラウドサインの取り組み
Yoshinori OHTA
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
Satoru Yamaguchi
UIデザインのプロセス
Junichi Suzuki
今更はじめるQuartz Composer
祐磨 堀
UI/UXデザインでサイトを改善しよう
Kentaro Ohkouchi
コントロールベンダー視点での Command line interface (CLI)
Daizen Ikehara
Grareco ws 150620
masashi tsuzaki
ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
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 引数の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日火曜日
Download