$30 off During Our Annual Pro Sale. View Details »

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

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

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

Kaito Sugimoto

April 20, 2020
Tweet

More Decks by Kaito Sugimoto

Other Decks in Research

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