ウェブデザイン第6回

***課題はページ最下段に記載しています。***

準備:ファイル「index.html」、「about.html」、「style.css」をメモ帳で開いておく。
解説を参照してソースコードに記述を加える。

解説:
メニューの設定
スタイルシートに、以下のように記述を加える。
1)リンクの文字に表示される下線を消すために、「text-decoration: none」を指定します。
2)リンクの文字(メニュー)が一行に表示されるように、「display: inline」などを指定します。
3)リンクの文字の色を変えるには、「a(リンクがある文字)」「a:visited(訪れたことがあるリンクの文字)」「a:hover(カーソルが乗っている状態のリンクの文字)」をスタイルシートに記入します。
ここでは、「a(リンクがある文字)」を濃い青(#0000cd)に、「a:visited(訪れたことがあるリンクの文字)」を水色(#6495ed)に指定します。「a:hover(カーソルが乗っている状態のリンクの文字)」は、背景に青い色がつくようにbackground-colorを使って指定します。

a …リンクの文字
a:visited …訪れたことがあるリンクの文字
a:hover …カーソルが乗っている状態のリンクの文字

ページ全体を罫線で囲み背景に色をつける
ページ全体の見え方の指定をするために、指定したい部分に目印をつけます。
ここでは、「index.html」の中に<div>タグを使って<container>というid属性の目印をつけます。その部分の見え方の指定は、「style.css」でおこないます。
背景模様のもとになる画像には、「back.jpg」というファイル名をつけ、「index.html」などと同じディレクトリに「images」というフォルダを作成して、その中に入れておきます。今後使用する画像も、この「images」フォルダに入れていきます。
背景模様になる画像は,繰り返し表示されるので,パターンの一部だけを作成して画像として保存します。

タイトルまわりに色をつける
「about.html」のタイトルまわりを設定するために,<div>タグを使って<header>という名前のid属性を指定します。
id属性が<header>に指定されている箇所の指示を、「style.css」に書き込みます。

見出しに装飾をする
「about.html」の<h2>見出しと<h3>見出しの設定を、それぞれ「style.css」の中に書き込みます。
<h2>見出しには、左端に■が表示されるようにします。■印の表示には、枠線の左側だけを表示するという方法を使います。

【borderで指定できる線の種類】
solid …実線
double …二重線
dashed …破線
dotted …点線

【borderで指定する線の位置】
border …上下左右を囲む
border-top …上に線を表示する
border-right …右に線を表示する
border-bottom …下に線を表示する
border-left …左に線を表示する

<h3>見出しには,左端に画像のマークをつけ,下線を表示するようにします。マークは,「mark.png」というファイル名で,「images」フォルダの中に入れておきます。

 

ソースコード:
「index.html」

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">

[中略]

</head>
<!-- headここまで -->

<!-- ここからbody -->
<body>

<!-- ここからdiv container -->
<div id="container">

<!-- サイトの見出しとその説明 -->
<h1>見出し</h1>
<p>本文</p>

[中略]

<!-- addressには制作者の情報を入れる -->
<address>制作者:自分の名前</address>

</div>
<!-- div containerここまで -->

</body>
<!-- bodyここまで -->

</html>

 

「about.html」

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">

[中略]

</head>
<!-- headここまで -->

<!-- ここからbody -->
<body>

<!-- ここからdiv container -->
<div id="container">

<!-- ここからdiv header -->
<div id="header">

<!-- サイトの見出しとその説明 -->
<h1>見出し</h1>
<p>本文</p>

</div>
<!-- div headerここまで -->

<!-- メニューのリスト -->
<ul>
<li><a href="index.html">トップページ</a></li>

[中略]

<address>制作者:自分の名前</address>

</div>
<!-- div containerここまで -->

</body>
<!-- bodyここまで -->

</html>

 

「style.css」ソースコード

@charset  "utf-8";

/* ここからスタイルをはじめます */

body  {
  color:  #444444; 
  background-color:  #87cefa; 
  background-image:  url(images/back2.png); 
}

/* コンテンツ全体(id属性=container)の指定 */
div#container  { 
  border:  solid  2px  #6495ed; 
  padding:  20px; 
  background-color:  #ffffff; 
  width:  800px; 
  margin-left:  auto; 
  margin-right:  auto; 
}

/* タイトルまわり(id属性=header)の指定 */
div#header  { 
  background-color:  #87cefa; 
  padding:  5px  20px; 
}

h1  {
  font-size:  36px; 
  font-family:  sans-serif; 
  color:  #191970; 
  font-weight:  normal; 
}

h2  {
  font-size:  22px; 
  font-family:  sans-serif; 
  color:  #191970; 
  font-weight:  normal; 
  border-left:  solid  14px  #87cefa; 
  padding-left:  5px; 
}

h3  {
  font-size:  18px; 
  font-family:  sans-serif; 
  color:  #4169e1; 
  border-bottom:  solid  2px  #4169e1; 
  padding-bottom:  3px; 
  background-image:  url(images/mark.png); 
  background-repeat:  no-repeat; 
  background-position:  0px  6px; 
  padding-left:  20px; 
}

p  { 
  font-size:  16px; 
  line-height:  1.8; 
  font-family:  Verdana,  Helvetica,  sans-serif; 
}

address  { 
  font-size:  14px; 
  font-style:  normal; 
}

/* メニューのリンクの文字色の設定 */
a  {
  color:  #0000cd; 
}

a:visited  {
  color:  #6495ed; 
}

a:hover  {
  color:  #ffffe0; 
  background-color:  #4169e1; 
}

/* リスト(メニュー)関係の設定 */
li  a  { 
  text-decoration:  none; 
} 

li  { 
  display:  inline; 
  padding-right:  10px; 
  font-size:  16px; 
  font-family:  Verdana,  Helvetica,  sans-serif; 
}

ul  { 
  list-style-type:  none; 
  margin-left:  0; 
  padding-left:  0; 
  background-color:  #ffefd5; 
  padding:  3px  20px; 
}
課題6
1)オンデマンド課題
企画書に沿って、画像を収集する。著作権のある画像を使用する場合は引用元を明示できるように
引用元の情報を記録しておく。
画像収集の計画をリストにまとめる。
例)
「企画名」
画像リスト
猫の画像6枚
・顔を舐めている猫(1枚)
・寝ている猫(2枚)
(中略)
犬の画像
・散歩している犬(2枚)
・走っている犬(1枚)
(以下省略)
課題提出方法 
CSのレポート掲示板 デジタルコンテンツ実習Ⅴ(ウェブデザイン) 第6回 にPDF形式の文書を提出してください。
 A4サイズ 縦位置・横書き
提出締切
11月30日(月)まで

2)対面授業課題
対面授業を受講後、作成したHTMLファイルとCSSファイルを提出する。
課題提出方法
HTMLファイルとCSSファイルを格納した学籍番号フォルダを圧縮(ZIP形式)して提出する。
提出締切
12月7日(月)まで

*第6回授業用CSレポート掲示板の提出は12月7日(月)まで可能ですが、各締切日をこちらで確認していますので、
締切日を守って提出するようにしてください。(締切日以降の提出は減点となります)

ウェブデザイン第5回

***課題はページ最下段に記載しています。***

文字の表示について

前回までに作成したファイル「index.html」と「style.css」を,メモ帳で開きます。

ソースコード01_01

ファイル名:「index.html」

<!DOCTYPE html>
<html lang="ja">

