自宅でＪａｖａ言語の開発環境を作る方法

Size: px

Start display at page:

Download "自宅でＪａｖａ言語の開発環境を作る方法"

ふじよしいまいだ
6 years ago
Views:

1 ViralBanner の作成方法 2010 年 1 月 31 日更新あいあいスクール代表畠茂雄 ( はたけしげお )

2 もくじ今回作成するツールの紹介... 3 ソースコードの作成... 5 (1)ViralBanner.html のソースコード... 6 (2)ViralBanner.java のソースコード... 7 (3) 参考 : レイアウトマネージャについて

今回作成するツールの紹介 ViraBanner このツールは nozan さんが紹介しているヴァイラルダウンローダーっぽく作ったツールですヴァイラルダウンローダーの実行画面を今回 Java アプレットで作ってみましたヴァイラルとはクチコミという意味でツールを口コミで広めていこうとするものです

3 今回作成するツールの紹介 ViraBanner このツールは nozan さんが紹介しているヴァイラルダウンローダーっぽく作ったツールですヴァイラルダウンローダーの実行画面を今回 Java アプレットで作ってみましたヴァイラルとはクチコミという意味でツールを口コミで広めていこうとするものです詳しく知りたい方はこちらを参照して下さい ( 直リンク ) <nozan さんの無料レポート> 勝手に延々とあなたのブログへのアクセスやメルマガ読者を増やしてしまう秘伝のバイラルマーケティングツール!! < バナー広告のように設置した例 > - 3

< 主な機能 > 認証コード欄にはダウンロードできる人だけが知っているコードを入力します入力された認証コードが正しければ [ ダウンロード ] ボタンをクリックすると指定したダウンロード先へジャンプします正しくなければ注意メッセージを表示します認証コードがわからない場合 [ 認証コード取得 ]

4 < 主な機能 > 認証コード欄にはダウンロードできる人だけが知っているコードを入力します入力された認証コードが正しければ [ ダウンロード ] ボタンをクリックすると指定したダウンロード先へジャンプします正しくなければ注意メッセージを表示します認証コードがわからない場合 [ 認証コード取得 ] ボタンをクリックすると取得方法を案内するページにジャンプしますサンプルでは [ 認証コード取得 ] ボタンをクリックすると表示された画面ですぐ認証コードを見れるようにしてありますがここはメールアドレスを入力してもらうフォーム等を設置してリストの取得やメルマガへの登録をうながす用途に使えます - 4

5 ソースコードの作成今回必要なプログラムのソースファイルは ViralBanner.java (1) 1 つだけですがブラウザ表示を確認するために HTML ファイル ViralBanner.html (2) を利用します (2) のファイルをブラウザで開くとプログラムを呼んで表示するようになっていますなお (1) のファイルをコンパイルすると ViralBanner.class ViralBanner$ViralListener.class という 2 つのクラスファイルが出来上がります実際に利用する場合にはこの 2 つのクラスファイルを配置します今回画像も使っているので jpg または gif 形式の画像ファイルが別途必要になりますコンパイルの方法等につきましてはこちらをご参照下さい自宅で Java 言語の開発環境を作る方法 ( 最新の情報に更新しています ) - 5

6 (1)ViralBanner.html のソースコード以下のコードをコピーして ViralBanner.html というファイル名で保管しますバナー広告によくあるサイズの幅 468 ピクセル高さ 60 ピクセルの大きさで表示されるようにしています実際にブログツールとして設置するには <APPLET> タグの部分だけをブログツール設置場所に書き込めばいいのですが置き場所を codebase= に指定する必要がありますクラスファイルを ~ と指定できる場所に置く必要がありますダウンロードファイルを置く方法と同様に置いて下さいブログツールに書き込むコードの例 ( ~ の部分は自分のものに変更して下さい ) <APPLET codebase=" code="viralbanner.class" width=468 height=60></applet> ここから ViralBanner.html のソースコード <HTML> <HEAD> <TITLE>ViralBanner</TITLE> </HEAD> <BODY> <APPLET code="viralbanner.class" width=468 height=60></applet> </BODY> </HTML> - 6

