世にあるいろんなビジュアルプログラミング言語を調べてみた

by tomo-makes

Slide 1

Slide 1 text

いろんなビジュアルプログラミング言語を調べてみた @tomo-makes P h o t o b y M a t t h e w H e n r y o n U n s p l a s h

Slide 2

Slide 2 text

某社のIoT エンジニリングマネージャ書いたもの: 『図解速習DEEP LEARNING 』、『機械学習の炊いたん。』シリーズ( 合同本) ほかすきなもの: 機械学習、グラフ、いろんな可視化、Diagram as Code といった形とコードの間、つくる、アジア・中東各国料理と音楽 t: @tomo-makes | GitHub: tomo_makes 自己紹介

Slide 3

Slide 3 text

視覚認知を使うことのメリット感覚記憶、短期記憶、長期記憶視空間性と、言語性ワーキングメモリ関連情報可視化データ可視化, Grammar of Graphics なぜビジュアル?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Visual Programing Languages = ビジュアルプログラミング言語 VPLs?

Slide 6

Slide 6 text

ビジュアルプログラミング言語（VPL ）とは、プログラム要素をテキストで指定するのではなく、グラフィカルに操作してプログラムを作成することができるプログラミング言語のことです。 -- https://en.wikipedia.org/wiki/Visual_programming_language より抄訳 VPLs の定義

Slide 7

Slide 7 text

プログラムをどのように視覚的に表現するかには、いろいろな種類がある。「矩形と矢印」の考え方に基づいており、矩形や円を画面上のオブジェクトとし、それらを矢印や線や弧でつなぐものや、空間上でテキストやグラフィックシンボルを配置するものや、ブロック状のものなどがある。それぞれを指す呼び方としては、アイコンベースの言語、フォームベースの言語、ダイアグラムベースの言語などといった用語がある。以上のような要素を操作するために、ほとんどの言語では、GUI が提供されている。 -- ビジュアルプログラミング言語 - Wikipedia 日本語版より VPLs の定義

Slide 8

Slide 8 text

これらの類型化にはいくつかの方法があるこの発表は "The maturity of visual programming"(2015) での類型をベースとしたカテゴリ毎に、特徴、ビジュアルでの表現方法の説明、言語例を挙げた歴史、領域などで、こういうのもあるよ! といったご意見是非教えてください! VPLs の種類

Slide 9

Slide 9 text

VPLs いくつ言えるかな

Slide 10

Slide 10 text

世の中の数多あるVPLs を俯瞰したい欲求 VPLs の種類

Slide 11

Slide 11 text

ブロック型(Block- based) フロー型(Flow-based) 　・汎用　・ビット列、数値　・形状　・音、画像、映像　・大量データの連携　・深層学習その他　・イベント駆動ルール VPLs の種類

Slide 12

Slide 12 text

VPLs の歴史

Slide 13

Slide 13 text

ブロック型言語(Block-based VPLs)

Slide 14

Slide 14 text

手続き型のプログラミング言語の1 行から数行を、ブロックに置き換え、それらを組み立てることで、直感的にプログラミングを行えるプログラミング言語をタイピングすることが難しい年代からでも取り組め、主に教育用途で使われている 2000 年代初頭からプロトタイピングが始まり、2006 年に発表された教育用プログラミング環境 Scratch が非常に有名背景と特徴

Slide 15

Slide 15 text

コードのあるひとかたまりが、ブロックで表現されるそれらをドラッグ& ドロップで「組み立て」ていくことで、ソースコードと等価な手続きが出来上がる表現方法出典: h t t p s : / / d e v e l o p e r s . g o o g l e . c o m / b l o c k l y

Slide 16

Slide 16 text

ブロック型 Scratch MakeCode Blockly

Slide 17

Slide 17 text

日本の小学校でのプログラミング教育でも多く取り上げられ、厚切りジェイソンのNHK 番組も話題となりました。 https://scratch.mit.edu/ Scratch (MIT) 教育向けに最もよく知られた実行環境

