{"id":1471,"date":"2021-06-23T07:59:42","date_gmt":"2021-06-22T22:59:42","guid":{"rendered":"https:\/\/sirius10.net\/blog\/wordpress\/?p=1471"},"modified":"2021-06-23T07:59:45","modified_gmt":"2021-06-22T22:59:45","slug":"post-1471","status":"publish","type":"post","link":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/2021\/06\/23\/1471\/","title":{"rendered":"puppeteer \u3067 Web \u30da\u30fc\u30b8\u3092\u64cd\u4f5c\u3059\u308b"},"content":{"rendered":"\n

\u3000\u4eca\u56de\u306f\u3001\u7c21\u5358\u306a web \u30da\u30fc\u30b8\u3092 puppeteer \u3067\u64cd\u4f5c\u3057\u3066\u898b\u307e\u3059\u3002<\/p>\n\n\n\n

\u64cd\u4f5c\u5bfe\u8c61\u306e html \u3068 php<\/h2>\n\n\n\n

\u6b21\u306e\u3088\u3046\u306a html \u3068 php \u3092 web \u30b5\u30a4\u30c8\u306b\u6e96\u5099\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

puppeteer_test.html<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name='robots' content='noindex,nofollow'>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=yes\">\n  <title>puppeteer \u306e\u30c6\u30b9\u30c8\u30da\u30fc\u30b8<\/title>\n  <style>\n    body { background-color: #efefef; }\n  <\/style>\n<\/head>\n<body>\n<h1>puppeteer \u306e\u64cd\u4f5c\u30c6\u30b9\u30c8<\/h1>\n<h2>\u30d5\u30a9\u30fc\u30e0\u64cd\u4f5c\u306e\u30c6\u30b9\u30c8<\/h2>\n\u8907\u6570\u306e submit \u30dc\u30bf\u30f3\u304c\u6709\u3063\u305f\u5834\u5408\u3067\u3082\u30af\u30ea\u30c3\u30af\u64cd\u4f5c\u3092\u533a\u5225\u3067\u304d\u307e\u3059\u3002\n<form method=\"get\" neme=\"add\" action=\"test.php\">\n  <input type=\"text\" name=\"a\" size=\"15\" value=\"\" placeholder=\"\u6570\u5b57\u3092\u5165\u529b\" required>\n  <input type=\"text\" name=\"b\" size=\"15\" value=\"\" placeholder=\"\u6570\u5b57\u3092\u5165\u529b\" required>\n  <button type=\"submit\" name=\"action\" value=\"add\">\u8db3\u3059<\/button>\n  <button type=\"submit\" name=\"action\" value=\"sub\">\u5f15\u304f<\/button>\n<\/form>\n<h2>details \u30bf\u30b0\u306e\u30af\u30ea\u30c3\u30af\u30c6\u30b9\u30c8<\/h2>\n<details>\n  <summary>\u30af\u30ea\u30c3\u30af\u3067\u8a73\u7d30\u8868\u793a<\/summary>\n  \u3053\u306e\u6587\u7ae0\u304c\u8868\u793a\u3055\u308c\u308c\u3070\u3001details \u30bf\u30b0\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002\n<\/details>\n<\/body>\n<\/html><\/pre>\n\n\n\n
test.php<\/p>\n\n\n\n
<?php\n$a = $_REQUEST['a'];\n$b = $_REQUEST['b'];\nif( $_REQUEST['action'] == \"add\" ) {\n    $ans = $a + $b;\n    $op = '+';\n} else {\n    $ans = $a - $b;\n    $op = '-';\n}\n?>\n<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name='robots' content='noindex,nofollow'>\n  <title>\\u8a08\\u7b97\\u7d50\\u679c<\/title>\n<\/head>\n<body>\n<?php echo $a . \" \" . $op . \" \" . $b; ?> \u306f <?php echo $ans; ?> \u3067\u3059\u3002\n<\/body>\n<\/html>\n<\/pre>\n\n\n\n
\u3000\u78ba\u8a8d\u3067\u304d\u308b\u3088\u3046\u306b\u3001\u3053\u308c\u3089\u306e\u30d5\u30a1\u30a4\u30eb\u306f\u3001\u3053\u306e\u30b5\u30a4\u30c8\u306b \u7f6e\u304d\u307e\u3057\u305f\u3002<\/a><\/p>\n\n\n\n
puppeteer \u306e\u30b3\u30fc\u30c9<\/h2>\n\n\n\n
\u3000\u30c6\u30b9\u30c8\u7528\u306e html \u306f\u3001\u8db3\u3057\u7b97\u3068\u5f15\u304d\u7b97\u3092\u3059\u308b\u30d5\u30a9\u30fc\u30e0\u3068\u3001details \u30bf\u30b0\u3092\u4f7f\u3063\u305f\u8a73\u7d30\u8868\u793a\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u308c\u3092 puppetter \u3067\u64cd\u4f5c\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
#!\/usr\/bin\/node\n\nconst puppeteer = require(\"puppeteer-core\");\n\nconst URL = \"https:\/\/sirius10.net\/SampleCode\/Puppeteer\/puppeteer_test.html\";\n\n(async () => {\n  console.log(\"*** Start ***\");\n\n  console.log(\"Chromium \u8d77\u52d5\");\n  const browser = await puppeteer.launch({\n    headless: false,\n    slowMo: 50,\n    executablePath: \"\/usr\/bin\/chromium-browser\"\n  });\n\n  const page = await browser.newPage();\n\n  await page.setViewport({\n    width: 640,\n    height: 400\n  });\n\n  console.log(URL + \" \u3078\u79fb\u52d5\");\n  await page.goto(URL);\n  await page.screenshot({ path: \"1,\u958b\u3044\u305f\u76f4\u5f8c\u306e\u753b\u9762.png\" });\n\n  \/\/ detail \u3092\u958b\u304f\n  await page.click('details');\n  await page.screenshot({ path: \"2,detail \u30bf\u30b0\u3092\u958b\u304f.png\" });\n\n  \/\/ \u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u306b\u5165\u529b\n  await page.type('input[name=\"a\"]', '12');\n  await page.type('input[name=\"b\"]', '13');\n  await page.screenshot({ path: \"3,text \u30dc\u30c3\u30af\u30b9\u306b\u5165\u529b.png\" });\n\n  \/\/ submit \u30dc\u30bf\u30f3\u3092\u62bc\u3059\n  await page.click('button[value=\"sub\"]');\n  await page.screenshot({ path: \"4,\u5f15\u304d\u7b97\u306e\u7d50\u679c.png\" });\n\n  console.log(\"Chromium \u7d42\u4e86\");\n  await browser.close();\n\n  console.log(\"*** End ***\");\n})();<\/pre>\n\n\n\n
\u30b3\u30fc\u30c9\u306e\u8aac\u660e<\/h2>\n\n\n\n
\u3000\u307e\u305a\u3001html \u3092\u958b\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
await page.goto(URL);<\/pre>\n\n\n\n
\u306e\u90e8\u5206\u3067\u3059\u3002<\/p>\n\n\n\n
\"\"
html \u3092\u958b\u3044\u305f\u3068\u3053\u308d<\/figcaption><\/figure><\/div>\n\n\n\n
\u3000\u6b21\u306b details \u30bf\u30b0\u3092\u30af\u30ea\u30c3\u30af\u3055\u305b\u3066\u8a73\u7d30\u3092\u8868\u793a\u3057\u307e\u3059\u3002puppeteer \u3067\u306f\u6b21\u306e\u30b3\u30fc\u30c9\u306e\u90e8\u5206\u3067\u3059\u3002<\/p>\n\n\n\n
await page.click('details');<\/pre>\n\n\n\n
\u3000\u3053\u306e html \u306e\u4e2d\u306b\u3001details \u30bf\u30b0\u306f\u4e00\u3064\u3057\u304b\u7121\u3044\u306e\u3067\u3001\u30bf\u30b0\u540d\u3060\u3051\u6307\u5b9a\u3057\u3066\u30af\u30ea\u30c3\u30af\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"
details \u30bf\u30b0\u3092\u30af\u30ea\u30c3\u30af\u3055\u305b\u305f<\/figcaption><\/figure><\/div>\n\n\n\n
\u3000\u6b21\u306b\u30d5\u30a9\u30fc\u30e0\u306e\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u306b\u6570\u5b57\u3092\u5165\u529b\u3057\u307e\u3059\u3002input \u8981\u7d20\u3067\u3059\u304c\u3001\u8907\u6570\u3042\u308b\u306e\u3067\u3001name \u5c5e\u6027\u3092\u4f7f\u3063\u3066\u533a\u5225\u3057\u307e\u3059\u3002\u6b21\u306e\u90e8\u5206\u3067\u3059\u3002<\/p>\n\n\n\n
await page.type('input[name=\"a\"]', '12');
await page.type('input[name=\"b\"]', '13');<\/pre>\n\n\n\n
\"\"
\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u306b\u5165\u529b<\/figcaption><\/figure><\/div>\n\n\n\n
\u3000\u6b21\u306b\u30d5\u30a9\u30fc\u30e0\u306e\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u306e\u3067\u3059\u304c\u3001\u30dc\u30bf\u30f3\u304c2\u3064\u3042\u308b\u306e\u3067\u3001\u533a\u5225\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002html \u3067\u306f\u6b21\u306e\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3001value \u5c5e\u6027\u3067\u533a\u5225\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
  <button type=\"submit\" name=\"action\" value=\"add\">\u8db3\u3059<\/button>\n  <button type=\"submit\" name=\"action\" value=\"sub\">\u5f15\u304f<\/button><\/pre>\n\n\n\n
\u3000puppeteer \u306e\u30b3\u30fc\u30c9\u3067\u306f\u6b21\u306e\u90e8\u5206\u3067\u3059\u3002\u5f15\u304f\u306e\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
await page.click('button[value=\"sub\"]');<\/pre>\n\n\n\n
\"\"
\u5f15\u304d\u7b97\u306e\u7d50\u679c<\/figcaption><\/figure><\/div>\n\n\n\n
\u3000id \u3084 class \u304c\u306a\u304f\u3066\u3082\u3001\u4ed6\u306e\u5c5e\u6027\u3092\u4f7f\u3063\u3066\u8981\u7d20\u3092\u7279\u5b9a\u3067\u304d\u308c\u3070\u64cd\u4f5c\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3057\u305f\u3002\u3082\u3063\u3068\u8907\u96d1\u306a\u5834\u5408\u306e\u6307\u5b9a\u65b9\u6cd5\u306f\u307e\u305f\u5225\u306e\u8a18\u4e8b\u306b\u3057\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u3000\u4eca\u56de\u306f\u3001\u7c21\u5358\u306a web \u30da\u30fc\u30b8\u3092 puppeteer \u3067\u64cd\u4f5c\u3057\u3066\u898b\u307e\u3059\u3002 \u64cd\u4f5c\u5bfe\u8c61\u306e html \u3068 php \u6b21\u306e\u3088\u3046\u306a html \u3068 php \u3092 web \u30b5\u30a4\u30c8\u306b\u6e96\u5099\u3057\u307e\u3059\u3002 puppeteer_test.html & […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,4],"tags":[],"class_list":["post-1471","post","type-post","status-publish","format-standard","hentry","category-pupeeteer","category-raspberry-pi"],"_links":{"self":[{"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=1471"}],"version-history":[{"count":8,"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1471\/revisions"}],"predecessor-version":[{"id":1505,"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1471\/revisions\/1505"}],"wp:attachment":[{"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}