Go to Qiita Advent Calendar 2024 Top
LoginSignup
22
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@zerozeronineking(Mao Kumagai)inプロトアウトスタジオ

[LINE BOT]今日の日焼け止めクリームを教えてくれるLINE BOTを作った

Last updated at Posted at 2019-08-17

#目次

  • はじめに
  • 「日焼け止めクリーム推薦BOT」の概念図
  • 実際に作ってみた
  • LIFFの設定
  • 感想と反省点
  • 参考にしたサイト、記事

#はじめに

※QRコードについては、この記事を参照されたし。

夏も本格的になってきた今日この頃、とにかく日々が暑すぎる。もはや、熱いとも言えるだろう。
こういう日は、筋トレをする気力すら失せてしまう。とはいえ、ジムがあるので、筋トレする環境には事欠かない。あとは失せた気力を回復させるだけだ。

こういう時は、気晴らしに耽る事が一番だ。そこで、私は工作にでも勤しもうと思い至り、ネットサーフィンをしてネタを探した。
そうしていると、紫外線で色が変わるビーズなるものがあるという記事を発見した。それを見ると、バングルにして外でも紫外線の強さを調べられるという。
これは面白い！バングルにできるということは、家族で工作を楽しむネタになりそうだし、ジムに着用していっても違和感がない。

こうして、試行錯誤の結果創り上げたのが「日焼け止めクリーム推薦BOT」だ。

#「日焼け止めクリーム推薦BOT」の概念図
fc861c3257b17e3f957fb2b18abbffbc.png

#実際に作ってみた
まず、UVチェックビーズを用いてバングルを作る。不格好だが、気にしない。
なお、ビーズは200個くらいあって1500円ほど。ゴムテグスは100均ショップなどで買いましょう。意外と安い。
DSC_0002.JPG

次に、LINE BOTを作る。

●開発環境
Node.js v10.16.0
npm v6.9.0
Windows10 pro

●使用機材
Obniz
温湿度、気圧センサーBME280
ブレッドボード
ピンヘッダ

●コード

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でサイトを作れば楽。