Slide 18

Slide 18 text

書籍も多く発売されており、例えばこちらには、以下のような学年との対応表があるブロックは、日本語へのローカライズだけでなく、低学年でも読みやすいよう、ひらがな化されたものもある Scratch (MIT) 出典: 親子でかんたんスクラッチプログラミングの図鑑

Slide 19

Slide 19 text

MakeCode は、Blockly をフロントエンドのベースとして使用 Scratch 同様、実行環境を伴う micro:bit 用実行環境に始まり、対象メニューを増やしてきた ( みんな大好き) マインクラフト題材のチュートリアル例もある https://www.microsoft.com/ja- jp/makecode MakeCode (Microsoft) 出典: h t t p s : / / w w w. y o u t u b e . c o m / w a t c h ? v = N E e n O T q M v 4 8

Slide 20

Slide 20 text

Blockly はブロック型言語のフロントエンド様々な言語へのトランスパイラとして動作ブロック型言語の編集画面とソースコード画面を行き来できる様々なオープンソースのブロック型言語プロジェクトに採用最新のScratch3.0 にも採用 https://developers.google.com/bl ockly Blockly (Google) 出典: h t t p s : / / d e v e l o p e r s . g o o g l e . c o m / b l o c k l y

Slide 21

Slide 21 text

Blockly Developer Summit 2019 や2018 に、ブロック型言語間の交流が! 他にも以下プロジェクトで使われている Arduino https://ardublockly.embeddedlog.com/index.html, https://github.com/BlocklyDuino/BlocklyDuino ROS http://wiki.ros.org/blockly OCaml https://github.com/harukamm/ocaml-blockly Python https://think.cs.vt.edu/blockpy/ Processing https://github.com/kut-tktlab/blockly-processing UIFlow https://flow.m5stack.com/ 縁の下の力持ち: Blockly (Google) Scratch 、MakeCode 共に、Blockly を活用しています

Slide 22

Slide 22 text

フロー型言語(Flow-based VPLs)

Slide 23

Slide 23 text

フローベースのビジュアルプログラミング言語は、手続き型のフローチャートをそのまま表現したものと、データフローベースのものなど、異なる設計思想に基づくものがある単純なノードとそれを接続する線という見せ方を採用したものから、関数型プログラミング、ノイマン型コンピュータの限界に対して何をすべきか、といった思考や課題解決に基づき作られているものまで様々また、そのフローを通してやりとりされる「データ」にも様々な種類がある背景と特徴

Slide 24

Slide 24 text

何らかのイベントがトリガーされると、線で結ばれたノードを、データが通り抜ける言語設計に依存しますが、それらのデータは見かけ上または実際に、並列に処理される各ノードを通過する毎に何らかの処理や変換が行われる最終的に処理済みのデータがどこかに渡される表現方法

Slide 25

Slide 25 text

ノード間を流れていくデータは、数値だけではなく、ビット列、画像、映像、音、大規模なテーブルデータなど、様々なものがある通常のプログラミングから、組み込み開発、メディア作品の制作に使われるツール、データの転送・管理などに特化したものから機械学習用のソフトウェアまで、幅広い用途がある表現方法

Slide 26

Slide 26 text

Slide 27

Slide 27 text

汎用 JavaScript(Node.js) の開発をフローベースで行える

Slide 28

Slide 28 text

IBM の開発していたものがオープンソース化 Web 上の日本語チュートリアルや、IoT の実例を紹介する書籍などが発売ラピッドプロトタイピング用途に使うことができる https://nodered.org/ Node-RED

Slide 29

Slide 29 text

デバイス接続からUI プロトタイプまで! ラピッドプロトタイピング用途に使うことができる https://www.noodl.net/ Noodl

Slide 30

Slide 30 text

