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

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

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

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

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">LINEbotが完成！<br>ひらがなが読めるようになった息子のために、変換botを作りました😁<br>大好きなピカチュウに会える仕掛けつき。喜んでくれるかなぁ？<br><br> <a href="https://twitter.com/hashtag/%E5%AD%90%E3%81%A9%E3%82%82?src=hash&amp;ref_src=twsrc%5Etfw">#子ども</a> <a href="https://twitter.com/hashtag/LINEBot?src=hash&amp;ref_src=twsrc%5Etfw">#LINEBot</a> <a href="https://twitter.com/hashtag/%E3%83%9D%E3%82%B1%E3%83%A2%E3%83%B3?src=hash&amp;ref_src=twsrc%5Etfw">#ポケモン</a> <a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%88%9D%E5%BF%83%E8%80%85?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング初心者</a> <a href="https://t.co/ajVBVaJ4mp">pic.twitter.com/ajVBVaJ4mp</a></p>&mdash; くるみ (@Kokano23) <a href="https://twitter.com/Kokano23/status/1391203583597551620?ref_src=twsrc%5Etfw">May 9, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


##作り方
以下の手順で準備をしていきます。
###①Botアカウント等を作成します
以下の記事を参考にしました。
分かりやすくまとめられているので、初心者にも大変参考になりました。
[1時間でLINE BOTを作るハンズオン (資料+レポート) in Node学園祭2017 #nodefest](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d)

###②アプリケーションID（gooラボAPI）を取得します
今回は、gooラボによる「[ひらがな化API](https://labs.goo.ne.jp/api/jp/hiragana-translation/)」を利用しました。
利用にあたっては、アプリケーションIDの取得が必要となるため、[サイト](https://labs.goo.ne.jp/apiusage/)に従って事前に設定しました。

###③APIを取得します
こちら、コードに不慣れな初心者にとっては大変苦戦した部分です。
[前回の記事](https://qiita.com/kokano23/items/9f4f54dc484451ce35eb)では"get"を使ってAPIを取得しており、今回も同様にトライするもエラー発生。
なかなか原因に気づけずにいましたが、[API仕様](https://labs.goo.ne.jp/api/jp/hiragana-translation/)をよく読むと、"post"にて受け付けると記載がありました。（仕様確認は基本ですね・・・）
プログラミング用語（get/post）については、改めて以下の記事で勉強しました。
[プログラミングでよく使う英単語のまとめ【随時更新】](https://qiita.com/Ted-HM/items/7dde25dcffae4cdc7923)

```javascript
// 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; 
```

##ソースコード
全体のソースコードは、以下のとおりです。

```javascript
'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](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d)
▶[プログラミングでよく使う英単語のまとめ【随時更新】](https://qiita.com/Ted-HM/items/7dde25dcffae4cdc7923)
▶[【完成！！】LineBotのUIを整える～テレ〇限定・今日のドラマ再放送は何やるの？LineBotを作ろうと思う](https://qiita.com/grayhamchan/items/1246c1cf32d5485552e2)
▶[Qiitaにtwitterを埋め込む方法](https://qiita.com/yuta-38/items/5704c659727ec83356ff)