絵画的プログラミング（プログラミング・シンポジウム2010）

2010/1/13 第51回プログラミング・シンポジウム 久保田 秀和 西村 拓一 産業技術総合研究所

◆ ダ・ヴィンチのスケッチ ◆ 図版と説明文が混交 こんな感じでプログラミングしたい！ なにげないスケッチに，直接ソース コードを書き添えてゆく ↓ その場で動き出す Drawings Of Water Lifting Devices

(demo) http://crowkee.jp/ Webスケッチブックにソースコードも描き込めるようにするところから開始．

◆ Webアプリケーションとして動作 ◆ ◆ BlogやWikiのようにカジュアルな編集・共有スタイル その場でコーディング，すぐそのまま実行 ◆ ◆ 必要なコンテンツ（絵や文字など）もその場でつくれる 空間的なコンテンツをWeb標準ベースで実現 ◆ 配置自由！ ◆ ◆ 従来は縦長用紙＋数コラムのフロー／ブロックレイアウト 情報の再利用性，利便性が高い ◆ ◆ ◆ ◆ ◆ HTML + CSS + JavaScript で記述，IE, Firefox, Safari, Opera で動作 HTMLで記述された従来コンテンツを埋め込むことができる テキスト検索，画像検索 etc... ブラウザのコンテキストメニューからの操作 HTMLを操作する拡張プラグイン（Greasemonkeyなど）を適用可能

◆ ひとまとまりのHTML（文章，画像 etc...）を部品化 ◆ ◆ ◆ ◆ スプライトのDrag & Drop 配置 ページのドラッグスクロール，ズーミング表示，全体地図 スプライトエディタ ◆ ◆ ◆ ◆ スプライトと呼ぶ HTMLエディタ，矢印エディタ， Webに直接手描き ファイルアップロード 道具箱 ◆ ◆ コンテンツ検索(flickr, ccライセンス) コンテンツ登録

共通のクラス，固有のIDをもつ，DIV要素の入れ子構造 <div class=“sprite” id=“spr????” style=“left: ?px, top: ?px, width ...> <div class=“contents”> ... </div> <div class=“meta”>...</div> </div> IDをもつdiv要素でWrapし てしまえば，中身に依らず 統一的に扱うことができる （移動，削除，コピーなど）． （表示例）

◆ 基本スプライトクラス（Sprite） ◆ ◆ 移動など全てのスプライトが持つ基本的なメソッドが定義さ れる サブクラス ◆ ◆ ◆ Normal, Image, Drawing, Arrow, Code, Widgetなど サブクラスは固有のメソッド，プロパティ，エディタを持つ 例）画像のリサイズ，矢印のコネクタ

◆ JavaScriptプログラムを記述・実行できる ソースコードもスプライトとして作成する ◆ 書いたその場で実行できる ◆ ◆ 図的な要素を盛り込むことができる 実行順に矢印でつなぐ ◆ 矢印で操作対象を指定する ◆

１つのCodeスプライトが１つの関数（クラス）を表す

スプライトID: xxxのCodeスプライトの
Web上での見た目

変形後にeval()
インスタンス作成，
enterメソッドを実行
内部的には次の関数定義と等価
(Codeはenterメソッド内に挿入)
codeClass["xxx"] = function(_c, _target, _id){
this.enter = function(){
var mes = "Hello, world!";
alert(mes);
}
};

codeInstance["xxx"] = new codeClass["xxx"]();
codeInstance["xxx"].enter();

実行ボタン

◆ プログラムを実行制御するボタン Runボタン：実行 ◆ Stepボタン：ステップ実行 ◆ TickTackボタン：タイマーでループ実行 ◆ TickTackStepボタン：タイマーでステップ実行 ◆ Resetボタン：状態を初期状態に戻す ◆

◆ Widgetが実行スコープをもつ ◆ ◆ 矢印の接続先へコンテキストオブジェクト(_c)を伝搬 CodeChain ◆ 接続先の関数を順に実行 ID: ccc Run Widget ID: xxx ID: yyy

実行スコープA Widget A Code 1 Code 2 Code 3 WidgetB 実行スコープB

