{"id":3811,"date":"2018-07-22T11:02:07","date_gmt":"2018-07-22T02:02:07","guid":{"rendered":"https:\/\/www.ws-meguro.com\/\/?p=3811"},"modified":"2018-07-22T11:12:37","modified_gmt":"2018-07-22T02:12:37","slug":"javascript%e3%81%ae%e7%b7%b4%e7%bf%92%ef%bc%9aphoto-gallery","status":"publish","type":"post","link":"https:\/\/www.wsmeguro.jp\/wp\/?p=3811","title":{"rendered":"JavaScript\u306e\u7df4\u7fd2\uff1aPhoto Gallery"},"content":{"rendered":"<p>MDN\u306b\u6cbf\u3063\u305fJavaSCript\u306e\u7df4\u7fd2\u3092\u7d99\u7d9a\u3057\u3066\u307e\u3059\u3002\u3088\u3046\u3084\u304f\u3001<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Learn\/JavaScript\/Building_blocks\" rel=\"noopener\" target=\"_blank\">JavaScript\u306e\u69cb\u6210\u8981\u7d20<\/a>\u306e\u6700\u5f8c\u307e\u3067\u5230\u7740\u3057\u307e\u3057\u305f\u3002<br \/>\n<a href=\"https:\/\/www.wsmeguro.jp\/\/tools\/js\/photo\/index.html\" rel=\"noopener\" target=\"_blank\">\u6210\u679c\u7269\u306f\u3053\u3061\u3089\u3067\u3059<\/a>\u3002<br \/>\n\u7d50\u8ad6\u7684\u306b\u306f\u3001thumb-bar\u306b\u753b\u50cf\u3092\u8a2d\u5b9a\u3059\u308b\u307e\u3067\u306f\u3067\u304d\u307e\u3057\u305f\u304c\u3001\u95a2\u6570\u307e\u3067\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u306f\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\u3002\u56de\u7b54\u3067\u306ffor\u306e\u4e2d\u306b\u3001function(e)\u304c\u5165\u3063\u3066\u3044\u307e\u3059\u304c\u3001VS Code\u3067\u306f\u3001\u3053\u308c\u306f\u304a\u52e7\u3081\u3067\u304d\u306a\u3044\u3068\u3044\u3046\u8b66\u544a\u304c\u51fa\u3066\u304d\u307e\u3059\u3002\u3067\u3082\u3001\u3058\u3083\u3041\u3001\u3069\u3046\u3059\u308c\u3070\u3044\u3044\u306e\u304b\u5bfe\u5fdc\u307e\u3067\u306f\u6559\u3048\u3066\u304f\u308c\u3066\u3044\u306a\u3044\u306e\u3067\u3001\u3044\u304f\u3064\u304b\u8a66\u3057\u3066\u307f\u307e\u3057\u305f\u304c\u3001\u3044\u305a\u308c\u3082\u52d5\u304b\u305a\u30fb\u30fb\u30fb\u30fb\u3001\u7d50\u5c40\u3001\u56de\u7b54\u305d\u306e\u307e\u307e\u306b\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u306a\u304a\u3001electron\u306b\u3088\u308b\u30a2\u30d7\u30ea\u5316\u306f\u7c21\u5358\u306b\u3067\u304d\u307e\u3057\u305f\u3002<!--more--><\/p>\n<p>index.html<\/p>\n<pre class=\"lang:php decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;Image gallery&lt;\/title&gt;\r\n    &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;h1&gt;Image gallery example&lt;\/h1&gt;\r\n    &lt;div class=\"full-img\"&gt;\r\n      &lt;img class=\"displayed-img\" src=\"images\/mountain6.jpg\" width=\"640px\"&gt;\r\n      &lt;div class=\"overlay\"&gt;&lt;\/div&gt;\r\n      &lt;button class=\"dark\"&gt;Darken&lt;\/button&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"thumb-bar\"&gt;\r\n    &lt;\/div&gt;\r\n    &lt;script src=\"script.js\"&gt;&lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>script.js<\/p>\n<pre class=\"lang:js decode:true \" >var displayedImage = document.querySelector('.displayed-img');\r\nvar thumbBar = document.querySelector('.thumb-bar');\r\n\r\nbtn = document.querySelector('button');\r\nvar overlay = document.querySelector('.overlay');\r\n\r\n\/* Looping through images *\/\r\n\r\nfor (var i=0; i&lt;5; i++){\r\n  var newImage = document.createElement('img');\r\n  newImage.setAttribute('src', 'images\/mountain' + i + '.jpg');\r\n  thumbBar.appendChild(newImage);\r\n\r\n  newImage.onclick = function(e) {\r\n    console.log(e);\r\n    var imgSrc = e.target.getAttribute('src');\r\n    displayImage(imgSrc);\r\n  }\r\n}\r\n\r\nfunction displayImage(fileName){\r\n  displayedImage.setAttribute('src', fileName);\r\n}\r\n\/* Wiring up the Darken\/Lighten button *\/\r\n\r\nbtn.onclick = function() {\r\n  var btnClass = btn.getAttribute('class'); \r\n  if(btnClass === 'dark') {\r\n    btn.setAttribute('class','light');\r\n    btn.textContent = 'Lighten';\r\n    overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';\r\n  } else {\r\n    btn.setAttribute('class','dark');\r\n    btn.textContent = 'Darken';\r\n    overlay.style.backgroundColor = 'rgba(0,0,0,0)';\r\n  }\r\n}\r\n<\/pre>\n<p>style.css<\/p>\n<pre class=\"lang:php decode:true \" >h1 {\r\n  font-family: helvetica, arial, sans-serif;\r\n  text-align: center;\r\n}\r\n\r\nbody {\r\n  width: 640px;\r\n  margin: 0 auto;\r\n  background-color: black;\r\n  color: white;\r\n}\r\n\r\n.full-img {\r\n  position: relative;\r\n  display: block;\r\n  width: 640px;\r\n  height: 480px;\r\n}\r\n\r\n.overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 640px;\r\n  height: 480px;\r\n  background-color: rgba(0,0,0,0);\r\n}\r\n\r\nbutton {\r\n  border: 0;\r\n  background: rgba(150,150,150,0.6);\r\n  text-shadow: 1px 1px 1px white;\r\n  border: 1px solid #999;\r\n  position: absolute;\r\n  cursor: pointer;\r\n  top: 2px;\r\n  left: 2px;\r\n}\r\n\r\n.thumb-bar img {\r\n  display: block;\r\n  width: 20%;\r\n  float: left;\r\n  cursor: pointer;\r\n}<\/pre>\n<p>electron\u3067\u30a2\u30d7\u30ea\u5316\u3059\u308b\u306b\u306f\u3001\u300cnpm init -y\u300d\u3057\u305f\u3042\u3068\u3001<br \/>\npackage.json<\/p>\n<pre class=\"lang:js decode:true \" >{\r\n  \"name\": \"photo\",\r\n  \"version\": \"1.0.0\",\r\n  \"description\": \"\",\r\n  \"main\": \"main.js\",\r\n  \"scripts\": {\r\n    \"test\": \"echo \\\"Error: no test specified\\\" &amp;&amp; exit 1\"\r\n  },\r\n  \"keywords\": [],\r\n  \"author\": \"\",\r\n  \"license\": \"ISC\",\r\n  \"devDependencies\": {\r\n    \"electron\": \"^2.0.5\"\r\n  }\r\n}\r\n<\/pre>\n<p>main.js<\/p>\n<pre class=\"lang:js decode:true \" >'use strict';\r\n\r\nvar electron = require('electron');\r\nvar app = electron.app;\r\nvar BrowserWindow = electron.BrowserWindow;\r\n\r\nvar mainWindow = null;\r\n\r\napp.on('window-all-closed', function() {\r\n  if (process.platform != 'darwin')\r\n    app.quit();\r\n});\r\n\r\napp.on('ready', function() {\r\n\r\n  \/\/ \u30d6\u30e9\u30a6\u30b6(Chromium)\u306e\u8d77\u52d5, \u521d\u671f\u753b\u9762\u306e\u30ed\u30fc\u30c9\r\n  mainWindow = new BrowserWindow({width: 800, height: 600});\r\n  mainWindow.loadURL('file:\/\/' + __dirname + '\/index.html');\r\n\r\n  mainWindow.on('closed', function() {\r\n    mainWindow = null;\r\n  });\r\n});<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>MDN\u306b\u6cbf\u3063\u305fJavaSCript\u306e\u7df4\u7fd2\u3092\u7d99\u7d9a\u3057\u3066\u307e\u3059\u3002\u3088\u3046\u3084\u304f\u3001JavaScript\u306e\u69cb\u6210\u8981\u7d20\u306e\u6700\u5f8c\u307e\u3067\u5230\u7740\u3057\u307e\u3057\u305f\u3002 \u6210\u679c\u7269\u306f\u3053\u3061\u3089\u3067\u3059\u3002 \u7d50\u8ad6\u7684\u306b\u306f\u3001thumb-bar\u306b\u753b\u50cf\u3092\u8a2d\u5b9a\u3059\u308b\u307e\u3067\u306f\u3067\u304d\u307e\u3057\u305f\u304c\u3001\u95a2\u6570\u307e\u3067\u8a2d&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[560],"tags":[581,558],"class_list":["post-3811","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-functione","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/3811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3811"}],"version-history":[{"count":5,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/3811\/revisions"}],"predecessor-version":[{"id":3818,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/3811\/revisions\/3818"}],"wp:attachment":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}