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

今回の目的 ～大好きなわが子が喜ぶBotを作りたい！～

ひらがなに興味を持ち、読むのが楽しいわが家の息子。
先日LINEBotを学習したので、子どもが楽しめるツールを作れないか？と思い立ちました。
"ひらがな化API"という面白そうなものを見つけ、LINEBotを作ったので、ご紹介します。

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

完成品（給食メニュー変換Bot）

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

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

LINEbotが完成！
ひらがなが読めるようになった息子のために、変換botを作りました😁
大好きなピカチュウに会える仕掛けつき。喜んでくれるかなぁ？

#子ども #LINEBot #ポケモン #プログラミング初心者 pic.twitter.com/ajVBVaJ4mp

— くるみ (@Kokano23) May 9, 2021

作り方

以下の手順で準備をしていきます。

①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を埋め込む方法