{"id":1252,"date":"2020-01-06T18:42:54","date_gmt":"2020-01-06T09:42:54","guid":{"rendered":"https:\/\/www.goodambition.biz\/?p=1252"},"modified":"2020-01-06T18:42:54","modified_gmt":"2020-01-06T09:42:54","slug":"struggle-for-programming-37","status":"publish","type":"post","link":"https:\/\/www.goodambition.biz\/goodambition\/struggle-for-programming-37\/","title":{"rendered":"\u96e3\u3057\u3044\u3068\u8a55\u5224\uff01\u521d\u5fc3\u8005\u304cN\u4e88\u5099\u6821\u3067\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u3092\u5b66\u3093\u3060\u611f\u60f3\u3068\u5099\u5fd8\u9332\uff01<br>No.37\uff1aBootstrap\u306b\u3088\u308b\u30c7\u30b6\u30a4\u30f3\u6539\u5584"},"content":{"rendered":"<h1>N\u4e88\u5099\u6821 \u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u30b3\u30fc\u30b9 \u7b2c37\u56de<\/h1>\n<p>\u3042\u306a\u305f\u306f2019\u5e74\u306e\u76ee\u6a19\u3063\u3066\u7acb\u3066\u307e\u3057\u305f\u304b\uff1f<br \/>\n\u3069\u3093\u306a\u76ee\u6a19\u3092\u7acb\u3066\u305f\u304b\u899a\u3048\u3066\u3044\u307e\u3059\u304b\uff1f<\/p>\n<p>\u79c1\u306f2018\u5e74\u672b\u306b2019\u5e74\u306e\u76ee\u6a19\u3092\u7acb\u3066\u307e\u3057\u305f\u3002<br \/>\n\u305d\u306e\u4e00\u3064\u306b\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u3092\u5b66\u3073\u4ed5\u4e8b\u3068\u3057\u3066\u4f7f\u3048\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u3092\u3042\u3052\u307e\u3057\u305f\u3002<br \/>\n\u305d\u3057\u3066\u3001\u601d\u3044\u7acb\u3063\u305f\u304c\u5409\u65e5\u3068\u300cN\u4e88\u5099\u6821\u306e\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u30b3\u30fc\u30b9\u300d\u3092\u7533\u3057\u8fbc\u307f\u307e\u3057\u305f\u3002<\/p>\n<p>\u305d\u3057\u3066\u53d7\u8b1b\u3068\u540c\u6642\u306b\u81ea\u8eab\u306e\u3075\u308a\u8fd4\u308a\u3068\u3001\u3053\u308c\u304b\u3089\u59cb\u3081\u3088\u3046\u3068\u8003\u3048\u3066\u3044\u308b\u4eba\u306e\u53c2\u8003\u306b\u306a\u308c\u3070\u3068\u30d6\u30ed\u30b0\u3092\u66f8\u304d\u59cb\u3081\u307e\u3057\u305f\u3002<br \/>\n\u4eca\u56de\u30d6\u30ed\u30b0\u306e\u79fb\u8a2d\u306b\u3068\u3082\u306a\u3044\u3001\u518d\u5ea6\u305d\u306e\u30d6\u30ed\u30b0\u3092\u8aad\u307f\u8fd4\u3057\u306a\u304c\u3089\u3001\u4eca\u601d\u3046\u3053\u3068\u3092\u52a0\u3048\u3066\u8a18\u8f09\u3057\u3066\u3044\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>\u307e\u305f\u79c1\u304c\u53d7\u8b1b\u3057\u305f\u306e\u306f\u30102018\u5e74\u5ea6\u3011\u3067\u3001\u73fe\u5728\u516c\u958b\u3055\u308c\u3066\u3044\u308b\u30102019\u5e74\u5ea6\u3011\u3068\u306e\u9055\u3044\u306b\u3064\u3044\u3066\u3082\u66f8\u3044\u3066\u3044\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u30d6\u30ed\u30b0\u306f\u3001\u521d\u5fc3\u8005\u304c\u5b66\u3073\u306a\u304c\u3089\u66f8\u3044\u3066\u3044\u308b\u305f\u3081\u3001\u9593\u9055\u3063\u3066\u3044\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\n\u5206\u304b\u308a\u6b21\u7b2c\u4fee\u6b63\u3057\u3066\u3044\u304f\u3064\u3082\u308a\u3067\u3059\u3002<\/p>\n<p>\u305d\u306e\u3042\u305f\u308a\u3082\u542b\u3081\u697d\u3057\u3093\u3067\u3044\u305f\u3060\u3051\u308c\u3070\u3068\u601d\u3044\u307e\u3059\u3002\u00a0<\/p>\n<p>\u6700\u5f8c\u306b\u9032\u3081\u3066\u3044\u3066\u308f\u304b\u3089\u306a\u304b\u3063\u305f\u3068\u3053\u308d\u3084\u6c17\u306b\u306a\u3063\u305f\u3068\u3053\u308d\u3092\u307e\u3068\u3081\u3066\u3044\u307e\u3059\u3002<\/p>\n<h1>\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u5165\u9580 web\u30a2\u30d7\u30ea\u30b3\u30fc\u30b9\u3000\u7b2c37\u56de<\/h1>\n<p>\u524d\u56de\u7ba1\u7406\u4eba\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u3001\u79d8\u5bc6\u306e\u533f\u540d\u63b2\u793a\u677f\u306e\u8981\u4ef6\u3092\u3059\u3079\u3066\u5b9f\u88c5\u3057\u307e\u3057\u305f\u3002<br \/>\n\u4eca\u56de\u306f\u3001\u30c7\u30b6\u30a4\u30f3\u3092\u6539\u5584\u3057\u307e\u3059\u3002<\/p>\n<ul>\n<li>\u4eca\u56de\u306e\u5185\u5bb9\u307e\u3068\u3081\uff08\u7b2c3\u7ae0 25\uff09<br \/>\n\u30fb\u30c7\u30b6\u30a4\u30f3\u306e\u6539\u5584<\/li>\n<\/ul>\n<p><\/p>\n<ul>\n<li>\u4eca\u56de\u306e\u76ee\u6a19<br \/>\n\u30c7\u30b6\u30a4\u30f3\u306e\u6539\u5584<\/li>\n<\/ul>\n<p>\n* \u4eca\u56de\u65b0\u3057\u304f\u6271\u3063\u3066\u3044\u308b\u30b3\u30de\u30f3\u30c9\u7b49<br \/>\n\u30fbBootstrap<\/p>\n<h2>\u79d8\u5bc6\u306e\u533f\u540d\u63b2\u793a\u677f\u306e\u8981\u4ef6<\/h2>\n<p>\u4f5c\u6210\u3059\u308b\u79d8\u5bc6\u306e\u533f\u540d\u63b2\u793a\u677f\u306e\u8981\u4ef6\u304c\u4ee5\u4e0b\u306b\u306a\u308a\u307e\u3059\u3002\u00a0<\/p>\n<ul>\n<li>\u79d8\u5bc6\u306e\u63b2\u793a\u677f\u306e\u8981\u4ef6<br \/>\n<a href=\"https:\/\/www.goodambition.biz\/struggle-for-programming-32\/\">\u2460 \u8a8d\u8a3c\u304c\u3067\u304d\u308b<\/a><br \/>\n<a href=\"https:\/\/www.goodambition.biz\/struggle-for-programming-32\/\">\u2461 \u8a8d\u8a3c\u3057\u305f\u4eba\u3060\u3051\u304c\u6295\u7a3f\u5185\u5bb9\u3092\u95b2\u89a7\u3067\u304d\u308b<\/a><br \/>\n<a href=\"https:\/\/www.goodambition.biz\/struggle-for-programming-32\/\">\u2462 \u8a8d\u8a3c\u3057\u305f\u4eba\u3060\u3051\u304c\u6295\u7a3f\u3067\u304d\u308b<\/a><br \/>\n<a href=\"https:\/\/www.goodambition.biz\/struggle-for-programming-35\/\">\u2463 \u81ea\u8eab\u306e\u6295\u7a3f\u5185\u5bb9\u3092\u524a\u9664\u3067\u304d\u308b<\/a><br \/>\n<a href=\"https:\/\/www.goodambition.biz\/struggle-for-programming-36\/\">\u2464 \u7ba1\u7406\u4eba\u6a5f\u80fd<\/a><br \/>\n\u3000\u3000\u7ba1\u7406\u4eba\u306e\u6295\u7a3f\u3060\u3068\u308f\u304b\u308b<br \/>\n\u3000\u3000\u7ba1\u7406\u4eba\u306f\u5168\u3066\u306e\u6295\u7a3f\u3092\u524a\u9664\u3067\u304d\u308b<br \/>\n\u3000\u3000\u7ba1\u7406\u4eba\u306f\u3069\u306e\u30a2\u30ab\u30a6\u30f3\u30c8\u306e\u6295\u7a3f\u304b\u308f\u304b\u308b]<br \/>\n<a href=\"https:\/\/www.goodambition.biz\/struggle-for-programming-34\/\">\u2465 \u533f\u540d\u3067\u3042\u308b\u3051\u308c\u3069\u3082\u540c\u3058\u30e6\u30fc\u30b6\u30fc\u3067\u3042\u308b\u3053\u3068\u3092\u8a8d\u8b58\u3067\u304d\u3001\u4e00\u4eba\u3067\u8907\u6570\u4eba\u304c\u66f8\u304d\u8fbc\u3093\u3067\u3044\u308b\u3088\u3046\u306a\u632f\u308b\u821e\u3044\u304c\u7c21\u5358\u306b\u306f\u3067\u304d\u306a\u3044\u3088\u3046\u306b\u3059\u308b\u3002<\/a><\/li>\n<\/ul>\n<p>\u524d\u56de\u307e\u3067\u306b\u3001\u79d8\u5bc6\u306e\u533f\u540d\u63b2\u793a\u677f\u306e\u3059\u3079\u3066\u306e\u8981\u4ef6\u3092\u5b9f\u88c5\u3057\u307e\u3057\u305f\u3002<br \/>\n\u4eca\u56de\u306f\u4f5c\u6210\u3057\u305f\u533f\u540d\u63b2\u793a\u677f\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u6539\u5584\u3057\u307e\u3059\u3002<\/p>\n<h2>\u30c7\u30b6\u30a4\u30f3\u306e\u6539\u5584<\/h2>\n<p>\u307e\u305a\u3001\u30a2\u30a4\u30b3\u30f3\u753b\u50cf\uff08\u30d5\u30a1\u30d3\u30b3\u30f3\uff09\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<h3>\u30d5\u30a1\u30d3\u30b3\u30f3\u306e\u8868\u793a<\/h3>\n<p>case &#8216;\/favicon.ico&#8217;:<br \/>\nutil.handleFavicon(req, res);<br \/>\nbreak;<\/p>\n<p>\/favicon.ico\u306e\u30d1\u30b9\u306b\u30ea\u30af\u30a8\u30b9\u30c8\u304c\u3042\u3063\u305f\u5834\u5408\u306b\u3001 handleFavicon \u95a2\u6570\u3092\u5b9f\u884c\u3059\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u305d\u306e\u3001handleFavicon\u95a2\u6570\u3092\u4ee5\u4e0b\u3067\u8a2d\u5b9a\u3057\u307e\u3059\u3002\u00a0<\/p>\n<p>1  const fs = require(&#8216;fs&#8217;);<br \/>\n2  function handleFavicon(req, res) {<br \/>\n3  res.writeHead(200, {<br \/>\n4  &#8216;Content-Type&#8217;: &#8216;image\/vnd.microsoft.icon&#8217;<br \/>\n5   });<br \/>\n6  const favicon = fs.readFileSync(&#8216;.\/favicon.ico&#8217;);<br \/>\n7  res.end(favicon);<br \/>\n8  }<br \/>\n1\u884c\u76ee\u3067\u3001fs\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u8aad\u307f\u8fbc\u307f\u3001\u305d\u308c\u3092fs\u3068\u3057\u3066\u3044\u307e\u3059\u3002\u00a0<\/p>\n<p>2-5\u884c\u76ee\u3067\u3001handleFavicon \u95a2\u6570\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u4eca\u56de\u306f\u3001writeHead\u306b\u3088\u308a\u30d8\u30c3\u30c0\u30fc\u60c5\u5831\u3092\u66f8\u304d\u51fa\u3057\u307e\u3059\u3002<br \/>\n\u30b9\u30c6\u30fc\u30bf\u30b9\u30b3\u30fc\u30c9\u3068\u3057\u3066200\u756a\u3092\u6307\u5b9a\u3057\u3001image\/vnd.microsoft.icon \u3068\u3044\u3046\u30d5\u30a1\u30d3\u30b3\u30f3\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u30bf\u30a4\u30d7\u3092\u66f8\u304d\u51fa\u3059\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>6\u884c\u76ee\u3067\u3001fs\u30e2\u30b8\u30e5\u30fc\u30eb\u306ereadFileSync\u306b\u3088\u3063\u3066\u3001.\/favicon.ico\uff08\u30d5\u30a1\u30d3\u30b3\u30f3\u306e\u30d5\u30a1\u30a4\u30eb\uff09\u3092 Stream \u3068\u3057\u3066\u8aad\u307f\u51fa\u3057\u3001<\/p>\n<p>7\u884c\u76ee\u3067\u3001\u305d\u308c\u3092\u30ec\u30b9\u30dd\u30f3\u30b9\u306e\u5185\u5bb9\u3068\u3057\u3066\u66f8\u304d\u51fa\u3059\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0a\u306b\u3088\u308a\u3001.\/favicon.ico\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3068\u3001\u6307\u5b9a\u3055\u308c\u305f\u30a2\u30a4\u30b3\u30f3\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u00a0<\/p>\n<h3>Bootstrap\u306b\u3088\u308b\u30c7\u30b6\u30a4\u30f3\u6539\u5584<\/h3>\n<p>\u3055\u3089\u306b\u3001\u898b\u305f\u76ee\u3092\u6539\u5584\u3059\u308b\u305f\u3081\u306bBootstrap\u3068\u3044\u3046\u6a5f\u80fd\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<br \/>\nBootstrap\u306f\u3001CSS\u3068JavaScript\u304c\u3042\u3089\u304b\u3058\u3081\u7528\u610f\u3055\u308c\u3066\u304a\u308a\u3001\u3053\u308c\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u3067\u81ea\u5206\u3067CSS\u3092\u4f5c\u6210\u305b\u305a\u306b\u30c7\u30b6\u30a4\u30f3\u3092\u6539\u5584\u3067\u304d\u307e\u3059\u3002<\/p>\n<h4>Bootstrap<\/h4>\n<p>Bootstrap \uff08\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\uff09\u3068\u306f\u3001Web\u30da\u30fc\u30b8\u4f5c\u308a\u306e\u305f\u3081\u306e\u90e8\u54c1\u96c6\u3067\u3001Twitter \u793e\u304c\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u3069\u306e\u3088\u3046\u306a\u30c7\u30d0\u30a4\u30b9\u3067\u30da\u30fc\u30b8\u3092\u898b\u3066\u3082\u9069\u5207\u306a\u30c7\u30b6\u30a4\u30f3\u3068\u306a\u308b\u3088\u3046\u306a HTML\u3001 CSS\u3001JavaScript \u3092\u63d0\u4f9b\u3057\u3066\u304f\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n\u3053\u308c\u306b\u3088\u308a\u3001\u5358\u4e00\u306e HTML \u3067\u69d8\u3005\u306a\u30c7\u30d0\u30a4\u30b9\u306b\u5408\u308f\u305b\u305f\u8868\u793a\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\n\u3053\u306e\u3088\u3046\u306a\u30c7\u30b6\u30a4\u30f3\u306e\u3053\u3068\u3092\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u3068\u3044\u3044\u307e\u3059\u3002<\/p>\n<h4>Bootstrap\u306e\u8a2d\u5b9a\u00a0<\/h4>\n<p>Bootstrap\u306eCSS\u3068JavaScript\u3092\u7d44\u307f\u8fbc\u307f\u307e\u3059\u3002<br \/>\n\u4eca\u56de\u306f\u3001Bootstrap \u304c\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u4e0a\u3067\u63d0\u4f9b\u3057\u3066\u3044\u308bCSS \u30d5\u30a1\u30a4\u30eb\u3084JavaScript \u30d5\u30a1\u30a4\u30eb\u3092\u5229\u7528\u3057\u307e\u3059\u3002<\/p>\n<p>\uff1cBootstrap\u306e\u8aad\u307f\u8fbc\u307f\uff1e<br \/>\nBootstrap\u306eCSS\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080\u8a2d\u5b9a\u3092\u3057\u307e\u3059\u3002<\/p>\n<p>link(rel=&#8221;stylesheet&#8221;,<br \/>\nhref=&#8221;https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0<br \/>\n\/css\/bootstrap.min.css&#8221;,<br \/>\nintegrity=&#8221;sha384-Gn5384xqQ1aoWXA+058RXPxPg<br \/>\n6fy4IWvTNh0E263XmFcJlSAwiGgFAW\/dAiS6JXm&#8221;,<br \/>\ncrossorigin=&#8221;anonymous&#8221;)<\/p>\n<p>\uff1cJavaScript\u306e\u8aad\u307f\u8fbc\u307f<br \/>\nBootstrap \u306b\u5fc5\u8981\u3068\u306a\u308b JavaScript \u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<\/p>\n<p>script(src=&#8221;https:\/\/code.jquery.com\/jquery-3.2.1.slim.min.js&#8221;)<br \/>\nscript(src=&#8221;https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/js\/bootstrap.min.js&#8221;,<br \/>\nintegrity=&#8221;sha384-JZR6Spejh4U02d8jOt6vLEHfe\/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl&#8221;,<br \/>\ncrossorigin=&#8221;anonymous&#8221;)<\/p>\n<p>\uff1cjQuery\u306e\u8aad\u307f\u8fbc\u307f\uff1e<br \/>\nBootstrap \u306b\u5229\u7528\u3055\u308c\u3066\u3044\u308b jQuery \u3068\u3044\u3046\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<br \/>\n\u3053\u3061\u3089\u3082\u3001\u540c\u3058\u304f\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u4e0a\u3067\u63d0\u4f9b\u3055\u308c\u3066\u3044\u308b\u3082\u306e\u3092\u5229\u7528\u3057\u307e\u3059\u3002<\/p>\n<p>body\u306e\u5de6\u53f3\u306b\u9069\u5207\u306a\u30de\u30fc\u30b8\u30f3\u3092\u52a0\u3048\u307e\u3059\u3002<br \/>\nPug \u3067\u306f\u3001\u30bf\u30b0\u540d.\u30af\u30e9\u30b9\u540d \u3068\u7d9a\u3051\u308b\u3053\u3068\u3067\u3001\u30bf\u30b0\u306b class \u5c5e\u6027 \u3092\u4ed8\u4e0e\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u3001\u4eca\u56de\u306f\u3053\u308c\u3092\u5229\u7528\u3057\u307e\u3059\u3002<\/p>\n<p>body.container<\/p>\n<p>\u3053\u308c\u306b\u3088\u308a\u3001\u30da\u30fc\u30b8\u306e\u5927\u304d\u3055\u306b\u5408\u308f\u305b\u3066\u9069\u5207\u306a\u30de\u30fc\u30b8\u30f3\u3092\u5165\u308c\u308b\u3053\u3068\u304c\u51fa\u6765\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u3001\u30bf\u30d6\u30ec\u30c3\u30c8\u306a\u3069\u306b\u3088\u3063\u3066\u305d\u308c\u305e\u308c\u5e45\u304c\u5909\u66f4\u3055\u308c\u305f\u30da\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\uff1cBootstrap\u8a2d\u5b9a\u524d\uff1e<\/p>\n<img loading=\"lazy\" src=\"https:\/\/www.goodambition.biz\/goodambition\/wp-content\/uploads\/2020\/01\/103.png\" alt=\"\" width=\"493\" height=\"294\" class=\"aligncenter size-full wp-image-1244\" \/>\n<p>\uff1cBootstrap\u8a2d\u5b9a\u5f8c\uff1e<\/p>\n<img loading=\"lazy\" src=\"https:\/\/www.goodambition.biz\/goodambition\/wp-content\/uploads\/2020\/01\/104.png\" alt=\"\" width=\"491\" height=\"286\" class=\"aligncenter size-full wp-image-1245\" \/>\n<p>\u4ee5\u4e0a\u306e\u3088\u3046\u306b\u3001Bootstrap\u306b\u3088\u308a\u30d5\u30a9\u30f3\u30c8\u3084\u5de6\u53f3\u306e\u30de\u30fc\u30b8\u30f3\u304c\u5909\u66f4\u3055\u308c\u307e\u3059\u3002<\/p>\n<h3>\u30ed\u30b0\u30a2\u30a6\u30c8\u30da\u30fc\u30b8\u306e\u30c7\u30b6\u30a4\u30f3\u5909\u66f4<\/h3>\n<p>Bootstrap\u306b\u306f\u3001\u4f59\u767d\u8a2d\u5b9a\u7528\u306e\u30af\u30e9\u30b9\u304c\u5099\u308f\u3063\u3066\u3044\u307e\u3059\u3002\u4f59\u767d\u8a2d\u5b9a\u30af\u30e9\u30b9\u306f\u30015\u6bb5\u968e\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<h4>\u4f59\u767d\u306e\u8a2d\u5b9a<\/h4>\n<p>div.my-3<br \/>\n\u3000h1 \u79d8\u5bc6\u306e\u533f\u540d\u63b2\u793a\u677f<br \/>\n1\u884c\u76ee\u3067\u3001div \u8981\u7d20\u306b\u306f my-3 \u3068\u3044\u3046\u30af\u30e9\u30b9\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u4eca\u56de\u306f\u3001\u7e26\u65b9\u5411\uff08 y \u8ef8\u65b9\u5411\uff09\u3078\u306e\u4f59\u767d\uff08 margin \uff09\u3092\u30013 \u6bb5\u968e\u76ee\u306e\u5024\u306b\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u00a0<\/p>\n<h4>\u30ed\u30b0\u30a2\u30a6\u30c8\u30dc\u30bf\u30f3\u306e\u30c7\u30b6\u30a4\u30f3\u5909\u66f4<\/h4>\n<p>\u7d9a\u3044\u3066\u3001\u30ed\u30b0\u30a2\u30a6\u30c8\u30dc\u30bf\u30f3\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u5909\u66f4\u3057\u307e\u3059\u3002<br \/>\nPug \u3067\u306f\u30bf\u30b0\u540d.\u30af\u30e9\u30b9\u540d1.\u30af\u30e9\u30b9\u540d2.\u30af\u30e9\u30b9\u540d3 \u306e\u3088\u3046\u306b\u8907\u6570\u306e\u30af\u30e9\u30b9\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>a(href=&#8221;\/logout&#8221;).btn.btn-info.float-right \u30ed\u30b0\u30a2\u30a6\u30c8<\/p>\n<p>\u4eca\u56de\u306f\u3001a \u30bf\u30b0\u306b\u3001Bootstrap\u306b\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u30dc\u30bf\u30f3\u306e\u30c7\u30b6\u30a4\u30f3\uff08btn-info)\u3092\u9069\u7528\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n.info\u306f\u6c34\u8272\u306e\u30dc\u30bf\u30f3\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n\u3055\u3089\u306bfloat-right \u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u53f3\u5074\u306b\u914d\u7f6e\u3059\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u4eca\u56de\u306e\u6a19\u8a18\u306f\u3001HTML\u3067\u00a0&lt; a href=&#8221;\/logout&#8221; class=&#8221;btn btn-info float-right&#8221;>\u30ed\u30b0\u30a2\u30a6\u30c8&lt; \/a> \u3068\u540c\u3058\u7d50\u679c\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0a\u306e\u8a2d\u5b9a\u3067\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u66f4\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\uff1cBootstrap\u8a2d\u5b9a\u524d\uff1e<\/p>\n<img loading=\"lazy\" src=\"https:\/\/www.goodambition.biz\/goodambition\/wp-content\/uploads\/2020\/01\/105.png\" alt=\"\" width=\"340\" height=\"84\" class=\"aligncenter size-full wp-image-1246\" \/>\n<p>\uff1cBootstrap\u8a2d\u5b9a\u5f8c\uff1e<\/p>\n<img loading=\"lazy\" src=\"https:\/\/www.goodambition.biz\/goodambition\/wp-content\/uploads\/2020\/01\/106.png\" alt=\"\" width=\"711\" height=\"55\" class=\"aligncenter size-full wp-image-1247\" \/>\n<p>\u7d9a\u3044\u3066\u3001\u6295\u7a3f\u30d5\u30a9\u30fc\u30e0\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<h3>\u6295\u7a3f\u30d5\u30a9\u30fc\u30e0\u306e\u30c7\u30b6\u30a4\u30f3\u5909\u66f4<\/h3>\n<p>\u6295\u7a3f\u3059\u308b\u30da\u30fc\u30b8\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<p>div.form-group<br \/>\n\u3000 textarea(name=&#8221;content&#8221; rows=&#8221;4&#8243;).form-control<br \/>\n div.form-group<br \/>\n\u3000 button(type=&#8221;submit&#8221;).btn.btn-primary \u6295\u7a3f<\/p>\n<p>1-2\u884c\u76ee\u3067\u3001\u5165\u529b\u9805\u76ee\u306bform-group\u3092\u3001\u5165\u529b\u90e8\u54c1\u306b\u306f\u3001form-control\u3092\u30c7\u30b6\u30a4\u30f3\u3068\u3057\u3066\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>3-4\u884c\u76ee\u3067\u3001\u6295\u7a3f\u30dc\u30bf\u30f3\u306bbtn-primary\u3092\u30c7\u30b6\u30a4\u30f3\u3068\u3057\u3066\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002\u306a\u304a\u3001primary\u306f\u9752\u8272\u306e\u30dc\u30bf\u30f3\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0a\u306e\u8a2d\u5b9a\u3067\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u30c7\u30b6\u30a4\u30f3\u304c\u5909\u66f4\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\uff1cBootstrap\u8a2d\u5b9a\u524d\uff1e<\/p>\n<img loading=\"lazy\" src=\"https:\/\/www.goodambition.biz\/goodambition\/wp-content\/uploads\/2020\/01\/107.png\" alt=\"\" width=\"325\" height=\"194\" class=\"aligncenter size-full wp-image-1248\" \/>\n<p>\uff1cBootstrap\u8a2d\u5b9a\u5f8c\uff1e<\/p>\n<img loading=\"lazy\" src=\"https:\/\/www.goodambition.biz\/goodambition\/wp-content\/uploads\/2020\/01\/108.png\" alt=\"\" width=\"714\" height=\"219\" class=\"aligncenter size-full wp-image-1249\" \/>\n<p>\u7d9a\u3044\u3066\u3001\u6295\u7a3f\u4e00\u89a7\u306e\u898b\u305f\u76ee\u3092\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<h3>\u6295\u7a3f\u4e00\u89a7\u306e\u30c7\u30b6\u30a4\u30f3\u5909\u66f4<\/h3>\n<p>\u6295\u7a3f\u4e00\u89a7\u306e\u30da\u30fc\u30b8\u30c7\u30b6\u30a4\u30f3\u3092\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<p>1   div.card-header<br \/>\n2    &#8211; var isPostedByAdmin = (post.postedBy === &#8216;admin&#8217;)<br \/>\n3    if isPostedByAdmin<br \/>\n4    span #{post.id} : \u7ba1\u7406\u4eba \u2605<br \/>\n5    else<br \/>\n6    span #{post.id} : ID:#{post.trackingCookie}<br \/>\n7    div.card-footer<br \/>\n8    \u3000div \u6295\u7a3f\u65e5\u6642: #{post.createdAt}<br \/>\n9    \u3000- var isAdmin = (user === &#8216;admin&#8217;)<br \/>\n10   if isAdmin<br \/>\n11   \u3000div \u6295\u7a3f\u8005: #{post.postedBy}<br \/>\n12   \u3000- var isDeletable = (user === post.postedBy || isAdmin)<br \/>\n13   if isDeletable<br \/>\n14   \u3000form(method=&#8221;post&#8221; action=&#8221;\/posts?delete=1&#8243;)<br \/>\n15   \u3000\u3000input(type=&#8221;hidden&#8221; name=&#8221;id&#8221; value=post.id)<br \/>\n16   \u3000\u3000button(type=&#8221;submit&#8221;).btn.btn-danger.float-right \u524a\u9664<\/p>\n<p>1\u884c\u76ee\u3067\u3001\u6295\u7a3f\u4e00\u89a7\u306e\u30d8\u30c3\u30c0\u30fc\u306bcard-header\u3068\u3044\u3046\u30c7\u30b6\u30a4\u30f3\u3092\u8a2d\u5b9a\u3057<\/p>\n<p>2\u884c\u76ee\u3067\u3001\u6295\u7a3f\u8005\u304c\u7ba1\u7406\u4eba(admin)\u3067\u3042\u308b\u3068\u3044\u3046\u5909\u6570\u3092isPostedByAdmin\u3068\u8a2d\u5b9a\u3057<\/p>\n<p>3-4\u884c\u76ee\u3067\u3001isPostedByadmin\u304ctrue\u306e\uff08\u6295\u7a3f\u8005\u304c\u7ba1\u7406\u4eba\u3067\u3042\u308b\uff09\u5834\u5408\u306b\u306f\u300c\u7ba1\u7406\u4eba\u2605\u300d\u3068\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057<\/p>\n<p>5-6\u884c\u76ee\u3067\u3001isPostedByadmin\u304cfalse\u306e\uff08\u6295\u7a3f\u8005\u304c\u7ba1\u7406\u4eba\u3067\u306a\u3044\uff09\u5834\u5408\u306b\u306f\u6295\u7a3f\u8005\u306eID\u3092\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>7\u884c\u76ee\u3067\u3001\u6295\u7a3f\u4e00\u89a7\u306e\u30d5\u30c3\u30bf\u30fc\u306bcard-footer\u3092\u8a2d\u5b9a\u3057<\/p>\n<p>8\u884c\u76ee\u3067\u3001\u300c\u6295\u7a3f\u65e5\u6642\uff1a\u300d\u306e\u5f8c\u308d\u306b\u6295\u7a3f\u3057\u305f\u6642\u9593\u3092\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u3001<\/p>\n<p>9\u884c\u76ee\u3067\u3001\u4eca\u30a2\u30af\u30bb\u30b9\u3057\u3066\u3044\u308buser\u304c\u7ba1\u7406\u4eba(admin\uff09\u3067\u3042\u308b\u3068\u3044\u3046\u5909\u6570\u3092isAdmin\u3068\u8a2d\u5b9a\u3057<\/p>\n<p>10-11\u884c\u76ee\u3067\u3001isAdmin\u304ctrue\uff08user\u304c\u7ba1\u7406\u4eba\uff09\u3067\u3042\u308b\u5834\u5408\u306b\u3001\u300c\u6295\u7a3f\u8005\uff1a\u300d\u306e\u5f8c\u308d\u306b\u6295\u7a3f\u8005\u540d\u3092\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057<\/p>\n<p>12\u884c\u76ee\u3067\u3001\u30a2\u30af\u30bb\u30b9\u3057\u3066\u3044\u308buser\u304c\u6295\u7a3f\u8005\u307e\u305f\u306f\u7ba1\u7406\u4eba\u3067\u3042\u308b\u3068\u3044\u3046\u5909\u6570\u3092isDeletable\u3068\u8a2d\u5b9a\u3057\u3001<\/p>\n<p>13-16\u884c\u76ee\u3067\u3001isDeletable\u304ctrue\uff08user\u304c\u6295\u7a3f\u8005\u307e\u305f\u306f\u7ba1\u7406\u4eba\uff09\u3067\u3042\u308b\u5834\u5408\u306b\u524a\u9664\u30dc\u30bf\u30f3\u3092\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u524a\u9664\u30dc\u30bf\u30f3\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u3001btn.danger\uff08\u8d64\u8272\uff09\u306b\u8a2d\u5b9a\u3057\u3001float-right\u306b\u3088\u308a\u3001\u30dc\u30bf\u30f3\u3092\u53f3\u306b\u914d\u7f6e\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u00a0<\/p>\n<p>\u4ee5\u4e0a\u306e\u8a2d\u5b9a\u306b\u3088\u308a\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u5316\u3057\u307e\u3059\u3002<\/p>\n<p>\uff1cBootstrap\u8a2d\u5b9a\u524d\uff1e<\/p>\n<img loading=\"lazy\" src=\"https:\/\/www.goodambition.biz\/goodambition\/wp-content\/uploads\/2020\/01\/109.png\" alt=\"\" width=\"679\" height=\"197\" class=\"aligncenter size-full wp-image-1250\" \/>\n<p>\uff1cBootstrap\u8a2d\u5b9a\u5f8c\uff1e<\/p>\n<img loading=\"lazy\" src=\"https:\/\/www.goodambition.biz\/goodambition\/wp-content\/uploads\/2020\/01\/110.png\" alt=\"\" width=\"701\" height=\"241\" class=\"aligncenter size-full wp-image-1251\" \/>\n<p>\u6700\u5f8c\u306b\u3001\u65e5\u6642\u3092\u65e5\u672c\u6642\u9593\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<h3>\u65e5\u672c\u6642\u9593\u8868\u793a<\/h3>\n<p>Moment Timezone\u3068\u3044\u3046\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u5229\u7528\u3057\u3066\u65e5\u672c\u6642\u9593\u8868\u793a\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<p>npm install moment-timezone@0.5.0 &#8211;save<br \/>\n\u307e\u305a\u3001\u3053\u306e\u30b3\u30de\u30f3\u30c9\u306b\u3088\u308a\u3001Moment Timezone\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<p>const moment = require(&#8216;moment-timezone&#8217;);<br \/>\npost.formattedCreatedAt = moment(post.createdAt)<br \/>\n\u3000\u3000.tz(&#8216;Asia\/Tokyo&#8217;).format(&#8216;YYYY\u5e74MM\u6708DD\u65e5 HH\u6642mm\u5206ss\u79d2&#8217;);<br \/>\n\u3064\u3065\u3044\u3066\u3001\u4e0a\u8a18\u306b\u3088\u308a\u3001\u65e5\u672c\u6642\u9593\u3078\u306e\u5909\u66f4\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0a\u306e\u3088\u3046\u306b\u3001\u63b2\u793a\u677f\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u6539\u5584\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u3053\u3046\u3057\u3066Bootstrap\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u3067\u6bd4\u8f03\u7684\u7c21\u5358\u306b\u30c7\u30b6\u30a4\u30f3\u306e\u5909\u66f4\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<hr>\n<p>\u4eca\u56de\u306fBootstrap\u3092\u7528\u3044\u3066\u30da\u30fc\u30b8\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u5909\u66f4\u3057\u307e\u3057\u305f\u3002<br \/>\n\u3053\u308c\u3067\u3001\u79d8\u5bc6\u306e\u533f\u540d\u63b2\u793a\u677f\u304c\u3067\u304d\u3042\u304c\u308a\u307e\u3057\u305f\u3002\u3057\u304b\u3057\u3001\u4eca\u306e\u307e\u307e\u3067\u306f\u307e\u3060\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u554f\u984c\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\n\u6b21\u56de\u4ee5\u964d\u3001\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u554f\u984c\u3092\u89e3\u6c7a\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>N\u4e88\u5099\u6821 \u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u30b3\u30fc\u30b9 \u7b2c37\u56de \u3042\u306a\u305f\u306f2019\u5e74\u306e\u76ee\u6a19\u3063\u3066\u7acb\u3066\u307e\u3057\u305f\u304b\uff1f \u3069\u3093\u306a\u76ee\u6a19\u3092\u7acb\u3066\u305f\u304b\u899a\u3048\u3066\u3044\u307e\u3059\u304b\uff1f \u79c1\u306f2018\u5e74\u672b\u306b2019\u5e74\u306e\u76ee\u6a19\u3092\u7acb\u3066\u307e\u3057\u305f\u3002 \u305d\u306e\u4e00\u3064\u306b\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u3092\u5b66\u3073\u4ed5\u4e8b\u3068\u3057\u3066\u4f7f\u3048\u308b<\/p>\n","protected":false},"author":1,"featured_media":732,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8],"tags":[],"_links":{"self":[{"href":"https:\/\/www.goodambition.biz\/goodambition\/wp-json\/wp\/v2\/posts\/1252"}],"collection":[{"href":"https:\/\/www.goodambition.biz\/goodambition\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.goodambition.biz\/goodambition\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.goodambition.biz\/goodambition\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.goodambition.biz\/goodambition\/wp-json\/wp\/v2\/comments?post=1252"}],"version-history":[{"count":1,"href":"https:\/\/www.goodambition.biz\/goodambition\/wp-json\/wp\/v2\/posts\/1252\/revisions"}],"predecessor-version":[{"id":1253,"href":"https:\/\/www.goodambition.biz\/goodambition\/wp-json\/wp\/v2\/posts\/1252\/revisions\/1253"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.goodambition.biz\/goodambition\/wp-json\/wp\/v2\/media\/732"}],"wp:attachment":[{"href":"https:\/\/www.goodambition.biz\/goodambition\/wp-json\/wp\/v2\/media?parent=1252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.goodambition.biz\/goodambition\/wp-json\/wp\/v2\/categories?post=1252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.goodambition.biz\/goodambition\/wp-json\/wp\/v2\/tags?post=1252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}