npx create-react-app ocr-sms-sender cd ocr-sms-sender npm start 

npm install --save tesseract.js twilio express dotenv intl-tel-input 

import { useState } from "react" import OcrReader from "./components/OcrReader" import SmsSender from "./components/SmsSender" function App() { const [ocrData, setOcrData] = useState("") // 子コンポーネントからOCRデータをPropsとして受け取る const onReadOcrData = (ocrData) => { setOcrData(ocrData) } // 子コンポーネントで別の画像を使用するボタンが押されたことをPropsで検知する const onRemoveClicked = () => { setOcrData("") } return ( <div className="App"> <header>OCRアプリへようこそ!</header> <OcrReader onReadOcrData={onReadOcrData} onRemoveClicked={onRemoveClicked} /> {ocrData && <SmsSender readText={ocrData}/>} </div> ) } export default App 

import { useState } from "react" import { createWorker } from "tesseract.js" // 画像のOCR処理ステータス const STATUSES = { IDLE: "", FAILED: "OCR処理に失敗しました。", PENDING: "OCR処理中...", SUCCEEDED: "OCR処理完了", } export default OcrReader 

function OcrReader({onReadOcrData, onRemoveClicked}) { const [selectedImage, setSelectedImage] = useState(null) const [ocrState, setOcrState] = useState(STATUSES.IDLE) const worker = createWorker() // 画像のOCR処理 const readImageText = async() => { setOcrState(STATUSES.PENDING) try { await worker.load() // OCRで読み取りたい言語を設定 await worker.loadLanguage("jpn") await worker.initialize("jpn") const { data: { text } } = await worker.recognize(selectedImage) await worker.terminate() // 日本語テキストはスペースが入ってしまう可能性があるので、スペースを削除 const strippedText = text.replace(/\s+/g, "") onReadOcrData(strippedText) setOcrState(STATUSES.SUCCEEDED) } catch (err) { setOcrState(STATUSES.FAILED) } } } 

// 別の画像を使用するボタンを押した時の処理 const handleRemoveClicked = () => { setSelectedImage(null) onRemoveClicked() setOcrState(STATUSES.IDLE) } 

return ( <div> {selectedImage && ( <div> <img src={URL.createObjectURL(selectedImage)} alt="scanned file" /> </div> )} <div> {selectedImage? <div className="button-container"> <button onClick={readImageText}>画像をOCR処理する</button> <button className="remove-button" disabled={ocrState === STATUSES.PENDING} onClick={handleRemoveClicked} > 別の画像を使用する </button> </div> : <> <p>画像ファイルをアップロードしてください。</p> <input type="file" name="ocr-image" onChange={(event) => { setSelectedImage(event.target.files[0]) }} /> <p>対応フォーマット:bmp、jpg、png、pbm</p> </> } </div> <div className="status"> {ocrState} </div> <br /> </div> ) 

import { useEffect, useState, useRef } from "react" import "intl-tel-input/build/css/intlTelInput.css" import intlTelInput from "intl-tel-input" // SMS送信ステータス const STATUSES = { IDLE: "", FAILED: "メッセージ送信に失敗しました。", PENDING: "メッセージ送信中...", SUCCEEDED: "メッセージ送信完了", } export default SmsSender 

function SmsSender ({readText}) { const [smsText, setSmsText] = useState(readText) const [iti, setIti] = useState(null) const [smsSendingStatus, setSmsSendingStatus] = useState(STATUSES.IDLE) const inputRef = useRef(null) // International Telephone Inputを初期化 const init = () => intlTelInput(inputRef.current, { initialCountry: "jp" }) // レンダー後にInternational Telephone Inputを初期化 useEffect(() => { setIti(init()) }, []) // SMS送信リクエスト const sendSMS = async () => { setSmsSendingStatus(STATUSES.PENDING) const country = iti.getSelectedCountryData() const num = `+${country.dialCode}${iti.telInput.value}` await fetch("/send-sms", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ to: num, text: smsText }), }).then((response) => { // Check successful request status if (response.status === 200) { setSmsSendingStatus(STATUSES.SUCCEEDED) } else { setSmsSendingStatus(STATUSES.FAILED) } }).catch(() => { // Catch network errors setSmsSendingStatus(STATUSES.FAILED) }) } } 

// 送信ボタンが押されたタイミングでSMS送信する const handleSubmit = e => { e.preventDefault() e.stopPropagation() sendSMS() } 

return ( <div> <form onSubmit={(e) => handleSubmit(e)}> <div>検知されたテキストを編集:</div> <div> <textarea rows="15" cols="45" name="name" defaultValue={readText} onChange={e => setSmsText(e.target.value)} /> </div> <input ref={inputRef} id="phone" name="phone" type="tel" /> <div> <button disabled={smsSendingStatus == "Sending Message..."} type="submit">SMSメッセージを送信</button> </div> </form> <div className="status"> {smsSendingStatus} </div> </div> ) 

html * { font-family: 'Noto Sans Japanese', sans-serif; } .App { text-align: center; } header { color: #2F7AE5; font-size: 30px; } img { width: 280px; } textarea { border: 1px solid #ccc; } button { color: #fff; background: #2F7AE5; padding: 12px; border-radius: 5px; border: none; margin: 3px; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; } button:hover { background-color: #1c4b8d; } input[type=text], input[type=tel] { padding: 12px 20px; margin: 8px 0; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; width: 300px; } input[type=text] { height: 400px; } .button-container { display: flex; flex-direction: column; justify-content: center; align-items: center; } .remove-button { background: #7E7E7E; } .remove-button:hover { background: #414141; } .status { color: #2F7AE5; } /* International Telephone InputのCSS */ .iti__flag {background-image: url("/node_modules/intl-tel-input/build/img/flags.png");} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .iti__flag {background-image: url("/node_modules/intl-tel-input/build/img/[email protected]");} }