ゲーム・アプリ開発の基礎GUIの作り方

GUIとは、グラフィカル・ユーザーインターフェースの略で、ウインドウがあって、ボタンやメニューが付いていて、画像が表示されたりするソフトウェア全般を指します。普段みなさんが使っているソフトウェアは、すべてGUIです。
GUI

GUIの例:Windows Explorer

EclipseやNetBeansなどのIDE(統合開発環境)には、GUIアプリケーションの開発を支援する機能がありますが、使い方がエディタによってまちまちなので、今回はすべてコーディングすることにします。

この章では、以下の順に沿ってGUIの作成方法を説明していきます。

  1. ウィンドウの表示
  2. コンポーネントの追加
  3. キャンパスの作成と簡単な図形の描画

ウインドウの表示

gui_0

まず、上記のような空のウインドウを表示するだけの、シンプルなGUIを作ってみましょう。

前章と同様に、SimplePainterという名前のプロジェクトを作成します。

前章では特別なことは行っていなかったので、必要ありませんでしたが、GUIを作成するには、GUIを描画するためのライブラリをimportする必要があります。

importとは、既存のライブラリのクラスを使うために設定するリンクのようなものです。

今回は、現在広く用いられているswingをimportします。

packageの下に、以下の1文を追加してください。

アスタリスク「*」の意味は、swingライブラリに含まれるすべてのクラスをimportするということです。

特定のクラスだけをimportしたい場合には、アスタリスク「*」の場所にそのクラス名を書き込みます。

では、早速swingを使っていきましょう。

swingでは、ウィンドウを表示するのにJFrameというクラスを使います。

このJFrameを使って、ウィンドウを表示するソースコードがこちら。

追加したそれぞれの文の意味を説明していきます。

JFrameクラスのインスタンスを生成するための文です。「””」で囲われた部分が、ウィンドウのタイトルになります。

クラスのインスタンス、と聞いてもよく分からない人もいると思います。

オブジェクト指向(クラスによるプログラミング)は、それだけで本が一冊かけてしまうような内容なので、今回は軽く触れるだけにしますが、クラスとは、あるオブジェクト(≒モノ)を表す「鋳型」のようなものです。

たとえば、人を表す「Human」クラスを作ったとするなら、「Human」クラスから「tanaka」とか「yamada」のような具体的な人間を作るのがインスタンスの生成です。Humanクラスだけでは操作のしようもないですが、「田中さん」とか「山田さん」みたいな実体があれば、それぞれの身長や体重を比べることができますね。

このように、クラス(鋳型)から実際にプログラムの中で扱えるインスタンス(実体)を生み出すことを、インスタンスの生成と呼びます。

ここではJFrameというクラスから、具体的なframeというインスタンス(実体)を生成しています。こうすることによって初めて、プログラムの中で値をいじったり処理を加えたりできるようになります。

frameというウィンドウにある、「閉じる」ボタンを押したときの挙動を設定するための文です。閉じるボタンというのは、Windowsならウィンドウの右上、Macなら左上についている、赤い×印のことです。これを設定しないと、×ボタンを押しても終了しないプログラムになってしまうので、気を付けてください(実際にやってみるとわかりますが、×ボタンを押してウィンドウを閉じても、プログラムが走り続けます)。

 

ウインドウのサイズを設定しています。なくても実行できますが、どんなサイズになるか予想できなくなってしまいますので、入れておきましょう。

 

ウィンドウの表示位置を設定します。こちらもなくても実行できますが、入れておきましょう。

 

最後に、ウィンドウを可視化します。これを入れないと、ウィンドウが画面に表示されない状態になってしまうので、必ず入れてください。

以上のコードを追加して実行し、節の始めに載せたようなウィンドウが表示されたら成功です。

コンポーネント(部品)の追加

gui_1

前節で、とりあえずウインドウを表示することが出来るようになりました。でも、ウインドウの中身は空のままです。このままでは寂しいので、テキストだけでも表示したいと思います。

swingでテキストを表示するためには、JLabelというクラスを使います。

追加した文について、それぞれ説明していきます。

JFrameのときと同様、JLabelクラスのインスタンスlabelを生成しています。

引数に渡しているのが、ラベルに表示される文字列になります(ここではHello World)。

こちらはJFrameになかった処理です。先ほど生成したlabelを、ウインドウに追加しています。

このようにGUIでは、生成した部品(コンポーネントと呼びます)をウインドウなどの親要素に追加することで、初めて使うことができます。

フレームの要素として加えなければ、その部品は、作られはしたもののウインドウに乗せられていない、いわば宙ぶらりんの状態になってしまいます。慣れないうちは、この追加の操作を忘れて「作ったはずなのに、ウインドウに表示されない!」となることが多いので、気を付けましょう。

