ふりがな入力やIMEの切り替えを自動で行うWPFアプリケーションの作成

InputMan for WPF 1.0JのGcImeManagerコンポーネントを使ったWPFアプリケーションの作成

2011/11/15 15:00

ダウンロードサンプルソース（C#） (10.2 KB)
ダウンロードサンプルソース（VB） (12.3 KB)

　今回は、入力インタフェースの構築を支援する「InputMan for WPF 1.0J」の「GcImeManagerコンポーネント」を取り上げます。本稿では、このコンポーネントを使用し、IMEのオンオフの切り替えや、ふりがなの入力を自動で行うインターフェイスを持つ日本語のアプリケーションを作成します。

はじめに

　日本語のアプリケーションを作る際、日本語の入力処理は必須ですが、コントロールにフォーカスが移るたびにユーザーにIME（日本語入力システム）を起動させて入力させるのは、ユーザーフレンドリーなUIとは言えません。

　InputMan for WPF 1.0JのGcImeManagerコンポーネントは、IMEのオンオフを自動で切り替えたり、ふりがなを自動で入力してくれるコントロールです。

　今回は、このGcImeManagerコンポーネントを使って、入力する文字の種類によってIMEのオンオフを切り替え、入力した漢字の2種類（全角ひらがな・半角カタカナ）のふりがなを自動で入力してくれるアプリケーションを作成してみました。

漢字入力が必要な時はIMEをオンに

英字入力ではIMEをオフにする

入力した漢字のふりがなを自動で入力

対象読者

　Visual Basic、Visual C# 2010を使ってプログラムを作ったことのある人

必要な環境

　Visual Basic 2010、Visual C# 2010、Visual Studio 2010でプログラムが作れる環境。なお、本プログラムはWindows Vista上で動作するVisual Studio 2010を使用して作成し、動作確認を行っています。

※サンプルソース実行時の注意事項

　動作環境として、あらかじめ.NET Framework 4.0がインストールされている必要があります。動作するOSは、以下を参照ください。

動作するOS一覧

OS	32ビット（x86）	64ビット（x64）
Windows XP 日本語版	●	●
Windows Vista 日本語版	●	●
Windows 7 日本語版	●	●
Windows Server 2003 日本語版	●	●
Windows Server 2008 日本語版	●	●
Windows Server 2008 R2 日本語版	-	●

コンポーネントのインストール

　この記事の手順を試すには、Visual Studio、Visual Basic、Visual C#の開発環境にInputMan for WPF 1.0Jをインストールする必要があります。インストーラは、グレープシティのWebページからダウンロードできます。

　製品のトライアル版一覧ページにてダウンロードしたい製品にチェックを入れ、ページ右上部の［申込フォーム］をクリックしてグレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

参照の追加

　InputMan for WPF 1.0Jをインストールしたら、使用するコンポーネントを追加します。今回のコンポーネントはコードから作成して使用するので、ツールボックスに追加するのではなくプロジェクトの［参照の追加］から設定を行います。追加する参照は、「.NET」にある、コンポーネント名が「GrapeCity.WPF.InputMan」のものです。

［参照の追加］から「GrapeCity.WPF.InputMan」への参照を追加する

GcImeManagerコンポーネントについて

　IME管理コンポーネント「GcImeManager」は、日本語入力システム（IME）による入力プロセス中に、使用可能な読み取り文字列を取得してふりがなを作成する機能や、IMEの状態を設定・取得・保持するといった機能を、GcTextBoxコントロールやTextBoxコントロール（WPF標準コントロール）などのテキスト入力用のコントロールに拡張するコンポーネントです。

　GcImeManagerコンポーネントはページに配置するコンポーネントではないので、この機能を使う場合はツールボックスからページのコンポーネントをドラッグ＆ドロップするのではなく、そのままXAMLのコードに記述します。そのため、前述したとおり、あらかじめ参照設定を行ってください（前ページの「コンポーネントのインストール」参照）。

ふりがなの自動取得

　WPFのデータバインディング機能とIME管理コンポーネントを組み合わせることで、コントロールに入力された変換文字列の「読み」にあたる文字列（ふりがな）を、指定したコントロールへ自動的に表示できます。

