Skip to content

Instantly share code, notes, and snippets.

@yamarten
Last active Dec 1, 2019
Embed
What would you like to do?
livelits紹介

Livelits: Filling Typed Holes with Live GUIs

研究概要

やったこと

以下の2つの研究を1つに合体した

  • GUIで値を入力できるプログラミング環境

  • 未完成のプログラムを実行できるプログラミング言語

ちなみに、元になったのはどちらも著者の研究です。

できたこと

拡張可能なGUIを持つプログラミング言語&環境

好きなところ

面白い研究同士を合体して、独自の価値を持つ新しい研究にしたこと

プログラム中に、プログラムを編集するためのGUIを記述する斬新さ

はじめに

プログラムのソースコードを見たことが無いような人には少し難しいかもしれません。

論文情報

タイトル

Livelits: Filling Typed Holes with Live GUIs

著者

Cyrus Omar, Nick Collins, David Moon, Ian Voysey, Ravi Chugh

出典

TyDe 2019
ICFPという大手カンファレンスに合わせて開催された、型システムに関するワークショップ

スライド

https://hazel.org/talks/livelits-tyde19.pdf

ワークショップ向けのExtended Abstructなのでこれ自体の内容は薄めですが、それでも面白かったので紹介します。

成果

入力サンプル

こんな感じのことができます。

table

※画像は発表スライドより

これは編集中のソースコードの一部分を切り取ったものだと思ってください。
ここで驚いてほしいのですが、下の表の部分も含めて一つのソースコードです。表部分はExcelのような入力インタフェースになっています。 [1]

サンプルコードでは grades という変数に $grade_table という値を代入していますが、 $grade_table の値は下の表によって定義されます。
ここでは Alicemidterm91 * curve という値を入力し、結果として 95 を得ているようですね。 curve はどこかで定義された変数なのでしょう。
ここが2つ目の驚きポイントですが、 91 * curve が勝手に計算されています。Excel風の見た目に騙されてしまいそうですが、これはあくまでソースコードです。編集している最中に既に計算が実行されているのは、考えてみれば不思議です。 [2]

このように、GUIを使って直感的に値を入力できるというのが、この研究の概要です。
著者はこの表のようなものを "live literals" 略して "livelits" と呼んでいます。 [3]

定義サンプル

さて、ここからが面白いところです。

livelitsという入力の仕組みがあることは説明した通りですが、実は、livelitsには先ほどの表形式の他にも、データの型に合わせて様々なインタフェースが存在します。

それでは、livelitsはどのような型に対応しているのでしょうか。
その答えは、次のサンプルコードにあります。文法がML[4]風文法なので若干読み難いかもしれませんが、細かいところは気にしなくても大丈夫です。

livelits ss

※画像は発表スライドより

結論から言えば、livelitsは 全ての 型に対応しています。なぜなら、プログラマ自身がlivelitsのGUIを定義するからです。

サンプルコードは黄色い枠で3つの部分に分けられています。ここでは上から型定義部・livelits定義部・livelits利用部と呼びましょう。
注目してほしいのはlivelits定義部ですが、説明のためにそれ以外の部分から見ていきます。

型定義部

今回使用する grade_cutoffs という型を定義しています。

生徒の成績をA,B,C,D,Fの5段階に分けるための閾値を持つ型で、これが今回の入力対象になります。

livelits利用部

A,B,C,D,Fをそれぞれドラッグして値を変えるスライダー式のGUIのようです。

サンプルデータ?を一緒に表示して基準にしたり、値が微妙だった場合には警告を表示しています。

最初のサンプルコードでは説明しませんでしたが、実は $ から始まる部分が重要で、 $grade_cutoffs という名前を書くことでこのGUIが表示される仕組みになっています。

livelits定義部

先ほどのGUIを定義するところです。 $grade_cutoffs という名前と grade_cutoffs という型、そしてGUI定義を関連付けています。つまり、ここを書き換えれば、数行下にあるGUIも変化するということです。

ここで使われている言語はElmというウェブ開発用言語で、livelitsのGUIをHTMLとして定義します。なので、ウェブサイトで作れるようなGUIはなんでも書けます。

やろうと思えば、ペイントソフトを定義してソースコード中にお絵描きしたり、音声ファイルを読み込んで定数として使うこともできるでしょう。

何が面白いのか