7 (2)ViralBanner.java のソースコード以下のコードをコピーして ViralBanner.java というファイル名で保管しますその後正常にコンパイルすると以下の 2 つのクラスファイルが出来上がります ViralBanner.class ViralBanner$ViralListener.class (1) で作成した ViralBanner.html を同じ場所に置いて ViralBanner.html をブラウザでいて正常に表示されるか確認してみましょう // ViralBanner のソースコード // 変更箇所 (1) から変更箇所 (8) の 8 箇所を変更すれば OK です // 利用するクラスが入ったパッケージをインポートします import java.applet.*; import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.net.*; public class ViralBanner extends JApplet { // ここで URL や認証コードをセットする変数を用意します URL u_download, u_ninsyo, u_viral; JTextField textfield; public void init() { // JApplet クラスのデフォルトのレイアウトマネージャは // ボーダーレイアウト Container fc = getcontentpane(); // パネルを作る JPanel p1 = new JPanel(); JPanel p2 = new JPanel(); JPanel p3 = new JPanel(); // パネル 1 はグリッドレイアウト (2 行 1 列 ) GridLayout gl = new GridLayout(2, 1); p1.setlayout(gl); // パネル 2 3 はフローレイアウト ( 左寄せ ) FlowLayout fl = new FlowLayout(FlowLayout.LEFT); p2.setlayout(fl); p3.setlayout(fl); // ここで URL の間違いがないか判断します try { // ツールやレポートをダウンロードする URL をセットします u_download = new URL(" // 変更箇所 (1) // 認証コードを取得する URL をセットします u_ninsyo = new URL(" // 変更箇所 (2) // ボタン画像をクリックするとジャンプする先の URL をセットします u_viral = new URL(" // 変更箇所 (3) catch (MalformedURLException mue) { System.err.println("URLが見つかりませんでした "); // Image クラス型変数に画像データを入れる (60 60 ピクセル程度の jpg または gif 画像 ) Image image = getimage(getcodebase(),"./viraldown.jpg");// 変更箇所 (4) // Image を ImageIcon クラスに変換する ImageIcon icon = new ImageIcon(image); // アイコンのボタンを作る JButton img = new JButton(icon); - 7

8 // アプレットの背景色を指定する //fc.setbackground(color.yellow); // パネルの背景色を指定する (Red,Green,Blue) を 0~255 の値で自由に指定します Color col = new Color( 255, 228, 225 ); // 変更箇所 (5) // 指定した色にセットします ( 初期色として黄色をセット ) col = Color.yellow; // 変更箇所 (6)(5) で変更した場合この行は不要です // アプレットの背景色を指定します p1.setbackground(col); p2.setbackground(col); p3.setbackground(col); img.setbackground(col); // ツールやレポートの案内文をここに入れます // 全角 26 文字で埋めること JLabel label1 = new JLabel(" このヴァイラルツールっぽいブログツールの作り方を無料プレゼント!"); // 変更箇所 (7) // ボタンなどを用意する JLabel label2 = new JLabel(" 認証コート "); textfield = new JTextField("", 9); JButton b_download = new JButton(" タウンロート "); JButton b_ninsyo = new JButton(" 認証コート取得 "); ViralListener al = new ViralListener(); b_download.addactionlistener(al); b_ninsyo.addactionlistener(al); img.addactionlistener(al); // ラベル 1 のフォントを設定します Font fo1 = new Font("SansSerif",Font.BOLD,13); label1.setforeground(color.blue); label1.setfont(fo1); // ラベル 2 のフォントを設定します Font fo2 = new Font("SansSerif",Font.BOLD,12); //p.setforeground(color.black); label2.setfont(fo2); // パネル 2 にラベル 1 とボタンを載せます p2.add(label1); // パネル 3 にラベル 2 とボタンを載せます p3.add(label2); p3.add(textfield); p3.add(b_download); p3.add(b_ninsyo); // ボーダーレイアウトのコンテンツ区画 ( 西 ) にボタン画像を載せる fc.add(img, BorderLayout.WEST); // パネル 1 の上下にパネル 2 とパネル 3 を配置する p1.add(p2); p1.add(p3); // ボーダーレイアウトのコンテンツ区画 ( 中央 ) にパネル 1 を載せる fc.add(p1, BorderLayout.CENTER); // ボタンが押された時の処理 class ViralListener implements ActionListener { public void actionperformed(actionevent ae) { String bname = ae.getactioncommand(); if (bname.equals(" タウンロート ")) { // ここに認証コードをセットします if(textfield.gettext().equals("happyhappy")){ // 変更箇所 (8) // ツールやレポートをダウンロードする URL へジャンプする getappletcontext().showdocument(u_download); else { String title = " 警告 "; String msg = " 認証コードが違っています "; JOptionPane.showMessageDialog(null, msg, title, JOptionPane.WARNING_MESSAGE); else if (bname.equals(" 認証コート取得 ")) { - 8