<!-- ここからhead -->
<head>
<meta charset="UTF-8">

<!-- ページのタイトルをここに入れる -->
<title>タイトルを記述しましょう</title>

<!-- スタイルシートの場所を指定している -->
<link rel="stylesheet" href="style.css" type="text/css">

</head>
<!-- headここまで -->

<!-- ここからbody -->
<body>
<!-- サイトの見出しとその説明 -->
<h1>サイトの見出し</h1>
<p>本文を記述します。</p>
<!-- addressには制作者の情報を入れる -->
<address>制作者:自分の名前(愛知淑徳大学創造表現学部メディアプロデュース専攻)</address>

</body>
<!-- bodyここまで -->
</html>

ソースコード01_02

ファイル名:「style.css」

@charset "utf-8";

/* ここからスタイルをはじめます */

body {
color: #444444;
}

h1 {
font-size: 36px;
font-family: Verdana, Helvetica, sans-serif;
color: #191970;
font-weight: normal;
}

p {
font-size: 16px;
line-height: 1.8;
font-family: Verdana, Helvetica, sans-serif;
}

address {
font-size: 14px;
font-style: normal;
}

文字の表示変更
スタイルシート内の、文字の表示に関わる以下の設定を変更して文字の表示を変更してみましょう。
①文字のサイズ
font-size: 数値px;
サイズの値はピクセルです。数値を変えてサイズを変更してみましょう。

②文字の書体
font-family:  font-familyの種類;
文字の書体を他の種類に変更してみましょう。
【font-familyの種類】
sans-serif…ゴシック系のフォント
serif…明朝系のフォント
cursive…筆記体・草書体のフォント
fantasy…装飾的なフォント
monospace…等幅フォント

③文字の太さ
font-weight: font-weightの種類;
文字の太さを他の種類に変更してみましょう。
【font-weightの種類】※コンピュータ環境によって反映されない場合があります。
normal…標準の太さ
bold…一般的な太字
lighter…相対的に一段階細く
bolder…相対的に一段階太く

④文字のスタイル
font-style: font-styleの種類;
【font-styleの種類】
normal…標準フォントで表示
italic…イタリック体フォントで表示
oblique…斜体フォントで表示

⑤文字の行間隔
line-height: 数値;
文字の行間隔を、数値を変えて変更してみましょう。

リンクの設定
リンク(クリックすると他のページに移動する)を作成します。

<a href="リンク先のページ.html">リンクを設定したい文字列</a>

上のように記述することで,そのリンクをクリックしたときにどのウェブページを表示するのかを指定します。

記載例)

<a href="about.html">このサイトについて</a>

リストの設定
今回のウェブサイトでは,リンクをリスト形式で記述し、リンクを4つ用意することにします。
リスト形式にしたい部分は以下のタグで囲みます。

<ul>〜</ul>

リストのひとつひとつの要素は以下のタグで囲みます。

<li>〜</li>

リスト形式の記述例は以下のようになります。

<ul>
<li>〜</li>
<li>〜</li>
<li>〜</li>
</ul>

リンク先のウェブページを作成する
「index.html」をフォルダ内で複製します。複製して増やした方のファイルを,「about.html」というファイル名に変更します。
※名前を付けて保存しなおす場合は,文字コードの指定(「UTF-8」)を忘れないようにしましょう。

リンクの記述
以下のようにソースコード内にメニュー(リンク)のリストを挿入しましょう。

ソースコード02_01

ファイル名:「index.html」

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">

<!-- ページのタイトルをここに入れる -->
<title>タイトル</title>

<!-- スタイルシートの場所を指定している -->
<link rel="stylesheet" href="style.css" type="text/css">

</head>
<!-- headここまで -->

<!-- ここからbody -->
<body>

<!-- サイトの見出しとその説明 -->
<h1>見出し</h1>
<p>説明文</p>

<!-- メニューのリスト -->
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="about.html">このページについて</a></li>
<li><a href="campus.html">コンテンツ1</a></li>
<li><a href="class.html">コンテンツ2</a></li>
</ul>

<p>本文</p>

<!-- addressには制作者の情報を入れる -->
<address>制作者:自分の名前(愛知淑徳大学創造表現学部)</address>

</body>
<!-- bodyここまで -->

</html>

ソースコード02_02

ファイル名:「about.html」 ※「index.html」を複製し,必要な部分だけ書き換えます。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">

<!-- ページのタイトルをここに入れる -->
<title>タイトル</title>

<!-- スタイルシートの場所を指定している -->
<link rel="stylesheet" href="style.css" type="text/css">

</head>
<!-- headここまで -->

<!-- ここからbody -->
<body>

<!-- サイトの見出しとその説明 -->
<h1>見出し</h1>
<p>解説</p>

<!-- メニューのリスト -->
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="about.html">このページについて</a></li>
<li><a href="campus.html">コンテンツ1</a></li>
<li><a href="class.html">コンテンツ2</a></li>
</ul>

<h2>中見出し</h2>
<p>説明</p>

<h3>小見出し</h3>
<p>説明<br>
説明</p>

<h3>小見出し</h3>
<p>説明<br>
説明</p>

<!-- addressには制作者の情報を入れる -->
<address>制作者:自分の名前(愛知淑徳大学創造表現学部)</address>
</body>
<!-- bodyここまで -->

</html>

完成したら、リンクを設定した文字列をクリックして動作を確認してみましょう。

課題5
1)オンデマンド課題
以下のフォント(書体)に関する用語について調査し、その違いについて詳しく記述しなさい。
・サンセリフ
・セリフ
課題提出方法 
CSのレポート掲示板 デジタルコンテンツ実習Ⅴ(ウェブデザイン) 第5回 にPDF形式の文書を提出してください。
 A4サイズ 縦位置・横書き
提出締切
11月16日(月)まで

2)対面授業課題
対面授業を受講後、作成したHTMLファイルとCSSファイルを提出する。
課題提出方法
HTMLファイルとCSSファイルを格納した学籍番号フォルダを圧縮(ZIP形式)して提出する。
提出締切
11月23日(月)まで

3)企画書発表準備
次回の対面授業で企画書をもとに企画発表してもらいます。  
発表の準備と練習をしておきましょう。

*第5回授業用CSレポート掲示板の提出は11月23日(月)まで可能ですが、各締切日をこちらで確認していますので、
締切日を守って提出するようにしてください。

2020プログラミング講座5:条件分岐と繰り返し構造

***課題はページ最下段に記載しています。***

条件分岐
プログラミングは通常は最初の1行から終わりの1行まで順番に処理されます。しかし、それでは複雑な処理をコンピューターに実行させることができません。複雑な処理をさせるための方法のひとつとして条件分岐という考え方が存在します。

単純な処理:
公園に行く。

複雑な処理:
晴れたら公園に行く。
そうでなければ、家で読書する。

上の例のように、条件によって行動(=処理)が変化する(=分岐する)ことを条件分岐といいます。上の複雑な処理の例は以下のように条件分岐命令の書式で記述することができます。

if( 晴れ ){ 公園に行く; }else{ 家で読書する; }

練習:if( 晴れ ){ 公園に行く; }else{ 家で読書する; }のように、あなたの行動を
        条件分岐命令の書式で記述してみましょう。

コードであらわす場合は以下のように記述します。

if( 条件式 ){ 条件式が真の場合に実行する内容; }else{ 条件式が真ではない場合に実行する内容; }