　入力された読み取り文字列は、以下の3つのモードに変換できます。

日本語の文字を半角カタカナに変換
日本語の文字を全角カタカナに変換
日本語の文字をひらがなに変換

　ふりがなの形態は、Webサイトの登録ページなどを見てもさまざまで、使用するデータベースの設計に依存しているため、GcImeManagerコンポーネントはどのふりがなにも対応しています。

　ふりがなの設定はとても簡単です。ふりがなを出力したいコントロールのTextプロパティに、Bindingオブジェクトを使ってGcImeManagerのReadingStringプロパティの値を取得し、どのコントロールの入力からふりがなを取得するのかを指定しておきます。BindingオブジェクトのPathプロパティにReadingStringプロパティを設定することで、漢字の入力が行われるたびに指定したコントロールにて読み取り文字列が表示されるようになります。

　次のコードは、TextBox1に入力された日本語からふりがなを取得し、TextBox2に出力します。

<TextBlock Text="好きな漢字を入力してください。" />
<TextBox Name="textBox1" />
<TextBlock Text="ひらがな"/>
<TextBox Name="textBox2" >
    <TextBox.Text>
        <Binding Mode="TwoWay" ElementName="textBox1" Path="(im:GcImeManager.ReadingString)" />
    </TextBox.Text>
</TextBox>

　また、読みをどの文字種に変換するかは、日本語を入力する側のTextBoxでReadingStringKanaModeプロパティを使用して指定します。

　前述のコードを、半角カタカナのふりがなに変換するよう修正すると、以下のようになります。

<TextBlock Text="好きな漢字を入力してください。" />
<TextBox Name="textBox1" im:GcImeManager.ReadingStringKanaMode="KatakanaHalf"/>   
<TextBlock Text="ひらがな"/>
<TextBox Name="textBox2" >
    <TextBox.Text>
        <Binding Mode="TwoWay" ElementName="textBox1" Path="(im:GcImeManager.ReadingString)" />
    </TextBox.Text>
</TextBox>

各文字種とReadingStringKanaModeプロパティの値

設定値	変換文字列
KanaMode.KatakanaHalf	半角カタカナ
KanaMode.Katakana	全角カタカナ
KanaMode.Hiragana	ひらがな

　ふりがなの出力方法も設定できます。これはReadingStringOutputModeプロパティを使用し、上書きにするのか追記にするのかを次の値で指定します。

ReadingStringOutputModeプロパティの値

プロパティ値	説明
ReadingStringOutputMode.None	読み取り文字列を反映させない
ReadingStringOutputMode.Append	末尾に読み取り文字列を追加
ReadingStringOutputMode.Replace	新たな読み取り文字列で上書き

IMEのオンオフの設定と状態の保持

　「.NET Framework」のInputMethodクラスのPreferredImeStateプロパティを使用して、各入力コントロールにフォーカスが移った時点で、IMEを自動的にオンオフさせることができます。InputMethodクラスそのものは.Net Frameworkのクラスですが、GcImeManagerコンポーネントではこのクラスの機能とやり取りをしてIMEの制御を行います。

　また、GcImeManagerコンポーネントでは、次のようにIME状態を保持させることができます。

日本語IMEバーの状態の変更を監視し、状態が変更された場合に現在のIMEバーの状態をターゲット要素に適用します。
要素がフォーカスを取得したときに、日本語IMEバーの現在の状態をバックアップし、前回フォーカスを取得していた時点でのIME状態を再びその要素に適用します。
その要素がフォーカスを失ったときに、上記で保存していたバックアップの内容を復元します。

　わかりやすくいうと、前回IMEで設定した変換入力モードを常に保持させることができる、という機能です。通常、IMEは変換入力モードを一度「全角カナ」や「全角英数」に設定しても、フォーカスが移動するたびに常に「ひらがな」に戻してしまいます。

　これに対して、GcImeManagerコンポーネントでは一度設定した変換入力モードを、フォーカスが行き来しても常に同じ変換入力モードを保持します。変換入力モードを保持するには、AllowSaveImeStatusプロパティを「True」に設定します。

　次のサンプルアプリケーションは、3つのTextBoxコントロールを以下のように設定しています。

IMEの設定はなにも行っていない
AllowSaveImeStatusを「true」に設定しIMEの状態を保持
IMEの状態を「ひらがな」に設定

　この状態で、「2」のTextBoxコントロールだけ変換入力モードを変えても、常にそのモードを保持します。

IMEの状態の保持の動作-1

IMEの状態の保持の動作-2

IMEの状態の保持の動作-3

WPFアプリケーションの作成

　では、アプリケーションを作成しましょう。今回作成するサンプルアプリケーションには、上半分にIMEの変換入力モードを保持したTextBoxコントロールを使った入力インターフェイス、下半分にふりがなを自動入力するTextBoxコントロールを使った入力インターフェイスを配置します。

GUIのデザイン

　使用するコントロールは、TextBox、TextBlock、Borderの3つで、いずれもWPF標準のコントロールです。GcImeManagerコンポーネントは、XAMLコードから作成します。

GUIのデザイン

IMEの変換入力モードを保持するGcImeManagerコンポーネントの設定

　まず、IMEの変換入力モードを保持するGcImeManagerコンポーネントの設定を行います。InputMethodクラスを使用してIMEのオンオフ設定とデフォルトの変換入力モードの設定を行います。

　新しいWPFアプリケーション用プロジェクトを作成したら、「GrapeCity.WPF.InputMan」への参照を追加し（「コンポーネントのインストール」参照）、次の1行を加えます。

xmlns:im="http://schemas.grapecity.com/windows/2010/inputman"

　グリッドを2行に分け、上の行にBorder、TextBlock、TextBoxコントロールを3つずつ配置します。

<Grid Height="351" Width="501">
    <Grid.RowDefinitions>
        <RowDefinition Height="138*" />
        <RowDefinition Height="239*" />
    </Grid.RowDefinitions>

    <Border BorderBrush="Olive" BorderThickness="2" Height="92" HorizontalAlignment="Left" Margin="20,22,0,0" 
            Name="border2" VerticalAlignment="Top" Width="460" Background="GreenYellow" />
        
    <TextBlock Name="textBlock1" Text="性" Margin="69,38,0,45" HorizontalAlignment="Left" Width="35" />
    <TextBox Height="25" HorizontalAlignment="Left" Margin="94,35,0,0" Name="textBox1" VerticalAlignment="Top" Width="87" />

    <TextBlock Height="22" HorizontalAlignment="Right" Margin="0,38,279,0" Name="textBlock2" Text="名" VerticalAlignment="Top" Width="28" />
    <TextBox Height="23" HorizontalAlignment="Left" Margin="223,37,0,0" Name="textBox2" VerticalAlignment="Top" Width="91" />

    <TextBlock Height="18" HorizontalAlignment="Left" Margin="30,73,0,0" Name="textBlock3" Text="ローマ字" VerticalAlignment="Top" Width="62" />
    <TextBox Height="26" HorizontalAlignment="Left" Margin="94,71,0,0" Name="textBox3" VerticalAlignment="Top" Width="252" />
</Grid>

　「性」入力用TextBoxコントロールの上で右クリックし、ショートカットメニューから［IMEの設定...］を選びます。「IME状態の設定」ダイアログが表示されるので、このダイアログでIMEの状態を設定します。

ショートカットメニューから「IMEの設定...」を選択

　まず、「ImeConversionMode」リストの下にある［パターンによる設定］ボタンを押し、「ひらがな」を選びます。これが、変換入力モードの設定です。

「パターンによる設定」ボタンを押し「ひらがな」を選ぶ

　続いて、「PreferredImeState」の［On］をクリックします。これで、フォーカスを受け取ると自動的にIMEがひらがな入力モードでオンになります。そして「AllowSaveImeStatus」にチェックが付いていることを確認します。これで、このTextBoxコントロールはIMEの状態が保存されるようになります。

　「名」用のTextBoxコントロールも、同じようにIMEの状態を設定します。「ローマ字」用TextBoxコントロールでは、IMEは使用しないため「PreferredImeState」の［Off］をクリックします。

