HTMLエディタ〜最終章〜

ツールバーを作成しよう

さて、「HTMLエディタを作ろう」と題して、盆休み連載を含めてすでに10回連載してきましたが、ついに最終章を迎えました。今回は、ツールバーの作成・実装とリリースビルドによる配布法について述べて意向と思います。

26.既存のツールバーにボタンを追加してみる

ツールバーを知らない方はあまりいないと思いますが、

です。まず既存のツールバー(保存やファイルを開くなどがついている、つまりこの画像のやつです)に、ボタンを追加することからはじめます。

1.リソースタブをクリックし、ToolbarのIDR_MAINFRAMEを開く: 図のような編集画面が出てくるはずです。; ※この編集画面と、上のツールバーの図は対応しています。ツールバーに入っている縦線(セパレータ)は、編集画面で見ると空欄になっていることがわかります。(例えば、ファイルとはさみのマークの間にセパレート線が入っていますが、編集画面では3mmくらいの空欄で表示されていますね)
2.セパレートを作る: まだなにも絵がかかれていない右端の四角をクリックし、すこし右側にドラッグして離します。すると間隔があきます。これでセパレートが入ります。
3.絵を描く: 先ほど選択した四角に対して絵を書きます。ここでは、前章で作成した「プレビュー機能」をツールバーに登録したいと思うので、私は虫眼鏡の図でプレビューを表現してみました。各自プレビュー機能だと連想させるような素敵な絵を作成してくださいね。ここが一番たのしいですから(笑)
4.実行します: 実行してみます。すると先ほどつくった虫眼鏡は「灰色表示」されていますね。つまりまだこのボタンは役に立っていません(笑)
5.役に立つツールバーにする: 虫眼鏡をダブルクリックすると、プロパティが開くはずです。ここでIDにID_TOOL_PREVIEWと書き込みます。このIDは前章で作成したメニューのIDです。ID_TOOL_PREVIEWを記述すると、プロンプトが自動的に挿入されます。
6.再実行してみます: 今度は、プレビュー機能が働くでしょう。このようにメニューなどを作った場合、つまりクラスウィザードでIDにコマンドメッセージをバインドしている場合、ツールバーではそのIDを記述すれば、コマンドがバインドされている関数(ここではvoid CMyHtmlDoc::OnToolPreview()関数)が実行されるようになっているからです。

27.ツールバーを新規に作成する

ツールバーを作成するにあたって、先ほど編集したIDR_MAINFRAMEのツールバーに関する記述を探します。つまりこの記述を真似してしまえばいいわけです。(この真似っ子をすることでVCの経験が一段とUPします。要チェックですよ)
いろいろファイルを探していくと分かってくると思いますが、ツールバーの記述はCMainFrameクラス内部(MainFrm.hとMainFrm.cpp)で行われています。ではまずツールバーの変数をヘッダファイルの記述してみましょう。

1.MainFrm.hファイルを開く

ファイルビューで開くと簡単ですが、CMainFrameクラスをダブルクリックしても同じように開くことができます。

2.以下の1行のみを追加

class CMainFrame : public CFrameWnd
{

