Googleスプレッドシートのデータを動的なHTMLテーブルAPIに変換 - n8n ワークフロー

スプレッドシートデータを可視化するためのシンプルなAPIエンドポイントを必要とする開発者。
バックエンドを構築せずに、一時的なデータレポートを即座に公開する必要があるコンテンツ管理者。
n8nのFunctionノードを使用してカスタムデータ変換とレンダリングを行う高度な作例を探しているユーザー。
データ表示のために、高性能でカスタムメイドのn8nテンプレートの構築に興味がある方。

この高度なn8nワークフローは、Googleスプレッドシートに保存されているデータを視覚的に魅力的で動的なHTMLテーブルとして公開するための、非常に迅速なソリューションを提供します。データベースや複雑なホスティング環境をセットアップする代わりに、このn8nオートメーションはオンデマンドで最新のデータを取得する公開エンドポイントを作成します。Function n8nノードのカスタムスクリプト機能を活用し、ワークフローはデータを読み込み、レスポンシブ対応のために標準のBootstrapスタイリングを適用し、リクエストに応じてレンダリングされたHTMLを即座に提供します。この特定のn8nワークフローは、堅牢なn8nトリガーを使用して、構造化データをプレゼンテーション準備完了のWebコンテンツに効率的に変換する方法を示しています。

このn8nワークフローは、公開エンドポイント経由で外部から開始されます。

1. 開始 (Webhook n8nトリガー): 指定されたパスへの着信HTTPリクエスト（GETまたはPOST）をWebhook n8nトリガーが受信すると、プロセスが開始されます。


2. データ取得 (Googleスプレッドシートから読み取り): ワークフローは直ちにGoogleスプレッドシートn8nノードに進みます。このノードは認証を行い、指定されたスプレッドシートIDからすべてのデータ行とヘッダーを読み取ります。


3. HTML生成 (Build HTML Function n8nノード): データは「Build HTML」Function n8nノードに渡されます。この重要なステップでは、埋め込みJavaScriptを使用して入力アイテムを反復処理します。必要なBootstrap 5依存関係を含め、完全なHTMLドキュメントを動的に生成し、列ヘッダーをタグに、データ値をタグに正しくマッピングすることで、完全なスタイリング済みHTMLテーブルを構築します。このカスタムされたn8nノードは、最終的なHTML文字列を含む出力アイテムを生成します。


4. 応答 (Webhookに応答): 最後に、「Respond to Webhook」n8nノードが生成されたHTML文字列 ({{$json["html"]}}) を取得し、最初のn8nトリガーを発火させたクライアントへの応答として返送します。ブラウザが生のテキストを表示するのではなくテーブルをレンダリングするように、Content-Typeヘッダーを明示的にtext/html; charset=UTF-8に設定するように構成されています。

1. インポート: このn8nワークフローJSONをn8nインスタンスにインポートします。


2. Webhook設定: 「Webhook」n8nトリガーノードをアクティブにして、固有のテスト用および本番用のURLを生成します。これが公開APIエンドポイントになります。


3. Googleスプレッドシートの認証情報: 「Read from Google Sheets」n8nノードを、必要なGoogleスプレッドシートの認証情報に更新します。サービスアカウントまたはOAuth認証情報が対象シートへの読み取りアクセス権を持っていることを確認してください。


4. シートIDの設定: 「Read from Google Sheets」n8nノードのパラメーターで、プレースホルダーSheetIdを公開したいデータが含まれる実際のGoogleスプレッドシートIDに置き換えます。


5. アクティベート: n8nワークフローを保存してアクティブ化します。Webhook URLにアクセスすると、n8nオートメーションが実行され、レンダリングされたHTMLテーブルが返されます。

Webhook (n8nトリガー): このn8nワークフローのエントリーポイントとして機能します。responseMode: responseNode用に設定されており、最終的な出力は後続のノードによって処理されます。
Read from Google Sheets (Google Sheets n8nノード): 指定されたスプレッドシートIDからすべてのデータを読み取ります。有効なGoogleスプレッドシートのOAuth2認証情報が必要です。
Build HTML (Function n8nノード): コアロジックエンジンです。JavaScriptを使用して入力アイテムを反復処理し、Bootstrapクラスを利用してスタイリングされたHTMLテーブルを動的に構築します。このn8nノードの出力は、キーhtmlを含むオブジェクトです。
Respond to Webhook (n8nノード): 最終的な出力を処理します。前のFunction n8nノードからのカスタムHTML出力 (={{$json["html"]}}) をレスポンスボディとしてマッピングし、重要なContent-Typeヘッダーをtext/html; charset=UTF-8に設定します。