6. ビジュアルプログラミング
CLIとGUI
CLI = コマンドラインインタフェース
現在のインタフェースはGUIが主流
具体的 = 直感的 = わかりやすい
「文書」「画像」など具体的な対象を直接操作
すべてが「ビジュアル」
ビジュアルプログラミング
プログラミングにも図形表現を活用
テキスト以外のものを「ビジュアル」と表現
プログラムの作成/理解が容易になる
ビジュアルプログラミングの歴史
30年以上にわたって研究されている
すごく流行っているとはいえない
VL/HCC2020
https://conf.researchr.org/home/vlhcc2020 https://gyazo.com/bb85efe352dec28df7f0bbf1c8722cc2
ビジュアルプログラミングの定義
狭義: プログラムをすべて図表で表現するもの
広義: テキスト以外の画像/図表/グラフなどをプログラムの一部に含むもの
Q: 「VisualBasic」「Visual C++」は？
テキスト表現が必要
狭義ではnon-VP, 広義のVP
ビジュアル表現が向く領域にはビジュアルプログラミングが有効
何がビジュアルなのか
実行結果がビジュアル？
実行の過程がビジュアル？
プログラムする環境がビジュアル？
プログラムそのものがビジュアル？
テキストプログラムの視覚表現
伝統的手法
フローチャート
NSチャート
PAD
最近の手法
UML図
フローチャート
スパゲッティになりやすい
http://gyazo.com/ba6a0d78000d76428b935d3a1d63c4af.png
NSチャート
構造化プログラミング
[http://gyazo.com/82bd29da9867ec20105a3d7de374441d.png]
構造化プログラミング
GOTO文を使わない
while と ifだけ
PAD
構造化プログラミング
http://gyazo.com/127b8cf6de5ffa9915efb63ba2a95520.png
http://gyazo.com/7e50d657a9eade1a7af627a4315fd9c0.png
HCPチャート
http://gyazo.com/b220896bd7c83977b8a3afa3bd2fdc37.png
UML図
オブジェクト指向設計
http://gyazo.com/f8b6742d4413cb75a3a0fc8639dd39f7.png
状態遷移機械
http://gyazo.com/c0d7354659a4eaa51af15edfa5c542b7.png
StateChart
http://gyazo.com/65ff0aa39a149e6b44605730b0b5e2e3.png
Petri net
http://gyazo.com/ae0ec7c3b9aae443e9c5ca813f095297.png
何をビジュアルに表現するのか
実行結果
実行プロセス
プログラミング環境
プログラム本体
実行の視覚化
アルゴリズムアニメーション
デバッガ
ステップ実行, etc.
例: アルゴリズムアニメーション
http://gyazo.com/a03bd77248265bbf22945b02898b914d.png
ビジュアルプログミング環境
IDE(統合開発環境)と呼ばれる
Visual C++
Eclipse
Xcode
IntelliJ
Android Studio
VSCode
ビジュアルプログラミングの利点
具体性
GUIとの整合性
PBEとの整合性
複雑な構造や関係の表現が容易
視認性/一覧性が良い
並列性の表現が容易
宣言的記述にマッチ
データの流れの表現が容易
複数の視点を表現しやすい
エンドユーザープログラミングに向く
具体性
数/量/色/形などを具体的に表現可能
テキストでは「5個」も「5m」も同じになってしまう
画像のファイル名よりは画像そのものの方がわかりやすい
「5個の四角」より「■■■■■ 」の方がわかりやすい
操作も具体的に指示可能
移動, 拡大など
GUIとの整合性
図形を扱うプログラムは図形で表現する方が楽
「青い四角」 vs https://gyazo.com/bbdb33fc8bc4aef5fb2b3503638892d7.png
<div style="background-color:#00f;"></div>
PBE(例示プログラミング)との整合性
具体的な対象を直接操作していく(例示する)ことによりプログラムを作成可能
操作対象 = プログラミング対象
複雑な構造や関係の表現
表やグラフを表現しやすい
e.g. 状態遷移図
遷移表ではわけがわからない
配列/構造体/リンク構造などを表現しやすい
視認性/一覧性
格好良いプログラムは読みやすい
字下げ
プリティプリンティング
表や図として2次元的に表現可能
ブラウジングしやすい
プリティプリンティング
http://gyazo.com/d7467ed332b6d227da1446646fce9e0e.png
プリティプリンティング
https://cdn-images-1.medium.com/max/2000/1*kU1JmZlhWgJNRhAcV4ideg.jpeg
並列処理の記述
実行順序が明示的に主張されない
テキスト言語の場合は普通は上から下
プロセスの同時実行を表現しやすい
e.g. ペトリネット
宣言的表現
プログラムの宣言的記述を画面に配置
規則や制約の図示
データの流れの表現
(制御の流れでなく)データの流れを図示しやすい
複数の流れが並列にあっても大丈夫
CUIでは指定が困難
簡単なパイプならOK
% cat data.txt | sort | uniq
複数の視点
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
Grasshopper
Spreadsheets
https://gyazo.com/95e336e05f9569e970bc476eb852fbb6
スプレッドシート
成功したビジュアル言語
IT界の最大発明のひとつ
直接操作
制約プログラミング
フリーフォーマット・スプレッドシート
計算式をテキスト内に記述
https://gyazo.com/b7b770a7dae977260a1e2d1f1d2d0707
Boomborg計算の例
code:computing.txt
3 ←rate 10000 ←capital
↓capital ↓+
year 1995 :: 10000 * rate / 100 = 300 ←interest
♂ ∫+interest
year 1996 :: 10300 * rate / 100 = 309 ←interest
♀ ∫+interest
year 1997 :: 10609 * rate / 100 = 318 ←interest
∫+interest
year 1998 :: 10927 * rate / 100 = 327 ←interest
∫+interest
year 1999 :: 11254 * rate / 100 = 337 ←interest
∫+interest
year 2000 :: 11591 * rate / 100 = 347 ←interest
∫+interest
year 2001 :: 11938 * rate / 100 = 358 ←interest
∫+interest
year 2002 :: 12296 * rate / 100 = 368 ←interest
∫+interest
year 2003 :: 12664 * rate / 100 = 379 ←interest
∫+interest
year 2004 :: 13043 * rate / 100 = 391 ←interest
∫+interest
year 2005 :: 13434 * rate / 100 = 403 ←interest
-------------------------------------------------------
3837
Cinderella
https://www.youtube.com/watch?v=9bEFCPwMWyE
http://pitecan.com/Cinderella/Kempe/ https://gyazo.com/2e7e705c07fd081b840c2417dee733e6.png
インタフェースビルダ
グラフィック部品を対話的に配置
プログラムの骨格の自動生成
コンパイルせずに操作を実験
統合的GUIプログラミング環境として普及
NeXTのインタフェースビルダ
http://gyazo.com/26628fafb9d8cddd83ada076705b68fe.png
XCodeのインタフェースビルダ
http://gyazo.com/fc72e526450de45e308ef0e211a8525b.png
Android Studio
http://gyazo.com/ed1b662f8914a53e601ed73015fd471e.png
Max
ダイアグラム言語の代表
MIDI信号/DSP信号の流れ - 線で表現
各種処理 - ノードで表現
IRCAM(パリの計算機音楽研究センター)で開発
複数の信号の並列処理を簡単に表現可能
Max
http://gyazo.com/4183cf453704af9be7c536e9c9233a66.png
Max
http://gyazo.com/e169f00f71e0bc1cce768b9f6a9b2469.png
'Public Domain' version of Max
http://gyazo.com/8e86aaeadc101fa06ef22e3904c9e257.png
http://gyazo.com/95c660387beee7e0d52e95ef6512d944.png
http://gyazo.com/9c744c355475466bceb11df5f4273806.png
Reason
音楽器材シミュレータ
http://gyazo.com/990c5ee73e964878be155059d9543696.png
Reason
http://gyazo.com/9e2d500195d4e31fc4c49eebeb83b5a8.png
VVVV
PD似のプログラミングシステム
http://gyazo.com/5eb0012f42944ed591b37608377c2a7d.png
http://vimeo.com/23316783
Triggers
ビットマップ画面上のパタンマッチングにより操作の自動実行
e.g. 「OK」が表示されたらクリックする
定義したビットマップパタンが表示されたとき定義された操作を自動実行させる
(例) 表計算ソフトの全ての負の数値データに印をつける
マイナス記号“-”を示すビットマップパタンを指定してそのパタンの近辺に印をつける操作を例示により定義
[http://gyazo.com/cd25caa5d14b850f9a1d9da2d6beb0c9.png]
Video (Triggers)
https://s3-ap-northeast-1.amazonaws.com/masui.org/7/2/72aa1ce0f26d8af8a3b4c25b7b1e2a79.mp4
http://gyazo.com/e3811d24bde71596f7aedef782f60d90.png
KidSIM
例示によるアニメーション生成システム
処理前後の状態の絵の組で規則を表現
Graphical Rewrite Rule (GRR) の草分け
パタンにマッチする規則があればそれに従って盤面が変化
KidSIMを商品化したもの
http://gyazo.com/ac046dc993ee300f647599f3ba9e988f.png
https://www.youtube.com/watch?v=6Hm6R6INb30
子供用のプログラミング
General Rewriting Rule (GRR)を利用
http://gyazo.com/66a451fefd3be1832a7418b017065fd9.png
http://www.youtube.com/watch?v=0N8cpLHZ41I
https://www.youtube.com/watch?v=kxeaeCajuFc
https://www.youtube.com/watch?v=L0Gg76f60ao
https://www.youtube.com/watch?v=8q-Pbg8sCV0
GRRを利用
操作とそのテキスト表現のギャップを「類推」で埋める
http://gyazo.com/42c5d4b68b126fe6e6eb496167208781.png
Visulan
ビットマップ書き換え (c.f. Triggers, KidSim)
3次元対応
http://gyazo.com/fe06d6e48f31568080383529d51565e1.png
http://gyazo.com/22836333d8861f8ea1a1a41b67ce5fb1.png
Visulan
http://gyazo.com/420a8925b90d75c8f224484c53c0c96d.png
http://gyazo.com/8867677d545cf15dd7d57015f02d2f91.png
SimTunes
メディアアーティスト岩井俊雄氏の音楽ゲーム
画面上の「虫」の動きをプログラミング
http://gyazo.com/94f543505e8da08895db29ac25d2f595.png
http://gyazo.com/4d7ba0cc27d429d91a6e7f53a532abfb.png
https://www.youtube.com/watch?v=GchIgaSmFI0
TENORI-ON
http://gyazo.com/1f4b2b7d6989571a5faec6704356800a.png
https://www.youtube.com/watch?v=pU_rG0w0bsA
MindStorms
プログラミング可能なLEGOのおもちゃ
ビジュアル言語でプログラミング
並列性の表現が容易
センサAにより処理1が制御され、センサBにより処理2が処理され...
http://gyazo.com/3b55f3632dc08f29e573bf137be13b91.png
Sensor-based program of Mindstorms
http://gyazo.com/a31f6c41ce3ef3131858044ce47ed7d1.png
Automator
Macintoshの各種操作を指示
http://gyazo.com/0a7f3224bcc395fc919f84a3ef4b36e2.png
Web service mashup
Finished in 2015
http://gyazo.com/fc4471a1378102c027ed7de43fac4e16.png
Quartz Composer
Mac graphic programming
http://gyazo.com/37f11b2c7428f29781af5969a40b2ee0.png
http://gyazo.com/0317269567ae67b98b8c0cc28df9b8da.png
Grasshopper
https://www.youtube.com/watch?v=xUeT5-popIA
ビジュアルプログラミングの課題
汎用化
大規模プログラムへの対応
自動レイアウト
ポータビリティ
テキスト言語に対する(大きな)優位性