日本仕様の入力フォームを持ったSilverlightアプリケーションを作成しよう～InputMan for SliverlightでWebアプリを強化する

2010/12/28 14:00

『生年月日欄』の構成

リスト7 『生年月日欄』のXAML定義

<im:GcDateTime Grid.Row="4" Grid.Column="1" 
               Name="Birth_Date" 
               WatermarkDisplayNull="任意項目" 
               WatermarkDisplayNullForeground="#80000000" 
               WatermarkNull="生年月日を入力してください。" 
               WatermarkNullForeground="#80000000" 
               VerticalContentAlignment="Stretch" VerticalAlignment="Center" 
               HighlightText="Field" >
    <im:GcDateTime.DisplayFieldSet>
        <im:DateDisplayFieldSet>
            <im:DateYearDisplayField />
            <im:DateLiteralDisplayField Text="/" />
            <im:DateMonthDisplayField />
            <im:DateLiteralDisplayField Text="/" />
            <im:DateDayDisplayField />
        </im:DateDisplayFieldSet>
    </im:GcDateTime.DisplayFieldSet>
    <im:GcDateTime.FieldSet>
        <im:DateFieldSet>
            <im:DateYearField />
            <im:DateLiteralField Text="/" />
            <im:DateMonthField />
            <im:DateLiteralField Text="/" />
            <im:DateDayField />
        </im:DateFieldSet>
    </im:GcDateTime.FieldSet>
    <im:GcDateTime.Effect>
        <DropShadowEffect/>
    </im:GcDateTime.Effect>
    <im:GcDateTime.Value>
        <Binding Path="BirthDay" Mode="TwoWay"/>
    </im:GcDateTime.Value>
</im:GcDateTime>

入力欄コード解説

「Grid.Row="4" Grid.Column="1"」には「Birth_Date」という名前でGcDateTimeコントロールを配置しています。
WatermarkDisplayNullプロパティで入力欄に値が設定されていないときの表示を指定しています。コントロールがフォーカスを得た時に入力欄に値が設定されていない場合は、WatermarkNullプロパティの内容が表示されます。それぞれ少し薄い色で表示する事で、実際の入力値と区別がつくようにしています。
「GcTextBox.Effect」を指定して影付きの入力欄にします。
「<Binding Path=" BirthDay " Mode="TwoWay"/>」をTextプロパティに指定して、GridのDataContextに割り当てたクラスのBirthDayプロパティ値と連携します。

『コメント欄』の構成

　『コメント欄』は複数行が入力できるようになっています。また、各行は点線で区切られており見栄えの良い複数行入力欄を実現しています。

図8 複数行入力欄の例

リスト8 『コメント欄』のXAML定義

<im:GcTextBox Grid.Row="5" Grid.Column="1" 
              Name="Comment_TextBox" 
              WatermarkDisplayNull="任意項目"
              WatermarkDisplayNullForeground="#80000000" 
              WatermarkNull="連絡事項を入力してください。" 
              WatermarkNullForeground="#80000000" 
              Multiline="True" MaxLength="2000" MaxLengthUnit="Byte" 
              GridLineStyle="Dotted" GridLineBrush="Black" 
              TextWrapping="Wrap" Margin="0,8,0,0" HighlightText="True">
    <im:GcTextBox.Effect>
        <DropShadowEffect/>
    </im:GcTextBox.Effect>
    <im:GcTextBox.Text>
        <Binding Path="Comment" Mode="TwoWay"/>
    </im:GcTextBox.Text>
</im:GcTextBox>

入力欄コード解説

「Grid.Row="5" Grid.Column="1"」にはComment_TextBoxという名前でGcTextBoxコントロールを配置しています。
WatermarkDisplayNullプロパティで入力欄に値が設定されていないときの表示を指定しています。コントロールがフォーカスを得た時に入力欄に値が設定されていない場合は、WatermarkNullプロパティの内容が表示されます。それぞれ少し薄い色で表示する事で、実際の入力値と区別がつくようにしています。
「Multiline="True" MaxLength="2000" MaxLengthUnit="Byte"」として、複数行サポート、最大2000バイトまで入力可能にしています。
「GcTextBox.Effect」を指定して影付きの入力欄にしています。
「<Binding Path=" Comment " Mode="TwoWay"/>」をTextプロパティに指定して、GridのDataContextに割り当てたクラスのCommentプロパティ値と連携します。

