HTMLエディタ〜第5週〜

タグ挿入コードを作ろう

次はいよいよ、タグの挿入コードをコーディングしていきます。chapter3で、PasteString(CString)とMakeTag(CString,CString)の二つの便利な関数を作ったと思いますが、これを利用してプログラミングを進めていこうと思います。

11.挿入するタグについて

本来は、タグをつけたい文字を選択して、ツールバーなどのボタンを押す操作

文字列選択して、ボタンを押す

ほらできたのほうが、ユーザインターフェースの高いものになるのですが、ツールバーの話はまた後ほどということにして(何故なら、そのほうがツールバーの実装の時にめちゃくちゃ楽になるからなのです)、いつものようにメニュー操作でタグを挿入する方法で実装していきます。今回は２つのタグを例にして進めていきます。タグはかなり多くあるので全部説明してもあまり意味がないのです。しかしなんで２つのタグなのか？という疑問を抱かれるかもしれませんが、HTMLタグには主に２つの種類のタグが存在します。

文字列の間に挟んで使うタグ: 以前から紹介している、文字列を太字にするタグなど
特定の場所に記述するタイプ: 文字列を改行したいところに書く改行コードなど

以下の文(オブジェクト指向に関する私の見解ですが)を例にしてみます。

オブジェクト指向プログラミング<HR> C++やJAVAなどのプログラミングに代表されるオブジェクト指向プログラミングとは、変数を物(オブジェクト)として捉えたプログラミング手法のことである。 オブジェクト指向を実現するために、C++やJAVAでは、「クラス」という概念が存在し、変数はクラス化される。クラスは、通常の変数のようにデータを保持する機能のほか、そのクラスのみで使用できる関数(メンバ関数)を含む。構造体が、特定の関数を含んだようなものと考えてもよい。ただ大きく違うところは、クラス内部のデータ保持変数と関数の公開、非公開を決めることで、データを隠蔽することができるので、ユーザの不正アクセスを防ぐことができるなど、管理が楽になりバグが発生しにくくなるという利点がある。

という感じでタグを挿入すると、以下のようになるのです。

オブジェクト指向プログラミング

C++やJAVAなどのプログラミングに代表されるオブジェクト指向プログラミングとは、変数を物(オブジェクト)として捉えたプログラミング手法のことである。
オブジェクト指向を実現するために、C++やJAVAでは、「クラス」という概念が存在し、変数はクラス化される。クラスは、通常の変数のようにデータを保持する機能のほか、そのクラスのみで使用できる関数(メンバ関数)を含む。構造体が、特定の関数を含んだようなものと考えてもよい。ただ大きく違うところは、クラス内部のデータ保持変数と関数の公開、非公開を決めることで、データを隠蔽することができるので、ユーザの不正アクセスを防ぐことができるなど、管理が楽になりバグが発生しにくくなるという利点がある。

というわけで2種類のタグの種類がわかっていただけたところで、まずは文字を挟まない改行 タグや水平線<HR>タグの挿入についてコーディングしていきます。ここではまず<HR>タグの挿入について説明してきます。

12.水平線タグ挿入コードを作る。

1.リソースの編集

IDR_MAINFRAMEを開き、以下の図のようにリソースを編集する。IDなども図を参照のこと。

図の[ページ]のようにポップアップ形式にするには、ページのメニューのプロパティのポップアップをチェックすればOK。(水平線のプロパティのポップアップではありませんよ)

2.メニューコマンドを駆動

CLASSWIZARDを起動。クラス：CMyHtmlView、ID:ID_INS_HRを選択し、COMMANDを押して関数の追加を押し、コードの編集を押す。(この図では、COMMANDの文字が太字ですが、関数を追加する前は太字にはなっていないはずです)

3.コードを記述

void CMyHtmlView::OnInsHr()
{
PasteString("<HR>");
SetFocus();
}

PasteString(CString str) : chapter3で作成した、"現在カーソル位置にstrを挿入する関数"です。

SetFocus() : PasteStringによってフォーカス(カーソルが点滅していて入力できる状態)が失われてしまうと、次の入力時に不便なのでフォーカスを得て、次の入力をしやすくします。この関数の有無の違いを確かめてみるのもいいと思います。

4.実行して確かめる

うまく挿入されない場合は、PasteString関数にも問題があると思います。コードが正しいかchapter3を確認してください。

13.太字タグ挿入コードを作る。

次は太字タグのように、挟み込むタグの挿入を行います。これは、Chapter3で作成したMakeTag関数を使って、タグを挟んだ文字列を作成し、PasteStringで挿入するという構成をとります。以下に手順を書いていきます。

1.リソースの編集

IDR_MAINFRAMEを開き、以下の図のようにリソースを編集する。IDなども図を参照のこと。

2.メニューコマンドを駆動

水平線タグ挿入の要領でやればOK

3.コードを記述

void CMyHtmlView::OnInsFontBold()
{
PasteString(MakeTag("",""));
SetFocus();
}

4.実行して確かめる

うまくいかない場合はMakeTag関数に問題があるかもしれません。chapter3で確認してください。

あとは各自好きなようにタグを挿入するコードを作っていけばよいです。タグについてはタグ集やいろんなサイトに掲載されているので問題はないと思います。そのタグが文字列を挟むのか、挟まないのかに気をつければうまくいくでしょう。ただしリンクタグとフォントタグ、イメージタグは、MakeTagやPasteStringだけでは実現できないのでこれらは第7週と第8週で説明していきます。
次週は、「共通関数群を作ろう」と題して、カラーダイアログ(カラーパレット)関数の効果的なコーディングや、リンクで必要な絶対パス→相対パス変換のコード、フォルダ選択ダイアログについて説明していきます。これらの関数は一旦学ぶとあとでいろんなところで使えるので重宝しますよ！

[Next]
[Previous]
[Home]