プログラミングでは、真であることをtrueと記述します。また真ではない場合は偽とあらわしfalseと記述します。

次に実際にProcessingのコードとして条件分岐命令を記述してみましょう。

if文
if( 条件式 ){ 条件がtrueの場合に実行される内容; }

条件が真(true)の場合:

let i=1;
if( i>0 ){
 createCanvas(255,0,0);
}

条件が偽(false)の場合:

let i=0;
if( i>0 ){
 createCanvas(0,0,255);
}

if〜else文
if( 条件式 ){ 条件がtrueの場合に実行される内容; }else{ 条件がfalseの場合に実行される内容; }

let i=1;
if( i>0 ){
 createCanvas(255,0,0);
}else{
 createCanvas(0,0,255);
}

条件分岐命令を使用してProcessingのストラクチャーを利用したコードを記述してみましょう。

let x=0;

function setup(){
  createCanvas(400,400);
}

function draw(){
   x = mouseX;
   if( x<200 ){
      background(255,0,0);
   }else{
      background(0,0,255); 
   }
}

上のコードではウィンドウを幅400ピクセル、高さ400ピクセルに設定しマウスのX座標がウィンドウの中心(200ピクセルの位置)より「小さい(=true)か否(=false)か」を条件式として判定し、背景色を切り替えています。

練習:if〜else文を活用してマウスの座標に応じて変化するグラフィック作品を制作してみましょう。

条件式
真偽を判定するために使用できる条件式を以下に記載します。

< 左辺が右辺より小さい

i<100

> 左辺が右辺より大きい

i>100

<= 左辺が右辺以下

i<=100

>= 左辺が右辺以上

i>=100

>== 左辺が右辺に等しい

i>==100

!= 左辺が右辺に等しくない

i>!=100

&& かつ (「かつ」はandとも表現する)

i>0 && i<100

|| または (「または」はorとも表現する)

i<0 || i>100

さまざまな条件式を利用したコードを記述してみましょう。

let x=0;
let y=0;

function setup(){
  createCanvas(400,400);
}

function draw(){
 x = mouseX;
 y = mouseY;
 if( x<200 ){ background(255,0,0); } if( x>200 ){
  background(0,0,255); 
 } 
 if( x==200){
  fill(0,0,0);
  ellipse(width/2,height/2,300,300); 
 } 
 if( y>0 && y<100){
  fill(255,255,255);
  ellipse(width/2,height/2,200,200); 
 }
 if( x<100 || x>300){
  fill(0,255,0);
  ellipse(width/2,height/2,100,100); 
 }
 line(width/2,0,width/2,height);
 line(0,height/2,width,height/2);
}

上のコードの例ではマウスの座標に応じて背景色や円の表示が切り替わります。

練習:さまざまな条件式を活用してマウスの座標に応じて変化するグラフィック作品を制作してみましょう。

 

繰り返し構造
プログラムでは繰り返しの構造を使うことで、ひとまとまりのコードを繰り返し実行することができます。繰り返しの構造を使うことで複雑な構造のプログラムを短いコードにできたり、プログラムにパターンを生み出すことなどができます。

forループ文
繰り返し構造を記述するコードとしてforループ文を使ったプログラムを作成してみましょう。
forループ文は以下のように記述します。

for(初期値; 条件式; 更新){

繰り返し実行されるコード

}

例)
for(i = 0; i < 100; i+=10){

ellipse(i,100,20,20);

}

・「初期値」で最初の値を設定します。  forループ文では慣例的に変数 i が使われることが多いです。
この例では変数iが宣言され、初期値は0に設定されています。
・「条件式」で変数 i を評価します。  変数 i の値を比べて条件にあわなくなるまで「繰り返し実行されるコード」を実行します。
この例では変数iの値が100以下の値である限り「繰り返し実行されるコード」が実行され続けます。
・「更新」で変数の値を変化させていきます。
この例では変数iの値は10ずつ加算されていきます。0,10,20,30,40〜のように変化します。

条件式の例
i > A Aより大きい
i < A Aより小さい  i >= A A以上
i <= A A以下
i == A Aと等しい
i != A Aと等しくない
「更新」で変数 i の値をどのように変化させるかの例
i+=10ならコードが実行されるごとに変数 i に10加算
i-=10なら10減算
i++は1加算
i–は1減算。

それでは、forループ文を使った繰り返し構造のプログラムを記述してみましょう。

function setup(){
  createCanvas(400,200);
}

function draw(){
  for(let i = 20; i < 400; i += 20){
    ellipse(i,100,20,20);
  }
}

二重の繰り返し構造
forループ文のなかにforループ文を記述することができます。
それでは、二重の繰り返し構造のプログラムを記述してみましょう。

function setup(){
  createCanvas(400,400);
  background(0);
  noStroke();
}

function draw(){
  for(let i = 0; i <= 400; i += 20){
    for(let j = 0; j <= 400; j += 20){
      fill(255,48,203);
      ellipse(i,j,15,15);
   }
  }
}

二重の繰り返し構造を使った別のプログラムを記述してみましょう。

function setup(){
  createCanvas(400,400);
}

function draw(){
  background(0);
  fill(252,145,3);
  stroke(250,240,48);
  for(let i = 0; i <= 400; i += 20){
    for(let j = 0; j <= 400; j += 20){
      ellipse(i,j,10,10);
      line(i,j,mouseX,mouseY);
   }
  }
}
練習:forループ文を活用してマウスの座標に応じて変化するグラフィック作品を制作してみましょう。
課題5 
オンデマンド課題と対面授業課題をそれぞれの締切日までに実施し提出してください。 

1)オンデマンド課題
以下の用語について調査し記述しなさい。 
「ジェネラティブデザイン」 
課題提出方法
CSのレポート掲示板「デジタルコンテンツ実習Ⅵ(プログラミング) 第5回」に
PDF形式のファイルをアップロードしてください。 
A4サイズ 縦位置・横書き 
提出締切:11月11日(水)まで 

2)対面授業課題
対面授業を受講後、以下の内容に沿ってコードを作成し、コードのリンクを記載した書類を提出する。
「これまでに学んだ、点、線、面および色のコードと
条件分岐や繰り返しの構造を組み合わせて、グラフィック作品を作成してください。」 
課題提出方法
作成した作品へのリンク用文字列が記述された文書を、PDF形式のファイルにしてアップロードしてください。 
A4サイズ・縦位置・横書き  
提出締切:11月18日(水)まで  12月2日(水)まで 期間延長しました 

 *第5回授業用CSレポート掲示板の提出は 11月18日(水) 12月2日(水)まで可能ですが、
それぞれの締切日をこちらで 確認していますので、 締切日を守って提出するようにしてください。

2020プログラミング講座4:コードの基本と図形、色、変数

***課題はページ最下段に記載しています。***

プログラミング最初の一歩
プログラミングの動作を記述する一連の文字のことをコード(ソースコード)と呼びます。p5.jsではEDITORのウィンドウを開いて、その中でコードを記述することができます。

それでは、はじめに以下のコードを記述して実行してみましょう。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(50, 50, 80, 80);
}

コードが書けたらEDITORウィンドウの実行ボタンを押してプログラムを実行してみましょう。円が描画できていれば最初のプログラムの完成です。

円あるいは楕円を描画するためには以下のようにコードを記述します。

ellipse(中心のX座標, 中心のY座標, 楕円の幅, 楕円の高さ);

