[Work/Class/Java with Processing/4_SwingInProcessing]

アート系学生のためのJAVA with Processing - その4-3 ActionCommandで複数のボタンを作りイベントを制御する

導入

複数のボタンを使って制御する内容を変えたい場合は,setActionCommandで別々のActionCommandを割り当て,それをactionPerformed関数内やactionPerformedから呼び出す関数内で振り分けて,処理を記述すれば良い.

コード

//SwingInProcessing_MultipleButtons

import processing.awt.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

// macOSのJavaのProcessing最新版はこれでうまくいかないこともあるので
// processing.awt.PSurfaceAWT.SmoothCanvas;
// も追加

void setup(){
  size(640, 480);
  Canvas canvas = (Canvas)surface.getNative();
  // macOSのJavaのProcessing最新版はこれでうまくいかないこともあるので
  // SmoothCanvas canvas = (SmoothCanvas)getSurface().getNative();
  // で置き換える

  JLayeredPane layeredPane = 
    (JLayeredPane)canvas.getParent().getParent();

  JTextField textField = new JTextField("New Text Field");
  textField.setBounds(10, 360, 620, 20);
  
  MyButtonListener myButtonListener = 
    new MyButtonListener();
  myButtonListener.setTextField(textField);
  
  JButton button1 = new JButton("Button 1");
  button1.setBounds(10, 390, 100, 20);
  button1.setActionCommand("button1_push");
  button1.addActionListener(myButtonListener);
  
  // Add more one button named button2
  // ActionCommandを変えてボタンをもう一個作る.
  JButton button2 = new JButton("Button 2");
  // ボタンの表示位置はずらす
  button2.setBounds(120, 390, 100, 20);
  button2.setActionCommand("button2_push");
  // 登録するActionListenerを実装したクラスオブジェクトは同じもので良い
  // 内部でActionCommandを使って処理を切り分けるため
  button2.addActionListener(myButtonListener);
  
  layeredPane.add(textField);
  layeredPane.add(button1);
  // 2個目のボタンも表示画面に登録する
  layeredPane.add(button2);
}

void draw(){
  ellipse(0, 0, 100, 100);
}

class MyButtonListener implements ActionListener {
  JTextField textField;
  
  void setTextField(JTextField textField){
    this.textField = textField;
  }
  
  @Override
  public void actionPerformed(ActionEvent e){
    String actionCommand = e.getActionCommand();
    if(actionCommand.equals("button1_push")){
      textField.setText("Button1 has been pushed");
    }
    else if(actionCommand.equals("button2_push")){
      // ボタン2の時の処理内容.表示するテキストを変えている.
      textField.setText("Button2 has been pushed");
    }
  }
}
SwingInProcessing_MutipleButtons.pdeの実行結果の初期状態.テキストフィールドに初期状態のテキストが入っている.

初期状態では,テキストフィールドに表示されているのは初期状態のテキスト.

SwingInProcessing_MutipleButtons.pdeでButton1を押した結果.テキストフィールドにButton1のアクションコマンドで振り分けられた処理の結果が挿入されている.

Button1を押すと,設定されたアクションコマンド「button1_push」が入ったActionEventが渡されるので,String.equals()で判別し(Stringの詳しい内容は次項),その後の処理で書かれたTextField.setText()で入力した文字列が表示される.

SwingInProcessing_MutipleButtons.pdeでButton2を押した結果.テキストフィールドにButton2のアクションコマンドで振り分けられた処理の結果が挿入されている.

Button2を押すと,同様にButton2設定されたアクションコマンド「button2_push」が入ったActionEventが渡される


[Work/Class/Web基礎/assignment]

課題その1 - 他己紹介

2020年度特例 : 自己紹介

「自分にまつわる10個のキーワード」を定めて,そのキーワードを元に自分を紹介するWebコンテンツを制作する.

キーワード自体はフェイクなしだが,キーワードからつなげた内容はフェイク混じりでもよいので「コンテンツとして面白い」ものを作ることが目標.

締め切り

「スタイルシートの基礎」が終わった1週間後.(進み具合に応じて調整します)

普段の年度 : 他己紹介

自己紹介ではなく,パートナーの紹介をする課題.聞き取り調査で「その人にまつわる10個のキーワード」を定めて,そのキーワードを元にその人の紹介を「己」のように行うWebコンテンツを制作する.

キーワード自体はフェイクなしだが,キーワードからつなげた内容はフェイク混じりでもよいので「コンテンツとして面白い」ものを作ることが目標.


[Work/Class/Web基礎/css_basic]

スタイルシートの基礎

外部スタイルシートファイルの読み込み

HTMLの装飾を行う「スタイルシート」をhtmlファイル内部に直接書く方法もあるが,可読性の低下,そして複数のページの見た目の統一などの用途に使いづらくなるため,この授業では外部ファイルにスタイルシートの指定を書きそれをhtmlファイルに読み込む,という形をとる.

