ペンインタフェースを用いた視覚的な Lisp 教育環境
原 謙治* 五十嵐 健夫***

東京大学理学部情報科学科
* **

**

東京大学大学院情報理工学系研究科{hara2001,takeo}@ui.is.s.u‑tokyo.ac.jp

1. はじめに

3. 基本設計

従来のテキストエディタにおける Lisp プログラ

本論文ではペンによるジェスチャを用いて直感

ムは多くの括弧を用いて書かれており、プログラ的にプログラムを開発できるシステムを提案する．

ムの木構造が見えにくいものとなっている．また、

このシステムではキーボードを用いないペンのテキストエディタで編集している様子を見ても何みでのプログラミングを可能にし、キーボードタをしているのかがわかりにくいという問題も存在

イピングに不慣れなユーザにとって扱いやすさ、する．我々はそうした問題を解決するためにペンシステムの使い方の覚えやすさ、プログラム編集インタフェースを用いた視覚的な Lisp プログラミ

者の意図の推測しやすさを提供する．さらに Lisp

ング環境を開発した．このシステムにおいては、プログラムの木構造の視覚的表現はプログラムのユーザはジェスチャを用いて、可視化された木構理解しやすさを提供している．

造のノードに対して追加、削除、開閉操作を直感

以下では木構造の編集におけるノード追加、ノ的に行うことができ、編集している人の意図の推ード削除、文字入力、コピー＆ペースト、ノード測しやすさも期待される．の開閉等のジェスチャによる操作方法を紹介する．

2. 関連研究(1)ノード追加

ペンを用いたプログラミング環境の研究としてノードの追加はノードの外から中へ線を引くことは Hyperflow[1]が挙げられる．Hyperflow はペンで行う．ノードの中へ線を引くと、追加されるノインタフェース、オブジェクト指向、データフロードが青色で表示される．そこでペンを離すと赤ー型、といった特徴を持った教育用ビジュアルプ

色で表示されていたノードが追加される．(図 1)

ログラミング言語である．また、ダイアグラム編(2)ノード削除集におけるペンとマウスの操作性の違いについて

ノードの削除はノードを繋ぐ枝を横切る線を引くの実験では、ペンの方がマウスより 2 倍早い操作ことで行う．枝を横切る線を引くと削除されるノ性を得られるという結果が出ている[3]．ビジュアードが赤色で表示される．そこでペンを離すと赤ルプログラミング言語におけるダイアグラムの入色で表示されていたノードが削除される．(図 2)

力方法については、ペンのみとマウス＆キーボードで実験している[2]．この実験においてはモード切替はジェスチャで行うか、入力デバイス選択で行うべきであると結論付けている．また、コピー＆ペースト操作の重要性とジェスチャかポップアップメニューを用いることの有効性を主張している．本論文では Lisp 系言語 Scheme のビジュアル

図 1.ノード追加

図 2.ノード削除

プログラミング環境における直感的なインタフェ(3)ノードの開閉ースを提案する．

ノードの開閉はノードの先端にあるヘッダ（ノードのすぐ左の部分）から左右にドラッグを開始す

Pen-based Visual Programming Environment for
Teaching Lisp
Kenji Hara*,Takeo Igarashi***Department of Information Science,Tokyo Univ.
**Graduate
School of Information Science andTechnology, Tokyo Univ.

ることによって行う．ドラッグを開始すると縦に紺色の線が表示される．選択されているノード以下にあるノードのうち、その線より左側にあるノードは開かれ、右側にあるノードは閉じられる．(図3)集している様子を見て何をしようとしているかが分かりやすいこと、が挙げられる．
本論文で提案した手法は、プログラミング教育用のインタフェースとしての使用を想定している．
従来のテキストエディタを用いたプログラミング
教育においては、特にキーボードタイピングに慣れていないユーザは授業以外にキーボード入力も気にしなければならず、また、教師の書いたプロ
図 3.ノードの開閉

グラムを写すだけでは深い理解が得にくいという(4)文字入力問題もある．しかし、我々のシステムにおいては文字入力はノードをタップすることで現れる入力

キーボードタイピングに気を使う必要はなく、教スペースに graffiti を用いて入力を行う．(図 4)師のプログラム作成過程の分かりやすさ、作成されたプログラムの分かりやすさ、覚えやすさも期待できる．
本手法の問題点としては、編集速度の遅さが挙げられる．キーボード操作の場合、習熟度が増せば非常に高速なプログラム編集を行うことができる．しかし、ペン操作の場合熟練してもキーボードほどの高速な編集は行えない．授業中はこの問

図 4.文字入力(‘c’を入力)

題はさして大きくないが、独習中は高速な編集速(5)コピー＆ペースト度が要求されると考えられる．我々はテキストエ

コピー＆ペーストはノードからノードへのドラッ

ディタを用いた場合とあまり変わらないキータイグ＆ドロップで行う．ノードの中からドラッグをプ数で扱えるようにシステムを設計したが、その開始するとそのノードの背景が暗く表示される．

操作方法をいつ覚えるかという問題も存在する．

この状態で別のノードの上へドラッグすると、ポ今後はシステムの使いやすさ、プログラミングインタがドラッグ＆ドロップ可能状態で表示されの分かりやすさについて評価実験を行い、それにる．この時ペンを離すとドラッグを終了したノー基づいたさらなる改良を行っていきたいと考えてドの名前がドラッグを開始したノードの名前にないる．

る(コピーされる)．(図 5)

参考文献[1] Kimura, T.D. “Hyperflow: A visual Programming Language
for Pen Computers,” Proceedings of 1992 IEEE Work shop on
Visual Lunguages, Seattle, Washington, September 1992,pp12.5132.

図 5.コピー＆ペースト

4. 議論[2] Citrin, W., "Requirements for Graphical Front Ends for
Visual Languages", IEEESymposiumon Visual Languages, pp.

従来のテキストエディタを用いたプログラミング

142-150, Bergen, Norway,August 1993.と比較した時の本手法のメリットとしては 1)キー

[3] Apte, Ajay and Takayuki Dan Kimura. A Comparison Study

ボードを用いないペンのみでのプログラミングがof the Pen and the Mouse in Editing Graphic Diagrams.

可能であること、2)プログラム構造が可視化されたProceedings of Visual Languages 1993 Conference, Bergen,

木構造で表示されているので直感的に理解しやす

Norway, 1993.

いこと、3)ペンで操作している様子を見てソフトウ
ェアの使い方が覚えやすいこと、4)プログラムを編