「PreferredImeState」の［Off］をクリック

コンポーネントのライセンス処理

　作成したアプリケーションを実行すると、「アプリケーションにライセンスが正しく付与されていません」というエラーが発生する場合があります。

ライセンスのエラー画面

　これは、アプリケーションにライセンスが正しく組み込まれていない場合に起こります。ライセンス情報ファイルは、どのコンポーネントがライセンス付与されているかを識別するための情報が記述されています。

　通常は、上記ライセンス処理を採用したコンポーネントをフォームに配置することで、Visual Studioによって自動的にライセンス情報ファイルが作成され、プロジェクトに追加されます。ただし、コードからコンポーネントを作成した場合などは、このライセンス情報ファイルが作成されないため、手動で作成する必要があります。

　ライセンス情報ファイルは、「licenses.licx」という名前のテキストファイルになっているので、以下の手順でこの「licenses.licx」ファイルをプロジェクトに追加します。

ソリューションエクスプローラー上のプロジェクトを右クリックし、［追加］-［新しい項目］を選択します。［テキストファイル］を選択し、「licenses.licx」という名前のテキストファイルを作成し追加します。

「licenses.licx」という名前のテキストファイルを作成し追加する
ファイルが追加されたらプロパティを参照し、ビルドアクションが「埋め込まれたリソース」となっているか確認してください。

「埋め込まれたリソース」を確認する

licenses.licxファイルに、次のライセンス情報を記述して、保存すれば完了です。

GrapeCity.Windows.InputMan.GcTextBox, GrapeCity.WPF.InputMan, Version=1.0.2010.1108, Culture=neutral, PublicKeyToken=0ba7528ecf28c40a

ふりがなの自動入力を行うGcImeManagerコンポーネントの設定

　今度は、グリッドの下の行にTextBoxコントロールを配置し、ふりがなの自動入力を行うGcImeManagerコンポーネントを設定します。ふりがな入力は、「ひらがな」と「半角カナ」の2種類を作成します。それぞれ、別々のTextBoxコントロールに設定します。

　Borderコントロールを1つと、TextBox・TextBlockコントロールを4つ配置します。

<!-- ふりがなの自動入力の設定 -->
<Border BorderBrush="SlateBlue" BorderThickness="2" Grid.Row="1" Height="178" HorizontalAlignment="Left" 
        Margin="20,20,0,0" Name="border1" VerticalAlignment="Top" Width="462" Background="Aqua" />

<TextBlock Grid.Row="1" Height="36" HorizontalAlignment="Left" Margin="30,37,0,0" Name="textBlock4" Text="好きな漢字を入力してください。" 
           VerticalAlignment="Top" Width="101" TextWrapping="Wrap" />
<TextBox Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="144,37,0,0" Name="textBox4" VerticalAlignment="Top" Width="324" />

<TextBlock Grid.Row="1" Height="25" HorizontalAlignment="Left" Margin="81,79,0,0" Name="textBlock5" Text="ひらがな"
           VerticalAlignment="Top" Width="50" />
<TextBox Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="143,76,0,0" Name="textBox5" VerticalAlignment="Top" Width="325">
</TextBox>

<TextBlock Grid.Row="1" Height="36" HorizontalAlignment="Left" Margin="30,115,0,0" Name="textBlock6" Text="好きな漢字を入力してください。" 
           VerticalAlignment="Top" Width="101" TextWrapping="Wrap" />
<TextBox Grid.Row="1" Height="21" HorizontalAlignment="Left" Margin="142,115,0,0" Name="textBox6" VerticalAlignment="Top" Width="326" />

<TextBlock Grid.Row="1" Height="21" HorizontalAlignment="Left" Margin="81,157,0,0" Name="textBlock7" Text="ｶﾀｶﾅ" VerticalAlignment="Top" Width="31" />
<TextBox Grid.Row="1" Height="27" HorizontalAlignment="Left" Margin="145,154,0,0" Name="textBox7" VerticalAlignment="Top" Width="321">
</TextBox>