Flow-based Programming は、1970 年代前半にJ. Paul Morrison 氏が発明したものとされます。余談ですが、御年80 歳を超える今もGitHub 上にアクティブに発信されています。氏は、NoFlo に端を発し、Node-RED などに広がりを見せた"FBP" は、"FBP" のエッセンスを取り入れており一定の評価はできるのだが、氏の提供した真の"FBP" ではない、としています。興味を持たれた方は、こちらから全文が読めます。 NoFlo は、FBP に光をあてた功績をたたえつつ、FBP と異なる点がある。手続き型、アルゴリズミック、1 つのことを1 回に行う、という従来型のプログラミングに近い。configurable modularity, componentry, visual design を従来型プログラミングに持ち込むこと自体は意味があるが... 開発者体験, メンテナンス性の観点では、従来型のプログラミングと変わらない。 -- http://www.jpaulmorrison.com/fbp/noflo.html より抄訳 ( 参考) "Classic" flow based programming

Slide 31

Slide 31 text

数値、ビット列組み込み開発、シミュレーション、モデリング

Slide 32

Slide 32 text

https://www.ni.com/ja- jp/shop/labview.html LabVIEW 出典: h t t p : / / w w w. n i . c o m / t u t o r i a l / 6 9 5 1 / e n /

Slide 33

Slide 33 text

https://jp.mathworks.com/produc ts/simulink.html Simulink (MATLAB) 出典: h t t p s : / / j p . m a t h w o r k s . c o m / p r o d u c t s / s i m u l i n k . h t m l

Slide 34

Slide 34 text

形( 頂点、平面、立体などオブジェクト) 建築、デザイン用途のプロシージャルモデリング

Slide 35

Slide 35 text

「プロシージャルモデリング（Procedural Modeling ）」とは、プロシージャル（数式や処理を組み合わせ）を利用して3DCG のモデル（物体）を生成することを指します。プロシージャルとは、もともと「手抜き型」や「手続き型」という意味で、数式を用いて何らかの法則に従ってあらかじめ準備しておいた処理を行います。 -- プロシージャルモデリングとは参考

Slide 36

Slide 36 text

https://www.rhino3d.com/6/new/ grasshopper Grasshoppper (Rhino) 出典: h t t p s : / / v i m e o p r o . c o m / r h i n o / g r a s s h o p p e r - g e t t i n g - s t a r t e d - b y - d a v i d - r u t t e n

Slide 37

Slide 37 text

作例。建築などで、アルゴリズムから生み出されるデザインの裏に、こういったソフトウェアが活用されているらしい Grasshoppper 出典: 建築/ プロダクトのための、 G r a s s h o p p e r クックブック

Slide 38

Slide 38 text

プロシージャルに3DCG や、アニメーションを制作できる Side FX 社が提供 Houdini Apprentice という無償ライセンス版あり https://www.sidefx.com/ Houdini 出典: h t t p s : / / w w w. y o u t u b e . c o m / w a t c h ? v = J 9 1 m Q 9 O J q 6 s

Slide 39

Slide 39 text

日本語での解説書籍も複数発売書影から、できることの幅広さが伺える Houdini 出典: 理論と実践で学ぶH o u d i n i

Slide 40

Slide 40 text

プロシージャルモデリングを、 Web ベースで扱えるものを個人で開発されている https://nodi3d.com/ Nodi

Slide 41

Slide 41 text

音、画像や映像 VJ 、メディア作品のオーサリングに使われる

Slide 42

Slide 42 text

入門から、音、画像に対する処理までのチュートリアルがある Max はPd の商用版 https://puredata.info/ Pd(Pure Data) 出典: h t t p s : / / w w w. y o u t u b e . c o m / w a t c h ? v = j A D u L t s F q k k

Slide 43

Slide 43 text

p5.js(Processing) を使った、フローベースのクリエイティブコーディング環境関連論文はこちら https://p5stamper.com/ Stamper 出典: h t t p s : / / v i m e o . c o m / 3 9 2 4 5 4 8 0 7

