スペルチェック機能を持ったワープロ風WPFアプリケーションの作成

ComponentOne Studioを活用したWindowsフォームアプリケーションの作成

　今回は、C1RichTextBox・C1RichTextBoxToolbar・C1SpellCheckerコントロールを使い、Micorosoft Wordのような文書作成アプリケーションを作成してみました。

はじめに

　2013年9月にリリースされたComponentOne Studio 2013J v2では、新しいコンポーネントがいくつか追加されています。

　その中には、WPFで利用可能な非常に高機能なリッチテキストエディタ「RichTextBox for WPF」と、英語、スペイン語、フランス語などの複数の言語（日本語は非対応）に対応した使いやすく効率的なスペルチェックコントロール「SpellChecker for WPF」があります。

　これらのコントロールを使うと、WPFアプリケーションにMicrosoft Wordのようなスペルチェックを行えるワードプロセッサ機能を持たせることができます。そこで今回は、この2つのコントロールとRichTextBoxコントロールに連動して動作するツールバー「RichTextBox.Toolbar」を使い、Micorosoft Wordのような文書作成アプリケーションを作成してみました。

Micorosoft Wordのような文書作成アプリケーションが簡単に作れる

スペルチェック機能も標準装備

対象読者

　Visual Basic 2010／2012、またはVisual C# 2010／2012を使ってプログラムを作ったことがある人。

必要な環境

　Visual Basic 2010／2012、Visual C# 2010／2012、Visual Studio 2010／2012、SQL Server Expressでプログラムが作れる環境。

　なお、本プログラムは次の環境で開発・動作確認を行っています。

• OS：Windows 7
• 開発Tool：Visual Studio 2010、.NET Framework 4

プログラム実行時の注意事項

　 本稿の実行ファイル（バイナリファイル）を動かすには、zipファイルに同梱してある以下のファイルが必要になります（.NET Framework 4でのみご使用いただけます）。

ファイル名	説明
C1.WPF.4	本体アセンブリ
C1.WPF.RichTextBox.4	本体アセンブリ
C1.WPF.RichTextBox.Toolbar.4	本体アセンブリ
C1.WPF.SpellChecker.4	本体アセンブリ
C1Spell_en-US.dct	辞書ファイル（英語版）

　このファイルを、実行プログラムと同じフォルダに格納します。

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

　トライアル版は、グレープシティのWebページから申し込みできます。

　トライアル申込フォームが表示されますので、必要情報を入力して申し込むとトライアル版のダウンロード手順を記載したE-Mailが送られてきます。その手順にそってダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。

　制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールと参照の追加

　ComponentOne Studio 2013Jをインストールしたら、プロジェクトにコントロールを追加します。

　ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。

　追加するコンポーネントは、アセンブリ名が「C1.WPF.RichTextBox.4」の「RichTextBox」と、「C1.WPF.RichTextBox.Toolbar.4」の「RichTextBoxToolbar」コントロールです。

アセンブリ名が「C1.WPF.RichTextBox.4」の「RichTextBox」と、
「C1.WPF.RichTextBox.Toolbar.4」の「RichTextBoxToolbar」コントロールを選択する

　これらのコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。

ファイル名	説明
C1.WPF.4	本体アセンブリ
C1.WPF.RichTextBox.4	本体アセンブリ
C1.WPF.RichTextBox.Toolbar.4	本体アセンブリ

　また、SpellChecker for WPFを使用するために、プロジェクトに以下のランタイムライブラリへの参照を追加してください。

ファイル名	説明
C1.WPF.SpellChecker.4	本体アセンブリ

C1RichTextBoxコントロールの概要

　RichTextBox for WPFのC1RichTextBoxコントロールは、WPF用の市場で最も充実したリッチテキストエディタです。入力されたテキストに対しさまざまな書式設定を行い、行の自動折り返し、HTML形式とRTF形式の文書のインポート/エクスポート、テーブルのサポート、画像、注釈などを提供します。

