文字起こしバリバリBadBadKun

感謝の正拳突き

今回、大学の後輩でいつもお世話になっている兵頭氏を弊社開発合宿にお招きし、「文字起こしばりぐっどくん」の作り方を教わった。

気になる人はハンズオン記事が上がっているので是非ともチャレンジして欲しい。 https://zenn.dev/hyodoblog/books/2ef059130bcfbc

ハンズオンでは終わらない

今回は上記記事の内容を実装した上で、追加機能を開発合宿中に実装したので、その内容について触れていく。

1. Hack'zステッカーを読み取る時だけ違うことをしたい

画像から文字起こししているところに着目して、Hack'zステッカーから「Hack'z」という文字を読み取れるのではないかと考えた。

余裕で行けた。

あれ、「Hack'z」じゃなくて「Hackz」だ。

何回か試したところ、「Hack'z」と読み取られる時もあるようだ。

ということで、どちらで読み取っても動作するように正規表現を使ってみた。

image.ts
import { MessageEvent } from '@line/bot-sdk'
import { gcloudVision } from '~/utils/gcloud'
import { getMessageContent, lineClient, makeReplyMessage } from '~/utils/line'
import { errorLogger } from '~/utils/util'
import { msgNotText } from '~line/notice-messages/other'
import { hackzMessage } from '~line/notice-messages/hackzMessage'

// 正規表現テキストを宣言
const isHackByText = (text: string): boolean => {
  const regex = /Hack'?z/
  return regex.test(text)
}

export const messageImageHandler = async (event: MessageEvent): Promise<void> => {
  try {
    const { id: messageId } = event.message

    const buffer = await getMessageContent(messageId)
    let text = await gcloudVision(buffer)

    if (text === null) {
      await lineClient.replyMessage(event.replyToken, msgNotText)
    // こちらを追加。正規表現テキストを読み取った時に「hackzMessage」を返す
    } else if (isHackByText(text)) {
      await lineClient.replyMessage(event.replyToken, hackzMessage)
    } else {
      text = text.substring(0, 5000)
      await lineClient.replyMessage(event.replyToken, makeReplyMessage(text))
    }
  } catch (err) {
    errorLogger(err)
    throw new Error('message image handler')
  }
}

これで特定のテキストメッセージが返せるようになった！ただなんか味気ないな・・・

2. テンプレートメッセージでオシャレに

せっかくなので、テンプレートメッセージを使って、いい感じのを返そうじゃないか。

hackzMessage.ts
import { TemplateMessage } from '@line/bot-sdk'

export const hackzMessage: TemplateMessage = {
  type: 'template',
  altText: 'This is a buttons template',
  template: {
    type: 'buttons',
    thumbnailImageUrl: 'https://hackz.team/ogp.jpg',
    imageAspectRatio: 'rectangle',
    imageSize: 'cover',
    imageBackgroundColor: '#FFFFFF',
    title: "Hack'z Infomation!",
    text: 'ハックツの各種情報をチェックしてみてね！',
    actions: [
      {
        type: 'uri',
        label: 'イベントページ',
        uri: 'https://hackz-community.doorkeeper.jp/'
      },
      {
        type: 'uri',
        label: '公式Twitter',
        uri: 'https://twitter.com/Hackz_team'
      },
      {
        type: 'uri',
        label: 'コーポレートページ',
        uri: 'https://hackz.team/'
      }
    ]
  }
}