9. 情報視覚化とプログラミング

増井俊之

慶應義塾大学 環境情報学部

masui@pitecan.com

2017年11月30日

http://www.visualisingdata.com/ https://gyazo.com/0616f0cde3ceb49dbb119d65d212c70a.png

プログラミングと視覚化

プログラム実行結果の視覚化

= 通常の情報視覚化

プログラムの視覚化

プログラム実行課程の視覚化

視覚的プログラミング環境

ビジュアルプログラミング

プログラムの視覚化

伝統的手法

フローチャート

NSチャート

PAD

最近の手法

UML図

フローチャート

スパゲッティになりやすい

https://gyazo.com/ba6a0d78000d76428b935d3a1d63c4af.png

NSチャート

構造化プログラミング

https://gyazo.com/82bd29da9867ec20105a3d7de374441d.png

PAD

構造化プログラミング

https://gyazo.com/127b8cf6de5ffa9915efb63ba2a95520.png

https://gyazo.com/7e50d657a9eade1a7af627a4315fd9c0.png

UML図

オブジェクト指向設計

https://gyazo.com/f8b6742d4413cb75a3a0fc8639dd39f7.png

状態遷移機械

http://masui.org/c0d7354659a4eaa51af15edfa5c542b7.png

ペトリネット

http://masui.org/ae0ec7c3b9aae443e9c5ca813f095297.png

StateChart

https://i.gyazo.com/65ff0aa39a149e6b44605730b0b5e2e3.png

SeeSoft

プログラムの視覚化ツール群

http://masui.org/31164d1dc490ccc68827bf6dd30fe2ff.gif

プログラム実行課程の視覚化

アルゴリズムアニメーション

デバッガ

ステップ実行, etc.

例: ソートアルゴリズムの視覚化

http://www.sorting-algorithms.com/ https://gyazo.com/a03bd77248265bbf22945b02898b914d.png

例: ソートアルゴリズムの視覚化

http://www.cs.ubc.ca/~harrison/Java/sorting-demo.html https://gyazo.com/b09850c1848d0fd448e3ab3f78d4fd5b.png

例: ダイクストラ法

乗換案内の方法

http://d.hatena.ne.jp/nitoyon/20100126/dijkstra_aster_visualize https://gyazo.com/c83fc776e0aa60e57b4d3b725210737a.png

ビジュアルプログラミング

プログラミングで図形表現を活用

「ビジュアル」 = テキスト以外のもの

プログラムの作成/理解が容易になる

テキストベースのプログラミング

https://gyazo.com/003fe30526cc98f8a09348bebc7c6a7b.png

ビジュアルプログラミングの定義

狭義: プログラムをすべて図表で表現するもの

広義: テキスト以外の画像/図表/グラフなどをプログラムの一部に含むもの

「VisualBasic」「Visual C++」は？

テキスト表現が必要

狭義ではnon-VP, 広義のVP

ビジュアル表現が向く領域にはビジュアルプログラミングが有効

ビジュアルプログミング環境

IDE(統合開発環境)と呼ばれる

Visual C++

Eclipse

Xcode

ビジュアルプログラミングの利点

具体性

GUIとの整合性

PBEとの整合性

複雑な構造や関係の表現が容易

視認性/一覧性が良い

並列性の表現が容易

宣言的記述にマッチ

データの流れの表現が容易

複数の視点を表現しやすい

エンドユーザープログラミングに向く

具体性

数/量/色/形などを具体的に表現可能

テキストでは「5個」も「5m」も同じになってしまう

画像のファイル名よりは画像そのものの方がわかりやすい

操作も具体的に指示可能

移動, 拡大など

GUIとの整合性

図形を扱うプログラムは図形で表現する方が楽

PBEとの整合性

具体的な対象を直接操作していく(例示する)ことによりプログラムを作成可能

操作対象 = プログラミング対象

複雑な構造や関係の表現

表やグラフを表現しやすい

e.g. 状態遷移図

遷移表ではわけがわからない

配列/構造体/リンク構造などを表現しやすい

