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

## 概要

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

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

![IMG_5267.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/881f3b4d-6497-f06e-dd27-5adcec17cf9a.jpeg)

## 公式サイト
公式のWebサイト。日本語サイトは著者が翻訳メンテしています。本家サイトからのフォークのドキュメントとなっています。
- [本家webサイト](https://www.noodl.net/)
- [Noodlドキュメント：日本](https://noodl.main.jp/noodl-docs)
- [Noodlドキュメント：公式](https://docs.noodl.net/)

![IMG_5268.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/5d37ee20-f05b-59c7-78df-780f30c3b96e.jpeg)

## Noodlの学習

[Noodl Build your first app【Youtube】](https://www.youtube.com/watch?v=mUI_qxr6y6Q&list=PL2eC2vS4uVoOx1O9WxKvC_6zABDkuA2Ez)
Noodl紹介のチュートリアル。Todoリストをスクラッチから作成する6回の動画です。
[上記の日本語版](https://www.youtube.com/watch?v=Ig8YoehbEWQ)を作成しました。非公式ですがこちらも参考にしてください。

[Noodl 2.x - New Feature Highlights](https://www.youtube.com/watch?v=YQBndLl1phI&t=4s)
Noodl2.xの概要。現在非推奨の商用版Noodlですが、Noodlでできること。作成時のイメージをつかむことができるかと思います。

[Noodl2.x版レビュー](https://qiita.com/macole/items/2d5550f222308b335997)
Nood2.xの機能紹介。Noodl1.3からの比較など。Qitta上には他にもNoodlの記事が色々とあるので、日本語では一番の情報源になります。英語の場合は[DISCORD](https://discord.gg/umRupsc2f5)が一番の情報源になります。

![IMG_5255.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/5b98b017-8b05-034a-f78a-bbe4ec7d796e.jpeg)


## Noodl公式のチュートリアル動画(日本語)
--日本語　Noodl2.1ベース--
[【ver.2.1】Noodlハンズオン @オンライン](https://www.youtube.com/watch?v=vQ_xbrQFacY&feature=youtu.be)

--日本語　Noodl1.3ベース--
[【Beginnerコース】NoodlでUIデザインをしよう！XD連携/レイアウト編 @オンライン](https://www.youtube.com/watch?v=0gy5Jid-qpA&t=7865s)

[【Beginnerコース】 NoodlでUIデザインをしよう！インフォグラフィック編 @ オンライン](https://www.youtube.com/watch?v=oBakYg6MyiA&t=6666s)

[Noodl2.5H ハンズオン@オンライン](https://www.youtube.com/watch?v=DzvFNN8OehM)
Noodl x IoT x 音声認識

![IMG_5256.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/e345590c-5b15-ba83-6254-a6a8b73aaa16.jpeg)

## IoT系コミュニティ動画(IoTLT・ビジュアルプログラミング)
[ゆるメカトロ・Noodl・ビジュアルプログラミングで合同LT勉強会 2020/04/20](https://www.youtube.com/watch?v=cbPTc46UiTw&t=48s)
きさいちさん登壇テーマ「TeachebleMachineとNoodl」30:00から

[【オンライン】IoT縛りの勉強会! IoTLT vol.68](https://www.youtube.com/watch?v=ua-T8ul5u8A&t=2s)
私が登壇したテーマ「プロトタイプツールで職場の改善をしてみた」1:27:00から

![IMG_5258.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/7bc86548-c506-44f7-8abc-a1bebefba837.jpeg)


## Noodl公式のチュートリアル動画(英語　Noodl2.1ベース)
Noodl開発者の方々が作成されている動画なので。最新の情報・機能を確認できます。

### 基本操作チュートリアル

[Noodl 2.1 Tutorial - Introduction](https://www.youtube.com/watch?v=gDrCCpZqkMc&t=125s)
イントロダクション。SWitchノードを使ったボタンUIの作成方法。

[Noodl 2.1 Tutorial - Visual Basics](https://www.youtube.com/watch?v=mqTUH_ARRRk)
ビジュアルノード(GUI部分)の使い方。

[Noodl 2.1 Tutorial - Components](https://www.youtube.com/watch?v=CHNkg4WMFF0)
コンポーネント(部品)の作成方法と利用

### Noodl Coffee App チュートリアル

[StarCoffee: CMS App Walk-through](https://www.youtube.com/watch?v=05ysXf5XBuQ)
Coffe Appの概要とCMS連携の紹介。

[Noodl Coffee App Walkthrough](https://www.youtube.com/watch?v=9_SVkHZMxY4&t=112s)
ログインページの作成。SingUPノード、Userノードの使い方。

[Noodl Coffee App Tutorial - Login Page Visuals EP1](https://www.youtube.com/watch?v=zk0enoKIeQQ&t=1645s)
ログインページの作成。GUI編。

[Noodl GraphQL Module Walkthrough](https://www.youtube.com/watch?v=Rfrjr-U3lKI)
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](https://www.youtube.com/watch?v=z-_QzBRbcIk)
Todoタスク数でヘッダーの色を変化させる

[ToDo App Customization - Font Size](https://www.youtube.com/watch?v=4rKFG54yglY)
Todoタスク数でフォントサイズを変化させる

[ToDo App Customization - Weekday Color](https://www.youtube.com/watch?v=4o_uGVckt_c)
選択されている曜日に応じてヘッダーの背景色を変更する

[ToDo App Customization - Weather Data](https://www.youtube.com/watch?v=htED)
RESTノートを使ったWetherAPIデータの取得
都市の温度を取得して文字の色を変更する

[ToDo App Customization - Random Background Image](https://www.youtube.com/watch?v=9nuSOgjpvQc)
RESTノードを使った画像の取得
Imageノードを使った背景画像の設定

### Quick Tip & 事例
[Quick Tip - Importing font files](https://www.youtube.com/watch?v=P76v0Q38eKI)
QuickTip：フォントのファイルインポート

[Quick Tip - Importing CSS fonts](https://www.youtube.com/watch?v=lgMZZC6XoAs)
QuickTip：CSS Definitionノードを使ったフォントのインポート

[Quick tip - Horizontal list of cards with snapping](https://www.youtube.com/watch?v=x0nWHv2uCHI)
スナップするカードの水平配置

[elchika 自宅の温湿度計変化をモニタリングする](https://elchika.com/article/40dcf4d3-48dd-4971-917e-e200c622b971/)
obnizでBluethoothの温湿度計からデータを読み取り、Noodlで作成したダッシュボードに表示する例



### フォーラム&その他の情報源
公式フォーラムがDiscordに移行したことにより、Noodl公式のライブストリーミングなどがDiscordで提供される予定です。
- [公式フォーラム(旧)](https://forum.getnoodl.com/)
- [公式フォーラム(Discord)] (https://discord.com/invite/45WBbnC) 
- [日本語フォーラム:Slack](https://noodl-community.slack.com/)
- [Noodlプログラマ：JesperさんのGithub(追加moduleのサンプル)](https://github.com/NoodlJesper)
- [Noodlもくもく会：「Noodl」を使用されている方が集まってもくもく作業を行う会です。](https://noodl-mokumoku.connpass.com/)
 
##　まとめ
Noodlが完全オープンソース化されて完全無料で制約なく使えるようになりました。一方で、ネットを中心とした情報の多くは、非推奨となった商用Noodlの情報となっています。
しばらくの間は混乱しないよう気を付けてください。
最新の情報は公式コミュニティーのDiscordになります。Discord内では活発なトークが交わされていますので、気になる方は是非おいでください。