ViralBanner の作成方法 2010 年 1 月 31 日更新 あいあいスクール代表 畠茂雄 ( はたけしげお )
もくじ 今回作成するツールの紹介... 3 ソースコードの作成... 5 (1)ViralBanner.html のソースコード... 6 (2)ViralBanner.java のソースコード... 7 (3) 参考 : レイアウトマネージャについて... 10-2
今回作成するツールの紹介 ViraBanner このツールは nozan さんが紹介している ヴァイラルダウンローダー っぽく作ったツールです ヴァイラルダウンローダー の実行画面を 今回 Java アプレット で作ってみました ヴァイラルとは クチコミ という意味で ツールを口コミで 広めていこうとするものです 詳しく知りたい方は こちらを参照して下さい ( 直リンク ) <nozan さんの無料レポート> 勝手に延々と あなたのブログへのアクセスや メルマガ読者を増やしてしまう秘伝のバイラルマーケティングツール!! http://www.iischool.net/download/magic.pdf < バナー広告のように設置した例 > - 3
< 主な機能 > 認証コード 欄には ダウンロードできる人だけが知っているコードを入力します 入力された認証コードが正しければ [ ダウンロード ] ボタンをクリックすると 指定したダウンロード先へジャンプ します 正しくなければ 注意メッセージを表示します 認証コードがわからない場合 [ 認証コード取得 ] ボタンをクリックすると 取得方法を案内するページにジャン プします サンプルでは [ 認証コード取得 ] ボタンをクリックすると 表示された画面で すぐ認証コードを見れるようにし てありますが ここは メールアドレスを入力してもらうフォーム等を設置して リストの取得や メルマガへの 登録をうながす用途に使えます - 4
ソースコードの作成 今回必要なプログラムのソースファイルは ViralBanner.java (1) 1 つだけですが ブラウザ表示を確認するために HTML ファイル ViralBanner.html (2) を利用します (2) のファイルをブラウザで開くと プログラムを呼んで 表示するようになっています なお (1) のファイルをコンパイルすると ViralBanner.class ViralBanner$ViralListener.class という 2 つのクラスファイルが出来上がります 実際に利用する場合には この 2 つのクラスファイルを配置します 今回 画像も使っているので jpg または gif 形式の画像ファイルが別途必要になります コンパイルの方法等につきましては こちらをご参照下さい 自宅で Java 言語の開発環境を作る方法 ( 最新の情報に更新しています ) http://www.iischool.net/40/41/ - 5
(1)ViralBanner.html のソースコード 以下のコードをコピーして ViralBanner.html というファイル名で保管します バナー広告によくあるサイズの幅 468 ピクセル 高さ 60 ピクセルの大きさで表示されるようにしています 実際に ブログツールとして設置するには <APPLET> タグの部分だけをブログツール設置場所に書き込め ばいいのですが 置き場所を codebase= に指定する必要があります クラスファイルを http:// ~ と指定できる場所に置く必要があります ダウンロードファイルを置く方法と同 様に置いて下さい ブログツールに書き込むコードの例 (http:// ~ の部分は自分のものに変更して下さい ) <APPLET codebase="http://www.iischool.net/java/" 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
(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(); // パネル 1 2 3 を作る 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("http://www.iischool.net/pdf/ViralTool.pdf"); // 変更箇所 (1) // 認証コードを取得する URL をセットします u_ninsyo = new URL("http://www.haatdesign.com/applet20/applet20.html"); // 変更箇所 (2) // ボタン画像をクリックするとジャンプする先の URL をセットします u_viral = new URL("http://heihou.biz/ViralDownloader/index.php?e=webmaster@iichiyoda.com"); // 変更箇所 (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
// アプレットの背景色を指定する //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 文字で埋めること 12345678901234567890123456 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
// 認証コードを取得する URL へジャンプする getappletcontext().showdocument(u_ninsyo); else { // ボタン画像をクリックした時の URL へジャンプする getappletcontext().showdocument(u_viral); おめでとう! あなたはブログツール開発者になれました! < 補足 > 今回のツールは 3 つのレイアウトマネージャを以下のように組み合わせて使っています 内部を 2 行 1 列の グリッドに分割 グリッド内は フローレイアウト - 9
(3) 参考 : レイアウトマネージャについて 複数のボタンなどの GUI コンポーネントを配置する場合 レイアウトマネージャ が使われます < 利点 > 要素を配置する座標などを計算する必要がない ウィンドウのサイズ変更をすると自動的に配置を調節する OS 等の環境の違いによりGUIコンポーネントのサイズは異なるが これを適切に調節する < レイアウトマネージャの種類 > パッケージ名称 ( クラス名 ) 説明使用頻度 java.awt FlowLayout 左から右へ流れるように配置する GridLayout サイズが等しい矩形を格子状に配置する BorderLayout 上下右左中央の 5 つの場所に配置する ( デフォルト ) CardLayout 各コンホ ーネントをカードとして扱う 1 度に 1 枚だけ表示する GridBagLayout 異なる大きさのコンホ ーネントでも縦横に配置できる javax.swing BoxLayout 水平あるいは垂直に 1 列に配置する OverlayLayout コンホ ーネントを互いの上に重なり合うように配置する ScrollPaneLayout スクロール可能なビューのレイアウトに使われる ViewportLayout ヒ ューホ ート ( 窓 ) へのレイアウトに使われる よく利用されるのは 赤字の 3 つです - 10
レイアウトマネージャを使ったサンプルプログラム フローレイアウト (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); 3 1 2 // ボタンを 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
フローレイアウト では ウィンドウの幅が広がったときに 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
グリッドレイアウト (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
ボーダーレイアウト (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
レイアウトマネージャを組み合わせて使う (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