Web Speech APIで絵本を読み聞かせ

子供への絵本読み聞かせが大変で、AIに読んでもらうWebアプリを作っています。Cloud Vision APIのOCRで文字は読み取れました。次は合成音声で読み上げます。読み上げに一番手軽なWeb Speech APIを使うことにしました。

ブラウザだけで音声読み上げ「Web Speech API」

早くアプリを作りたいという理由で、クラウドを使った合成音声サービスを使わず、使用経験のある「Web Speech API」を採用しました。

数行のJavaScriptを書くだけで、ブラウザがテキストを合成音声でしゃべってくれます。

Web Speech APIを試してみよう

手元の絵本の表紙から読み取った「はしれ はしごしゃ 作絵間瀬なおかた」という文字を合成音声で読み上げてみます。

Google Chrome バージョン83での読み上げです。

まだまだ、カタコトかな。

OCR+読み上げのコード

現状のコードを掲載します。

Web Speech APIの記述は、VISION.SPEECH()の中にまとめています。

あとはカメラ機能を実装すれば、絵本読み聞かせWebアプリとなるでしょう。

相手への行動は跳ね返る[お母さんがいない生活11日目]

お母さん入院から11日目。かなり疲労が溜まっている感じもします。やはり、きつい。今日は次男が夜ご飯に弁当を作ってくれて助かりました。どうやら昨晩の出来事のお礼のようです。

良くも悪くも行いは返ってくる

次男が私に弁当を作ることは珍しいです。

少し冷静になって、何でかな?と、理由を考えました。

・・・心当たりがあります。

昨夜、次男が急に「算数ノートが明日までに必要」と言って、仕方なく車で買いに行きました。たぶん、そのお礼でしょう。

子供のピンチへの助けが、返ってきたようです。

逆に気を付けないといけないのが、子供に対して悪い行いもそのまま返ってくること。安易に子供に怒りをぶつけたりすると、いつか怒りが返ってくるでしょう。

まあ、4人の息子たちに怒らないというのは、かなりの難易度だと思いますが。

デザート到着

四男が作ったチョコバナナ?

チョコレートに含まれるテオブロミンにはリラックス効果があると言われます。

これで心を落ち着かせましょう。

あと、こうやってブログを書くことも、客観的に頭を整理する時間になり、精神を落ち着かせる効果があるとか聞いたことがあります。

きつい時こそ、心安らかに。

Cloud Vision APIのOCRの誤認パターン

絵本の読み聞かせをAIにお願いしたく、Cloud Vision APIのOCRを使うことにしました。想像以上に精度がよいものの、やはり誤認するパターンがあります。

※これは2020年7月14日現在の情報で、OCRは日々進化していると思われます。

1行に言語が混在する文章は難しい

「横書きの文章を、
Cloud Vision API を使って読み取る。」

と、書かれた写真を、昨日作ったOCRのWebアプリで読み取ってみました。

結果、APIより後ろの文字を盛大に誤認します。

「横書きの文章を、
Cloud Vision API &EƆCAH3.」

文字の形状より、言語の判断を優先して認識しているようです。

API以降も英語(一部記号)として読み取られました。

 

念のため他のサンプルでも試してみましょう。

「MUFG 三菱UFJ銀行」の文字は、やはり誤認します。

けっこう身の回りに、英語と日本語の混在する文字が多く、日本で日常的にOCRを使えるのは、英語圏より1歩遅れそうな気がします。

行を変えれば言語影響も大丈夫

今度は、日本語と英語の行を変えてみました。

「横書きの文章を、
Cloud Vision API
を使って読み取る。」

問題なしです。

行単位か、または文字の距離で、言語がリセットされるのだと思います。

ちなみに背景に比較的ごちゃごちゃした写真を使っていますが、文字の識別には影響ないようです。

言語の混在はダメ。文字背景がごちゃごちゃしていてもOK。

直近の目的である、絵本の文字を読み取ることには支障なさそうです。

縦書きの文字も読み取れるがカタカナに弱い

絵本の文字は縦書きが多いです。

