トップ
TextAlive
Griffith
Songle Sync
f3.jsIt's Alive! (TouchDevelop)Continuous Feedback in UI Programming
概要
Live Programmingは、プログラムを走らせたままコードを編集し、その変更を直ちに反映させて変化を観察することを可能にする技術である。このように、伝統的な編集、コンパイル、実行というサイクルを圧縮することで、プログラムのコードと振る舞いの間を行ったり来たりする認知的なギャップを小さくできる。そうすることで、プログラミング初学者がよりよくプログラミングを学べるようになり、経験者ならば生産性を向上できることが期待される。しかしながら、Model-Viewなどの切り分けがはっきりせず抽象化の足りない命令型言語でLive Programmingを実現しようとすると、応答性が悪くなったりフィードバックが分かりにくくなったりして困難が伴う。
本論文では、ユーザインタフェースを伴う一般的なプログラムの実装において、次のようにLive Programmingを実現する。すなわち、ユーザインタフェースのレンダリングを行う部分とそれ以外を綺麗に分けることによって、コードに変更があるたびに、プログラム自体を再起動せずともレンダリングだけをやりなおすことができるようにする。さらに、型(と副作用)システムを用いて、この切り分けを形式化し、コード変更時の処理手順を与える評価モデルを与える。このように、Live Programmingに対してより形式的な基盤を与えることで、Live Programmingシステムに関する本質的で技術的な議論を可能にしたい。
本研究は、Microsoft Research RedmondRiSE GroupのTouchDevelopチームにおける3か月のインターンの成果物である。Sebastian BurckhardtとMichał Moskalがメンターであった。Microsoft Research AsiaのSean McDirmidとも連絡を取り、MSRの2つのキャンパス間の協力体制を築いて研究を進めた。
発表内容
技術デモ
本研究で扱っている技術によるLive Programmingを体験してみたい方はTouchDevelop Web Appの当該機能を利用しているスクリプトを開いてみてください。公式ドキュメントもあります。
なお、本機能はpageを使ったときだけ有効化されます。TouchDevelopには何でもpostできるwallというレガシーなコンセプトがありますが、pageはその後継として、互換性を捨てて定義されています。
- TouchDevelopにログインする。
- リンク先のヘッダにある「edit in TouchDevelop」からスクリプトを開く。
- 「run」ボタンでスクリプトを実行する。
- 適当なところで画面右上の「一時停止」ボタンをクリック(またはタップ)すると、イベントハンドラが全て無効化されて「編集モード」になる。
- 画面上で「box」と呼ばれる任意のGUIコンポーネントをクリックすると選択でき、隣に「edit」ボタンが現れる。
- 「edit」をクリックすると、コードエディタの当該boxを表示する処理に飛ぶ。
- コードエディタの左隣には画面の縮小表示「Live view」が表示される。(WindowBuilderやXAMLエディタなどでよくあるpreviewでないことに注意)コードを編集するとLive viewに即座に反映される。
- クリックで選択したものの他に現在アクティブな行から生成されるboxがあれば(例えばforループや関数内のbox)、赤い枠線でハイライトされる。
- ソフトウェアキーボードにはboxの書式プロパティが並ぶ。どれかクリックすると、既にプロパティを指定している行があればそこに飛ぶ。なければ新しいプロパティ指定文が適当な位置に挿入される。
- コード編集に満足したら「再開」ボタンをクリックするとプログラムが再開される。