140
88

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 3 years have passed since last update.

「ひらがな化API」を使って、給食メニュー変換Botを作ったら、わが子に大好評だった話

Last updated at Posted at 2021-05-09

##今回の目的 ~大好きなわが子が喜ぶBotを作りたい!~
ひらがなに興味を持ち、読むのが楽しいわが家の息子。
先日LINEBotを学習したので、子どもが楽しめるツールを作れないか?と思い立ちました。
"ひらがな化API"という面白そうなものを見つけ、LINEBotを作ったので、ご紹介します。

Javascript初心者(学び始めて数週間。コードに大苦戦中)ですが、同じような初心者の方にも参考になれば幸いです。

##完成品(給食メニュー変換Bot)
まずは、完成品のキャプチャーです。
わが家の息子は、慎重派タイプで、保育園の給食メニューがとても気になる様子。毎日のように、**「明日の給食メニューは何?」**と聞かれるのが日課なので、何かできないか?と考えました。
(メニューは保育園から電子提供されますが、漢字が分からない息子には読めないんです・・・)

そこで!
メニューをテキストに貼り付けて送信するだけで、ひらがな変換してくれるBotを作ったら、子どもに大好評でした。
勝手ながら、「給食メニュー変換Bot」(別名:ピカチュウBot)と名付けます!
事前に楽しくメニューを確認できるので、安心して登園してくれそうです。
"息子に楽しんでもらうこと"が目的なので、ひと工夫として、「リッチメニュー」を使って息子が大好きなピカチュウに話しかける設定にしました。(ピカチュウの画像は、pokeAPIから取得。)
リッチメニューの作成は、こちらの記事が分かりやすかったので参考にしました。

##作り方
以下の手順で準備をしていきます。
###①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を埋め込む方法

140
88
1

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
140
88

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?