9 // 認証コードを取得する URL へジャンプする getappletcontext().showdocument(u_ninsyo); else { // ボタン画像をクリックした時の URL へジャンプする getappletcontext().showdocument(u_viral); おめでとう! あなたはブログツール開発者になれました! < 補足 > 今回のツールは 3 つのレイアウトマネージャを以下のように組み合わせて使っています内部を 2 行 1 列のグリッドに分割グリッド内はフローレイアウト - 9

10 (3) 参考 : レイアウトマネージャについて複数のボタンなどの GUI コンポーネントを配置する場合レイアウトマネージャが使われます < 利点 > 要素を配置する座標などを計算する必要がないウィンドウのサイズ変更をすると自動的に配置を調節する OS 等の環境の違いによりGUIコンポーネントのサイズは異なるがこれを適切に調節する < レイアウトマネージャの種類 > パッケージ名称 ( クラス名 ) 説明使用頻度 java.awt FlowLayout 左から右へ流れるように配置する GridLayout サイズが等しい矩形を格子状に配置する BorderLayout 上下右左中央の 5 つの場所に配置する ( デフォルト ) CardLayout 各コンホーネントをカードとして扱う 1 度に 1 枚だけ表示する GridBagLayout 異なる大きさのコンホーネントでも縦横に配置できる javax.swing BoxLayout 水平あるいは垂直に 1 列に配置する OverlayLayout コンホーネントを互いの上に重なり合うように配置する ScrollPaneLayout スクロール可能なビューのレイアウトに使われる ViewportLayout ヒューホート ( 窓 ) へのレイアウトに使われるよく利用されるのは赤字の 3 つです - 10

11 レイアウトマネージャを使ったサンプルプログラムフローレイアウト (Flow1.java) フローレイアウトは可能な限り横 1 列に GUI コンポーネントを配置するレイアウト方法です G UI コンポーネントは追加された順に左から右へと並びます 1 行に入りきらない場合は次の行に折り返して表示します余白があるときは中央揃えになります // フローレイアウトのサンプルプログラム import javax.swing.*; import java.awt.*; class Flow1 { public static void main(string args[]) { JFrame f = new JFrame("FlowLayout1"); f.setdefaultcloseoperation(f.exit_on_close); Container c = f.getcontentpane(); // レイアウトマネージャのインスタンスを作る FlowLayout fl = new FlowLayout(); // レイアウトを設定 c.setlayout(fl); // ボタンを 6 つ作ってコンテンツ区画に追加する c.add(new JButton("1")); c.add(new JButton("2")); c.add(new JButton("3")); c.add(new JButton("4")); c.add(new JButton("5")); c.add(new JButton("6")); f.pack(); f.setvisible(true); 1 コンテンツペインは Container クラス型 ( コンテナ ) のオブジェクトです getcontentpane で得ることができます 2 フローレイアウトマネージャは FlowLayout クラスで作ります 3 レイアウトはレイアウトマネージャを作って setlayout メソッドの引数にすることで設定します - 11

