netbeans.apache.org/src/content/kb/docs/java/gui-image-display_ja.asciidoc

// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= Java GUIアプリケーションでのイメージの処理
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Java GUIアプリケーションでのイメージの処理 - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Java GUIアプリケーションでのイメージの処理


image::images/netbeans-stamp-80-74.png[title="このページの内容は、NetBeans IDE 7.4および8.0に適用されます"]


*このチュートリアルを完了するには、次のソフトウェアとリソースが必要です。*

|===
|ソフトウェアまたはリソース |必須バージョン 

|link:http://netbeans.org/downloads/[+NetBeans IDE+] |バージョン7.4または8.0 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Java Development Kit (JDK)+] |バージョン6、7または8 
|===


== 概要

アプリケーションでのイメージの処理は、多くのJava初心者プログラマにとって共通の課題です。Javaアプリケーションでイメージにアクセスする標準的な方法は、`link:http://download.oracle.com/javase/6/docs/api/java/lang/ClassLoader.html#getResource(java.lang.String)[+getResource()+]`メソッドを使用することです。このチュートリアルでは、IDEのGUIビルダーを使用して、アプリケーションにイメージ(および他のリソース)を含めるためのコードを生成する方法を説明します。さらに、IDEでイメージ処理コードを生成する方法をどのようにカスタマイズするかについても学びます。

このチュートリアルで作成するアプリケーションは、単一のイメージを表示するJLabelを1つ含む、単純なJFrameです。


== アプリケーションの作成

1. 「ファイル」>「新規プロジェクト」を選択します。
2. 新規プロジェクト・ウィザードで、「Java」>「Javaアプリケーション」を選択し、「次」をクリックします。
3. 「プロジェクト名」に「`ImageDisplayApp`」と入力します。
4. 「メイン・クラスの作成」チェックボックスを選択解除します。

[.feature]
--
image::images/newproj-small.png[role="left", link="images/newproj.png"]
--


[start=5]
. 「終了」をクリックします。


== アプリケーション・フォームの作成

この項では、JFrameフォームを作成し、JLabelをフォームに追加します。

*JFrameフォームを作成するには:*

1. 「プロジェクト」ウィンドウで、「 ``ImageDisplayApp`` 」ノードを展開します。
2. 「ソース・パッケージ」ノードを右クリックし、「新規」>「JFrameフォーム」を選択します。
3. 「クラス名」に「`ImageDisplay`」と入力します。
4. 「パッケージ名」に「`org.me.myimageapp`」と入力します。
5. 「終了」をクリックします。

*JLabelを追加するには:*

* 「パレット」で「ラベル」コンポーネントを選択し、JFrameにドラッグします。

この段階で、フォームは次のイメージのように表示されているはずです。

[.feature]
--
image::images/form-small.png[role="left", link="images/form.png"]
--


== イメージ用のパッケージの追加

アプリケーションでイメージまたは他のリソースを使用する場合は、通常、リソース用のJavaパッケージを別途作成します。ローカル・ファイル・システムでは、パッケージはフォルダに対応します。

*イメージ用のパッケージを作成するには:*

1. 「プロジェクト」ウィンドウで、「`org.me.myimageapp`」ノードを右クリックし、「新規」>「Javaパッケージ」を選択します。

[.feature]
--
image::images/package-small.png[role="left", link="images/package.png"]
--


[start=2]
. 「終了」をクリックします。

「プロジェクト」ウィンドウでは、`Source Packages`フォルダ内に新規パッケージが表示されているはずです。

image::images/project-with-imagepack.png[]


== ラベルでのイメージの表示

このアプリケーションでは、イメージがJLabelコンポーネント内に埋め込まれます。

*イメージをラベルに追加するには:*

1. GUIデザイナで、フォームに追加したラベルを選択します。
2. 「プロパティ」ウィンドウで、「プロパティ」カテゴリをクリックし、アイコン・プロパティまでスクロールします。
3. 省略符号(...)ボタンをクリックします。
アイコン・プロパティ・エディタが表示されます。

[.feature]
--
image::images/importimage-small.png[role="left", link="images/importimage.png"]
--


[start=4]
. アイコン・プロパティのダイアログ・ボックスで、「プロジェクトにインポート」をクリックします。

[start=5]
. ファイル・チューザで、システム上にある、使用するイメージに移動します。「次」をクリックします。

[start=6]
. ウィザードの「ターゲット・フォルダの選択」ページで、`newpackage`フォルダを選択し、「終了」をクリックします。

