はじめに
Webページにドキュメント作成・編集機能を組み込みたいと思ったことはありませんか？
しかし、HTMLコントロールにはせいぜいテキストボックスぐらいしか入力インターフェースがないため、仕方なくWindowsフォームで作らざるを得ません。
「ComponentOne Studio for ASP.NET Wijmo 2012J」に含まれる「Editor for ASP.NET Wijmo」のC1Editorコントロールは、Microsoft Wordのようなルックスを持ったドキュメント作成コントロールです。
ドキュメント作成・編集に必要な機能をあらかじめ装備しており、文字の装飾、画像やメディアの挿入、段落設定などの機能が、リボンインターフェースのボタンに組み込まれているため、ほとんどコードを書かずにWebページにコントロールを配置しただけで、ドキュメント作成機能をWebページに組み込むことができます。
今回は、このC1Editorコントロールを使用して、ドキュメント作成機能を持つアプリケーションを作成してみました。
対象読者
Visual Basic 2010、またはVisual C# 2010を使ってプログラムを作ったことがある人。
必要な環境
Visual Basic 2010、Visual C# 2010、Visual Studio 2010でプログラムが作れる環境。
対応ブラウザについては、グレープシティ社Webサイトの「クロスブラウザ対応」ページでご確認ください。
なお、本プログラムは次の環境で開発・動作確認を行っています。
- OS：Windows 7
- 開発Tool：Visual Studio 2010、.NET Framework 4
- ブラウザ：Microsoft Internet Explorer 9
サンプルプログラム実行時の注意事項
[1] Visual StudioでサンプルWebサイトを開く
Visual Studioをお持ちであれば、「ComponentOne Studio for ASP.NET Wijmo 2012J」トライアル版をインストールし、ソースコード圧縮ファイル「Editor_ASP_vb_src.zip」または「Editor_ASP_cs_src.zip」を解凍すると作成されるプロジェクトファイルを、Visual Studioで開き実行してください。
[2] Visual Studioを使わずにサンプルWebサイトを開く
Visual Studioを使わずに、サンプルWebサイトを直接IISなどのWebサーバで開く場合は、ソースコード圧縮ファイル「Editor_ASP_vb_src.zip」または「Editor_ASP_cs_src.zip」を解凍すると作成されるプロジェクトファイルを、フォルダ構成を変えずにWebサーバにインストール・登録してください。
以下は、Microsoft IISサーバにインストールする場合の手順です。
- プロジェクトファイルのフォルダを、そのままWebサーバーへ配置します（例：\Inetpub\wwwroot直下へ配置）。
- サーバーに配置したアプリケーションフォルダに対して、「アプリケーションへの変換」を実行します。
- 「アプリケーションの追加」ダイアログで、「アプリケーションプール」を「Classic .NET AppPool」に設定します。
- クライアントのWebブラウザで、Default.aspxファイルを開きます（例：http://localhost/mysplit_vb/Default.aspx）。
UAC（ユーザーアカウント制御）がサポートされているWindows Vista以降のOSで製品のサンプルをコンパイルしようとするとエラーが発生する場合があります。これは、UACにより製品サンプルがインストールされているフォルダに書き込みができないため、コンパイル時にエラーが発生するという現象です。Visual Studioを管理者権限で実行するか、サンプルプロジェクト一式をアクセス権のあるフォルダに移動してからコンパイルを行うようにしてください。
また、Webブラウザでaspxファイルを実行する際にIISサーバでエラーになる場合は、Web.configファイルに以下の1行を追加してください。
<identity impersonate="false" />
コンポーネントのインストール
本サンプルアプリケーションでは、「Editor for ASP.NET Wijmo」のC1Editorコントロールを使用します。
このコントロールを使用するには、Visual Studio、Visual Basic、Visual C#の開発環境に「ComponentOne Studio for ASP.NET Wijmo 2012J」をインストールする必要があります。
トライアル版は、グレープシティのWebページからダウンロードできます。
ダウンロードしたい製品にチェックを付け［申込フォーム］ボタンを押すと、「トライアル版申込フォーム」ページに移動しますので、「個人情報の収集および使用に同意する」にチェックを入れ「同意する」ボタンをクリックします。
トライアル申込フォームが表示されますので必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきます。ここからダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。
制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
コントロールと参照の追加
「ComponentOne Studio for ASP.NET Wijmo 2012J」をインストールしたら、プロジェクトにコントロールを追加します。
ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。
追加するコンポーネントは、アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1Editor」コントロールです。
これらのコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。
| ファイル | 内容 |
|---|---|
| C1.Web.Wijmo.Controls.4 | 本体アセンブリ |
また、プロジェクトに以下のランタイムライブラリが追加されます。
| ファイル | 内容 |
|---|---|
| C1.C1Report.4.dll | 本体アセンブリ |
| C1.Web.Wijmo.Controls.4.dll | 本体アセンブリ |
なお、.NET Framework 4が必要です。
C1Editorコントロールの概要
「Editor for ASP.NET Wijmo」のC1Editorコントロールは、専門的知識を持たないユーザーでもWebページ上でHTMLコンテンツを作成できるコントロールです。
このコントロールは、いわゆるWYSIWYGエディタになっており、Microsoft Wordのように見たままの状態でレイアウトや文字の装飾、画像の挿入といった文書の編集を行えます。
デザイン、ソースコード、および分割という編集モードを備え、上部にはカスタマイズ可能なリボンパネル、中央にテキストウィンドウ、および下部にツールバーパネル領域を持ち、文書を編集するのに必要な機能がコントロールにあらかじめ組み込まれています。
C1Editorコントロールの主な機能の特徴
C1Editorコントロールは、以下の特徴を持っています。
Microsoft OfficeリボンスタイルUI
エディタはMicrosoft Officeスタイルのリボンインターフェースを実装しています。リボンは、関連する各コマンドを一連のタブの下に編成しているため、ユーザーはメニューの階層を移動しなくても、エディタのさまざまな機能を簡単に探索できます。
組み込みスペルチェッカ
スペルチェック機能が組み込みスペルチェッカによって提供されます。エンドユーザーは、〈チェック〉ボタンを押すだけで、Microsoft Wordと同様のスペルチェック（コンテキストメニューに赤い波線の下線とスペル候補を表示）をすぐに利用できます。
ツールバーのセットの選択
Common、EditorMode、Formatting、HTMLElements、Style、およびTableEditingツールバーから選択して、必要なツールバーのみ表示するようにエディタをカスタマイズできます。
ドッキング可能なフローティングツールバー
エンドユーザーは、ドッキング可能なフローティングツールバーを使用して、特定のツールバーとより緊密に作業するように選択できます。実行するには、単にツールバーをドッキングされたパネル領域から選択して、テキストウィンドウ領域にドラッグします。
複数言語サポート
統合されたスペルチェッカは、英語、オランダ語、フランス語、ドイツ語、イタリア語、ポルトガル語、およびスペイン語など、複数の言語をサポートします。
テーマ
スマートタグをクリックするだけで、6種類のプレミアムテーマ（Arctic、Midnight、Aristo、Rocket、Cobalt、およびSterling）のいずれかを選択して外観を変更します。オプションとして、jQuery UIからThemeRollerを使用してカスタマイズしたテーマを作成します。
高度な書式設定
エディタは標準のTextBoxコントロールより高度な書式機能を提供します。これらの書式機能には、サイズ、色、スタイル、太字、斜体などが含まれます。その他の高度な書式機能には、配置、インデント、および箇条書きが含まれます。
クロスブラウザ対応
IE、Firefox、Safari、Chrome、Operaなどの主要なブラウザをサポートしています。
カスタマイズ可能なディクショナリファイル
C1SpellCheckerディクショナリエディタで、ディクショナリファイル（.dct）を作成および管理して、単語をメインディクショナリに追加するか、新規ディクショナリを作成します。
デザイン時のカスタマイズ
プロパティビルダーでは、コードを記述することなくC1Editorの外観および動作を変更できます。
状況依存のメニュー
右クリックを使用して表示されるコンテキストメニューを標準装備。テキストの切り取り、コピー、貼り付けや、表内をクリックして行の挿入、列の削除、セルの分割など、その場の状況に合ったメニューが表示されます。
Document Object Modelノードを選択するパスセレクタ
パスセレクタは、現在のカーソル位置のHTMLタグ階層を表示します。パスセレクタ内のタグを選択すると、選択範囲を変更できます。例えば、エディタ内の全ノードを選択するには、パスセレクタ内の<body>要素をクリックします。
CSSのサポート
CSS（Cascading Style Sheet）のスタイルを使用して、カスタムスキンを定義します。
C1Editorコントロールの構成
C1Editorコントロールは、図のように4つの領域で構成されています。
リボン
C1Editorコントロールのリボンインターフェースは、「書式」タブと「挿入」タブの2つに分かれており、メニューの階層を移動しなくてもコマンドを選ぶだけで操作できます
「書式」タブ
「書式」タブには、テキストエディタのコンテンツの書式設定に使用できるコマンドグループが含まれます。「書式」タブのすぐ下には、「アクション」「フォント」「段落」および「レビュー」の4つのグループがあり、それぞれのグループには書式に関する処理が組み込まれているボタンが格納されています。
①「アクション」グループ
「アクション」グループのコマンドは、ドキュメントの保存や直前のアクションを元に戻す操作など、一般的なアクションを実行するための次のボタンが用意されています。
- 上書き保存
- 元に戻す
- やり直し
- プレビュー
- クリーンアップ
- 切り取り
- コピー
- 貼り付け
- すべて選択
②「フォント」グループ
「フォント」グループの下のコマンドは、フォント設定の操作に使用する次のボタンが用意されています。
- フォント名
- フォントサイズ
- 背景色
- フォント色
- 太字
- イタリック体
- 下線
- 取り消し線
- 下付き
- 上付き
- テンプレート
- 書式の削除
③段落
「段落」グループ内の各コマンドは、段落設定の操作に使用する次のボタンが用意されています。
- 左揃え
- 中央揃え
- 右揃え
- 両端揃え
- 枠
- 番号付きリスト
- 箇条書きリスト
- インデント解除
- インデント
④「レビュー」グループ
「レビュー」グループの下の各コマンドは、現在のドキュメントの見直しに使用する次のボタンが用意されています。
- スペルチェック
- 検証
- 検索
「挿入」タブ
「挿入」タブには、画像や段落区切りなど、エンドユーザーがテキストエディタに要素を挿入するためのコマンドのグループが含まれます。「書式」タブのすぐ下には、「テーブル」「区切り」「フォーム」および「特殊」の4つのグループがあり、それぞれ挿入用機能を持ったボタンが組み込まれています。
①「テーブル」グループ
「テーブル」グループの下の各コマンドは、テーブルの追加と操作に使用する次のボタンが用意されています。
- テーブル
- 列の挿入
- 行の挿入
- セルの挿入
- 行の削除
- 列の削除
- セルの削除
- セルの分割
- セルの結合
②「区切り」グループ
「区切り」グループの下の各コマンドは、各種の区切りをドキュメントに追加するために使用する次のボタンが用意されています。
- 区切りの挿入
- パラグラフの挿入
- 印刷改ページの挿入
- 横線の挿入
③「フォーム」グループ
「フォーム」グループの下の各コマンドは、各種のフォームコントロールをドキュメントに追加するために使用する次のボタンが用意されています。
- フォーム
- テキスト領域
- テキストボックス
- パスワードフィールド
- 画像ボタン
- ボタン
- リストボックス
- ドロップダウンリスト
- ラジオボタン
- チェックボックス
④「特殊」グループ
「特殊」グループの下の各コマンドは、リンクとマルチメディア項目をドキュメントに追加するために使用する次のボタンが用意されています。
- リンク
- 画像ブラウザ
- メディア
- 特殊文字の挿入
- 日付と時刻の挿入
テキストエディタ
C1Editorコントロールのテキストエディタは、リッチテキストの作成に使用されます。テキストエディタを次の3つのビューの一つに設定できます。
デザインビュー
このビューは、テキストエディタのコンテンツをWYSIWYG書式（見たままのデザイン）で表示します。公開または印刷時のコンテンツの外観のリアルタイムシミュレーションを提供します。
ソースビュー
このビューは、作成文書をHTMLの記述で表示し、HTMLでの編集環境を提供します。
ソースビューは、直接手動でHTMLマークアップを入力するデザイン画面を提供しますが、リボンインターフェースを使用してHTMLタグをコンテンツに適用することもできます。
分割ビュー
このビューは、テキストエディタにデザインビューとソースビューの両方を表示します。このビューが呼び出されると、エディタはテキストエディタを2つの垂直セクションに分割します。上部セクションはデザインビュー、下部セクションはソースビューを表示します。このビューは、マークアップを編集の際にコンテンツを即時にプレビュー表示できるため、便利です。
テキストエディタに追加されたコンテンツが使用可能な画面スペースを超えると、スクロールバーが自動的に表示されます。
また、これらのビューを切り替えるには、ツールバーを使用します。
パスセレクタ
パスセレクタは、現在のカーソル位置にあるHTMLタグ階層を表示します。現在選択されているタグはハイライト表示されます。
ツールバー
ツールバーを使用すると、エンドユーザーは実行時に表示を切り替え、テキストの折り返しを有効にできます。次の5つのボタン（「デザインビュー」「ソースビュー」「分割ビューー」「ワードラップー」および「フルスクリーン」）を備えています。
| ボタン | 説明 |
|---|---|
| デザインビュー | ボタンをクリックすると、テキストエディタはデザインビューに切り替わります。ここで、ユーザーはコンテンツのリアルタイムプレビューを表示できます。 |
| ソースビュー | ボタンをクリックすると、テキストエディタはソースビューに切り替わります。ここで、ユーザーは独自のHTMLのマークアップを記述できます。 |
| 分割ビュー | ボタンをクリックすると、テキストエディタは分割ビューに切り替わります。ここで、ユーザーはテキストエディタウィンドウに、デザインビューとソースビューの両方を表示できます。 |
| ワードラップ | ボタンをクリックすると、ソースコードドキュメントの右余白にソフトリターンが挿入されます。この機能が有効の場合、ユーザーは、左から右方向のスクロールを実行せずに、HTMLを表示および編集できます。デザインビューでは、この機能は利用できません。 |
| フルスクリーン | ボタンをクリックすると、エディタで全画面表示と縮小画面表示が切り替わります。 |
エディタのダイアログボックス
C1Editorコントロールには、ドキュメントの作成と編集に使用できる13個のダイアログボックスが組み込まれています。処理を実行するために新たに専用のダイアログボックスを用意する必要はありません。
必要なダイアログボックスはC1Editorコントロールに組み込まれています。
| 名前 | 説明 |
|---|---|
| ［テンプレートの適用］ダイアログボックス | ドキュメントにテンプレートを選択、追加、削除するダイアログボックス |
| ［ソースHTMLドキュメントのクリーンアップ］ダイアログボックス | HTMLドキュメントから不必要なタグとシンボルを削除（または置換）を実行するダイアログボック。 |
| ［検索と置換］ダイアログボックス | テキストの検索・置換を実行するダイアログボックス |
| ［ハイパーリンクの挿入］ダイアログボックス | ハイパーリンクをドキュメントに挿入するダイアログボックス |
| ［画像の挿入］／［画像の編集］ダイアログボックス | ドキュメントへの［画像の挿入］［画像の編集］を行うダイアログボックス |
| ［メディアの挿入］ダイアログボックス | メディアファイルをドキュメントに挿入するダイアログボックス |
| ［特殊文字の挿入］ダイアログボックス | 特殊文字をドキュメントに挿入するダイアログボックス |
| ［テーブルの挿入］／［テーブルの編集］ダイアログボックス | ［テーブルの挿入］と［テーブルの編集］を行うダイアログボックスダイアログボックス |
| ［プレビュー］ダイアログボックス | ドキュメントをプレビューして印刷するダイアログボックス |
| ［背景色の設定］ダイアログボックス | テキストの選択した部分の背景色を設定するダイアログボックス |
| ［前景色の設定］ダイアログボックス | ドキュメントの前景色（文字色）を変更するダイアログボックス |
| ［スペルチェッカ］ダイアログボックス | スペルミス、誤字、または現在ディクショナリに入っていない単語を検出するなど、スペルチェックを実行するダイアログボックス |
| ［タグの検証］ダイアログボックス | 追加または変更を実際のHTMLマークアップタグに入力せずに、HTML属性を表示および編集するダイアログボックス |
Webページのデザイン
では、さっそくアプリケーションを作成していきましょう。
作成するのは、HTMLエディタを持ったWebアプリケーションです。文書編集に必要なほとんどの機能はC1Editorコントロールに装備されていますが、文書を保存する機能は組み込まれていませんので、この処理だけコードを記述します。
ページのレイアウト
使用するコントロールは、C1Editorコントロールだけです。
① ツールボックスからC1Editorコントロールのアイコンをページにドラッグ＆ドロップします。
② 今回は、ほとんどの機能をデフォルトのまま使用しますので、テーマだけを変えます。
C1Editorコントロールのタスクトレイを開き、メニュー「テーマ」のリストから「Cobalt」をクリックします。
③ あとは、リボンの「書式」タブにある「上書き保存」ボタンの実行処理を作成するだけです。
まず、プロパティウィンドウを「イベント」に切り替えます。そして、「TextSaved」イベントハンドラを作成します。
④ イベントハンドラでは、FileクラスのWriteAllTextメソッドを使用して、C1Editorコントロールの入力内容をテキストファイルに保存します。
C1EditorコントロールのTextプロパティには、入力した内容がHTMLタグ付きで格納されていますので、これをHTMLファイルとして保存します。その際、保存した日時を加工してファイル名にしています。
保存先は、プロジェクトの「App_Data」フォルダに格納されます。
Imports System.IO
Public Class _Default
Inherits System.Web.UI.Page
Protected Sub C1Editor1_TextSaved(sender As Object, e As EventArgs) Handles C1Editor1.TextSaved
Dim timestamp As String = DateTime.Now.ToString().Replace("/", "-")
timestamp = timestamp.Replace(":", ".")
Dim datafile As String = Server.MapPath("~/App_Data/data") + "_" + timestamp + ".html"
File.WriteAllText(datafile, C1Editor1.Text, Encoding.Default)
End Sub
End Class
using System.IO;
namespace Editor_ASP_cs
{
public partial class _Default : System.Web.UI.Page
{
protected void C1Editor1_TextSaved(object sender, EventArgs e)
{
String timestamp = DateTime.Now.ToString().Replace("/", "-");
timestamp = timestamp.Replace(":", ".");
String datafile = Server.MapPath("~/App_Data/data") + "_" + timestamp + ".html";
File.WriteAllText(datafile, C1Editor1.Text, System.Text.Encoding.Default);
}
}
}
⑤ アプリケーションを実行し、ドキュメントを作成します。
画面は、段落を設定し見出しの文字を大きくして背景色を緑色にしています。色を設定する場合は、画面のように色を選択するダイアログボックスが表示されます。
⑥ リボンにある「上書き保存」ボタンをクリックすると、作成したドキュメントをプロジェクトの「App_Data」フォルダに、HTMLファイルで保存します。ドキュメントを開くと、エディターで作成したのと同様のドキュメントがWebブラウザで表示されます。
⑦ リボンの「挿入」タブをクリックし、「画像の参照」ボタンをクリックします。
「画像ブラウザ」ダイアログボックスが表示されますので、「参照」ボタンをクリックして画像ファイルを選び、「アップロード」ボタンをクリックすると、画像ファイルを読み込みます。
リストのファイル名をクリックすると、横にプレビューが表示されます。
そして、OKボタンをクリックすると、画像データがドキュメントに配置されます。
⑧ 「画像ブラウザ」ダイアログボックスで画像ファイルのアップロードを行うと、画像ファイルはプロジェクトに「DialogUploadFolder」という名称のフォルダが作成され、ここに格納されます。
まとめ
今回は、とりあえずC1Editorコントロールの基本的な機能を使ったアプリケーションを作成しました。
Webページに入力インターフェースを組み込むとなると、HTML標準のテキストボックスを使うぐらいで、少し規模の大きい入力インターフェースはなかなか組み込めませんでした。
C1Editorコントロールは、このようにドキュメントの作成や編集に必要な機能のほとんどがコントロールに組み込まれているため、Webページのデザインを考えるだけでドキュメント編集機能を持ったWebページを作成することができます。