index.html
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style type="text/css">
        h1 {
            text-align: center;
        }

        hr {
            size: 5;
            color: #000000;
        }

        th {
            padding: 5% 5%;
            width: 50%;
            color: black;
            font-size: 100%;
        }

        button {
            box-shadow: 0 4pt 8pt 0 rgba(0, 0, 0, 0.2), 0 3pt 10pt 0 rgba(0, 0, 0, 0.19);
            color: #f8f9fa;
            /* Light */
            background-color: #e30e2a;
            /* Tranig-End Red */
            width: 190pt;
            font-weight: bold;
            height: 40pt;
            border: 2pt solid black;
            border-radius: 8pt;
        }

        .wrapper {
            text-align: center;
        }

        a {
            display: block;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript">

        function onButtonClick()
        {
            let uvValue = document.getElementById("uvIndex").value;
            let sendMessage = "";

            switch (uvValue)
            {
                case "白":
                    sendMessage = "そこまで紫外線が強くないので、日焼け止めクリームはこれがいいぞ！";
                    document.getElementById("linkArea").href = "https://www.nivea.co.jp/products/protectwatergel-49013012987440052.html";
                    document.cream.src = "../yourFolder/日焼け止めクリーム普段用.jpg";
                    ddocument.getElementById("message").innerHTML = sendMessage;
                    break;
                case "薄いピンク":
                    sendMessage =
                        "紫外線がそこそこ強い。SPF30程度のクリームを塗ろう！";
                    document.getElementById("linkArea").href = "https://www.muji.net/store/list/?selectedAllList=%E6%97%A5%E7%84%BC%E3%81%91%E6%AD%A2%E3%82%81&selectedFreeWordList=%E6%97%A5%E7%84%BC%E3%81%91%E6%AD%A2%E3%82%81&sectionCd=";
                    document.cream.src = "../yourFolder/日焼け止めクリームSPF30+.jpg";
                    document.getElementById("message").innerHTML = sendMessage;
                    break;
                case "ピンク":
                    sendMessage =
                        "今日は紫外線が強い。きちんと2時間おきに塗りなおそう！ SPF50+のクリームがいいぞ！";
                    document.getElementById("linkArea").href = "https://www.amazon.co.jp/%E3%82%A2%E3%83%8D%E3%83%83%E3%82%B5-%E3%83%91%E3%83%BC%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88UV-%E3%82%B9%E3%82%AD%E3%83%B3%E3%82%B1%E3%82%A2%E3%83%9F%E3%83%AB%E3%82%AF-SPF50-60mL/dp/B0792L2PQT/ref=sr_1_5?hvadid=355110926571&hvdev=c&jp-ad-ap=0&keywords=%E8%B3%87%E7%94%9F%E5%A0%82+%E3%82%A2%E3%83%8D%E3%83%83%E3%82%B5+%E6%97%A5%E7%84%BC%E3%81%91%E6%AD%A2%E3%82%81&qid=1566052812&s=gateway&sr=8-5";
                    document.cream.src = "../yourFolder/日焼け止めクリームSPF50+.jpg";
                    document.getElementById("message").innerHTML = sendMessage;
                    break;
                case "濃いピンク":
                    sendMessage =
                        "非常に紫外線が強いぞ！絶対に日焼け止めクリームを塗ろう！"
                    document.getElementById("linkArea").href = "https://www.amazon.co.jp/%E3%82%A2%E3%83%8D%E3%83%83%E3%82%B5-%E3%83%91%E3%83%BC%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88UV-%E3%82%B9%E3%82%AD%E3%83%B3%E3%82%B1%E3%82%A2%E3%83%9F%E3%83%AB%E3%82%AF-SPF50-60mL/dp/B0792L2PQT/ref=sr_1_5?hvadid=355110926571&hvdev=c&jp-ad-ap=0&keywords=%E8%B3%87%E7%94%9F%E5%A0%82+%E3%82%A2%E3%83%8D%E3%83%83%E3%82%B5+%E6%97%A5%E7%84%BC%E3%81%91%E6%AD%A2%E3%82%81&qid=1566052812&s=gateway&sr=8-5";
                    document.cream.src = "../yourFolder/日焼け止めクリームSPF50+.jpg";
                    document.getElementById("message").innerHTML = sendMessage;
                    break;
                case "よくわからない色":
                    sendMessage = "もう一度よく見てみよう！";
                    alert(sendMessage)
                    break;
                default:
                    sendMessage = "どんなピンクなのかを教えてくれ！";
                    alert(sendMessage)
                    break;
            }
        };

    </script>
</head>

<body>
    <h1>日焼け止めクリーム！</h1>
    <hr />
    <table align="center">
        <tr>
            <th>ビーズの色</th>
            <td>
                <select name="uvIndexValue" id="uvIndex">
                    <option value="白">白</option>
                    <option value="薄いピンク">薄いピンク</option>
                    <option value="ピンク">ピンク</option>
                    <option value="濃いピンク">濃いピンク</option>
                    <option value="よくわからない色">よくわからない色</option>
                </select>
            </td>
        </tr>
    </table>
    <hr />
    <div class="wrapper">
        <button id="recommendedSunoil" onclick="onButtonClick();">おススメの日焼け止めクリームは？</button>
    </div>
    <hr />
    <div id="message" class="wrapper">基本これでいい</div>
    <a href="https://www.nivea.co.jp/products/protectwatergel-49013012987440052.html" id="linkArea" class="wrapper">
        <img name="cream" src="../yourFolder/日焼け止めクリーム普段用.jpg">
    </a>
</body>

</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にカラーセンサーを繋げたが、何故か色を測定できなかった。Obnizが対応していないわけがないと思うが、原因が分からない。。。そこで、別のカラーセンサーを試したが、はんだ付けが甘かったようで、これも色を測定できなかった。
色がだめなら、直接UVを測定しよう。そう思い、UVセンサーを試したが、結局ダメ。
Obnizだけでなく、m5stackやArduinoも使っていくべきなのだろうか。試行錯誤の余地がまだまだある。

次は、色を測定できるようにして、外でも気軽にUVチェックして日焼け止めクリームの指標を教えてくれるLINE BOTを作りたい。

#参考にしたサイト、記事
●LIFFについて

22
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
22
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?