　リッチテキストボックスに連動して動作する、専用のツールバー「C1RichTextBoxToolbar」コントロールが用意されており、編集やフォント設定、段落、画像や記号の挿入、表の作成機能があらかじめ実装されています。

　また、専用の辞書を用いて入力データに対してスペルチェックを自動で行う機能を持っていますので、コントロールを配置し連結させるだけで、すぐに高機能エディタを作成できます。

　C1RichTextBoxコントロールの主な特徴は以下のとおりです。

インポートとエクスポートの形式

　C1RichTextBoxコントロールは、RTF、HTML、およびプレーンテキストのインポートとエクスポートをサポートします。既存のリッチテキストまたはHTMLをC1RichTextBoxコントロールにロードし、ドキュメントを編集し、RTFまたはHTMLに再度エクスポートする、ということも可能です。

さまざまな書式の適用

　複数のフォント、装飾、色、テーブル、画像、リストなどを含むテキストを編集して書式設定できます。

言語のサポート

　C1RichTextBoxコントロールは、中国語、日本語、韓国語の各言語をサポートするようになりました。

C1RichTextBoxToolbarコントロールとの連動機能

　C1RichTextBoxコントロールと組み合わせて、C1RichTextBoxToolbarコントロールを使用することができます。また、自分でカスタムのツールバーを作成することも可能です。

　C1RichTextBoxToolbarコントロールの各ボタンには、フォントの種類、フォントサイズ、フォント拡大、フォント縮小、斜体、下線、大文字小文字の変更、下付き、上付き、テキストの色、テキスト強調表示の色、左寄せ、中央寄せ、右寄せ、均等割り付け、箇条書き、番号付き、テキスト折り返し、罫線の太さ、罫線の色、段落の色、マージン、パディング、画像の挿入、記号の挿入、ハイパーリンクの挿入、ハイパーリンクの削除、切り取り、コピー、貼り付け、元に戻す、やり直す、検索と置換、スペルチェックなど、文書作成・編集に必要な標準的な機能が組み込まれています。

　そして、RichTextBoxToolbarコントロールは、C1Toolbarコントロールを使用して完全なカスタマイズが可能です。

ページのズーム

　RichTextBoxコントロールは、印刷レイアウトでも下書きビューでもページズームをサポートします。

テキストのスペルチェック

　RichTextBoxコントロールは、C1SpellCheckerコンポーネントを使用して次の2種類のスペルチェックをサポートします。

モーダルスペルチェック

　［スペル］ダイアログボックスを表示して、ドキュメント内のスペルミスを個別に選択します。スペルミスを無視したり、正しいスペルを入力するか候補リストから選択してミスを修正したり、その単語を辞書に追加することができます。詳細については、「モーダルスペルチェック」を参照してください。

入力中スペルチェック

　 入力中にスペルミスを通常は赤い波線の下線で強調表示します。ドキュメント内のスペルミスを右クリックすると、無視する、辞書に追加する、スペル候補から選択してスペルミスを自動的に修正するなどのオプションメニューが表示されます。

元に戻す/やり直しのサポート

　ボタンをクリックして、簡単に変更を元に戻したり、やり直すことが可能です。

クリップボードのサポート

　C1RichTextBoxコントロールは、クリップボードを完全にサポートしており、C1RichTextBoxコントロール内での切り取り/コピー/貼り付けの機能を実装しています。

注釈

　C1RichTextBoxコントロールを使用して、ドキュメントに強調表示やコメント、メモ、備考、または説明などの注釈を追加できます。

充実したドキュメントオブジェクトモデル

　WPFのDocumentクラスをベースにしたC1RichTextBoxコントロールの充実したドキュメントオブジェクトモデル（DOM）は、画像、リスト、ハイパーリンク、境界、テキスト範囲の背景色/前景色などをサポートします。この豊富な機能を持つDOMを使用することで、プログラムでドキュメントの作成および変更が可能です。

