Tesseract.jsとReactでOCRコミュニケーションアプリを作る（後編）

読む所要時間: 1分未満

October 30, 2021
執筆者
Stephenie Minami Nakajima
Twilion
レビュー担当者
Mitsuharu Nakamura
Twilion
Aya Shiomi
Twilion

Tesseract.jsとReactでOCRコミュニケーションアプリを作る（後編）

本稿は前編と後編に分かれており、前編ではプロジェクトのセットアップからフロントエンドの構築までを、後編ではバックエンド側の構築と動作検証についてご紹介いたします。
前編はこちら：Tesseract.jsとReactでOCRコミュニケーションアプリを作る（前編）

前編では、以下のOCRコミュニケーションアプリケーションのフロントエンドを構築しました。続いて、バックエンドを構築しましょう。

アプリ完成イメージ


バックエンドを構築する

次に、バックエンドを構築します。

プロジェクトのルートディレクトリに.envとserver.jsファイルを作成してください。

まずは、Twilioの認証情報を.envファイルに格納します。

テキストエディタで.envファイルを開き、以下のコードをペーストしてください。

TWILIO_ACCOUNT_SID=XXXXX
TWILIO_AUTH_TOKEN=XXXXX
TWILIO_PHONE_NUMBER=XXXXX

XXXXXの文字列は、Twilioの認証情報のプレースホールダーを表しています。

TWILIO_ACCOUNT_SIDとTWILIO_AUTH_TOKENは、Twilio ConsoleからAccount SIDとAuth Tokenを取得し、XXXXXにペーストしてください。Account SIDとAuth Tokenの取得方法について詳しくは、ヘルプセンターの「Account SIDとAuthTokenの確認方法」を参照してください。

TWILIO_PHONE_NUMBERは、Twilioから取得した電話番号をE.164形式でXXXXXにペーストしてください。

ファイルを保存してください。

次に、Node.jsサーバーを作成します。プロジェクトのルートディレクトリにserver.jsファイルを作成してください。

テキストエディタでserver.jsを開き、以下のコードをペーストしてください。

require("dotenv").config()

const express = require("express")
const app = express()
const port = 5000

app.use(express.json())

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

このコードでは、dotenvとexpressライブラリをインポートし、Expressをインスタンス化します。

サーバーのポートを5000に設定します。

本稿では、create-react-appをローカル環境で使用しているため、http://localhost:3000/をすでに使用しています。このため、3000以外のポートを指定します。

ローカル環境で開発しているSPA（シングルページアプリケーション）で、フロントエンドからバックエンドのAPIサーバーにリクエストを送ると、同一オリジンポリシーに違反し、サーバーにアクセスできないことがあります。

本稿では、http://localhost:3000/をフロントエンドに、http://localhost:5000/をNode.jsサーバーに使用するため、同一オリジンポリシーの問題が生じます。

これを防ぐため、package.jsonにproxyを追加します。

package.jsonをテキストエディタで開いてください。以下のコードをファイルに追加してください。

"proxy": "http://localhost:5000",

ファイルを保存してください。
これにより、http://localhost:3000/に対するリクエストで、Acceptヘッダーがtext/html以外のリクエストがすべてhttp://localhost:5000/にプロキシされます。

次に、Twilioの認証情報を環境変数から取得します。server.jsを再度テキストエディタで開いてください。
app.useのブロックと、app.listenのブロックの間に、以下のコードをペーストしてください。

// Twilioの認証情報
const accountSid = process.env.TWILIO_ACCOUNT_SID
const authToken = process.env.TWILIO_AUTH_TOKEN
const fromPhoneNumber = process.env.TWILIO_PHONE_NUMBER
const client = require("twilio")(accountSid, authToken)

最後に、SMSを送信するためのエンドポイントを設定します。Twilioの認証情報のブロックの下に、以下のコードをペーストしてください。