先ほど描画した楕円(円)は、中心のX座標、Y座標がそれぞれ50ピクセル、幅と高さが80ピクセルの楕円(円)でした。
実行中のプログラムはEDITORウィンドウの停止ボタンを押して停止させます。

練習: 数値を変えて描画の位置、幅、高さが異なる様々な楕円を描画してみよう。

p5.jsのストラクチャー(構造)
p5.jsにおいて時間の経過とともに変化するグラフィックスを作成する場合には、p5.jsのストラクチャーを学び、効果的に利用することが必要になります。

それでは、まず以下のコードを記述してみましょう。

let x = 10;
let y = 10;
let w = 20;
let h = 20;

function setup(){
  createCanvas(400, 400);
  frameRate(60);
}

function draw(){
  background(220);
  ellipse(x+frameCount, y+frameCount, 20, 20);
}

このコードをもとにp5.jsのストラクチャーについて学んでいきましょう。

このプログラムは以下の3つの部位で成り立っています。
1)グローバル変数の宣言と初期化
グローバル変数とは以下に説明する関数(setup関数とdraw関数)などから参照することができる変数の一種です。

例)
let x = 10;
let y = 10;
let w = 20;
let h = 20;

2)setup関数
各種初期化で行う処理部分。アプリケーションが実行され、ウィンドウが開いたとき、最初に1度だけ実行されます。
setup関数では、画面(ウィンドウ)のサイズを決定するcreateCanvas関数などの記述を行います。

例)
function setup() {
// 一度だけ実行される処理
}

3)draw関数
アプリケーションが実行中に繰り返し実行し続ける処理部分。draw関数内に記述されたコードが終了するたびに新しいフレームがディスプレイ・ウィンドウに描画されコードが実行され続ける。
デフォルトの描画速度は1秒あたり60フレーム( 1秒あたりのフレーム数はframeRate関数を使って変更することができる)。

例)
function draw() {
// 繰り返し実行される処理
}

練習: 上のコードの記述を変更して、様々なプログラムを作ってみましょう。
例)
・円が水平または垂直に移動するプログラム。 
・円の大きさが変化するプログラム。

画面サイズの設定
p5.jsでは、画面(実行ウィンドウ)のサイズを以下の関数*を使用して設定することができます。

createCanvas(画面の幅, 画面の高さ);

*関数とはプログラミングの構成単位であり、パラメータと呼ばれる数値などで定義することができます。

それでは、幅400ピクセル*、高さ200ピクセル*のウィンドウを以下のようにEDITORに記述して作成してみましょう。

function setup(){ 
  createCanvas(400, 200); 
} 

function draw(){ 
  background(220); 
}

*パラメータで扱う単位はコンピュータの画面上で画像を扱う際の最小単位であるピクセル(Pixcel)です。

座標について

座標とは空間上の1点を指定するための方法です。画面に図形を描くためには、図形の位置を決める必要があり、座標を利用します。p5.jsの画面(実行ウィンドウ)では以下のようにして画面上の1点を指定します。

画面の左上を基準点とし右に移動した距離xと下に移動した距離yで1点を指定する。

それでは、サイズが幅400ピクセル、高さ400ピクセルの画面(実行ウィンドウ)を作成し、x座標が200ピクセル、y座標が200ピクセルの位置に点を描画してみましょう。
点の描画にはpoint()関数を用います。point()関数は以下のように設定します。

point(x座標,y座標);

function setup(){
  createCanvas(400, 400);
}

function draw(){
  background(220);
  point(200,200);
}
練習:
・数値を変えて様々なサイズの画面(実行ウィンドウ)を作成してみよう。
・幅400ピクセル、高さ400ピクセルの画面(実行ウィンドウ)の四隅に点を描画してみよう。

基本図形について
p5.jsには、あらかじめ基本的な図形を描く関数が用意されています。以下に基本的な図形の描画方法を記載します。

point(x座標, y座標);


2つの座標(x座標1, y座標1)と(x座標2, y座標2)を結ぶ1本の直線を描きます。

line(x座標1, y座標1, x座標2, y座標2);

方形
方形(正方形や長方形)は、4つのパラメータで設定します。方形の左上の角を基準点にx座標, y座標で指定し、幅と高さを指定します。

rect(x座標, y座標, 幅, 高さ);

円形
円形(正円や楕円)は、4つのパラメータで設定します。円形の中心を基準点にx座標, y座標で指定し、幅と高さを指定します。

ellipse(x座標, y座標, 幅, 高さ);

三角形
三角形は6つのパラメータを指定して描きます。

triangle(x座標1, y座標1, x座標2, y座標2, x座標3, y座標3);

四辺形
四辺形は8つのパラメータを指定して描きます。

quad(x座標1, y座標1, x座標2, y座標2, x座標3, y座標3, x座標4, y座標4);

描線の太さ
図形の描線の太さを変更できます。描線のデフォルトは1ピクセルですが、strokeWeight()関数を使って変更できます。

strokeWeight()

関数のパラメータは1つで、太さをピクセル数で指定します。
以下のように記述します。

function setup(){ 
  createCanvas(400, 400);
}

function draw(){
  background(220);
  strokeWeight(8);
  ellipse(200,200,200,200);
}

描画の順序
プログラムはコードの先頭1行目から順に読み込まれていくため、コードを書く順番は図形の重なり順などに大きく影響します。
重なり合う複数の図形がある場合は、最後に描かれた図形が一番上に重なって表示されます。

描画モード
図形を描画する際に、描画の基準点を設定することができます。
方形の記述ではrectMode()関数を使用して以下のように基準点を設定できます。

rectMode(CORNER)

rect(左上頂点のx座標, 左上頂点のy座標, 幅, 高さ); //デフォルトではこの基準点を使う

rectMode(CORNERS)

rect(左上頂点のx座標, 左上頂点のy座標, 右下頂点のx座標, 右下頂点のy座標);

rectMode(CENTER)

rect(中心のx座標, 中心のy座標, 幅, 高さ);

rectMode(RADIUS)

rect(中心のx座標, 中心のy座標, 幅の半分, 高さの半分);

円形の記述ではellipseMode()関数を使用して以下のように基準点を設定できます。

ellipseMode(CENTER)

ellipse(中心のx座標, 中心のy座標, 幅(直径), 高さ(直径)); //デフォルトではこの基準点を使う

ellipseMode(RADIUS)

ellipse(中心のx座標, 中心のy座標, 幅(半径), 高さ(半径));

ellipseMode(CORNER)

ellipse(円が収まる四角い領域の左上角のx座標, 円が収まる四角い領域の左上角のy座標, 幅(直径), 高さ(直径));

ellipseMode(CORNERS)

ellipse(円が収まる四角い領域の左上角のx座標, 円が収まる四角い領域の左上角のy座標, 円が収まる四角い領域の右下角のx座標, 円が収まる四角い領域の右下角のy座標);

コードは以下のように記述します。

function setup(){ 
  createCanvas(400, 400); 
} 

function draw(){ 
  background(220); 
  rectMode(CENTER);
  rect(100,50,80,80); 
  ellipseMode(CORNER); 
  ellipse(100, 50, 80, 80);
}
練習: 幅400ピクセル、高さ400ピクセルの画面にいろいろな基礎図形を描画してみよう。

カラーモードについて
p5.jsで色を表現するためにはカラーモデルを使って色を指定する必要があります。
p5.jsで用いられるカラーモデルにはRGBモデルとHSBモデルがあります。

