[Work/Class]

授業資料

コンテンツ

Java With Processing

Processing IDEを用いて,Javaの基礎からオブジェクト指向プログラミングまでを学ぶ.

JavaScript with P5.js

ProcessingのJavaScript版であるP5.jsを用いて,ES2015準拠でオブジェクト指向プログラミングを学ぶ.

Python3の基礎とデータ処理

Pythonの基礎と,それを用いたオープンデータの取得や処理を行う.

Rの基礎とデータ処理

R言語の基礎と,それを用いたオープンデータの取得や処理を行う.

IPythonでアルゴリズム&AI作曲

Google Colaboratoryの対話型Python実行環境で,アルゴリズム作曲とAI作曲を実践する.

C++11の場合

Javaのオブジェクト指向プログラムをC++に移植するための,C++のオブジェクト指向の基礎.

ES2015で動的Webアプリ

WebSocket通信を用いて,ウェブブラウザ上で動作する動的Webアプリケーションを製作する.JavaScriptの最新版であるECMAScript2015を使用する.

OpenGL - WebGL

OpenGL1系と2系以降,そのブラウザ動作版であるWebGL.

サウンドトラック制作基礎

映像で使用するオリジナル劇伴をコンピュータで作る.

Web基礎

Webサイト制作.コンテンツの作り方.

Google Maps APIの基礎

GoogleMapsを独自にカスタマイズし,自分のWebサイトに取り込む方法.


[Work/Class/Python3の基礎とデータ処理/python_basic]

Pythonの基本と配列(list)の取り扱い

ソースコードの文字コード,拡張子

基本的にはutf-8を使用する.ソースコードファイルの一番上の行に,

# -*- coding: utf-8 -*-

と書いて文字コードを指定する.

ソースコードファイルの拡張子は一般的に「.py」である.

インデント

Pythonはインデント(字下げ)の量で,ブロック(C言語やJavaでいうところの中括弧{}で囲まれた部分)を決める.

if a == 1:
    print(a)
else:
    print('それ以外の時')

のようにする.

インデントの挿入は、「スペースを複数個入れる」操作ではなく「TABキーを1回押す」操作によってなされるべきである。

この「ブロック」という概念は,後述する制御構造の箇所で用いる.制御構造の分岐の時にはコロン「:」を付けて,その後にインデントを入れた一まとまりのプログラムを書く.

変数

変数の概念

変数とは,ある値を格納するスペースである.コンピュータでは値を扱う時にメモリ上にスペースを用意しその中に値を入れておく.そのスペースの事をプログラム上では変数と呼ぶ.

変数宣言や変数の型宣言は要らない

Pythonの変数を宣言する時に,整数型や文字列型等の型宣言は要らない.また変数であることを宣言するキーワードもない.

a = 1

だけでaという名前の整数型の変数が宣言され,1が代入される.

b = 'bの中に入れる文字列'

だとbという名前の文字列型の変数が宣言され,代入される.

print(a)
print(b)

というコードを実行すると,それぞれaという名前の変数の中身(ここでは1という整数)と,bという名前の変数の中身(ここでは「bの中に入れる文字列」という文字列)が表示される.

print(表示したい変数や文字列)で,内容を表示させる事ができる.

変数の型

「変数の型」とは,その変数が格納することができる値の種類,例えば整数(Integer),実数(プログラミングでは基本的に浮動小数点Floatとして扱う),文字列(String)などの事である.

コンピュータのメモリ上では,整数と実数(浮動小数点)では,値を格納するのに必要とするサイズが異なるため,「変数の型」という概念がある.

Pythonでは,ただの変数では変数の型(その変数が整数なのか実数なのか文字列なのか)を意識する必要はないが,今後出てくる配列や行列を扱うための事実標準となっているnumpyというライブラリでは明確に意識する必要がある.

変数を使った簡単な四則演算とその表示

a = 1
b = 2
c = a + b
print(c)

というコードは,

  1. aという変数の中に1という整数を代入
  2. bという変数の中に2という変数を代入
  3. cという変数の中に,変数aの中身と変数bの中身を足し算した結果を代入
  4. cの変数の中身を表示

