バナー一覧
名前と学籍番号
ポートフォリオ作成について
この授業では、最終課題としてオンライン・ポートフォリオを作成します。これまでの授業の中でWebページの作成方法について様々なトピックをとりあげてきましたが、最終的にこうした内容をふまえて自分自身のオンラインポートフォリオを完成させてください。
ポートフォリオ作成の注意
この1年で課題演習で制作した作品は、基本的に全て収録するよう心掛けてください。
イメージリテラシー
インタラクション
クラフト＆マテリアル
サウンド＆CGI
その他自主制作で作成した作品は積極的に掲載してください
掲載する作品は、Webサービスなどを活用しながら、その作品に適した方法で掲載するようにしましょう
今学期とりあげた最新の技術も積極的にとりいれてみてください
バナー作成
展覧会のページのために、各自1つ自分のオンラインポートフォリオのバナーを作成します。バナーは以下のフォーマットで作成するようにしてください
画像フォーマット：Gif または Jpeg
ファイル名：ログインID.gif または ログインID.jpg (例：k46000の場合、k46000.gif または k46000.jpg)
サイズ：フルバナー(468 x 60 pixel) と ハーフバナー (234 x 60 pixel) の2種類
GIFアニメーションなどは可ですが、極端にサイズが大きくならないよう注意
ポートフォリオを見てみたくなるように、魅力をアピールする
ファイルのアップロード、公開
ファイルは、IDDのWebサーバーにアップロードすること。最後に必ず以下のアドレスから閲覧できることを確認。
http://www.idd.tamabi.ac.jp/ログインID/
例：ログインIDが、k46000の場合は、公開アドレスは http://www.idd.tamabi.ac.jp/k46000/
わからないことがあれば、IDDのITサポートページ 内の「ネットワークガイド」→「ホームページ公開」を参照してください
今後の更新について
オンラインポートフォリオを課題として扱うのはこの授業で終わりですが、オンラインポートフォリオ自体はこれから卒業まで(卒業後も?)、スタジオの選択や卒業制作、就職活動などで重要な資料となります。この授業が終わったら放置してしまうことなく、絶えず更新をし続けて、iddでの活動がオンラインポートフォリオを閲覧すると全てわかるようなものを目指して活用していくようにしてください。
今日の内容
前回の授業では、canvas要素とJavascriptを連携して、図形やアニメーションを作成する方法について学びました。簡単とはいえ、実際にやってみると、なかなか難しい部分もあったと思います。
今回の授業は、より手軽な方法で、Webページにちょっとしたアニメーションを追加したり、タブナビゲーションやオートスクロールなど気の効いたインタラクションを追加する方法として、jQueryというJavaScriptライブラリを紹介したいと思います。
jQueryの特徴
jQueryは、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリです。フリーなオープンソースプロジェクトとして公開されているので、誰でも自由にライブラリを利用することが可能となっています。現在では、マイクロソフトやノキアなど大手デベロッパーにも採用され、今後ますます注目が集りそうなライブラリです。
jQueryは以下のような特徴が挙げられます。
ブラウザに依存しない
ページ内のドキュメント要素(DOM)走査と変更
CSS操作
エフェクトとアニメーション
Ajaxを利用した非同期な通信
プラグインによる機能拡張
jQueryの習得は、素のJavaScriptを一から習得するのに比べると格段に容易です。しかしながら、その利用によって拡がる表現の可能性はとても大きなものがあります。jQueryの機能はとても多岐にわたるため、その全てを1回の授業で紹介するのは無理ですが、その魅力の一端に触れることができればと思います。
jQuweyの環境設定
jQueryを利用するためには、jQueryのライブラリをWebページに読みこむ必要があります。自分で作成しているHTML書類に、jQueryライブラリを読みこむ方法は、大きくわけて2つあります。ひとつは、jQeuryのサイトから最新のjQueryライブラリをダウンロードして、そのファイルをHTMLのhead要素内でlink要素を使用して関連づける方法。もうひとつは、jQueryのライブラリをホスティングしている外部のWebサービスを利用する方法です。
今回の授業では、ライブラリをダウンロードする方法ではなく、より簡易に利用可能な外部のjQueryのホスティングを利用する方法を使用してみましょう。jQueryなどの主要なJavaScriptライブラリは、Google Libraries API から簡単に利用することが可能です。Googleにホスティングされている現時点で最新のjQuery ver 1.4.4を利用するには、HTMLファイルのhead要素に以下のような記述を追加するだけです。
[sourcecode language=”html”]
jQueryのライブラリを読みこんだら、これを利用したJavaScriptのプログラムを追加することで、様々な効果を使用することが可能となります。今回は、外部ファイルとしてJavaScriptを作成して、それをHTMファイル側からよびだして関連づけてみましょう。今回作成するJavaScriptを「original.js」というファイル名にして、HTMLファイルと同じフォルダに配置するものとします。このときHTMLファイルの骨組は以下のようなものになるでしょう。
[sourcecode language=”html”]
jQuery基本：クリックすると文字がフェードアウト
まずは、簡単なサンプルからみていきましょう。下記のHTMLとJavaScriptファイル「original.js」を同じフォルダ内に作成して、下記のHTMLとJavaScirptのコードを記入してみましょう。
HTML
[sourcecode language=”html”]
JavaScript (original.js)
[sourcecode language=”javascript”]
デモ
このサンプルがjQueryの基本的な使用法になります。
まず、プログラム全体が「$(function(){ … });」で囲まれていることに注目してください。この記述は、中括弧「{…}」内の記述を、このHTMLドキュメントの読み込みが完了した時点で実行するという意味をもっています。つまり、この簡単な記述でドキュメントの読み込み完了のイベント処理を行うことができているのです。このようにjQueryでは短い記述で実際には複雑な処理を、簡単に行うことができることが特徴です。
次に「$(‘p’).click(function() { … });」という部分に注目してみましょう。まず「$(‘p’)」の部分に注目します。この記述は、読み込んだHTMLドキュメントの全てのp要素に対して行う命令であることを示しています。このようにjQueryではドキュメント内の要素にアクセスする際に非常に簡素な記述で行うことが可能です。この記述のルールは、CSSにおけるセレクタの記述ルールとほぼ共通していますので、CSSを使用した経験があれば容易に理解できるでしょう。
その後に続く「.click(function(){ … });」で、要素をクリックした際に命令を実行するように指示しています。その内容として記述されている、「$(this).fadeOut(‘slow’);」は、自分自身(つまりクリックされた要素)をフェードアウトする、という意味です。つまりこれによってクリックすると自分自身をフェードアウトさせるという処理が行われているのです。
フェードイン/フェードアウトのタイミングを調整する
何も指定しないでフェードイン(fadeIn)やフェードアウト(fadeOut)を実行すると、その変化に要する時間は400ミリ秒に設定されています。このタイミングは変更可能です。「fadeIn(‘fast’)」 というように「fast」と指定すると、変化は200ミリ秒に短縮されます。逆に、「fadeOut(‘slow’)」というように「slow」という指定をすると、変化時間は600msになります。また、「fadeIn(1000)」というように、時間をミリ秒単位で数値で指定することも可能です。
実際に様々な指定を試してみましょう。
HTML
[sourcecode language=”html”]
JavaScript (original.js)
[sourcecode language=”javascript”]
デモ
場所の移動
.animate関数を利用すると、場所の移動するアニメーションも自在に作成することが可能です。実例を見ながら理解していきましょう。
HTML
[sourcecode language=”html”]
JavaScript (original.js)
[sourcecode language=”javascript”]
デモ
プラグインを利用する 1：タブメニュー
jQueryはプラグインを使用することで、様々な便利な機能を拡張していくことが可能です。プラグインは多岐にわたっていますが、まずサンプルとしてタブメニューを可能とするプラグインをみてみましょう。
タブプラグインを利用可能にするには、HTMLのhead要素に、jQuery UIのライブラリを新規に読み込む必要があります。jQueryのメインのライブラリに加えて、現時点でのjQuery UIの最新のバージョン1.8.6を読み込むには以下のように記述します。このサンプルではjQuery UIのライブラリのリンクとあわせて、UI用のスタイルシートの読み込みも行っています。
[sourcecode language=”html”]
タブメニューの実装はとても簡単です。サンプルを掲載します。
HTML
[sourcecode language=”html”]
JavaScript (original.js)
[sourcecode language=”javascript”]
デモ
さらに高度なプラグインの利用：フォトギャラリー、ライトボックス
jQueryを利用したより高度なプラグインが数多く公開されています。これらのプラグインを活用することで、フォトギャラリーやライトボックスなど様々な高度な機能が簡単に利用可能です。
下記にjQueryのプラグインに関するリンクを紹介します。この他にも沢山の情報がありますので、検索を活用しながらいろいろ調べてみてください。
HTML 5 + Javascriptで作る動的なコンテンツ
前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。
今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。
HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、canvas要素と連動するJavascriptという言語がキーとなります。まず最初にこのcanvas要素とJavascriptの基本についてみていきましょう。
canvas要素とは
canvas要素はスクリプト(一般的に JavaScript)を使って図形を描くために使われる新しい HTML 要素です。canvas要素は元々はMac OS X v10.4の内部でWebKitコンポーネントとして、DashboardウィジェットやSafariでのアプリケーションを強化するために、2004年[1]にアップルが最初に導入した技術です。その後、Mozilla FirefoxやOperaでも採用され、WHATWGで、新しい標準規格として標準化されました。
canvas要素は現在Mozilla Firefox、Google Chrome、Safari、Operaなどの主要なブラウザで実装されいます。しかしながら、Internet Exproloer 8以前のバージョンには対応していません(ただし、IE 9のプレビューリリースには実装済み)。また現状ではブラウザによって同じコードを記述してもその解釈にばらつきがあります。canvas要素を使用する際には、こうした点に留意しながら使用する必要があるでしょう。
canvas要素の書式
canvas要素の書式自身は、img要素とよく似ています。例えば以下のように記述すると、幅400pixel、高さ300pixelの大きさでcanvas要素が初期化されます。
<canvas id="tutorial" width="400" height="300"></canvas>
canvas要素のid属性は、Javascriptなどのスクリプトでどのcanvas要素に対して処理を行うのかを特定する際に必要となります。canvas要素を使用する際には常にid属性を付けてユニークな(一意な)名称を指定すると良いでしょう。この例の場合はtutorialというid名をつけています。
canvasへの描画 – 基本テンプレート
canvas要素とJavascriptを連携させてHTML内で使用するための基本となるテンプレートを下記に示します。
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas {
border: 1px solid #999;
}
</style>
<canvas id="tutorial" width="400" height="300"></canvas>
17行目にあるcanvas要素が図形を描画する幅400pixel高さ300pixelの画面を生成しています。canvas要素にはtutorialというid属性が設定されています。
4〜11行目のscript要素に挟まれた記述が、Javascriptで書かれたcanvas要素に対する処理を行っている部分です。
このJavascriptを注意深く観察すると、全体がdraw()関数で囲まれていることがわかるでしょう (5行目の function draw() 以下)。このdraw()関数は、ページが読みこまれた際に実行されるように設定されています。その設定をしている部分が、16行目のbody要素の属性 onload=”draw();” の部分です。
body関数は、まず document.getElementById(‘tutorial’); という命令を実行した結果を canvas という変数に格納しています。これは、HTMLの要素の中からtutorialというid属性を指定した要素を抽出しています。その結果抽出されたcanvas要素を、canvasという変数に代入しているのです。
7行目から9行目は、実際にcanvas要素の中に図形を描き始めるために、描画機能にアクセスしている部分です。具体的には、getContext という命令を使用して、2D(二次元)の描画コンテクストにアクセスしています。現状では、canvas要素の描画コンテキストは2Dコンテクストしか用意されていません。しかし、近い将来には、3Dコンテクストが使えるようになるかもしれません。
以上の処理によって、所定のcanvas要素内に図形を描く準備が完了しました。
<div style="width:400px; height:300px; border: 1px solid #999;"></div>
図形を描く 1 – 矩形
まず始めに、矩形(長方形)を描画してみましょう。canvasでは矩形を描くための3つの関数が用意されています。
fillRect(x,y,width,height) : 塗られた矩形を描く strokeRect(x,y,width,height) : 矩形の輪郭を描く clearRect(x,y,width,height) : 指定された領域を消去し、完全な透明にする では、この3つの関数をそれぞれ利用してcanvas要素内に矩形を描いてみましょう。
<title>Canvas tutorial template</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 300, 200);
ctx.clearRect(120, 80, 200, 140);
ctx.strokeRect(200, 20, 180, 260);
}
}
</script>
<style type="text/css">
canvas {
border: 1px solid #999;
}
</style>
<canvas id="tutorial" width="400" height="300"></canvas>
図形を描く 2 – パスを描く
canvasでは一つのまとまった図形を描くのは矩形しかありません。他の図形を描くには、一つ以上のパスを組み合わせて作らなくてはなりません。
パスを使用して図形を描くための命令には、次のようなものがあります。
beginPath() – パスの開始 closePath() – パスを閉じる(始点に向けて直線を描くことで図形を閉じる) stroke() – 線でパスを描く fill() – 塗り潰しでパスを描く moveTo(x, y) – パスの始点を移動する パスを組み合せて図形を描く際には、まずbeginPath()を呼びだしてパスを開始します。次に必要であれば、moveTo(x, y)でパスの始点を移動します。その後で以下のセクションで紹介する直線を描く命令や、円弧を描く命令、ベジェ曲線を描く命令などを組み合せてパスを組み合せて図形を描いていきます。
パスの最後に始点まで戻って図形を閉じたい場合には、closePath()を用います。
パスの描画の方法は2つの方法があります。stroke()は外枠の線だけを描画します。fill()はパスに囲まれた領域を塗り潰します。
図形を描く 3 – 直線
では、直線を組み合せて図形を描いてみましょう。直線を描くには次の命令を使用します。
lineTo(x, y) – 現在の始点の座標から、座標(x, y)に向けて直線を描く 直線を組み合せたパスによる描画のサンプルです。
<title>Canvas tutorial template</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
//輪郭線による描画
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(360, 200);
ctx.lineTo(140, 250);
ctx.closePath();
ctx.stroke();
//塗り潰しによる描画
ctx.beginPath();
ctx.moveTo(50, 250);
ctx.lineTo(160, 20);
ctx.lineTo(340, 50);
ctx.closePath();
ctx.fill();
}
}
</script>
<style type="text/css">
canvas {
border: 1px solid #999;
}
</style>
<canvas id="tutorial" width="400" height="300"></canvas>
図形を描く 4 – 円弧
円弧や円を描くために arc メソッドを使います。arcメソッドの書式は下記の通りです。
arc(x, y, radius, startAngle, endAngle, anticlockwise) arc()は5つの引数をとります。x と y は円の中心です。Radius は半径です。startAngle と endAngle パラメタは円弧の始まりと終点をラジアン角(0°〜360°を、0 〜2 * PIで表現する角度の単位)で定義します。始まりと終わりの角度は x 軸から計算します。anticlockwise パラメタは true の時には円弧を反時計回りに、それ以外は時計回りの方向に描くBool値(trueかfalseか)です。
では円弧を組み合せて図形を描いてみましょう。
<title>Canvas tutorial template</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
//円弧1
ctx.beginPath();
ctx.arc(200, 150, 100, 0, Math.PI * 2, false);
ctx.stroke();
//円弧2
ctx.beginPath();
ctx.arc(200, 150, 80, 0, Math.PI * 1.5, false);
ctx.stroke();
//円弧3
ctx.beginPath();
ctx.arc(200, 150, 60, Math.PI * 0.25, Math.PI * 1.0, true);
ctx.stroke();
//円弧4
ctx.beginPath();
ctx.arc(200, 150, 20, 0, Math.PI * 2.0, true);
ctx.fill();
}
}
</script>
<style type="text/css">
canvas {
border: 1px solid #999;
}
</style>
<canvas id="tutorial" width="400" height="300"></canvas>
色の設定
色を図形に適用するためのプロパティは以下の3つです。
fillStyle = color – 塗りの色 strokeStyle = color – 線の色 globalAlpha = transparency value – 透明度 では、半透明の色を設定して塗り潰してみましょう。
<title>Canvas tutorial template</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
//全体の透明度
ctx.globalAlpha = 0.5;
//円弧1
ctx.beginPath();
ctx.fillStyle = '#3399FF';
ctx.arc(150, 150, 80, 0, Math.PI * 2.0, true);
ctx.fill();
//円弧2
ctx.beginPath();
ctx.fillStyle = '#FF9933';
ctx.arc(250, 150, 80, 0, Math.PI * 2.0, true);
ctx.fill();
}
}
</script>
<style type="text/css">
canvas {
border: 1px solid #999;
}
</style>
くり返し
for文を使用して、くりかえしの処理を行うことも可能です。for文の書式は以下の通りです。
for(《初期化》; 《ループの継続条件》; 《カウンタ変数の更新》){
《文》;
}
例えば、処理を100回くりかえしたい場合は以下のように記述します。
for(i = 0; i < 100; i = i + 1){
《繰り返す処理の内容》
}
ではfor文による繰り返しを利用して、ランダムに直線を描画していくプログラムを作成してみましょう。
画面内のランダムな場所を始点にして、画面内のランダムな場所まで直線を描く処理を1000回繰り返してみます。直線の線の色もランダムに設定しています。
<title>Canvas tutorial template</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
//全体の透明度
ctx.globalAlpha = 0.3;
//1000回処理をくりかえす
for (i = 0; i < 1000; i++) {
ctx.beginPath();
//ランダムな色を生成
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
ctx.strokeStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
//ランダムな場所に始点を移動
ctx.moveTo(Math.random() * 400, Math.random() * 300);
//ランダムな場所まで線を描く
ctx.lineTo(Math.random() * 400, Math.random() * 300);
ctx.stroke();
}
}
}
</script>
<style type="text/css">
canvas {
border: 1px solid #999;
}
</style>
<canvas id="tutorial" width="400" height="300"></canvas>
アニメーション
アニメーションをするには一定時間ごとに関数を実行して、状態を更新することでアニメーションを実現します。
指定した時間ごとに関数を実行するには、setInterval()メソッドを使用します。例えば、100ミリ秒ごとに関数update()を実行するためには、下記のように指定します。
setInterval(draw, 100);
では、簡単なアニメーションのサンプルとして、画面の4隅でバウンドしながらうごきまわるパーティクルを作成してみましょう。
<title>Canvas tutorial template</title>
<script type="text/javascript">
var speedX = 3.0;
var speedY = 4.0;
var locX = 200;
var locY = 150;
var ctx;
function init() {
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
ctx = canvas.getContext('2d');
setInterval(draw, 33);
}
}
function draw() {
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(8,8,12,.2)";
ctx.fillRect(0, 0, 400, 300);
ctx.globalCompositeOperation = "lighter";
//位置を更新
locX += speedX;
locY += speedY;
if (locX < 0 || locX > 400) {
speedX *= -1;
}
if (locY < 0 || locY > 300) {
speedY *= -1;
}
//更新した座標で円を描く
ctx.beginPath();
ctx.fillStyle = '#3399FF';
ctx.arc(locX, locY, 4, 0, Math.PI * 2.0, true);
ctx.fill();
}
</script>
<style type="text/css">
canvas {
background-color: #000;
border: 1px solid #999;
}
</style>
<canvas id="tutorial" width="400" height="300"></canvas>
実際の動きを確認する
大量の物体をアニメーションする
バウンドするパーティクルのサンプルを発展させて、さらに複雑なアニメーションを作成してみましょう。
パーティクルのパラメータを配列で管理することで、沢山のパーティクルを同時に動かしてみましょう。1つのパーティクルに対して、以下のパラメータを設定してみます。
speedX：X軸方向のスピード speedY：Y軸方向のスピード locX：現在のX座標の位置 locY：現在のY座標の位置 radius：半径 r：赤色の成分 g：緑色の成分 b：青色の成分 <title>Canvas tutorial template</title>
<script type="text/javascript">
const NUM = 500;
const WIDTH = 640;
const HEIGHT = 480;
var speedX = new Array(NUM);
var speedY = new Array(NUM);
var locX = new Array(NUM);
var locY = new Array(NUM);
var radius = new Array(NUM);
var r = new Array(NUM);
var g = new Array(NUM);
var b = new Array(NUM);
var ctx;
function init() {
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
ctx = canvas.getContext('2d');
for (var i = 0; i < NUM; i++) {
speedX[i] = Math.random() * 8.0 - 4.0;
speedY[i] = Math.random() * 8.0 - 4.0;
locX[i] = WIDTH / 2;
locY[i] = HEIGHT / 2;
radius[i] = Math.random() * 8.0 + 1.0;
r[i] = Math.floor(Math.random() * 64);
g[i] = Math.floor(Math.random() * 64);
b[i] = Math.floor(Math.random() * 64);
}
setInterval(draw, 33);
}
}
function draw() {
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(8,8,12,.1)";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
ctx.globalCompositeOperation = "lighter";
for (var i = 0; i < NUM; i++) {
//位置を更新
locX[i] += speedX[i];
locY[i] += speedY[i];
if (locX[i] < 0 || locX[i] > WIDTH) {
speedX[i] *= -1.0;
}
if (locY[i] < 0 || locY[i] > HEIGHT) {
speedY[i] *= -1.0;
}
//更新した座標で円を描く
ctx.beginPath();
ctx.fillStyle = 'rgb(' + r[i] + ',' + g[i] + ',' + b[i] + ')';
ctx.arc(locX[i], locY[i], radius[i], 0, Math.PI * 2.0, true);
ctx.fill();
}
}
</script>
<style type="text/css">
canvas {
background-color: #000;
border: 1px solid #999;
}
</style>
<canvas id="tutorial" width="400" height="300"></canvas>
実際の動きを確認する
さらに高度なアニメーション表現へ
さらにマウスによるインタラクションを加えたサンプルを紹介します。このサンプルは、Daniel Puhe氏によるLiquid Particles というプログラムをもとにしています。
<title>Canvas tutorial template</title>
<script type="text/javascript">
/*
* This example based on Liquid Particles
* by Daniel Puhe (http://spielzeugz.de)
*/
var PI_2 = Math.PI * 2;
var canvasW = 640;
var canvasH = 480;
var numMovers = 600;
var friction = .96;
var movers = [];
var canvas;
var ctx;
var canvasDiv;
var outerDiv;
var mouseX;
var mouseY;
var mouseVX;
var mouseVY;
var prevMouseX;
var prevMouseY;
var isMouseDown;
function init() {
canvas = document.getElementById("mainCanvas");
if (canvas.getContext) {
setup();
setInterval(draw, 33);
}
}
function setup() {
outerDiv = document.getElementById("outer");
canvasDiv = document.getElementById("canvasContainer");
ctx = canvas.getContext("2d");
var i = numMovers;
while (i--) {
var m = new Mover();
m.x = canvasW * 0.5;
m.y = canvasH * 0.5;
m.vX = Math.cos(i) * Math.random() * 34;
m.vY = Math.sin(i) * Math.random() * 34;
movers[i] = m;
}
mouseX = prevMouseX = canvasW * 0.5;
mouseY = prevMouseY = canvasH * 0.5;
document.onmousedown = onDocMouseDown;
document.onmouseup = onDocMouseUp;
document.onmousemove = onDocMouseMove;
}
function draw() {
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(8,8,12,.65)";
ctx.fillRect(0, 0, canvasW, canvasH);
ctx.globalCompositeOperation = "lighter";
mouseVX = mouseX - prevMouseX;
mouseVY = mouseY - prevMouseY;
prevMouseX = mouseX;
prevMouseY = mouseY;
var toDist = canvasW * 0.86;
var stirDist = canvasW * 0.125;
var blowDist = canvasW * 0.5;
var Mrnd = Math.random;
var Mabs = Math.abs;
var i = numMovers;
while (i--) {
var m = movers[i];
var x = m.x;
var y = m.y;
var vX = m.vX;
var vY = m.vY;
var dX = x - mouseX;
var dY = y - mouseY;
var d = Math.sqrt(dX * dX + dY * dY);
if (d == 0) d = 0.001;
dX /= d;
dY /= d;
if (isMouseDown) {
if (d < blowDist) {
var blowAcc = (1 - (d / blowDist)) * 14; vX += dX * blowAcc + 0.5 - Mrnd(); vY += dY * blowAcc +
0.5 - Mrnd();
}
} if (d < toDist) {
var toAcc = (1 - (d / toDist)) * canvasW * 0.0014; vX -= dX * toAcc; vY -= dY *
toAcc;
} if (d < stirDist) {
var mAcc = (1 - (d / stirDist)) * canvasW * 0.00026; vX += mouseVX * mAcc; vY += mouseVY
* mAcc;
} vX *= friction; vY *= friction; var avgVX = Mabs(vX); var avgVY = Mabs(vY); var avgV = (avgVX + avgVY) * 0.5;
if (avgVX < .1) vX *= Mrnd() * 3; if (avgVY < .1) vY *= Mrnd() * 3; var sc = avgV * 0.45; sc = Math.max(Math.min(sc,
3.5), 0.4); var nextX = x + vX; var nextY = y + vY; if (nextX > canvasW) {
nextX = canvasW;
vX *= -1;
}
else if (nextX < 0) { nextX = 0; vX *= -1; } if (nextY > canvasH) {
nextY = canvasH;
vY *= -1;
}
else if (nextY < 0) { nextY = 0; vY *= -1; } m.vX = vX; m.vY = vY; m.x = nextX; m.y = nextY; ctx.fillStyle = m.color;
ctx.beginPath(); ctx.arc(nextX, nextY, sc, 0, PI_2, true); ctx.closePath(); ctx.fill();
}
} function
onDocMouseMove(e) {
var ev = e ? e : window.event; mouseX = ev.clientX - outerDiv.offsetLeft - canvasDiv.offsetLeft;
mouseY = ev.clientY - outerDiv.offsetTop - canvasDiv.offsetTop;
} function onDocMouseDown(e) {
isMouseDown = true;
return false;
} function onDocMouseUp(e) { isMouseDown = false; return false; } function Mover() {
this.color = "rgb("
+ Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255)
+ ")"; this.y = 0; this.x = 0; this.vX = 0; this.vY = 0; this.size = 1;
} function rect(context, x, y, w, h) {
context.beginPath(); context.rect(x, y, w, h); context.closePath(); context.fill();
} function trace(str) {
document.getElementById("output").innerHTML = str;
}
</script>
<style type="text/css">
canvas {
background-color: #000;
border: 1px solid #999;
}
</style>
<div id="outer">
<div id="canvasContainer">
<canvas id="mainCanvas" width="640" height="480"></canvas>
<div id="output"></div>
</div>
</div>
実際の動きを確認する
Webを記述する言語の標準の現状
昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。
HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1
CSS (文書の体裁・デザインを指定する言語) – CSS 2
しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。
HTML (Webサイトの記述言語) の標準化巡る闘争の歴史
AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] より
HTMLを巡る標準化の動きは、様々な組織や企業が、それぞれの思惑を抱えながら覇権争いをくりひろげた闘争の歴史でもあります。Webブラウザの開発者、ソフトウェアメーカー、MicrosoftやAppleなどのOSの開発会社、標準化団体などが、それぞれの立場で標準を主張してきました。その結果、HTMLのバージョンの歴史はとても複雑怪奇なものとなっています。
長年にわたる闘争の末、数年前にようやくHTMLの標準は落ちつくかと思われました(XHTML + CSS)。しかしながら、現実は予想に反してXHTML 1.0という当初の規格は思うように普及せず、その後継として計画されてたXHTML 2の標準化も途中で頓挫してしまい、最終的に標準化のためのワーキンググループは解散するという事態になってしまいました。
そのため、標準化を巡る流れはおおきく方向転換を余技なくされ、そこでいままでの標準化団体とは別にブラウザのベンター(Apple, Mozilla, Opera, Google) 達が新たな標準化を押しすすめるようになり、その結果XHTML 2.0に代わるものとして提案された規格が、HTML 5 です。
現在 HTML 5 は2012年の勧告(一般に向けて仕様を公開する)に向けて、標準化の仕様策定の作業が続けられています。その機能は徐々に現状のブラウザにも反映され、一部の機能は既に様々な分野で仕様され始めています。しかしながら、現状ではまだブラウザによってその進度は大きな差があります。現状での HTML 5 の進行状況は、◎Chrome、◎Safari、○Firefox、○Opera、△IE8、(× IE6) といったところです。
HTML 5 とは何なのか?
では、HTML 5とは何なのでしょうか。その機能は多岐にわたります。下記の資料がその全貌をわかりやすく解説しているので、参考にしてみましょう。
HTML 5 の特徴を要約すると、だいたい以下のような感じになるでしょう。
Webアプリケーションを実現するための、機能の拡張
HTMLに、新しい要素や属性の導入
ローカルの記憶領域、DBとの連携強化
UIの向上 (ドラッグ&ドロップ、FORMの拡張)
地図情報
オーディオ、ビデオの取り扱い
キャンバス (図形の描画)
CSS (文書の要素のデザイン機能) の大幅な拡張
これらの機能の追加により、今まではHTML文書単体では不可能であった様々なリッチなユーザ体験が可能となることでしょう。
HTML 5 になると、古い記述(XHTML 1.0)が使えなくなるわけではない
では、HTML 5 を導入すると、以前仕様していた古い記述方法を仕様することはできなくなるのでしょうか。実は、そのようなことはありません。HTML 5 はいままで普及していた書式、HTML 4.xや、XHTML 1.0 の書式を包括するより広い範囲での記述の仕様となります。いままでの古い記述の方法もまた、HTML 5 に含まれているというイメージです。下記のマンガがこの概念をわかりやすく解説しています。
今学期のイメージリテラシーでのHTMLの方針
以上の点を踏まえて、この授業では以下のような基準で「正しい」HTMLというものを決定していきます。
基本的な文法は、現状普及している XHTML 1 に準拠する。
ただし、現在でも使用可能な機能に関しては、積極的に HTML 5 と CSS 3 に関するトピックスも扱っていく
現在のWebブラウザに配慮しつつ、将来を見据えた標準についても同時に学んでいこうというのが、この授業での基準となります。
HTML 5 の新要素、文書の構造を示すための要素を使用する
HTML 5 の導入として、HTML 5 から導入された数多くの新機能の中から、HTML 5 から加わったページ全体の構造をマークアップする新要素を使用してみましょう。
これまでのHTMLでは、ヘッダーやフッター、サイドメニューなどのページ全体のアウトラインを画面上で実現しようとした場合、古くはtable要素、CSS2によってある程度レイアウトができるようになると、div要素にidやclass属性としてheaderやfooterなどと命名してマークアップしていました。これらはページの中で全く違う役割を果たしているにもかかわらず、全て同じdiv (tableの場合は、trやtd) 要素でマークアップしています。HTML 5 以前にはこれ以外に方法がなかったためです。
しかし、HTTML 5 からは、最初からページ内での役割を明示した、論理区域を区別するための新要素が導入されました。ヘッダーやフッター、記事など文書を意味によって区分していく際に、tableやdivで区分するのではなく、意味に応じて新規の構造化要素の使用が奨励されています。またページ制作者にとっても新しい構造化要素を使用することで、非常にシンプルにページ全体のアウトラインを行うことができるようになり、とても便利になりました。
実際に新要素を使用しながら、HTML 5 の利便性を体感してみましょう。
ページ全体の構成
要素の理解のために、今回は典型的なヘッダーとフッターをもった2コラムのレイアウトを想定してページを作成します。ヘッダーとフッターに挟まれた左側のコラムにはナビゲーションのメニューが、右側にはメインのコンテンツが入り、メインのコンテンツの中には複数の記事が格納されるものとします。このページの構造を簡単に図示すると下記のようになります。
この構造を今までのXHTML 1 + CSS2 によってレイアウトしようとした場合、div要素で範囲を分割し、それぞれのdiv要素の中身にclass属性もしくはid属性をつけることでCSSから参照する方法が一般的でしょう。図にすると下記のようなイメージです。
しかし、div要素は複数の要素をまとめて、ページを分割するという意味はあるものの、それ事態に「ヘッダー」や「フッター」「サイドバー」といったレイアウトに相当する意味は本来付与されていません。また、実際にCSS2でブラウザ上で崩れないようにレイアウトするには、さらに複数のdiv要素を包括するためのdiv要素が必要になることもあり、気付くとdiv要素が幾重にも入れ子上に複雑に配置されていることも少なくありません。
そうした問題を解決するのが HTML 5 から導入された構造化のための新要素になります。
HTML 5 から導入された構造化要素
HTML 5 から導入されたページの構造を指定する要素には下記のものがあります。
section: 本の一部あるいは章、章のセクション、あるいは基本的に HTML 4 で独自の見出しを持つすべてのもの。
header: ページに表示されるページ・ヘッダー。head 要素と同じではありません。
footer: 細かい文字での説明が入るページ・フッター。Email・メッセージの署名。
nav: 他のページへのリンクの集まり。
article: ブログや Web マガジン、一覧記事などに掲載されている個々のエントリー。
これらの要素を利用して、先程のレイアウトを整理すると下記のようになります。
HTML 5 ではこれらの名称をdiv要素などの属性としてではなく、要素名として使用可能となります。このことは、HTMLページ自体にレイアウト構造の意味を指定しているという点で重要です。それぞれのサイトで独自に命名されたクラス名やid名ではなく、標準化された要素名としてそのセクションの役割を類推できるということは、様々なメディアや検索エンジンなどからページを参照する際に重要な役割を果たします。
※ ただし、ページのコンテンツを区切るためにsection要素を使用すべきかどうかという部分には、議論があります。詳しくは、「section 要素 – html5doctor – HTML5.JP 」の記事を参照してください。
実際に HTML 5 の構造化要素を試してみる
では早速 HTML 5 の構造化要素を試してみましょう。サンプルとして以下の簡単なHTMLファイルで試してみることにしましょう。サンプルとして下記のようなシンプルなHTMLファイルを用意しました。
< !DOCTYPE html>
HTML5とCSS3によるページサンプル
HTML5 + CSS3, Layout Sample
Media Literacy 2010, Tama Art University
このサイトについて
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
HTML5とCSS3による豊かな表現
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
さらに別の記事
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
Navigation
This site is licensed under a Creative Commons Attribution 3.0 License
このHTMLファイルの意味構造を整理すると以下のようにまとめられるでしょう。
ヘッダー
大見出し h1
中見出し h2
ヘッダーメニュー ul, li
セクション
記事
大見出し h1
段落 p
中見出し h2
段落 p
記事
ナビゲーション
大見出し h1
ナビゲーションメニュー ul, li
フッター
このHTMLに先程学んだ構造化要素を意味の構造に準拠してマークアップしてきます。使用する要素は、header, hgroup, section, article, nav, fotter になります。
< !DOCTYPE html>
HTML5とCSS3によるページサンプル
HTML5 + CSS3, Layout Sample
Media Literacy 2010, Tama Art University
このサイトについて
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
HTML5とCSS3による豊かな表現
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
さらに別の記事
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
Navigation
しかし実際にこのHTMLファイルをブラウザから開いてみても、想定したレイアウト(ヘッダーやフッター、ナビゲーション)にはなっていません。実は、HTML 5 の構造化要素は文章の区分構造をマークアップするだけで、そのレイアウトの具体的な方法を指示しているわけではありません。この意味構造を受けて、どのようにレイアウトするのかは、いままでのHTMLと同様にスタイルシートを使用してレイアウトの方法や視覚的な効果を指定していくことになります。
ブラウザで開く
CSS3を使用してレイアウトする
まず、head要素内に外部スタイルシートへのリンクを指定します。style.cssというファイルにスタイルを書いていくこととします。
また、現状ではInternet Explorerの HTML 5 への対応状況があまり良くありません(対応していない要素がほとんど)。このサンプルでは、IE対策のために、html5shim というIEをHTML 5に対応させるためのJavascript (html5.js) を利用しています。
< !DOCTYPE html>
HTML5とCSS3によるページサンプル
次にこのHTML 5のレイアウトを行うCSSを記述します。全体の幅を960pxとして、ヘッダー(header要素)とフッター(footer要素)に挟まれて、左にナビゲーション(nav要素)、右にメインのコンテンツ(section)が2コラムで並ぶようにします。
body {
width:960px;
margin:20px auto;
}
header, nav, section, footer {
display:block;
border:1px solid #ccc;
margin:5px;
padding:20px;
}
header {
text-align:center;
padding:30px;
}
header ul, header li {
list-style-type:none;
display:inline;
}
nav {
float:right;
width:236px;
}
section {
float:right;
width:620px;
}
footer {
clear:both !important;
text-align: center;
}
このスタイルシートを適用すると、以下のように設計した通りのレイアウトになります。
ブラウザで開く
CSS3の視覚効果を利用する
CSS3では、以前のバージョンに比べて大幅に機能が強化されました。ドロップシャドウやグラデーション、角丸などの様々な視覚効果や、フォントの読み込み、マルチコラムレイアウトなど多彩な機能が追加されています。(参考：HTML 5 Rocks Slide )
ここでは、そのいくつかの効果を利用してページの視覚効果をより詳細にデザインしています。外部画像は一切使用しなくても多彩な視覚効果を生成できることが実感できるでしょう。指定されたCSSファイル style.css を下記のように書き換えると多彩な効果が付加されます。
body {
background:#aaa;
font-family: Georgia, 'Hiragino Mincho Pro', Meiryo, serif;
color:#000;
margin:20px auto;
text-align:center;
line-height:1.5em;
width:960px;
}
h1, h2, h3, h4, h5, h6 {
font-family:"Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
font-weight:lighter;
}
a:link, a:visited {
color:#c00;
text-decoration:none;
}
a:hover {
color:#0cc;
}
header, nav, section, footer {
display:block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 0px 4px #666;
-moz-box-shadow: 0px 0px 4px #666;
box-shadow: 0px 0px 4px #666;
border: 1px solid #d3d3d3;
background-color: #fff;
margin:5px;
padding: 0 20px 10px 20px;
font-size: 12pt;
color: #000;
text-align: left;
}
header {
text-align:center;
padding:30px;
background-image: -moz-linear-gradient(top, #888, #333);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #888), color-stop(1.0, #333));
background-color: #444;
border:none;
color:#fff;
text-shadow: 0px 0px 4px #000000;
}
header h1, header h2, header h3, header h4, header h5, header h6, header li, header p {
font-family: Georgia, 'Hiragino Mincho Pro', Meiryo, serif;
}
header h1 {
font-size:2.3em;
text-transform:none;
letter-spacing:0em;
}
header h2 {
margin:-10px 0px 20px;
font-size:1.3em;
}
header ul {
padding:0px;
list-style-type:none;
display:inline;
}
header li {
margin:0px 10px;
padding:0px;
list-style-type:none;
display:inline;
}
header a:link, nav a:visited {
font-weight:normal;
}
nav {
float:right;
width:200px;
}
nav h1 {
font-size:1.4em;
}
section {
float:right;
width:656px;
text-align:left;
margin-bottom:10px;
}
section h1, nav h1 {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color:#444;
color:#fff;
padding:10px;
margin:10px -10px;
text-shadow:1px 1px 5px #000;
}
section ul {
padding:0px;
list-style:none;
border-top:1px solid #e7e2d7;
margin:14px 0px;
}
section li {
margin:0px;
padding:0px;
list-style:none;
}
section li a:link, section li a:visited {
float:left;
width:96%;
padding:3px 1%;
border-bottom:1px solid #e7e2d7;
}
section li a:hover {
background:#f2f1ec;
}
section p {
font-size:0.9em;
}
article {
margin:0 0 30px 0;
}
footer {
clear:both !important;
padding:10px;
background-color: #444;
border:none;
color:#fff;
font-size:0.8em;
text-align:center;
}
footer a {
margin:0px 5px;
}
このスタイルシートを適用してみましょう。
ブラウザで開く
今日のまとめ
今回の授業では、HTML 5 とCSS3の導入として、構造化のための新要素を利用してHTMLに意味要素を与え、それを利用してCSS3でレイアウトやデザインを行う方法について学びました。
しかし、HTML 5 で可能となったことはより広範囲に渡ります。今回は静的なサンプルでしたが、HTML 5 とJavascriptを使用することで、グラフィックの生成や、アニメーション、地図との連携など様々な動的なページをFlashPlayerなどのプラグインを使用することなく実現することが可能となっています。次回はより動的な表現についてとりあげいきたいと思います。
サンプルファイルのダウンロード
今回の授業で使用した全てのサンプルは、下記からダウンロード可能です。
オンラインポートフォリオの制作テンプレート
オンラインポートフォリオの制作にあたっては、下記URLからテンプレートをダウンロードして参考にしてください。テンプレートには、画像、動画、音声、Javaアプレット(Processigの作品) などのメディアを載せる実例も掲載されていますので、適宜参考にしてください。
オンラインポートフォリオのテンプレートをダウンロード (Zip形式、693KB)
今回制作するオンラインポートフォリオは、この授業だけでなく、入学から卒業制作まで制作してきた自身の作品を掲載する重要な記録となります。この授業の講評を終えた後も、更新を続けていくようにしましょう。また、将来的には、このポートフォリオをスタジオの選択や卒業制作の審査などの際に参考資料として提出することもあります。
オンラインポートフォリオに最低載せる内容
表紙 (index.html)：
自己紹介：画像、簡単な経歴など自己アピールしたい内容を記述してください。
ブックマーク：(もしあれば)自分のWebページ、自身のブログなどへのリンク。自分の興味のある分野のWebページ、好きなアーティストのページなど。
実技系の授業で作成した作品を掲載
メディア芸術基礎(情報デッサン / メディアリテラシー)：情報デッサンで制作したデッサンの画像
イメージリテラシー：制作した映像作品
インタラクション：制作したProcessingの作品(Javaアプレット)
個人制作
授業とは関係なく自分自身で制作した作品があれば、積極的にポートフォリオに追加してください
イラスト、映像、音楽、
1年生後期に追加する作品
サウンド&CGI：制作した音響作品、映像作品
クラフト&マテリアル：制作した作品(映像、写真)
2年生以降も制作した作品は全てオンラインポートフォリオに記録していく
メディアに応じた作品の掲載方法
1. 画像 (写真、イラストなど)
大きくわけて、2つの方法があります。
Webサーバー内に画像を保存する方法
HTML内に、img要素を記述して写真や画像を読み込みます。
例) htmlファイルと同じ階層に「img」というフォルダを作成して、その中に「hoo.jpg」という画像を入れた場合
[code lang=”html”]
写真共有サービスを利用する場合 – Picasaウェブアルバムを利用した例
画像をアップロード
ヘッダーの右にある「アップロード」ボタンを押す
アルバムを選択、または新規に作成 – 写真は「アルバム」という単位で整理されます、授業毎にアルバムを分けたり、時系列にアルバムを作成したりと、適宜整理の方針を決めてアルバムを作成
新規にアルバムを作成する際は、共有の設定を「一般公開」にするように注意
ファイルのアップロード画面に遷移するので、画像を選択してアップロード
写真へのリンクを取得
アルバムからWebに載せたい画像を選択する
選択した写真の右側のメニューの「この写真へのリンク」を押して、リンクの設定を表示
貼りつける画像のサイズを選択
「画像を埋め込み」の欄に表示されているHTMLのタグをコピー
制作するページのHTMLファイルにコピーしたタグをペーストする
画像を埋めこんだ例
埋めこみコード
[code lang=”html”]
2. 動画 (記録映像、映像作品、アニメーションなど)
YouTubeに動画をアップする場合
動画のアップロード
YouTubeにGoogleアカウントでログインする (右上のリンク)
検索欄の右にある「アップロード」を選択
アップロード終了後、サーバ側で画像の圧縮処理が始まる
動画を埋め込む
アップロードした動画の圧縮が終わったら、埋め込みコードを取得して、動画を貼りつける
ログインした後の画面の右上にあるアカウント名のメニューから「マイ動画」を選択
埋め込みたい動画を選択
動画の画面から「埋めこみコード」ボタンを押す
動画のサイズ、インターフェイスの色などを設定
埋め込みコードをコピーして、動画を埋めこみたいHTMLページにペーストする
動画を埋めこんだ例
埋めこみコード
[code language=”html”]
3. 音 (音楽・音響作品など)
音作品もWebサービスを利用すると便利
SoundCloudを利用する
SoundCloud (http://soundcloud.com/ ) – サウンドを共有することのできるWebサービス
ユーザー登録する
まずは「Sign Up」ボタンを押して、ユーザ登録をする
必要事項を記入して登録する
サウンドファイルのアップロード
ヘッダーのメニューの右にある「Upload & Send」ボタンを押す
ファイルを選択画面に遷移、「Coose File」ボタンを押してディスク上のサウンドファイルを選択
アップロードが開始されると、詳細な情報を設定する画面に遷移する、記入できる項目に情報を記述
共有の設定 – 3. Who is this track for? の設定は「Public (available for everyone)」にすること
全ての設定が完了したら、「Save Track」ボタンを押してトラックを保存
サウンドの共有
保存したトラックの波形が表示される
左上にある「Share」ボタンを押す
表示される画面の「The embed code for the player」の下にあるHTMLコードをコピー
サウンドを貼りつけたいHTMLファイルの中にコピーしたHTMLコードをペースト
サウンドを埋めこんだ例
SC Test by tadokoro
埋めこみコード
[code language=”html”]
Twitter
Followerは増えたか?
Follower数選手権、クラス1位は誰か?
Googleアカウントの取得
前回Gmailのアカウントを作成しなかった人 – Googleのアカウントを取得する
検索画面のカスタマイズ
Googleアカウントでログイン
iGoogleを活用
ガジェットを追加してみる
メール
Gmailの様々な使用法
分類する：ラベル
自動的にふりわける：フィルター
アカウントの追加：[アカウント名]+文字列@gmail.com
スケジュール管理、Todo
Google Calender – Eventを追加して、スケジュールを管理する
Todo – TaskによるTodoリストの作成
地図、位置情報
Google Mapsでマイマップを作成
ルート検索 – 家から大学までの経路を探索 – 歩いたら?
地図を共有 – 世界遺産を探せ!
情報を収集する
RSSリーダ：Google Reader – 情報芸術コースのRSSを追加、その他お気にいりのフィードを追加する
取得したフィードを共有する
参考：delicious
参考：はてなブックマーク
メディアを公開する：写真を共有する
Picasaを使って写真を公開
参考：Flickr
動画を共有する
YouTubeを使って動画を公開
参考：Vimeo
グループワーク
Google Document – ワードプロセッサ、スプレッドシート、フォーム作成、文書の共有
Google Wave – リアルタイムに協調作業
日常の全てを記録する、ライフログ
Google Buzzで、日常の全てを記録
参考：FriendFeed
導入：コンピュータと仲良くなるために
参考資料：山形浩生「コンピュータ (あたらしい教科書 9)」
コンピュータの「常識」を学び、多くの人で共有する必要性
自動車の運転をしている人がすべて、ボンネットを開けてエンジンの修理をしたり、パンクしたタイヤを取り替えたりできるわけではありません。でも社会の中で多くの人が車はガソリンや軽油を燃やして走っているのだとか、排気ガスを出すとか、急にはとまれない、といったことを理解していることが、道路についての政策や自動車開発の方向性をある程度左右しています。この本で伝えたいのは、コンピュータについてのそのくらいの常識なのです。でも、それを多くの人が共有すれば、たぶんコンピュータをめぐる社会の環境はーそしてコンピュータが不可欠となっているぼくたちの生活はー完璧ではないにせよ、大きく間違えることはなくなるはずです。(山形浩生「あたらしい教科書 – コンピュータ」p3)
情報芸術コースのコンピュータ環境について
104教室のiMacを使用して、コンピュータ操作の基本を学ぶ
起動
電源ボタンを押して、電源を入れる
iMacの場合はモニタ裏面の左下 (※ 電源ボタンの位置は、機種により異なります)
終了
強制終了
[command + option + esc]キーで強制終了するアプリケーションを選ぶダイアログが表示、終了したいプログラムを選択して終了する
「応答なし」になっているプログラムをドック上のアイコンを[option]を押しながらマウスで長押し、表示されたポップアップメニューから強制終了を選択する
何も反応しなくなってしまった場合は、電源ボタンを数秒間押しっぱなしにすると電源が落ちる
Macintoshの基本操作
Apple Webサイトのムービー「Macの基本操作 」を視聴
デスクトップ
ドック
Finder
メニューバー
Finderとその機能
サイドバー
表示の切り替え
検索
ヘルプ
ファイルの操作の練習
ファイルの作成
フォルダ作成
ファイルの移動、コピー、削除、リネーム
テキスト入力
文章を入力してみる
かな漢字変換「ことえり」の使用法
入力モードを切り替えるには、[Command + Space]
文章を入力
変換対象の単語の下の下線が太くなる
[Space]押すと、変換候補が順番に表示される
正しい変換候補が表示されたところで、[Enter]
変換する文節を移動するには、[←]と[→]、もしくは[Control + F][Control + B]
変換したい文節を広げたいときには、[Shift + →]、もしくは[Control + O]
変換したい文節を広げたいときには、[Shift + →]、もしくは[Control + O]
かんたんな自己紹介の文章を入力してみる
参考：Mac ことえりのキーボードショートカットまとめ（50種類）
入力した文章をコンピュータにしゃべらせてみる
入力した文章をマウスで選択し、「編集」→「スピーチ」→「読み上げを開始」
ただし、日本語には未対応
英文を入力して、読み上げ機能をためしてみる
学内ネットワークの利用
学内ネットワークの利用に関しての情報が全て掲載されている
まずログインしてから利用
このページが自分のアカウントの管理のための機能もはたしている
パスワードは自分自身の責任で管理すること
学内ネットワーク利用にあたっての、ルールと禁止事項の確認
ファイルサーバーへの接続
ファイルサーバー、個人専用のロッカーのようなもの
ITサポートのページ を参照しながら、ファイルサーバーに接続するファイルのアップロード、ダウンロードを試してみる
席を移動して、別のMacからも同じデータが閲覧できることを体感してみる
共用のコンピュータを使う際の注意
共用のコンピュータには個人ファイルを残さない
残したいデータはファイルサーバにアップする
共用コンピュータに保存したファイルが無断で消されていても本人の責任
Email
PCのEmailアカウントをもっているかの調査
携帯のアドレスしかない人は、Gmailでアカウント作成
Emailを送受信してみる
授業のMLへの登録
Twitterで遊んでみる
個々のユーザーが「トウィート(つぶやき)」を投稿することでゆるいつながりが発生するコミュニケーション・サービス
全世界でのユニークユーザは2010年4月14日のTwitterの発表では登録ユーザーは1億500万人、Twitter.comへのユニークビジター数は1億8000万人、1日に30万人の新規ユーザーを獲得 (CNET – Twitterの過去と未来–共同設立者から開発者に向けたメッセージ より)
Twitterのアカウントを作成
アカウントが無い人はアカウントを作成
作成にはEmailアドレスが必要
Twitterの基本機能
トウィート – ユーザーからの140字以内の投稿
フォロー – 他のユーザーの投稿を自分のタイムラインで表示できるように、ユーザーを登録すること
リプライ- 他のユーザーに宛てた投稿のこと。「@ユーザー名 投稿」の書式で投稿すると、そのユーザー宛の返信扱いとなる
ダイレクトメッセージ – フォローされている特定のユーザーに、第三者から見ることができないメッセージを送る
リトウィート – 周知を目的とした公式RT（発言元がそのまま表示される）と、ユーザーが「RT @username 引用文」といった書式に編集して投稿する非公式RTがある
ハッシュタグ – 特定のトピックに関する投稿を、公式のTwitter検索から一覧して見ることができるように、キーワードの前に#を置いて投稿する
検索 – キーワードを含んだ投稿がリアルタイムで、タイムラインに表示される
授業のハッシュタグを使ってみる
この授業のハッシュタグを、「#idd_medilite」とする
全員で授業のハッシュタグに投稿してみる
検索で授業を履修している人のアカウントを抽出する
お互いにフォローしてみる
