Created
December 7, 2022 14:54
-
-
Save Dolphiiiin/9391f470017322043f4bffd7fe308317 to your computer and use it in GitHub Desktop.
cluster-weather-news
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const express = require('express'); | |
| const app = express(); | |
| const fetch = require('node-fetch'); | |
| const puppeteer = require('puppeteer'); | |
| const places = [ //エリアコードを配列に格納 | |
| { name: '札幌', code: '016000' }, | |
| { name: '青森', code: '020000' }, | |
| { name: '仙台', code: '040000' }, | |
| { name: '東京', code: '130000' }, | |
| { name: '名古屋', code: '230000' }, | |
| { name: '大阪', code: '270000' }, | |
| { name: '広島', code: '340000' }, | |
| { name: '高松', code: '270000' }, | |
| { name: '福岡', code: '400000' }, | |
| { name: '鹿児島', code: '460100' }, | |
| { name: '那覇', code: '471000' } | |
| ]; | |
| //https://www.jma.go.jp/bosai/forecast/data/forecast/{エリアコード(offices)}.json | |
| //{エリアコード(offices)}を引数として指定できる変数を作成 | |
| const getWeather = async (code) => { | |
| const res = await fetch(`https://www.jma.go.jp/bosai/forecast/data/forecast/${code}.json`); | |
| const json = await res.json(); | |
| return json; | |
| } | |
| app.get('/', async (req, res) => { | |
| //現在時刻が夕方以降かどうかを判定 | |
| //もし、夕方以降なら、明日の天気を取得する | |
| let is_night = false; | |
| const now = new Date(); | |
| const hour = now.getHours(); | |
| if(hour >= 18 || hour < 24) | |
| is_night = true; | |
| //天気予報を取得 | |
| let weathers = []; | |
| for (const place of places) { | |
| const json = await getWeather(place.code); | |
| if(is_night) { | |
| weathers.push( | |
| { | |
| name: place.name, | |
| place: json[0].publishingOffice, | |
| weather_code: Number(json[0].timeSeries[0].areas[0].weatherCodes[0]), | |
| code: 0 | |
| } | |
| ); | |
| } else { | |
| weathers.push( | |
| { | |
| name: place.name, | |
| place: json[0].publishingOffice, | |
| weather_code: Number(json[0].timeSeries[0].areas[0].weatherCodes[0]), | |
| code: 0 | |
| } | |
| ); | |
| } | |
| //whethercodeを天気の画像ファイルのファイル番号に変換するためのｸｿ長Switch(364行) | |
| switch (weathers[weathers.length - 1].weather_code) { | |
| case 100: | |
| weathers[weathers.length - 1].code = 100; | |
| break; | |
| case 101: | |
| weathers[weathers.length - 1].code = 101; | |
| break; | |
| case 102: | |
| weathers[weathers.length - 1].code = 102; | |
| break; | |
| case 103: | |
| weathers[weathers.length - 1].code = 102; | |
| break; | |
| case 104: | |
| weathers[weathers.length - 1].code = 104; | |
| break; | |
| case 105: | |
| weathers[weathers.length - 1].code = 104; | |
| break; | |
| case 106: | |
| weathers[weathers.length - 1].code = 102; | |
| break; | |
| case 107: | |
| weathers[weathers.length - 1].code = 102; | |
| break; | |
| case 108: | |
| weathers[weathers.length - 1].code = 102; | |
| break; | |
| case 109: | |
| weathers[weathers.length - 1].code = 110; | |
| break; | |
| case 110: | |
| weathers[weathers.length - 1].code = 110; | |
| break; | |
| case 111: | |
| weathers[weathers.length - 1].code = 110; | |
| break; | |
| case 112: | |
| weathers[weathers.length - 1].code = 112; | |
| break; | |
| case 113: | |
| weathers[weathers.length - 1].code = 112; | |
| break; | |
| case 114: | |
| weathers[weathers.length - 1].code = 112; | |
| break; | |
| case 115: | |
| weathers[weathers.length - 1].code = 115; | |
| break; | |
| case 116: | |
| weathers[weathers.length - 1].code = 115; | |
| break; | |
| case 117: | |
| weathers[weathers.length - 1].code = 115; | |
| break; | |
| case 118: | |
| weathers[weathers.length - 1].code = 112; | |
| break; | |
| case 119: | |
| weathers[weathers.length - 1].code = 112; | |
| break; | |
| case 120: | |
| weathers[weathers.length - 1].code = 102; | |
| break; | |
| case 121: | |
| weathers[weathers.length - 1].code = 102; | |
| break; | |
| case 122: | |
| weathers[weathers.length - 1].code = 112; | |
| break; | |
| case 123: | |
| weathers[weathers.length - 1].code = 100; | |
| break; | |
| case 124: | |
| weathers[weathers.length - 1].code = 100; | |
| break; | |
| case 125: | |
| weathers[weathers.length - 1].code = 112; | |
| break; | |
| case 126: | |
| weathers[weathers.length - 1].code = 112; | |
| break; | |
| case 127: | |
| weathers[weathers.length - 1].code = 112; | |
| break; | |
| case 128: | |
| weathers[weathers.length - 1].code = 112; | |
| break; | |
| case 129: | |
| weathers[weathers.length - 1].code = 112; | |
| break; | |
| case 130: | |
| weathers[weathers.length - 1].code = 100; | |
| break; | |
| case 131: | |
| weathers[weathers.length - 1].code = 100; | |
| break; | |
| case 132: | |
| weathers[weathers.length - 1].code = 101; | |
| break; | |
| case 140: | |
| weathers[weathers.length - 1].code = 102; | |
| break; | |
| case 160: | |
| weathers[weathers.length - 1].code = 104; | |
| break; | |
| case 170: | |
| weathers[weathers.length - 1].code = 104; | |
| break; | |
| case 181: | |
| weathers[weathers.length - 1].code = 115; | |
| break; | |
| case 200: | |
| weathers[weathers.length - 1].code = 200; | |
| break; | |
| case 201: | |
| weathers[weathers.length - 1].code = 201; | |
| break; | |
| case 202: | |
| weathers[weathers.length - 1].code = 202; | |
| break; | |
| case 203: | |
| weathers[weathers.length - 1].code = 202; | |
| break; | |
| case 204: | |
| weathers[weathers.length - 1].code = 204; | |
| break; | |
| case 205: | |
| weathers[weathers.length - 1].code = 204; | |
| break; | |
| case 206: | |
| weathers[weathers.length - 1].code = 202; | |
| break; | |
| case 207: | |
| weathers[weathers.length - 1].code = 202; | |
| break; | |
| case 208: | |
| weathers[weathers.length - 1].code = 202; | |
| break; | |
| case 209: | |
| weathers[weathers.length - 1].code = 200; | |
| break; | |
| case 210: | |
| weathers[weathers.length - 1].code = 210; | |
| break; | |
| case 211: | |
| weathers[weathers.length - 1].code = 210; | |
| break; | |
| case 212: | |
| weathers[weathers.length - 1].code = 212; | |
| break; | |
| case 213: | |
| weathers[weathers.length - 1].code = 213; | |
| break; | |
| case 214: | |
| weathers[weathers.length - 1].code = 212; | |
| break; | |
| case 215: | |
| weathers[weathers.length - 1].code = 215; | |
| break; | |
| case 216: | |
| weathers[weathers.length - 1].code = 215; | |
| break; | |
| case 217: | |
| weathers[weathers.length - 1].code = 215; | |
| break; | |
| case 218: | |
| weathers[weathers.length - 1].code = 212; | |
| break; | |
| case 219: | |
| weathers[weathers.length - 1].code = 212; | |
| break; | |
| case 220: | |
| weathers[weathers.length - 1].code = 202; | |
| break; | |
| case 221: | |
| weathers[weathers.length - 1].code = 202; | |
| break; | |
| case 222: | |
| weathers[weathers.length - 1].code = 212; | |
| break; | |
| case 223: | |
| weathers[weathers.length - 1].code = 201; | |
| break; | |
| case 224: | |
| weathers[weathers.length - 1].code = 212; | |
| break; | |
| case 225: | |
| weathers[weathers.length - 1].code = 212; | |
| break; | |
| case 226: | |
| weathers[weathers.length - 1].code = 212; | |
| break; | |
| case 228: | |
| weathers[weathers.length - 1].code = 215; | |
| break; | |
| case 229: | |
| weathers[weathers.length - 1].code = 215; | |
| break; | |
| case 230: | |
| weathers[weathers.length - 1].code = 215; | |
| break; | |
| case 231: | |
| weathers[weathers.length - 1].code = 200; | |
| break; | |
| case 240: | |
| weathers[weathers.length - 1].code = 202; | |
| break; | |
| case 250: | |
| weathers[weathers.length - 1].code = 204; | |
| break; | |
| case 260: | |
| weathers[weathers.length - 1].code = 204; | |
| break; | |
| case 270: | |
| weathers[weathers.length - 1].code = 204; | |
| break; | |
| case 281: | |
| weathers[weathers.length - 1].code = 215; | |
| break; | |
| case 300: | |
| weathers[weathers.length - 1].code = 300; | |
| break; | |
| case 301: | |
| weathers[weathers.length - 1].code = 301; | |
| break; | |
| case 302: | |
| weathers[weathers.length - 1].code = 302; | |
| break; | |
| case 303: | |
| weathers[weathers.length - 1].code = 303; | |
| break; | |
| case 304: | |
| weathers[weathers.length - 1].code = 300; | |
| break; | |
| case 306: | |
| weathers[weathers.length - 1].code = 300; | |
| break; | |
| case 308: | |
| weathers[weathers.length - 1].code = 308; | |
| break; | |
| case 309: | |
| weathers[weathers.length - 1].code = 303; | |
| break; | |
| case 311: | |
| weathers[weathers.length - 1].code = 311; | |
| break; | |
| case 313: | |
| weathers[weathers.length - 1].code = 313; | |
| break; | |
| case 314: | |
| weathers[weathers.length - 1].code = 314; | |
| break; | |
| case 315: | |
| weathers[weathers.length - 1].code = 314; | |
| break; | |
| case 316: | |
| weathers[weathers.length - 1].code = 311; | |
| break; | |
| case 317: | |
| weathers[weathers.length - 1].code = 313; | |
| break; | |
| case 320: | |
| weathers[weathers.length - 1].code = 311; | |
| break; | |
| case 321: | |
| weathers[weathers.length - 1].code = 313; | |
| break; | |
| case 322: | |
| weathers[weathers.length - 1].code = 303; | |
| break; | |
| case 323: | |
| weathers[weathers.length - 1].code = 311; | |
| break; | |
| case 324: | |
| weathers[weathers.length - 1].code = 311; | |
| break; | |
| case 325: | |
| weathers[weathers.length - 1].code = 311; | |
| break; | |
| case 326: | |
| weathers[weathers.length - 1].code = 314; | |
| break; | |
| case 327: | |
| weathers[weathers.length - 1].code = 314; | |
| break; | |
| case 328: | |
| weathers[weathers.length - 1].code = 300; | |
| break; | |
| case 329: | |
| weathers[weathers.length - 1].code = 300; | |
| break; | |
| case 340: | |
| weathers[weathers.length - 1].code = 400; | |
| break; | |
| case 350: | |
| weathers[weathers.length - 1].code = 300; | |
| break; | |
| case 361: | |
| weathers[weathers.length - 1].code = 411; | |
| break; | |
| case 371: | |
| weathers[weathers.length - 1].code = 413; | |
| break; | |
| case 400: | |
| weathers[weathers.length - 1].code = 400; | |
| break; | |
| case 401: | |
| weathers[weathers.length - 1].code = 401; | |
| break; | |
| case 402: | |
| weathers[weathers.length - 1].code = 402; | |
| break; | |
| case 403: | |
| weathers[weathers.length - 1].code = 403; | |
| break; | |
| case 405: | |
| weathers[weathers.length - 1].code = 400; | |
| break; | |
| case 406: | |
| weathers[weathers.length - 1].code = 406; | |
| break; | |
| case 407: | |
| weathers[weathers.length - 1].code = 406; | |
| break; | |
| case 409: | |
| weathers[weathers.length - 1].code = 403; | |
| break; | |
| case 411: | |
| weathers[weathers.length - 1].code = 411; | |
| break; | |
| case 413: | |
| weathers[weathers.length - 1].code = 413; | |
| break; | |
| case 414: | |
| weathers[weathers.length - 1].code = 414; | |
| break; | |
| case 420: | |
| weathers[weathers.length - 1].code = 411; | |
| break; | |
| case 421: | |
| weathers[weathers.length - 1].code = 413; | |
| break; | |
| case 422: | |
| weathers[weathers.length - 1].code = 414; | |
| break; | |
| case 423: | |
| weathers[weathers.length - 1].code = 414; | |
| break; | |
| case 424: | |
| weathers[weathers.length - 1].code = 400; | |
| break; | |
| case 425: | |
| weathers[weathers.length - 1].code = 400; | |
| break; | |
| case 426: | |
| weathers[weathers.length - 1].code = 400; | |
| break; | |
| case 427: | |
| weathers[weathers.length - 1].code = 400; | |
| break; | |
| case 428: | |
| weathers[weathers.length - 1].code = 450; | |
| break; | |
| } | |
| // console.log(whethers[whethers.length - 1].weather_code); | |
| } | |
| // console.log(whethers); | |
| //画像生成用のhtml | |
| let html = `<html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web 1920 – 1</title> <style id="applicationStylesheet" type="text/css"> body{ width:1622; height:1920; background-color:#1e242c; } .whether-img { width: 140%; height: 140%; } .mediaViewInfo { --web-view-name: Web 1920 – 1; --web-view-id: Web_1920__1; --web-scale-on-resize: true; --web-enable-deep-linking: true; } :root { --web-view-ids: Web_1920__1; } * { margin: 0; padding: 0; box-sizing: border-box; border: none; } #Web_1920__1 { position: absolute; width: 1622px; height: 1920px; overflow: hidden; --web-view-name: Web 1920 – 1; --web-view-id: Web_1920__1; --web-scale-on-resize: true; --web-enable-deep-linking: true; } #n_2 { position: absolute; width: 1269px; height: 1158px; left: 187.789px; top: 240px; overflow: visible; } #n_1 { fill: rgba(197,255,216,1); } .n_1 { position: absolute; overflow: visible; width: 328px; height: 248px; left: 941px; top: 0px; } #n_2_n { fill: rgba(197,255,216,1); } .n_2_n { position: absolute; overflow: visible; width: 164px; height: 662px; left: 941px; top: 282px; } #n_3 { fill: rgba(197,255,216,1); } .n_3 { position: absolute; overflow: visible; width: 240px; height: 332px; left: 701px; top: 612px; } #n_5 { fill: rgba(197,255,216,1); } .n_5 { position: absolute; overflow: visible; width: 412px; height: 167px; left: 289px; top: 777px; } #n_6 { fill: rgba(197,255,216,1); } .n_6 { position: absolute; overflow: visible; width: 168px; height: 89px; left: 533px; top: 944px; } #n_7 { fill: rgba(197,255,216,1); } .n_7 { position: absolute; overflow: visible; width: 170px; height: 170px; left: 326px; top: 988px; } #n_8 { fill: rgba(197,255,216,1); } .n_8 { position: absolute; overflow: visible; width: 246px; height: 254px; left: 0px; top: 860px; } #n_9 { fill: rgba(197,255,216,1); } .n_9 { position: absolute; overflow: visible; width: 78px; height: 95px; left: 75px; top: 334px; } #n_4 { fill: rgba(197,255,216,1); } .n_4 { position: absolute; overflow: visible; width: 96px; height: 89px; left: 859px; top: 944px; } #n_1_v { fill: transparent; stroke: rgba(112,112,112,1); stroke-width: 3px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .n_1_v { overflow: visible; position: absolute; width: 369.73px; height: 175.559px; left: 7.211px; top: 334.427px; transform: matrix(1,0,0,1,0,0); } #Wheter { position: absolute; width: 250px; height: 200px; left: 866px; top: 464px; overflow: visible; } #Background { fill: #FFFFFF; } .Background { position: absolute; overflow: visible; width: 250px; height: 200px; left: 0px; top: 0px; } #Place { left: 10px; top: 4px; position: absolute; overflow: visible; width: 79px; white-space: nowrap; text-align: left; font-family: Source Han Sans JP; font-style: normal; font-weight: bold; font-size: 38px; color: rgba(52,52,52,1); letter-spacing: 0.4px; } #img_1 { position: absolute; width: 125px; height: 125px; left: 40px; top: 40px; overflow: visible; } #n_10 { fill: rgba(255,255,255,1); stroke: rgba(112,112,112,1); stroke-width: 1px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .n_10 { position: absolute; overflow: visible; width: 70px; height: 70px; left: 0px; top: 0px; } #Wheter_ { position: absolute; width: 250px; height: 200px; left: 1258px; top: 712px; overflow: visible; } #Background_ { fill: #FFFFFF; } .Background_ { position: absolute; overflow: visible; width: 250px; height: 200px; left: 0px; top: 0px; } #Place_ { left: 10px; top: 4px; position: absolute; overflow: visible; width: 79px; white-space: nowrap; text-align: left; font-family: Source Han Sans JP; font-style: normal; font-weight: bold; font-size: 38px; color: rgba(52,52,52,1); letter-spacing: 0.4px; } #img_2 { position: absolute; width: 125px; height: 125px; left: 40px; top: 40px; overflow: visible; } #n_10_ { fill: rgba(255,255,255,1); stroke: rgba(112,112,112,1); stroke-width: 1px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .n_10_ { position: absolute; overflow: visible; width: 70px; height: 70px; left: 0px; top: 0px; } #Wheter_ba { position: absolute; width: 250px; height: 200px; left: 1101px; top: 1045px; overflow: visible; } #Background_ba { fill: #FFFFFF; } .Background_ba { position: absolute; overflow: visible; width: 250px; height: 200px; left: 0px; top: 0px; } #Place_ba { left: 10px; top: 4px; position: absolute; overflow: visible; width: 79px; white-space: nowrap; text-align: left; font-family: Source Han Sans JP; font-style: normal; font-weight: bold; font-size: 38px; color: rgba(52,52,52,1); letter-spacing: 0.4px; } #img_3 { position: absolute; width: 125px; height: 125px; left: 40px; top: 40px; overflow: visible; } #n_10_ba { fill: rgba(255,255,255,1); stroke: rgba(112,112,112,1); stroke-width: 1px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .n_10_ba { position: absolute; overflow: visible; width: 70px; height: 70px; left: 0px; top: 0px; } #Wheter_bb { position: absolute; width: 250px; height: 200px; left: 804px; top: 1155px; overflow: visible; } #Background_bc { fill: #FFFFFF; } .Background_bc { position: absolute; overflow: visible; width: 250px; height: 200px; left: 0px; top: 0px; } #Place_bd { left: 10px; top: 4px; position: absolute; overflow: visible; width: 118px; white-space: nowrap; text-align: left; font-family: Source Han Sans JP; font-style: normal; font-weight: bold; font-size: 38px; color: rgba(52,52,52,1); letter-spacing: 0.4px; } #img_4 { position: absolute; width: 125px; height: 125px; left: 40px; top: 40px; overflow: visible; } #n_10_bf { fill: rgba(255,255,255,1); stroke: rgba(112,112,112,1); stroke-width: 1px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .n_10_bf { position: absolute; overflow: visible; width: 70px; height: 70px; left: 0px; top: 0px; } #Wheter_bg { position: absolute; width: 250px; height: 200px; left: 517px; top: 1343px; overflow: visible; } #Background_bh { fill: #FFFFFF; } .Background_bh { position: absolute; overflow: visible; width: 250px; height: 200px; left: 0px; top: 0px; } #Place_bi { left: 10px; top: 4px; position: absolute; overflow: visible; width: 79px; white-space: nowrap; text-align: left; font-family: Source Han Sans JP; font-style: normal; font-weight: bold; font-size: 38px; color: rgba(52,52,52,1); letter-spacing: 0.4px; } #img_7 { position: absolute; width: 125px; height: 125px; left: 40px; top: 40px; overflow: visible; } #n_10_bk { fill: rgba(255,255,255,1); stroke: rgba(112,112,112,1); stroke-width: 1px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .n_10_bk { position: absolute; overflow: visible; width: 70px; height: 70px; left: 0px; top: 0px; } #Wheter_bl { position: absolute; width: 250px; height: 200px; left: 76px; top: 1389px; overflow: visible; } #Background_bm { fill: #FFFFFF; } .Background_bm { position: absolute; overflow: visible; width: 250px; height: 200px; left: 0px; top: 0px; } #Place_bn { left: 10px; top: 4px; position: absolute; overflow: visible; width: 118px; white-space: nowrap; text-align: left; font-family: Source Han Sans JP; font-style: normal; font-weight: bold; font-size: 38px; color: rgba(52,52,52,1); letter-spacing: 0.4px; } #img_9 { position: absolute; width: 125px; height: 125px; left: 40px; top: 40px; overflow: visible; } #n_10_bp { fill: rgba(255,255,255,1); stroke: rgba(112,112,112,1); stroke-width: 1px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .n_10_bp { position: absolute; overflow: visible; width: 70px; height: 70px; left: 0px; top: 0px; } #Wheter_bq { position: absolute; width: 250px; height: 200px; left: 15px; top: 1084px; overflow: visible; } #Background_br { fill: #FFFFFF; } .Background_br { position: absolute; overflow: visible; width: 250px; height: 200px; left: 0px; top: 0px; } #Place_bs { left: 10px; top: 4px; position: absolute; overflow: visible; width: 79px; white-space: nowrap; text-align: left; font-family: Source Han Sans JP; font-style: normal; font-weight: bold; font-size: 38px; color: rgba(52,52,52,1); letter-spacing: 0.4px; } #img_8 { position: absolute; width: 125px; height: 125px; left: 40px; top: 40px; overflow: visible; } #n_10_bu { fill: rgba(255,255,255,1); stroke: rgba(112,112,112,1); stroke-width: 1px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .n_10_bu { position: absolute; overflow: visible; width: 70px; height: 70px; left: 0px; top: 0px; } #Wheter_bv { position: absolute; width: 250px; height: 200px; left: 326px; top: 860px; overflow: visible; } #Background_bw { fill: #FFFFFF; } .Background_bw { position: absolute; overflow: visible; width: 250px; height: 200px; left: 0px; top: 0px; } #Place_bx { left: 10px; top: 4px; position: absolute; overflow: visible; width: 79px; white-space: nowrap; text-align: left; font-family: Source Han Sans JP; font-style: normal; font-weight: bold; font-size: 38px; color: rgba(52,52,52,1); letter-spacing: 0.4px; } #img_6 { position: absolute; width: 125px; height: 125px; left: 40px; top: 40px; overflow: visible; } #n_10_bz { fill: rgba(255,255,255,1); stroke: rgba(112,112,112,1); stroke-width: 1px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .n_10_bz { position: absolute; overflow: visible; width: 70px; height: 70px; left: 0px; top: 0px; } #Wheter_b { position: absolute; width: 250px; height: 200px; left: 616px; top: 812px; overflow: visible; } #Background_b { fill: #FFFFFF; } .Background_b { position: absolute; overflow: visible; width: 250px; height: 200px; left: 0px; top: 0px; } #Place_b { left: 10px; top: 4px; position: absolute; overflow: visible; width: 79px; white-space: nowrap; text-align: left; font-family: Source Han Sans JP; font-style: normal; font-weight: bold; font-size: 38px; color: rgba(52,52,52,1); letter-spacing: 0.4px; } #img_5 { position: absolute; width: 125px; height: 125px; left: 40px; top: 40px; overflow: visible; } #n_10_b { fill: rgba(255,255,255,1); stroke: rgba(112,112,112,1); stroke-width: 1px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .n_10_b { position: absolute; overflow: visible; width: 70px; height: 70px; left: 0px; top: 0px; } #Wheter_ca { position: absolute; width: 250px; height: 200px; left: 63px; top: 342px; overflow: visible; } #Background_ca { fill: #FFFFFF; } .Background_ca { position: absolute; overflow: visible; width: 250px; height: 200px; left: 0px; top: 0px; } #Place_ca { left: 10px; top: 4px; position: absolute; overflow: visible; width: 79px; white-space: nowrap; text-align: left; font-family: Source Han Sans JP; font-style: normal; font-weight: bold; font-size: 38px; color: rgba(52,52,52,1); letter-spacing: 0.4px; } #img_10 { position: absolute; width: 125px; height: 125px; left: 40px; top: 40px; overflow: visible; } #n_10_ca { fill: rgba(255,255,255,1); stroke: rgba(112,112,112,1); stroke-width: 1px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .n_10_ca { position: absolute; overflow: visible; width: 70px; height: 70px; left: 0px; top: 0px; } #Wheter_cb { position: absolute; width: 250px; height: 200px; left: 1008px; top: 180px; overflow: visible; } #Background_cb { fill: #FFFFFF; } .Background_cb { position: absolute; overflow: visible; width: 250px; height: 200px; left: 0px; top: 0px; } #Place_cc { left: 10px; top: 4px; position: absolute; overflow: visible; width: 79px; white-space: nowrap; text-align: left; font-family: Source Han Sans JP; font-style: normal; font-weight: bold; font-size: 38px; color: rgba(52,52,52,1); letter-spacing: 0.4px; } #img_0 { position: absolute; width: 125px; height: 125px; left: 40px; top: 40px; overflow: visible; } #n_10_ce { fill: rgba(255,255,255,1); stroke: rgba(112,112,112,1); stroke-width: 1px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .n_10_ce { position: absolute; overflow: visible; width: 70px; height: 70px; left: 0px; top: 0px; } </style> </head> <body> <div id="Web_1920__1"> <div id="n_2"> <svg class="n_1"> <rect id="n_1" rx="0" ry="0" x="0" y="0" width="328" height="248"> </rect> </svg> <svg class="n_2_n"> <rect id="n_2_n" rx="0" ry="0" x="0" y="0" width="164" height="662"> </rect> </svg> <svg class="n_3"> <rect id="n_3" rx="0" ry="0" x="0" y="0" width="240" height="332"> </rect> </svg> <svg class="n_5"> <rect id="n_5" rx="0" ry="0" x="0" y="0" width="412" height="167"> </rect> </svg> <svg class="n_6"> <rect id="n_6" rx="0" ry="0" x="0" y="0" width="168" height="89"> </rect> </svg> <svg class="n_7"> <rect id="n_7" rx="0" ry="0" x="0" y="0" width="170" height="170"> </rect> </svg> <svg class="n_8"> <rect id="n_8" rx="0" ry="0" x="0" y="0" width="246" height="254"> </rect> </svg> <svg class="n_9"> <rect id="n_9" rx="0" ry="0" x="0" y="0" width="78" height="95"> </rect> </svg> <svg class="n_4"> <rect id="n_4" rx="0" ry="0" x="0" y="0" width="96" height="89"> </rect> </svg> <svg class="n_1_v" viewBox="74.211 628.737 368.669 172.998"> <path id="n_1_v" d="M 74.21056365966797 801.73486328125 L 269.8815612792969 801.73486328125 L 442.8798522949219 628.736572265625"> </path> </svg> </div> <div id="Wheter" class="Wheter"> <svg class="Background"> <rect id="Background" rx="11" ry="11" x="0" y="0" width="250" height="200"> </rect> </svg> <div id="Place"> <span>青森</span> </div> <div id="img_1"> <img src="https://www.jma.go.jp/bosai/forecast/img/${weathers[1].code}.svg" class="whether-img"> </div> </div> <div id="Wheter_" class="Wheter"> <svg class="Background_"> <rect id="Background_" rx="11" ry="11" x="0" y="0" width="250" height="200"> </rect> </svg> <div id="Place_"> <span>仙台</span> </div> <div id="img_2"> <img src="https://www.jma.go.jp/bosai/forecast/img/${weathers[2].code}.svg" class="whether-img"> </div> </div> <div id="Wheter_ba" class="Wheter"> <svg class="Background_ba"> <rect id="Background_ba" rx="11" ry="11" x="0" y="0" width="250" height="200"> </rect> </svg> <div id="Place_ba"> <span>東京</span> </div> <div id="img_3"> <img src="https://www.jma.go.jp/bosai/forecast/img/${weathers[3].code}.svg" class="whether-img"> </div> </div> <div id="Wheter_bb" class="Wheter"> <svg class="Background_bc"> <rect id="Background_bc" rx="11" ry="11" x="0" y="0" width="250" height="200"> </rect> </svg> <div id="Place_bd"> <span>名古屋</span> </div> <div id="img_4"> <img src="https://www.jma.go.jp/bosai/forecast/img/${weathers[4].code}.svg" class="whether-img"> </div> </div> <div id="Wheter_bg" class="Wheter"> <svg class="Background_bh"> <rect id="Background_bh" rx="11" ry="11" x="0" y="0" width="250" height="200"> </rect> </svg> <div id="Place_bi"> <span>高松</span> </div> <div id="img_7"> <img src="https://www.jma.go.jp/bosai/forecast/img/${weathers[7].code}.svg" class="whether-img"> </div> </div> <div id="Wheter_bl" class="Wheter"> <svg class="Background_bm"> <rect id="Background_bm" rx="11" ry="11" x="0" y="0" width="250" height="200"> </rect> </svg> <div id="Place_bn"> <span>鹿児島</span> </div> <div id="img_9"> <img src="https://www.jma.go.jp/bosai/forecast/img/${weathers[9].code}.svg" class="whether-img"> </div> </div> <div id="Wheter_bq" class="Wheter"> <svg class="Background_br"> <rect id="Background_br" rx="11" ry="11" x="0" y="0" width="250" height="200"> </rect> </svg> <div id="Place_bs"> <span>福岡</span> </div> <div id="img_8"> <img src="https://www.jma.go.jp/bosai/forecast/img/${weathers[8].code}.svg" class="whether-img"> </div> </div> <div id="Wheter_bv" class="Wheter"> <svg class="Background_bw"> <rect id="Background_bw" rx="11" ry="11" x="0" y="0" width="250" height="200"> </rect> </svg> <div id="Place_bx"> <span>広島</span> </div> <div id="img_6"> <img src="https://www.jma.go.jp/bosai/forecast/img/${weathers[6].code}.svg" class="whether-img"> </div> </div> <div id="Wheter_b" class="Wheter"> <svg class="Background_b"> <rect id="Background_b" rx="11" ry="11" x="0" y="0" width="250" height="200"> </rect> </svg> <div id="Place_b"> <span>大阪</span> </div> <div id="img_5"> <img src="https://www.jma.go.jp/bosai/forecast/img/${weathers[5].code}.svg" class="whether-img"> </div> </div> <div id="Wheter_ca" class="Wheter"> <svg class="Background_ca"> <rect id="Background_ca" rx="11" ry="11" x="0" y="0" width="250" height="200"> </rect> </svg> <div id="Place_ca"> <span>那覇</span> </div> <div id="img_10"> <img src="https://www.jma.go.jp/bosai/forecast/img/${weathers[10].code}.svg" class="whether-img"> </div> </div> <div id="Wheter_cb" class="Wheter"> <svg class="Background_cb"> <rect id="Background_cb" rx="11" ry="11" x="0" y="0" width="250" height="200"> </rect> </svg> <div id="Place_cc"> <span>札幌</span> </div> <div id="img_0"> <img src="https://www.jma.go.jp/bosai/forecast/img/${weathers[0].code}.svg" class="whether-img"> </div> </div> </div> </body></html>` | |
| // res.send(html); | |
| const browser = await puppeteer.launch(); //ブラウザーの起動 | |
| const page = await browser.newPage(); //ページの作成 | |
| await page.setContent(html); //htmlをページにセット | |
| // ページ全体が表示されるように、画像のサイズを指定する | |
| const dimensions = await page.evaluate(() => { | |
| return { | |
| width: document.body.scrollWidth, | |
| height: document.body.scrollHeight | |
| }; | |
| }); | |
| // htmlをpng形式の画像に変換する | |
| const image = await page.screenshot({ | |
| type: 'png', | |
| width: dimensions.width, | |
| height: dimensions.height, | |
| fullPage: true | |
| }); | |
| // 画像をブラウザーに返す | |
| res.set('Content-Type', 'image/png'); | |
| res.send(image); | |
| await browser.close(); //ブラウザーを閉じる | |
| }); | |
| // サーバーを起動する | |
| app.listen(3000, () => { | |
| console.log('Server listening on port 3000'); | |
| }); | |
| module.exports = app; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment