コンテンツ用の自動更新画像とリダイレクトURLの作成
上級
これはSocial Media分野の自動化ワークフローで、19個のノードを含みます。主にGmail, Github, EditImage, FormTrigger, HttpRequestなどのノードを使用。 GitHubの動の画像とURLリダイレクトを使って常時更新可能なコンテンツを作成する
前提条件
- •Googleアカウント + Gmail API認証情報
- •GitHub Personal Access Token
- •ターゲットAPIの認証情報が必要な場合あり
カテゴリー
ワークフロープレビュー
ノード接続関係を可視化、ズームとパンをサポート
ワークフローをエクスポート
以下のJSON設定をn8nにインポートして、このワークフローを使用できます
{
"id": "FVsgc9AjW27LUTIf",
"meta": {
"instanceId": "fb924c73af8f703905bc09c9ee8076f48c17b596ed05b18c0ff86915ef8a7c4a",
"templateCredsSetupCompleted": true
},
"name": "Create auto-updating images and redirect URL for your content",
"tags": [],
"nodes": [
{
"id": "d74bab24-d81c-4d18-8539-4aa0d71cb22a",
"name": "「Execute workflow」クリック時",
"type": "n8n-nodes-base.manualTrigger",
"position": [
1680,
140
],
"parameters": {},
"typeVersion": 1
},
{
"id": "10c33346-1562-4dff-afdd-abeaa146ea20",
"name": "新規URLリダイレクト作成",
"type": "n8n-nodes-base.httpRequest",
"position": [
0,
-180
],
"parameters": {
"url": "https://api.shorten.rest/aliases",
"method": "POST",
"options": {},
"jsonBody": "={\n \"destinations\":[{\"url\":\"https://en.wikipedia.org/wiki/{{ $now.format('DDD').split(',')[0].replaceAll(' ','_') }}\"}]\n}",
"sendBody": true,
"sendQuery": true,
"specifyBody": "json",
"authentication": "genericCredentialType",
"genericAuthType": "httpHeaderAuth",
"queryParameters": {
"parameters": [
{
"name": "domainName",
"value": "short.fyi"
},
{
"name": "aliasName",
"value": "today-in-history"
}
]
}
},
"credentials": {
"httpHeaderAuth": {
"id": "8641qBq1Wqw8iY1T",
"name": "Header Auth account 4"
}
},
"typeVersion": 4.2
},
{
"id": "ebf4281e-fc0b-4309-bfed-0aa417fdf638",
"name": "URLリダイレクト更新",
"type": "n8n-nodes-base.httpRequest",
"position": [
220,
160
],
"parameters": {
"url": "https://api.shorten.rest/aliases",
"method": "PUT",
"options": {
"response": {
"response": {
"neverError": true
}
}
},
"jsonBody": "={\n \"destinations\":[{\"url\":\"https://en.wikipedia.org/wiki/{{ $now.format('DDD').split(',')[0].replaceAll(' ','_') }}\"}]\n}",
"sendBody": true,
"sendQuery": true,
"specifyBody": "json",
"authentication": "genericCredentialType",
"genericAuthType": "httpHeaderAuth",
"queryParameters": {
"parameters": [
{
"name": "domainName",
"value": "short.fyi"
},
{
"name": "aliasName",
"value": "today-in-history"
}
]
}
},
"credentials": {
"httpHeaderAuth": {
"id": "8641qBq1Wqw8iY1T",
"name": "Header Auth account 4"
}
},
"typeVersion": 4.2
},
{
"id": "847b893b-fc79-40b8-8eee-5844be6e9dd6",
"name": "スケジュールトリガー",
"type": "n8n-nodes-base.scheduleTrigger",
"position": [
-20,
160
],
"parameters": {
"rule": {
"interval": [
{
"triggerAtMinute": 8
}
]
}
},
"typeVersion": 1.2
},
{
"id": "bb20131d-cb3e-4a78-aa54-e931dbe183d0",
"name": "スケジュールトリガー1",
"type": "n8n-nodes-base.scheduleTrigger",
"position": [
-20,
320
],
"parameters": {
"rule": {
"interval": [
{
"field": "hours",
"triggerAtMinute": 1
}
]
}
},
"typeVersion": 1.2
},
{
"id": "e8944262-fe50-4a22-84f6-09ce10576073",
"name": "付箋",
"type": "n8n-nodes-base.stickyNote",
"position": [
700,
-180
],
"parameters": {
"width": 480,
"height": 520,
"content": "## 1. Inside workflow stickers\nContent of both an image and URL are dynamic. Try this out:\n- https://short.fyi/today-in-history\n- https://github.com/ed-parsadanyan/public-tests/blob/main/n8n-examples/dynamic-images/dynamic_img.png\n\n[](https://short.fyi/today-in-history)"
},
"typeVersion": 1
},
{
"id": "1c2c841d-4a28-4b5d-bb95-ccc3fdd9530c",
"name": "付箋1",
"type": "n8n-nodes-base.stickyNote",
"position": [
-80,
-320
],
"parameters": {
"width": 700,
"height": 360,
"content": "## Run these nodes only once\n1. to create initial URL alias\n2. to create an initial GitHub file\n3. to get downloadable image URL"
},
"typeVersion": 1
},
{
"id": "6d21ad0c-1f3f-48c8-8e12-b15b45f4dfd8",
"name": "付箋2",
"type": "n8n-nodes-base.stickyNote",
"position": [
-80,
60
],
"parameters": {
"color": 5,
"width": 700,
"height": 440,
"content": "## These triggers periodically update image and URL\n- By default, URLs are updated daily and point to the today's Wiki article\n- Image is updated on the hourly basis"
},
"typeVersion": 1
},
{
"id": "fe74d1cb-9274-4c51-891e-f5ec3564d1e5",
"name": "画像作成",
"type": "n8n-nodes-base.editImage",
"position": [
220,
320
],
"parameters": {
"options": {
"fileName": "dynamic_img"
},
"operation": "multiStep",
"operations": {
"operations": [
{
"width": 640,
"height": 480,
"operation": "create"
},
{
"color": "#00a2bb00",
"operation": "draw",
"endPositionX": "={{ $parameter.operations.operations[0].width }}",
"endPositionY": "={{ $parameter.operations.operations[0].height }}",
"startPositionX": 0,
"startPositionY": 0
},
{
"color": "#efefef00",
"operation": "draw",
"endPositionX": "={{ $parameter.operations.operations[0].width-5 }}",
"endPositionY": "={{ $parameter.operations.operations[0].height-5 }}",
"startPositionX": 5,
"startPositionY": 5
},
{
"font": "/usr/share/fonts/truetype/msttcorefonts/Courier_New.ttf",
"text": "TODAY",
"fontSize": 72,
"operation": "text",
"positionX": 213,
"positionY": 120
},
{
"font": "/usr/share/fonts/truetype/msttcorefonts/Courier_New_Bold.ttf",
"text": "={{ $now.setLocale('en').toLocaleString(DateTime.DATE_MED) }}",
"fontSize": 72,
"operation": "text",
"positionX": "={{ ($parameter.operations.operations[0].width - ($parameter.operations.operations[0].width * $now.setLocale('en').toLocaleString(DateTime.DATE_MED).length / 15))/2 }}",
"positionY": 250
},
{
"font": "/usr/share/fonts/truetype/msttcorefonts/Courier_New_Bold.ttf",
"text": "={{ $now.toFormat('HH:mm') }}",
"fontSize": 72,
"operation": "text",
"positionX": "={{ ($parameter.operations.operations[0].width - ($parameter.operations.operations[0].width * $now.toFormat('HH:mm').length / 15))/2 }}",
"positionY": 350
}
]
}
},
"typeVersion": 1
},
{
"id": "169d25a7-c3b8-4fb6-abc4-2ced669e90cf",
"name": "GitHubファイル更新",
"type": "n8n-nodes-base.github",
"position": [
440,
320
],
"webhookId": "e8a64032-b2cb-4e8a-addf-84dd90a6565d",
"parameters": {
"owner": {
"__rl": true,
"mode": "name",
"value": "ed-parsadanyan"
},
"filePath": "=n8n-examples/dynamic-images/{{ $binary.data.fileName }}.{{ $binary.data.fileExtension }}",
"resource": "file",
"operation": "edit",
"binaryData": true,
"repository": {
"__rl": true,
"mode": "list",
"value": "public-tests",
"cachedResultUrl": "https://github.com/ed-parsadanyan/public-tests",
"cachedResultName": "public-tests"
},
"commitMessage": "=dynamic_img_update",
"authentication": "oAuth2"
},
"credentials": {
"githubOAuth2Api": {
"id": "3",
"name": "n8n-auth-edp"
}
},
"typeVersion": 1.1
},
{
"id": "b0a89ef7-862a-4648-9f9b-b941b117f25a",
"name": "付箋3",
"type": "n8n-nodes-base.stickyNote",
"position": [
1220,
-180
],
"parameters": {
"width": 380,
"height": 520,
"content": "## 2. In the n8n forms\nTest this form and note the dynamic clickable image. Configure this via\n- custom HTML element\n- additional CSS styling for correct image size:\n\n```\ndiv.html img {\n\tmax-width: 100%;\n\theight: auto;\n\tdisplay: block;\n\tmargin-bottom: 8px;\n}\n```"
},
"typeVersion": 1
},
{
"id": "eb75a8d6-1e2f-442a-8ac3-14406bf7edc9",
"name": "動的画像付きフォーム",
"type": "n8n-nodes-base.formTrigger",
"position": [
1360,
140
],
"webhookId": "bd9ef188-7983-4474-b82b-c00c08054426",
"parameters": {
"options": {
"customCss": ":root {\n\t--font-family: 'Open Sans', sans-serif;\n\t--font-weight-normal: 400;\n\t--font-weight-bold: 600;\n\t--font-size-body: 12px;\n\t--font-size-label: 14px;\n\t--font-size-test-notice: 12px;\n\t--font-size-input: 14px;\n\t--font-size-header: 20px;\n\t--font-size-paragraph: 14px;\n\t--font-size-link: 12px;\n\t--font-size-error: 12px;\n\t--font-size-html-h1: 28px;\n\t--font-size-html-h2: 20px;\n\t--font-size-html-h3: 16px;\n\t--font-size-html-h4: 14px;\n\t--font-size-html-h5: 12px;\n\t--font-size-html-h6: 10px;\n\t--font-size-subheader: 14px;\n\n\t/* Colors */\n\t--color-background: #fbfcfe;\n\t--color-test-notice-text: #e6a23d;\n\t--color-test-notice-bg: #fefaf6;\n\t--color-test-notice-border: #f6dcb7;\n\t--color-card-bg: #ffffff;\n\t--color-card-border: #dbdfe7;\n\t--color-card-shadow: rgba(99, 77, 255, 0.06);\n\t--color-link: #7e8186;\n\t--color-header: #525356;\n\t--color-label: #555555;\n\t--color-input-border: #dbdfe7;\n\t--color-input-text: #71747A;\n\t--color-focus-border: rgb(90, 76, 194);\n\t--color-submit-btn-bg: #ff6d5a;\n\t--color-submit-btn-text: #ffffff;\n\t--color-error: #ea1f30;\n\t--color-required: #ff6d5a;\n\t--color-clear-button-bg: #7e8186;\n\t--color-html-text: #555;\n\t--color-html-link: #ff6d5a;\n\t--color-header-subtext: #7e8186;\n\n\t/* Border Radii */\n\t--border-radius-card: 8px;\n\t--border-radius-input: 6px;\n\t--border-radius-clear-btn: 50%;\n\t--card-border-radius: 8px;\n\n\t/* Spacing */\n\t--padding-container-top: 24px;\n\t--padding-card: 24px;\n\t--padding-test-notice-vertical: 12px;\n\t--padding-test-notice-horizontal: 24px;\n\t--margin-bottom-card: 16px;\n\t--padding-form-input: 12px;\n\t--card-padding: 24px;\n\t--card-margin-bottom: 16px;\n\n\t/* Dimensions */\n\t--container-width: 448px;\n\t--submit-btn-height: 48px;\n\t--checkbox-size: 18px;\n\n\t/* Others */\n\t--box-shadow-card: 0px 4px 16px 0px var(--color-card-shadow);\n\t--opacity-placeholder: 0.5;\n}\n\ndiv.html img {\n\tmax-width: 100%;\n\theight: auto;\n\tdisplay: block;\n\tmargin-bottom: 8px;\n}",
"appendAttribution": false
},
"formTitle": "Test Form",
"formFields": {
"values": [
{
"html": "<!-- Your custom HTML here --->\n<h2>Note: image is clickable!</h2>\n<a href=\"https://short.fyi/today-in-history\" target=\"_blank\">\n <img src=\"https://raw.githubusercontent.com/ed-parsadanyan/public-tests/main/n8n-examples/dynamic-images/dynamic_img.png\" alt=\"\">\n</a>",
"fieldType": "html",
"elementName": "test"
}
]
},
"formDescription": "This form contains a dynamic image"
},
"typeVersion": 2.2
},
{
"id": "ada5f98f-3b52-449b-b573-ef24bbdc4554",
"name": "ファイル取得",
"type": "n8n-nodes-base.github",
"position": [
1840,
140
],
"webhookId": "e8a64032-b2cb-4e8a-addf-84dd90a6565d",
"parameters": {
"owner": {
"__rl": true,
"mode": "name",
"value": "ed-parsadanyan"
},
"filePath": "=n8n-examples/dynamic-images/dynamic_img.png",
"resource": "file",
"operation": "get",
"repository": {
"__rl": true,
"mode": "list",
"value": "public-tests",
"cachedResultUrl": "https://github.com/ed-parsadanyan/public-tests",
"cachedResultName": "public-tests"
},
"authentication": "oAuth2",
"asBinaryProperty": false,
"additionalParameters": {}
},
"credentials": {
"githubOAuth2Api": {
"id": "3",
"name": "n8n-auth-edp"
}
},
"typeVersion": 1.1
},
{
"id": "0fd7ecea-7e0e-4318-8dbc-91d2e20778a6",
"name": "メッセージ送信",
"type": "n8n-nodes-base.gmail",
"position": [
2000,
140
],
"webhookId": "e0ded4d7-d2c8-43e4-9833-b346df3d75e8",
"parameters": {
"sendTo": "teds.tech.talks@gmail.com",
"message": "=<h2>Dynamic image</h2>\n<a href=\"https://short.fyi/today-in-history\" target=\"_blank\">\n <img src=\"{{ $json.download_url }}\" />\n</a>",
"options": {},
"subject": "Test Image"
},
"credentials": {
"gmailOAuth2": {
"id": "UllrXlZsDnkdA3tT",
"name": "Gmail account"
}
},
"typeVersion": 2.1
},
{
"id": "8058d4d0-a60f-4390-a335-5b5e494ec45b",
"name": "付箋4",
"type": "n8n-nodes-base.stickyNote",
"position": [
1640,
-180
],
"parameters": {
"width": 500,
"height": 520,
"content": "## 3. Via E-mail\nPrepare an HTML message and include the link to the image.\nYou can also place a custom clickable image as an e-mail footer\n\nHere's an example:\n\n<h2>Dynamic image</h2>\n<a href=\"https://short.fyi/today-in-history\" target=\"_blank\">\n <img src=\"{{ $json.download_url }}\" />\n</a>"
},
"typeVersion": 1
},
{
"id": "bb16c18e-17d8-4f07-8000-7e21acf0ac8e",
"name": "ファイル作成",
"type": "n8n-nodes-base.github",
"position": [
220,
-180
],
"webhookId": "e8a64032-b2cb-4e8a-addf-84dd90a6565d",
"parameters": {
"owner": {
"__rl": true,
"mode": "name",
"value": "ed-parsadanyan"
},
"filePath": "=n8n-examples/dynamic-images/dynamic_img.png",
"resource": "file",
"repository": {
"__rl": true,
"mode": "list",
"value": "public-tests",
"cachedResultUrl": "https://github.com/ed-parsadanyan/public-tests",
"cachedResultName": "public-tests"
},
"fileContent": "some content",
"commitMessage": "initial creation",
"authentication": "oAuth2"
},
"credentials": {
"githubOAuth2Api": {
"id": "3",
"name": "n8n-auth-edp"
}
},
"typeVersion": 1.1
},
{
"id": "e2a06369-6136-474b-a6f8-133f193aca83",
"name": "ダウンロードURL取得",
"type": "n8n-nodes-base.github",
"position": [
440,
-180
],
"webhookId": "e8a64032-b2cb-4e8a-addf-84dd90a6565d",
"parameters": {
"owner": {
"__rl": true,
"mode": "name",
"value": "ed-parsadanyan"
},
"filePath": "=n8n-examples/dynamic-images/dynamic_img.png",
"resource": "file",
"operation": "get",
"repository": {
"__rl": true,
"mode": "list",
"value": "public-tests",
"cachedResultUrl": "https://github.com/ed-parsadanyan/public-tests",
"cachedResultName": "public-tests"
},
"authentication": "oAuth2",
"asBinaryProperty": false,
"additionalParameters": {}
},
"credentials": {
"githubOAuth2Api": {
"id": "3",
"name": "n8n-auth-edp"
}
},
"typeVersion": 1.1
},
{
"id": "99117594-4f37-4d9a-b344-35264547ebe8",
"name": "付箋5",
"type": "n8n-nodes-base.stickyNote",
"position": [
680,
-320
],
"parameters": {
"color": 4,
"width": 1480,
"height": 680,
"content": "# Use-cases\n## Here are three ideas for using dynamic image and URL in your promo materials"
},
"typeVersion": 1
},
{
"id": "8b3b3e7a-3c99-41b8-bcd5-3a8389a786ef",
"name": "付箋6",
"type": "n8n-nodes-base.stickyNote",
"position": [
-80,
-780
],
"parameters": {
"color": 3,
"width": 700,
"height": 440,
"content": "# What is this?\nWhen you publish workflow templates, create registration forms or send e-mails, these digital asses start living on their own. Users may find them long after creation.\n\nYou can keep contact with future audience by including dynamic images or links. Image path stays the same, but you can update the content. Similarly, a weblink can stay the same but have different redirect targets.\n\nThis way you can deliver your latest offers or messages even years after the digital assets were created. There's no need to update the whole content library - just keep the dynamic images and links fresh.\n\n## Requirements:\n- A [shorten.rest account ](https://shorten.rest/) for creating URL with dynamic redirect target URLs.\n- A [GitHub account](https://github.com/) to store the dynamic images\n\n*Both services work for free, but you can swap them with your own URL shortening / redirecting service or an S3 bucket for storing an image*"
},
"typeVersion": 1
}
],
"active": true,
"pinData": {},
"settings": {
"callerPolicy": "workflowsFromSameOwner",
"executionOrder": "v1",
"saveDataSuccessExecution": "all"
},
"versionId": "7747c3d6-0dc7-40af-b206-3804ed71b4b3",
"connections": {
"ada5f98f-3b52-449b-b573-ef24bbdc4554": {
"main": [
[
{
"node": "0fd7ecea-7e0e-4318-8dbc-91d2e20778a6",
"type": "main",
"index": 0
}
]
]
},
"fe74d1cb-9274-4c51-891e-f5ec3564d1e5": {
"main": [
[
{
"node": "169d25a7-c3b8-4fb6-abc4-2ced669e90cf",
"type": "main",
"index": 0
}
]
]
},
"847b893b-fc79-40b8-8eee-5844be6e9dd6": {
"main": [
[
{
"node": "ebf4281e-fc0b-4309-bfed-0aa417fdf638",
"type": "main",
"index": 0
}
]
]
},
"bb20131d-cb3e-4a78-aa54-e931dbe183d0": {
"main": [
[
{
"node": "fe74d1cb-9274-4c51-891e-f5ec3564d1e5",
"type": "main",
"index": 0
}
]
]
},
"d74bab24-d81c-4d18-8539-4aa0d71cb22a": {
"main": [
[
{
"node": "ada5f98f-3b52-449b-b573-ef24bbdc4554",
"type": "main",
"index": 0
}
]
]
}
}
}よくある質問
このワークフローの使い方は？
上記のJSON設定コードをコピーし、n8nインスタンスで新しいワークフローを作成して「JSONからインポート」を選択、設定を貼り付けて認証情報を必要に応じて変更してください。
このワークフローはどんな場面に適していますか？
上級 - ソーシャルメディア
有料ですか？
このワークフローは完全無料です。ただし、ワークフローで使用するサードパーティサービス（OpenAI APIなど）は別途料金が発生する場合があります。
関連ワークフロー
Supabase、Google スプレッドシート、Gmail に基づく自動のなユーザー再活性化システム
Supabase、Googleスプレッドシート、Gmailを使用した自動用戶再活性化システム
Set
Code
Gmail
+
Set
Code
Gmail
14 ノードiamvaar
ソーシャルメディア
アップロード＆FLUX Kontext
FLUX Kontextを使ってキャラクター一貫の画像を作成し、アップロードしてソーシャル・メディアに投稿
If
Set
Wait
+
If
Set
Wait
27 ノードEduard
デザイン
Google サイトインデックス - sitemap.xml サンプル
Googleにサイトを自動のにインデックス化
If
Set
Xml
+
If
Set
Xml
21 ノードEduard
マーケティング
GitHub 同期ダッシュボード - V2
コミット履歴とロールバック機能を備えた GitHub ワークフロー バージョン管理ダッシュボード
If
N8n
Set
+
If
N8n
Set
94 ノードEduard
DevOps
潜在顧客開掘とメールワーキングフロー
Google Maps、SendGrid、AIを使用してB2Bリード獲得とメールマーケティングを自動化
If
Set
Code
+
If
Set
Code
141 ノードEzema Kingsley Chibuzo
リード獲得
Apollo データスクレイピングとタッチアウトフロー 1 ✅
Apollo、AI による解析と計画されたメール.follow-up によるリード生成の自動化
If
Code
Wait
+
If
Code
Wait
39 ノードDeniz
コンテンツ作成