視認性/一覧性

格好良いプログラムは読みやすい

字下げ

プリティプリンティング

表や図として2次元的に表現可能

ブラウジングしやすい

並列処理の記述

実行順序が明示的に主張されない

テキスト言語の場合は普通は上から下

プロセスの同時実行を表現しやすい

e.g. ペトリネット

宣言的表現

プログラムの宣言的記述を画面に配置

規則や制約の図示

データの流れの表現

(制御の流れでなく)データの流れを図示しやすい

複数の流れが並列にあっても大丈夫

CUIでは指定が困難

簡単なパイプならOK

$ a | b | c

複数の視点

X軸/Y軸に別の意味を持たせることができる

(例) カレンダ

X軸 = 曜日

Y軸 = 週

エンドユーザプログラミング

GUIに慣れている一般ユーザに提供

GUIによる例示プログラミングが有効

ビジュアル言語の分類 (Burnett)

並列言語

制約型言語

データフロー言語

フォーム/スプレッドシート言語

関数型言語

操作型(imperative)言語

論理型言語

マルチパラダイム言語

オブジェクト指向言語

例示プログラミング言語

ルールベース言語

表現形式による分類

ダイアグラム言語

アイコン言語

静的画像列(紙芝居型)言語

広義のVPではさらに各種の表現形式が可能

ビジュアルプログラミングの例

スプレッドシート

インタフェースビルダ

MAX/PD

Hi-Visual

Triggers

KidSim / Cocoa

Viscuit

AgentSheet

Visulan

SimTunes

MindStorms

Automator

Yahoo! Pipes

Quartz Composer

スプレッドシート

成功したビジュアル言語

直接操作

制約プログラミング

インタフェースビルダ

グラフィック部品を対話的に配置

プログラムの骨格の自動生成

コンパイルせずに操作を実験

統合的GUIプログラミング環境として普及

NeXTのインタフェースビルダ

https://gyazo.com/26628fafb9d8cddd83ada076705b68fe.png

Xcodeのインタフェースビルダ

http://masui.org/fc72e526450de45e308ef0e211a8525b.png

Android Studio

https://gyazo.com/ed1b662f8914a53e601ed73015fd471e.png

Demo: Interface builder

Max/MSP

ダイアグラム言語の代表

MIDI信号/DSP信号の流れ - 線で表現

各種処理 - ノードで表現

IRCAM(パリの計算機音楽研究センター)で開発

複数の信号の並列処理を簡単に表現可能

Max/MSP

http://masui.org/4183cf453704af9be7c536e9c9233a66.png

Max/MSP

http://masui.org/e169f00f71e0bc1cce768b9f6a9b2469.png

http://www.youtube.com/watch?v=zrOo4fOlKfA https://gyazo.com/b81249976ffee1a5212635e79a495f50.png

デモ: Max/MSP/Jitter

https://gyazo.com/5fdaf463c8a51af980532714d5c71074.png

Maxの後継

Public Domain

https://gyazo.com/8e86aaeadc101fa06ef22e3904c9e257.png

https://gyazo.com/95c660387beee7e0d52e95ef6512d944.png

https://gyazo.com/9c744c355475466bceb11df5f4273806.png

Reason

音楽器材シミュレータ

https://gyazo.com/990c5ee73e964878be155059d9543696.png

Reason

https://gyazo.com/9e2d500195d4e31fc4c49eebeb83b5a8.png

VVVV

PD似のプログラミングシステム

https://gyazo.com/5eb0012f42944ed591b37608377c2a7d.png

Triggers

ビットマップ画面上のパタンマッチングにより操作の自動実行

e.g. 「OK」が表示されたらクリックする

定義したビットマップパタンが表示されたとき定義された操作を自動実行させる

(例) 表計算ソフトの全ての負の数値データに印をつける

マイナス記号(-)を示すビットマップパタンを指定してそのパタンの近辺に印をつける操作を例示により定義

https://gyazo.com/cd25caa5d14b850f9a1d9da2d6beb0c9.png

Video (Triggers)

KidSIM