12 フローレイアウトではウィンドウの幅が広がったときに GUI コンポーネントを左詰め中央右詰めなどに整列するように設定できますコンストラクタ FlowLayout の引数には FlowLayout クラスが持つフィールド名を指定します ( 下表 ) 省略時は中央揃え (CENTER) ですフィールド名整列方法 LEFT 各行の GUI コンホーネントを左揃えにする CENTER 各行の GUI コンホーネントを中央揃えにする RIGHT 各行の GUI コンホーネントを右揃えにする LEADING 各行の GUI コンホーネントをコンテナの方向のリーディングエッジ ( 例えば左から右方向の場合の左端 ) に揃える TRAILING 各行の GUI コンホーネントをコンテナの方向のトレイリングエッジ ( 例えば左から右方向の場合の右端 ) に揃えるサンプルのコンテナの方向は左から右方向なので LEFT と LEADING は同じ挙動になります 2 の FlowLayout fl = new FlowLayout(); は以下のように記述することができます FlowLayout fl = new FlowLayout(FlowLayout.RIGHT, 10, 15); ここでクラス名. フィールド名として使用できるフィールドをクラス変数と呼びインスタンス変数と異なりインスタンスを生成しなくても使用できるフィールドです第 2 引数と第 3 引数には GUI コンポーネント同士の水平間隔垂直間隔が指定できます ( 単位ピクセル ) また 20 行目から 22 行目の記述は第 2 引数で挿入位置 ( 先頭 0) を指定することができます c.add(new JButton("4"),0); c.add(new JButton("5"),2); c.add(new JButton("6"),4); - 12