という流れの処理をプログラムで書いたものである.

このように,プログラムは行単位で上から下,右から左に向けて実行される.

この + の事を演算子と呼ぶ.

四則演算の演算子は,それぞれ + が足し算, - が引き算, * が掛け算, / が割り算を表す.

四則演算以外で標準の演算子として実装されている中で,データ処理でよく使うのが,べき乗である.

b = a**2    # aの2乗

というように,演算子**を用いて記述する.(一般的にWebの表記でx^2のように「^」を用いることがあるが,これはプログラムでは使わない)

演算時の自分自身への代入

a = 1
b = 2
a = a + b

プログラムは「右から左」つまり「行末から行頭に向かって」実行される事に注意する.つまり上記のコードでは,aにはa + bの値だが移入され,3行目の実行が終わった段階では,aの中身は整数の3になっている.

Boolean

Booleanとは,論理的な「真」と「偽」を表現するための値・変数型の事を指す.後述するif文などで用いられる.

Boolean型の値はTrue, Falseである.頭が大文字になることに注意.

ifブロックやforブロックの中の変数(スコープ)

C言語やJavaとは違い,ifやforの中で新たに変数を宣言しても,その外側に変数が作られたのと同じ意味になる.つまりifやforの中の変数はそのまま保持され,外側からそのまま参照,変更することが可能である.

この変数(変数の名前)が影響を及ぼす範囲を「スコープ」と呼び,C言語やJava, PythonやRubyでは異なることに注意.

つまりPythonの変数の影響の範囲スコープは関数内が最小である.

Pythonの影響範囲スコープは,グローバルで定義した変数(プログラム全体で有効)→クラス内変数の影響(オブジェクトインスタンス内で有効)→関数内変数(関数の中で有効),の3段階である.

C言語やJavaはさらにfor文if文などのブロック内で有効,というスコープがある.

標準配列list

Pythonの標準配列はlistというクラスのオブジェクトインスタンスである.

Pythonでは宣言をしてメモリ上に確保された状態の,プリミティブな整数や浮動小数点実数以外の変数の事を「オブジェクトインスタンス」と呼ぶ.もしくは単に「オブジェクト」「インスタンス」とも.(他言語でもどちらを使うかは人によってまちまちで,同様の呼び方をする)

宣言

my_list1 = [] #listの宣言と初期化(空)
my_list2 = [1, 3, 8, 20] #listの宣言と同時に配列の中身を入れて初期化

listクラスのオブジェクトインスタンスなので,

my_list = list([1, 3, 5, 7])

のようにコンストラクタ呼び出しで生成することもできる.

というか,コンストラクタ呼び出しで生成する方がオブジェクト志向プログラミング的なので,なるべくこちらを使うように癖をつけておくこと.特にPython3ではこちらの記法を必ず使うこと.(後述のrange関数などで使われる)

listの連結

my_list = list([1, 3, 5])
new_list = list(my_list + list([7, 9, 11]))

で連結される.(結果が[1, 3, 5, 7, 9, 11]のリストになる)

list動詞の + 演算子による連結は,非破壊的,つまり足す方には影響を与えない.従って上記の場合のmy_listを更新しようと思った場合,

my_list = list([1, 3, 5])
my_list = list(my_list + list([7, 9, 11]))

のように,自分自身に代入する必要がある.

listへの追加 append関数

append関数を使うと末尾に要素が追加される.

my_list = list([1, 3, 5])
my_list.append(7)
my_list.append(9)
my_list.append(11)
print(my_list)

の結果は[1, 3, 5, 7, 9, 11]になる.

appendを使った場合,my_listそのものが更新される事に注意する.このようなlist型のオブジェクトインスタンスが持っている機能(関数)の事をインスタンス関数と呼び,再代入ではなくそのオブジェクトインスタンス自身が更新される.

listへの挿入 insert関数

my_list = list([1, 3, 5])
my_list.insert(2, 7) #insert(挿入したい場所のインデックス, 挿入したい要素)

の結果は[1, 3, 7, 5]になる.

