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

演習 III 論文紹介
内容に問題や不備がある場合は、お手数ですが hellorusk1998 [at] gmail.com までご連絡お願いいたします。

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide