2022年8月1日更新
「InputManJS（インプットマンJS）」は便利で快適な入力フォーム開発に特化したJavaScriptライブラリです。様々な用途に合わせて最適化された同ライブラリのインプットコントロールを活用することにより、入力ストレスの少ないWebフォームを効率的に実現することができます。
このシリーズではInputManJSに収録されている便利な機能やコントロールをピックアップしながら、開発者もシステム利用者も「仕事が捗る」入力フォームの開発TIPSをご紹介します。
入力をめぐる問題についてのインタビューにご回答しました
ITの今が見える、明日がわかるニュースサイト「ITmedia NEWS」にて、入力フォームにおける全角・半角問題が取り上げられました。
この問題については本ブログでも以前に取り上げており、こちらの回ではInputManJSを使った解決方法をご紹介しています。
上記の記事ではInputManJSの開発に携わる弊社スタッフがこの問題について様々な見解をご回答しています。これには大きな反響があり、Twitterアカウント＠itmedia_newsが発信した同記事のツイートは累計で800RTを超え、たくさんの引用RTやリプライがありました。
このような投稿の多くはもちろん、入力フォームにおける全角・半角の取り扱いについてのものでしたが、中には以下のようなものもありました。
“あと振り仮名いちいち入れるのが最強に面倒くさいことに気が付く…”
Twitter
ハイ！実はその問題もInputManJSを使えば簡単に解決可能です。ということで今回はInputManJSに備わる「ふりがな取得機能」をご紹介します。
InputManJSのふりがな取得機能
ふりがな取得機能はInputManJSのテキストコントロール（GcTextBox）と複数行テキストコントロール（GcMultiLineTextBox）に搭載されている機能です。使い方は非常にシンプルで、以下のようにしてIMEReadingStringプロパティを利用することにより、コントロールに入力された内容のふりがなを取得できます。
// InputManJS テキストコントロールを生成します
var imTextDom = document.getElementById('gcTextBox');
const gcTextBox = new GC.InputMan.GcTextBox(imTextDom);
// ふりがなを取得します
var readingString = gcTextBox.IMEReadingString;また、IMEReadingStringOutputイベントを活用することで、さらに高度な機能を実現できます。
コントロールへの入力に応じて発生するこのイベントの引数からはふりがなの取得が可能になっており、これを利用することでシステム利用者の入力に応じた「ふりがなの自動取得」機能を実現することができます。
// ふりがな取得処理を実行します
gcTextBox1.onIMEReadingStringOutput((sender, eArgs) => {
// 任意のテキストコントロールにふりがなを設定します
gcTextBox2.text = eArgs.readingString;
});なお、ふりがなの取得にあたってはsetReadingImeStringKanaModeメソッドによる文字種の指定も可能です。開発アプリケーションのロジックや要件に応じて「半角カタカナ」「全角カタカナ」「ひらがな」の3種類から指定することができるようになっています。
以下に、IMEReadingStringOutputイベントとsetReadingImeStringKanaModeメソッドを使用した、ふりがな自動取得機能の例を示します（“Run Project”をクリックするとデモが起動します）。
さいごに
今回はInputManJSのふりがな取得機能をご紹介しました。同機能を使い、ふりがなの入力を自動化することで、入力フォーム利用におけるユーザーの入力ストレスを軽減することができるようになります。弊社ウェブサイトで公開中のデモでは、今回ご紹介したふりがな取得機能がより詳しくご確認いただけるようになっていますので、ぜひ、こちらもご参照ください。
また弊社Webサイトでは、製品の機能を手軽に体験できるトライアル版も公開しております。より本格的な製品のお試しにあたっては、こちらもご確認いただけますと幸いです。
このほか、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問などがございましたら下記までお気軽にお問合せください。