つまりに先頭に要素を追加したい場合は

my_list.insert(0, 挿入したい要素)

となる.

listの長さを取得

len(my_list)

となる.lenはlistクラスオブジェクトの関数ではないことに注意.

range()関数で範囲指定で単調増加する整数listを生成

例えば[0, 1, 2, 3, 4]というlistを生成したい時,

my_list = list(range(5))

とすると,my_listの中には[0, 1, 2, 3, 4]というlistが入る.

my_list = list(range(3, 8))

の結果は,[3, 4, 5, 6, 7]となる.つまり「3から8未満の間に1ずつ増加させながら追加していく」のような意味となる.

2ずつ増加する整数リストを作る場合には,

my_list = list(range(3, 10, 2))

とする.結果は,[3, 5, 7, 9]である.(「10未満の場合は2ずつ増加させて追加していく」なので)

ちなみにrange()関数そのものは,listのコンストラクタに突っ込んで回すと(勝手に回ってくれる)整数の集合を生成してlistオブジェクトを作ることができる,「イテレータオブジェクト」(もしくはジェネレータオブジェクト)を返す,という仕様になっている.後述するmap()関数やfilter()関数と同じである.(Python2系はrange()関数はlistを返すので,2系と3系で一番互換性が問題となる違いである)

タプルtuple

タプル tupleという「宣言時に初期化したら変更できない」リストも存在する.

tupleの宣言には,

my_tuple = (123, 456, 789)

という形でカンマで区切った小括弧を用いる.

もしくはコンストラクタ呼び出しで,

my_tuple = tuple((123, 456, 789))

と宣言する.小括弧が二重になっていることに注意する.

my_tuple = (123, 456, 789)
my_list = list(my_tuple)
my_tuple = tuple(my_list)

という形で相互に変換することも可能である.

listと同じく,[]で囲んだ添え字で,tupleの個々の要素にアクセスすることが可能である.

my_tuple = (123, 456, 789)
print(my_tuple[2])

というコードでは,0,1,2の2番目(先頭から3つ目)の値の内容,つまり789という整数がprintされる.

ハッシュテーブル 辞書 dict

「キーと値をセットにして,キーで値を取り出せる」いわゆるハッシュテーブルはdictというクラスを使う.

my_dict = {'apple': 4, 'pine': 8, 'pen': 6}

というように,文字列と値を「:」でペアにし,間まで区切り,中括弧で囲んで宣言する.

同じくコンストラクタ呼び出しで,

my_dict = dict({'apple': 4, 'pine': 8, 'pen': 6})

とも宣言できる.

キーを与えて値を取り出すには,

value_from_dict = my_dict['apple']

と大括弧でキーを囲む.(取り出し時は中括弧ではなく大括弧であることに注意)

その他にitems()関数でキーと値のペアをイテレータオブジェクトとして取り出す,keys()関数で全てのキーをイテレータオブジェクトとして取り出す,values()関数で全ての値をイテレータオブジェクトとして取り出す,等の関数がある.

コメント

コメントとは,プログラムコードの中に記述されているが,実際には実行されない部分を指す.

Pythonの場合, # を書いた行は,#以降の部分は実行されなくなる.行頭に#を置くと,その行全体が実行されなくなる.

a = 1
b = 2
# a = a + b コメントになっているので,この行は実行されない
print(a) # 従って,ここのprintの出力は1になる

制御構造

プログラミング言語における制御構造とは,条件による分岐や繰り返しを記述するための機能である.通常「変数の中身による条件を書いて,その条件によりその後に続くブロックに分岐したり,ブロックを繰り返したりする」.

if文

if文は「もし与えられた条件が真だったら,次に続くブロックを実行する」という制御構造である.

if a == 1: # もしaが1だったら.
  # Trueの時の処理内容
  print(a)
# インデントを元に戻してブロックを終わらせて,次のプログラムへ続く

のように記述する.ブロックを始めるためには,コロン「:」が必要であることに注意.コロンが書かれた次の行からインデントを追加してブロックを始める.

条件式,比較演算子,論理演算子

