Tweet
Tweet

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

フロー型 Node-RED | Noodl LabVIEW | Simulink Grasshopper | Houdini | Nodi Pd | Stamper | TouchDesigner Apache NiFi

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