超高速

　C1RichTextBoxコントロールでは、極めて高速にドキュメントをロードし、直ちに編集を開始できます。

C1RichTextBoxToolbarコントロールの概要

　C1RichTextBoxToolbarコントロールは、C1RichTextBoxコントロールを簡単にテキストエディタに変えるだけの十分な機能を備えた、リボン形式のツールバーです。C1RichTextBoxToolbarコントロールは、完全なカスタマイズを可能にするC1Toolbarコントロールに基づいてます。

　C1RichTextBoxToolbarコントロールをC1RichTextBoxコントロールに接続するには、次のXAMLコードのようにC1RichTextBoxToolbarコントロールのRichTextBoxプロパティに、C1RichTextBoxコントロールの名前を指定します。

<c1:C1RichTextBoxToolbar Name="C1RichTextBoxToolbar1" RichTextBox="{Binding ElementName= C1RichTextBox1}" Width="732" HorizontalAlignment="Left" />

<c1:C1RichTextBox Name="C1RichTextBox1" Height="387" Width="733" />

　アプリケーションにC1RichTextBoxToolbarコントロールを追加すると、次のようなツールバーがアプリケーションに実装されます。

C1RichTextBoxToolbarコントロール

　ツールバーは、2つのタブと9つのグループで構成されています。

［ホーム］タブ

　［編集］［フォント］［段落］［挿入］および［ツール］の5つの要素グループが定義されています。

［表］タブ

　［テーブル］［行と列］［マージ］［セル］の4つの要素グループが定義されてます。

ツールバーは2つのタブと9つのグループで構成されている（ヘルプより抜粋）

［編集］グループ

　［編集］グループは、コピー、貼り付け、元に戻すなどの標準的な編集ツールを提供します。

貼り付け

　［貼り付け］ボタンをクリックすると、選択したテキストがC1RichTextBoxコントロールに貼り付けられます。テキストを選択した状態で［Ctrl］+［V］キーを押しても、テキストを貼り付けることができます。

切り取り

　［切り取り］ボタンをクリックすると、選択したテキストが切り取られ、クリップボードに貼り付けられます。テキストを選択した状態で［Ctrl］+［X］キーを押しても、テキストを切り取ることが可能です。

コピー

　［コピー］ボタンをクリックすると、選択したテキストをコピーして、C1RichTextBoxコントロールまたは他のアプリケーションに貼り付けることが可能です。テキストを選択した状態で［Ctrl］+［C］キーを押しても、テキストをコピーできます。

元に戻す

　［元に戻す］ボタンをクリックすると、前にC1RichTextBoxコントロールのコンテンツに加えられた変更が元に戻ります。［元に戻す］ボタンは、変更が行われるまではアクティブになりません。［Ctrl］+［Z］キーを押しても、変更を元に戻すことが可能です。

やり直し

　［元に戻す］ボタンをクリックした後に［やり直し］ボタンをクリックすると、前に元に戻した変更をやり直します。［やり直し］ボタンは、［元に戻す］ボタンがクリックされるまでアクティブになりません。［Ctrl］+［Y］キーを押しても、変更をやり直すことができます。

書式のコピー/貼り付け

　［書式のコピー/貼り付け］ボタンをクリックすると、選択したテキストの書式設定をコピーして、他のテキストに適用できます。

［フォント］グループ

　［フォント］グループには、C1RichTextBoxコントロールで使用されるフォントをカスタマイズするためのオプションがあります。

フォント

　［フォント］オプションは、C1RichTextBoxコントロールのテキストに適用されるフォントを選択できるドロップダウンリストです。デフォルトのフォントは、Portable User Interfaceです。

フォントサイズ

　［フォントサイズ］オプションは、C1RichTextBoxコントロールのテキストに適用されるフォントのサイズを選択できるドロップダウンリストです。デフォルトのフォントサイズは9です。

フォント拡大