　最初のTextBoxコントロール「textBox4」で、ふりがなの文字種を「ひらがな」に、ふりがなの入力モードを「追記」に設定し、IMEをオンにします。

　ふりがなの文字種は、GcImeManagerクラスの「ReadingStringKanaMode」プロパティを使用し、設定値を「Hiragana」にします。入力モードは、GcImeManagerクラスの「ReadingStringOutputMode」プロパティを使用し、設定値を「Append」にします。IMEのオンは、InputMethodクラスの「PreferredImeState」プロパティを「On」にします。

<TextBox Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="144,37,0,0" Name="textBox4" VerticalAlignment="Top" Width="324"
         im:GcImeManager.ReadingStringKanaMode="Hiragana"  im:GcImeManager.ReadingStringOutputMode="Append" InputMethod.PreferredImeState="On" />

　ふりがなを受け取るTextBoxコントロール「textBox5」では、Textプロパティに「Binding」オブジェクトを設定し、ふりがなの送り先を「ElementName」プロパティと「Path」プロパティで設定します。

<TextBox Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="143,76,0,0" Name="textBox5" VerticalAlignment="Top" Width="325">
    <TextBox.Text>
        <Binding Mode="TwoWay" ElementName="textBox4" Path="(im:GcImeManager.ReadingString)" />
    </TextBox.Text>
</TextBox>

　これで、TextBoxコントロール「textBox4」に入力された文字列のふりがなが、TextBoxコントロール「textBox5」に「ひらがな」で入力されます。「追記」モードでは、一度ふりがなを入力したのちに続けて入力すると、作成されたふりがなのあとに続けてふりがなが入力されます。

「textBox4」に入力された文字列のふりがなが「textBox5」に「ひらがな」で入力される

　残りの2つのTextBoxコントロールも、同じように作成します。ただし、今度はふりがなを半角カナにするので、入力側のTextBoxコントロールのReadingStringKanaModeプロパティを「KatakanaHalf」に設定します。また、ふりがなの入力モードを「上書き」モードにしますので、ReadingStringOutputModeプロパティを「Replace」にします。

　「上書き」モードでは、一度ふりがなを入力したのちに続けて入力すると、作成されたふりがなが入れ変わります。

<TextBlock Grid.Row="1" Height="36" HorizontalAlignment="Left" Margin="30,115,0,0" Name="textBlock6" Text="好きな漢字を入力してください。" 
           VerticalAlignment="Top" Width="101" TextWrapping="Wrap" />
<TextBox Grid.Row="1" Height="21" HorizontalAlignment="Left" Margin="142,115,0,0" Name="textBox6" VerticalAlignment="Top" Width="326"
         im:GcImeManager.ReadingStringKanaMode="KatakanaHalf"  im:GcImeManager.ReadingStringOutputMode="Replace"  InputMethod.PreferredImeState="On" />

<TextBlock Grid.Row="1" Height="21" HorizontalAlignment="Left" Margin="81,157,0,0" Name="textBlock7" Text="ｶﾀｶﾅ" VerticalAlignment="Top" Width="31" />
<TextBox Grid.Row="1" Height="27" HorizontalAlignment="Left" Margin="145,154,0,0" Name="textBox7" VerticalAlignment="Top" Width="321">
    <TextBox.Text>
        <Binding Mode="TwoWay" ElementName="textBox6" Path="(im:GcImeManager.ReadingString)" />
    </TextBox.Text>
</TextBox>

半角カナのふりがなを作成する

