ビジュアルプログラミングツールNoodl学習の情報源 #UX

概要

2024年2月末にNoodlは完全オープンソース化されました。
これまでのNoodlは商用版Noodlと呼び非推奨となっています。現在のNoodlはオープンソース版Noodlと呼ばれ。バージョンもあらためてNoodl 1.0からスタートとなりました。
これに合わせ内容を最新(2024年3月時点)に見直しました。

Noodlアドベントカレンダー2020の3日目！
ということで、Noodlを自習するための情報源を紹介します。
ビジュアルプログラミングは慣れればとても使いやすいのですが、文字だけだとどうしてもイメージしにくい部分があるため、YoutubeのNoodl公式チュートリアル動画を中心に紹介していきます。

公式サイト

公式のWebサイト。日本語サイトは著者が翻訳メンテしています。本家サイトからのフォークのドキュメントとなっています。

Noodlの学習

Noodl Build your first app【Youtube】
Noodl紹介のチュートリアル。Todoリストをスクラッチから作成する6回の動画です。
上記の日本語版を作成しました。非公式ですがこちらも参考にしてください。

Noodl 2.x - New Feature Highlights
Noodl2.xの概要。現在非推奨の商用版Noodlですが、Noodlでできること。作成時のイメージをつかむことができるかと思います。

Noodl2.x版レビュー
Nood2.xの機能紹介。Noodl1.3からの比較など。Qitta上には他にもNoodlの記事が色々とあるので、日本語では一番の情報源になります。英語の場合はDISCORDが一番の情報源になります。

Noodl公式のチュートリアル動画(日本語)

--日本語　Noodl2.1ベース--
【ver.2.1】Noodlハンズオン @オンライン

--日本語　Noodl1.3ベース--
【Beginnerコース】NoodlでUIデザインをしよう！XD連携/レイアウト編 @オンライン

【Beginnerコース】 NoodlでUIデザインをしよう！インフォグラフィック編 @ オンライン

Noodl2.5H ハンズオン@オンライン
Noodl x IoT x 音声認識

IoT系コミュニティ動画(IoTLT・ビジュアルプログラミング)

ゆるメカトロ・Noodl・ビジュアルプログラミングで合同LT勉強会 2020/04/20
きさいちさん登壇テーマ「TeachebleMachineとNoodl」30:00から

【オンライン】IoT縛りの勉強会! IoTLT vol.68
私が登壇したテーマ「プロトタイプツールで職場の改善をしてみた」1:27:00から

Noodl公式のチュートリアル動画(英語　Noodl2.1ベース)

Noodl開発者の方々が作成されている動画なので。最新の情報・機能を確認できます。

基本操作チュートリアル

Noodl 2.1 Tutorial - Introduction
イントロダクション。SWitchノードを使ったボタンUIの作成方法。

Noodl 2.1 Tutorial - Visual Basics
ビジュアルノード(GUI部分)の使い方。

Noodl 2.1 Tutorial - Components
コンポーネント(部品)の作成方法と利用

Noodl Coffee App チュートリアル

StarCoffee: CMS App Walk-through
Coffe Appの概要とCMS連携の紹介。

Noodl Coffee App Walkthrough
ログインページの作成。SingUPノード、Userノードの使い方。

Noodl Coffee App Tutorial - Login Page Visuals EP1
ログインページの作成。GUI編。

Noodl GraphQL Module Walkthrough
GraphQLモジュールを使ったデータの取得。バックエンドDataCMS。

[Noodl Coffee App Tutorial Ep2 - Cloud Services and Users CoffeeShop Tutorial Ep2]
(https://www.youtube.com/watch?v=QN9f7s4gweY&t=879s)
ユーザ管理。ログイン画面、SingUP画面の作成

Todoアプリのカスタマイズ

ToDo App Customization - Colorful Header
Todoタスク数でヘッダーの色を変化させる

ToDo App Customization - Font Size
Todoタスク数でフォントサイズを変化させる

ToDo App Customization - Weekday Color
選択されている曜日に応じてヘッダーの背景色を変更する

ToDo App Customization - Weather Data
RESTノートを使ったWetherAPIデータの取得
都市の温度を取得して文字の色を変更する

ToDo App Customization - Random Background Image
RESTノードを使った画像の取得
Imageノードを使った背景画像の設定

Quick Tip & 事例

Quick Tip - Importing font files
QuickTip：フォントのファイルインポート

Quick Tip - Importing CSS fonts
QuickTip：CSS Definitionノードを使ったフォントのインポート

Quick tip - Horizontal list of cards with snapping
スナップするカードの水平配置

elchika 自宅の温湿度計変化をモニタリングする
obnizでBluethoothの温湿度計からデータを読み取り、Noodlで作成したダッシュボードに表示する例

フォーラム&その他の情報源

公式フォーラムがDiscordに移行したことにより、Noodl公式のライブストリーミングなどがDiscordで提供される予定です。

##　まとめ
Noodlが完全オープンソース化されて完全無料で制約なく使えるようになりました。一方で、ネットを中心とした情報の多くは、非推奨となった商用Noodlの情報となっています。
しばらくの間は混乱しないよう気を付けてください。
最新の情報は公式コミュニティーのDiscordになります。Discord内では活発なトークが交わされていますので、気になる方は是非おいでください。

ビジュアルプログラミングツールNoodl学習の情報源

概要