Programming Environments - 東京大学「ユーザインタフェース」講義資料

いいね！ 0
閲覧回数 122
ダウンロード数 0

2016年度の東京大学「ユーザインタフェース」講義で利用した発表資料です。

講義のWebページはこちら:

http://docs.f3js.org/courses/user-interface-2016/

コメントの公開にはサードパーティサービス Disqus を使用します。Disqus に登録していれば誰でも会話に参加できます。

Docs.com とは

Programming Environments( 元) 東大情理IS/CS 五十嵐研究室産業技術総合研究所研究員加藤淳http://junkato.jp/http://junkato.jp加藤淳 : 創作支援環境研究者 @ arcatdmz http://junkato.jpTextAlive (textalive.jp)f3.js (f3js.org)東大五十嵐研 / 未踏本体 / 学振 DC1 / Microsoft Research/ Adobe Research / 産総研研究員Human-Computer Interaction 分野が専門とくにプログラミング環境Programming EnvironmentsProgramming MethodsEnd-user Programming (Programming-by-Example)Visual ProgrammingSupport for Programming ActivitiesCode Editor EnhancementsDebugger EnhancementsExternal Support (Tools and Toolkits)Integrated Support (IDEs and Beyond)Programming EnvironmentsProgramming MethodsEnd-user Programming (Programming-by-Example)Visual ProgrammingSupport for Programming ActivitiesCode Editor EnhancementsDebugger EnhancementsExternal Support (Tools and Toolkits)Integrated Support (IDEs and Beyond)Programming by Example (Programming by Demonstration)ユーザの振る舞い (入力と出力のペア )を見て、入出力間のプログラムを推測、実行する手法繰り返し操作を検出してマクロを生成する簡単実装 (Dynamic Macro)から、 SMTソルバで関数を組み立てる本格実装 ( FlashFill )まで、さまざま繰り返し動作を検知、楽に繰り返せるDynamic Macro [Masui et al., CHI ‘94]“Program Synthesis”という用語を提唱FlashFill [Gulwani et al., POPL ‘11]実世界で PBETopobo [Raffle et al., CHI ‘04]Visual ProgrammingPure DataGoogle Blockly視覚的にプログラミングを行える手法全般実はいろいろな種類があるふつうの Visual ProgrammingBlocks ProgrammingSpreadsheet ProgrammmingPixel RewritingSpreadsheet は格子と誰が決めた？Forms/3 [Burnett et al., ’91-]これも SheetAgentSheets [Repenning et al., IEEE VL ‘93]最近の Spreadsheet研究Gneiss [Chang et al., UIST ‘14]Pixel Rewriting (BitPict) [Furnas, CHI ‘91]画像の書き替えルールを複数定義ルールを画像に適用することで、簡単な画像処理や算術を実現できるProgramming EnvironmentsProgramming MethodsEnd-user Programming (Programming-by-Example)Visual ProgrammingSupport for Programming ActivitiesCode Editor EnhancementsDebugger EnhancementsExternal Support (Tools and Toolkits)Integrated Support (IDEs and Beyond)Code Editor Enhancementsソースコードエディタを改良する研究と一口に言ってもいろいろな機能があるナビゲーション表示内容コード補完ファイル毎から処理 (関数など )毎へCodeBubbles [Bragdon et al., CHI ‘10/ICSE ‘10]画像を文字参照ではなく画像として表示Sikuli, Picode [Yeh & Kato et al., UIST ‘09 & CHI ‘13]コード補完の UIでサンプルコード検索Blueprint [Brandt et al., CHI ‘10]リポジトリからみんなの使い方抽出IDE 2.0 (Eclipse) [Brunch et al., FoSER ‘10]Debugger Enhancementsデバッガを改良する研究 (Back-in-time Debug)と一口に言っても必要な UIはアプリによりけりGUI の見た目がおかしい？カメラの前と PCの前を行ったりきたり？ブラウザで非同期イベント追うのがつらい？どうしてこうなった？に答えるデバッガWhyline for Java [Ko et al., ICSE ‘08 & CHI ‘09]録画・再生・再評価で机を離れず済む実行履歴プレイヤーDejaVu [Kato et al., UIST ‘12]録画・再生できる実行履歴プレイヤーは Webでも有効Timelapse [Burg et al., UIST ‘13]Programming EnvironmentsProgramming MethodsEnd-user Programming (Programming-by-Example)Visual ProgrammingSupport for Programming ActivitiesCode Editor EnhancementsDebugger EnhancementsExternal Support (Tools and Toolkits)Integrated Support (IDEs and Beyond)External Supportプログラミング環境には手を加えない支援2000 年代まで多かったツールキット (API)外部ツール (IDEに統合されていない )Arduino よりもっと前USB+API で抽象化Phidgets [Greenberg et al., UIST ‘01]OpenCV のAPI を GUI で教示しやすくEyepatch [Maynes et al., UIST ‘07]使ったことある人もいるのでは？D3.js [Bostock et al., InfoVis ‘11]Stanford Vis Group ➡ University of Washington Interactive Data LabProgramming EnvironmentsProgramming MethodsEnd-user Programming (Programming-by-Example)Visual ProgrammingSupport for Programming ActivitiesCode Editor EnhancementsDebugger EnhancementsExternal Support (Tools and Toolkits)Integrated Support (IDEs and Beyond)Integrated Support※ 開発フロー全体にわたってプログラマを支援するプログラミング環境全体をアプリ毎に最適化実装コスト でも現実的になってきた (OSS / API / Web …)Physical Computing の開発、テスト、分析d.tools [Hartmann et al., UIST ‘06]機械学習アルゴリズムの開発とテストGestalt [Patel et al., UIST ‘10]歌詞アニメーションの制作と配信TextAlive [Kato et al., CHI ‘13]Programming EnvironmentsProgramming MethodsEnd-user Programming (Programming-by-Example)Visual ProgrammingSupport for Programming ActivitiesCode Editor EnhancementsDebugger EnhancementsExternal Support (Tools and Toolkits)Integrated Support (IDEs and Beyond)PBE/VPLCoding & Debugging SupportToolkits & ToolsIDEs and Beyond今後さらに「体験」寄りの研究が増えていく (UI ➡ UX)講義課題スケジュール6/16 出題 ( 本日)6/23 構想発表A4×1 枚図入りの概要プリントを1 部印刷して持参1 チーム数分で紹介6/28, 30, 7/5, 7/7 レーザーカッター利用日7/14 成果発表7/19 レポート提出〆切Dynamic Macro は慶應大の増井先生という人がCHI ’94 で発表したものです。直前の繰り返し動作をキー一つで何度も実行できるものです。増井先生はApple 社でiPhone の日本語入力を実装したことで一番有名かもしれません。実はかつて産総研にいらっしゃったこともあります。PureData, Max/MSP, LabVIEW, …gramming ActivitiesCode Editor EnhancementsDebugger EnhancementsExternal Support (Tools and Toolkits)Integrated Support (IDEs and Beyond)Programming EnvironmentsProgramming MethodsEnd-user Programming (Programming-by-Example)Visual ProgrammingSupport for Programming ActivitiesCode Editor EnhancementsDebugger EnhancementsExternal Support (Tools and Toolkits)Integrated Support (IDEs and Beyond)Programming by Example (Programming by Demonstration)ユーザの振る舞い (入力と出力のペア )を見て、入出力間のプログラムを推測、実行する手法繰り返し操作を検出してマクロを生成する簡単実装 (Dynamic Macro)から、 SMTソルバで関数を組み立てる本格実装 ( FlashFill )まで、さまざま繰り返し動作を検知、楽に繰り返せるDynamic Macro [Masui et al., CHI ‘94]“Program Synthesis”という用語を提唱FlashFill [Gulwani et al., POPL ‘11]実世界で PBETopobo [Raffle et al., CHI ‘04]Visual ProgrammingPure DataGoogle Blockly視覚的にプログラミングを行える手法全般実はいろいろな種類があるふつうの Visual ProgrammingBlocks ProgrammingSpreadsheet ProgrammmingPixel RewritingSpreadsheet は格子と誰が決めた？Forms/3 [Burnett et al., ’91-]これも SheetAgentSheets [Repenning et al., IEEE VL ‘93]最近の Spreadsheet研究Gneiss [Chang et al., UIST ‘14]Pixel Rewriting (BitPict) [Furnas, CHI ‘91]画像の書き替えルールを複数定義ルールを画像に適用することで、簡単な画像処理や算術を実現できるProgramming EnvironmentsProgramming MethodsEnd-user Programming (Programming-by-Example)Visual ProgrammingSupport for Programming ActivitiesCode Editor EnhancementsDebugger EnhancementsExternal Support (Tools and Toolkits)Integrated Support (IDEs and Beyond)Code Editor Enhancementsソースコードエディタを改良する研究と一口に言ってもいろいろな機能があるナビゲーション表示内容コード補完ファイル毎から処理 (関数など )毎へCodeBubbles [Bragdon et al., CHI ‘10/ICSE ‘10]画像を文字参照ではなく画像として表示Sikuli, Picode [Yeh & Kato et al., UIST ‘09 & CHI ‘13]コード補完の UIでサンプルコード検索Blueprint [Brandt et al., CHI ‘10]リポジトリからみんなの使い方抽出IDE 2.0 (Eclipse) [Brunch et al., FoSER ‘10]Debugger Enhancementsデバッガを改良する研究 (Back-in-time Debug)と一口に言っても必要な UIはアプリによりけりGUI の見た目がおかしい？カメラの前と PCの前を行ったりきたり？ブラウザで非同期イベント追うのがつらい？どうしてこうなった？に答えるデバッガWhyline for Java [Ko et al., ICSE ‘08 & CHI ‘09]録画・再生・再評価で机を離れず済む実行履歴プレイヤーDejaVu [Kato et al., UIST ‘12]録画・再生できる実行履歴プレイヤーは Webでも有効Timelapse [Burg et al., UIST ‘13]Programming EnvironmentsProgramming MethodsEnd-user Programming (Programming-by-Example)Visual ProgrammingSupport for Programming ActivitiesCode Editor EnhancementsDebugger EnhancementsExternal Support (Tools and Toolkits)Integrated Support (IDEs and Beyond)External Supportプログラミング環境には手を加えない支援2000 年代まで多かったツールキット (API)外部ツール (IDEに統合されていない )Arduino よりもっと前USB+API で抽象化Phidgets [Greenberg et al., UIST ‘01]OpenCV のAPI を GUI で教示しやすくEyepatch [Maynes et al., UIST ‘07]使ったことある人もいるのでは？D3.js [Bostock et al., InfoVis ‘11]Stanford Vis Group ➡ University of Washington Interactive Data LabProgramming EnvironmentsProgramming MethodsEnd-user Programming (Programming-by-Example)Visual ProgrammingSupport for Programming ActivitiesCode Editor EnhancementsDebugger EnhancementsExternal Support (Tools and Toolkits)Integrated Support (IDEs and Beyond)Integrated Support※ 開発フロー全体にわたってプログラマを支援するプログラミング環境全体をアプリ毎に最適化実装コスト でも現実的になってきた (OSS / API / Web …)Physical Computing の開発、テスト、分析d.tools [Hartmann et al., UIST ‘06]機械学習アルゴリズムの開発とテストGestalt [Patel et al., UIST ‘10]歌詞アニメーションの制作と配信TextAlive [Kato et al., CHI ‘13]Programming EnvironmentsProgramming MethodsEnd-user Programming (Programming-by-Example)Visual ProgrammingSupport for Programming ActivitiesCode Editor EnhancementsDebugger EnhancementsExternal Support (Tools and Toolkits)Integrated Support

Programming Environments - 東京大学「ユーザインタフェース」講義資料

興味のある情報を集め、整理して、みんなと共有しましょう。

読み込んでいます...