2.1 ソフトウェアの画面作り(JFrame)とルック・アンド・フィール

Toru Kano 

それではソフトウェア開発を始めていきましょう。
NetBeans で作るソフトウェアはプロジェクトという単位で管理されるため、まずはプロジェクトを作成します。

1. プロジェクトの作成


2-1-1
NetBeans 左上にあるアイコン(新規プロジェクトの作成)をクリックしましょう。もしくは、メニューバーから [ファイル] -> [新規プロジェクト] と進みます。


2-1-2
「新規プロジェクト」ウィンドウが立ち上がるので、カテゴリが「Java」、プロジェクトが「Javaアプリケーション」になっていることを確認し、「次へ」ボタンを押します。


2-1-3
「新規Javaアプリケーション」ウィンドウが立ち上がるので、プロジェクト名にこれから開発するソフトウェアの名前を入力します。ここでは、「SimpleFrame」という名前を付けています。「メインクラスの作成」チェックボックスのチェックを外してから「終了」ボタンを押しましょう。プロジェクトが作成され、画面左上部分に「プロジェクト」ウィンドウが表示されます。

「メインクラスの作成」のチェックを外し忘れてしまった場合は、自動生成される「SimpleFrame.java」ファイルを右クリックして削除しておきましょう。GUIデザイナを使って手軽にソフトウェア開発を行う際は、メインクラスを手動で作成する必要があります。


2. ソフトウェアの画面(JFrame)の作成

次は、ソフトウェアの画面のベースを作ります。画面のベースには、「JFrame」という名前のクラスがよく利用されます。クラスはJavaにおいてとても重要な概念ですが、ここでは深く説明しません。一先ずは、Java プログラムはクラスで構成されており、「JFrameクラスは画面を作ることができる、くらいの認識をしておきましょう。

また、Java のプログラムにはメインクラスと呼ばれるクラスが必ず一つ存在しなければなりません。メインクラスとはその名のとおり、プログラムのメインとなるクラスのことで、プログラム実行時に一番初めに呼び出されるクラスです。これから作成する「JFrame」クラスは、メインクラスになります。


2-1-4
「プロジェクト」ウィンドウの「ソース・パッケージ」を右クリックし、[新規]->[JFrameフォーム]と進みます。


2-1-5
「New JFrameフォーム」ウィンドウが立ち上がるので、クラス名に名前を入力します。ここでは、「MainFrame」と入力しています(メインとなる Frame であることを意味しています)。名前は自由に決められますが、わかりやすい名前を付けることを強くお勧めします。パッケージ名は、ソースコードを分けて管理するフォルダのようなものです。入力しなくても問題はありませんが、大規模なソフトウェア開発に備えて何かしら入力する習慣を付けておくことをお勧めします。ここでは、「gui」という名前を付けています。「終了」ボタンを押すと、「MainFrame」という名前の「JFrame」クラスが作成されます。


2-1-6
次ような画面になっていると思います。ここで簡単に、画面を構成するウィンドウの説明をしておきます。
プロジェクトウィンドウ
左上部にある、プロジェクトを管理するウィンドウです。編集するプロジェクトやソースコードの切り替え等を行います。
ソース/デザイン編集ウィンドウ
中央部にある、ソフトウェアのソースコードやデザインを編集するウィンドウです。
パレットウィンドウ
右上部にある、ソフトウェアに乗せる様々な部品が用意されたウィンドウです。


2-1-7
現段階で、ソフトウェアのベース(JFrame)が出来上がっています。一度プロジェクトを実行して、ベースを表示してみましょう。プロジェクトの実行には、中央画面上部にある緑色の矢印アイコンをクリックします。(「F6」キーやメニューバーの[実行]->[プロジェクト(プロジェクト名)を実行]からも実行できます。)


2-1-8
すると、このようなメインクラスを選択する画面が出てきます。先ほど作った「MainFrame」が選択されていることを確認し、「OK」ボタンを押しましょう。次回以降は表示されなくなります。

※もしここで何も表示されず「OK」ボタンが押せない場合は、「JFrame」フォームではなく「JPanel」フォームを作ってしまっている可能性があります。「プロジェクト」ウィンドウから「MainFrame.java」を削除し、「JFrame」フォームを新たに作成して下さい。


2-1-9
実行すると、次のようなウィンドウが表示されます。このように、クリックと名前入力を何度か行うだけで、ソフトウェアのベースが出来上がります。


3. ルック・アンド・フィールについて

