Friday, 29 October, 2021 UTC
Summary
本稿は前編と後編に分かれており、前編ではプロジェクトのセットアップからフロントエンドの構築までを、後編ではバックエンド側の構築と動作検証についてご紹介いたします。
前編はこちら: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/に対するリクエストで、
これにより、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処理で検知されたテキストが以下のように表示されます。
SMSを送信する前にOCR処理されたテキストを編集したい場合、「検知されたテキストを編集」エディタから編集してください。
編集が完了したら、テキストをSMSとして送信したい電話番号を電話番号フィールドに入力します。
SMS送信先の電話番号が登録されている国を国旗アイコンから選択し、右側のフィールドに電話番号を国番号なしで入力します。
個人情報を本人の了承を得ずにSMSで送信することは危険です。「SMSメッセージを送信」をクリックする前に、必ずテキストに個人情報が含まれていないことを確認してください。
「SMSメッセージを送信」をクリックしてください。アプリケーション画面で「メッセージ送信中...」が表示され、送信処理に問題がなければ「メッセージ送信完了」に切り替わります。
指定した電話番号に、テキストが送信されます。
これで、動作確認ができました。
最後に いかがでしたでしょうか?OCRの技術は日常のさまざまな場面で利用されています。Tesseract.jsを使えば、気軽にブラウザ上でOCR処理を行い、他の技術ツールと組み合わせたアプリケーションを開発できます。このチュートリアルをもとに、紙でしか存在しない資料をデジタル化してみてはいかがでしょうか。
Twilio Blogに投稿してみたい方や、フィードバック、登壇、勉強会のお誘いなどお気軽にsnakajima[at]twilio.comまでご連絡ください。開発中のプロジェクトに関してはGithub(smwilk)を覗いてみて下さい。