headタグ内部に以下のタグを追加する.

<link rel="stylesheet" href="スタイルシートのファイル.css" />

htmlタグに対するクラス指定

タグで指定した装飾

例えば,pタグの文章のフォント,pタグ同士の間隔を調整したい場合,CSSファイル側に,

p {
    color: red; /* 文字色を赤にする */
    background-color: #666666; /* pタグの背景を明るい灰色にする */
    font-family: sans-serif; /* フォントをsans-serif体(日本語なら明朝体)にする */
    
    margin-top: 10px; /* pタグの上側に10ピクセル分の余白を設ける */
    margin-left: 20px; /* pタグの左側に20ピクセル分の余白 */
    margin-bottom: 10px; /* 同様に下側に余白 */
}

のように記述すると,pタグの見た目が変わる.

同じタグで見た目を変えたい場合

例えば,文章の内容に応じて2種類の見た目をpタグに適用したいとする.

この場合,タグに対して「class」要素で指定できる「名前」をつけてやる.

実際のhtmlはそれぞれ,

<p class="first_p"> 中身テキスト1 </p>
<p class="second_p"> 中身テキスト2 </p>

と指定する.

"first_p"や"second_p"というのが「class」要素で指定した名前である.

この2種類のclass要素で指定した名前に対して,CSSファイルの中でそれぞれ,

p.first_p {
    color: #000000;
}
p.second_p {
    color: #999999;
}

と書くことで,二種類の見た目を実現することができる.

この時,CSSファイルの中では「p」と「クラス名(first_p)」の間にはスペースを入れることはできない

divタグとspanタグを使い,htmlタグ以外のまとまりを作る

htmlタグごとではなく,任意のまとまり(ブロック)や,例えばpタグの中のテキスト文中の一部分だけを装飾したい場合,divタグとspanタグを使って,それにclass要素で名前を指定することで,ブロック単位で装飾することができる.

div

見出しと本文と図表をまとめて一つのブロックとしたい場合,htmlを

<div class="oneblock">
    <h3>見出し</ht>
    <p>本文</p>
    <img src="..." />
</div>

のように「divタグで囲んで」「divタグのclass要素にoneblockという名前をつけて」書き,cssの方で,

.oneblock {
    margin-top: 10px;
    margin-left: 20px;
    margin-bottom: 10px;
}

のようにclass要素で指定した名前の頭に「.」をつけて指定することで,divタグで囲った絶対全体に対して適切な余白を与えることができる.

このようにdivタグは,既存のタグだけでは無理な「ブロック」を作ることができる.

span

divタグが「ブロック」なら,spanタグは文中の一部分のみを装飾するために用いる.

例えばpタグの中で,

<p>……というように,渡邉先生は,<span class="special_words">既存の大学の講義の枠に収まらない講師陣をゲストとして連れてくる</span>ことで有名である.</p>

という文章で,spanで囲んだものをstrongタグ以上に強調したい場合などが考えられる.例えば背景に色をつけて強調する時,CSSファイルの側では,

.special_words {
    background-color: red;
}

と書くことで,spanタグで囲った部分のみに,効果が現れる.

idとclass

典型的なWebページの構造

典型的なWebサイトは上図のような構成を取っていることが多い.

この中で,pタグや見出しタグは,同じページの中で複数回登場することが多いが,大きなdivである,Webサイトの名前などが常に表示されているヘッダ(header),本文領域(上図中ではmain_contentと表記),著作権や免責事項などが記されているフッタなどは,1ページには1つしか登場しない.

そこで,「1ページに1つしか登場しないdivはid要素で名前をつける」「1ページに複数回登場するdivはclass要素で名前をつける」という習慣になっている.

class要素での名前付けは,今まで通りCSSファイル側では,名前の前に「.」をつけて表記するが,id要素の場合は「#」で表記する.

例えば,htmlファイル側で,

<div id="header"> …… </div>

となっている場合,CSSファイル側では,

#header {
    font-size: 200%;
}

という形で指定する.

MarginとPaddingの関係

Marginとpaddingの関係

CSSで指定できる余白には「margin」と「padding」の2種類があり,上記の図のような関係である.

例えばpに指定した時,pタグの枠の外側の余白が「margin」であり,枠の中に書かれる要素(テキスト文章など)との間の余白が「padding」となる.


[Work/Class/Web基礎]

Web基礎授業資料


[Work/Class/Web基礎/css_basic]

HTMLの構造とスタイルシートの関連付け

HTMLの入れ子構造

以下に挙げるhtmlコードは,典型的なブログスタイルのものである.→ブログスタイルHTMLのサンプルを表示

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="./stylesheet.css" />
  <title>CSS基礎 サンプルその0</title>
</head>
<body>

<div id="header">
  <h1>CSS基礎 サンプルその0</h1>
  <p>
    <span class="copyright">Copyright ©Daichi Ando All rights reserved. </span>
    <span class="date">Last-modified: 2016-04-26 (火)</span>
  </p>
