{"id":1418,"date":"2019-05-31T13:28:02","date_gmt":"2019-05-31T04:28:02","guid":{"rendered":"https:\/\/www.bravesoft.co.jp\/seblog\/?p=1418"},"modified":"2021-01-05T14:48:35","modified_gmt":"2021-01-05T05:48:35","slug":"raspberry-pi3%ef%bc%8b%e3%83%89%e3%82%b3%e3%83%87%e3%83%a2%e4%ba%ba%e6%84%9f%e3%82%bb%e3%83%b3%e3%82%b5%e3%83%bc%ef%bc%8bvue-js%e3%81%a7%e3%80%8c%e4%bc%9a%e8%ad%b0%e5%ae%a4%e3%81%ae%e7%a9%ba%e5%ae%a4","status":"publish","type":"post","link":"https:\/\/bravesoft.co.jp\/seblog\/archives\/1418","title":{"rendered":"Raspberry Pi3\uff0b\u30c9\u30b3\u30c7\u30e2\u4eba\u611f\u30bb\u30f3\u30b5\u30fc\uff0bVue.js\u3067\u300c\u4f1a\u8b70\u5ba4\u306e\u7a7a\u5ba4\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u300d\u3092\u3064\u304f\u308b #16"},"content":{"rendered":"

\u4ee4\u548c\u5143\u5e74\u306e\u30b4\u30fc\u30eb\u30c7\u30f3\u30a6\u30a3\u30fc\u30af\u306f\u6052\u4f8b\u306e\u300c\u3082\u306e\u3065\u304f\u308a\u4e00\u4eba\u65c5\u300d\u306b\u884c\u3063\u3066\u304d\u305f\u3002<\/p>\n

\u4eca\u5e74\u306f\u5cf6\u6839\u770c\u306e\u96a0\u5c90\u8af8\u5cf6\uff08\u6d77\u58eb\u753a\u3068\u304b\uff09\u3092\u306e\u3093\u3073\u308a\u65c5\u3057\u306a\u304c\u3089\u3001\u30e9\u30ba\u30d1\u30a4\u3068\u30bb\u30f3\u30b5\u30fc\u3092\u4f7f\u3063\u3066\u3046\u3061\u306e\u4f1a\u793e\u3067\u4f7f\u3046\u300c\u4f1a\u8b70\u5ba4\u306e\u7a7a\u5ba4\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u300d\u3092\u4f5c\u3063\u3066\u304d\u305f\u306e\u3067\u4f5c\u308a\u65b9\u3092\u7d39\u4ecb\u3059\u308b\u3002<\/p>\n

\u300c\u4f1a\u8b70\u5ba4\u898b\u306b\u884c\u304f\u300d\u3092\u306a\u304f\u3057\u305f\u304b\u3063\u305f<\/h1>\n

\"\"<\/p>\n

\u30aa\u30d5\u30a3\u30b9\u3067\u4f1a\u8b70\u3059\u308b\u3068\u304d\u3001\u3053\u3093\u306a\u3053\u3068\u304c\u3088\u304f\u3042\u308b\u3002<\/p>\n\n\n\n\n\n
\u300c\u3044\u307e\u3061\u3087\u3063\u3068MTG\u3057\u3088\u3046\u300d<\/td>\n\u2192<\/td>\n\u4f1a\u8b70\u5ba4\u898b\u306b\u884c\u304f<\/strong><\/td>\n\u2192<\/td>\n\u300c\u3069\u3053\u3082\u3042\u3044\u3066\u306a\u3044\uff01\u300d<\/td>\n<\/tr>\n
\u300c\u3042\u306e\u90e8\u5c4b\u3078\u306e\u6765\u5ba2\u304c\u304d\u305f\u300d<\/td>\n\u2192<\/td>\n\u4f1a\u8b70\u5ba4\u898b\u306b\u884c\u304f<\/strong><\/td>\n\u2192<\/td>\n\u300c\u307e\u3060\u4f7f\u3063\u3066\u305f\uff01\u300d<\/td>\n<\/tr>\n
\u300c\u3042\u306e\u4eba\u307e\u3060\u4f1a\u8b70\u3057\u3066\u308b\u304b\u306a\uff1f\u300d<\/td>\n\u2192<\/td>\n\u4f1a\u8b70\u5ba4\u898b\u306b\u884c\u304f<\/strong><\/td>\n\u2192<\/td>\n\u300c\u307e\u3060\u3057\u3066\u305d\u3046\uff01\u300d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u3053\u3046\u3044\u3046\u300c\u4f1a\u8b70\u5ba4\u898b\u306b\u884c\u304f\u300d\u3092\u306a\u304f\u3057\u305f\u304b\u3063\u305f\u3002\u305d\u306e\u4f1a\u8b70\u5ba4\u304c\u4f7f\u7528\u4e2d\u304b\u3069\u3046\u304b\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u308f\u304b\u308c\u3070\u3001\u3044\u3061\u3044\u3061\u4f1a\u8b70\u5ba4\u306b\u898b\u306b\u884c\u304f\u5fc5\u8981\u304c\u306a\u304f\u306a\u308b<\/p>\n

\u3064\u3044\u3067\u306b\u3001<\/p>\n

\u300c\u3042\u306e\u90e8\u5c4b\u306a\u304b\u306b\u4eba\u3044\u308b\uff1f\uff1f\u300d
\n\u300c\u52e2\u3044\u3088\u304f\u98db\u3073\u8fbc\u3093\u3060\u3089\u91cd\u5f79\u4f1a\u8b70\u4e2d\u3067\u6c17\u307e\u305a\u3044\u30fb\u30fb\u300d<\/p>\n

\u306a\u3069\u306e\u3088\u304f\u3042\u308b\u8ab2\u984c\u3082\u89e3\u6c7a\u3067\u304d\u308b\uff01<\/p>\n

\u6700\u8fd1\u4eba\u304c\u5897\u3048\u3066\u4f1a\u8b70\u5ba4\u3082\u57cb\u307e\u308a\u304c\u3061\u3067\u3001\u3060\u3044\u305f\u3044\uff11\u65e5\u306b\uff11\u56de\u306f\u300c\u4f1a\u8b70\u5ba4\u898b\u306b\u884c\u304f\u300d<\/strong>\u2192\u300c\u305d\u3057\u3066\u5e30\u3063\u3066\u304f\u308b\u300d<\/strong>\u304c\u767a\u751f\u3057\u3066\u3044\u308b\u3002<\/p>\n

\u306a\u3093\u3068\u5e74\u9593\uff11\uff12\uff10\u4e07\u5186\u306e\u5927\u640d\u5931\uff01\uff1f<\/h1>\n

\"\"<\/p>\n

\u8a66\u3057\u306b\uff11\u5e74\u9593\u3067\u3069\u308c\u3050\u3089\u3044\u306e\u640d\u5931\u306b\u306a\u3063\u3066\u3044\u308b\u304b\u8a08\u7b97\u3059\u308b\u3068\u30fb\u30fb<\/p>\n

\u2460\uff11\u65e5\u3067\uff11\u5206\u300c\u4f1a\u8b70\u5ba4\u898b\u306b\u884c\u304f\u300d\u304c\u767a\u751f\u3068\u3059\u308b\u3002
\n\u246160\u540d\u306a\u306e\u3067\uff11\u65e5\u30671\u6642\u9593\u306e\u640d\u5931
\n\u24631\u30f6\u6708\u3060\u3068\uff12\u65e5\u5206\u306e\u640d\u5931\u3002
\n\u24621\u4eba\u306e1\u65e5\u306e\u751f\u7523\u529b\u306f\u7d04\uff15\u4e07\u5186\u3068\u3059\u308b\u3068\u30fb\u30fb
\n\u24641\u30f6\u6708\u306710\u4e07\u5186\u30011\u5e74\u3067120\u4e07\u5186\u306e\u640d\u5931\uff01<\/p>\n

\u3053\u308c\u306f\u5927\u5909\u3002\u65e9\u304f\u306a\u3093\u3068\u304b\u3057\u306a\u304f\u3066\u306f\uff01\u3000\u5168\u7136\u95a2\u4fc2\u306a\u3044\u3051\u3069\u5199\u771f\u306f\u793e\u5185\u306e\u7d19\u3072\u3053\u3046\u304d\u5927\u4f1a\u306e\u69d8\u5b50\u3002\u7121\u99c4\u306a\u6642\u9593\u3092\u7bc0\u7d04\u3057\u3066\u3001\u7d19\u3072\u3053\u3046\u304d\u3067\u3042\u305d\u307c\u3046\u7b11\u3002<\/p>\n

\u3064\u304f\u308a\u304b\u305f\u3010\u30c0\u30a4\u30b8\u30a7\u30b9\u30c8\u3011<\/h1>\n

\u7a7a\u5ba4\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u3092\u4f5c\u308b\u306e\u306b\u5fc5\u8981\u306a\u306e\u306f\u3001\u3053\u306e\uff17\u30b9\u30c6\u30c3\u30d7\u3002<\/p>\n

\u2460\u30c9\u30b3\u30c7\u30e2\u4eba\u611f\u30bb\u30f3\u30b5\u30fc\u3092\u52d5\u304b\u3059
\n\u2461\u30bb\u30f3\u30b5\u30fc\u306eJSON API\u3092\u53e9\u304f
\n\u2462CSS\u3067\u753b\u9762\u3092\u30c7\u30b6\u30a4\u30f3
\n\u2463Vue.js+\u30bb\u30f3\u30b5\u30fcAPI\u3067\u7a7a\u5ba4\u6848\u5185\u8868\u793a
\n\u2464\u30e9\u30ba\u30d1\u30a4\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7
\n\u2465\u30e9\u30ba\u30d1\u30a4\u4e0a\u3067\u7a7a\u5ba4\u6848\u5185\u8868\u793a
\n\u2466\u30e9\u30ba\u30d1\u30a4\u306e\u81ea\u52d5\u8d77\u52d5\u8a2d\u5b9a<\/p>\n

\u30bb\u30f3\u30b5\u30fc\u306e\u60c5\u5831\u304c\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u306b\u8868\u793a\u3055\u308c\u308b\u307e\u3067\u306e\u30c7\u30fc\u30bf\u306e\u6d41\u308c\u306f\u3053\u3046\u3044\u3046\u611f\u3058\u3002<\/p>\n

\u2605\u30c9\u30b3\u30c7\u30e2\u4eba\u611f\u30bb\u30f3\u30b5\u30fc<\/strong><\/p>\n

\u2193\uff1c\u4eba\u3092\u611f\u77e5\uff1e\u3069\u3053\u3067\u3082\u30bb\u30f3\u30b5\u30fc\u793e\u306e\u30af\u30e9\u30a6\u30c9\u306b\u30c7\u30fc\u30bf\u3092\u30a2\u30c3\u30d7<\/p>\n

\u2605\u30af\u30e9\u30a6\u30c9\u30b5\u30fc\u30d3\u30b9<\/strong><\/p>\n

\u2193\uff1cJS\u304b\u3089\u968f\u6642\u30ea\u30af\u30a8\u30b9\u30c8\uff1e\u30bb\u30f3\u30b5\u30fc\u30c7\u30fc\u30bf\u3092\u30e9\u30ba\u30d1\u30a4\u306eJS\u306b\u8fd4\u3059<\/p>\n

\u2605\u30e9\u30ba\u30d1\u30a4(JS)<\/strong><\/p>\n

\u2193\uff1c\u5e38\u6642\u8868\u793a\uff1e5\u5206\u7121\u53cd\u5fdc\u306a\u3089\u7a7a\u5ba4\u3068\u8868\u793a\u300210\u79d2\u6bce\u306b\u66f4\u65b0<\/p>\n

\u2605\u5c0f\u578b\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4<\/strong><\/p>\n

————<\/p>\n

\u3061\u306a\u307f\u306b\u4eca\u56de\u3064\u304b\u3063\u305f\u9053\u5177\u305f\u3061\u3002\u7a93\u306e\u5411\u3053\u3046\u3067\u306f\u30cb\u30ef\u30c8\u30ea\u304c\u9a12\u304c\u3057\u3044\u7b11\u3002<\/p>\n

\"\"<\/p>\n

\u2460\u30c9\u30b3\u30c7\u30e2\u4eba\u611f\u30bb\u30f3\u30b5\u30fc\u3092\u52d5\u304b\u3059<\/h1>\n

\"\"<\/a><\/p>\n

\u30bb\u30f3\u30b5\u30fc\u3092\u3044\u308d\u3044\u308d\u3068\u63a2\u3057\u3066\u307f\u305f\u3068\u3053\u308d\u3001\u30d7\u30e9\u30cd\u30c3\u30c8\u30b3\u30df\u30e5\u30cb\u30b1\u30fc\u30b7\u30e7\u30f3\u793e\u306e\u3069\u3053\u3067\u3082\u4eba\u611f\u30bb\u30f3\u30b5\u30fc WS-USB02-PIR<\/a>\u304c\u826f\u3055\u305d\u3046\u3002<\/p>\n

\u7406\u75311:\u30b7\u30f3\u30d7\u30eb\u3067\u5024\u6bb5\u3082\u624b\u9803
\n\u7406\u75312:\u30bb\u30f3\u30b5\u30fc\u30c7\u30fc\u30bf\u3092\u30af\u30e9\u30a6\u30c9\u306b1\u30f6\u6708\u4fdd\u7ba1(\u7121\u6599!)
\n\u7406\u75313:API\u4f7f\u3048\u308b(2019.4\u30ea\u30ea\u30fc\u30b9\u3002\u30ae\u30ea\u30ae\u30ea\u9593\u306b\u5408\u3063\u305f\uff01\uff09<\/p>\n

USB\u3067\u30b3\u30f3\u30bb\u30f3\u30c8\u306b\u3055\u305b\u308b\u30b7\u30f3\u30d7\u30eb\u306a\u69cb\u9020\u3002\uff08\u96a0\u5c90\u30b8\u30aa\u30d1\u30fc\u30af\u30ad\u30e3\u30f3\u30d7\u5834\u306b\u3066\u7b11\uff09<\/p>\n

\"\"<\/a><\/p>\n

\u96fb\u6e90\u306b\u6307\u3057\u305f\u3089\u30bb\u30f3\u30b5\u30fc\u306eIP\u30a2\u30c9\u30ec\u30b9\u306b\u30d6\u30e9\u30a6\u30b6\u304b\u3089Wifi\u30a2\u30af\u30bb\u30b9(\u30bb\u30f3\u30b5\u30fc\u3092\u30eb\u30fc\u30bf\u3068\u898b\u7acb\u3066\u308b\u611f\u3058\uff09\u3002\u5b9f\u969b\u306b\u4f7f\u3046Wifi\u74b0\u5883\u306eSSID\/PASS\u3092\u5165\u529b\u3059\u308b\u3002\u958b\u767a\u4e2d\u306f\u3044\u3061\u3044\u3061\u5909\u3048\u308b\u306e\u304c\u9762\u5012\u306a\u306e\u3067\u81ea\u5206\u306eiPhone\u306e\u30c6\u30b6\u30ea\u30f3\u30b0Wifi\u3092\u6307\u5b9a\u3002\u3042\u3068\u306f\u30b3\u30f3\u30bb\u30f3\u30c8\u306b\u3055\u3059\u3060\u3051\u3067\u81ea\u52d5\u3067\u30bb\u30f3\u30b5\u30fc\u30b9\u30bf\u30fc\u30c8\u3002\u3057\u3070\u3089\u304f\u8a08\u6e2c\u3059\u308b\u3068\u30af\u30e9\u30a6\u30c9\u306e\u7ba1\u7406\u753b\u9762\u3067\u691c\u77e5\u30ed\u30b0\u304c\u30b0\u30e9\u30d5\u3067\u898b\u308c\u308b\u3002\u3044\u3044\u306d\uff01<\/p>\n

\"\"<\/p>\n

\u2461\u30bb\u30f3\u30b5\u30fc\u306eJSON API\u3092\u53e9\u304f<\/h1>\n

\u3055\u3042\u6b21\u306f\u3055\u3063\u305d\u304f\u30bb\u30f3\u30b5\u30fc\u304c\u611f\u77e5\u3057\u305f\u30ed\u30b0\u3092API\u3067\u53d6\u5f97\u3059\u308b\u3002\u3053\u306eAPI\u306e\u52d5\u4f5c\u78ba\u8a8d\u304c\u307e\u3042\u307e\u3042\u5927\u5909\u3060\u3063\u305f\u3002\u30bb\u30f3\u30b5\u30fc\u306e\u30e1\u30fc\u30ab\u30fc\u306f\u30bd\u30d5\u30c8\u958b\u767a\u304c\u82e6\u624b\u306a\u306e\u304b\u3001\u7ba1\u7406\u753b\u9762\u304c\u30ef\u30fc\u30c9\u30d7\u30ec\u30b9\u3060\u3063\u305f\u308a\u3001API\u8cc7\u6599\u304c\uff11\uff10\u884c\u3050\u3089\u3044\u306e\u8aac\u660e\u3067\u6e08\u307e\u3055\u308c\u3066\u305f\u308a\u3001\u305d\u306e\u53d6\u5f97\u65b9\u6cd5\u306e\u4f8b\u304c\u9593\u9055\u3063\u3066\u305f\u308a\u3001\u30a8\u30e9\u30fc\u306e\u3068\u304d\u30ec\u30b9\u30dd\u30f3\u30b9\u306b\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u306f\u306a\u304f[]\u3060\u3051\u3060\u3063\u305f\u308a\u3068\u3001\u306a\u304b\u306a\u304b\u306e\u7a81\u304d\u653e\u3057\u65b9\u30fb\u30fb\u3002\u3060\u304c\u305d\u308c\u306f\u305d\u308c\u3067\u697d\u3057\u3044\u304b\u3089\u3088\u3057\u7b11\u3002<\/p>\n

API\u3092\u30d6\u30e9\u30a6\u30b6\u3067\u53e9\u3044\u3066\u3061\u3083\u3093\u3068\u30ec\u30b9\u30dd\u30f3\u30b9\u304c\u5e30\u3063\u3066\u304f\u308b\u307e\u3067\u4f55\u304c\u6b63\u3057\u3044\u304b\u308f\u304b\u3089\u305a\u610f\u5916\u306b\u6642\u9593\u304c\u304b\u304b\u3063\u3066\u3057\u307e\u3063\u305f\u306e\u3067\u3001\u5f8c\u767a\u7d44\u306e\u305f\u3081\u306b\u6b63\u3057\u3044\u4f7f\u7528\u4f8b\u3092\u4e0b\u8a18\u306b\u8a18\u8f09\u3057\u3066\u304a\u304f\u3002(%22\u306f”, %20\u306f\u30b9\u30da\u30fc\u30b9\u306e\u30a8\u30b9\u30b1\u30fc\u30d7)<\/p>\n

\n\u30ea\u30af\u30a8\u30b9\u30c8URL<\/strong>
\nhttps:\/\/svcipp.planex.co.jp\/api\/get_data.php?type=%22WS-USB02-PIR%22&mac=%2224:72:60:40:**:**%22&from=%222019-04-30%2011:00:00%22&to=%202019-04-30%2012:00:00%22&token=%2211e1277b5e1619561ccd7a1b9977****%22<\/p>\n

\u30ec\u30b9\u30dd\u30f3\u30b9\u30c7\u30fc\u30bf<\/strong>
\n[
\n[“2019-04-30 11:00:00”, “24”]
\n,[“2019-04-30 11:00:06”, “24”]
\n,[“2019-04-30 11:00:10”, “24”]
\n,[“2019-04-30 11:00:16”, “24”]
\n]\n<\/p><\/blockquote>\n

\u2462CSS\u3067\u753b\u9762\u3092\u30c7\u30b6\u30a4\u30f3<\/h1>\n

\"\"<\/p>\n

\u52d5\u4f5c\u78ba\u8a8d\u3082\u51fa\u6765\u305f\u3068\u3053\u308d\u3067\u3044\u3088\u3044\u3088\u958b\u767a\u958b\u59cb\u3002\u307e\u305a\u306fCSS\u3067\u753b\u9762\u3092\u30c7\u30b6\u30a4\u30f3\u3002\u9060\u304f\u306e\u4eba\u304b\u3089\u3067\u3082\u898b\u3048\u308b\u3088\u3046\u306b\u3001\u6587\u5b57\u3092\u6700\u5927\u9650\u304a\u304a\u304d\u304f\u8868\u793a\u3002\u307e\u305f\u305d\u308c\u3067\u3082\u8aad\u3081\u306a\u3044\u304b\u3082\u77e5\u308c\u306a\u3044\u306e\u3067\u3001\u6587\u5b57\u306e\u80cc\u666f\u3092\u767d\u3067\u5857\u308b\u3002<\/p>\n

\u3053\u306e\u80cc\u666f\u306f\u30b2\u30fc\u30b8\u306b\u306a\u3063\u3066\u3044\u3066\uff15\u5206\u304b\u3051\u3066\u4e0b\u304c\u3063\u3066\u3044\u304f\u3088\u3046\u306b\u3057\u305f\u3002\u3053\u306e\u30bb\u30f3\u30b5\u30fc\u306f\u53b3\u5bc6\u306b\u300c\u5165\u5ba4\u300d\u300c\u9000\u5ba4\u300d\u304c\u53d6\u308c\u308b\u308f\u3051\u3058\u3083\u306a\u304f\u3066\u3001\u4eba\u306e\u52d5\u304d\u3092\u691c\u77e5\u3059\u308b\u3060\u3051\u3002\u5b9f\u969b\u306b\u4f1a\u8b70\u5ba4\u3067\u8a66\u3057\u305f\u3068\u3053\u308d\u3001\u4eba\u304c\u3044\u305f\u3068\u3057\u3066\u3082\u3042\u3093\u307e\u308a\u52d5\u304b\u306a\u3044\u3068\u691c\u77e5\u3057\u306a\u3044\u3053\u3068\u304c\u308f\u304b\u3063\u305f\u3002\u305d\u308c\u3067\u3082\u3001\u3060\u3044\u305f\u3044\uff15\u5206\u306b\uff11\u56de\u306f\u4eba\u304c\u52d5\u3044\u3066\u691c\u77e5\u3059\u308b\u3053\u3068\u304c\u7d4c\u9a13\u7684\u306b\u5224\u3063\u305f\u306e\u3067\u3001\u300c\u76f4\u8fd1\uff15\u5206\u53cd\u5fdc\u304c\u306a\u304b\u3063\u305f\u3089\u7a7a\u5ba4\u3068\u307f\u306a\u3059\u300d\u3068\u3044\u3046\u4ed5\u69d8\u306b\u3057\u305f\u3002<\/p>\n

\u30b2\u30fc\u30b8\u304c\u6e1b\u3063\u3066\u3044\u308b\u3068\u304d\u306b\u7a7a\u5ba4\u304b\u3069\u3046\u304b\u660e\u78ba\u306b\u5224\u65ad\u306f\u3067\u304d\u306a\u3044\u3051\u3069\u3001\u305d\u308c\u3082\u542b\u3081\u3066\u30e6\u30fc\u30b6\u306b\u4f1d\u308f\u308b\u4ed5\u7d44\u307f\u3060\u3002\u3053\u306e\u3042\u305f\u308a\u30cf\u30fc\u30c9\u306e\u4ed5\u69d8\u3084\u6027\u80fd\u9650\u754c\u306b\u5408\u308f\u305b\u3066\u6700\u9069\u306aUI\/UX\u3092\u8003\u3048\u3066\u3001\u305d\u308c\u3092\u30c7\u30b6\u30a4\u30f3\u3067\u8868\u73fe\u3057\u3066\u3001\u8aac\u660e\u305b\u305a\u3068\u3082\u30b7\u30f3\u30d7\u30eb\u3067\u4f7f\u3044\u3084\u3059\u304f\u3059\u308b\u30bb\u30f3\u30b9\u304c\u3068\u3066\u3082\u5927\u4e8b\u3060\u3068\u601d\u3046<\/p>\n

\u30d5\u30a9\u30f3\u30c8\u306fBebas Neue<\/a>\u3063\u3066\u3044\u3046\u96fb\u5149\u63b2\u793a\u677f\u3063\u307d\u3044\u304a\u3057\u3083\u308c\u30d5\u30ea\u30fc\u30d5\u30a9\u30f3\u30c8\u3092\u63a1\u7528\u3002<\/p>\n

\u3055\u3089\u306b\u3001\u3053\u306e\u624b\u306e\u30b7\u30b9\u30c6\u30e0\u306f\u307e\u3063\u305f\u304f\u52d5\u304d\u304c\u306a\u3044\u3068\u3001\u30d5\u30ea\u30fc\u30ba\u3057\u3066\u306a\u3044\u304b\uff1f\u306a\u3093\u3089\u304b\u306e\u30a8\u30e9\u30fc\u304c\u88cf\u3067\u8d77\u304d\u3066\u306a\u3044\u304b\uff1f\u4e0d\u5b89\u306b\u306a\u3063\u305f\u308a\u3059\u308b\u306e\u3067\u3001\u5e38\u306b\u3061\u3087\u3063\u3068\u3067\u3082\u52d5\u304d\u304c\u3042\u3063\u305f\u307b\u3046\u304c\u826f\u3044\u3002\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u306a\u3093\u306b\u3082\u53cd\u5fdc\u3092\u691c\u77e5\u3057\u3066\u306a\u3044\u3068\u304d\u306f\u3001\u6642\u8a08\u3092\u8868\u793a\u3057\u305f\u3002<\/p>\n

\u2463Vue.js+\u30bb\u30f3\u30b5\u30fcAPI\u3067\u7a7a\u5ba4\u6848\u5185\u8868\u793a<\/h1>\n

\u3044\u3088\u3044\u3088Vue.js\u3092\u4f7f\u3063\u3066\u3001\u30bb\u30f3\u30b5\u30fcAPI\u304b\u3089\u53d6\u5f97\u3057\u305f\u7a7a\u5ba4\u72b6\u6cc1\u3092\u753b\u9762\u306b\u8868\u793a\u3059\u308b\u3002react.js\u3068\u304b\u7d20\u306ejs\u3067\u3082\u826f\u304b\u3063\u305f\u3051\u3069\u3001\u30b3\u30fc\u30c9\u304c\u30b7\u30f3\u30d7\u30eb\u306b\u66f8\u3051\u3066\u5b66\u7fd2\u304c\u7c21\u5358\u305d\u3046\u3067\u6d41\u884c\u3063\u3066\u308b\u3068\u3044\u3046\u7406\u7531\u3067Vue.js\u306b\u6c7a\u5b9a\u3002\u4eca\u56de\u306e\u30bd\u30fc\u30b9\u306f200\u884c\u306b\u53ce\u307e\u3063\u3066\u3044\u3066\u672c\u5f53\u306b\u30b7\u30f3\u30d7\u30eb\uff01<\/p>\n

Vue.js\u306e\u3044\u3044\u3068\u3053\u308d\u306f\u3001\u30e2\u30c7\u30eb(HTML)+\u753b\u9762\u30c7\u30b6\u30a4\u30f3(CSS)+\u30ed\u30b8\u30c3\u30af(JS)\u30921\u3064\u306e\u300c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u300d\u3068\u3044\u3046\u5358\u4f4d\u3067\u6271\u3048\u3066\u3001\u518d\u5229\u7528\u3059\u308b\u3068\u304d\u306b\u307e\u308b\u3054\u3068\u518d\u5229\u7528\u3067\u304d\u3066\u30b3\u30fc\u30c9\u304c\u30b7\u30f3\u30d7\u30eb\u306b\u306a\u308a\u3084\u3059\u3044\u3002\u4eca\u56de\u307e\u3055\u306b1\u3064\u306e\u90e8\u5c4b\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u3064\u304f\u3063\u3066\u305d\u308c\u30925\u56de\u7e70\u308a\u8fd4\u3057\u30665\u90e8\u5c4b\u306e\u8868\u793a\u51e6\u7406\u3092\u5b9f\u73fe\u3057\u305f\u3002<\/p>\n

\u3055\u3089\u306bWEB\u30b5\u30fc\u30d0\u3092\u305f\u3066\u306a\u304f\u3066\u3082\u30ed\u30fc\u30ab\u30eb\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u52d5\u4f5c\u3059\u308b\u306e\u3082\u697d\u3002\u305f\u3060\u3057PC\u306eChrome\u304b\u3089\u30a2\u30af\u30bb\u30b9\u3057\u3088\u3046\u3068\u3059\u308b\u3068\u3001CORS\u3068\u3044\u3046JS\u306e\u30a8\u30e9\u30fc\u3002\u3069\u3046\u3084\u3089\u30ed\u30fc\u30ab\u30eb\u306ehtml\u30d5\u30a1\u30a4\u30eb\u304b\u3089AJax\u3067\u5916\u90e8\u30b5\u30fc\u30d0\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3088\u3046\u3068\u3059\u308b\u3068\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u306e\u30a8\u30e9\u30fc\u306b\u306a\u308b\u3089\u3057\u3044\u3002\u3053\u308c\u306fAllow-Control-Allow-Origin<\/a>\u3068\u3044\u3046Chrome\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u3067OFF\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/p>\n

\u30bd\u30fc\u30b9\u306f\u4e0b\u8a18\u306e\u901a\u308a\uff01<\/p>\n

\u2605AiThema10.html (\u30e1\u30a4\u30f3\u30d7\u30ed\u30b0\u30e9\u30e0) <\/strong><\/p>\n

\r\n\r\n<!DOCTYPE html>\r\n<html lang=\"ja\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"google\" content=\"notranslate\">\r\n    <title>\u7a7a\u5ba4\u6848\u5185\uff1a\u30a2\u30a4\u30c6\u30de\u30c6\u30f3\uff01<\/title>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/axios\/dist\/axios.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/moment.js\/2.10.6\/moment.js\"><\/script>\r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"AiThema.css\"><\/link>\r\n<\/head>\r\n<body>\r\n  <div class=\"block\" id=\"roomViewer\">\r\n      <room-viewer v-for=\"(room, index)  in rooms\" :index=\"index\"><\/room-viewer>\r\n  <\/div>\r\n  <div class=\"clock\" id=\"nowClock\" v-if=\"isEmpty\" >\r\n    {{NowTime}}\r\n  <\/div>\r\n<\/body>\r\n<script>\r\n\r\n  \/* -----------------------------------------------\u5171\u901a\u521d\u671f\u8a2d\u5b9a----------------------------------------------- *\/\r\n  const emptyTime       ='300';   \/\/\u4f55\u79d2\u305f\u3063\u305f\u3089\u7a7a\u5ba4\u3068\u307f\u306a\u3059\u304b\r\n  const timerInterval   = 1000;   \/\/\u4f55\u30df\u30ea\u79d2\u3054\u3068\u306b\u66f4\u65b0\u3059\u308b\u304b\r\n  const requestInterval = 10;     \/\/\u4f55\u79d2\u3054\u3068\u306b\u30b5\u30fc\u30d0\u306b\u78ba\u8a8d\u3059\u308b\u304b\r\n\r\n  \/\/\u63a5\u7d9a\u5148\u306e\u90e8\u5c4b\u4e00\u89a7\u3068\u30c7\u30d0\u30a4\u30b9\u306e\u63a5\u7d9a\u8a2d\u5b9a\u3002\u6700\u5f8c\u306e2\u3064\u306f1.\u6700\u65b0\u691c\u77e5\u65e5\u6642,2.\u6700\u65b0\u30a2\u30af\u30bb\u30b9\u65e5\u6642\r\n  var rooms = [\r\n    {'id': \"S\", 'mac': \"24:72:60:40:**:**\", 'token': \"11e1277b5e1619561ccd7a1b9977****\",'hit_date':\"\",'update_date':\"\"},\r\n    {'id': \"T\", 'mac': \"24:72:60:40:**:**\", 'token': \"d6a0e1de99d2bbae39cd6cf043e0****\",'hit_date':\"\",'update_date':\"\"},\r\n    {'id': \"B\", 'mac': \"24:72:60:40:**:**\", 'token': \"38caa196230f2b19d9a6ac4397d5****\",'hit_date':\"\",'update_date':\"\"},\r\n    {'id': \"M\", 'mac': \"24:72:60:40:**:**\", 'token': \"1427bef41f36d90efb95aae0bda2****\",'hit_date':\"\",'update_date':\"\"},\r\n    {'id': \"C\", 'mac': \"24:72:60:40:**:**\", 'token': \"94781891187c4cbd72fe8a510a05****\",'hit_date':\"\",'update_date':\"\"}\r\n  ]\r\n\r\n  \/\/\u30bb\u30f3\u30b5\u30fcAPI\u306eURL\r\n  var url = \"https:\/\/svcipp.planex.co.jp\/api\/get_data.php?type=WS-USB02-PIR&mac=$mac&from=$fromDate&to=$toDate&token=$token\"\r\n\r\n  \/* ----------------------------\u30e1\u30a4\u30f3\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8a2d\u5b9a\u3002API\u3078\u30a2\u30af\u30bb\u30b9\u3057\u7a7a\u304d\u72b6\u6cc1\u8868\u793a------------------------------ *\/\r\n  Vue.component('room-viewer', {\r\n    props: ['index'],\r\n\r\n    \/* ----------------\u5171\u901a\u5909\u6570\u306e\u5ba3\u8a00---------------- *\/\r\n    data: function () {\r\n      return{\r\n        roomName:[],            \/\/\u8868\u793a\u3059\u308b\u90e8\u5c4b\u540d(1\u6587\u5b57)\r\n        pastSecond:emptyTime,   \/\/\u524d\u56de\u53cd\u5fdc\u3057\u3066\u304b\u3089\u4f55\u79d2\u3060\u3063\u305f\u304b\uff1f \u30c7\u30d5\u30a9\u3067\u306f\u7a7a\u5ba4\u3068\u307f\u306a\u3059\r\n        reloadTimer: null,      \/\/\u5b9a\u671f\u7684\u306b\u753b\u9762\u3092\u30ea\u30ed\u30fc\u30c9\u3059\u308b\u30bf\u30a4\u30de\u30fc\r\n        lastRequest:''          \/\/\u524d\u56de\u30ea\u30af\u30a8\u30b9\u30c8\u3057\u305f\u6642\u523b\u3092\u4fdd\u7ba1\u3002\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u30a4\u30f3\u30bf\u30fc\u30d0\u30eb\u3092\u53d6\u308b\u305f\u3081\r\n      }\r\n    },\r\n\r\n    \/* ------------\u521d\u671f\u5316\u30fb\u30bf\u30a4\u30de\u30fc\u306e\u30bb\u30c3\u30c8------------ *\/\r\n    created: function() {\r\n\r\n      let self = this;\r\n\r\n      Vue.set(self.roomName, self.index, rooms[self.index].id); \/\/\u90e8\u5c4b\u540d\u3092\u8868\u793a (\u30a8\u30e9\u30fc\u304c\u3067\u305f\u3089\u90e8\u5c4b\u540d\u306f?\u306b\u306a\u308b)\r\n      console.log(\"roomName:\"+this.roomName[this.index]);\r\n\r\n      this.reloadTimer = setInterval(function() {self.checkStatus()}, timerInterval);  \/\/\u5b9a\u671f\u7684\u306b\u72b6\u6cc1\u78ba\u8a8d\u3092\u547c\u3073\u51fa\u3059\r\n\r\n    },\r\n\r\n    \/* ----------------\u30e1\u30bd\u30c3\u30c9\u5ba3\u8a00---------------- *\/\r\n    methods: {\r\n\r\n      \/****** \u30b5\u30fc\u30d0\u3078\u691c\u77e5\u72b6\u6cc1\u3092\u30c1\u30a7\u30c3\u30af\u3059\u308b\u30e1\u30bd\u30c3\u30c9 ******\/\r\n      checkStatus: async function(){\r\n\r\n        var now =  moment(new Date).format('YYYY-MM-DD HH:mm:ss');\r\n\r\n        \/\/\u524d\u56de\u306e\u691c\u77e5\u304b\u3089\u4f55\u79d2\u7d4c\u904e\u3057\u305f\uff1f\r\n        pastSecond =  moment(now).diff(moment(rooms[this.index].hit_date),'seconds');\r\n        this.statusView();\r\n\r\n        \/\/\u30ea\u30af\u30a8\u30b9\u30c8\u9593\u9694\u304c\u8a2d\u5b9a\u5024\u306b\u9054\u3057\u306a\u3051\u308c\u3070\u4f55\u3082\u305b\u305a\u5f85\u3064\r\n        if(this.lastRequest!=''\r\n            & moment(now).diff(moment(this.lastRequest),'second') < requestInterval){\r\n              return;\r\n        }\r\n\r\n        this.lastRequest = now;\r\n\r\n        \/\/\u30b5\u30fc\u30d0\u63a5\u7d9a\u51e6\u7406\u958b\u59cb\r\n\r\n        var sensorData = [];  \/\/\u30bb\u30f3\u30b5\u30fc\u304b\u3089\u53cd\u5fdc\u6642\u523b\u3092\u53d6\u5f97\r\n        var reqUrl = url;     \/\/\u30bb\u30f3\u30b5\u30fc\u306eAPI URL\r\n\r\n        \/\/\u30ea\u30af\u30a8\u30b9\u30c8\u7528\u306e\u30c7\u30d0\u30a4\u30b9\u60c5\u5831\r\n        reqUrl = reqUrl.replace('$mac'  ,rooms[this.index].mac);\r\n        reqUrl = reqUrl.replace('$token',rooms[this.index].token);\r\n\r\n        \/\/\u4eca\u304b\u308910\u5206\u524d\u307e\u3067\u306e\u30ed\u30b0\u3092\u53d6\u5f97 url\u306b\u8a2d\u5b9a\r\n        var m = moment(new Date).add(-9, \"hours\");  \/\/\u306a\u305c\u304b\u30bb\u30f3\u30b5\u30fc\u304c9\u6642\u9593\u524d\u306eutc\u306a\u306e\u3067\u8abf\u6574\r\n        reqUrl = reqUrl.replace( '$toDate', m.format('YYYY-MM-DD HH:mm:ss') );\r\n        reqUrl = reqUrl.replace( '$fromDate', m.add(-10, \"minutes\").format('YYYY-MM-DD HH:mm:ss') );\r\n\r\n        console.log(reqUrl);\r\n\r\n        try{\r\n          \/\/\u30bb\u30f3\u30b5\u30fc\u306eAPI\u306b\u30ea\u30af\u30a8\u30b9\u30c8\r\n          var res = await axios.get(reqUrl);\r\n          sensorData = res.data;\r\n          console.log(\"resdata:\"+sensorData);\r\n\r\n          Vue.set(this.roomName, this.index, rooms[this.index].id); \/\/\u90e8\u5c4b\u540d\u3092\u6539\u3081\u3066\u6307\u5b9a(?\u304b\u3082\u3057\u308c\u306a\u3044\u306e\u3067)\r\n          console.log(\"roomName:\"+this.roomName[this.index]);\r\n\r\n\r\n        } catch (error) {\r\n          Vue.set(this.roomName, this.index, '?');  \/\/\u30a8\u30e9\u30fc\u306e\u5834\u5408\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u306b?\u3068\u3060\u3059\r\n          console.log(\"\u30a8\u30e9\u30fc\u767a\u751f...\"+error);\r\n        }\r\n\r\n        \/\/\u6700\u65b0\u691c\u77e5\u65e5\u6642\u304c\u53d6\u308c\u308c\u3070\u3001\u4fdd\u5b58\u3059\u308b\r\n        if(sensorData.length!=0){       \/\/\u4f55\u3089\u304b\u306e\u30c7\u30fc\u30bf\u304c\u5e30\u3063\u3066\u304f\u308c\u3070\u683c\u7d0d\r\n          console.log(\"api_lastdata:\"+sensorData[sensorData.length-1][0]);\r\n          rooms[this.index].update_date = now;\r\n\r\n          \/\/UTF->JST\u5909\u63db\u3057\u3066\u683c\u7d0d\r\n          rooms[this.index].hit_date = moment(sensorData[sensorData.length-1][0])\r\n                                        .add(9, \"hours\").format('YYYY-MM-DD HH:mm:ss');\r\n        }\r\n\r\n\r\n      },\r\n\r\n      \/****** \u7a7a\u5ba4\u72b6\u6cc1\u3092\u753b\u9762\u306b\u8868\u793a\u3059\u308bstyle\u306e\u8abf\u6574 ******\/\r\n      statusView: function(){\r\n\r\n        \/\/console.log(\"Last Hit:\"+rooms[this.index].hit_date+\" pastSecond:\"+this.pastSecond);\r\n\r\n        if(rooms[this.index].hit_date!=\"\"){\r\n          var hitMoment = moment(rooms[this.index].hit_date); \/\/\u524d\u56de\u691c\u77e5\u6642\u9593\r\n          this.pastSecond = moment(new Date()).diff(hitMoment, 'seconds');  \/\/\u4f55\u79d2\u7d4c\u904e\u3057\u305f\uff1f\r\n        }\r\n        var blackPer = (this.pastSecond * 100) \/ emptyTime;  \/\/\u9032\u6357\u7387100%\u306b\u6cbb\u3059\r\n        blackPer = Math.floor(blackPer);                     \/\/\u6574\u6570\u306b\u306a\u304a\u3059\r\n        blackPer = Math.min(blackPer,100);                   \/\/\u6700\u5927100%\u306b\u4e38\u3081\u308b\r\n        \/\/console.log(\"blackPer:\"+blackPer);\r\n\r\n        var charColor = \"red\"; \/\/0\u301c25%\r\n\r\n        if(blackPer>=25&&blackPer<50){ \/\/\u301c50%\r\n          charColor = \"#FF4500\";\r\n        }\r\n        else if(blackPer>=50&&blackPer<75){ \/\/\u301c75%\r\n          charColor = \"#FF7F50\";\r\n        }\r\n        else if(blackPer>=75&&blackPer<100){\r\n          charColor = \"#FFA07A\";\r\n        }\r\n        else if(blackPer==100){\r\n          charColor = \"white\";\r\n        }\r\n        return{\r\n          background: 'linear-gradient(black '+blackPer+'%, white '+(100-blackPer)+'%)',\r\n          color: charColor\r\n        }\r\n      }\r\n    },\r\n\r\n    \/* ----------------\u8868\u793a\u8a2d\u5b9a---------------- *\/\r\n    template:\r\n      '<div class=\"cell_basic\" v-bind:style=\"statusView()\">'+\r\n        '{{this.roomName[this.index]}}'+\r\n      '<\/div>'\r\n  })\r\n\r\n  \/* --------------------------------Vue\u306e\u5ba3\u8a00-------------------------------- *\/\r\n  new Vue({  \/\/\u30e1\u30a4\u30f3\r\n    el: '#roomViewer',\r\n  })\r\n\r\n  new Vue({  \/\/\u6642\u8a08\r\n      el: '#nowClock',\r\n      data: {\r\n        NowTime: '', \/\/testVal\u3092\u5b9a\u7fa9\r\n        isEmpty: ''\r\n      },\r\n      created:  function () {\r\n        let self = this;\r\n        setInterval(function(){self.setDate()}, 500);\r\n      },\r\n      methods: {\r\n        setDate: function(){\r\n           this.NowTime = moment(new Date).format('HH:mm:ss') \/\/\u73fe\u5728\u6642\u523b\u3092\u8fd4\u3059\r\n           this.isEmpty = true;\r\n           for (var index in rooms) {\r\n             if(rooms[index].hit_date!=\"\" &\r\n                moment(new Date).diff(moment(rooms[index].hit_date),'seconds') < emptyTime){\r\n                  this.isEmpty = false;\r\n                }\r\n             }\r\n        }\r\n      }\r\n    });\r\n<\/script>\r\n<\/html>\r\n<\/pre>\n
\u2605AiThema.css <\/strong><\/p>\n
body {\r\n    background-color:black;\r\n    overflow:hidden;\r\n    margin: 0px;\r\n}\r\n\r\n.block{\r\n  display: table;\r\n  width: 100vw;\r\n  height: 100vh;\r\n  text-align: center;\r\n  font-size: 45vw;\r\n  font-family:  \"Bebas Neue\";\r\n}\r\n\r\n.cell_empty{\r\n  color : white ;\r\n  display: table-cell;\r\n  vertical-align: middle;\r\n  border: 0.5px solid black;\r\n}\r\n\r\n.cell_basic{\r\n  display: table-cell;\r\n  vertical-align: middle;\r\n  border: 0.5px solid black;\r\n}\r\n\r\n.clock{\r\n  display: table;\r\n  width: 100vw;\r\n  height: 10vh;\r\n  text-align: center;\r\n  font-size: 5vw;\r\n  font-family:  \"Bebas Neue\";\r\n  color : white ;\r\n  margin:  0px;\r\n  position:  absolute;\r\n  bottom: 2vh;\r\n  z-index: 10;\r\n}\r\n<\/pre>\n
\u203bvar rooms[]\u306e\u8a2d\u5b9a\u3068css\u306e.block\u306efont size\u3092\u5909\u3048\u308b\u3060\u3051\u3067\u3001\u90e8\u5c4b\u304c5\u500b\u3058\u3083\u306a\u304f\u3066\u3082\u52d5\u4f5c\u53ef\u80fd
\n\uff08\u30c7\u30b6\u30a4\u30f3\u7684\u306b\u306f2\u301c7\u90e8\u5c4b\u3050\u3089\u3044\u304c\u3061\u3087\u3046\u3069\u3088\u3044\uff09<\/p>\n
\u2464\u30e9\u30ba\u30d1\u30a4\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h1>\n
\u3055\u3042\u3044\u3088\u3044\u3088\u30e9\u30ba\u30d1\u30a4\u4e0a\u3067\u306e\u3053\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u52d5\u4f5c\u3055\u305b\u3088\u3046\u3002<\/p>\n
\u307e\u305a\u306f\u3001\u30e9\u30ba\u30d1\u30a4+\u5916\u4ed8\u3051\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u3092\u63a5\u7d9a\u3057\u3066Wifi\u306e\u8a2d\u5b9a\u3057\u3088\u3046\u3068\u3057\u305f\u3089\u554f\u984c\u767a\u751f\uff01MAC\u304b\u3089\u30e9\u30ba\u30d1\u30a4\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u65b9\u6cd5\u304c\u306a\u306b\u3082\u306a\u3044\u3002\u3002Wifi\u306e\u8a2d\u5b9a\u306f\u3069\u3046\u3057\u3066\u3082\u5916\u4ed8\u3051\u30ad\u30fc\u30dc\u30fc\u30c9\u3067\u76f4\u63a5\u3064\u306a\u3044\u3067\u3084\u3089\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u3002\u3067\u3082\u3053\u3053\u306f\u4eba\u53e32000\u4eba\u306e\u96e2\u5cf6\u3002\u3002PC\u30b7\u30e7\u30c3\u30d7\u306a\u3093\u3066\u3069\u3053\u306b\u3082\u306a\u3044\u3002\u9014\u65b9\u306b\u66ae\u308c\u3066\u3044\u308b\u3068\u3053\u308d\u3001\u6c11\u5bbf\u306e\u304a\u3058\u3055\u3093\u304c\u30ad\u30fc\u30dc\u30fc\u30c9\u3092\u6301\u3063\u3066\u3044\u305f\uff01\u30d9\u30bf\u30d9\u30bf\u3067Ctrl\u30ad\u30fc\u3082\u306a\u304f\u306a\u3063\u3066\u305f\u3051\u3069\u3001\u5168\u7136\u554f\u984c\u306a\u3057\u3002\u3042\u308a\u304c\u3068\u3046\u304a\u3058\u3055\u3093\u3002<\/p>\n
\"\"<\/p>\n
1. \u307e\u305aWifi\u306e\u8a2d\u5b9a<\/strong><\/p>\n
\u79fb\u52d5\u3059\u308b\u3054\u3068\u306b\u6bce\u56de\u8a2d\u5b9a\u3059\u308b\u306e\u306f\u9762\u5012\u306a\u306e\u3067\u3001iPhone\u306e\u30c6\u30b6\u30ea\u30f3\u30b0\u306b\u6307\u5b9a\u3002\u3055\u3089\u306b\u30db\u30b9\u30c8\u540d\u3092\u8a2d\u5b9a\u3057\u3066ip\u30a2\u30c9\u30ec\u30b9\u3092\u6bce\u56de\u5165\u308c\u306a\u304f\u3066\u826f\u3044\u3088\u3046\u306b\u3002<\/p>\n
$ssh pi@raspberrypi.local<\/pre>\n
\u3067\u540c\u3058\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u5185\u306b\u3044\u308c\u3070\u30ed\u30b0\u30a4\u30f3\u3067\u304d\u308b\u3002\u7c21\u5358<\/p>\n
2. \u521d\u671f\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/strong><\/p>\n
\u6700\u65b0OS\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305f\u308a\u3001\u5730\u57df\u3092\u8a2d\u5b9a\u3057\u305f\u308a\u3002\u30cd\u30c3\u30c8\u3067\u63a2\u3059\u3068\u305f\u304f\u3055\u3093\u8a18\u4e8b\u304c\u3042\u308b\u3002<\/p>\n
3. \u30d5\u30a1\u30a4\u30eb\u3092\u30e9\u30ba\u30d1\u30a4\u306b\u914d\u7f6e<\/strong><\/p>\n
\u3053\u308c\u3082scp\u30b3\u30de\u30f3\u30c9\u3067\u7c21\u5358\u306b\u304a\u3051\u308b\u3002html\u3068css\u3092\u7f6e\u304f\u3060\u3051\u3002<\/p>\n
\r\n$scp -r AiThema10 pi@raspberrypi.local:\/home\/pi\/Desktop\/<\/pre>\n
4. font\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong><\/p>\n
“Bebas Neue\u201d\u30d5\u30a9\u30f3\u30c8\u304c\u30e9\u30ba\u30d1\u30a4\u5185\u306b\u306a\u3044\u306e\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3002apt-get\u3067\u3082\u767b\u9332\u3055\u308c\u3066\u3044\u306a\u3044\u306e\u3067\u3001\u76f4\u306bBebas Neue\u306e\u914d\u5e03\u30b5\u30a4\u30c8<\/a>\u304b\u3089\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066.fonts\u30d5\u30a9\u30eb\u30c0\u306b\u914d\u7f6e\u3059\u308b\u3060\u3051\u3002\u7c21\u5358\u3002<\/p>\n
$scp BebasNeue-Regular.ttf pi@raspberrypi.local:\/home\/pi\/.fonts\/<\/pre>\n
\u3053\u308c\u3060\u3051\u3067\u30e9\u30ba\u30d1\u30a4\u4e0a\u3067\u306e\u52d5\u4f5c\u8a2d\u5b9a\u304c\u5b8c\u4e86\uff01<\/p>\n
5. \u30d6\u30e9\u30a6\u30b6\u3092\u8d77\u52d5\u3059\u308b<\/strong><\/p>\n
\u4e0b\u8a18\u306e\u30b3\u30de\u30f3\u30c9\u3067chrome\u304c\u8d77\u52d5\u3055\u308c\u308b\u3002<\/p>\n
chromium-browser --noerrdialogs --kiosk --incognito --disable-web-security --user-data-dir --test-type \/home\/pi\/Desktop\/AiThema10\/AiThema10.html\r\n\r\n#--noerrdialogs \u30a8\u30e9\u30fc\u30c0\u30a4\u30a2\u30ed\u30b0\u3092\u8868\u793a\u3057\u306a\u3044\r\n#--kiosk \u5168\u753b\u9762\u8868\u793a\r\n#--incognito \u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u30e2\u30fc\u30c9\u3067\u8d77\u52d5\r\n#--disable-web-security chrome\u306eextension\u540c\u69d8\u3001\u30ed\u30fc\u30ab\u30eb\u304b\u3089Ajax\u3092\u8aad\u3080\u305f\u3081\r\n#--user-data-dir \u540c\u4e0a\u3002\u3053\u306e\u2461\u500b\u30bb\u30c3\u30c8\r\n#--test-type \u30d8\u30c3\u30c0\u30fc\u306bwarning\u304c\u51fa\u305f\u308a\u3059\u308b\u306e\u3067\u305d\u308c\u304c\u51fa\u306a\u3044\u3088\u3046\u306b<\/pre>\n
\u2466\u30e9\u30ba\u30d1\u30a4\u306e\u81ea\u52d5\u8d77\u52d5\u8a2d\u5b9a<\/h1>\n
\u3042\u3063\u3068\u3044\u3046\u9593\u306b\u8a2d\u5b9a\u307e\u3067\u304c\u5b8c\u4e86\uff01\u6700\u5f8c\u306b\u30aa\u30d5\u30a3\u30b9\u3067\u4f7f\u3046\u305f\u3081\u306e\u7d30\u304b\u306a\u8a2d\u5b9a\u3002<\/p>\n
1. OS\u8d77\u52d5\u6642\u306b\u81ea\u52d5\u8d77\u52d5<\/strong><\/p>\n
\u96fb\u6e90\u3092\u5165\u308c\u308b\u3060\u3051\u3067\u8ab0\u3067\u3082\u4f7f\u3048\u308b\u3088\u3046\u306b\u3001OS\u8d77\u52d5\u5f8c\u306b\u81ea\u52d5\u7684\u306b\u30d6\u30e9\u30a6\u30b6\u8d77\u52d5\u3057\u3066\u5168\u753b\u9762\u8868\u793a\u306b\u3057\u305f\u3044\u3002autostart\u30d5\u30a1\u30a4\u30eb\u3092\u7de8\u96c6\u3059\u308b\u3068\u3001\u81ea\u52d5\u8d77\u52d5\u306e\u8a2d\u5b9a\u304c\u3067\u304d\u308b\u3002\u3064\u3044\u3067\u306b\u30de\u30a6\u30b9\u30dd\u30a4\u30f3\u30bf\u3082\u975e\u8868\u793a\u6642\u306b\u3002<\/p>\n
\u30de\u30a6\u30b9\u7121\u52b9\u5316\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/p>\n
$sudo apt-get install unclutter<\/pre>\n
\u81ea\u52d5\u8d77\u52d5\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u3092\u7de8\u96c6<\/p>\n
$sudo vi .config\/lxsession\/LXDE-pi\/autostart<\/pre>\n
#\u4e0b\u8a18\u306f\u7121\u52b9\u5316\r\n#@lxpanel --profile LXDE-pi\r\n#@pcmanfm --desktop --profile LXDE-pi\r\n#@xscreensaver -no-splash\r\n#@point-rpi\r\n\r\n#\u30b9\u30af\u30ea\u30fc\u30f3\u30bb\u30fc\u30d0\u30fc\u3092\u30aa\u30d5\u306b\r\n@xset s off\r\n\r\n# X server\u3092\u30aa\u30d5\u306b\r\n@xset -dpms\r\n\r\n# DPMS (Display Power Management Signaling) \u3092\u30aa\u30d5\u306b\r\n@xset s noblank\r\n\r\n#\u30de\u30a6\u30b9\u30dd\u30a4\u30f3\u30bf\u3092\u975e\u8868\u793a\r\n@unclutter\r\n\r\n#\u81ea\u52d5\u8d77\u52d5\r\n@chromium-browser --noerrdialogs --kiosk --incognito --disable-web-security --user-data-dir --test-type \/home\/pi\/Desktop\/AiThema10\/AiThema10.html<\/pre>\n
2.\u6df1\u591c\u571f\u65e5\u306fOFF\u306b<\/strong><\/p>\n
\u7701\u30a8\u30cd\u306e\u305f\u3081\u306b\u3001\u4f7f\u3046\u53ef\u80fd\u6027\u304c\u4f4e\u3044\u3068\u304d\u306f\u30b9\u30ea\u30fc\u30d7\u30e2\u30fc\u30c9\u306b\u3057\u3066\u304a\u304d\u305f\u3044\u3002\u30b9\u30ea\u30fc\u30d7\u72b6\u614b\u3067\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u3092\u505c\u6b62\u3057\u3066\u3001\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u3082OFF\u306b\u3059\u308b\u3002\u518d\u958b\u3057\u305f\u3044\u3068\u304d\u306b\u306f\u518d\u8d77\u52d5\u3059\u308b\u3060\u3051\u3067OK\u3002cron\u306b\u8a2d\u5b9a\u3059\u308b\u3002<\/p>\n
$sudo crontab -e<\/pre>\n
#\u5e73\u65e5\u306e\u671d10\u6642\u306b\u518d\u8d77\u52d5\r\n0 10 * * 1-5 \/sbin\/shutdown -r now\r\n\r\n#\u5e73\u65e5\u306e\u591c23\u6642\u306b\u30d6\u30e9\u30a6\u30b6\u505c\u6b62\u3068\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u3092\u30b9\u30ea\u30fc\u30d7\r\n0 23 * * 1-5 pkill chromium &amp;&amp; sudo service lightdm stop<\/pre>\n
\u4ee5\u4e0a\u3067\u5b8c\u4e86\uff01\u3000\u3061\u3087\u304f\u3061\u3087\u304f\u30cf\u30de\u3063\u305f\u3051\u3069\u7d42\u308f\u3063\u3066\u307f\u308c\u3070\u672c\u5f53\u306b\u7c21\u5358\u3060\u3063\u305f\u3002\u826f\u304d\u6642\u4ee3\uff01<\/p>\n
\u793e\u5185\u306b\u8a2d\u5b9a\u3057\u3066\u307f\u305f<\/h1>\n
\u5b8c\u6210\u3057\u305f\u306e\u3067\u65e9\u901f\u793e\u5185\u306b\u8a2d\u7f6e\u3002\u8ab0\u306e\u673a\u304b\u3089\u3082\u3044\u307e\u306e\u4f1a\u8b70\u5ba4\u306e\u7a7a\u304d\u72b6\u6cc1\u304c\u308f\u304b\u308b\u3088\u3046\u306b\u306a\u308a\u3001\u3044\u3061\u3044\u3061\u898b\u306b\u884c\u304b\u306a\u304f\u3066\u826f\u304f\u306a\u3063\u305f\u3002\u305f\u3060\u3057\u3001\u300c\u8aac\u660e\u3057\u306a\u304f\u3066\u3082\u76f4\u611f\u3067\u308f\u304b\u308b\u30c7\u30b6\u30a4\u30f3\u300d\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u7279\u306b\u8aac\u660e\u306a\u304f\u7f6e\u3044\u3066\u3044\u305f\u3089\u300c\u6c17\u6e29\u306e\u8868\u793a\u3067\u3059\u304b\uff1f\u300d\u3068\u8a00\u308f\u308c\u3066\u3057\u307e\u3063\u305f\u7b11\u3002\u3002\u3082\u3046\u3059\u3053\u3057UI\u6539\u5584\u306e\u4f59\u5730\u3042\u308a\u3002\u307e\u305f\u3001\u500b\u4eba\u7684\u306b\u4e16\u754c\u4e00\u3084\u3055\u3057\u3044\u30e1\u30c3\u30bb\u30fc\u30b8\u3060\u3068\u601d\u3046\u300c\u4eba\u304c\u3044\u306a\u304f\u3066\u3082\u6c34\u304c\u6d41\u308c\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059 by TOTO\u300d\u3068\u540c\u3058\u539f\u7406\u3067\u3001\u8ab0\u3082\u3044\u306a\u3044\u306e\u306b\u53cd\u5fdc\u3057\u3066\u3057\u307e\u3046\u3053\u3068\u304c\u3042\u308b\u3002\u3053\u306e\u3042\u305f\u308a\u306e\u8aa4\u8a8d\u8b58\u3092\u30b9\u30eb\u30fc\u3059\u308b\u3088\u3046\u306a\u30a2\u30eb\u30b4\u30ea\u30ba\u30e0\u306f\u307e\u3060\u6539\u5584\u306e\u4f59\u5730\u3042\u308a\u3002<\/p>\n
\"\"<\/p>\n
\u304b\u304b\u3063\u305f\u8cbb\u7528\u306f\uff14\u4e07\u5186\u3050\u3089\u3044<\/h1>\n
\u5168\u4f53\u7684\u306b\u601d\u3063\u3066\u305f\u3088\u308a\u5b89\u3044\u3002\u539f\u4fa1\uff14\u4e07\u5186\u3067\u5e74\u9593\uff11\uff12\uff10\u4e07\u5186\u306e\u7bc0\u7d04\u306b\u6210\u529f\uff01<\/p>\n\n\n\n\n\n\n
\nRaspberry Pi3<\/a>\n<\/td>\n\n\u00d71\n<\/td>\n\n9,999\u5186\n<\/td>\n<\/tr>\n
\n\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4<\/a>\n<\/td>\n\n\u00d71\n<\/td>\n\n7,299\u5186\n<\/td>\n<\/tr>\n
\n\u30c9\u30b3\u30c7\u30e2\u4eba\u611f\u30bb\u30f3\u30b5\u30fc<\/a>\n<\/td>\n\n\u00d75\n<\/td>\n\n20,810\u5186\n<\/td>\n<\/tr>\n
\n\u5ef6\u9577\u30b3\u30fc\u30c9<\/a>\n<\/td>\n\n\u00d75\n<\/td>\n\n3,590\u5186\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u5408\u8a08:41,690\u5186<\/strong><\/p>\n
\u3055\u3044\u3054\u306b\uff1a\u30cf\u30fc\u30c9\u3082\u30bd\u30d5\u30c8\u306e\u6642\u4ee3\u3078<\/h1>\n
\u3053\u308c\u307e\u3067\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u30a8\u30f3\u30b8\u30cb\u30a2\u306f\u5bb6\u96fb\u3068\u304b\u30cf\u30fc\u30c9\u306b\u3064\u3044\u3066\u306f\u3069\u3053\u304b\u9060\u304f\u306e\u5b58\u5728\u3060\u3063\u305f\u3051\u3069\u3001\u30e9\u30ba\u30d1\u30a4\u3084IoT\u30c7\u30d0\u30a4\u30b9\u306e\u666e\u53ca\u306a\u3069\u306b\u3088\u3063\u3066\u7c21\u5358\u306b\u30ea\u30a2\u30eb\u306a\u7a7a\u9593\u3067\u4f7f\u3048\u308b\u88c5\u7f6e\u3092\u4f5c\u308c\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u3002\u4eca\u56de\u306e\u958b\u767a\u3067\u3068\u304f\u306b\u7c21\u5358\u3055\u3092\u5f37\u304f\u5b9f\u611f\u3057\u305f\u3002\u3082\u3046PC\u3084\u30b9\u30de\u30db\u306b\u53ce\u307e\u3063\u3066\u3044\u308b\u6642\u4ee3\u3067\u306f\u306a\u3044\u3002<\/p>\n
\u30bd\u30d5\u30c8\u3082\u30cf\u30fc\u30c9\u3082\u4e00\u4f53\u3068\u306a\u3063\u3066\u3001\u304b\u3093\u305f\u3093\u306a\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u611f\u899a\u3067\u30ea\u30a2\u30eb\u3082\u306e\u3065\u304f\u308a\u304c\u3067\u304d\u308b\u6642\u4ee3\u306b\u306f\u3001\u6280\u8853\u529b\u3088\u308a\u3082\u3080\u3057\u308d<\/p>\n
\u2460\u30ea\u30a2\u30eb\u306a\u30b7\u30fc\u30f3\u3084\u4eba\u306e\u6c17\u6301\u3061\u3092\u7406\u89e3\u3057\u3066UI\/UX\u306b\u3092\u8a2d\u8a08\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u529b
\n\u2461\u3068\u308a\u3042\u3048\u305a\u30d7\u30ed\u30c8\u3092\u4f5c\u3063\u3066\u307f\u3066\u826f\u304b\u3063\u305f\u3089\u4e8b\u696d\u5316\u3059\u308b\u30d3\u30b8\u30cd\u30b9\u529b<\/p>\n
\u306a\u3069\u304c\u3068\u3063\u3066\u3082\u5927\u4e8b\u306b\u306a\u3063\u3066\u304f\u308b\u3002<\/p>\n
\u3068\u3044\u3046\u3053\u3068\u3067\u5f53\u793e\u3067\u3082\u305d\u3093\u306a\u30d3\u30b8\u30e7\u30f3\u3092\u3082\u3063\u305f\u30a8\u30f3\u30b8\u30cb\u30a2\uff06\u30af\u30ea\u30a8\u30a4\u30bf\u30fc\u3092\u307e\u3060\u307e\u3060\u5897\u3084\u3057\u3066\u3044\u304f\u306e\u3067\u3001\u8208\u5473\u306e\u3042\u308b\u65b9\u306f\u4f1a\u793eHP<\/a>\u304b\u3089\u9023\u7d61\u307e\u3063\u3066\u307e\u3059\uff01<\/p>\n
\u304a\u307e\u3051<\/h1>\n
\u96a0\u5c90\u30b8\u30aa\u30d1\u30fc\u30af\u30ad\u30e3\u30f3\u30d7\u5834\u3067\u30ea\u30a2\u30eb\u30d7\u30ed\u30b0\u30e9\u30e0\u30ad\u30e3\u30f3\u30d7\u306e\u69d8\u5b50\u7b11\u3002\u96a3\u306e\u30c6\u30f3\u30c8\u306e\u30bd\u30ed\u30ad\u30e3\u30f3\u30d1\u30fc\u3068\u91e3\u3063\u305f\u9b5a\u3092BBQ\u3057\u3066\u904a\u3093\u3060\u308a\u30c1\u30e3\u30ea\u3067\u96e2\u5cf6\u3092\u4e00\u5468\u3057\u305f\u308a\u3057\u306a\u304c\u3089\u306e\u3001\u5e74\u306b\u4e00\u5ea6\u306e\u81f3\u798f\u306e\u6642\u9593\u3060\u3063\u305f\u3002<\/p>\n
\"\"<\/p>\n
\u3067\u306f\u3067\u306f\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u4ee4\u548c\u5143\u5e74\u306e\u30b4\u30fc\u30eb\u30c7\u30f3\u30a6\u30a3\u30fc\u30af\u306f\u6052\u4f8b\u306e\u300c\u3082\u306e\u3065\u304f\u308a\u4e00\u4eba\u65c5\u300d\u306b\u884c\u3063\u3066\u304d\u305f\u3002 \u4eca\u5e74\u306f\u5cf6\u6839\u770c\u306e\u96a0\u5c90\u8af8\u5cf6\uff08\u6d77\u58eb\u753a\u3068\u304b\uff09\u3092\u306e\u3093\u3073\u308a\u65c5\u3057\u306a\u304c\u3089\u3001\u30e9\u30ba\u30d1\u30a4\u3068\u30bb\u30f3\u30b5\u30fc\u3092\u4f7f\u3063\u3066\u3046\u3061\u306e\u4f1a\u793e\u3067\u4f7f\u3046\u300c\u4f1a\u8b70\u5ba4\u306e\u7a7a\u5ba4\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u300d\u3092\u4f5c\u3063\u3066\u304d\u305f\u306e\u3067\u4f5c\u308a…<\/p>\n","protected":false},"author":1,"featured_media":1426,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[8,7],"tags":[],"class_list":["post-1418","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gijyutu","category-ryokou"],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/bravesoft.co.jp\/seblog\/wp-content\/uploads\/2019\/05\/main_oki.png?fit=1320%2C966&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7fAdy-mS","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/bravesoft.co.jp\/seblog\/wp-json\/wp\/v2\/posts\/1418"}],"collection":[{"href":"https:\/\/bravesoft.co.jp\/seblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bravesoft.co.jp\/seblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bravesoft.co.jp\/seblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bravesoft.co.jp\/seblog\/wp-json\/wp\/v2\/comments?post=1418"}],"version-history":[{"count":115,"href":"https:\/\/bravesoft.co.jp\/seblog\/wp-json\/wp\/v2\/posts\/1418\/revisions"}],"predecessor-version":[{"id":2325,"href":"https:\/\/bravesoft.co.jp\/seblog\/wp-json\/wp\/v2\/posts\/1418\/revisions\/2325"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bravesoft.co.jp\/seblog\/wp-json\/wp\/v2\/media\/1426"}],"wp:attachment":[{"href":"https:\/\/bravesoft.co.jp\/seblog\/wp-json\/wp\/v2\/media?parent=1418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bravesoft.co.jp\/seblog\/wp-json\/wp\/v2\/categories?post=1418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bravesoft.co.jp\/seblog\/wp-json\/wp\/v2\/tags?post=1418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}