初版

旨い期限オボエテール

製作品

# アイディア概要 冷蔵庫の中にある食べ物の賞味期限や、消費期限、覚えてますか？ 私はしょっちゅう忘れて、ちょっとおいしく無くなってしまったり、ひどいときはダメになって食べれなくなってしまったりする時があります。 それを解決するべく、賞味期限や消費期限を私の代わりに覚えてくれる、「旨い期限オボエテール」を作ってみました。 使い方は簡単。まずカメラで「名称」が記載された部分を撮影します。 撮影ができたら「ピっ」と音が鳴るので、次は「期限」が記載されている部分を撮影します。撮影が完了したらまた音が鳴ります。そしたら全部完了です。 あとは、LINEの「旨い期限オボエテール」で「おしえて」とつぶやけば、記録した内容を教えてくれます！ @[twitter](https://twitter.com/k191k/status/1393731504052707328) | 名称読取中 | 賞味期限読取中 | |:---:|:---:| |  |  # 実装 ### 全体概要  ### 必要な部品 - ボタンスイッチ - スピーカー - 高画質カメラ（今回はiPhoneのカメラを使用しています） - Obniz - その他、ジャンパワイヤ、ブレッドボードなど細々した部品 ### 「名称」と「期限」について  この記事の中でいう「名称」とは、食品をいれるパッケージにある食品表示の名称項目のことで、期限は、賞味期限や消費期限のことを指します。 ### Obniz側の実装 Obniz側でやっていることは、**撮影、OCR、文字解析**の三つになります。 基本は公式サンプルの [文字認識をして動かそう](https://obniz.com/ja/doc/guides/ai-robot-kit/readtext)を参考にしました。 まず、起動してボタンを押すとカメラが起動して、「名称」を撮影の状態になります。 もう一度押すと、待機状態になり、さらにもう一度押すと、撮影が「名称」の撮影から再スタートするように実装しました。 実際のカメラの起動方法は、公式サンプルをそのまま利用しています。 ``` var shootingStatus = 0 // 0: 撮影停止中 // 1: 「名称」撮影中 // 2: 「期限」撮影中 // 3: 撮影待機中 button.onchange = function (pressed) { if (pressed) { if (shootingStatus == 0) { prepare(); } else if (shootingStatus == 3) { onVideoRestart(); } else { onVideoStopped(); } } }; function prepare() { const medias = { audio: false, video: { facingMode: { exact: "environment" }, }, }; mediaDevices.getUserMedia(medias).then(successCallback).catch(errorCallback); } function successCallback(stream) { showObnizMessage("「名称」を撮影してください"); shootingStatus = 1; video.srcObject = stream streaming = true; start(); } ``` `start()` が呼ばれると、撮影画像のキャプチャとOCR処理が開始されます。 ``` async function start() { const FPS = 100; async function processVideo() { try { if (!streaming) { return; } light.on(); let begin = Date.now(); let base64String = capture(); if (base64String != null) { postToGoogle(base64String); } setTimeout(processVideo, 1000); } catch (err) { console.error(err); } } // schedule the first one. setTimeout(processVideo, 1000); } ``` ここで**注意するべき二点**があります。それは、**カメラの画質**と**OCR処理の頻度**です。 #### カメラの画質について 今回**OCRを使用するため、カメラの画質は非常に重要**になってきます。 私はまず、[JpegSerialCam](https://obniz.io/ja/sdk/parts/JpegSerialCam/README.md)を試してみましたが、このカメラの最高画質は "640x480" で、流石に文字は全部潰れていました。且つ、起動が遅くてちょっと今回の要件にはマッチしませんでした。それから[ArduCAMMini](https://obniz.io/ja/sdk/parts/ArduCAMMini/README.md)も試したのですが、こちらに関してはうまくカメラが起動せず、時間の都合上、一番確実なiPhoneのカメラを使用することにしました。iPhoneを使ってしまうと、アプリ作った方が早いんじゃない？となってしまうので、その辺はちょっと残念でしたが、もうちょっとカメラ周り勉強してから再チャレンジかなと言う感じです。 #### OCRについて 今回OCRはGoogleが提供している[Vision API](https://cloud.google.com/vision/?hl=ja&utm_source=google&utm_medium=cpc&utm_campaign=japac-JP-all-ja-dr-skws-all-super-trial-e-dr-1009882&utm_content=text-ad-none-none-DEV_c-CRE_205812820715-ADGP_Hybrid%20%7C%20SKWS%20-%20EXA%20%7C%20Txt%20~%20AI%20%26%20ML%20~%20Vision%20AI_Vision-vision%20api-KWID_43700018487811160-kwd-203288733847&userloc_1009561-network_g&utm_term=KW_vision%20api&gclsrc=aw.ds&&gclid=Cj0KCQjw4v2EBhCtARIsACan3nzlgP8nhDwy-e8aRhqMMerZW7hGSQWe29oSzlY_O8CsZ_e3XShXmiwaAmaWEALw_wcB)を使用しています。こちら、公式サンプルの [文字認識をして動かそう](https://obniz.com/ja/doc/guides/ai-robot-kit/readtext)をそのまま使ってしまうと、結構な量のリクエストがとんでしまい、費用がかなりかかってきます。私は予算の都合上、1秒に1回という超節約な設定にしています。**OCRのリクエスト頻度については、コストがかかってくるので、実際に検証して費用と利便性を両立できる閾値を決める必要がある**と思います。 #### 文字解析 文字解析といっても、現在はそんなに難しいことはしていなくて、最低限の実装になっています。 名称の解析はこんな感じです。 ``` if (result && result.textAnnotations) { result.textAnnotations.some((anotation, index) => { if (index == 0) { return; } if (findKey) { // 「名称」が見つかったので、その対象を取得する // 「原材料名」が「名称」の次の項目とみなし、「原材料名」までを対象の文字列とする if (isKeywordIncluded(anotation.description, "原材料名") || isKeywordIncluded(anotation.description, "原材料") || isKeywordIncluded(anotation.description, "材料")) { return true; } var reg = new RegExp(/[!"#$%&'()\*\+\-\.,\/:;<=>?@\[\\\]^_`{|}~]/g); if (reg.test(anotation.description)) { // 記号は取得しない return; } resultWord = resultWord + anotation.description; return; } // 「名称」を検索 if (isKeywordIncluded(anotation.description, "名称")) { findKey = true; return; } }) } } ``` 身近にある食品表示をいくつか見ると、**「名称」と「原材料名」は必ず順番に記載されている**ようだったので、「名称」と「原材料名」の間の文字列を撮影している対象の名前として扱うようにしています。現在は手元にあるものを頼りにやっているのですが、真面目にやるならば食品表示法とか確認する必要がありあそうです。 期限については`yy/mm/dd` `yyyy.mm.dd`等々日付の形式の文字列を、正規表現で判定するようにしています。正直、**名称よりも期限の判定は難しい**と思いました。まず、**日付の記載方法が多種多様**で、今実装している正規表現では我が家の冷蔵庫にある食品の期限の表記を網羅できていません。また、**OCRの結果も空白等があると数字が別のanotationとして入ってきたり**、食品表示の中に類似の数値列があったりなど、課題があります。これは情報の蓄積がもっと必要かなと思います。 ### GAS側の実装 撮影したものの名前と、賞味期限の情報が取得できたら、その文字列をGASに記録します。GASに記録方法は [こちら](https://temari.co.jp/blog/2020/12/17/smarthome-3/)の実装を参考にさせていただきました。多分今回の実装で一番すんなりいった箇所だと思います。思っていたよりも手軽にできてよかったです。 OCR結果の保存について、参考の通り、Postデータを受け取ったら、シートの最後の行にOCR結果を追加しているだけです。 ### LINE Bot 今回、撮影したデータを閲覧するのにLINE BOTを使用しています。実装は [こちら](https://qiita.com/hakshu/items/55c2584cf82718f47464) を参考にしています。 「おしえて」とつぶやくと、GASに保存している賞味期限の情報を返信しています。今回保存用のアプリと、LINE BOT用のアプリ、二つデプロイしているので、返信する情報については、LINE BOT用のウェブアプリで以下のようにして保存しているスプレッドシートから取得するようにしています。 ``` // ユーザーのメッセージを取得 var userMessage = JSON.parse(e.postData.contents).events[0].message.text; if (userMessage != "おしえて") { return; } // 応答メッセージ用のAPI URL var url = 'https://api.line.me/v2/bot/message/reply'; var spreadsheet = SpreadsheetApp.openById('スプレッドシートのID'); var sheet = spreadsheet.getActiveSheet(); var values = sheet.getRange('欲しいセル').getValues(); var message = "" values.forEach(function(key){ if (key[0] != "") { message = message + key[0] } }); ``` 全部だすと期限切れのものまででてしまうので、ここで一週間以内のものなどフィルターをかけるともっと良い感じにりそうなきがしています。 # おわりに 今回、カメラに大苦戦して、ハード（組み込み）は奥が深いなぁと改めて思いました。それから、OCRの頻度や、文字列の解析はもうすこし時間をかけてやれば精度が高まると思うので、今後ブラッシュアップできたら良いなと思います。 その他、ObnizとGAS、LINEなど、他のソフトウェアと割と簡単に連携ができることを知れたのはよかったです。また何か作るときに役に立ちそうです。 電子工作はまだまだ初心者ですが、前よりも作りたいものを形にできたので、よかったなと思いました。今度は何をつくろうかなー 終わり PS.LINE BOTのアイコン必要だったから、オボエテールくんつくってみた