--- title: [LINE BOT]今日の日焼け止めクリームを教えてくれるLINE BOTを作った tags: protooutStudio linebot LIFF Node.js obniz author: zerozeronineking slide: false --- #目次 + はじめに + 「日焼け止めクリーム推薦BOT」の概念図 + 実際に作ってみた + LIFFの設定 + 感想と反省点 + 参考にしたサイト、記事 #はじめに ※QRコードについては、[この記事](https://qiita.com/zerozeronineking/items/ee85baab0df731992606)を参照されたし。 夏も本格的になってきた今日この頃、とにかく日々が暑すぎる。もはや、熱いとも言えるだろう。 こういう日は、筋トレをする気力すら失せてしまう。とはいえ、ジムがあるので、筋トレする環境には事欠かない。あとは失せた気力を回復させるだけだ。 こういう時は、気晴らしに耽る事が一番だ。そこで、私は工作にでも勤しもうと思い至り、ネットサーフィンをしてネタを探した。 そうしていると、紫外線で色が変わるビーズなるものがあるという記事を発見した。それを見ると、バングルにして外でも紫外線の強さを調べられるという。 これは面白い!バングルにできるということは、家族で工作を楽しむネタになりそうだし、ジムに着用していっても違和感がない。 こうして、試行錯誤の結果創り上げたのが「日焼け止めクリーム推薦BOT」だ。 #「日焼け止めクリーム推薦BOT」の概念図 fc861c3257b17e3f957fb2b18abbffbc.png #実際に作ってみた まず、[UVチェックビーズ](https://www.amazon.co.jp/ROSENICE-%E3%83%97%E3%83%A9%E3%82%B9%E3%83%81%E3%83%83%E3%82%AFUV%E3%83%93%E3%83%BC%E3%82%BA%E3%82%AF%E3%83%AA%E3%82%A2%E3%83%93%E3%83%BC%E3%82%BA%E3%81%AE%E8%89%B2%E9%AD%94%E6%B3%95%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E5%A4%89%E5%8C%96%E3%81%99%E3%82%8BUV%E5%8F%8D%E5%BF%9C%E6%80%A7%E3%83%9D%E3%83%8B%E3%83%BC%E3%83%93%E3%83%BC%E3%82%BA%E3%83%A9%E3%82%A4%E3%83%88%E3%82%B8%E3%83%A5%E3%82%A8%E3%83%AA%E3%83%BC1000%E3%83%94%E3%83%BC%E3%82%B9%E3%82%92%E4%BD%9C%E3%82%8B/dp/B075K9FC8P/ref=pd_lpo_sbs_21_t_0?_encoding=UTF8&psc=1&refRID=9HYM26ASMFDQXY9BP8HX)を用いてバングルを作る。不格好だが、気にしない。 なお、ビーズは200個くらいあって1500円ほど。ゴムテグスは100均ショップなどで買いましょう。意外と安い。 ![DSC_0002.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341829/8d96742b-f17e-3873-5491-472b0e427c52.jpeg) 次に、LINE BOTを作る。 ●開発環境 Node.js v10.16.0 npm v6.9.0 Windows10 pro ●使用機材 [Obniz](https://obniz.io/ja/products) [温湿度、気圧センサーBME280](https://www.switch-science.com/catalog/2236/) [ブレッドボード](http://akizukidenshi.com/catalog/g/gP-05155/) [ピンヘッダ](http://akizukidenshi.com/catalog/g/gC-00167/) ●コード ```javascript:temperatureResearch.js 'use strict'; // パッケージ宣言用定数 const express = require('express'); const line = require('@line/bot-sdk'); // LINE BOT 用定数 const PORT = process.env.PORT || 3000; const config = { channelSecret: 'yourChannelSecretToken', channelAccessToken: 'yourAccessToken' }; // Obniz用定数 const Obniz = require('obniz'); const obniz = new Obniz("yourObnizNumber"); var nowTemp const app = express(); obniz.onconnect = async function () { obniz.display.clear(); const bme280 = obniz.wired("BME280", { vio: 0, vcore: 1, gnd: 2, csb: 3, sdi: 4, sck: 5, sdo: 6 }); await bme280.applyCalibration(); const bme280Result = await bme280.getAllWait(); nowTemp = bme280Result.temperature; obniz.display.clear(); obniz.display.print('temp: ' + bme280Result.temperature + ' degree'); } app.get('/', (req, res) => res.send('Hello LINE BOT!(GET)')); //ブラウザ確認用(無くても問題ない) app.post('/webhook', line.middleware(config), (req, res) => { console.log(req.body.events); Promise .all(req.body.events.map(handleEvent)) .then((result) => res.json(result)); }); const client = new line.Client(config); function handleEvent(event) { return client.replyMessage(event.replyToken, [{ type: "text", text: "今の気温は" + nowTemp + "℃だ!" }]); } app.listen(PORT); console.log(`Server running at ${PORT}`); ``` そしてLIFF用のウェブサイトを作る。 LIFFでホストする静的サイトを作ればいいので、[GitHub Pagesでサイトを作れば](https://qiita.com/ririli/items/0e06b21cb709beae4514)楽。 ```html:index.html

日焼け止めクリーム!


ビーズの色


基本これでいい
``` これで、LIFFの準備は整った。 #LIFFの設定 ●LIFFってなんだ…? LINE内で動作するウェブアプリのプラットフォーム。LINE BOTで任意のウェブサイトを表示したり、そこから画像やデータをとってこれたり、送信できたりする。 ●LINE BOTでLIFFを使うと? ①line://app/... というURLを入力する ②下からニュッとウェブサイトが出てくる 以下画像の様に設定する。 エンドポイントに、GitHub Pagesで設定したサイトのURLを張る。 すると、LIFFのURLが発行されるので、それをLINE BOTに張り付ける。 それで、LINE BOTに自作のウェブサイトを表示できる。 なお、下記GitHubとLIFFのURLは、公開用なので、常識の範囲内でご活用されたし。 LIFF設定.png #感想と反省点 LIFFを作るのは楽しい!これが一番の感想だ。 自分でカスタマイズしたウェブサイトを使えるのはいい。今回は単純な機能の実装だったが、次回以降はLIFF APIを活用してLINE BOTに干渉させたりしたい。ビーズでバングルを作るのも、何気に楽しい。家族との会話が生まれる切っ掛けになるかもしれない。 反省点として、カラーセンサーを使いたかったが、値を取得できなくて断念した。 Obnizに[カラーセンサー](https://www.switch-science.com/catalog/3338/)を繋げたが、何故か色を測定できなかった。Obnizが対応していないわけがないと思うが、原因が分からない。。。そこで、[別のカラーセンサー](http://akizukidenshi.com/catalog/g/gK-08316/)を試したが、はんだ付けが甘かったようで、これも色を測定できなかった。 色がだめなら、直接UVを測定しよう。そう思い、[UVセンサー](https://www.switch-science.com/catalog/5339/)を試したが、結局ダメ。 Obnizだけでなく、m5stackやArduinoも使っていくべきなのだろうか。試行錯誤の余地がまだまだある。 次は、色を測定できるようにして、外でも気軽にUVチェックして日焼け止めクリームの指標を教えてくれるLINE BOTを作りたい。 #参考にしたサイト、記事 ●[LIFFについて](https://qiita.com/teramotodaiki/items/a8955840aa23ec68e6fe)