RGBモデル
Red (赤)、Green (緑)、Blue (青) の三つの原色を混ぜて色を再現する加法混合の一種です。

HSBモデル
Hue(色相)、Saturation(彩度)、Brightness(明度)の三つの成分から色を再現する方法です。

p5.jsでは、カラーモードを指定することで、RGBモデルとHSBモデルのいずれのカラーモデルを選ぶことができます。

カラーモードは、以下のように設定します。

colorMode(mode, range1, range2, range3, range4);

mode  RGBまたはHSB
range1 赤または色相の範囲:省略可
range2 緑または彩度の範囲:省略可
range3 青または明度の範囲:省略可
range4 透明度の範囲:省略可

p5.jsのデフォルトのカラーモデルはRGBモデルになるため、RGBモデルで各色256段階の範囲で指定する場合は特にcolorMode()関数を使用する必要はありません。
色の設定について
p5.jsでは、背景の色、図形の線の色、図形の面の色をそれぞれ設定することができます。色を設定するための関数を以下に記載します。

背景の色
background(R,G,B);
線の色
stroke(R,G,B);
面の色
fill(R,G,B);

上記の関数のR,G,Bは色を表すパラメータで、R(Red:赤)、G(Green:緑)、B(Blue:青) の三つの原色を表しており、それぞれ0〜255までの数値で色を指定します。
0は色の最小値でそれぞれの色の成分が表示されません。255は色の最大値となります。

例)
R, G, Bが0, 0, 0なら黒
255,0,0なら赤
255,255,255なら白

p5.jsでは色の選択に使えるツールが備わっています。メニューからTools>Color Selectorを選んで下記のウィンドウを表示し、カラーパレットから色を選択すると、RGB, HSBそれぞれの色の数値やカラーコードが表示されるので、この数値を参考にコード上の数値を記述します。

背景の色を設定する

背景の色を設定してみましょう。背景の色を設定するには、background()関数を使用します。

background(255,0,0);

*background()関数をsetup()関数内で使用するか、draw()関数内で使用するかによって完成するアプリケーションの動作に違いが生じるので注意が必要です。

線の色を設定する

基本図形の線の色を設定してみましょう。線の色を設定するにはstroke()関数を使用します。
また、線を描画しない場合にはnoStroke()関数を使用します。

function setup(){ 
  createCanvas(400,400);
}

function draw(){
  background(200);
  stroke(255,0,0);
  ellipse(100,200,100,100);
  noStroke();
  ellipse(300,200,100,100);
}

面の色を設定する
基本図形の面の色を設定してみましょう。面の色を設定するにはfill()関数を使用します。
また、面を描画しない場合にはnoFill()関数を使用します。

function setup(){ 
  createCanvas(400,400);
}

function draw(){
  background(255);
  fill(255,0,0);
  ellipse(150,200,300,300);
  noFill();
  ellipse(250,200,300,300);
}

透明度を設定する

図形の面の色や線の色を指定するstroke()関数やfill()関数に、透明度を設定する四つ目のパラメータを加えることで図形の透明度を設定できます。このパラメータをアルファ値と呼びます。

線の透明度設定:
stroke(R,G,B,alpha);
面の透明度設定:
fill(R,G,B,alpha);

アルファ値の値の範囲は0から255で、0にすると完全に透明になり(表示されない)、255にすると完全に不透明になります(アルファ値を指定しない場合と同じ)。
1から254までの値の範囲では半透明になり、下の色と混ざり合った透けた色が表現できます。

function setup(){ 
  createCanvas(400,400);
}

function draw(){
  background(200);
  stroke(255,0,0,125);
  fill(7,165,247,200);
  ellipse(150,200,300,300);
  stroke(0,255,0,100);
  fill(247,7,216,200);
  ellipse(250,200,300,300);
}
練習:基本図形と色の設定を使用してグラフィック作品を作成してみよう。

変数について

変数とは、ある値をコンピュータのメモリに保存しておき、プログラムのなかで再利用できるようにするための仕組みです。
変数の作成
変数を作成するには、データ型、変数の名前、変数の値を考えて設定します。
変数を使う前には必ず変数の宣言をします。宣言とは、コンピュータのメモリにデータの値を格納する領域を確保することです。
変数の宣言をするためには格納する値にあったデータ型を定義し、名前を決めて値を設定します。

変数の宣言は以下のように記述します。

データ型 変数の名前 = 値;

例)

let x = 10;

上の例は以下のようにも記述することができます。
let x;

x = 10;

変数には任意の名前を付けて設定をします。データの内容がわかりやすい名前を選んで設定しましょう。
変数を使った描画
それでは、変数を使って基本図形を描画してみましょう。
let d = 100; //変数の宣言
size(400,400);
ellipse(100,200,d,d);
ellipse(200,200,d,d);
ellipse(300,200,d,d);

上の例では1行目の let d = 100; にて変数の宣言が行われています。let で整数のデータ型を定義し、変数の名前を d とし、変数 d に 100 という整数の値を代入しています。
変数を使うことで3つの円が同じ値を受け取ることができます。

練習:変数を2つ作成し、x座標とy座標に変数を使用した4つの方形を描いてみましょう。

コンソールへの表示p5.jsではプログラミングによる各種の値をコンソールに表示できます。コンソールとはスケッチを記述しているエディタの下の部分です。
コンソールへの値の表示には以下の関数を使用して記述します。

print(値);

それでは、コンソールを活用したコードを描いてみましょう。

let x = 10;//変数の宣言
let y = 20;//変数の宣言

function setup(){
  createCanvas(400, 400);
}

function draw(){
  background(220);
  print(x);//コンソールへの値の表示
  print(y);//コンソールへの値の表示
}

上のプログラミングでは2種類の変化する値がコンソールに表示されますが、何の値かわかりにくいので、少し改良してみましょう。
以下のように記述することで何の値を表示するのかを明示することができます。

println(“値の説明” + 値);

例)
println(“x:” + x);

それでは、先ほどのスケッチを改良してみましょう。座標の変化がわかりやすいようにラインの表示も加えてみましょう。

let x = 0;//変数の宣言
let y = 0;//変数の宣言

function setup(){
  createCanvas(400,400);
}

function draw(){
  background(255);
  x=mouseX;
  y=mouseY;
  print("x:"+x);//コンソールへの値の表示
  print("y:"+y);//コンソールへの値の表示
  line(x,0,x,height);
  line(0,y,width,y);
}

上のスケッチではwidthとheightというシステム変数を使用しています。システム変数とはp5.jsによってあらかじめ設定されている変数です。

width createCanvas関数で設定されたウィンドウの幅
height createCanvas関数で設定されたウィンドウの高さ

練習:変数を2つ作成し、マウスのx座標とy座標を中心にした円が描画されるスケッチを描く。
その際、円は画面に同時に1個だけ表示されていること。またx座標とy座標の値をコンソールに出力すること。

演算子について
演算子とは各種の演算を表わす記号のことです。以下のような演算子があります。

=  代入する
例)x = 0;

足す
例)x = x + 1;

–  引く
例)x = x – 1;

*  かける
例)x = x * 2;

割る
例)x = x / 2;

また演算子を組み合わせた記述もよく使われます。
+=
例)x += 1;
x=x+1と同じ計算結果となる

-=
例)x -= 1;
x=x-1と同じ計算結果となる

++
例)x++;
x+=1あるいは、x=x+1と同じ計算結果となる