Slide 44

Slide 44 text

カナダ Derivative 社の提供する商用ソフトウェア ( 無償でつかえるコミュニティ版もある) 日本語リソースとしては、 TDSW YouTube Channel が最近盛んに動画チュートリアルを発信されている類似のものにvvvv 等 https://derivative.ca/ TouchDesigner 出典: h t t p s : / / w w w. y o u t u b e . c o m / w a t c h ? v = h b Z j g H S C A P I

Slide 45

Slide 45 text

「Visual Thinking with TouchDesigner 　プロが選ぶリアルタイムレンダリング＆プロトタイピングの極意」に、現場でどのように使われているか、実例に触れられていて面白い紅白歌合戦でUnity と組み合わせ活用された例なども TouchDesigner 出典: h t t p s : / / w w w. y o u t u b e . c o m / w a t c h ? v = h b Z j g H S C A P I

Slide 46

Slide 46 text

( 大量) データの連携

Slide 47

Slide 47 text

ETL のように、あるストレージやデータベースから他方への連携、連携時の変換、といった内容を担います。そういった操作をグラフィカルに行うことができます。 https://nifi.apache.org/ Apache Nifi 出典: h t t p s : / / n i f i . a p a c h e . o r g /

Slide 48

Slide 48 text

その他のデータフロープログラミング VPLs ではないが、コードからグラフが生成されるもの等

Slide 49

Slide 49 text

ノードをつなぐ線を通り抜けてゆくデータへの処理データフロープログラミングの概念に基づく GUI のエディタはない https://github.com/google/m ediapipe MediaPipe ストリーミングメディアへML を適用するためのライブラリ出典: h t t p s : / / a i . g o o g l e b l o g . c o m / 2 0 1 9 / 0 8 / o n - d e v i c e - r e a l - t i m e - h a n d - t r a c k i n g - w i t h . h t m l

Slide 50

Slide 50 text

ニューラルネットワークなどの機械学習アプリケーション適用で知られるビジュアルプログラミング言語とは言えませんが、データフロープログラミングとの関係性から取り上げた https://www.tensorflow.org/ TensorFlow 様々なタスクのデータフローや微分可能なプログラミング用のOSS ライブラリ出典: h t t p s : / / w w w. t e n s o r f l o w. o r g / t e n s o r b o a r d / g r a p h s

Slide 51

Slide 51 text

イベント駆動ルール IFTTT Zapier Power Automate

Slide 52

Slide 52 text

トリガー、処理、出力先をそれぞれ定義予め準備されたライブラリーから選び、簡易に組み立てられる代表的なものは IFTTT, Zapier, Power Automate など表現方法出典: h t t p s : / / z a p i e r. c o m /

Slide 53

Slide 53 text

https://flow.microsoft.com/ja -jp/ Power Automate ( 旧Microsoft Flow) 出典: h t t p s : / / f l o w. m i c r o s o f t . c o m / j a - j p / t e m p l a t e s /

Slide 54

Slide 54 text

ブロック型(Block- based) フロー型(Flow-based) 　・汎用　・ビット列、数値　・形状　・音、画像、映像　・大量データの連携　・深層学習その他　・イベント駆動ルールまとめ

Slide 55

Slide 55 text

記事ビジュアルプログラミング言語を俯瞰する(Scratch からNode-RED 、 TouchDesigner やIFTTT まで) - Qiita を元に再構成しましたビジュアルプログラミング言語の内、実際に触ってみたもの、少なくともデモなどを見られたものを中心に紹介しました。わたしのLove なあれがないよ! っていう方ごめんなさい! より幅広いリストは英語版Wikipedia - Visual Programing Language に取り上げられています歴史、領域など、おそらくスッポリ抜けているところがあると思うので、類型および追加するとよい項目について、ご意見いただけたら嬉しいですおわりに

Slide 56

Slide 56 text

No content