[.feature]
--
image::images/targetfolder-small.png[role="left", link="images/targetfolder.png"]
--


[start=7]
. 「OK」をクリックしてアイコン・プロパティのダイアログ・ボックスを閉じます。

「OK」をクリックすると、IDEでは次の処理が行われます。

* イメージをプロジェクトにコピー。これで、アプリケーションをビルドおよび配布するときには、イメージが配布可能JARファイルに含まれます。
* イメージにアクセスするため、ImageDisplayクラスにコードを生成。
* フォームの「デザイン」ビューで、イメージをラベルに表示。

[.feature]
--
image::images/label-added-small.png[role="left", link="images/label-added.png"]
--

この段階で、次のような基本的な操作を実行し、フォームの外観を改良できます。

* 「プロパティ」ウィンドウで、`text`プロパティを選択し、`jLabel1`を削除します。この値は、ラベルの表示テキストとして、GUIビルダーで生成されたものです。しかし、今はテキストではなくラベルを使用してイメージを表示しているため、テキストは必要ありません。
* `jLabel1`をドラッグしてフォームの中央に配置します。

[.feature]
--
image::images/centered-small.png[role="left", link="images/centered.png"]
--

*生成されたコードを表示するには:*

1. GUIデザイナで、「ソース」ボタンをクリックします。(「ソース」ボタンが表示されない場合は、メイン・メニューから「ビュー」>「ソース・エディタ」ツールバーを選択します。)
2. 「Generated Code」という行まで下にスクロールします。
3. 「Generated Code」行の左にあるプラス記号(+)をクリックし、GUIデザイナで生成されたコードを表示します。

主な行は次のとおりです。


[source,java]
----

jLabel1.setIcon(new javax.swing.ImageIcon(getClass().getResource("/org/me/myimageapp/newpackage/image.png"))); // NOI18N
----

`jLabel1`の`Icon`プロパティにプロパティ・エディタを使用したため、IDEでは`setIcon`メソッドが生成されました。このメソッドのパラメータには、`ImageIcon`の匿名の内部クラスにある`link:http://download.oracle.com/javase/6/docs/api/java/lang/ClassLoader.html#getResource(java.lang.String)[+getResource()+]`メソッドへのコールが含まれます。生成されたイメージへのパスは、アプリケーションのパッケージ構造内での位置に対応します。

*注意:*

* アイコン・プロパティ・エディタで「外部イメージ」オプションを使用すると、IDEではイメージをプロジェクトにコピーするかわりに、イメージへの絶対パスが生成されます。したがって、使用中のシステムでアプリケーションを実行するとイメージが表示されますが、別のシステムでアプリケーションを実行するとイメージは表示されない可能性があります。
* `getResource`メソッドは、アプリケーションで必要になる可能性のあるデータを含むテキスト・ファイルなど、他のタイプのリソースにアクセスする場合にも便利です。

*Jlabelに対するマウス・イベントのイベント・ハンドラを登録するには:*

「デザイン」ビューで「JLabel」を右クリックし、ポップアップ・メニューから「イベント」>「マウス」>「mouseClicked/mousePressed/mouseReleased」を選択します。
対応するイベントのイベント・ハンドラが生成されます。

*注意:* イベント・ハンドラでは、`event.getPoint()`、`event.getX()`、または`event.getY()`メソッドを使用してマウス座標(たとえば、マウス・クリックの場所)を取得できます。詳細は、link:http://docs.oracle.com/javase/1.4.2/docs/api/java/awt/event/MouseEvent.html[+クラスMouseEvent+]を参照してください。


== フレームの背景としてのイメージの表示

SwingにはJFrameの背景イメージに対する直接のサポートがないため、GUIビルダーにもJFrameの背景イメージに対する直接のサポートはありません。
いずれにしても、このような目標を達成するための様々な間接的な方法があります。このアプリケーションでは、イメージを含むJLabelがJFrameコンポーネント内に組み込まれる一方で、そのJLabelの上に透明なJPanelが配置され、すべてのコンポーネントの親として使用されます。

*イメージを含むJFrameに透明なJPanelを追加するには:*

1. 「ファイル」>「新規プロジェクト」を選択します。
2. 新規プロジェクト・ウィザードで、「Java」>「Javaアプリケーション」を選択し、「次」をクリックします。
3. 「プロジェクト名」に「`BackgroundImageApp`」と入力します。
4. 「メイン・クラスの作成」チェックボックスを選択解除します。