コードによるふりがな連携

　『本名欄』に名前を入力すると『フリガナ欄』と自動的に連携し、半角カタカナでふりがなが記入される方法をヘルプで調べると、TextプロパティにBindingする例が掲載されています。しかし、今回のサンプルではデータの設定手段としてBindingを使ってしまっているので、ヘルプに記述されているサンプル方法では、ふりがな連携が実現できません。

　つまりこのような場合は、Bindingするのはデータなのか、ふりがななのかを決めなければなりません。ふりがなだけデータとBindingできないのも一貫性がないので、ふりがなはBindingではなくGcImeManagerのイベントを使って連携するようにしたいと思います。

　なお、コードによる連携でもBindingによるものでも、『本名欄』のXAML定義に記述したGcImeManager関連の定義は同じになります。

リスト9 コードでのふりがな連携の例

Private WithEvents current As GrapeCity.Windows.InputMan.GcImeManager

Private Sub MainPanel_Loaded(ByVal sender As System.Object,
                             ByVal e As System.Windows.RoutedEventArgs)
　　　　　　　：
　　　　　　（中略）
　　　　　　　：
    Me.current = GrapeCity.Windows.InputMan.GcImeManager.Current
End Sub

Private Sub Current_ResultStringChanged(ByVal sender As Object,
                            ByVal e As GrapeCity.Windows.InputMan.ResultStringEventArgs) _
                                Handles current.ResultStringChanged
    If TypeOf e.Source Is GrapeCity.Windows.InputMan.GcTextBox AndAlso
        e.Source.Name = "Name_TextBox" Then
        Local.Kana += e.ReadString
    End If
End Sub

　GcImeManagerが『本名欄』からふりがなを受信すると、ResultStringChangedイベントが発生します。そのイベントで、Current_ResultStringChangedイベントプロシージャが起動されるとName_TextBoxでの入力かを確認してから、e.ReadStringを『フリガナ欄』に追記します。

検証インジケータ

　検証インジケータは、Bindingを使って各コントロールのイベントで検証する事もできます。今回のサンプルでは、［登録］ボタンをクリックしたときに一括して必須項目が未入力かどうかを判定しています。

　このように［登録］ボタンをクリックするなど利用者が一息ついたタイミングで一括してチェックするというのも、入力をしてもらいやすくする工夫の一つです。もちろん、そのためにはFormatプロパティやAutoConvertプロパティを駆使して、正しい入力がそれぞれの欄で行いやすくしておく必要があります。

図9 ボタンクリックでの検証インジケータ

まとめ

　InputMan for Silverlightを使えば業務アプリケーション、例えば、インターネットから注文するときの『住所入力欄』や『クレジットカード入力欄』などにおける、利用者の「何を入れていいの？」という負担を軽減できると思います。

　負荷の軽減とは、つまりは「面倒だからいいか」と注文してもらえず（または資料請求などが行われず）チャンスを逃すことにつながってきます。日本におけるSilverlightの普及率が70％を超えている現状を考えると、HTMLベースのシンプルな画面だけではなくInputMan for Silvelgihtを使った使いやすい画面の提供も必須な部類になりつつあるのではないでしょうか。

この記事は参考になりましたか？

印刷用を表示

現役エンジニア直伝！「現場」で使えるコンポーネント活用術（InputMan）連載記事一覧: デスクトップでもタッチしたい　「InputMan for Windows Forms 7....

「InputMan」＋「JPAddress」で楽々住所入力

「InputMan for WPF」で操作性の高いUIを開発　～Windowsフォームとは...

もっと読む

この記事の著者: 初音玲（ハツネアキラ）

　国内SIerのSEでパッケージ製品開発を主に行っており、最近は、空間認識や音声認識などを応用した製品を手掛けています。　個人的には、仕事の内容をさらに拡張したHoloLensなどのMRを中心に活動しています。　Microsoft MVP for Windows Development ブログ：http://hatsune.hatenablog.jp/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事