ここまでで、簡単にソフトウェアの画面が作れることを説明しましたが、実行画面が編集画面と比べてグレーになっていることに気が付いたでしょうか。これは、ルック・アンド・フィール(Look and Feel, LnF)の違いによるものです。ルック・アンド・フィールとはその名の通り、ソフトウェアのルック(見た目)とフィール(操作感)を表すものです。NetBeansでは標準で、編集画面と実行画面のルック・アンド・フィールが異なっているのです。この仕様が気になる人は意外に多い(ような気がする)ので、ここではルック・アンド・フィールの変更方法についてご紹介します。見た目と操作感の話なので、読み飛ばして次の節に進んでもらっても問題ありません。


2-1-10
「パレット」ウィンドウの「Swingコントロール」タブ内にある「ボタン」をクリックし、「JFrame」の上でもう一度クリックすることで、ボタンを配置することができます(ドラッグ&ドロップでも可)。配置する場所はどこでも構いませんが、例えば上図のようにフォーム左上のほうへ持っていくとグリッド線が表示され、一定の間隔で配置することが可能です。


2-1-11
ボタンの右下部をドラッグすると、ボタンのサイズを変更することができます。見やすいように大きくしておきます。


2-1-12
「実行」ボタンを押して、実行してみましょう。


2-1-13
ボタンが追加されたウィンドウが表示されます。ボタンの質感が、明らかに違うことがわかると思います。その他にも色々な部品を追加して実行すると、ほぼ全てにおいて編集画面と実行画面で違う見た目のものが表示されることがわかります。これが、ルック・アンド・フィールの違いです。

ちなみに、WindowsのPCを利用している場合、編集画面は「Windows」ルック・アンド・フィール、実行画面は「Nimbus」ルック・アンド・フィールとなっています。

次に、ルック・アンド・フィールの変更方法をご紹介します。


2-1-14
編集ウィンドウ上部の、「ソース」と書かれたタブを押します。この「ソース」「デザイン」タブによって、ソースコード編集画面ととデザイン編集画面を行き来することができます。


2-1-15
ソースコードが表示されたら、およそ60行目付近の「Look and feel setting code (optional)」と書かれた行を探し、行の左側にある「+」を押して折り畳まれたソースコードを展開します


2-1-16
展開されたソースコードの上のほうに、「if (“Nimbus”.equals(info.getName())) 」と書かれた部分があります。ここの「Nimbus」の文字を変更することで、ルック・アンド・フィールを変更することが可能です。Windowsの場合、ルック・アンド・フィールは次の5種類用意されています。

・「Nimbus」
・「Windows」
・「Metal」
・「CDE/Motif」
・「Windwos Classic」

ソースコードの「Nimbus」の部分を、上記の文字に変更してみましょう。


2-1-17
「Windows」ルック・アンド・フィールです。Windows ユーザにとっては、Windows 上で動く様々ソフトウェアと同じ見た目であるため、最も違和感の少ないルック・アンド・フィールです。次節以降は、この Windows ルック・アンド・フィールを利用していきます。


2-1-18
「Metal」ルック・アンド・フィールです。Java 標準のルック・アンド・フィールであり、特に指定しなければこのルック・アンド・フィールが利用されます。(NetBeans では、自動で「Nimbus」を指定しています。)


2-1-19
「CDE/Motif」ルック・アンド・フィールです。


2-1-20
「Windows Classic」ルック・アンド・フィールです。


このように、Javaでは様々なルック・アンド・フィールが用意されており、それを手軽に変更することが可能となっております。異なるOS間で動く製品を開発する場合には注意が必要ですが、個人で利用する分には好みのものを使ったり、気分転換に変更したりしましょう。デザイン画面の「JFrame」上で右クリックして[デザインのプレビュー]->[ルック・アンド・フィール名]と進むことで、実行せずにデザインのプレビューをすることもできます。

また、上記のようなルック・アンド・フィールが変更できるのは、NetBeans 7以降(確か)となります。NetBeans 7以降では、「JFrame」フォームを作成した際に、自動でルック・アンド・フィールを変更するソースコードを挿入するという仕様が追加されました。従って、それ以前のバージョンを使っている方は、ルック・アンド・フィールを変更するソースコードを追加する必要があります。古いバージョンを使っていてルック・アンド・フィールを変更したいという方は、ソースコード編集画面にて、

と書かれた部分を探し、その真下に次のソースコードを挿入します。

後は同様に、「Nimbus」と書かれた部分を変更することで、ルック・アンド・フィールを変更することができます。

ルック・アンド・フィールはいきなり説明するものではないのかもしれませんが、私は、ソフトウェアの見た目や操作感というのは、開発のモチベーションと深く関連していると考えています。そのため、かなり早い段階でルック・アンド・フィールにつてざっくりと書かせて頂きました。少し寄り道してしまいましたが、次回からはいよいよソフトウェアに機能を持たせていきます。


コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">