{"id":1196,"date":"2020-04-21T15:01:06","date_gmt":"2020-04-21T06:01:06","guid":{"rendered":"https:\/\/takaya-com.jp\/archives\/?p=1196"},"modified":"2020-04-21T15:01:06","modified_gmt":"2020-04-21T06:01:06","slug":"%e3%80%90javascript%e3%80%91%e5%b9%be%e4%bd%95%e5%ad%a6%e3%81%a7%e3%83%9a%e3%83%bc%e3%82%b8%e8%83%8c%e6%99%af%e3%81%ab%e5%8b%95%e3%81%8d%e3%82%92%e3%81%a4%e3%81%91%e3%82%88%e3%81%86","status":"publish","type":"post","link":"https:\/\/takaya-com.jp\/archives\/2020\/04\/%e3%80%90javascript%e3%80%91%e5%b9%be%e4%bd%95%e5%ad%a6%e3%81%a7%e3%83%9a%e3%83%bc%e3%82%b8%e8%83%8c%e6%99%af%e3%81%ab%e5%8b%95%e3%81%8d%e3%82%92%e3%81%a4%e3%81%91%e3%82%88%e3%81%86\/","title":{"rendered":"\u3010JavaScript\u3011\u5e7e\u4f55\u5b66\u3067\u30da\u30fc\u30b8\u80cc\u666f\u306b\u52d5\u304d\u3092\u3064\u3051\u3088\u3046"},"content":{"rendered":"<p>\u4eca\u56de\u306fJavaScript\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3057\u3066\u3001\u30da\u30fc\u30b8\u306e\u80cc\u666f\u306b\u52d5\u304d\u3092\u3064\u3051\u3066\u307f\u307e\u3057\u305f\u3002\u4f7f\u7528\u3057\u305f\u30e9\u30a4\u30d6\u30e9\u30ea\u306fGit\u3067\u516c\u958b\u3055\u308c\u3066\u3044\u308b\u300cparticles.js\u300d\u3092\u4f7f\u7528\u3057\u307e\u3057\u305f\u3002<br \/>\n\u4e0b\u8a18\u30da\u30fc\u30b8\u3067\u307e\u305a\u306f\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><a href=\"https:\/\/vincentgarreau.com\/particles.js\/\">particles.js<\/a><\/p>\n<p>\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u305f\u5727\u7e2e\u30d5\u30a1\u30a4\u30eb\u3092\u89e3\u51cd\u3057\u3001\u30c7\u30e2\u30d5\u30a1\u30a4\u30eb\u3084\u5fc5\u8981\u306a\u30d5\u30a1\u30a4\u30eb\u304c\u305d\u308d\u3063\u3066\u3044\u307e\u3059\u306e\u3067\u3001\u300cparticles.min.js\u300d\u3092\u8aad\u307f\u8fbc\u3080\u3088\u3046\u306bhtml\u3078\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"HTML\">&lt;!-- \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u305f\u30d5\u30a1\u30a4\u30eb   --&gt;\r\n&lt;script src=\"js\/particles.min.js\"&gt;&lt;\/script&gt;\r\n&lt;!-- \u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb   --&gt;\r\n&lt;script src=\"js\/particles_set.js\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>\u6b21\u306b\u3001\u5e7e\u4f55\u5b66\u3092\u8868\u793a\u3055\u305b\u308b\u8981\u7d20\u3092\u7528\u610f\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"HTML\">&lt;div class=\"demo01\" id=\"demo01\"&gt;&lt;\/div&gt;\r\n<\/pre>\n<p>\u307e\u305a\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u8a2d\u5b9a\u3067\u8868\u793a\u3055\u305b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u25bcJavaScript [particles_set.js]<\/p>\n<pre class=\"lang:js decode:true \" title=\"JavaScript\">\r\nwindow.onload = function() {\r\n    \/\/ \"id\"\u3092\u6307\u5b9a\r\n    particlesJS(\"demo01\");\r\n}\r\n<\/pre>\n<p><a href=\"http:\/\/www.takaya-com.jp\/archives\/demo\/particles\/#demo01\" target=\"_blank\" rel=\"noopener noreferrer\">\u30c7\u30e21<\/a><\/p>\n<p>\u305f\u3063\u305f\u3053\u308c\u3060\u3051\u3067\u3059\u304c\u3001\u52d5\u304d\u306e\u3042\u308b\u8981\u7d20\u304c\u4f5c\u308c\u3061\u3083\u3044\u307e\u3059\u3002\u6b21\u306b\u3001\u8a2d\u5b9a\u5024\u306b\u3064\u3044\u3066\u3054\u8aac\u660e\u3044\u305f\u3057\u307e\u3059\u3002<\/p>\n<p>\u25bcJavaScript [particles_set.js]<\/p>\n<pre class=\"lang:js decode:true \" title=\"JavaScript\">particlesJS(\"demo\", { \/\/\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u8868\u793a\u3059\u308b\u8981\u7d20(id)\u3092\u6307\u5b9a\u3059\u308b\u3002\r\n  \"particles\": {\r\n    \/\/ \u30b7\u30a7\u30a4\u30d7\u6570\r\n    \"number\": {\r\n      \/\/ \u8981\u7d20\u306b\u51fa\u529b\u3059\u308b\u6570\r\n      \"value\": 80,\r\n      \"density\": {\r\n        \"enable\": true,  \/\/true:\u6709\u52b9, false:\u7121\u52b9\r\n        \"value_area\": 1000  \/\/ \u8868\u793a\u9593\u9694\r\n      }\r\n    },\r\n    \/\/ \u8272\r\n    \"color\": {\r\n      \"value\": \"#7fbfff\"  \/\/ \u8907\u6570\u8a2d\u5b9a[\"#000,#fff\"]\r\n    },\r\n    \"shape\": {\r\n      \/\/ \u30b7\u30a7\u30a4\u30d7\u306e\u5f62\r\n      \"type\": \"circle\",  \/\/ circle, edge, triangle, polygon, star, image, \u8907\u6570\u6307\u5b9a[\"circle\", \"triangle\", \"image\"]\r\n      \/\/\u30b7\u30a7\u30a4\u30d7\u30dc\u30fc\u30c0\u30fc\u8a2d\u5b9a\r\n      \"stroke\": {\r\n        \/\/ \u5e45\r\n        \"width\": 0,\r\n        \/\/ \u8272\r\n        \"color\": \"#000000\"\r\n      },\r\n      \/\/ type = polygon\u306e\u8a73\u7d30\u8a2d\u5b9a\r\n      \"polygon\": {\r\n        \/\/ \u89d2\u5f62\r\n        \"nb_sides\": 4\r\n      },\r\n      \/\/ type = image\u306e\u8a73\u7d30\u8a2d\u5b9a\r\n      \"image\": {\r\n        \"src\": \"img\/github.svg\",  \/\/ \u753b\u50cf\u30d1\u30b9\r\n        \"width\": 100,  \/\/ \u5e45\r\n        \"height\": 100  \/\/ \u9ad8\u3055\r\n      }\r\n    },\r\n    \/\/ \u30b7\u30a7\u30a4\u30d7\u900f\u660e\u5ea6\r\n    \"opacity\": {\r\n      \/\/ \u30b7\u30a7\u30a4\u30d7\u900f\u660e\u5ea6\u306e\u5024\r\n      \"value\": 0.6,\r\n      \/\/ \u30e9\u30f3\u30c0\u30e0\u8a2d\u5b9a\r\n      \"random\": false,  \/\/true:\u6709\u52b9, false:\u7121\u52b9\r\n      \/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\r\n      \"anim\": {\r\n        \"enable\": false,  \/\/true:\u6709\u52b9, false:\u7121\u52b9\r\n        \"speed\": 1,  \/\/\u901f\u5ea6\r\n        \"opacity_min\": 1,  \/\/\u6700\u5c0f\u900f\u904e\u7387\r\n        \"sync\": false  \/\/\u540c\u671f true:\u6709\u52b9, false:\u7121\u52b9\r\n      }\r\n    },\r\n    \/\/ \u30b7\u30a7\u30a4\u30d7\u30b5\u30a4\u30ba\r\n    \"size\": {\r\n      \/\/ \u30b5\u30a4\u30ba\u5024\r\n      \"value\": 10,\r\n      \/\/ \u30b5\u30a4\u30ba\u30e9\u30f3\u30c0\u30e0\r\n      \"random\": true,  \/\/true:\u6709\u52b9, false:\u7121\u52b9\r\n      \/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\r\n      \"anim\": {\r\n        \"enable\": false,\r\n        \"speed\": 10,\r\n        \"size_min\": 0.1,\r\n        \"sync\": true\r\n      }\r\n    },\r\n    \/\/ \u7dda\u3067\u3064\u306a\u3052\u308b\r\n    \"line_linked\": {\r\n      \"enable\": true,  \/\/true:\u6709\u52b9, false:\u7121\u52b9\r\n      \"distance\": 200,  \/\/ \u9593\u9694\r\n      \"color\": \"#ffffff\",  \/\/ \u8272\r\n      \"opacity\": 0.8,  \/\/ \u900f\u904e\r\n      \"width\": 2  \/\/ \u5e45\r\n    },\r\n    \/\/ \u52d5\u304d\r\n    \"move\": {\r\n      \"enable\": true,  \/\/true:\u6709\u52b9, false:\u7121\u52b9\r\n      \"speed\": 2,  \/\/ \u901f\u5ea6\r\n      \"direction\": \"none\",  \/\/ \u52d5\u304f\u65b9\u5411 none, top, top-right, right, bottom-right, bottom, bottom-left, left, top-left\r\n      \"random\": true,  \/\/ \u30e9\u30f3\u30c0\u30e0\u8a2d\u5b9a true:\u6709\u52b9, false:\u7121\u52b9\r\n      \"straight\": false,  \/\/ \u9759\u6b62 true:\u6709\u52b9, false:\u7121\u52b9\r\n      \"out_mode\": \"bounce\",  \/\/ \u5916\u5074\u306e\u52d5\u304d \u30dc\u30c3\u30af\u30b9\u5185\uff1abounce \u5916\u306b\u9003\u304c\u3059\uff1aout\r\n      \"bounce\": false,  \/\/ \u30e9\u30f3\u30c0\u30e0\u8a2d\u5b9a true:\u6709\u52b9, false:\u7121\u52b9\r\n      \"attract\": {\r\n        \"enable\": false,\r\n        \"rotateX\": 600,\r\n        \"rotateY\": 1200\r\n      }\r\n    }\r\n  },\r\n  \"interactivity\": {\r\n    \"detect_on\": \"canvas\",\r\n    \/\/ \u30a4\u30d9\u30f3\u30c8\u8a2d\u5b9a\r\n    \"events\": {\r\n      \/\/ \u30de\u30a6\u30b9\u30db\u30d0\u30fc\r\n      \"onhover\": {\r\n        \"enable\": true,  \/\/true:\u6709\u52b9, false:\u7121\u52b9\r\n        \"mode\": \"repulse\"  \/\/grad:\u30b7\u30a7\u30a4\u30d7\u3068\u7e4b\u3050, bubble:\u62e1\u5927, repulse:\u53cd\u767a\r\n      },\r\n      \/\/ \u30af\u30ea\u30c3\u30af\r\n      \"onclick\": {\r\n        \"enable\": false,  \/\/true:\u6709\u52b9, false:\u7121\u52b9\r\n        \"mode\": \"push\"  \/\/push:\u8ffd\u52a0, remove:\u524a\u9664, bubble:\u62e1\u5927, repulse:\u53cd\u767a\r\n      },\r\n      \/\/ \u753b\u9762\u30ea\u30b5\u30a4\u30ba\r\n      \"resize\": true\r\n    },\r\n    \/\/ \u30de\u30a6\u30b9\u30a4\u30d9\u30f3\u30c8\u306e\u8a2d\u5b9a\r\n    \"modes\": {\r\n      \"grab\": {\r\n        \"distance\": 400,\r\n        \"line_linked\": {\r\n          \"opacity\": 1\r\n        }\r\n      },\r\n      \"bubble\": {\r\n        \"distance\": 400,\r\n        \"size\": 40,\r\n        \"duration\": 2,\r\n        \"opacity\": 8,\r\n        \"speed\": 3\r\n      },\r\n      \"repulse\": {\r\n        \"distance\": 100,\r\n        \"duration\": 0.4\r\n      },\r\n      \"push\": {\r\n        \"particles_nb\": 4\r\n      },\r\n      \"remove\": {\r\n        \"particles_nb\": 2\r\n      }\r\n    }\r\n  },\r\n  \/\/Retina Display\u5bfe\u5fdc\r\n  \"retina_detect\": true\r\n});\r\n<\/pre>\n<p>\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\u304c\u8c4a\u5bcc\u306a\u306e\u3067\u30a2\u30a4\u30c7\u30a3\u30a2\u6b21\u7b2c\u3067\u3055\u307e\u3056\u307e\u306a\u8868\u73fe\u304c\u3067\u304d\u305d\u3046\u3067\u3059\u306d\uff01<br \/>\u30b5\u30f3\u30d7\u30eb\u30c7\u30e2\u3067\u306f\u8a2d\u5b9a\u5024\u3092\u5909\u3048\u3066\u96f0\u56f2\u6c17\u306e\u7570\u306a\u308b\u52d5\u304d\u3092\u8868\u73fe\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<p>    <a href=\"http:\/\/www.takaya-com.jp\/archives\/demo\/particles\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u3001\u3053\u3061\u3089 \uff08\u30c7\u30d5\u30a9\u30eb\u30c8\u3068\u5408\u308f\u305b\u30663\u3064\u306e\u52d5\u304d\u3092\u8868\u73fe\u3057\u3066\u3044\u307e\u3059\u3002\uff09<\/a><\/p>\n<p>\u4eca\u56de\u306e\u8a18\u4e8b\u3084\u30c7\u30e2\u30da\u30fc\u30b8\u4f5c\u6210\u306b\u3042\u305f\u308a<br \/>\n<a href=\"https:\/\/taaaaaaaca.com\/2018\/508\/\" target=\"_blank\" rel=\"noopener noreferrer\">particles.js\u3092\u4f7f\u3063\u3066\u8981\u7d20\u306e\u80cc\u666f\u306b\u7f8e\u3057\u3044\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u8868\u793a\u3059\u308b<\/a>\u3055\u3093\u306e\u30da\u30fc\u30b8\u3092\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3057\u305f\u3002<br \/>\n\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4eca\u56de\u306fJavaScript\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3057\u3066\u3001\u30da\u30fc\u30b8\u306e\u80cc\u666f\u306b\u52d5\u304d\u3092\u3064\u3051\u3066\u307f\u307e\u3057\u305f\u3002\u4f7f\u7528\u3057\u305f\u30e9\u30a4\u30d6\u30e9\u30ea\u306fGit\u3067\u516c\u958b\u3055\u308c\u3066\u3044\u308b\u300cparticles.js\u300d\u3092\u4f7f\u7528\u3057\u307e\u3057\u305f\u3002 \u4e0b\u8a18\u30da\u30fc\u30b8\u3067\u307e\u305a\u306f\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u304c\u3067\u304d\u307e\u3059\u3002 p [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/1196"}],"collection":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/comments?post=1196"}],"version-history":[{"count":25,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/1196\/revisions"}],"predecessor-version":[{"id":1225,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/1196\/revisions\/1225"}],"wp:attachment":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/media?parent=1196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/categories?post=1196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/tags?post=1196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}