GUIで値を定義すること自体は、今やそれほど斬新なアイディアではありません。
ですが、それはIDEがサポートするごく一部の型を使う場合の話です。

この研究では開発ツールではなくソースコードでGUIを定義しています。
これは言い換えれば、GUIをソースコードとして共有できることになります。例えばライブラリ作者が、ライブラリ作成時にそこで使うGUIを定義し、ライブラリに同梱する形で配布できるということです。

この思想は個人的にはかなり衝撃で、未来を感じられてとても好きです。既存のプログラミング言語を素直に拡張や置換できる類の技術ではありませんが、未来のプログラミング言語に夢が膨らみますね。

おまけ

この研究のコンテキストの説明です。興味があればどうぞ。

研究分野について

この研究は、主にプログラマのための研究で、PL(Programming Language)と呼ばれる分野に属しています。おそらく、内容的にはPX(Programming eXperience)にも該当するでしょう。この2つは非常に近い分野ですが、(私の主観だと)雰囲気は微妙に違います。

前者は名前の通りプログラミング言語に関する研究を指します。大雑把に言うと「より速い」「より安全な」プログラムを「より簡単に」作るために、プログラミング言語を作ったりコンパイラを改良したりする、計算機科学寄りの分野です。

後者はよりプログラマにフォーカスし、プログラミング環境やUIの研究をしている、人間工学寄りの分野です。有名なところではScratchなんかをイメージしてもらうと分かり易いかと思います。

PLとPXだと粒度が違う気がするので並べるのは適切ではないかもしれませんが、どちらもプログラミングにおける人とコンピュータの関係を研究する、私の推し分野です。

先行研究1: プログラミングにおけるGUI

プログラムの一部をGUIによって入力することは、既に行われています。
代表的なのがカラーコードの入力で、AtomのColor Pickerプラグインなどによってカラーパレットによる入力が可能です。

とはいえ、これはごく一部の型に対してプラグインが作られただけでした。色も含めて数種類程度ではないでしょうか。
そこで著者は、このGUI入力の仕組みを一般化し、ユーザが拡張可能なツールとして、GraphiteというEclipse用プラグインを開発しました。

今回の研究は、Graphiteが持っていた以下の2つの欠点を解消したものという位置付けです。

  • 一度入力してしまうとGUIが消えてコードのみになってしまい、修正にGUIが使えないこと

  • プログラム中の変数や関数をGUI入力に使えず、定数しか書けないこと

先行研究2: "穴"の空いたプログラム

直接の関係性は見え難いのですが、重要な役割を果たしている、合体前のもう一つの研究があります。
Hazelというプログラミング言語で、未完成の穴空きプログラムでも実行することができます。

sample hazel

上図では x + y + z という形の式が書かれており、 x はただの 1 ですが、 y は条件分岐で false の場合の値が未定義、 z は何もかもが未定義の "穴" です。
それでも、 y は条件分岐で true に入っていることがわかっているので 2 として計算され、 1 + 2 + z つまり 3 + z まで計算されています。

これが今回の研究でどのように役立っているかというと、おそらく以下の2点になります。[5]

  • 編集中のプログラムに含まれるlivelits定義を読み込み、利用可能にする

  • livelits内部での変数参照や計算を可能にする

理論的には、そもそもlivelits自体が「特定の名前(例えば $grade_cutoffs)を持った穴」に対してGUIが生成されるという仕組みになっているようで、そういう意味ではガッツリかんでるようです。

Hazelはそれ単体でもかなり面白い研究なのですが、それを予想外の方向に活用してきており、そういった点からも面白いと思っています。


1. これは合体前の研究の1つ目の成果で、GUIによる入力インタフェース自体は既存技術です。
2. これは合体前の研究の2つ目の成果で、未完成なプログラムを編集中に実行し、計算できる値をリアルタイムで計算しています。
3. 142 のような数字を「数値リテラル」、 "ABC" のような文字列を「文字列リテラル」と呼ぶように、独自の表記法で書かれた値、くらいの意味で"literal"という単語を使っているのでしょう。"live"はGUIでリアルタイムにフィードバックが得られるところからです。
4. ここではMachene LearningではなくMeta Languageを指します。SMLとかOCamlとかHaskellとかの先祖です。
5. この辺は論文には詳しく書いていないので推測です。フルペーパーの登場が待たれるところ。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment