SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

デザイン性に優れた拡張メニューコントロール

LuxMenuで見栄えのよいメニューを作ろう

デザイン性に優れた拡張メニューコントロール 第1回


  • X ポスト
  • このエントリーをはてなブックマークに追加

アプリケーション開発において、コントロールの定番とも言えるメニューコントロールですが、一般的にデザインの拡張性が乏しいのが現状です。今回は、統合開発環境であるActiveBasic 5.0を用いて、洗練されたデザインのメニューコントロール「LuxMenu」を作成します。ここで作成したCOM DLLは、Visual C++から呼び出して利用することもできます。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 コントロールの定番とも言えるメニューコントロール。アプリケーション開発において、メニューコントロールの存在は無くてはならないものになっています。

 しかし、そのデザインはどのアプリケーションも、ほぼ同一です。アプリケーション上のインターフェイスのデザインを設計する上で、メニューを華やかにすることはとても意味のあることだと筆者は思いますが、そう簡単にポンとデザインできるものでもありません。

 しかし今回は、デザインの拡張性が乏しいメニューコントロールに、あえてターゲットをあわせ、洗練されたデザインに仕上げていこうと思います。

拡張メニューコントロール LuxMenu

 今回実装する、洗練されたデザインを持つメニューコントロールの名前を「LuxMenu」 と命名することにします(筆者による独断の命名です)。

LuxMenuを実装したウィンドウ
LuxMenuを実装したウィンドウ

 上の図をご覧いただければ一目瞭然ですが、一般的なメニューと比較して、デザイン的な違いを下記のように定義します。

  • セレクト状態のデザインを一新
  • 左側にグラデーションバーを用意
  • グラデーションバーにアイコンを配置可能
  • 淡色アイコンの自動生成および表示
  • くっきり見やすいチェックマーク

 これらのデザインを実装するための手法には、Windowsメニューコントロールのオーナー描画機能を使います。要は、メニューコントロールそのものを一から作成するのではなく、既存のコントロールのデザイン部分だけを拡張しようということです。当然ながら、すべてを一から作るよりも開発工程が少なく済みます。

 LuxMenuコントロールは、Windowsアプリケーションを製作するフリーの統合開発環境であるActiveBasic 5.0(以下、AB)で開発されており、COMコンポーネントとして提供しています。LuxMenuをABから利用するのであれば、LuxMenuライブラリをソースレベルでインクルードして扱うことも可能ですし、COM DLLを呼び出すこともできます。もちろん、Visual C++(以下、VC++)、Visual Basic(以下、VB)などからも、COM DLLを呼び出す形で利用できます。

 今回は既存のLuxMenuライブラリを活用し、AB上でライブラリをインクルードして実装を行うケースと、VC++からCOM呼び出しで実装を行うケースの2通りのサンプルを紹介します。

準備

 ここから、AB、VC++を用いてプログラミングを行います。ABは下記サイトからダウンロードできますので、インストールしておきましょう。

 サンプルファイルの実行には、ActiveBasic5.0(CP2)以降のバージョンをご利用ください。なお、現時点ではActiveBasic 5.0はβリリースとなっています(2006/09/05現在)。

一般的なメニューを作ってみる

 下地となるメニューコントロールを作成します。といっても、大げさな作業ではありません。ABを初めて利用する方は、環境に慣れる意味で、気軽に取り組んでみましょう。

 まずは、「abdev.exe」を立ち上げます。メニューの[ファイル]-[新規作成]をクリックして、カテゴリ[Basic]、ドキュメントタイプ[プロジェクト]を選択し、[OK]ボタンをクリックします。プロジェクト名を「MenuTest」などとし、アプリケーションタイプに[EXE - ノーマルウィンドウベース]が選択されていることを確認して[次へ]ボタンをクリックします。ウィザードのステップ2、ステップ3ではそれぞれ[次へ]-[完了]をクリックします。

メニューコントロールを生成しよう

 プロジェクトの生成が完了すると、AB特有のRADツールが立ち上がります。ウィンドウにさまざまなコントロールを貼り付けながらデザイニングを行えますが、今回は早速、メニューコントロールの下地を作りたいと思います。

 左側に表示されているプロジェクトビューのMaterialタブをクリックします。次に、Menuフォルダを右クリックし、[メニューを挿入]をクリックします。メニューIDを[MainMenu]などとし、[OK]ボタンをクリックします。

 メニューコントロールの作成画面が出てきますので、下記の表にまとめた構成になるよう、アイテムを追加していきます。[挿入]ボタンを押すことにより、次々にアイテムを挿入できます。また、[ポップアップ]にチェックを入れることで、メニューの階層化も行えますので、チャレンジしてみましょう。

メニュー作成時のキャプションとID
キャプション ID オプション
ファイル(&F)   ポップアップ
   開く(&O) IDM_OPEN  
   保存(&S) IDM_SAVE  
   -   セパレータ
   終了(&X) IDM_EXIT  
表示(&V)   ポップアップ
   オプション(&O) IDM_OPTION  
ヘルプ(&H)   ポップアップ
   バージョン情報(&A) IDM_ABOUT  
ABのIDEでメニューを作成したところ
ABのIDEでメニューを作成したところ

作成したメニューコントロールをウィンドウに貼り付けよう

 プロジェクトビューのMaterialタブを表示し、「Window\MainWnd」を開きます。右下に表示されるプロパティ内にメニューの設定項目リストが存在しますので、そこに先ほど作成した「MainMenu」を選択します。

メニューをウィンドウにセットする
メニューをウィンドウにセットする

コンパイル&実行してみよう

 メニューの[ベーシック]-[デバッグ実行]または、ツールバーのマークをクリックし、デバッグ実行してみましょう。コンパイルが自動的に行われ、下記のような実行画面が表示されれば成功です。

メニュー付きウィンドウの実行画面
メニュー付きウィンドウの実行画面

 この段階まではコーディングを必要としないため、ABが初めての方でも、すぐにクリアできますね! 特に問題がなけば、次へ進みましょう。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
LuxMenuが提供するインターフェイス

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
デザイン性に優れた拡張メニューコントロール連載記事一覧

もっと読む

この記事の著者

山本 大祐(ヤマモト ダイスケ)

普段はActiveBasicと周辺ツールの開発を行っています。最近は諸先輩方を見習いながら勉強中の身。AB開発日記

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/500 2008/08/26 13:40

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング