こんにちは！S.K.です。
今回は手書きで入力した文字をテキストに変換（文字認識）しようと思います!!
言語はJavaScriptとPHPです。（PHPはDBから漢字の読み方などの情報取り出しているだけなので、メインはJavaScriptになります）
前回の記事から大分時間が空いてしまいましたが、何も作っていなかったわけではありません。
ガンプラを作っていました!!
はい、すいません。冗談です…（いや本当に作りましたけれども(笑)）
プログラムでは、YouTubeに上げた動画の登録機能を作ったり、preタグ内のコピーボタンを作成したりと、追加機能的なものをいろいろ作っていましたが、今回のは良い感じにできたので記事にしてみました。
手書き入力&文字認識で何をするの？
手書き入力&文字認識って言われても、それで何するのって思いませんか？
これに手を出したのには理由があって、小学1年生の息子が漢字が読めないときに手書きで漢字を書いて、その読み方などを検索するために作りました。
ここまで読まれた方は、きっとこう思われたのではないでしょうか？
辞書で調べればいいじゃん
私もそう思っていました。ですが、小学1年生に辞書は重かったようです…
物理的な意味ではなく、本の分厚さを見た時点で拒否反応が出るんでしょうね。辞書も買ってあるのですが開いているところを見たことがありません(汗)
人それぞれだとは思うのですが…
なので、簡単にわからない漢字を探せるように、手書きで入力した漢字の読み方を検索できるようにアプリを作ってやろう!!というわけです。
手書き文字の認識ってどうやるの？
文字を手書きで書くのはよくあるおえかきソフトみたいなものの簡易版を考えればいいとして、手書き文字の認識を行うとなったら、すぐに思いつくのが画像認識ではないでしょうか？
漢字の教師データを用意しておいて、
手書きで書いた文字を画像に変換 → 教師データとの適合率がしきい値以上ならヒット
みたいな動きをさせることで認識していく方法ですね（むちゃむちゃアバウトですが）
もちろん、私もこの方法で文字認識を行うことも考えたのですが、めっちゃ難しい…
いやもうはっきり言えば、できる気が全くしなかったです（泣）
そして、いつものようにこう思ったわけです。
人間諦めが肝心だよね♪
なので、違う方法からのアプローチを行っていきました。
そして、たどり着いた別の文字認識の方法が、
Google Input ToolsのAPIを使って、canvasに書いた文字のストロークをサーバに送信し、文字の候補リストを受け取る方法です。
Google Input Toolsはコチラから試すことができます。
また、このプログラムで漢字の「二」を書いたときと同じようなストロークを送信し、値を返してもらうことができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Sample</title> <script src="https://code.jquery.com/jquery-git.js"></script> </head> <body> <script> var text = { 'app_version': 0.4, 'api_level': '537.36', 'device': window.navigator.userAgent, 'input_type': 0, 'options': 'enable_pre_space', 'requests': [{ 'writing_guide': { 'writing_area_width': 200, //キャンバス幅 'writing_area_height': 200, //キャンバス高さ }, 'pre_context': '', 'max_num_results': 1, 'max_completions': 0, 'ink': [] }] }; //[ // [[x座標のリスト],[y座標のリスト],[時刻のリスト]], // １ストローク目 // [[x座標のリスト],[y座標のリスト],[時刻のリスト]], // ２ストローク目 // ... // ] text.requests[0].ink = [ [[70, 130], [80, 80], [0, 1]], [[40, 160], [120, 120], [2, 3]], ]; $.ajax({ url: 'https://inputtools.google.com/request?itc=ja-t-i0-handwrit&app=demopage', method: 'POST', contentType: 'application/json', data: JSON.stringify(text), dataType: 'json', }).done(function (json) { console.log(json); }); //結果 //0: "ニ", 1: "二", 2: "=", 3: "＝",... </script> </body> </html> |
ここでは、１ストローク目(0～1秒の間)に、座標(70,130)から座標(80,80)に線を引き、2ストローク目(2～3秒の間)に座標(40,160)から座標(120,120)に線を引いたことになります。(「二」の形になっていますよね)
もちろん、座標には開始点と終了点だけでなく、中間点も入れることができるので、途中で折れ曲がる必要のある文字でも値を得ることができます。
このように値を得ることができるので、canvasで書いた文字の座標を取得して、送ればいいわけです。
漢字検索アプリ「かんじさがし」
そうしてできたのがこちらになります。
今回から動画編集ソフトを今までと別のものを使っているので、動画作るのも時間がかかりましたが、今までより見やすくなったかと思います。
動画を見ていただけるとわかるのですが、認識精度はかなりいいです。
実際息子にも少し使ってもらったところ、いい感じに認識してくれました。
「〇を書いてみて」と伝えて、書かせたあと、「ちゃんとあっているかな～」と確認する使い方もありですね。
漢字のデータ（読み方など）はDBに入れたのですが、一つ一つ手打ちだったので、ここはどうにかしないと思っています。
1年生で習う漢字って80字なので、これくらいなら一つ一つ入れてもいいやと思ったのが間違いで、めっちゃ時間かかりました(笑)
まとめ
思った以上に時間がかかったものの、なかなかの出来のものに仕上がったのではないかと思っています。反応もいいので書いていてストレスもないです。
そして、動画のように文字になっていなくても「@」が出たのは予想外でした(笑)
手書き入力&文字認識で今までできなかったアプローチのものを作り出すことができると思いますので、ぜひチャレンジしてみてください。
画像認識はまだまだ敷居が高いですが、いつか挑戦してみたいですね♪
今回は以上です。