例)x–;
x-=1あるいは、x=x-1と同じ計算結果となる

それでは、これまで学んだことを組み合わせたスケッチを描いてみましょう。

let x = 0;//変数の宣言
let y = 0;//変数の宣言
let d = 40;//変数の宣言

function setup(){
  createCanvas(128,128);
}

function draw(){
  background(0);
  x=mouseX;
  y=mouseY;
  print("x:"+x);
  print("y:"+y);
  noStroke(); // 線を消す
  fill(x+y,0,0);//塗りの色
  ellipse(width/4,height/4,d,d);
  fill(0,x+y,0);
  ellipse(width/2,height/2,d,d);
  fill(0,0,x+y);
  ellipse(width*0.75,height*0.75,d,d);
}

上の例ではカラーモードがRGBの場合、各色が256色であるのを利用してウィンドウサイズを256の半分の128ピクセルとし、マウスのx座標とy座標の値の変化が円の色の変化に反映されるようにしています。

課題4
オンデマンド課題と対面授業課題をそれぞれの締切日までに実施し提出してください。

1)オンデマンド課題 
以下の用語について調査し記述しなさい。 
「アルゴリズム」
課題提出方法 CSのレポート掲示板「デジタルコンテンツ実習Ⅵ(プログラミング) 第4回」にPDF形式の文書を
提出してください。 
A4サイズ 縦位置・横書き 
提出締切 10月28日(水)まで

2)対面授業課題 
対面授業を受講後、以下の内容に沿ってコードを作成し、コードのリンクを記載した書類を提出する。
「変数を使い、x座標とy座標の変化を利用したグラフィックス表現を、コードを用いて描いてください。」 
課題提出方法 作成した作品へのリンク用文字列が記述された文書を、PDF形式のファイルにしてアップロードしてください。
A4サイズ・縦位置・横書き 
提出締切 11月4日(水)まで

*第4回授業用CSレポート掲示板の提出は11月4日(水)まで可能ですが、それぞれの締切日をこちらで
確認していますので、 締切日を守って提出するようにしてください。

ウェブデザイン 第4回

はじめに
***課題はページ最下段に記載しています。***

今回より対面方式とオンデマンド方式を組み合わせて授業を進めていきます。
対面授業では、ソースコードをもとに実際にウェブサイトを構築していきます。オンデマンド授業では、はじめに企画書を完成させていきます。

ソースコードの記述
かんたんなソースコードを自分で書いてコンピュータ上に保存し,それをWebブラウザで開いて,Webページとして表示されるかどうかを試します。

作業手順
① PCを起動し,デスクトップに新しいフォルダをひとつ作成する。
② 作成したフォルダの名前を,自分の学籍番号にする。
③ 「スタートメニュー」>「すべてのプログラム」>「アクセサリ」>「メモ帳」を起動する。
④ 下記のソースコード01を見ながら,書いてあるコードをそのままメモ帳に記入する。
⑤ 書けたら,「ファイル」>「名前を付けて保存」で,「学籍番号」フォルダ内に保存する。
・ファイル名:学籍番号.html←学籍番号を「半角英数」で入力してファイル名にする
・文字コード:UTF-8
・保存先:「デスクトップ」>「学籍番号」フォルダ
⑥ 保存したファイル「学籍番号.html」が,「デスクトップ」>「学籍番号」フォルダ内にあるかどうかを確認する。
⑦ 保存したファイル「学籍番号.html」を右クリックし,「プログラムから開く」>「Internet Explorer」を選択する。
⑧ Internet Explorer(Webブラウザ)が起動し,今作成したファイルがウェブページとして表示されれば成功です。

ソースコード01

ファイル名:「学籍番号.html」

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>はじめてのページ</title>
</head>

<body>
こんにちは!
</body>
</html>

 

ウェブサイトの制作
ソースコードを元に,新しい行を追加していきます。

作業手順
① 作成したファイル「学籍番号.html」を複製して,別のファイルをつくる。複製したファイルの名称を,「index.html」に変更する。
② 「index.html」を,メモ帳で開く。
③ どの行になにが書いてあるのかを自分で覚えておくために,コメントを記入する。
・タグの構造やページ構成をわかりやすくするため,ソースコードの中に覚え書きとして書いておくテキストを,「コメント」と呼んでいます。
・HTMLファイルにコメントを記入するときは, <!– と –> で囲います。
・<!– と –> で囲われた中身は,ブラウザで開いたときには表示されません。
④ 新しく制作するWebページの見出しと本文を記入する。
・ここでは,<h1> 〜 </h1>,<p> 〜 </p>というタグで中身を区切ります。
・このタグは,後で文字のサイズなどを指定するときに,目印として必要になります。
⑤ このWebページの制作者の情報を,ページの末尾に記入する。
・制作者情報は,<address> 〜 </address>というタグで区切るという決まりがあります。

ソースコード02_01

ファイル名:「index.html」

<!DOCTYPE html>
<html lang="ja">

<!-- ここからhead -->
<head>
<meta charset="UTF-8">

<!-- ページのタイトルをここに入れる -->
<title>タイトルを記述しましょう</title>

<!-- スタイルシートの場所を指定している -->
<link rel="stylesheet" href="style.css" type="text/css">

</head>
<!-- headここまで -->

<!-- ここからbody -->
<body>
<!-- サイトの見出しとその説明 -->
<h1>サイトの見出し</h1>
<p>本文を記述します。</p>
<!-- addressには制作者の情報を入れる -->
<address>制作者:自分の名前(愛知淑徳大学創造表現学部メディアプロデュース専攻)</address>

</body>
<!-- bodyここまで -->
</html>

⑥ 文字の大きさや色を指定するため,スタイルシートを作成し,HTMLファイルを関連づける。
・メモ帳で新規ファイルを作成し,そのファイルの中にスタイルを記述します。
・スタイルシートには,「style.css」というファイル名をつけて,「index.html」と同じフォルダに入れておきます。
・「index.html」のファイルとスタイルシート「style.css」を関連づけるためには,<link>というタグを<head>の中に記入します。
⑦ 作成したスタイルシートの中に,スタイルを書き込む。
・スタイルは,CSSというスタイル言語を使って指定します。
・スタイルシートでの色の指定は,「#○○○○○○」という英数字でおこないます。この英数字は,RGBの数値を16進数であらわしたものです。
・「#000000」は,赤・緑・青すべてが0(点灯しない)なので,画面の表示色は黒になります。「#ffffff」は,赤・緑・青すべてがf(もっとも明るい)なので,画面の表示色は白になります。
・どのような色になるのかを調べたい場合は,http://www.colordic.org/ などを参照。

ソースコード02_02

ファイル名:「style.css」

@charset "utf-8";

/* ここからスタイルをはじめます */

body {
color: #444444;
}

h1 {
font-size: 36px;
font-family: Verdana, Helvetica, sans-serif;
color: #191970;
font-weight: normal;
}

p {
font-size: 16px;
line-height: 1.8;
font-family: Verdana, Helvetica, sans-serif;
}

address {
font-size: 14px;
font-style: normal;
}

【font-weightの種類】
normal…標準の太さ
bold…一般的な太字
lighter…相対的に一段階細く
bolder…相対的に一段階太く

【font-familyの種類】
sans-serif…ゴシック系のフォント
serif…明朝系のフォント
cursive…筆記体・草書体のフォント
fantasy…装飾的なフォント
monospace…等幅フォント