	(中略)

protected:  // コントロール バー用メンバ
	CStatusBar  m_wndStatusBar;
	CToolBar    m_wndToolBar;
	CToolBar	m_wndMyToolBar;	// ←ここを追加

// 生成されたメッセージ マップ関数
protected:

ここで注目したいのは、メンバとしてCToolBarクラスの変数m_wndMyToolBarを作成しましたが、既存のツールバーのメンバ変数がm_wndToolBarです。ようするにMicrosoftの真似をしています(笑)。

3.リソースでツールバーを作成する

ツールバーを追加し、ツールバーのIDをIDR_INS_TOOLBARとしておく。

4.ツールバーにボタンを配置していく。

先ほど既存のツールバーに絵を描いて、IDをあり当てた操作を繰り返していきます。ここではよく使用されるであろうタグを挿入するツールバーとして、例えば改行タグなどを追加していきます。私はこんな風にしてみました。

※絵を描いたら、それぞれの絵に対してプロパティを表示させ、IDを割り当てましょう。例えば、図のような改行タグであったらID_INS_BRを割り当てます。

5.ツールバーを作成します。

今のままでは、ツールバーリソースはあってもツールバーは作成されていないので、見ることもできません。そこでMainFrm.cppのCreate関数を開き、以下の部分を追加します。

int CMainFrame::OnCreate(LPCREATESTRUCT lpCreateStruct)
{

	(中略)

	// TODO: ツール バーをドッキング可能にしない場合は以下の３行を削除
	//       してください。
	m_wndToolBar.EnableDocking(CBRS_ALIGN_ANY);
	EnableDocking(CBRS_ALIGN_ANY);
	DockControlBar(&m_wndToolBar);

	////////ここから//////////
	if (!m_wndMyToolBar.CreateEx(this, TBSTYLE_FLAT, WS_CHILD | WS_VISIBLE | CBRS_TOP
		| CBRS_GRIPPER | CBRS_TOOLTIPS | CBRS_FLYBY | CBRS_SIZE_DYNAMIC) ||
		!m_wndMyToolBar.LoadToolBar(IDR_INS_TOOLBAR))
	{
		TRACE0("Failed to create toolbar\n");
		return -1;      // 作成に失敗
	}
	///////ここまでを追加/////

	return 0;
}

あれ？と思ったかたは鋭い方ですね。この関数の上への方に、今回追加したコードとほとんど同じやつがありますね。あれは既存のツールバーを作成・表示しているコードです。ここでもMicrosoftの真似をします。やっていることは、ツールバーを作成し、リソースからツールバーを読み込んでいるだけです。作成か読み込みに失敗した場合だけ、TRACE0が実行されます。

6.実行する

さて、実行してみましょう。ツールバーが動作するでしょうか？これでなんだかソフトウェアらしくなってきたと思います。ここで少し改良を施します。現在作成したツールバーは、今のところドッキングが不可能となっています。ドッキング可能なツールバーとは、クライアント領域(編集領域)の上部だけではなくて、下にも、左右にもツールバーをドッキングすることができます。既存のツールバーはドッキング可能なツールバーです。ツールバーの端をドラッグし、クライアント領域まで引っ張ってくると、

のように、ウィンドウとして分離できますが、これはまたウィンドウの端にドッキングできます。今作成したツールバーもドッキング可能にしてみたいと思います。

7.ツールバをドッキング可能にする

MainFrm.cppのなかのCreate関数の末尾を、以下のように編集する。

int CMainFrame::OnCreate(LPCREATESTRUCT lpCreateStruct)
{

	if (!m_wndMyToolBar.CreateEx(this, TBSTYLE_FLAT, WS_CHILD | WS_VISIBLE | CBRS_TOP
		| CBRS_GRIPPER | CBRS_TOOLTIPS | CBRS_FLYBY | CBRS_SIZE_DYNAMIC) ||
		!m_wndMyToolBar.LoadToolBar(IDR_INS_TOOLBAR))
	{
		TRACE0("Failed to create toolbar\n");
		return -1;      // 作成に失敗
	}

	//////ここから////////////////
	m_wndMyToolBar.EnableDocking(CBRS_ALIGN_ANY);
	DockControlBar(&m_wndMyToolBar,AFX_IDW_DOCKBAR_TOP,NULL);
	//////ここまで追加////////////

	return 0;
}

ここで2行のコードを解説しておきます。

m_wndMyToolBar.EnableDocking(CBRS_ALIGN_ANY);: ツールバーをドッキング可能にします。引数は、ウィンドウのどこの辺にドッキングするかを指定します。例えばCBRS_ALIGN_TOPだと上部のみだけにドッキング可能にします。つまり、上部以外ではドッキングできません。CBRS_ALIGN_ANYは、任意の辺へのドッキングを可能にするものです。つまりどこの辺でもドッキングできる形式です。通常はCBRS_ALIGN_ANYを選ぶべきですが、case by caseで、辺を指定することがあるようです。
DockControlBar(&m_wndMyToolBar,AFX_IDW_DOCKBAR_TOP,NULL);: EnableDockingは名前からも分かるように、ドッキングを可能にするだけであって、実際にドッキングする関数とは異なります。このDockControlBarは、コントロールバー(ツールバー)をドッキングする関数です。第1引数はドッキングするコントロールバー(ツールバー)であり、第2引数は、どこの辺にドッキングするかを指定します。AFX_IDW_DOCKBAR_TOPは、ウィンドウ上部にドッキングします。

最後に実行してみます。ドッキングはうまく動作しているでしょうか？このコードも、既存のツールバーと非常に似たコードを使用しています。VCのコツはサンプルを活用することですよ。

28.リリースビルドをして完成です

最後に、ソフトウェアのディストリビューションを考え、実行ファイルの最適化と軽量化のためにリリースビルドを行います。リリースビルドがうまくいかない！と質問される方が多いのですが、ここでは一番簡単な方法を伝授？します。

1.ツールバーの部分で右クリックする: フローティングメニューようなものが表示されます。ここで「ビルド」にチェックします。
2.コンボボックスで[Win32 Debug]から[Win32 Release]に変更する: これでビルドタイプが変更することができました。
3.ビルドする

するとReleaseフォルダが生成され、その中に入っているexeファイルが実行ファイルです。

さて、これでHTMLエディタに関する連載は終了です。私の解説はあくまで基本的なことばかりで、このソフトをもっともっとよくするには、皆さんの努力とアイディアが重要だと思います。はじめての連載でしたが、結構大変でした(笑)。次は・・・お絵かきソフトでも作ろうかなぁ？

作成したHTMLEditorのソースファイル:src.lzh(227kByte)
本サイトで紹介した内容以外には、

テンポラリファイル削除機能: プレビューで作成された"tmp_preview.html"ファイルを削除する機能
HTML基本構造タグ追加機能: HTMLウィザード(タイトルや全体文字色・背景色の設定)機能
その他未完成ですが^^;ファイルドロップ機能がついております。

このソースは、ご自由に使用されても構いませんが、無断転載は禁止させていただきます。
なおこのサイトを通して、作成されたソフトウェアに関しては、web上に公開しても構いませんが readmeファイルなどで、一言このサイトのことを記述してください。お願いいたします。

[Next]
[Previous]
[Home]