</div> <!-- end of "header" -->

<hr class="nodisp" />

<div id="menu">
<p>
  移動メニュー:
</p>
<ul>
  <li><a href="./web_site_0.html">サンプルその0</a></li>
  <li> <a href="./web_site_1.html">サンプルその1</a></li>
  <li><a href="./web_site_2.html">サンプルその2</a></li>
</ul>
</div>

<hr class="big_sep" />

<div id="content">

<div class="item">

<h2>5月10日の日記 / <span class="date">2010-05-10 (月)</span></h2>

<div class="text">

<h3>今日の出来事</h3>
    <p>
      今日は忙しかった.
    </p>
    <p>
      <a href="http://www.sd.tmu.ac.jp" title="首都大学東京システムデザイン学部Webサイト">
        これは首都大学東京システムデザイン学部へのリンクです.
      </a>
    </p>
  

</div> <!-- end of "text" -->
</div> <!-- end of "item" -->

<hr class="small_sep" />

<div class="item">

<h2>5月11日の日記 / <span class="date">2010-05-11 (火)</span></h2>

<div class="text">

<h3>今日の出来事</h3>
    <p>
      今日も忙しかった.
    </p>
    <p>
      <a href="http://industrial-art.sd.tmu.ac.jp" title="インダストリアルアートコースWebサイト">
        これはインダストリアルアートコースへのリンクです.
      </a>
    </p>
  
</div> <!-- end of "text" -->
</div> <!-- end of "item" -->

</div> <!-- end of "content" -->

<hr class="big_sep" />

<div id="footer">
  <p>
    全てのコンテンツの責任は,安藤大地にあります.
  </p>
</div> <!-- end of "footer" -->

</body></html>

このコードの構造をを図示すると,以下のようになる.

先に提示したHTMLのソースコードの構造

bodyタグが全体を包み,その中に,それぞれheader, menu, content, footerのidを振られたdivで各要素が構成されている.さらに各div要素はhr(横線)タグによる横線で区切られている.

このように,ほとんどのhtmlは,入れ子構造になっており,この入れ子構造が綺麗に整えられていることで,html全体が意味を持つ(例えば視覚障害者向け読み上げブラウザなどで,正確に把握され読み上げられる)状態になる.

また,このような意味的構造は,適切な検索などにも有効である.

このhtml全体が「意味的な構造」を持つこと重視する考え方を,「セマンティック・ウェブ」と呼称することが多い.

入れ子構造に対するスタイルシートの指定の仕方

基本的な入れ子引き継ぎの概念

このhtmlの入れ子構造を利用することで,CSSスタイルシート側でも柔軟な指定が可能になる.

例えば,body全体に適用するcssは以下のようになる.

body {
    /* 汎用的なフォントの設定 */
    font-family:sans-serif;
    line-height:150%;
}

ここで,見出しタグh2の中では先のbody全体への指定であるフォントsans-serifをそのまま使いたいが,pタグの中ではフォントserifに変更したいとする.

CSSの場合,中で何も指定しなければ上位(その要素を包んでいる大きな要素)の要素の指定が引き継がれ,包まれている要素の方で新たに指定すれば,引き継ぎは起こらない.

従ってこの場合,

body h2 {
    /* font-familyの指定なし */
}
body p {
    font-family: serif;
}

と指定してやることで,h2とpの中で別のフォントを扱うことができる.

また頭にbodyが来る場合(つまりbody要素に対し適用する場合),bodyを省略し,

h2 {
    /* font-familyの指定なし */
}
p {
    font-family: serif;
}

のように書くことができる.

div idとclassへの引き継ぎ

この入れ子引き継ぎを使い,idやclass指定されているdivやspanなどにも柔軟に引き継ぎや変更を指定することができる.

先のhtmlコードの中の<div id="header">の中のpタグに対して文字色を明るい灰色に変更したい場合,

#header p {
    color: #777777;
}

と記述し,<div id=header">の中のpタグの中の<span class="copyright">の中の文字を斜体に変更したい場合

#header p .copyright {
    font-style: italic;
}

のように指定する.

htmlタグにclass名をつけてそれをCSSファイルで指定する場合「CSSファイルの中でタグ名とclass名の間にスペースを入れない」と前に書いたが,「そのタグがidやclassを持つdivに包まれている場合はスペースを入れなければならない」ことに注意されたい.

このhtmlファイルの中で「本文」と呼べるのは「div id="content"の中の,div class="item"の中のdiv class="text"の中のpタグ」であるため,この部分をCSSファイルで装飾するために指定するには以下のように書く.

#content .item .text p {
    color: #AAAAAA;
}

以上のように,入れ子構造を意識したhtmlファイルを書くことで,divタグ以外のタグにclassを指定しなくてもCSS側で柔軟な指定を行うことができる.