Cloud Vision APIのOCRは賢いことに、縦書きも理解してくれます。

ただ、カタカナで「クラウドビジョンエーピーアイ」と書かれているところは誤認しました。

著作権の関係で画像掲載を控えますが、絵本でも縦書きのカタカナを誤認します。

「ゴー」が「ロー」になったり。

カタカナの学習量が少ないのでしょうか?

絵本の読み聞かせアプリを使うときは、カタカナが苦手なことをあらかじめ子供に伝えたほうがよさそうです。

 

最後に、カタカナをやめて、漢字にしたパターンです。

「人工知能の光学文字認識」

しっかり認識できました。

OCRの認識・誤認のパターンを知ることで、どういう場面でOCRを活用できるか、判断基準にもなるでしょう。

Cloud Vision APIで絵本の文字を読み取る

絵本をAI(人工知能)に読んでもらいたい。今回はGoogleが提供するCloud Vision APIを使い、OCR(文字認識)を行ってみます。最終的には絵本読み聞かせWebアプリを作ります。

前段、絵本の読み聞かせがつらい

お母さんが長期入院中です。そんな状況もお構いなしで、三男と四男は図書館から40冊くらい絵本を借りてきます。読み聞かせ3冊目くらいで、もう嫌になりました。GoogleのAIに助けてもらいましょう。

絵本読み聞かせアプリの全体設計

Webの技術、HTML・CSS・JavaScriptで開発します。

処理の流れは、

  1. ブラウザでカメラを起動する
  2. 撮影ボタンが押して、絵本のページを写真で取り込む
  3. 写真をCloud Vison APIに渡す
  4. OCRの結果が、Cloud Vison APIから返ってくる
  5. OCRの結果をブラウザ上に表示する
  6. Cloud Text-to-SpeechでOCRの結果を読み上げる

Cloud Vison APIを使いこなせるか?OCRの精度はどれほどか?この2点を先に知りたかったため、3. 4. 5.を先行して開発します。

Cloud Vision APIのOCR準備

Googleの画像認識系AIが使えるサービス「Cloud Vision API」。私の場合は登録を昔行っていたため、すぐに使える状況でした。

Cloud Vision APIの導入部分の仕方は、Cloud Vision APIの使い方まとめ (サンプルコード付き)が分かりやすそうです。

最低限、APIキーを作成できればOKです。

念のためAPI キーを使えるWebサイトを制限します。

