NowLoading...

文字起こしバリバリBadBadKun

https://lin.ee/xXHEEoP
TypeScript

TypeScript

Node.js

Node.js

Firestore

Firestore

Firebase

Firebase

画像から文字起こし+「Hack'z」の文字を読み取ると・・・

ユーザーアイコン

どりー_ハックツ

MacBook
サムネイル

推しアイデア

- Hack'zステッカーを読み取った場合のみ別アクションを起こすようにした。 - せっかくなので表示するコンテンツをボタンテンプレートに

作った背景

せっかくみんなに渡したHack'zステッカーにTechを盛り込みたくて!! 是非これを使って周りの人にハックツを紹介してね!

推し技術

「Hack'z」がたまに「Hackz」と読み取られる場合があったので、正規表現を使ってどちらも認識できるようにした。

プロジェクト詳細

感謝の正拳突き

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

気になる人はハンズオン記事が上がっているので是非ともチャレンジして欲しい。 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/' } ] } }

こんな感じにしてみた。

実際に読み取ってみると・・・ いい感じ!

もちろんみんな触ってみるよね?

こちらから友達登録して、Hack'zステッカーやHack'zの文字が入った画像を送りつけてみて。

ダメ押しにもう一本

遊び心で文字が入っていない画像を送ったり、テキストを送ったりするメッセージを変更している。

どんなメッセージかは自らの目で確認してくれ!!!

どりー_ハックツ

どりー_ハックツ

@dvw6yg44475t5bd1