ちなみに、この書き方ができるのはある程度新しいバージョン(6以降では使えることを確認しています)からです。それ以前のバージョンでは、以下のように書く必要があります。

この書き方の意味を知りたい人は、ContentPaneについて検索すると良いと思います。

キャンパスの作成と簡単な図形の描画

前節までで、ウィンドウを出して簡単な文字列を表示することはできました。

次に、お絵かきソフトに必要なキャンバスを作成し、円を描画するプログラムを書いてみます。

gui_2

こちらが完成イメージです。

まず、基本となるキャンバス用のクラスを作りましょう。

見慣れない表現がたくさん出てきました。

オブジェクト指向の基本的な考え方が、いくつか出てきています。ちょっと大変ですが、決して理解できない内容ではないので、順を追って説明していきます。

extendsという単語が出てきました。

この単語の意味を理解するには、クラスの継承について学ぶ必要があります。

クラスの継承とは
あるクラスの機能(変数やメソッド)を引き継いで、新しい別のクラスを作ること。元となったクラスをスーパークラス、新しく作られたクラスをサブクラスと呼ぶ。
クラスが「鋳型」のようなものだということは説明しましたが、このたとえで言うと、クラスの継承は、ある鋳型を元に別の鋳型を作ることを指します。

基本的に、ライブラリに入っているクラスは、いろんな場面で使えるように抽象的な表現で書かれているので、そのまま使うことはできません。そこで私たちは、状況に合わせて、クラスをextends(拡張)する必要があります。それがクラスの継承です。

ここでは、自分で定義したCanvasというクラスに、swingのJPanelというクラスを継承させています。JPanelについては、ひとまず言葉通り、単なるパネルくらいの認識でいいでしょう。このパネルには、JFrameと同様、文字やボタンを乗せることができます。

JPanelクラスを継承することで、Canvasクラスでも、JPanelクラスが持っていた機能を一通り使うことができるようになります。

今度は@Overrideという表現が出てきました。

これもクラスの継承に関係する単語です。

メソッドのオーバーライドとは
extendsして作ったサブクラスで、元のスーパークラスにあったメソッドを書き換える(override)こと。Javaでは、書き換えるメソッドの前に@Overrideという表現を付ける。

ここでは、JPanelのpaintComponent()というメソッドを書き換えて、機能を追加しています。

具体的にどういう処理をしているかは次章で説明しますが、簡単に説明すると、setColor()で色を設定して、drawOval()で円を描いています。Ovalは「楕円」という意味です。

クラスと同じ名前のメソッドがあります。

これはコンストラクタと呼ばれていて、インスタンスの生成に使われるメソッドです。

今回はsetSize()でキャンバスのサイズを設定しています。

これでCanvasクラスは作ることができました。

gui_3

しかしエディターを見てみると、GraphicsとColorの下に、以下のような赤い波線が引かれているのではないでしょうか。

赤線が引かれる理由は、GraphicsやColorを使うのに必要なライブラリが、ソースコードにimportされていないからです。

これはswingのimportの前か後ろに、以下の2文を付け加えれば解決します。

 

ちなみに、Colorは色を設定するのに必要なクラスです。Graphicsは少しむずかしいですが、今回はコンポーネントの描画に関わるクラスと考えておいてください。

最後に、JLabelのときと同様、mainメソッド内でCanvasクラスのインスタンスを生成し、frameに追加します。

ちなみに、「new Canvas()」で呼ばれているCanvas()が、先ほど説明したコンストラクタです。

最終的には、以下のようなコードになります。

ハイライトした部分が、今回追加したコードです。

以上のコードを書き終えたら、さっそく実行してみましょう。

章の最初に載せたような、赤い円が表示されたら成功です。

ここまでで、ウインドウの表示と、ウインドウへのコンポーネントの追加について勉強しました。その過程で、オブジェクト指向についてもごく簡単に学びました。

次の章では、マウスから入力を読み込むために、イベント処理について説明します。

[転職率95.1%]最短22日で未経験からプログラマーへ『GEEK JOB 転職コース』
geekjob_to_gol_banner_sp_06

『GEEKJOB 転職コース』では未経験からでもプログラミングや仕事の進め方を学習でき、プログラマーとして転職/就職できるまでサポートします。

  • 短期集中のプログラミング学習で未経験から最短22日での転職/就職ができる

  • IT業界の採用を熟知したメンターが就活サポート

  • わからないことは現役プログラマに質問できる

  • オフィスで働く上で必要なスキルを身に付けられる

  • 紹介可能企業は500社以上


文系出身だから、全くプログラミング経験がないから、プログラミングの学習に挫折してしまったから、といった方も関係ありません。

未経験からプログラマーを目指せる環境を用意しています。

詳しく見る

この記事に関するキーワード

この記事の内容について報告する