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

ビジュアルプログラミングIoTLT vol.8

Transcript

1. いろんなビジュアルプログラミング言語 を調べてみた @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
2. 某社のIoT エンジニリングマネージャ 書いたもの: 『図解速習DEEP LEARNING 』、 『機械学習の炊いたん。』シリーズ( 合同本) ほか すきなもの: 機械学習、グラフ、いろんな可視 化、Diagram as Code といった形とコードの 間、つくる、アジア・中東各国料理と音楽 t: @tomo-makes | GitHub: tomo_makes 自己紹介
3. 視覚認知を使うことのメリット 感覚記憶、短期記憶、長期記憶 視空間性と、言語性ワーキングメモリ 関連 情報可視化 データ可視化, Grammar of Graphics なぜビジュアル?
5. Visual Programing Languages = ビジュアルプログラミング言語 VPLs?
6. ビジュアルプログラミング言語（VPL ）とは、プログラム要素をテキストで 指定するのではなく、グラフィカルに操作してプログラムを作成することが できるプログラミング言語のことです。 -- https://en.wikipedia.org/wiki/Visual_programming_language より抄訳 VPLs の定義
7. プログラムをどのように視覚的に表現するかには、いろいろな種類がある。 「矩形と矢印」の考え方に基づいており、矩形や円を画面上のオブジェクト とし、それらを矢印や線や弧でつなぐものや、空間上でテキストやグラフィ ックシンボルを配置するものや、ブロック状のものなどがある。それぞれを 指す呼び方としては、アイコンベースの言語、フォームベースの言語、ダイ アグラムベースの言語などといった用語がある。 以上のような要素を操作するために、ほとんどの言語では、GUI が提供され ている。 -- ビジュアルプログラミング言語 - Wikipedia 日本語版より VPLs の定義
8. これらの類型化にはいくつかの方法がある この発表は "The maturity of visual programming"(2015) での類型をベー スとした カテゴリ毎に、特徴、ビジュアルでの表現方法の説明、言語例を挙げた 歴史、領域などで、こういうのもあるよ! といったご意見是非教えてください! VPLs の種類
9. VPLs いくつ言えるかな
10. 世の中の数多あるVPLs を俯瞰したい欲求 VPLs の種類
11. ブロック型(Block- based) フロー型(Flow-based) 　・汎用 　・ビット列、数値 　・形状 　・音、画像、映像 　・大量データの連携 　・深層学習 その他 　・イベント駆動ルール VPLs の種類
12. VPLs の歴史
13. ブロック型言語(Block-based VPLs)
14. 手続き型のプログラミング言語の1 行から数行を、ブロックに置き換え、それ らを組み立てることで、直感的にプログラミングを行える プログラミング言語をタイピングすることが難しい年代からでも取り組め、 主に教育用途で使われている 2000 年代初頭からプロトタイピングが始まり、2006 年に発表された教育用プ ログラミング環境 Scratch が非常に有名 背景と特徴
15. コードのあるひとかたまりが、ブロックで表現される それらをドラッグ& ドロップで「組み立て」ていくことで、ソースコードと等 価な手続きが出来上がる 表現方法 出典: 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
16. ブロック型 Scratch MakeCode Blockly
17. 日本の小学校でのプログラ ミング教育でも多く取り上 げられ、厚切りジェイソン のNHK 番組 も話題となり ました。 https://scratch.mit.edu/ Scratch (MIT) 教育向けに最もよく知られた実 行環境
18. 書籍も多く発売されており、例 えば こちら には、以下のよう な学年との対応表がある ブロックは、日本語へのローカ ライズだけでなく、低学年でも 読みやすいよう、ひらがな化さ れたものもある Scratch (MIT) 出典: 親子でかんたん スクラッチプログラミングの図鑑
19. 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
20. 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
21. 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 を活用しています
22. フロー型言語(Flow-based VPLs)
23. フローベースのビジュアルプログラミング言語は、 手続き型のフローチャートをそのまま表現したものと、 データフローベースのものなど、異なる設計思想に基づくものがある 単純なノードとそれを接続する線という見せ方を採用したものから、関数型 プログラミング、ノイマン型コンピュータの限界に対して何をすべきか、とい った思考や課題解決に基づき作られているものまで様々 また、そのフローを通してやりとりされる「データ」にも様々な種類がある 背景と特徴
24. 何らかのイベントがトリガーさ れると、線で結ばれたノード を、データが通り抜ける 言語設計に依存しますが、それ らのデータは見かけ上または実 際に、並列に処理される 各ノードを通過する毎に何らか の処理や変換が行われる 最終的に処理済みのデータがど こかに渡される 表現方法
25. ノード間を流れていくデータ は、数値だけではなく、ビット 列、画像、映像、音、大規模な テーブルデータなど、様々なも のがある 通常のプログラミングか ら、組み込み開発、メディ ア作品の制作に使われるツ ール、データの転送・管理 などに特化したものから機 械学習用のソフトウェアま で、幅広い用途がある 表現方法
26. フロー型 Node-RED | Noodl LabVIEW | Simulink Grasshopper | Houdini | Nodi Pd | Stamper | TouchDesigner Apache NiFi
27. 汎用 JavaScript(Node.js) の開発をフローベースで行える
28. IBM の開発していたものがオー プンソース化 Web 上の日本語チュートリアル や、IoT の実例を紹介する書籍 などが発売 ラピッドプロトタイピング用途 に使うことができる https://nodered.org/ Node-RED
29. デバイス接続からUI プロトタイ プまで! ラピッドプロトタイピング用途 に使うことができる https://www.noodl.net/ Noodl
30. 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
31. 数値、ビット列 組み込み開発、シミュレーション、モデリング
32. 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 /
33. 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
34. 形( 頂点、平面、立体などオブジェクト) 建築、デザイン用途のプロシージャルモデリング
35. 「プロシージャルモデリング（Procedural Modeling ）」とは、プロシージ ャル（数式や処理を組み合わせ）を利用して3DCG のモデル（物体）を生成 することを指します。プロシージャルとは、もともと「手抜き型」や「手続 き型」という意味で、数式を用いて何らかの法則に従ってあらかじめ準備し ておいた処理を行います。 -- プロシージャルモデリングとは 参考
36. 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
37. 作例。建築など で、アルゴリズム から生み出される デザインの裏に、 こういったソフト ウェアが活用され ているらしい Grasshoppper 出典: 建築/ プロダクトのための、 G r a s s h o p p e r クックブック
38. プロシージャルに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
39. 日本語での解説書籍も 複数発売 書影から、できること の幅広さが伺える Houdini 出典: 理論と実践で学ぶH o u d i n i
40. プロシージャルモデリングを、 Web ベースで扱えるものを個人 で開発されている https://nodi3d.com/ Nodi
41. 音、画像や映像 VJ 、メディア作品のオーサリングに使われる
42. 入門から、音、画像に対す る処理までの チュートリ アル がある 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
43. 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
44. カナダ 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
45. 「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
46. ( 大量) データの連携
47. 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 /
48. その他のデータフロー プログラミング VPLs ではないが、コードからグラフが 生成されるもの等
49. ノードをつなぐ線を通り抜 けてゆくデータへの処理 データフロープログラミン グの概念に基づく 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
50. ニューラルネットワークな どの機械学習アプリケーシ ョン適用で知られる ビジュアルプログラミング 言語とは言えませんが、デ ータフロープログラミング との関係性から取り上げた 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
51. イベント駆動ルール IFTTT Zapier Power Automate
52. トリガー、処理、 出力先をそれぞれ 定義 予め準備されたラ イブラリーから選 び、簡易に組み立 てられる 代表的なものは IFTTT, Zapier, Power Automate など 表現方法 出典: h t t p s : / / z a p i e r. c o m /
53. 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 /
54. ブロック型(Block- based) フロー型(Flow-based) 　・汎用 　・ビット列、数値 　・形状 　・音、画像、映像 　・大量データの連携 　・深層学習 その他 　・イベント駆動ルール まとめ
55. 記事 ビジュアルプログラミング言語を俯瞰する(Scratch からNode-RED 、 TouchDesigner やIFTTT まで) - Qiita を元に再構成しました ビジュアルプログラミング言語の内、実際に触ってみたもの、少なくともデ モなどを見られたものを中心に紹介しました。 わたしのLove なあれがないよ! っていう方ごめんなさい! より幅広いリストは 英語版Wikipedia - Visual Programing Language に取 り上げられています 歴史、領域など、おそらくスッポリ抜けているところがあると思うので、類型 および追加するとよい項目について、ご意見いただけたら嬉しいです おわりに