[.feature]
--
image::images/prj-small.png[role="left", link="images/prj.png"]
--


[start=5]
. 「終了」をクリックします。

[start=6]
. 「プロジェクト」ウィンドウで、「`BackgroundImageApp`」ノードを展開します。

[start=7]
. 「ソース・パッケージ」ノードを右クリックし、「新規」>「JFrameフォーム」を選択します。

[start=8]
. 「クラス名」に「`ImageDisplay`」と入力します。

[start=9]
. 「パッケージ名」に「`org.me.mybackgroundapp`」と入力します。

[.feature]
--
image::images/newjframe-small.png[role="left", link="images/newjframe.png"]
--


[start=10]
. 「終了」をクリックします。

[start=11]
. 「デザイン」ビューで「JFrame」を右クリックし、ポップアップ・メニューから「レイアウトを設定」>「グリッド・バッグ・レイアウト」を選択します。

[start=12]
. 「JFrame」を右クリックし、ポップアップ・メニューから「パレットから追加」>「Swingコンテナ」>「パネル」を選択します。

[start=13]
. 「プロパティ」ウィンドウで、jPanelの「`opaque`」プロパティを選択解除します。

[start=14]
. 「JFrame」を右クリックし、ポップアップ・メニューから「パレットから追加」>「Swingコントロール」>「ラベル」を選択します。

[start=15]
. 「プロジェクト」ウィンドウで、「`org.me.mybackgroundapp`」ノードを右クリックし、「新規」>「Javaパッケージ」を選択します。

[start=16]
. 「終了」をクリックします。新規パッケージが追加されます。

[start=17]
. GUIデザイナで、フォームに追加したラベルを選択します。

[start=18]
. 「プロパティ」ウィンドウで、「プロパティ」カテゴリをクリックし、アイコン・プロパティまでスクロールします。

[start=19]
. 省略符号(...)ボタンをクリックします。

[start=20]
. アイコン・プロパティのダイアログ・ボックスで、「プロジェクトにインポート」をクリックします。

[start=21]
. ファイル・チューザで、システム上にある、使用するイメージに移動します。「次」をクリックします。

[start=22]
. ウィザードの「ターゲット・フォルダの選択」ページで、`newpackage`リソース・フォルダを選択し、「終了」をクリックします。

[.feature]
--
image::images/targetfolder-small.png[role="left", link="images/targetfolder.png"]
--


[start=23]
. 「OK」をクリックしてアイコン・プロパティのダイアログ・ボックスを閉じます。

[start=24]
. ナビゲータで、「jPanel」を右クリックし、ポップアップ・メニューから「プロパティ」を選択します。

[start=25]
. 「プロパティ」ダイアログ・ボックスで、「`グリッドX`」、「`グリッドY`」、「`ウエイトX`」、および「`ウエイトY`」プロパティを「`1`」に設定し、「`フィル`」プロパティを「`両方`」に設定します。

[.feature]
--
image::images/panelprops-small.png[role="left", link="images/panelprops.png"]
--


[start=26]
. 「閉じる」をクリックします。

[start=27]
. jLabelについて手順24と25を繰り返します。

[start=28]
. 「プロパティ」ダイアログ・ボックスで、`text`プロパティを選択して`jLabel1`を削除します。

[.feature]
--
image::images/labelprops-small.png[role="left", link="images/labelprops.png"]
--

背景が完了しました。たとえば、jLabelとjTextFieldをパレットからjPanelにドラッグできるようになりました。この両方が背景イメージの上に表示されます。

image::images/background.png[]

*注意:* 説明した対処方法の利点は、背景イメージがデザイン時と実行時の両方で表示されることです。


== アプリケーションのビルドと実行

これで、イメージにアクセスして表示するためのコードが生成されたので、アプリケーションをビルドおよび実行し、イメージにアクセスしていることを確認できます。

まず、プロジェクトのメイン・クラスを設定する必要があります。メイン・クラスを設定すると、プロジェクトの実行時にどのクラスを実行するかがIDEで認識されます。さらに、アプリケーションのビルド時に、アプリケーションのJARファイルの`Main-Class`要素が確実に生成されます。

*プロジェクトのメイン・クラスを設定するには:*