認証情報>APIキーの制限と名前変更>ウェブサイトの制限に「localhost/*」と自分のドメインを登録して、大量課金のリスクを減らします。

なお、利用料金はOCR(テキスト検出)だけなら1,000回/月まで無料。次の1,000回から1.5ドルとなります。

写真をアップしてOCRの結果を表示するコード

Cloud Vision APIを使って、まずはOCRの精度を確かめます。

下記のHTMLをlocalhostで動作させます。

このHTMLは、JavaScriptもCSSも1ページに含まれているため、単体で動作します。・・・旧時代のJavaScriptで書いており、IEでも動きます。

ブラウザでOCRのテスト

絵本の表紙を撮影して、動作を確認します。

現段階では、カメラ撮影機能は付けず、絵本の写真をアップロードして使う仕様です。

写真をアップすると、結果が返ってきました。

OCRの結果は、誤字なし。

文字を認識したところに、緑色の四角を描画しています。HTML5のcanvasを利用しています。

他のが写真でもいくつか試すと、誤認するパターンが見えてきました。

手書き文字の認識は、やっぱり難しそうです。

また、クモの絵を「美」と誤認しているため、出来るだけ文字だけを写真で撮ったほうが良さそうです。

それでは引き続き、Cloud Text-to-Speechで絵本を読み上げる機能を開発します。

AirPods Prodで野外勉強[お母さんがいない生活8日目]

公園に子供たちといると、何だか時間がもったいないと思ってしまいます。そこで、AmazonオーディブルをAirPods Proで聞きながら、勉強することにしました。

公園で過ごす時間がもったいない

日曜日はだいたい公園に行きます。長男が生まれてからで、もう10年くらい、この習慣が続いています。

四人兄弟が勝手に遊んでくれるので、私は見ているだけ。

ただ、この時間がもったいなく、勉強時間に使えないでしょうか?

子供を見ながら勉強できる条件

スマホを見ながら勉強していると、子供がどこかに行ってしまうリスクがあります。

特に、次男、三男、四男は自由なので、よく失踪します。

そのリスクを避けるため、音だけで勉強し、なおかつ、子供の声が聞こえるように、外部の音も聞こえることが条件です。

ビジネス書の朗読をしてくれるAmazonオーディブルというサービスはあるので、あとは良いイヤホンがあれば野外勉強を実現できるでしょう。

AirPods Proを買う

普段私はイヤホンを使わず、たまに100円のイヤホンを使うくらいです。

たまたまAirPods Proを見て、「イヤホンに3万円!?」と驚きつつ、外音取り込み機能があることと、アップルの使い勝手の良さを信じ、さっそく購入しました。

安くはないです。ただ、下手に安いものを買い、時間を失う方がもったいない。

朗読も子供の声もよく聞こえる

公園でAirPods Proを付け、Amazonオーディブルを聞いてみました。

ビジネス書の朗読も、子供の声もよく聞こえます。

試しに外音取り込みから、ノイズキャンセリングモードに切り替えます。

すると、無音の空間にいるかのように、世界が切り替わります。

これはすごい!さすが3万円。

子供がうるさいときは、わめき声もキャンセルしてしまいたいです。

集中して聞けないけど

やはり、子供が話しかけるたびに、朗読の話の内容が飛ぶので、集中して聞けません。

ただ、2、3周繰り返し聞けば、頭に入るでしょう。

最短の手作り料理[お母さんがいない生活7日目]

お母さん入院から1週間。今日は四男がハンバーグを作りたいとのこと。ハンバーグの素を使うと、料理をした達成感と、食べたときの満足感、どちらも十分に味わえます。

ひき肉とハンバーグの素

味付けから時間をかけて料理はできません。私に余力がありません。

そこで、スーパーでハンバーグの素とひき肉を買い、四男が簡単に作れるように準備します。

ボールにハンバーグの素とひき肉を入れる

ハンバーグ作りは簡単です。

ボールにハンバーグの素を入れ、1分待ってからひき肉を入れます。

料理好きの三男も手伝いに来ました。

ひき肉を丸める

ひき肉をよく混ぜたら、ハンバーグの形に丸めます。

芸術的にな形になりました。

油を入れて焼く

あとは焼くだけ。

片面が焼けたら、ひっくり返します。

ハンバーグ完成!

すばらしい!上達しています。

ハンバーグの素を使っているので、味はおいしいです。

料理をした達成感と、食べたときの満足感をどちらも十分に味わえるので、子供が料理をするときは、「○○の素」を使うのが良いですね。

癒しの相乗効果 ペット×箱庭[お母さんがいない生活6日目]

4歳~9歳の男兄弟4人。お母さんが入院中も、意外と変わらず生活しています。リビングに住む爬虫類、両生類が、癒しになっている気がします。

家族みんな、観察が日課に

カナヘビは苔のベッドで気持ちよさそうに寝ています。

よく見ると目を閉じています。

・・・観察は良いですね。

小さな変化、出来事に気づき、素朴ながら面白い。

うちのリビングはテレビがないので、もう、気が付くと水槽ばっかり見ています。

エサのコオロギが届く

エサがなかったので、コオロギを注文していました。

Sサイズを30匹。

あげると早速、食いつきます。

カナヘビもカエルもバクバク食べます。

子供たちには、残酷な食物連鎖を学んでもらいます。

バッタも届く

三男がバッタを2匹、とってきました。

なんか野菜みたいな色だし、食べると栄養バランスがよくなりそうです。

ペットの癒し効果

犬や猫に癒し効果があるのは間違いありません。そして、カナヘビ、カエルもペットのようにかわいがれば、癒し効果を感じます。

さすがに犬、猫より家族としての存在は小さいですが、カナヘビたちは育てるのに手間がかからず、現代の余力がない子育て世帯に適していると思います。

箱庭の相乗効果

ついでに水槽内に配置した岩や苔が箱庭のようで、これもまた癒されます。

箱庭療法という心理療法があったり、コロナ禍で人気になった「どうぶつの森」も箱庭ゲームと言われ、世界の人々を癒したりしていました。

箱庭癒し効果は侮れません。

ペットを箱庭で飼うのは、最強の癒しの組み合わせです。

生活環境の改善[お母さんがいない生活5日目]

子供たちが捕まえてきた、カエル、ヤモリ、カナヘビ。今まで住んでいた水槽の生活環境が悪かったので改善しました。苔を使い、より自然に近い環境を用意しています。苔リウムというらしいです。

砂利は邪魔だった

カエルたちの住む水槽には、今まで砂利を敷いていました。

しかし、カエルが砂利まみれになって、とても不快そうです。

それなら苔を敷いてあげよう。

苔リウムの材料を通販で買う

Amazonで苔、土、岩の水入れ、水槽を買いました。

水槽は買うつもりがなかったのですが、岩の水入れが大きすぎて今までの水槽に入らず・・・新たに大きい水槽を調達しました。通販ならではの失敗。

土を混ぜる

苔用の土に水を入れて混ぜます。泥遊びです。

調達した水入れと、元からあった岩のオブジェを水槽に配置し、周りに苔を敷き詰めます。

苔リウムの完成です。

ジャングルになった

まるで、恐竜が住むジャングルのようです。

カエルとヤモリは、だいたい岩の下に隠れています。

カナヘビは苔に埋もれています。

快適そうです。

ただし、ふたが閉まらない

唯一の問題は、ふたが閉まらない事。脱走する可能性もあります。

ヤモリはガラスも垂直に登れるから逃げるかも。

しかし、ヤモリを怖がるお母さんがしばらく家にいないので、家の中で放し飼いでもいいかもしれません。

家族が増える[お母さんがいない生活4日目]

お母さんが入院してから4日目。家族が増えました。次男が連れてきたカナヘビ2匹。リビングで一緒に過ごすと、生活が少し楽しくなります。

カナヘビ2匹、こんにちは

次男(7歳)と一緒に、保育園の迎えに行きました。その帰り道、次男が2匹のカナヘビを見つけ、手づかみで捕まえました。

家に帰り、リビングの水槽に入れます。

ヤモリと友達になれない?

もともと水槽の中にはヤモリがいました。ヤモリは夜行性。日中は物陰に隠れて出てきません。

逆にカナヘビは昼行性。ヤモリと生活時間帯があいません。

これじゃ、友達になれないかな?

カエルはお出迎え

1年前から住んでいるカエル。

新入りのカナヘビと寄り添っています。

すぐに仲良しになりました。

さみしさが紛れる?

生き物が好きな子供は多いと思います。リビングで生き物を飼っていると、お母さんがいないさみしさも紛れるかもしれません。

短冊に願いを[お母さんがいない生活3日目]

「みんなの ねがいが かないますように。」今日は七夕。お母さんが入院して三日目。次男、三男が短冊に願いをつづります。一方長男は・・・。

折り紙で輪っかの装飾

三男がせっせと何かを作っています。

七夕の飾りらしいです。

気が付いた時には部屋に飾られていました。

カーテンレールからぶら下がる輪っか。その一番下には、三男が書いた短冊がありました。

お母さんへの祈り

「はやく あしが なおって ください」

足の手術で入院している、お母さんへの祈りです。

裏側には、

「みんなの ねがいが かないますように。」

・・・よく、そんなことを書けると感心。

コロナウイルス鎮静化の祈りも

リビングのホワイトボードにも、短冊が貼られていました。

この字は、次男の字。

「はやく コロナういるすが このよからきえて おかあさんの足がなおりますように」

・・・次男、三男は、あと四男も、周りをよく見て気に掛ける子です。

文章が優しい。

一方長男は・・・

「ホットドッグとハンバーガーとすし、紙粘土で作ったよ!」

空気とか読まず、我が道を行きます。

いいと思うよ。