[ Siena 目次 ]

英単語スペルチェックアプリ

今回は、タッチ入力機能を使用して、英単語スペルチェックアプリを試作します。
マイクロソフトから公開されたサンプル『 Travel Translator 』の タッチ入力・テキスト認識機能 を参考にしました。

実際の画面を確認

作成したのは1スクリーンのみです。

以下に、作成時のポイントを記述します。

[ 目次 ]

1. 実際の画面を確認
2. 事前準備
3. 仕様確認
4. 仕組みの解説
• 画像変更ボタン
• イメージ
• 正解表示ラベル
• 入力表示ラベル
• ペン入力ボード
• チェックボタン
• 正解マーク
• 不正解マーク
• ペンイメージ
• 消しゴムイメージ
• 全消去イメージ
5. 感想

事前準備

1. 使用する画像を準備しておきます。
単語帳用に、 PICTKAN さんのフリー素材を10個、使用しました。

文房具画像については、 DesignContest さんのフリー素材を使用しました。


2. データソースとして読み込むエクセル表を作成します。
「 ID 」「 Word 」「 ImageURL 」だけのエクセル表を作成し、テーブル変換しておきます。画像分の10行、入力しました。 テーブル変換の手順は、こちら（サンプルで気付いたポイント）に記しています。興味のある方はご覧ください。

仕様確認

一応、タブレット型を意識しつつ、部品を配置しました。

1. 画像変更ボタンをクリックして、画像を表示します。 画像は、読み込んだデータソースからランダムに選択します。
2. 表示された画像の英語スペルを、手書き領域にタッチ方式で入力します（マウス等でも可）。
3. 入力されたスペルを、テキスト認識機能を介して表示します。
4. 入力を間違えた場合、消しゴム機能で消去します。
5. 入力内容をすべて消したいときは、全消去ボタンをクリックして消去します。
6. 入力したら、チェックボタンをクリックして、入力内容と、テーブルに保管されているスペルを比較します。
7. 正解の場合、正解マークを表示します。
8. 不正解の場合、不正解マークを表示します。
9. 画像変更ボタンをクリックして、別の画像を表示します。

仕組みの解説

ここでは、貼り付けた部品の属性を ExpressView で確認します。
部品を選んで右下の ExpressView ボタンをクリックすれば、画面右に開きます。
以下、画像をクリックすると拡大画面が表示されます。

1. 画像変更ボタン
表示するデータのコレクション保管と、考慮モードの設定と、ペン入力ボードのクリアをしています。
OnSelect のタイミングで、
Clear(Word);
Collect(Word,First(Shuffle(Words)));
UpdateContext({mode:"thinking",item:"Pen",eraseAll:true});
UpdateContext({eraseAll:false})
としている部分がそれです。

eraseAll 変数は、ペン入力ボードの Clear 属性で利用されています。


2. イメージ
この部品は、単純にコレクションのデータの画像を表示しているだけです。
Image 属性で、 First(Word)!ImageURL としている部分がそれです。



3. 正解表示ラベル
この部品は、単純にコレクションの Word 項目を表示しているだけです。
Text 属性で、 First(Word)!Word としている部分がそれです。


また、考慮モード/チェックモード に合わせて、表示/非表示をコントロールしています。
Visible 属性で、 mode="check" としている部分がそれです。
この式が true の時に表示され、false の時は非表示になります。



4. 入力表示ラベル
この部品は、手書き入力された内容を、テキスト認識機能によって読み取って、表示しています。
Text 属性で、 Trim(Lower(Pen1!RecognizedText)) としている部分がそれです。
大文字と小文字の区別をするのが面倒なので、 Lower 関数で、入力内容をすべて小文字にしています。 また、余計なスペースが入らないよう、 Trim 関数で、スペース除去をしています。



5. ペン入力ボード
この部品は、手書き入力をする領域です。タッチパネルでない場合は、マウス等でも入力可能です。 全消去ボタンがクリックされたり、画像変更ボタンがクリックされたときに、領域全体をクリアするようにしています。
Clear 属性で、 eraseAll というブーリアン変数を指定している部分がそれです。


また、選択されている道具に合わせて、動作を変更しています。
Mode 属性で、 If(item="Pen",PenMode!Draw,PenMode!Erase) としている部分がそれです。 その他、太さ・色・ペン先の形などを予め指定する代わりに、 ShowControls 属性を false にしています。



6. チェックボタン
この部品をクリックして、スペルをチェックします。
OnSelect 属性で、 UpdateContext({mode:"check"}) としている部分がそれです。



7. 正解マーク
この部品は、スペルが正しかったときに表示される赤丸マークです。
動作モードに合わせて、表示/非表示をコントロールしています。
Visible 属性で、 And(mode="check",YourAnswer!Text = CorrectAnswer!Text) としている部分がそれです。



8. 不正解マーク
この部品は、スペルが間違っていたときに表示される×マークです。
動作モードに合わせて、表示/非表示をコントロールしています。
Visible 属性で、 And(mode="check",YourAnswer!Text <> CorrectAnswer!Text) としている部分がそれです。



9. ペンイメージ
この部品をクリックして、ペン入力状態にします。
OnSelect 属性で、 UpdateContext({item:"Pen"}) としている部分がそれです。
この処理と、ペン入力ボードの Mode 属性が連携しています。


また、選択/非選択に対応して、背景色を変化させています。
Fill 属性で、 If(item="Pen",RGBA(255, 255, 255, 1),RGBA(69, 69, 69, 1)) としている部分がそれです。



10. 消しゴムイメージ
この部品をクリックして、消しゴム状態にします。
OnSelect 属性で、 UpdateContext({item:"Eraser"}) としている部分がそれです。
この処理と、ペン入力ボードの Mode 属性が連携しています。


また、選択/非選択に対応して、背景色を変化させています。
Fill 属性で、 If(item="Eraser",RGBA(255, 255, 255, 1),RGBA(69, 69, 69, 1)) としている部分がそれです。



11. 全消去イメージ
この部品をクリックして、ペン入力ボードを全面クリアします。
OnSelect 属性で、
UpdateContext({eraseAll:true}); UpdateContext({mode:"thinking",item:"Pen", eraseAll:false}) としている部分がそれです。
この処理と、ペン入力ボードの Clear 属性が連携しています。

感想

今回気づいたのは、ペン入力ボードが、常に一文字一文字を認識しているわけではなさそうだ、という点です。
どちらかと言えば、Google 検索等で使用されている入力予測機能に近い印象を持ちました。

なぜかというと、場合によって、スペルの微妙な間違いが正しいスペルに矯正されていたからです。実際、 watermellon と入力しても、文字認識後の結果は watermelon でした。
存在する単語との比較によって認識し、小さい誤りは正しく矯正される、ということかもしれません。

上記の例からして、スペルチェックを目的としたアプリをこの文字認識機能で作成するのは、不適切だったと思います。むしろ、都合よく矯正されることを役立てるようなアプリを考えるべきかもしれません。

使ってみないとわからないことがあるなあ、というのが、率直な感想でした。

あと、既にネットで公開されている単語情報・音声情報・画像を組み合わせて、より見栄えのする英語学習コンテンツが作成可能であると感じました。

実際には権利問題があるので簡単ではないですが、無料コンテンツを公開している人が手を組めば、タブレットで軽快に学習できるアプリが間違いなくできるでしょう。

私がイメージするのは、文字・画像・音声・動画データをクラウド上に置いて、アプリはとことん軽くする仕組みです。

多くの人に行き渡るような、低額アプリの出現に期待したいものです。