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

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

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

 

1.プロジェクトの作成

2-1-1

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

2-1-2

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

2-1-3

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

2-1-4

もし「メインクラスの作成」チェックボックスのチェックを外さずに「終了」ボタンを押してしまった場合は、上図のようになります。こうなった場合は、作成された「SimpleFrame.java」というファイルを右クリックし、「削除」を選択して消しておきます。

 

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

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

2-1-5

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

2-1-6

「New JFrameフォーム」ウィンドウが立ち上がるので、クラス名に名前を入力します。ここでは、プロジェクト名と同じ「SimpleFrame」と入力しています(プロジェクト名と同じにする必要はありません)。パッケージ名は、ソースコードを分けて管理するフォルダのようなものです。今回は入力しなくても問題はありませんが、大規模なソフトウェア開発に備えて何かしら入力する習慣を付けておくことをお勧めします。ここでは、「gui」という名前を付けています。「終了」ボタンを押すと、「JFrame」フォームが作成されます。

2-1-7-2

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

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

2-1-8

すると、このようなメイン・クラス(1番初めに実行されるクラス)を選択する画面が出てきます。先ほど作った「SimpleFrame」が選択されていることを確認し、「OK」ボタンを押しましょう。次回以降は表示されなくなります。
※もしここで何も表示されず「OK」ボタンが押せない場合は、「JFrame」フォームではなく「JPanel」フォームを作ってしまっている可能性があります。「プロジェクト」ウィンドウから「SimpleFrame」ファイルを削除し、「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

展開されたソースコードの上のほうに、

と書かれた部分があります。ここの「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」と書かれた部分を変更することで、ルック・アンド・フィールを変更することができます。

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

(2013年9月16日 加納徹)


コメントを残す

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

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)