XAMLコード全文

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:im="http://schemas.grapecity.com/windows/2010/inputman"
    Title="MainWindow" Height="396" Width="548">

    <Window.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF6400B0" Offset="0" />
            <GradientStop Color="White" Offset="1" />
            <GradientStop Color="#FF7A7FD7" Offset="1" />
        </LinearGradientBrush>
    </Window.Background>
    
    <Grid Height="351" Width="501">
        <Grid.RowDefinitions>
            <RowDefinition Height="138*" />
            <RowDefinition Height="239*" />
        </Grid.RowDefinitions>

        <!-- IMEの状態を保持する設定 -->
        <Border BorderBrush="Olive" BorderThickness="2" Height="92" HorizontalAlignment="Left" Margin="20,22,0,0" 
                Name="border2" VerticalAlignment="Top" Width="460" Background="GreenYellow" />

        <TextBlock Name="textBlock1" Text="性" Margin="69,38,0,45" HorizontalAlignment="Left" Width="35" />
        <TextBox Height="25" HorizontalAlignment="Left" Margin="94,35,0,0" Name="textBox1" VerticalAlignment="Top" Width="87" 
                 InputMethod.PreferredImeState="On" InputMethod.PreferredImeConversionMode="Native, FullShape" im:GcImeManager.AllowSaveImeStatus="True" />

        <TextBlock Height="22" HorizontalAlignment="Right" Margin="0,38,279,0" Name="textBlock2" Text="名" VerticalAlignment="Top" Width="28" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="223,37,0,0" Name="textBox2" VerticalAlignment="Top" Width="91"
                 InputMethod.PreferredImeState="On" InputMethod.PreferredImeConversionMode="FullShape, Native" im:GcImeManager.AllowSaveImeStatus="True" />

        <TextBlock Height="18" HorizontalAlignment="Left" Margin="30,73,0,0" Name="textBlock3" Text="ローマ字" VerticalAlignment="Top" Width="62" />
        <TextBox Height="26" HorizontalAlignment="Left" Margin="94,71,0,0" Name="textBox3" VerticalAlignment="Top" Width="252" 
                 InputMethod.PreferredImeState="Off"/>

        <!-- ふりがなの自動入力の設定 -->
        <Border BorderBrush="SlateBlue" BorderThickness="2" Grid.Row="1" Height="178" HorizontalAlignment="Left" 
                Margin="20,20,0,0" Name="border1" VerticalAlignment="Top" Width="462" Background="Aqua" />

        <TextBlock Grid.Row="1" Height="36" HorizontalAlignment="Left" Margin="30,37,0,0" Name="textBlock4" Text="好きな漢字を入力してください。" 
                   VerticalAlignment="Top" Width="101" TextWrapping="Wrap" />
        <TextBox Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="144,37,0,0" Name="textBox4" VerticalAlignment="Top" Width="324"
                 im:GcImeManager.ReadingStringKanaMode="Hiragana"  im:GcImeManager.ReadingStringOutputMode="Append" InputMethod.PreferredImeState="On" />

        <TextBlock Grid.Row="1" Height="25" HorizontalAlignment="Left" Margin="81,79,0,0" Name="textBlock5" Text="ひらがな"
                   VerticalAlignment="Top" Width="50" />
        <TextBox Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="143,76,0,0" Name="textBox5" VerticalAlignment="Top" Width="325">
            <TextBox.Text>
                <Binding Mode="TwoWay" ElementName="textBox4" Path="(im:GcImeManager.ReadingString)" />
            </TextBox.Text>
        </TextBox>

        <TextBlock Grid.Row="1" Height="36" HorizontalAlignment="Left" Margin="30,115,0,0" Name="textBlock6" Text="好きな漢字を入力してください。" 
                   VerticalAlignment="Top" Width="101" TextWrapping="Wrap" />
        <TextBox Grid.Row="1" Height="21" HorizontalAlignment="Left" Margin="142,115,0,0" Name="textBox6" VerticalAlignment="Top" Width="326"
                 im:GcImeManager.ReadingStringKanaMode="KatakanaHalf"  im:GcImeManager.ReadingStringOutputMode="Replace"  InputMethod.PreferredImeState="On" />

        <TextBlock Grid.Row="1" Height="21" HorizontalAlignment="Left" Margin="81,157,0,0" Name="textBlock7" Text="ｶﾀｶﾅ" VerticalAlignment="Top" Width="31" />
        <TextBox Grid.Row="1" Height="27" HorizontalAlignment="Left" Margin="145,154,0,0" Name="textBox7" VerticalAlignment="Top" Width="321">
            <TextBox.Text>
                <Binding Mode="TwoWay" ElementName="textBox6" Path="(im:GcImeManager.ReadingString)" />
            </TextBox.Text>
        </TextBox>
    </Grid>
</Window>