$import javax.swing.*; import java.awt.*; class Grid1 { public static void main(string args[]) { JFrame f = new JFrame("GridLayout1"); f.setdefaultcloseoperation(f.exit_on_close); Container c = f.$

13 グリッドレイアウト (Grid1.java) グリッドレイアウト (grid: 格子 ) は GUI コンポーネントを縦横の格子状に配置するレイアウト方法です GUI コンポーネントは追加された順に左上右上次行の左端右端右へと並びます枠の大きさは GUI コンポーネントの中の最大のものに合わせられますウィンドウサイズを変えるとそれに合わせて枠の大きさも変化します // グリッドレイアウトのサンプルプログラム 1 import javax.swing.*; import java.awt.*; class Grid1 { public static void main(string args[]) { JFrame f = new JFrame("GridLayout1"); f.setdefaultcloseoperation(f.exit_on_close); Container c = f.getcontentpane(); // レイアウトマネージャのインスタンスを作る GridLayout gl = new GridLayout(2, 3); c.setlayout(gl); c.add(new JButton("1")); c.add(new JButton("2")); c.add(new JButton("3")); c.add(new JButton("4")); c.add(new JButton("5")); c.add(new JButton("6")); f.pack(); f.setvisible(true); 1 1 グリッドレイアウトマネージャは GridLayout クラスで作ります引数は行数列数ですこの GridLayout gl = new GridLayout(2, 3); は以下のように記述することができます GridLayout gl = new GridLayout(0, 4, 10, 20); 第 3 引数第 4 引数は GUI コンポーネント同士の水平間隔垂直間隔が指定できます ( 単位ピクセルでデフォルトは 0) 行数または列数のどちらかを 0 に指定すると 0 でない方の値だけが有効になりますこの場合行数が 0 なので行数にかかわらず 4 列で配置する指定になります - 13

$awt.*; class Border1 { public static void main(string args[]) { JFrame f = new JFrame("BorderLayout1"); f.setdefaultcloseoperation(f.exit_on_close); Container c = f.$

14 ボーダーレイアウト (Border1.java) ボーダーレイアウト (border: 境界 ) は GUI コンポーネントを東西南北中央の 5 箇所に配置するレイアウト方法です JFrame クラスのコンテンツ区画はデフォルトでボーダーレイアウトになっています // ボーダーレイアウトのサンプルプログラム 1 import javax.swing.*; import java.awt.*; class Border1 { public static void main(string args[]) { JFrame f = new JFrame("BorderLayout1"); f.setdefaultcloseoperation(f.exit_on_close); Container c = f.getcontentpane(); // ボーダーレイアウトマネージャのインスタンスを作る BorderLayout bl = new BorderLayout(); 1 c.setlayout(bl); // 第 2 引数で配置場所を指定 c.add(new JButton("NORTH"), BorderLayout.NORTH); c.add(new JButton("EAST"), BorderLayout.EAST); c.add(new JButton("CENTER"),BorderLayout.CENTER); c.add(new JButton("WEST"), BorderLayout.WEST); c.add(new JButton("SOUTH"), BorderLayout.SOUTH); 2 f.pack(); f.setvisible(true); 1 ボーダーレイアウトマネージャは BorderLayout クラスで作ります第 1 引数と第 2 引数には GUI コンポーネント同士の水平間隔垂直間隔が指定できます ( 単位ピクセルでデフォルトは 0) 2 配置場所は add メソッドの第 2 引数で指定します BorderLayout クラスのクラス変数を使いますデフォルトでは CENTER になっているので指定しないとすべて重なり最後の GUI コンポーネントだけしか見えなくなります NORTH と SOUTH の領域は横一杯に広がります WEST と EAST は文字列の長さで横幅が決まります CENTER の領域は残った大きさ一杯に広がります - 14

15 レイアウトマネージャを組み合わせて使う (PanelSample.java) 複数のレイアウトマネージャを組み合わせて使うためにはパネルが必要ですパネルは複数の GUI コンポーネントを 1 つにまとめて扱うための GUI コンポーネントですフレームのコンテンツ区画やパネルのように GUI コンポーネントを入れる ( 載せる ) ことのできるオブジェクトはコンテナと呼ばれます // 複数のレイアウトマネージャを組み合わせて使うサンプルプログラム import javax.swing.*; import java.awt.*; class PanelSample { public static void main(string args[]) { JFrame f = new JFrame("PanelSample"); f.setdefaultcloseoperation(f.exit_on_close); Container fc = f.getcontentpane(); // パネルを作る JPanel p = new JPanel(); // パネルはグリッドレイアウト (3 3) GridLayout gl = new GridLayout(3, 3); p.setlayout(gl); 1 2 // パネルにラベルとボタンを載せる p.add(new JLabel("")); // ダミー p.add(new JButton(" ")); p.add(new JLabel("")); // ダミー p.add(new JButton(" ")); p.add(new JLabel("")); // ダミー p.add(new JButton(" ")); p.add(new JLabel("")); // ダミー p.add(new JButton(" ")); p.add(new JLabel("")); // ダミー // フレームのコンテンツ区画 ( 北 ) にボタンを載せる fc.add(new JButton("CANCEL"), BorderLayout.NORTH); 3 // フレームのコンテンツ区画 ( 中央 ) にパネルを載せる fc.add(p, BorderLayout.CENTER); // フレームのコンテンツ区画 ( 南 ) にボタンを載せる fc.add(new JButton("O K"), BorderLayout.SOUTH); f.pack(); f.setvisible(true); 1 パネルは JPanel クラスで作ります 2 パネル内をグリッドレイアウト (3 3) にします 3 フレームのコンテンツ区画はデフォルトのボーダーレイアウトになります - 15

awt の主要なクラスを下記に示すクラス Component Container Button Label Panel Frame 説明画面にユーザインターフェイス要素として表示し, ユーザとのやり取りを行うコンポーネントを表すすべてのコンポーネントのスーパークラスになるほかのコンポーネントを含

awt の主要なクラスを下記に示すクラス Component Container Button Label Panel Frame 説明画面にユーザインターフェイス要素として表示し, ユーザとのやり取りを行うコンポーネントを表すすべてのコンポーネントのスーパークラスになるほかのコンポーネントを含第 3 章 GUI による電卓の実装 GUI の基礎とイベント処理について理解し, 前章で作成した演算プログラムを組み込んで電卓を作成 ( 実装 ) する 3.1 インターフェイス文字などのコマンドだけでやりとりするインターフェイスを CUI(Command User Interface) と呼び, マウスなどでウインドウを操作して行うインターフェイスを GUI(Graphical User Interface)