##今回の目的 ~大好きなわが子が喜ぶBotを作りたい!~
ひらがなに興味を持ち、読むのが楽しいわが家の息子。
先日LINEBotを学習したので、子どもが楽しめるツールを作れないか?と思い立ちました。
"ひらがな化API"という面白そうなものを見つけ、LINEBotを作ったので、ご紹介します。
Javascript初心者(学び始めて数週間。コードに大苦戦中)ですが、同じような初心者の方にも参考になれば幸いです。
##完成品(給食メニュー変換Bot)
まずは、完成品のキャプチャーです。
わが家の息子は、慎重派タイプで、保育園の給食メニューがとても気になる様子。毎日のように、**「明日の給食メニューは何?」**と聞かれるのが日課なので、何かできないか?と考えました。
(メニューは保育園から電子提供されますが、漢字が分からない息子には読めないんです・・・)
そこで!
メニューをテキストに貼り付けて送信するだけで、ひらがな変換してくれるBotを作ったら、子どもに大好評でした。
勝手ながら、「給食メニュー変換Bot」(別名:ピカチュウBot)と名付けます!
事前に楽しくメニューを確認できるので、安心して登園してくれそうです。
"息子に楽しんでもらうこと"が目的なので、ひと工夫として、「リッチメニュー」を使って息子が大好きなピカチュウに話しかける設定にしました。(ピカチュウの画像は、pokeAPIから取得。)
リッチメニューの作成は、こちらの記事が分かりやすかったので参考にしました。
LINEbotが完成!
— くるみ (@Kokano23) May 9, 2021
ひらがなが読めるようになった息子のために、変換botを作りました😁
大好きなピカチュウに会える仕掛けつき。喜んでくれるかなぁ?
#子ども #LINEBot #ポケモン #プログラミング初心者 pic.twitter.com/ajVBVaJ4mp
##作り方
以下の手順で準備をしていきます。
###①Botアカウント等を作成します
以下の記事を参考にしました。
分かりやすくまとめられているので、初心者にも大変参考になりました。
1時間でLINE BOTを作るハンズオン (資料+レポート) in Node学園祭2017 #nodefest
###②アプリケーションID(gooラボAPI)を取得します
今回は、gooラボによる「ひらがな化API」を利用しました。
利用にあたっては、アプリケーションIDの取得が必要となるため、サイトに従って事前に設定しました。
###③APIを取得します
こちら、コードに不慣れな初心者にとっては大変苦戦した部分です。
前回の記事では"get"を使ってAPIを取得しており、今回も同様にトライするもエラー発生。
なかなか原因に気づけずにいましたが、API仕様をよく読むと、"post"にて受け付けると記載がありました。(仕様確認は基本ですね・・・)
プログラミング用語(get/post)については、改めて以下の記事で勉強しました。
プログラミングでよく使う英単語のまとめ【随時更新】
// axiosでひらがな化APIを叩きます(少し時間がかかる・ブロッキングする)
const res = await axios.post('https://labs.goo.ne.jp/api/hiragana',{app_id:'[自身のアプリケーションID]',sentence:event.message.text,output_type:'hiragana'});
//変換後の文字列を格納
pushText = res.data.converted;
##ソースコード
全体のソースコードは、以下のとおりです。
'use strict';
// ########################################
// 初期設定など
// ########################################
// パッケージを使用します
const express = require('express');
const line = require('@line/bot-sdk');
const axios = require('axios');
// ローカル(自分のPC)でサーバーを公開するときのポート番号です
const PORT = process.env.PORT || 3000;
// Messaging APIで利用するクレデンシャル(秘匿情報)です。
const config = {
channelSecret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx', //作成したBOTのチャンネルシークレット
channelAccessToken: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
//作成したBOTのチャンネルアクセストークン
};
// ########## ▼▼▼ メイン関数 ▼▼▼ ##########
const sampleFunction = async (event) => {
// 「リプライ」を使って先に返事しておきます
await client.replyMessage(event.replyToken, {
type: 'text',
text: 'ちょっとまってね'
});
let pushText = '';
try {
// axiosでひらがな化APIを叩きます(少し時間がかかる・ブロッキングする)
const res = await axios.post('https://labs.goo.ne.jp/api/hiragana',{app_id:'[自身のアプリケーションID]',sentence:event.message.text,output_type:'hiragana'});
//変換後の文字列を格納
pushText = res.data.converted;
} catch (error) {
pushText = 'エラーです。ごめんね';
// APIからエラーが返ってきたらターミナルに表示する
console.error(error);
}
// 「プッシュ」で後からユーザーに通知します
return client.pushMessage(event.source.userId, {
type: 'text',
text: pushText,
});
};
// ########## ▲▲▲ メイン関数 ▲▲▲ ##########
// ########################################
// LINEサーバーからのWebhookデータを処理する部分
// ########################################
// LINE SDKを初期化します
const client = new line.Client(config);
// LINEサーバーからWebhookがあると「サーバー部分」から以下の "handleEvent" という関数が呼び出されます
async function handleEvent(event) {
// 受信したWebhookが「テキストメッセージ以外」であればnullを返すことで無視します
if (event.type !== 'message' || event.message.type !== 'text') {
return Promise.resolve(null);
}
// サンプル関数を実行します
return sampleFunction(event);
}
// ########################################
// Expressによるサーバー部分
// ########################################
// expressを初期化します
const app = express();
// HTTP POSTによって '/webhook' のパスにアクセスがあったら、POSTされた内容に応じて様々な処理をします
app.post('/webhook', line.middleware(config), (req, res) => {
// 検証ボタンをクリックしたときに飛んできたWebhookを受信したときのみ以下のif文内を実行
if (req.body.events.length === 0) {
res.send('Hello LINE BOT! (HTTP POST)'); // LINEサーバーに返答します(なくてもよい)
console.log('検証イベントを受信しました!'); // ターミナルに表示します
return; // これより下は実行されません
} else {
// 通常のメッセージなど … Webhookの中身を確認用にターミナルに表示します
console.log('受信しました:', req.body.events);
}
// あらかじめ宣言しておいた "handleEvent" 関数にWebhookの中身を渡して処理してもらい、
// 関数から戻ってきたデータをそのままLINEサーバーに「レスポンス」として返します
Promise.all(req.body.events.map(handleEvent)).then((result) => res.json(result));
});
// 最初に決めたポート番号でサーバーをPC内だけに公開します
// (環境によってはローカルネットワーク内にも公開されます)
app.listen(PORT);
console.log(`ポート${PORT}番でExpressサーバーを実行中です…`);
##まとめ
- 「ひらがな化API」は、リクエストされた文字列を"カタカナ変換"することも可能です。読みやすいように自動でスペースも入れてくれるので、大変便利。
- 今回は息子のために"給食メニュー変換"をテーマにしましたが、API自体はどんな文字列でもひらがな変換可能です。
- Botを動かすところも息子に見せたところ、「へ~、ママどうやって作ったの?すごいね」と褒められ、テンションが上がりました!(まだまだ未熟ですが、褒められると頑張っちゃうタイプです)
- 子どもに小さい頃からプログラミングに興味を持ってもらう、という副次的な効果も生まれる予感です!
- 今回のLINEBotを作る過程で、画像を返してくれるBotや、条件分岐で作ってみたいアイデアも出てきたので、次回取り組んでみたいと思います。
##参考
今回は、以下の記事を参考にさせていただきました。
▶1時間でLINE BOTを作るハンズオン (資料+レポート) in Node学園祭2017 #nodefest
▶プログラミングでよく使う英単語のまとめ【随時更新】
▶【完成!!】LineBotのUIを整える~テレ〇限定・今日のドラマ再放送は何やるの?LineBotを作ろうと思う
▶Qiitaにtwitterを埋め込む方法