【font-styleの種類】
normal…標準フォントで表示
italic…イタリック体フォントで表示
oblique…斜体フォントで表示

⑧ 以上の変更が反映されているかどうか,Webブラウザで開いて確認する。

課題4
1)オンデマンド課題
以下の用語について調査し、ウェブデザインとの関連を含めて記述しなさい。
・ソースコード
課題提出方法 
CSのレポート掲示板 デジタルコンテンツ実習Ⅴ(ウェブデザイン) 第4回 にPDF形式の文書を提出してください。
 A4サイズ 縦位置・横書き
提出締切
10月25日(日)まで
2)対面授業課題
対面授業を受講後、作成したHTMLファイルとCSSファイルを提出する。
課題提出方法
HTMLファイルとCSSファイルを格納した学籍番号フォルダを圧縮(ZIP形式)して提出する。
提出締切
11月1日(日)まで
3)企画書制作課題
ワークシートをもとに企画書を完成させる。  
課題提出方法 
CSのレポート掲示板 デジタルコンテンツ実習Ⅴ(ウェブデザイン) 第4回にワークシートを提出してください。 
ワークシートをPDF形式で提出すること。
手書きを写メしてPDFに変換して送付しても構わないが、データ容量は3MB以下になるよう調整すること。
提出締切
11月8日(日)まで

*第4回授業用CSレポート掲示板の提出は11月8日(日)まで可能ですが、それぞれの締切日をこちらで確認していますので、
締切日を守って提出するようにしてください。

2020プログラミング講座3: 開発環境の使い方

p5.jsのサインアップ
この授業では、プログラミングを記述する(=コーディング)ためにp5.jsという開発環境を使用します。
p5.jsを活用するためには、アカウントを作成するためのサインアップが必要になります。

以下の手順に従ってサインアップしましょう。
1)ウェブブラウザからp5.jsのEDITOR画面にアクセスする。

https://editor.p5js.org/

2)EDITOR画面の右上にあるSign upボタンをクリックしてサインアップ画面を表示する。

3)必要な項目を入力する。
・User Name には開発環境で使用するハンドルネームを記載します。本名を使用する必要はありません。
・Email を入力します。
・Password を入力します。(パスワードは忘れないようにメモしておきましょう。)
・Confirm Password に上で入力したパスワードと同じ記号を確認のため入力します。
・Sign upボタンを押して登録ができれば準備完了です。

4)次回からp5.jsのEDITORを使用するときは、毎回 Log inして使用するようにしましょう。
・Log inにはメールアドレスとパスワードの入力が必要になります。

コーディングの準備
1)Examplesを選ぶ
FileメニューからExamplesを選択し、Examples画面で、Hello P5: shapesを選択します。

2)コードの複製
Hello P5: shapesのオリジナルのコードを複製しましょう。
FileメニューからDuplicateを選択すると、コードの複製が作成されます。
コードを記述するエリアの上部に、コード名が Hello P5: shapes copy として表示されるので、コード名をクリックします。コード名を編集できるので、Hello P5: shapes 0000cmu などのように、名称を変更しておきましょう。
注意:日本語は使用できません。必ず文字入力を半角英数入力に設定を切り替えて名称を入力するようにしましょう。

コードを変更してみる
はじめに、オリジナルのコードの動作確認をしてみましょう。再生ボタンをクリックしコードを実行するとPreviewエリアにコーディング結果が表示されます。
次に、コードを変更してみましょう。コードの8行目 background(200); の数値を以下のように変更して実行してみましょう。

background(255,0,0);

コードの変更によって、背景色が赤く表示されます。(色表示の仕組みについては今後の授業で解説します)
更に、17行目の ellipse(240, 240, 80, 80); の数値を自由に変更してみましょう。

コードの保存
コードの変更が出来たら保存をしてみましょう。FileメニューからSaveを選択するとクラウド上にコードが保存されます。次にコードを使用する際は、FileメニューからOpenを選択し、必要なコードを開きます。

コードのシェア
作成したコードをシェア(他者と共有)することができます。FileメニューからShareを選択すると、コードをシェアするためのウィンドウメニューが表示されます。メニューのPresentの欄に表示されている文字列をコピーしてメモ帳やWordなどにコピーすると、コーディングで作成した作品へのリンクができるようになります。

課題3
p5.jsのEDITORで Hello P5: shapes プログラムを複製しコードを自由に書き換えてシェアしてください。

1)p5.jsのEDITORのFileメニューからExamplesを選択し、サンプル・プログラムのリストから 
   Hello P5: shapes を選ぶ。
2)Hello P5: shapes の名称を変更する。(例 Hello P5: shapes 0000cmu)
3)コード内の数値を自由に書き換えてオリジナルの作品を作る。
4)作品が完成したら保存のうえ、FileメニューからShareを選択し、ウィンドウメニューからPresentの欄に
   表示されている文字列をコピーして、文書作成ソフト(Wordなど)にペーストする。

作成した作品へのリンク用文字列が記述された文書を、
A4サイズ・縦位置・横書き PDF形式のファイルにしてアップロードしてください。

締切:10月22日(木)17:00まで

ウェブデザイン 第3回

企画書制作の準備
ウェブデザインを進めていくための企画書を制作していきます。ワークシートに沿って、企画書を制作していきましょう。
以下にワークシートの制作例を掲載します。

ポイントは、ウェブサイトのテーマにおいて、どのような目的のウェブサイトを構築するのかを明確にしておくことです。
みなさんが扱う、団体・企業・学校・グループ・イベントごとなどのテーマをもとに、どのようなウェブサイトを制作するのか、
制作のテーマを決定しましょう。
また、その際、制作テーマのねらいや、想定する利用者像を明確にしておきましょう。

課題3
制作のテーマを1案に絞り込み、ワークシートを参考にウェブサイトの制作テーマに落とし込みましょう。
また、制作テーマのコンセプトと、想定する利用者についてまとめましょう。
まとめ方:
・制作テーマを100字程度でまとめる。
・制作テーマのコンセプトを200字程度でまとめる。
・想定する利用者像を具体的に記述する。(年齢、性別、職業、趣味など)
課題提出方法 
CSのレポート掲示板 デジタルコンテンツ実習Ⅴ(ウェブデザイン) 第3回 にPDF形式の文書を提出してください。 
A4サイズ 縦位置・横書き 
提出締切 
10月18日(日)まで

ワークシートは、対面授業で作成しますので、準備を進めておきましょう。

2020プログラミング講座2: 開発環境について

プログラミングってどんなもの?
プログラミングとは、コンピューターと呼ばれる計算機に、特定の処理をさせるために命令を与えるための記述方法であると言えます。(記述することをコーディング、記述されたプログラムをコードなどと呼びます。)プログラミングは、プログラム言語と呼ばれる「言語」によって記述されます。

プログラミングに似た人間の活動として、「お菓子づくり」を例に説明します。皆さんはお菓子を作ったことはあるでしょうか。お菓子づくりは他の料理に比べると材料の分量や、材料を混ぜ合わせるタイミングなどが厳密で、ちょっと間違えるだけで、お菓子がふくらまなかったり、焦げたりします。筆者もシュークリームづくりに挑戦して、シュー皮がちっともふくらまず、クリームをしぼんだ皮に塗って食べた苦い経験があります。(全部おいしくいただきましたが。。。)この、お菓子づくりの「レシピ」に相当するものがプログラムです。厳密に書かれたレシピに沿って、材料を用意し、分量をはかり、材料を混ぜて加工すれば、完成目標であるお菓子ができあがります。皆さんが、これから学ぼうとしているプログラミングも、このレシピに非常に似ています。

