演習 III 論文紹介 内容に問題や不備がある場合は、お手数ですが hellorusk1998 [at] gmail.com までご連絡お願いいたします。
Sketch-n-Sketch: Output-DirectedProgramming for SVG演習 III 論文紹介杉本 海人2020/04/201 / 23
View Slide
1概要2背景‧先行研究3この研究のポイント4議論2 / 23
1概要2背景‧先行研究3この研究のポイント4議論3 / 23
概要ベクター画像1を生成するプログラムを書くためのシステムSketch-n-Sketch に, 新しい技術を取り入れた.1点や直線などの幾何学的な図形で構成される画像4 / 23
デモhttps://www.youtube.com/watch?v=ilwdnnAT2F05 / 23
1概要2背景‧先行研究3この研究のポイント4議論6 / 23
背景GUI: 人の目で分かりやすい↕CUI: 柔軟性が高いプログラマは GUI アプリケーションを使わずテキストベースでプログラムを書くことが多い.GUI のメリットも取り入れてプログラミングができれば, より便利で魅力的になるのではないか.7 / 23
背景Output-Directed Programming (ODP)プログラムの出力結果自体をマウスなどで操作することで, プログラムを組み立てる手法• 初心者にとって分かりやすいものに.• 経験者にとっても, プログラミングでより多くのことができるように.ODP 自体は, 今回の論文に限らず, 数多くの先行研究がある.8 / 23
先行研究Kevin Kwok and Guillermo Webster. 2016. Carbide Alphahttps://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
1概要2背景‧先行研究3この研究のポイント4議論11 / 23
この研究のポイントSketch-n-Sketch に, 以下のシステムを新たに取り入れた.1. 中間的な値の表示2. フォーカス3. リファクタリング4. Provenance Tracing12 / 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
1概要2背景‧先行研究3この研究のポイント4議論20 / 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