http://masui.org/84ba4aed8dad761e2f5bc5adfc9cb9fc.gif

KidSIM

例示によるアニメーション生成システム

処理前後の状態の絵の組で規則を表現

Graphical Rewrite Rule (GRR) の草分け

パタンにマッチする規則があればそれに従って盤面が変化

KidSIMの商品化

http://masui.org/ac046dc993ee300f647599f3ba9e988f.png

http://www.stagecast.com/movies/HowToMovie.html http://masui.org/ac046dc993ee300f647599f3ba9e988f.png

Stagecast

https://www.youtube.com/watch?v=51H1OnACvy8

子供用のプログラミング

GRRを利用

https://gyazo.com/66a451fefd3be1832a7418b017065fd9.png

https://www.youtube.com/watch?v=0N8cpLHZ41I

http://www.youtube.com/watch?v=l6EcDeBnbXY https://gyazo.com/7d74e1f79cd032afa0dafb1254835c49.png

GRRを利用

操作とそのテキスト表現のギャップを「類推」で埋める

https://gyazo.com/42c5d4b68b126fe6e6eb496167208781.png

Visulan

ビットマップ書き換え (c.f. Triggers, KidSim)

3次元対応

https://gyazo.com/fe06d6e48f31568080383529d51565e1.png

https://gyazo.com/22836333d8861f8ea1a1a41b67ce5fb1.png

Visulan

https://gyazo.com/420a8925b90d75c8f224484c53c0c96d.png

https://gyazo.com/8867677d545cf15dd7d57015f02d2f91.png

ビットマップパタンマッチであらゆるGUI操作を実行

https://www.youtube.com/watch?v=FxDOlhysFcM

SimTunes

メディアアーティスト岩井俊雄氏の音楽ゲーム

画面上の「虫」の動きをプログラミング

https://gyazo.com/94f543505e8da08895db29ac25d2f595.png

https://gyazo.com/4d7ba0cc27d429d91a6e7f53a532abfb.png

https://www.youtube.com/watch?v=hzvDeG_jc0U

MindStorms

プログラミング可能なLEGOのおもちゃ

ビジュアル言語でプログラミング

並列性の表現が容易

センサAにより処理1が制御され、センサBにより処理2が処理され...

https://gyazo.com/3b55f3632dc08f29e573bf137be13b91.png

センサを用いたプログラム例

https://gyazo.com/a31f6c41ce3ef3131858044ce47ed7d1.png

Squeakベースの子供用ビジュアルプログラミング環境

https://gyazo.com/f2edafb5096f86e208495aee09df42b0.png

Scratch

https://www.youtube.com/watch?v=VIpmkeqJhmQ

Logo

https://www.youtube.com/watch?v=g6kmVHfMQvY

NetLogo

https://www.youtube.com/watch?v=AJXFiO-ULv0

Googleのビジュアル言語

https://gyazo.com/4b1c33bdfa6c049ae5d320709dbad1b4.png

UEIでenchantMOON用に作成したビジュアル言語

https://gyazo.com/d85b3f063a447b860ae43825490eed55.png

Automator

http://masui.org/0a7f3224bcc395fc919f84a3ef4b36e2.png

デモ: Automator

Yahoo! Pipes

Webサービスのマッシュアップ

http://masui.org/fc4471a1378102c027ed7de43fac4e16.png

http://shokai.org/blog/archives/4572 https://gyazo.com/1d1bf3458448056617f00b50e1fce569.png

https://gyazo.com/f6314168556e14653508c87085adbb50.png

https://gyazo.com/66afc41203c08a95680374d30ec65a4a.png

https://gyazo.com/0317269567ae67b98b8c0cc28df9b8da.png

Video: Rhino/Grasshopper

http://www.youtube.com/watch?v=jIwBY6r9idM https://gyazo.com/c01d07d30d73ebdc6dfad4cf719f84b2.png

ビジュアルプログラミングの課題

汎用化

大規模プログラムへの対応

自動レイアウト

ポータビリティ

テキスト言語に対する(大きな)優位性