　［フォント拡大］ボタンをクリックすると、選択したテキストのサイズが大きくなります。

フォント縮小

　［フォント縮小］ボタンをクリックすると、選択したテキストのサイズが小さくなります。

太字

　［太字］ボタンをクリックすると、選択したテキストに太字が適用されるか、太字が削除されます。

斜体

　［斜体］ボタンをクリックすると、選択したテキストに斜体が適用されるか、斜体が削除されます。

下線

　［下線］ボタンをクリックすると、選択したテキストに下線が適用されるか、下線が削除されます。

大文字小文字の変更

　［大文字小文字の変更］オプションは、選択したテキストの大文字小文字を変更するためのオプションをリストするドロップダウンリストです。オプションには、［小文字］［大文字］［単語の先頭を大文字にする］および［大文字小文字の切り替え］（小文字を大文字に、大文字を小文字にする）があります。

上付き

　［上付き］ボタンをクリックすると、選択したテキストが上付き文字テキスト（上付き文字ではないテキストより上に表示される）になります。

下付き

　［下付き］ボタンをクリックすると、選択したテキストが下付き文字テキスト（上付き文字ではないテキストより下に表示される）になります。

フォントの色

　［フォントの色］オプションは、選択されたテキストの色を変更するための標準的な色をリストするドロップダウンカラーピッカーです。

強調テキストの色

　［強調テキストの色］オプションは、選択されたテキストを囲む背景の色を変更するための標準的な色をリストするドロップダウンカラーピッカーです。

［段落］グループ

　［段落］グループには、C1RichTextBoxコントロールで使用される段落設定をカスタマイズするためのオプションがあります。

テキスト左揃え

　［テキスト左揃え］オプションは、選択したテキストを左揃えで配置します。これはデフォルトの配置オプションです。

テキスト中央揃え

　［テキスト中央揃え］オプションは、選択したテキストをC1RichTextBoxコントロールの中央に配置します。

テキスト右揃え

　［テキスト右揃え］オプションは、選択したテキストを右揃えで配置します。

均等揃え

　［均等揃え］オプションは、選択されたテキストに空間を入れて均等に配置します。

箇条書き

　［箇条書き］オプションは、選択されたテキストに箇条書きを追加または削除するボタンです。

番号付き

　［番号付き］オプションは、選択されたテキストに番号を追加または削除するボタンです。

テキスト折り返し

　［テキスト折り返し］オプションは、テキストの行をC1RichTextBoxコントロール内に収まるように折り返すかどうかを判断します。デフォルトでは、テキストは折り返されます。

境界線

　［境界線］ドロップダウンボックスを使用すると、境界線の色、太さ、境界線を表示する場所を設定できます。

段落の色

　［段落の色］オプションは、段落全体の背景の色を変更するための標準的な色をリストするドロップダウンカラーピッカーです。デフォルトでは、このオプションは［白］に設定されます。

マージン

　［マージン］ドロップダウンボックスを使用すると、テキストの周囲の左、右、上、および下のマージンの大きさを設定できます。デフォルトでは、左、右、上マージンの値は0、下マージンの値10に設定されます。

パディング

　［パディング］ドロップダウンボックスを使用すると、選択されたテキストの周囲の左、右、上、および下のパディングの大きさを設定できます。デフォルトでは、これらの値は0に設定され、パディングはありません。

［挿入］グループ

　［挿入］グループを使用すると、C1RichTextBoxコントロール内のコンテンツを挿入できます。

画像の挿入

　［画像の挿入］ボタンをクリックすると、［画像の挿入］ダイアログボックスが表示され、挿入する画像を参照して選択したり、画像のURLを入力したりできます。

記号の挿入

　［記号の挿入］オプションをクリックすると、C1RichTextBoxコントロールに挿入する記号を選択するためのドロップダウンダイアログボックスが表示されます。

ハイパーリンクの挿入