実際には、皆さんはグラフィックスやサウンドを用いた作品をプログラムを用いて制作することになりますが、プログラミング言語を使って命令を書き、コンピューターに計算させて作品を仕上げることになります。

プログラミング言語について
コンピューターと呼ばれる電子計算機は、1940年代に戦争の道具として作られたと言われています。海をまたいだ敵国の目標地点に正確にミサイルを撃ち込むための弾道計算に使用されていたそうです。コンピューターは2進法と呼ばれる原理で動作しています。簡単な説明をすると、人間の指を折り曲げるか伸ばすかで、数字を表したり、お父さん指やお母さん指のように家族を表したりできるように、2通りの変化の組み合わせで、この世の多くの事物を表現できるという原理です。コンピューターは、その内部に一種のスイッチのような仕組みを大量に備えており、電気エネルギーを使って高速にスイッチのオンとオフを繰り返して、万物を計算したり表現したりする機械だと考えられます。

ただし、コンピューター内部で起きている、こうしたスイッチのオンとオフの変化は、人間には理解しづらく、コンピューターに命令通りに仕事をさせるためには、特別な言語が必要になります。そのために開発されたのが、コンピューターと人間が対話するために創られたプログラミング言語です。

さて、実はプログラミング言語は一種類ではありません。時代の変化によって、人間がコンピューターに計算させたい内容が変わってきたことなどが影響し、現在では数多くのプログラミング言語が存在します。それは、例えばインターネット用の言語や、スマフォ用の言語、AI(人工知能)用の言語といったように用途によって便利なプログラミング言語が開発されてきました。

プログラミングの開発環境について
プログラミング言語を使ってプログラムを記述するためには、その言語を記述するためのスケッチブックやノートブックに相当する開発環境が必要になります。現在では数多くのプログラミング言語が存在することは、先述したとうりですが、それら数多くのプログラミング言語に適した開発環境が存在します。

p5.jsについて

この授業では第1回で説明したとおり、processingというプグラミング言語を使用して学習を進めていきます。processingは、独自の開発環境を持っていますが、時代の変遷により、JavaScriptと呼ばれる言語環境で、processingを動作させるライブラリと呼ばれる仕組みが実現しています。JavaScriptはインターネット上のWEBサイトの構築などに用いられる言語で、この授業で扱う開発環境であるp5.jsもインターネット上で開発が進めらることが特徴になっています。

以下からp5.js にアクセスしてみましょう。

https://p5js.org/

アクセスできたら、Editorメニューをクリックして、プログラミングを記述するための編集環境を表示してみましょう。

詳しくは、次回以降に解説していきますが、今回は以下の授業課題を通して、p5.js を使ってどんなことができるのか確認しておきましょう。

課題2
p5.jsのEditorを操作しサンプル・プログラムを動作させて,どのような作品が制作できるのか調べてみましょう。

1)p5.jsのEditorのFileメニューからExamplesを選択する。
2)サンプル・プログラムのリストが表示されるので、まず、ひとつ選ぶ。(サンプル名をクリックする)
3)再生ボタンを押すとサンプル・プログラムが実行され、実行結果がsketchエリアの右側のPreviewエリアに表示される。
サンプル作品を1つ選んで、その作品についての感想を200字程度で記載してCampusSquareに提出してください。
その際、必ずサンプル作品名を見出しとして記載してください。
A4サイズ・縦位置・横書き PDF形式のファイルをアップロードしてください。

締切:10月15日(木)17:00まで

ウェブデザイン 第2回

制作するWebページのテーマを考える。

この授業では、各自が独自のテーマを設定し、そのテーマをもとにWebページのデザインを進めていきます。

特定の団体・企業・学校・グループ・イベントなどのテーマをひとつ決めて,それを紹介するためのウェブサイトを制作する。

●制作のテーマについて
団体・企業・学校・グループ・イベントごとなど,なにかひとつのテーマを決めて,それを紹介するためのウェブサイトを制作する。テーマとする団体等は,実在のものでも架空のものでも,どちらでも構わない。
自分のためではなく,他者が見て興味を持つことができるウェブサイトを制作すること。また,どのような人が見るためのウェブサイトであるか,ターゲットを明確にすること。

まずはじめに、制作のテーマについて考えていきましょう。その際、伝えたいメッセージや、ウェブページ制作の素材となる文書や画像などを豊富に集めることができるテーマを選択するのがポイントになります。

課題2
制作のテーマを3案考えて、アイディアをまとめてください。
まとめ方:
・3案それぞれのアイディアに、わかりやすいタイトルをつける。
・アイディアごとに200文字程度の解説をつける。
課題提出方法 
CSのレポート掲示板 デジタルコンテンツ実習Ⅴ(ウェブデザイン) 第2回 にPDF形式の文書を提出してください。 
A4サイズ 縦位置・横書き 
提出締切 
10月11日(日)まで

2020プログラミング講座1: Processingについて

本講座ではプログラミングを学習するための環境としてProcessing[図1]を使用します。

図1 Processingのウェブサイト

Processingはグラフィックスをプログラムで生成するうえで困難な各種設定などを必要とせず、コーディングに専念できるという特長があります。
また、Processingはグラフィックスだけでなく、音声や動画なども扱うことができ、それらを組み合わせてインタラクティブ(双方向性のある)な表現を可能にしてくれます。

それでは最初にProcessingがどういう経緯で制作されたプログラミング環境なのかを解説します。

Processingは当時マサチューセッツ工科大学メディアラボに在籍していたCasey ReasとBen Fryによって2001年に誕生しました。
その後2002年から2008年まで開発が続き、2008年秋からバージョン1.0がリリースされ、2013年にはバージョン2.0が、つづく2015にはバージョン3.0がリリースされ現在に至っています。
ProcessingはJava(Java日本語サイト)というプログラミング言語の環境を活用してグラフィック機能などに特化したものだと言えます。

Processingの作者であるCasey ReasとBen Fryは著書「Processingをはじめよう」の中で影響を受けた先行するプログラミング環境をあげています。
ひとつはLOGO(LOGOファウンデーション)で、教育のために開発されたプログラミング環境でした。この言語は児童の発達心理学の成果などが活かされており子どもが思考するための道具としての工夫がなされていました。
ふたつめはDesign By Numbers(公式サイト)で、この言語はマサチューセッツ工科大学メディアラボのJohn Maedaによって開発されました。Design By Numbersはデザイナーやアーティストといったプログラミングを専門としていない人でもプログラミングが可能となる環境を目指して作られており、数値によるグラフィックデザインの研究や教育に使われました。

上のような先行するプログラミング環境の思想や特徴の影響を色濃く受けたProcessingは、初心者にもわかりやすく、特にアーティストやデザイナーなどが創造や表現のためにプログラミングを使うことを学ぶ最初の一歩を踏み出すのに最適な言語です。

課題1
Processingを活用して制作された下記の作品アーカイヴサイトを閲覧し,どのような作品が制作できるのか調べてみましょう。
https://processing.org/exhibition/
作品を1つ選んで、その作品についての感想を200字程度で記載してCampusSquareに提出してください。
A4サイズ・縦位置・横書き PDF形式のファイルをアップロードしてください。

締切:10月8日(木)17:00まで