上記のa == 1というのが条件式である.この条件分は先述したBoolean型を返す.つまりTrueかFalseを返す.Trueは条件が真の時に返され,Falseは条件が偽の時に返される.

条件式に使われる==などの記号を比較演算子と呼び,以下のようなものがある

a == b   # aがbと等しい場合
a > b    # aがbより大きい場合
a < b    # aがbより小さい場合
a >= b   # aがb以上の場合
a <= b   # aがb以下の場合
a != b   # aとbが等しくない場合

また複数の条件式を論理演算子と呼ばれるもので組み合わせることで,論理和(AまたはBが真の時),論理積(AかつBが真の時)を表現することができる.論理和はor(もしくは||),論理積はand(もしくは&&)で表現される.

a == b and c == d   # aがbと等しく,かつ,cがdと等しい場合
a != b or C == d   # aとbが等しくない,または,cとdが等しい場合

さらにPythonではnotという否定詞をつけることができる.

not a == b    # a == bが成立していない場合

これは厳密には,「続く条件式のTureとFalseを逆転させる」ものである.従って,not Ture都だけ書いた場合,Falseが返る.

if - else文

if文を拡張した形であり,条件が真である時には次に続くブロックを,偽である時にはelse:以降のブロックを実行する.

Pythonには中括弧によるブロック指定がないので,空のブロックを作ることができない.処理内容がないけど分岐させたい(空のブロックを作りたい)場合にはpassキーワードを必ず入れること.

if a == 1: # もしaが1だったら.
  # Trueの時の処理内容
  pass
  # passと書くとTrueの時は何もしない.
else:
  # aが1ではない時の処理内容

for文

for文は,とある条件を満たすとき,続くブロックを繰り返す制御構造である.

Pythonに通常のfor文はない.他言語でいう所の拡張for文(for_each文)のみ存在する.つまりPythonのfor文は,繰り返しを指定する「イテレータオブジェクト」の方で条件を決定した繰り返しを行い,for文側では条件判定等を行うことはない.

初学者向けに分かりやすく言えば,Pythonのfor文は「与えられたリストの要素を一つずつ取り出して,取り出した要素に対してブロック内で記述した処理を適用する」というものである.

my_list1 = list([1, 3, 5, 7, 9])
my_list2 = list([]) # 別の空のlistを作っておく
for item in my_list1:
  # my_list1から一つずつの要素(奇数の整数)を取り出し,itemという変数に格納して,続くブロックに送る.
  my_list2.append(item + 1) # ブロックの中ではitemの中の整数に1を足してmy_list2に追加する.

の結果,my_list2の中身は,[2, 4, 6, 8, 10]となる.

(他言語の学習者向け)普通にfor文を実行したい場合,つまり事前にlistを生成しない場合,前述のlist(range(0, 10, 1))でlistのオブジェクトを生成して,それをfor文に食わせることになる.

my_list = list([])
for item in list(range(0, 10, 1)):
  my_list.append(item)

の結果のmy_listの中身は[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]となる.

ちなみに食わせるのはlistだけではなく,listにする前のイテレータ(もしくはジェネレータ)オブジェクトでも構わないので

for item in range(0, 10, 1)

だけでも動作する.

ついでに,range関数の引数が一つだけの場合,前述のように「0からその数字未満まで1ずつ増加させた整数の集合」を出力してくれるので,C言語系の言語で書く所の

for(int i=0; i<10; i++){}

は,

for i in range(10):

と省略して書くことができる.

for文をindex付で取り出すenumerate

例えば,['apple', 'orange', 'grape']というlistが合って,これでfor文を回したい場合を考える.この時に「何番目か」の情報が処理の内容で欲しい時には,enumerateという機能を使う.

fluit_list = ['apple', 'orange', 'grape']
for index, item in enumerate(fluit_list):
  print(index, item)    # printの中で,をつけて変数を区切ると,区切って出力される

と書くと,何番目かを出してくれる.このlistの中の何番目かを表現する言葉として「添え字」「インデックス」という用語が用いられることが多い.

多くのプログラミング言語では,何番目かを表現するインデックスは0から始まる.


[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」となる.