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

547 Views

November 17, 21

スライド概要

絵のように編み上がるプログラミングを目指して、2008年度下期未踏で Crowkeeシステムを開発しました。2010年のプログラミング・シンポジウムで発表したものです。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

共通のクラス,固有の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し てしまえば,中身に依らず 統一的に扱うことができる (移動,削除,コピーなど). (表示例)

7.

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

8.

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

10.
[beta]
1つのCodeスプライトが1つの関数(クラス)を表す

スプライト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();

実行ボタン

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

23.

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

24.

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

25.

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

26.

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

27.

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

29.

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

31.

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

32.

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

33.

近づいたかな?

34.

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

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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

41.

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