n8nとは...？

ノーコードなワークフロー制作ツール。処理を自動化したり、Webhookで処理を開始するなど、複雑になりそうな処理を図に落とし込んで管理しやすくできます。ただし、ノーコードを謳われていますが、実際には JavaScript を書く必要がほとんどだと思うので、ノーコードとしての期待は薄いと思った方が良さそうです。

https://n8n.io/

※このスクラップでは Windows11 の環境での操作を想定しています。

masa5714

n8nのインストールと起動

とても簡単にインストールできるのでここでは触れないでおきます。
開始も n8n start を実行するだけで、すぐに始められます。

masa5714

カスタムノードを作成する

ノードとは下記のような四角で表されるもので、処理の指示を行うためのブロックみたいなものです。そんで、カスタムノードというものはこのノードを自分で独自処理を追加するためのもの。

カスタムノードの作り方

こちらの公式のスターターキットを使用しましょう。
「Using this starter」という見出しの4番までは特に難しいものではないので、指示通りに済ませておいてください。

5. Browse the examples in /nodes and /credentials. Modify the examples, or replace them with your own nodes.
は特に触れる必要はないので、このままにしておきます。

6. Update the package.json to match your details.

package.json の name を変更します。
n8n-nodes- を先頭の文字列として、適当な名前を付けておきましょう。
ここでは例として n8n-nodes-my-test としています。

7. Run npm run lint to check for errors or npm run lintfix to automatically fix errors when possible.

npm run build

でカスタムノードをビルドします。
その後、

npm link

でローカル内で使えるパッケージ名としてシンボリックリンクを張ります。
ここで張ったシンボリックリンクは、先程の package.json で指定した name の値が使われます。ですので、この例では n8n-nodes-my-test が npmパッケージとしての名前となります。

次にコマンドプロンプトで C:\Users\【あなたのユーザー名】\.n8n\ ディレクトリに移動します。

mkdir custom

などで適当にフォルダを作っておき、そのフォルダの中に移動してください。

npm init

を実行してEnter連打で完了し、package.json が作られているか確認しましょう。
作られていたら、

npm link n8n-nodes-my-test

※ npm link 【先程張ったシンボリックリンク】

を実行し、 ls などで node_modules が作られているか確認して準備完了です！

masa5714

カスタムノードを使うときの注意点

カスタムノードのコードを編集した後は、必ず npm run build を実行し、
n8n start で再起動させる必要があります。

再起動を忘れると古い状態のままなので意識して注意しておきましょう。（くそめんどい）

masa5714

先程追加したカスタムノードを確認してみよう

n8n start で起動すると、ローカルホストのパスが出力されます。
それをブラウザで開いてみましょう。

「+」ボタンをクリックすると右側に検索フォームが出現します。
「Example」と入れると「Example Node」というものが出てくるかと思います。

これが先程追加したカスタムノードです！

こんな感じで自分で作ったノードを追加できるというわけなのです。

masa5714

カスタムノードを追加するには？

masa5714

カスタムノードで次のノードに値を渡すには？

	async execute(this: IExecuteFunctions): Promise<INodeExecutionData[][]> {
		const items = this.getInputData();

		items[0].json['numbers'] = [0, 1, 2, 3];

		return this.prepareOutputData(items);
	}

※重要なポイントだけを書き出しています。

この例では、 const item['numbers'] = [0, 1, 2 , 3]; のようなデータが入っています。

次のノードの左側に INPUTとしてのデータが入ってきます。
つまり、カスタムノードで渡すように書いた値が入っています。

右側には現在のノードで処理をした結果が入っています。
（画像ではソートするはずなのに動いていません。この辺は気にしないてください...。）

masa5714

Webhook ノードをいつでもリクエスト受け付けられるようにする

Webhookノードは Execute Workflow で待機しなければ動かない、と思いきや、これはテストモードになっているから動かないのである。

プロダクションモード（本番モード）にすればいつでもリクエストを受け付けてくれるようになる。

ワークフローの右上にある「Inactive」をアクティブ化する必要がある。

次にWebhookノードの Production タブの URL にリクエストするようにしよう。
このProductionタブのURLにリクエストを送ればいつでも実行してくれる。

masa5714

カスタムノードに入力項目を用意する

export class PlaywrightNode implements INodeType {
	description: INodeTypeDescription = {
		displayName: 'Playwrightノード',
		name: 'playwrightNode',
		group: ['transform'],
		version: 1,
		description: 'Playwrightでスクレイピングするためのノード',
		defaults: {
			name: 'Playwright Node',
		},
		inputs: ['main'],
		outputs: ['main'],
		properties: [
			// Node properties which the user gets displayed and
			// can change on the node.
			{
				displayName: '対象URL',
				name: 'targetURL',
				type: 'string',
				default: '',
				placeholder: 'スクレイピングしたいURLを入力',
				description: 'ここに入力したURLへページ遷移します。',
			},
		],
	};

properties にて項目を指定できる。

	async execute(this: IExecuteFunctions): Promise<INodeExecutionData[][]> {
		const items = this.getInputData();

		let targetURL: string;

		targetURL = this.getNodeParameter('targetURL', 0) as string;

入力項目の内容の取得は上記のように行う。

こんな感じでノードに入力項目が追加される。

このスクラップは2024/03/10にクローズされました