未分類

Google入力ツールで手書き入力

はじめに

モバイルやタブレットの手書き入力って便利ですよね。長い文章を打つときはやはりキーボードがいいですが、メモを取ったり図を書いたり、手書きで計算するときは非常に役に立ちます。この手書きの便利さと文字認識技術を組み合わせるとこれまで紙でしかできなかったことがデジタルの世界でも可能になり、そして紙より便利という世界が開けてきます。そこで、手書き文字の認識APIについて今回は解説してみます。

Google Input Toolsとは

Google手書き入力というアプリがAndroid向けに開発されていて、これを使うと手書きの文字を認識することができます。

Screen Shot 2015-05-28 at 12.07.18 AM

実はこれはPC版が先にあり、こちらから試すことができます。javascriptを解析したところ、マウスのストロークをサーバに送信し、文字の候補リストを受け取るようになっています。つまり、このWEB-APIを使えば手書き文字の認識アプリを簡単に実装することができるというわけです。今回はAPIの解析と、それを応用した簡単なゲームを作ってみます。

APIの解析

まずは次のコードを実行してみましょう。JS Binからも実行できます。

基本的にはマウスやタッチの移動情報を時系列の座標に変換し、それをjson形式にしてサーバに送る。すると文字候補一覧がjson形式で返ってくるという仕組みです。大事な点は次の3つです。
– キャンバスサイズ
– 座標の時系列情報の形式
– 返り値の形式

まずはキャンバスのサイズを決めます。ここでは200×200ピクセルとしました。textという変数の中にwriting_area_widthとwriting_area_heightという変数があるので、それぞれ200を設定します。ここはアプリに応じてサイズを変えることになると思います。

次に座標の時系列表現ですが、次のようにします

例えば、縦に一本線を引いたとすると次のようになります。

1ストローク目の最初の時刻を0とするので、このデータでは0秒目に座標(100,20)にタッチを開始し、1秒後に座標(100,180)で指を離したことになります。では、次のデータはどうなるでしょう?

これは2秒後に2ストローク目が始まり、座標(20,100)から座標(180,100)に指が動いたと読めます。時刻のリストは1ストローク目の開始時刻を0とするので、そこから数えて2秒後から3秒後の間に2ストローク目が書かれた事になります。

応用

Screen Shot 2015-05-28 at 12.06.38 AM

HTML5のCanvasを使えば手書きのストローク座標を取得できるので、これを応用して漢字ナンクロを作ってみました。PCだとマウス入力なのでつらいですが、iPadなどを使って試してみてください。今回は詳細を省きますが、そのうちCanvasから座標をとってGoogleのAPIを呼び出すところも解説してみたいと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です