新しいコアノードを作成する

Noodlは非常に拡張性が高いです。開発者として、新しいモジュールを追加して新しい機能を提供したり、データへの接続を作成したり、プロジェクト用の新しいビジュアルコンポーネントを作成することができます。このガイドでは、Noodlコマンドラインツールの動作方法と、単一の新しいノードを含む拡張モジュールの作成方法を示します。このノードは、Noodlの標準コアノードのように振る舞い、表示されます。

note

このガイドでは、Node.jsとnpmがインストールされていることが必要です。

概要

このガイドでは、Noodlモジュールの作成方法を説明します。Noodlモジュールには、プロジェクトで使用するための新しいコアノードを含めることができます。たとえば、既存のJavaScriptライブラリをラップして、Noodl内のノードとして公開することができます。

一般的なプロセスは次のとおりです

• モジュールのコードを書くための新しいモジュールプロジェクトを設定します。
• 開発中にプロジェクト内でモジュールをテストします。
• 完了したら、モジュールをビルドして使用したいプロジェクトにデプロイします。

Noodl CLIのインストール

まず、Noodlコマンドラインインターフェイスをインストールする必要があります。CLIがまだインストールされていない場合は、npmを介してインストールできます。

npm install -g @noodl/noodl-cli

モジュールプロジェクトの作成

CLIツールを使用すると、テンプレートから新しいNoodlモジュールを簡単に作成できます：

noodl-cli new lib ./my-noodl-module

作成されるディレクトリ名を指定する必要があります。ディレクトリには、開始に必要なすべてが含まれます。上記のコマンドを使用すると、_my-noodl-module_ディレクトリが作成されます。

新しく作成されたディレクトリには以下の構造があります：

my-noodl-module/
    module/
    project/
    tests/
    icon.png
    module.json

ライブラリモジュールの内容についていくつか注意点：

• moduleディレクトリには、モジュールのソースコード、ビルドスクリプト、およびフォント、cssなどのアセットが含まれています。
• projectとtestsフォルダは無視してかまいません

まず、moduleディレクトリに入り、必要な依存関係をインストールします：

cd module

npm install

モジュールがNPMを通じて他の外部ライブラリを使用する場合、それらもインストールされます。

モジュールの開発

module/src/index.jsファイルを編集することで主にモジュールを開発します。開始時には、ボイラープレートとして使用できる例示コードが含まれています。NoodlモジュールSDKの公式ドキュメントは現在ありませんが、こちらでいくつかのモジュールのソースコードを見ることができます。

モジュールを開発している間、ソースコードに変更を加えるたびに自動的にパッケージ化され、プロジェクトにデプロイされるようにしたいでしょう。そのためにはまず、テストプロジェクトとなる新しいNoodlプロジェクトを作成する必要があります。それが完了したら、設定（歯車アイコン）をクリックして「プロジェクトフォルダを開く」を選択し、そのプロジェクトのローカルフォルダの場所を見つけます。

そのフォルダの完全なパスをコピーします。次のステップで必要になります。

次に、/module/src/webpack.config.jsファイルを開きます。このファイルには、モジュールをデプロイする場所が指定されています。テストプロジェクトにデプロイされるようにしたいので、var outputPath = ...を含む行を次のように更新します。

var outputPath = path.resolve(
  '<プロジェクトの絶対パス>',
  'noodl_modules/' + pjson.name
);

次に、modules/フォルダにある

ターミナルウィンドウに戻り、以下を入力します。

npm run dev

これにより、開発モードが開始され、ソースコードに変更を加えるたびにモジュールが自動的に再ビルドされ、プロジェクトに再デプロイされます。

module/src/index.jsのボイラープレートコードから始めた場合、プロジェクトには既にモジュールがあります。Noodlプロジェクトを閉じて再度開くか、ノードエディタにいるときにctrl+R（Windows）/ cmd+R（Mac）を押してリロードします。次に、ノードピッカーを開き、「外部ライブラリ」の下に新しいコアノードが表示されるはずです。

モジュールコードの概要

_index.js_ファイルにはノードのコードが含まれています。お気に入りのエディタで開いてみてください。ファイルには、シンプルな新しいコアノードのためのボイラープレートコードが含まれています。さまざまなセクションを見てみましょう：

まず、Noodl SDKをインポートする必要があります。

const Noodl = require('@noodl/noodl-sdk');

次に、新しいノードのコードを定義します。

const MyFullNameNode = Noodl.defineNode({
  category: 'My Utils',
  name: 'Full Name',
  inputs: {
    FirstName: 'string',
    LastName: 'string',
  },
  outputs: {
    FullName: 'string',
  },
  changed: {
    FirstName: function () {
      this.setOutputs({
        FullName: this.inputs.FirstName + ' ' + this.inputs.LastName,
      });
    },
    LastName: function () {
      this.setOutputs({
        FullName: this.inputs.FirstName + ' ' + this.inputs.LastName,
      });
    },
  },
});

• ノードのnameを指定する必要があります。これは、新しいノードを作成するときにリストに表示される名前です。
• 任意でcategoryを指定することもできます。これもNoodlで新しいノードをポップアップする際に使用されます。

最後に、モジュールの仕様を定義する必要があります。

Noodl.defineModule({
  nodes: [MyFullNameNode],
  setup() {
    //これはスタートアップ時に一度呼ばれます
  },
});

再び、GitHubでNoodl Repoをチェックして、いくつかのモジュール例を確認してください。

モジュールのデプロイ

モジュールに満足したら、適切なデプロイを行うことができます。modules/フォルダにあるターミナルウィンドウに戻り、以下を入力します。

npm run build

これにより、モジュールの最適化バージョンがデプロイされます。別のプロジェクトでモジュールを使用したい場合は、/module/src/webpack.config.jsのパスを変更してnpm run buildを再度実行してください。