◆ ◆ コードスプライト内のコードは enter()， exit()， reset() のうち，最低１つのメソッドを持つ． 上記メソッドに関する記述が全て省略された場合は， 自動的にenter()メソッド内のコードとして解釈される. this.enter = function(){ // enter コード．実行制御がこのスプライトに移った直後に実行 }; this.exit = function(){ // exit コード．実行制御がこのスプライトから他へ移る直前に実行 }; this.reset = function(){ // reset コード };

◆ ◆ 操作対象は通常はID直接指定 矢印を用いて視覚化，簡略化することもできる 操作するプログラム Widgetの実行スコープに接続された 操作対象のコンテンツ

◆ 背景：未踏中間報告会にて ◆ コメント 「見た目がマインドマップみたい」 ◆ 「ソースコードとビジュアルが混然としているほうが個人 的には好み」 ◆ プログラムの視覚的な表現そのものが面白いこと に気づいた ◆ VP的な思考からコペルニクス的転回 ◆

人間が計算機の動作を記述すること ◆ 人間が自分の意図や気持ちに沿って何かを 表現するという点においては文学や絵画，歌 や踊りに類する活動であると言える ◆ ◆ 表現としてのプログラミング

◆ Donald Knuth, "Literate Programming", 1984 表現としてのプログラミングの代表的アプローチ ◆ 随筆家のような態度でプログラミングに臨む ◆ ソースコードとそのコメント，解説文の構成や文体の美し さを重視 ◆ 組版用言語TeXと切り離せない概念として提案 ◆

第１章 組版用言語TeX で書かれた文書断片 【KnuthのWEBプログラムの例】 プログラムの解説書のような構成． ソースコードは文章の解説順に沿って ばらばらに配置される． 第２章 PASCALソースコード断片 ◆ ◆ コンパイラにとって正しい順ではなく，人が本を書くときのような自 然な順で記述することができる パーサにかけて，プログラムとして実行可能

イラストを描くのが趣味です。

◆ 画家のような態度でプログラミングに臨みたい ◆ ≠ Pictorial Programming, Visual Programming ◆ ◆ 図でプログラミングする = Picturesque Programming ◆ ◆ 絵を描く，絵で伝える表現活動としてのプログラミング 絵を描く者にとって自然な順序や様式でプログラミングした い ◆ 表現の幅を広げる装飾的性質を考慮

はじめに動きの表現に手をつけた ◆ 手で描いた軌跡をプログラムから利用する ◆ ◆ 軌跡に沿って，視点を移動させる ◆ ◆ 「熱海絵日記」 軌跡に沿ってスプライトを移動させる

◆ マーカーの軌跡に沿ってアニメーション

◆ 軌跡アニメーションのために必要な機能 ◆ ◆ ◆ (a) 移動させる対象を指定できること (b) 移動の軌跡を指定できること (c) 以上について複数の自由な線で描かれた絵として表現でき ること ◆ ◆ ◆ 絵描きの気持ちとして重要！ (d) 機能をコードスプライトとして利用できること これらの機能を実現するため，ユーザがライブマーカー （手描き描線）でスプライトを作成する際の規約を１つ導入 した． ◆ 「はじめの1本目の描線は，軌跡として解釈できる」

◆ 軌跡アニメーション関数 trail, backtrail ◆ 手描きの線から自動的にコードを生成できる ◆ ◆ _c.trail([target], spriteID)， _c.trail("view", spriteID) ◆ ◆ 軌跡に沿ってスプライト，あるいは視点を移動ア ニメーション _c.backtrail([target], spriteID) ◆ 点列を逆順に解釈して移動アニメーションさせる．

◆ 矢印による対象指定 ◆ ◆ 配置に空間的な制約あり 空間的に独立した方法で操作対象を指定で きるようにする 一般的には，一意に解釈可能な名前(ID)を利用 ◆ より絵画的に実現することを目的として，一意に解 釈可能なバッジの絵を利用 ◆

いわゆる Pretty に整形されたコード 絵の一部としてのDecorativeなコード

◆ ◆ 絵とプログラミングの心得のある人がカジュアルに小品を発表 する場を提供 ◆ スケッチコンテンツ ◆ 旅行記コンテンツ ◆ クイズコンテンツ （教育での利用） ◆ ◆ ◆ 元々の開発のきっかけのひとつ プログラミング演習にあたって余計な準備を減らしたい！ （Webアプリケーションのラピッドプロトタイピング，クイックハッ ク環境としての利用）

◆ システム，コンテンツ公開中 ◆ ◆ http://crowkee.jp/ 個人のためのプログラミングを強化したい 個人的な表現 ◆ アイデアスケッチ，試行錯誤の絵 ◆ Processingに対応 ◆ 雑多なソースコード表現としてのHMMMMLにも 対応 ◆

近づいたかな？

Webベースの開発環境 ◆ ビジュアルプログラミング ◆

◆ UIzard (http://uizard.org/) ◆ Web上でJavaScriptを用いたGUI（& イベント処 理）を制作可能 (JavaScriptでクライアント実装)

◆ Bespin (http://labs.mozilla.com/projects/bespin/) ◆ Ｗｅｂ上でソースコード，プロジェクト編集可能 （HTML5 + JavaScriptでクライアント実装）

◆ Atlas (http://280atlas.com/) ◆ XcodeのInterface Builder をWebへ移植中

◆ wonderfl (http://wonderfl.kayac.com/) ◆ Web上でFlashを開発，ソースコード共有可能 （JavaScriptでクライアント実装）

◆ 葵２ (http://aoikujira.com/wiki/aoi2/) 日本語プログラミング言語「なでしこ」のWeb版開 発環境（Flash+Javaアプレットで実装） ◆ 未踏の成果 ◆

◆ TIDE (http://www.tide4javascript.com/) ◆ さまざまなJavaScriptコード断片の編集とテスト 実行ができる（JavaScriptでクライアント実装）

Webコンテンツの制作環境とプログラミング環 境が一体化 ◆ ユーザはプログラミングから始めるのではなく， 日常的にWebコンテンツを作るなかで，気が 向けばプログラミングもする ◆