　［ハイパーリンクの挿入］ボタンをクリックすると、［ハイパーリンクの挿入］ダイアログボックスが表示され、挿入するハイパーリンクテキストとURLを入力できます。

ハイパーリンクの削除

　［ハイパーリンクの削除］ボタンをクリックすると、選択したテキスト内のハイパーリンクが削除されます。C1RichTextBoxコントロール内のハイパーリンクを強調表示し、［ハイパーリンクの削除］ボタンをクリックしてリンクを削除します。

［ツール］グループ

　［ツール］グループを使用すると、C1RichTextBoxコントロール内のコンテンツを操作および編集できます。

スペルチェック

　［スペルチェック］ボタンをクリックすると、［スペル］ダイアログボックスが表示されます。このボタンをアクティブ化するには、スペルチェックを設定する必要があります。詳細については、「スペルチェック」を参照してください。［スペル］ダイアログボックスでは、提案されたスペルを確認して、エラーを無視したり、同じ単語のエラーをすべて無視したり、現在のスペルを提案されているスペルに変更したり、現在のスペルの出現箇所をすべて変更したり、現在のスペルをスペルチェック辞書に追加したり、提案されたスペルに基づいてその他のスペルを表示したり、ダイアログボックスを閉じてスペルチェック操作をキャンセルすることができます。

検索と置換

　［検索と置換］オプションをクリックすると、ドロップダウンボックスが表示され、C1RichTextBoxコントロールのコンテンツを検索したり、検索して置換するためのテキストを入力できます。1つずつ置換したり、すべてを置換したり、次の一致を検索できます。

［表］［行と列］［マージ］［セル］グループ

　C1RichTextBoxコントロール内に表を作成できます。

　行列の数を指定して表を作成したり、表の罫線設定、表の罫線設定、行列の挿入、表・セル・行列の削除、セルの結合、セルのサイズ設定、などの操作ができます。

GUIの作成

　では、さっそくアプリケーションを作成していきます。

　今回作成するアプリケーションは、C1RichTextBoxコントロールとC1RichTextBoxToolbarコントロールです。

　この2つのコントロールをスタックパネルで重ねます。

フォームのレイアウト

C1RichTextBox/C1RichTextBoxToolbarコントロールの作成

　最初に、C1RichTextBox/C1RichTextBoxToolbarコントロールを作成します。

　① Window要素に「Name="Window1"」と名前を付けておきます。

　② StackPanelを配置します。サイズをウィンドウと同じにして、左揃えにします。

<StackPanel Height="465" HorizontalAlignment="Left" Name="StackPanel1" VerticalAlignment="Top" Width="665">

　③ この中に、まずC1RichTextBoxToolbarコントロールを作成します。

　ツールボックスからC1RichTextBoxToolbarコントロールをドラッグ＆ドロップすると、自動的にスタックパネルの幅に設定されます。

　④ 次に、ツールボックスからC1RichTextBoxコントロールをドラッグ＆ドロップします。高さをスタックパネルと同じにします。

C1RichTextBox/C1RichTextBoxToolbarコントロールを配置

　⑤ XAMLエディタで、C1RichTextBoxToolbar要素に以下のRichTextBoxプロパティの設定を追加します。

　これで、C1RichTextBoxコントロールにC1RichTextBoxToolbarコントロールが連結されます。VBとC#でC1RichTextBoxコントロールの名前が違うので注意してください。

Visual Basicプロジェクトの場合

RichTextBox="{Binding ElementName= C1RichTextBox1}" 

<c1:C1RichTextBoxToolbar Name="C1RichTextBoxToolbar1" RichTextBox="{Binding ElementName= C1RichTextBox1}" />

C#プロジェクトの場合

RichTextBox="{Binding ElementName= c1RichTextBox1}"

<c1:C1RichTextBoxToolbar Name="c1RichTextBoxToolbar1" RichTextBox="{Binding ElementName= c1RichTextBox1}" />