1. ImageDisplayAppプロジェクトのノードを右クリックし、「プロパティ」を選択します。
2. 「プロジェクト・プロパティ」ダイアログ・ボックスで、「実行」カテゴリを選択します。
3. 「メイン・クラス」フィールドの横の「参照」ボタンをクリックします。次に、`org.me.myimageapp.ImageDisplay`クラスを選択します。

[.feature]
--
image::images/mainclass-small.png[role="left", link="images/mainclass.png"]
--


[start=4]
. 「メイン・クラスを選択」ボタンをクリックします。

[start=5]
. 「OK」をクリックして、「プロジェクト・プロパティ」ダイアログ・ボックスを閉じます。

*プロジェクトをビルドするには:*

* メイン・ツールバーから「実行」>「プロジェクトを消去してビルド」(_project_name_)を選択します。

アプリケーションのビルド結果は、「ファイル」ウィンドウに表示できます。`build`フォルダには、コンパイル済のクラスが格納されます。`dist`フォルダには、コンパイル済のクラスとイメージを含む、実行可能なJARファイルが格納されます。

image::images/files.png[]

*プロジェクトを実行する*

* メイン・ツールバーから「実行」>「プロジェクトの実行」(_project_name_)を選択します。


== カスタム・コードの作成

多くのアプリケーションでは、表示するイメージは、この例に示すように静的に決定されるわけではありません。たとえば、表示するイメージは、ユーザーがクリックする対象によって決まる場合があります。

表示するイメージをプログラムで選択できるようにする必要がある場合は、リソースにアクセスして表示するための、独自のカスタム・コードを作成できます。IDEでは、GUIビルダーで生成されたコードを含むソース・ビューの「保護されたブロック」にコードを直接記述することはできません。ただし、「プロパティ」ウィンドウからアクセスできるプロパティ・エディタから、保護されたブロックにコードを挿入できます。この方法でプロパティ・エディタを使用すると、GUIビルダーでデザインを変更してもカスタム・コードが失われません。

*たとえば、JLabelの`icon`プロパティのカスタム・コードを作成するには:*

1. 「デザイン」ビューまたは「ナビゲータ」ウィンドウで「JLabel」を選択します。
2. 「プロパティ」ウィンドウで、「`icon`」プロパティの横にある省略符号(...)ボタンをクリックします。
3. ダイアログ・ボックスの上部にあるドロップダウン・リストから、「カスタム・コード」オプションを選択します。

[.feature]
--
image:images/custom-code-small.png[role="left", link="images/custom-code.png"]
--

このプロパティ・エディタの「カスタム・コード」オプションを使用すると、`setIcon`メソッドのパラメータを入力できます。このパラメータには、必要なロジックを入力したり、クラスの別の場所で手動でコーディングした別のメソッドへのコールを入力することもできます。

[.feature]
--
image::images/custom-view-small.png[role="left", link="images/custom-view.png"]
--


== サマリー

このチュートリアルでは、NetBeans IDEで作成するアプリケーションからイメージにアクセスする方法を説明しました。イメージの処理は、Javaのチュートリアルでさらに説明します。

*注意: *このチュートリアルの例は、Javaチュートリアルのlink:http://java.sun.com/docs/books/tutorial/uiswing/components/icon.html[+アイコンの使用方法の項+]にある最初の例とよく似ています。異なるのは、このチュートリアルで生成されるコードでは、アイコンをラベルに適用するために、`link:http://download.oracle.com/javase/6/docs/api/javax/swing/JLabel.html[+JLabel+]`の`link:http://download.oracle.com/javase/6/docs/api/javax/swing/JLabel.html#setIcon(javax.swing.Icon)[+setIcon+]`メソッドが使用される点です。Javaチュートリアルの例では、アイコンはコンストラクタに渡されることでラベルに適用されます。

link:/about/contact_form.html?to=3&subject=Feedback:%20Handling%20Images%20in%20a%20GUI%20Application[+このチュートリアルに関するご意見をお寄せください+]



== 関連項目

* link:gui-functionality.html[+GUIビルドの概要+]
* link:quickstart-gui.html[+NetBeans IDEでのSwing GUIのデザイン+]
* link:../../trails/matisse.html[+Java GUIアプリケーションの学習+]
* link:../../trails/java-se.html[+一般的なJava開発の学習+]
* link:http://wiki.netbeans.org/NetBeansUserFAQ#GUI_Editor_.28Matisse.29[+GUIビルダー - FAQ+]
* _NetBeans IDEによるアプリケーションの開発_のlink:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920[+Java GUIの実装+]