// リクエストで受け取った電話番号とテキストをもとにSMSを送信する
app.post("/send-sms", (req, res) => {
  client.messages
    .create({body: req.body.text, from: fromPhoneNumber, to: req.body.to})
    .then(message => {
      res.json({ sid: message.sid })
    })
    .catch(() => res.sendStatus(500))
})

このコードでは、フロントエンドから/send-smsにHTTP POSTリクエストが送信されると、新しいTwilioクライアントインスタンスを作成します。このクライアントを使って、リクエストに含まれるtoプロパティに指定された電話番号宛てに、textプロパティに指定されたメッセージをSMSで送信します。

server.jsの全コードは、Githubリポジトリを参照してください。

これで、サーバー側の準備が完了しました。

アプリケーションの動作を確認する

完成したアプリケーションを実際に動かしてみましょう。

ターミナルのウィンドウを2つ開いてください。

1つ目のウィンドウで、アプリケーションのルートディレクトリから以下のコマンドを実行してください。

npm start

ブラウザでhttp://localhost:3000を開いてください。問題なく動作していると、以下のような画面が表示されます。

ファイル選択画面

次に、サーバー側とアプリケーション全体の動作を確認します。

2つ目のウィンドウで、アプリケーションのルートディレクトリから以下のコマンドを実行してください。

node server.js

ブラウザで、日本語の文字が含まれる画像を「Choose file」で選択してください。


Tesseract.jsは背景が白、文字が黒の画像を認識しやすい傾向があります。

本稿では、以下の画像を使用します。

サンプル画像

画像を選択すると、以下の画面に切り替わります。

OCR処理画面

[画像をOCR処理する]を選択してください。

ボタンの下に「OCR処理中...」ステータスが表示され、「OCR処理完了」に切り替わります。OCR処理で検知されたテキストが以下のように表示されます。

編集画面

SMSを送信する前にOCR処理されたテキストを編集したい場合、「検知されたテキストを編集」エディタから編集してください。

編集が完了したら、テキストをSMSとして送信したい電話番号を電話番号フィールドに入力します。

SMS送信先の電話番号が登録されている国を国旗アイコンから選択し、右側のフィールドに電話番号を国番号なしで入力します。

メッセージ送信画面

個人情報を本人の了承を得ずにSMSで送信することは危険です。「SMSメッセージを送信」をクリックする前に、必ずテキストに個人情報が含まれていないことを確認してください。

「SMSメッセージを送信」をクリックしてください。アプリケーション画面で「メッセージ送信中...」が表示され、送信処理に問題がなければ「メッセージ送信完了」に切り替わります。

メッセージ送信完了画面

指定した電話番号に、テキストが送信されます。

SMSテキスト

これで、動作確認ができました。

最後に

いかがでしたでしょうか？OCRの技術は日常のさまざまな場面で利用されています。Tesseract.jsを使えば、気軽にブラウザ上でOCR処理を行い、他の技術ツールと組み合わせたアプリケーションを開発できます。このチュートリアルをもとに、紙でしか存在しない資料をデジタル化してみてはいかがでしょうか。

Twilio Blogに投稿してみたい方や、フィードバック、登壇、勉強会のお誘いなどお気軽にsnakajima[at]twilio.comまでご連絡ください。開発中のプロジェクトに関してはGithub(smwilk)を覗いてみて下さい。

関連投稿

関連リソース

A newspaper article

Twilio Docs

APIからSDK、サンプルアプリまで

言語とプラットフォームの API リファレンス ドキュメント、SDK、ヘルパー ライブラリ、クイックスタート、チュートリアル。
An Open book

リソース・センター

最新の電子ブック、業界レポート、ウェビナー

顧客エンゲージメントの専門家から学び、自社のコミュニケーションを改善しましょう。
User group reactions

Ahoy

Twilio の開発者コミュニティ ハブ

コミュニケーションとデジタル エンゲージメント エクスペリエンスを構築するためのベスト プラクティス、コード サンプル、インスピレーション。