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