【論文紹介】Sketch-n-Sketch: Output-Directed Programming for SVG

Sketch-n-Sketch: Output-Directed Programming for SVG 演習 III 論文紹介杉本海人
2020/04/20 1 / 23

1 概要 2 背景‧先行研究 3 この研究のポイント 4 議論 2 /
23

23

概要ベクター画像1を生成するプログラムを書くためのシステム Sketch-n-Sketch に, 新しい技術を取り入れた. 1点や直線などの幾何学的な図形で構成される画像 4 / 23

デモ https://www.youtube.com/watch?v=ilwdnnAT2F0 5 / 23

23

背景 GUI: 人の目で分かりやすい ↕ CUI: 柔軟性が高いプログラマは GUI アプリケーションを使わずテキストベースでプログラムを書くことが多い.
GUI のメリットも取り入れてプログラミングができれば, より便利で魅力的になるのではないか. 7 / 23

背景 Output-Directed Programming (ODP) プログラムの出力結果自体をマウスなどで操作することで, プログラムを組み立てる手法 • 初心者にとって分かりやすいものに. •
経験者にとっても, プログラミングでより多くのことができるように. ODP 自体は, 今回の論文に限らず, 数多くの先行研究がある. 8 / 23

先行研究 Kevin Kwok and Guillermo Webster. 2016. Carbide Alpha https://alpha.trycarbide.com/
9 / 23

先行研究 Ravi Chugh, Brian Hempel, Mitchell Spradlin, and Jacob Albers.
2016. Programmatic and Direct Manipulation, Together at Last. （Sketch-n-Sketch の初期バージョン） 10 / 23

23

この研究のポイント Sketch-n-Sketch に, 以下のシステムを新たに取り入れた. 1. 中間的な値の表示 2. フォーカス 3. リファクタリング
4. Provenance Tracing 12 / 23

中間的な値の表示出力に直接関係しない部分（点やオフセット）であっても, 表示して操作できるようにすると利便性が高まる 13 / 23

フォーカスプログラムの特定の部分の修正に役立つ 14 / 23

フォーカスプログラムの特定の部分の修正に役立つ 15 / 23

リファクタリング • 関数名の変更 • 関数のパラメータの順序の変更 • 関数のパラメータの削除などを, 後からできる 16
/ 23

Provenance Tracing プログラムの各部分がどこから来たかを記録し, 出力がソースコードのどの部分に相当するのかを常に対応づける先ほど述べた「関数のパラメータの順序の変更」のような複雑なリファクタリングを ODP で実現する上で必要. 17 /
23

どんなメリットが...？ 1. 中間的な値の表示 2. フォーカス 3. リファクタリング 4. Provenance Tracing
いずれも, ベクター画像の表現能力を高めるという目的だけにとどまらず, 今後 ODP をあらゆる種のプログラミングに適用していく上でも重要. 18 / 23

実例出力側の操作だけで, 以下の画像を作成できた. 19 / 23

23

画像作成の面での課題 Watch What I Do: Programming by Demonstration という本に挙げられた
15 の画像生成タスクのうち, 出力側の操作のみで完了できたのは 4 つ, 入力側（エディタ）の助けも借りて完了できたのは 2 つだった. 残りの 9 つを完了させるのに足りない機能 • テキストボックス • リスト操作 • 線の交点の操作 etc... 21 / 23

Widget Visibility ボタンやパネルが多い！ → GUI の利便性が損なわれるどの Widget を出すかなど, 画面の表示もシステムでコントロールでき
るようになると便利. 22 / 23

ODP for Novices 初学者でも, 初歩的なプログラムをすぐに習得できるようなシステムにするにはどうすればいいのか. 23 / 23

【論文紹介】Sketch-n-Sketch: Output-Directed Programm...

【論文紹介】Sketch-n-Sketch: Output-Directed Programming for SVG

Kaito Sugimoto

More Decks by Kaito Sugimoto

Other Decks in Research

Featured

Transcript

Sketch-n-Sketch: Output-Directed Programming for SVG 演習 III 論文紹介杉本海人

1 概要 2 背景‧先行研究 3 この研究のポイント 4 議論 2 /

1 概要 2 背景‧先行研究 3 この研究のポイント 4 議論 3 /

概要ベクター画像1を生成するプログラムを書くためのシステム Sketch-n-Sketch に, 新しい技術を取り入れた. 1点や直線などの幾何学的な図形で構成される画像 4 / 23

デモ https://www.youtube.com/watch?v=ilwdnnAT2F0 5 / 23

1 概要 2 背景‧先行研究 3 この研究のポイント 4 議論 6 /

背景 GUI: 人の目で分かりやすい ↕ CUI: 柔軟性が高いプログラマは GUI アプリケーションを使わずテキストベースでプログラムを書くことが多い.

背景 Output-Directed Programming (ODP) プログラムの出力結果自体をマウスなどで操作することで, プログラムを組み立てる手法 • 初心者にとって分かりやすいものに. •

先行研究 Kevin Kwok and Guillermo Webster. 2016. Carbide Alpha https://alpha.trycarbide.com/

先行研究 Ravi Chugh, Brian Hempel, Mitchell Spradlin, and Jacob Albers.

1 概要 2 背景‧先行研究 3 この研究のポイント 4 議論 11 /

この研究のポイント Sketch-n-Sketch に, 以下のシステムを新たに取り入れた. 1. 中間的な値の表示 2. フォーカス 3. リファクタリング

中間的な値の表示出力に直接関係しない部分（点やオフセット）であっても, 表示して操作できるようにすると利便性が高まる 13 / 23

フォーカスプログラムの特定の部分の修正に役立つ 14 / 23

フォーカスプログラムの特定の部分の修正に役立つ 15 / 23

リファクタリング • 関数名の変更 • 関数のパラメータの順序の変更 • 関数のパラメータの削除などを, 後からできる 16

どんなメリットが...？ 1. 中間的な値の表示 2. フォーカス 3. リファクタリング 4. Provenance Tracing

実例出力側の操作だけで, 以下の画像を作成できた. 19 / 23

1 概要 2 背景‧先行研究 3 この研究のポイント 4 議論 20 /

画像作成の面での課題 Watch What I Do: Programming by Demonstration という本に挙げられた

Widget Visibility ボタンやパネルが多い！ → GUI の利便性が損なわれるどの Widget を出すかなど, 画面の表示もシステムでコントロールでき

ODP for Novices 初学者でも, 初歩的なプログラムをすぐに習得できるようなシステムにするにはどうすればいいのか. 23 / 23