　⑥ 以上で出来上がりです。アプリケーションを実行してテキストを入力し、ツールバーを操作してみてください。

　このように、あっという間にエディタアプリケーションができあがります。

アプリケーション実行画面

スペルチェック機能の実装とウィンドウリサイズ処理

　GUIが出来上がったら、スペルチェック機能を実装します。この処理はビハインドコードで行います。

　また、スペルチェック用の辞書は今回はComponentOne Studioのサンプルに同梱されている、英文用辞書ファイル「C1Spell_en-US.dct」を使用します。

　この辞書をアプリケーションの実行ファイルと同じフォルダに入れておきます。

※1

　ComponentOne Studioに同梱されているスペルチェッカー用辞書ファイルは、ComponentOne Studioをインストールしたフォルダ内に格納されています。

筆者のインストール例

C:\Program Files (x86)\ComponentOne\Dictionaries

　① スペルチェック機能を有効にするには、まずC1SpellCheckerクラスのインスタンスを作成します。

　次に、C1SpellCheckerクラスの下層のMainDictionaryクラスにある、LoadAsyncメソッドを使用してスペルチェック用の辞書を読み込みます。

　そして、LoadAsyncメソッドが返す辞書への参照をC1RichTextBoxコントロールのSpellCheckerプロパティに設定します。

　これで、C1RichTextBoxコントロールのスペルチェック機能が自動的に作動するようになります。

Visual Basic

Imports C1.WPF.RichTextBox
Imports C1.WPF.SpellChecker

Class MainWindow
    Public Sub New()
        InitializeComponent()

        Dim spell As New C1SpellChecker()
        spell.MainDictionary.LoadAsync("C1Spell_en-US.dct")
        Me.C1RichTextBox1.SpellChecker = spell
    End Sub
End Class

C#

using C1.WPF.RichTextBox;
using C1.WPF.SpellChecker;

namespace RichTB_WPF_cs
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            var spell = new C1SpellChecker();
            spell.MainDictionary.LoadAsync("C1Spell_en-US.dct");
            this.c1RichTextBox1.SpellChecker = spell;

        }
    }
}

　② 試しにアプリケーションを起動し、ミススペルのある文章を入力してみると、入力が終わった時点で間違っている箇所に波線が付きます。

　また、ツールバーの［ツール－］-［スペルチェック］を選ぶと、修正用のダイアログボックスが表示されます。

間違っている箇所に波線が付く

修正用のダイアログボックスが表示される

　③ 最後に、ウィンドウをリサイズした時に、C1RichTextBox・C1RichTextBoxToolbarコントロールも連動してリサイズする処理を組み込んで出来上がりです。

Visual Basic

Private Sub Window_SizeChanged(sender As System.Object, e As System.Windows.SizeChangedEventArgs) Handles MyBase.SizeChanged
    StackPanel1.Height = Window1.Height
    StackPanel1.Width = Window1.Width

    C1RichTextBox1.Width = StackPanel1.Width
    C1RichTextBox1.Height = StackPanel1.Height

    C1RichTextBoxToolbar1.Width = StackPanel1.Width
End Sub

C#

private void Window1_SizeChanged(object sender, SizeChangedEventArgs e)
{
    StackPanel1.Height = Window1.Height;
    StackPanel1.Width = Window1.Width;

    c1RichTextBox1.Width = StackPanel1.Width;
    c1RichTextBox1.Height = StackPanel1.Height;

    c1RichTextBoxToolbar1.Width = StackPanel1.Width;
}

まとめ

　このように、C1RichTextBox・C1RichTextBoxToolbar・C1SpellCheckerコントロールは実に簡単にアプリケーションに実装でき、あらかじめ組み込まれている高度な機能をすぐに使うことが可能です。

　今や一つのアプリケーションに、いろいろな機能を組み込んでいかないと売れない時代にもなっているようなので、少しでも開発にかかる工数を削減するのであれば、これらのコンポーネントを利用することも検討してみてはいかがでしょう。