SlideShare a Scribd company logo
メディア芸術基礎 II
HTML5とは何か?
HTML5、はじめの一歩
2013年9月9日、9月16日
多摩美術大学情報デザイン学科メディア芸術コース
担当:田所淳
今日の内容
‣ オンラインポートフォリオ、再講評
‣ この授業でとりあげるHTML5に至る歴史的な経緯の整理
‣ HTML5とは何なのか?
‣ 実例の紹介
‣ HTML5最初の一歩
‣ HTML5で導入されたの新しい要素でWebページを作成
‣ HTML5のページをCSSでレイアウト
‣ CSS3を使用して、様々なデザイン効果を加える
オンラインポートフォリオ再講評
オンラインポートフォリオ再講評
‣ 以下の項目を確認しながら、みなさんのオンラインポートフォ
リオを順番に見ていきます!
‣ 授業で制作した作品は、全てオンライン・ポートフォリオで閲
覧できるように
‣ 大学の授業以外で作成した作品も積極的に掲載
‣ 著作権的に問題のある素材(他人の写真、CDからリッピングし
た音楽)などは全て削除
‣ リンク切れのメニューなどはないように
「HTML5」とは何か?
HTML5とは何か?
‣ HTMLの新バージョン、HTML5とは何なのか?
HTML5とは何か?
‣ HTMLのテクノロジの変遷
‣ 1991 - HTML
‣ 1994 - HTML2
‣ 1996 - CSS1 + JavaScript
‣ 1997 - HTML4
‣ 1998 - CSS2
‣ 2000 - XHTML1
‣ 2005 - Ajax (Asynchronous JavaScript + XML)
‣ 2009 - HTML5
HTML5とは何か?
‣ 参考:HTML5までに至るバージョンの変遷
‣ 最大の変化をひとことで言うと…
‣ Web「文書」から「アプリケーションへ」
HTML5とは何か?
文書
メーラー、地図、
ムービープレーヤー、
スケジューラー など
HTML5とは何か?
‣ 例:Google+
HTML5とは何か?
‣ 例:ブラウザやウェブについて知っておきたい20のこと
‣ http://www.20thingsilearned.com/ja-JP
HTML5とは何か?
‣ The Evolution of Web - Webの進化
‣ http://www.evolutionoftheweb.com/
HTML5とは何か?
‣ 厳密に定義は、いろいろな意見が…
‣ 参考:どこまでがHTML5なの?
‣ http://www.publickey1.jp/blog/10/html5_9.html
広義のHTML5と狭義のHTML5
‣ この授業では「広義のHTML5」をHTML5として解説します
‣ Webアプリケーションを実現するための技術全般として
広義のHTML5
狭義のHTML5
HTML5の主な機能
‣ (広義の) HTML5の主な機能
‣ http://www.w3.org/html/logo/#the-technology
‣ セマンティクス
‣ オフラン、ストレージ
‣ デバイスアクセス
‣ コネクティビティー
‣ マルチメディア
‣ グラフィクス、エフェクト
‣ パフォーマンス、インテグレーション
‣ CSS3
‣ セマンティクス(意味)によるマークアップ
‣ 様々な新要素の追加
‣ <section>, <header>, <footer>, <nav>, <article>, <aside>,
<figure>, <mark>, <time>, <video>, <audio> etc...
セマンティクス
セマンティクス
‣ 意味構造の記述の変化
body
div id="header"
div id="footer"
div
id="sidebar"
div id="content"
div class="article"
div class="article"
body
header
footer
nav section
article
article
HTML4 HTML5
オフライン & ストレージ
‣ PCだけでなくタブレットやモバイル端末が重要となった今、
常にネットワークに接続されているとは限らない
‣ ネットワークがオフラインでもページを閲覧できる仕組み
‣ ブラウザ側にデータを蓄積する
‣ オフラインでも使用可能なWebアプリを構築可能
‣ デモ:WebStorageタイマー - 最初に開いた時間を記憶
オフライン & ストレージ
デバイスアクセス
‣ 様々なデバイスが活用可能に
‣ Geolocation:希望すれば自身の場所を web アプリケーション
に通知することができるように
‣ カメラ入力 / 音声入力
‣ 映像や音声によるコントロール
‣ Geolocationデモ (iPadからアクセスした状態)
‣ http://html5demos.com/geo
デバイスアクセス
‣ ファイルアクセス - Drag & Dropでファイルを追加するなど
‣ http://studio.html5rocks.com/#Photos
デバイスアクセス
コネクティビティー
‣ サーバーとのより効率的な接続
‣ リアルタイムに双方向通信を実現
‣ チャット
‣ オンラインゲーム
‣ ...etc.
リクエスト
プッシュ!
クライアント サーバー
プッシュ!
プッシュ!
コネクティビティー
‣ scrumblr. http://scrumblr.ca/
‣ ホワイトボードを共有しながら、みんなでブレスト
‣ WebGL水族館
‣ WebSocketを利用して、複数台のマシンのブラウザを同期
‣ http://www.youtube.com/watch?v=64TcBiqmVko&feature=fvsr
コネクティビティー
マルチメディア
‣ オーディオやビデオの取り扱いが容易に!!
‣ Webアプリの中に映像や音楽を盛り込める
‣ 細かなカスタマイズも
‣ ビデオ映像にリアルタイムにマスク処理
‣ http://www.apple.com/html5/showcase/video/
マルチメディア
マルチメディア
‣ The Conductor http://www.mta.me/
‣ ブラウザで音を奏でる作品
3D、グラフィクス、エフェクト
‣ 2D、3D、ベクターデータなど様々な形式の画像を表示
‣ Canvas:2Dグラフィクス、アニメーション
‣ WebGL:ブラウザ上で、3Dグラフィクスを表示
‣ SVG:ベクターデータ
‣ Canvas 2Dによるアニメーションのデモ
‣ http://yoppa.org/blog/2683.html
3D、グラフィクス、エフェクト
‣ Magic dust http://mrdoob.com/144/magic_dust
3D、グラフィクス、エフェクト
3D、グラフィクス、エフェクト
‣ Chrysaora http://chrysaora.com/
‣ CSSの表現力が、より豊かに
‣ Webfonts、コラム、透明度、角丸、グラデーション、ドロッ
プシャドウ、反射、トランジション(アニメーション)、回転・
移動、
‣ HTML Rocks - CSS3
CSS3、スタイリング
‣ CSS3 Playgound - CSS3の実験場
‣ http://css3.mikeplate.com/
CSS3、スタイリング
パフォーマンス、インテグレーション
‣ Webアプリを高速化する様々な技術
‣ Web Workers:ブラウザ上で並列処理
‣ CSSのセレクタの進化
‣ ブラウザのヒストリ情報を操作 ...etc
‣ Webアプリをより高速に、快適にするための基礎技術の発展
Chrome Experiments #500
‣ http://500.chromeexperiments.com/
‣ Chrome Experimentsにピックアップされた500のサイト
まとめ
‣ HTML5の普及によってWebのユーザ体験は大きく変化する
‣ Webブラウザ自体がアプリケーションのプラットフォームへ
‣ ブラウザがOSに - Chrome OS
‣ 「Web表現」に求められるスキルも時代とともに変化
‣ この授業では、新たな技術を積極的に活用して、表現する手法
について学んでいきたい
HTML5 はじめの一歩
HTML5 はじめの一歩
‣ HTML5から導入された新しい要素を使用して、HTML5のペー
ジを作成してみる
‣ CSSで作成したHTML5のページを構造に即してレイアウト
‣ CSS3に導入された様々な表現手法を試してみる
HTML5 はじめの一歩
‣ 作成するページのイメージ
‣ 上下にヘッダーとフッター、左にナビゲーション右に複数記事
からなるメインコンテンツ
HTML5 はじめの一歩
‣ HTML5以前 (HTML4、XHTML1) でのやりかた
‣ div要素を使用して、ページを構造の単位ごとに分割
‣ それぞれのdiv要素にid属性、またはclass属性を付与
‣ 属性の名前から、CSSからそれぞれの要素へアクセス
‣ CSSでレイアウトや個別のデザインを記述
HTML5 はじめの一歩
‣ HTML5以降では、意味(セマンティクス)によるマークアップが
可能となる
‣ HTML5のページの構造を指定する要素
‣ section: 本の一部あるいは章、章のセクション、あるいは
基本的に HTML 4 で独自の見出しを持つすべてのもの
‣ header: ページに表示されるページ・ヘッダー、head 要素
とは全く意味合いが違うので注意
‣ footer: 細かい文字での説明が入るページ・フッター、
Email・メッセージの署名などが入る
‣ nav: 他のページへのリンクの集まり
‣ article: ブログや Web マガジン、一覧記事などに掲載され
ている個々のエントリー
HTML5 はじめの一歩
‣ HTML4、XHTML1でのマークアップ
HTML5 はじめの一歩
‣ HTML5ではこうなる!
HTML5 はじめの一歩
‣ 実際にHTML5を記述するための雛形を用意する
<!DOCTYPE html>
<html lang="ja">
! <head>
! ! <meta charset="utf-8" />
! ! <title>HTML5とCSS3によるページサンプル</title>
! </head>
! <body>
! ! <h1>HTML5 + CSS3, Layout Sample</h1>
! ! <h2>Media Literacy 2011, Tama Art University</h2>
! ! <ul>
! ! ! <li><a href="#">Home</a></li>
! ! ! <li><a href="#">Menu 1</a></li>
! ! ! <li><a href="#">Menu 2</a></li>
! ! ! <li><a href="#">Menu 3</a></li>
! ! </ul>
! ! <h2>このサイトについて</h2>
! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら…</p>
! ! <h3>HTML5とCSS3による豊かな表現</h3>
! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら…</p>
! ! <h2>さらに別の記事</h2>
! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら…</p>
HTML5 はじめの一歩
‣ 実際にHTML5を記述するための雛形を用意する (つづき)
! ! <h2>Navigation</h2>
! ! <ul>
! ! ! <li><a href="#">example 1 </a></li>
! ! ! <li><a href="#">example 2 </a></li>
! ! ! <li><a href="#">example 3 </a></li>
! ! ! <li><a href="#">example 4 </a></li>
! ! ! <li><a href="#">example 5 </a></li>
! ! ! <li><a href="#">example 6 </a></li>
! ! ! <li><a href="#">example 7 </a></li>
! ! ! <li><a href="#">example 8 </a></li>
! ! </ul>
! ! <p>This site is licensed under a Creative Commons License.</p>
! </body>
</html>
HTML5 はじめの一歩
‣ このページの構造
‣ ヘッダー
‣ 大見出し h1
‣ 中見出し h2
‣ ヘッダーメニュー ul, li
‣ セクション
‣ 記事
‣ 大見出し h1
‣ 段落 p
‣ 中見出し h2
‣ 段落 p
‣ 記事
‣ 大見出し h1
‣ 段落 p
‣ ナビゲーション
‣ 大見出し h1
‣ ナビゲーションメニュー ul, li
‣ フッター
‣ 段落
HTML5 はじめの一歩
‣ ブラウザで表示
HTML5 はじめの一歩
‣ このページをHTML5に書き換えていく
‣ 意味の構造(セマンティクス)をHTML5でマークアップ
‣ ヘッダー → header要素
‣ 見出しのまとまり → hgroup要素
‣ 個別の記事 → article要素
‣ ナビゲーション → nav要素
‣ フッター → footer要素
HTML5 はじめの一歩
‣ HTML5で構造化したサンプル
<!DOCTYPE html>
<html lang="ja">
! <head>
! ! <meta charset="utf-8" />
! ! <title>HTML5とCSS3によるページサンプル</title>
! ! <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
! </head>
! <body>
! ! <header>
! ! ! <hgroup>
! ! ! ! <h1>HTML5 + CSS3, Layout Sample</h1>
! ! ! ! <h2>Media Literacy 2011, Tama Art University</h2>
! ! ! </hgroup>
! ! ! <ul>
! ! ! ! <li><a href="#">Home</a></li>
! ! ! ! <li><a href="#">Menu 1</a></li>
! ! ! ! <li><a href="#">Menu 2</a></li>
! ! ! ! <li><a href="#">Menu 3</a></li>
! ! ! </ul>
! ! </header>
! ! <div id="main">
! ! ! <article>
! ! ! ! <h1>このサイトについて</h1>
! ! ! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさを…</p>
! ! ! ! <h2>HTML5とCSS3による豊かな表現</h2>
! ! ! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさを…</p>
HTML5 はじめの一歩
‣ HTML5で構造化したサンプル (つづき)
! ! ! </article>
! ! ! <article>
! ! ! ! <h1>さらに別の記事</h1>
! ! ! ! <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさを…</p>
! ! ! </article>
! ! </div>
! ! <nav>
! ! ! <h1>Navigation</h1>
! ! ! <ul>
! ! ! ! <li><a href="#">example 1 </a></li>
! ! ! ! <li><a href="#">example 2 </a></li>
! ! ! ! <li><a href="#">example 3 </a></li>
! ! ! ! <li><a href="#">example 4 </a></li>
! ! ! ! <li><a href="#">example 5 </a></li>
! ! ! ! <li><a href="#">example 6 </a></li>
! ! ! ! <li><a href="#">example 7 </a></li>
! ! ! ! <li><a href="#">example 8 </a></li>
! ! ! </ul>
! ! </nav>
! ! <footer>
! ! ! <p>This site is licensed under a Creative Commons License</p>
! ! </footer>
! </body>
</html>
HTML5 はじめの一歩
‣ HTML5で構造化したページをブラウザで開いてみる
‣ …見た目には変化なし → 何故か?
‣ HTML5の構造化要素は文章の区分をマークアップするだけ
‣ 意味構造を受けて、どのようにレイアウトするのかは、いまま
でのHTMLと同様にスタイルシートを使用
HTML5 はじめの一歩
‣ CSSを適用するためhead要素に追加
‣ CSSへのリンクを記述:style.css
‣ Internet Explorer対策
‣ IEのHTML5対応はあまり良くない…
‣ IE対策のために、html5shimというIEをHTML 5に対応させる
ためのJavaScript (html5.js) を利用
‣ http://code.google.com/p/html5shim/
HTML5 はじめの一歩
‣ head要素は以下のようになる
<!DOCTYPE html>
<html lang="ja">
! <head>
! ! <meta charset="utf-8" />
! ! <title>HTML5とCSS3によるページサンプル</title>
! ! <!--[if lt IE 9]>
! ! <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
! ! <![endif]-->
! ! <link rel="stylesheet" href="style.css" />
! ! <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
! ! ! </head>
! <!-- 以下省略 -->
HTML5 はじめの一歩
‣ ページのレイアウトをCSSで記述
body {
width:960px;
margin:20px auto;
}
header, nav, footer, #main {
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;
}
HTML5 はじめの一歩
‣ ページのレイアウトをCSSで記述 (つづき)
#main {
float:right;
width:620px;
}
footer {
clear:both !important;
text-align: center;
}
HTML5 はじめの一歩
‣ ブラウザで確認してみる!
HTML5 はじめの一歩
‣ CSS3の視覚効果を利用する
‣ CSS3では、以前のバージョンに比べて大幅に機能が強化
‣ Webfonts、コラム、透明度、角丸、グラデーション、ドロッ
プシャドウ、反射、トランジション(アニメーション)、回転・
移動、
‣ HTML Rocks - CSS3
‣ CSS3 Playgound - CSS3の実験場
‣ http://css3.mikeplate.com/
HTML5 はじめの一歩
Text
HTML5 はじめの一歩
‣ CSS3を活用してみる (1 / 6)
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, #main, footer {
display:block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 0px 4px #666;
HTML5 はじめの一歩
‣ CSS3を活用してみる (2 / 6)
-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;
}
HTML5 はじめの一歩
‣ CSS3を活用してみる (3 / 6)
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;
}
HTML5 はじめの一歩
‣ CSS3を活用してみる (4 / 6)
nav {
float:right;
width:200px;
}
nav h1 {
font-size:1.4em;
}
#main {
float:right;
width:656px;
text-align:left;
margin-bottom:10px;
}
#main 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;
}
HTML5 はじめの一歩
‣ CSS3を活用してみる (5 / 6)
#main ul {
padding:0px;
list-style:none;
border-top:1px solid #e7e2d7;
margin:14px 0px;
}
#main li {
margin:0px;
padding:0px;
list-style:none;
}
#main li a:link, #main li a:visited {
float:left;
width:96%;
padding:3px 1%;
border-bottom:1px solid #e7e2d7;
}
#main li a:hover {
background:#f2f1ec;
}
#main p {
font-size:0.9em;
}
article {
margin:0 0 30px 0;
}
HTML5 はじめの一歩
‣ CSS3を活用してみる (5 / 6)
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;
}
HTML5 はじめの一歩
‣ CSS3を適用した結果!!
HTML5 はじめの一歩
‣ まとめ
‣ 今回の授業、HTML5とCSS3の導入
‣ 構造化のための新要素を利用
‣ HTMLに意味要素を与え、それを利用してCSS3でレイアウトや
デザインを行う方法
‣ しかし、HTML5 で可能となったことはより広範囲に渡る
‣ 次回はより動的な表現についてとりあげいきたい

More Related Content

What's hot

使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
 
芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門
Atsushi Tadokoro
 
メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門
Atsushi Tadokoro
 
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマいちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
Hideki MACHIDA
 
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
 
Html講習会資料
Html講習会資料Html講習会資料
Html講習会資料
竹島 泉
 
Web Platform -- Moving Forward!
Web Platform -- Moving Forward!Web Platform -- Moving Forward!
Web Platform -- Moving Forward!
Masataka Yakura
 
HTML5 & The Web Platform
HTML5 & The Web PlatformHTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
 
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
Mitsuo Kawashima
 
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろうメンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
 
Style Guide活用のススメ
Style Guide活用のススメStyle Guide活用のススメ
Style Guide活用のススメ
Shigeki Ohtsuki
 
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解するWordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Takashi Uemura
 
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
Shinichi Nishikawa
 
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
Hiroyuki Ogawa
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
Shinichi Nishikawa
 
今さら聞けないWordPressのあんなことこんなこと [WCAN 2012 Autumn]
今さら聞けないWordPressのあんなことこんなこと [WCAN 2012 Autumn]今さら聞けないWordPressのあんなことこんなこと [WCAN 2012 Autumn]
今さら聞けないWordPressのあんなことこんなこと [WCAN 2012 Autumn]
takashi ono
 
1日でマスターするWordpress講座
1日でマスターするWordpress講座1日でマスターするWordpress講座
1日でマスターするWordpress講座
光利 吉田
 
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
 
マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後
Akira Inoue
 

What's hot (20)

使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
 
芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門
 
メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門
 
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマいちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
 
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
 
Html講習会資料
Html講習会資料Html講習会資料
Html講習会資料
 
Web Platform -- Moving Forward!
Web Platform -- Moving Forward!Web Platform -- Moving Forward!
Web Platform -- Moving Forward!
 
HTML5 & The Web Platform
HTML5 & The Web PlatformHTML5 & The Web Platform
HTML5 & The Web Platform
 
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
 
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろうメンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
 
HTML
HTMLHTML
HTML
 
Style Guide活用のススメ
Style Guide活用のススメStyle Guide活用のススメ
Style Guide活用のススメ
 
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解するWordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
 
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
 
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
 
今さら聞けないWordPressのあんなことこんなこと [WCAN 2012 Autumn]
今さら聞けないWordPressのあんなことこんなこと [WCAN 2012 Autumn]今さら聞けないWordPressのあんなことこんなこと [WCAN 2012 Autumn]
今さら聞けないWordPressのあんなことこんなこと [WCAN 2012 Autumn]
 
1日でマスターするWordpress講座
1日でマスターするWordpress講座1日でマスターするWordpress講座
1日でマスターするWordpress講座
 
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
 
マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後
 

Viewers also liked

WF4 + WMI + PS + αで運用管理
WF4 + WMI + PS + αで運用管理WF4 + WMI + PS + αで運用管理
WF4 + WMI + PS + αで運用管理
Tomoyuki Obi
 
Perl.Hacks.On.Vim Perlchina
Perl.Hacks.On.Vim PerlchinaPerl.Hacks.On.Vim Perlchina
Perl.Hacks.On.Vim Perlchina
guestcf9240
 
Introduction To Managing VMware With PowerShell
Introduction To Managing VMware With PowerShellIntroduction To Managing VMware With PowerShell
Introduction To Managing VMware With PowerShell
Hal Rottenberg
 
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版
You_Kinjoh
 
関西Vim勉強会#5 vimrcの書き方
関西Vim勉強会#5 vimrcの書き方関西Vim勉強会#5 vimrcの書き方
関西Vim勉強会#5 vimrcの書き方
tsukkee _
 
Plack perl superglue for web frameworks and servers
Plack perl superglue for web frameworks and serversPlack perl superglue for web frameworks and servers
Plack perl superglue for web frameworks and servers
Tatsuhiko Miyagawa
 
Cactiでのcliツールについて
CactiでのcliツールについてCactiでのcliツールについて
Cactiでのcliツールについて
Akio Shimizu
 
開発者のための最新グループポリシー活用講座
開発者のための最新グループポリシー活用講座開発者のための最新グループポリシー活用講座
開発者のための最新グループポリシー活用講座
junichi anno
 
Phreebird Suite 1.0: Introducing the Domain Key Infrastructure
Phreebird Suite 1.0:  Introducing the Domain Key InfrastructurePhreebird Suite 1.0:  Introducing the Domain Key Infrastructure
Phreebird Suite 1.0: Introducing the Domain Key Infrastructure
Dan Kaminsky
 
Vmware esx top commands doc 9279
Vmware esx top commands doc 9279Vmware esx top commands doc 9279
Vmware esx top commands doc 9279
logicmantra
 
PowerShellを使用したWindows Serverの管理
PowerShellを使用したWindows Serverの管理PowerShellを使用したWindows Serverの管理
PowerShellを使用したWindows Serverの管理
junichi anno
 
グループポリシーでWindowsファイアウォール制御 120602
グループポリシーでWindowsファイアウォール制御 120602グループポリシーでWindowsファイアウォール制御 120602
グループポリシーでWindowsファイアウォール制御 120602
wintechq
 
開発者のためのActive Directory講座
開発者のためのActive Directory講座開発者のためのActive Directory講座
開発者のためのActive Directory講座
junichi anno
 
Windows スクリプトセミナー 基本編
Windows スクリプトセミナー 基本編Windows スクリプトセミナー 基本編
Windows スクリプトセミナー 基本編
junichi anno
 
VMworld 2013: PowerCLI Best Practices - A Deep Dive
VMworld 2013: PowerCLI Best Practices - A Deep DiveVMworld 2013: PowerCLI Best Practices - A Deep Dive
VMworld 2013: PowerCLI Best Practices - A Deep Dive
VMworld
 
Building vSphere Perf Monitoring Tools
Building vSphere Perf Monitoring ToolsBuilding vSphere Perf Monitoring Tools
Building vSphere Perf Monitoring Tools
Pablo Roesch
 
ESX performance problems 10 steps
ESX performance problems 10 stepsESX performance problems 10 steps
ESX performance problems 10 steps
Concentrated Technology
 
Windows スクリプトセミナー WMI編 VBScript&WMI
Windows スクリプトセミナー WMI編 VBScript&WMIWindows スクリプトセミナー WMI編 VBScript&WMI
Windows スクリプトセミナー WMI編 VBScript&WMI
junichi anno
 
Python for Penetration testers
Python for Penetration testersPython for Penetration testers
Python for Penetration testers
Christian Martorella
 
Windows PowerShell 2.0 の基礎知識
Windows PowerShell 2.0 の基礎知識Windows PowerShell 2.0 の基礎知識
Windows PowerShell 2.0 の基礎知識
shigeya
 

Viewers also liked (20)

WF4 + WMI + PS + αで運用管理
WF4 + WMI + PS + αで運用管理WF4 + WMI + PS + αで運用管理
WF4 + WMI + PS + αで運用管理
 
Perl.Hacks.On.Vim Perlchina
Perl.Hacks.On.Vim PerlchinaPerl.Hacks.On.Vim Perlchina
Perl.Hacks.On.Vim Perlchina
 
Introduction To Managing VMware With PowerShell
Introduction To Managing VMware With PowerShellIntroduction To Managing VMware With PowerShell
Introduction To Managing VMware With PowerShell
 
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版
 
関西Vim勉強会#5 vimrcの書き方
関西Vim勉強会#5 vimrcの書き方関西Vim勉強会#5 vimrcの書き方
関西Vim勉強会#5 vimrcの書き方
 
Plack perl superglue for web frameworks and servers
Plack perl superglue for web frameworks and serversPlack perl superglue for web frameworks and servers
Plack perl superglue for web frameworks and servers
 
Cactiでのcliツールについて
CactiでのcliツールについてCactiでのcliツールについて
Cactiでのcliツールについて
 
開発者のための最新グループポリシー活用講座
開発者のための最新グループポリシー活用講座開発者のための最新グループポリシー活用講座
開発者のための最新グループポリシー活用講座
 
Phreebird Suite 1.0: Introducing the Domain Key Infrastructure
Phreebird Suite 1.0:  Introducing the Domain Key InfrastructurePhreebird Suite 1.0:  Introducing the Domain Key Infrastructure
Phreebird Suite 1.0: Introducing the Domain Key Infrastructure
 
Vmware esx top commands doc 9279
Vmware esx top commands doc 9279Vmware esx top commands doc 9279
Vmware esx top commands doc 9279
 
PowerShellを使用したWindows Serverの管理
PowerShellを使用したWindows Serverの管理PowerShellを使用したWindows Serverの管理
PowerShellを使用したWindows Serverの管理
 
グループポリシーでWindowsファイアウォール制御 120602
グループポリシーでWindowsファイアウォール制御 120602グループポリシーでWindowsファイアウォール制御 120602
グループポリシーでWindowsファイアウォール制御 120602
 
開発者のためのActive Directory講座
開発者のためのActive Directory講座開発者のためのActive Directory講座
開発者のためのActive Directory講座
 
Windows スクリプトセミナー 基本編
Windows スクリプトセミナー 基本編Windows スクリプトセミナー 基本編
Windows スクリプトセミナー 基本編
 
VMworld 2013: PowerCLI Best Practices - A Deep Dive
VMworld 2013: PowerCLI Best Practices - A Deep DiveVMworld 2013: PowerCLI Best Practices - A Deep Dive
VMworld 2013: PowerCLI Best Practices - A Deep Dive
 
Building vSphere Perf Monitoring Tools
Building vSphere Perf Monitoring ToolsBuilding vSphere Perf Monitoring Tools
Building vSphere Perf Monitoring Tools
 
ESX performance problems 10 steps
ESX performance problems 10 stepsESX performance problems 10 steps
ESX performance problems 10 steps
 
Windows スクリプトセミナー WMI編 VBScript&WMI
Windows スクリプトセミナー WMI編 VBScript&WMIWindows スクリプトセミナー WMI編 VBScript&WMI
Windows スクリプトセミナー WMI編 VBScript&WMI
 
Python for Penetration testers
Python for Penetration testersPython for Penetration testers
Python for Penetration testers
 
Windows PowerShell 2.0 の基礎知識
Windows PowerShell 2.0 の基礎知識Windows PowerShell 2.0 の基礎知識
Windows PowerShell 2.0 の基礎知識
 

Similar to メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩

Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolist
Shinichiro Kumeuchi
 
HTML5の話
HTML5の話HTML5の話
HTML5の話
Hiroyuki Nozaki
 
GDG Women DevfestW
GDG Women DevfestWGDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
 
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Muyuu Fujita
 
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
Hideki Hashizume
 
141115 making web site
141115 making web site141115 making web site
141115 making web site
Himi Sato
 
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目
Takashi Endo
 
HTML5 for IA
HTML5 for IAHTML5 for IA
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発Twitterbootstrapでモック開発
Twitterbootstrapでモック開発
Sosuke Kimura
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
Sho Ito
 
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
DIVE INTO CODE Corp.
 
芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
芸術情報演習デザイン(Web)  第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ芸術情報演習デザイン(Web)  第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
Atsushi Tadokoro
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
 
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
Shinyu Murakami
 
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
情報編集(Web)  第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ情報編集(Web)  第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
Atsushi Tadokoro
 
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
 
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
Atsushi Tadokoro
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
 

Similar to メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩 (20)

Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolist
 
HTML5の話
HTML5の話HTML5の話
HTML5の話
 
GDG Women DevfestW
GDG Women DevfestWGDG Women DevfestW
GDG Women DevfestW
 
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
 
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
 
141115 making web site
141115 making web site141115 making web site
141115 making web site
 
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目
 
HTML5 for IA
HTML5 for IAHTML5 for IA
HTML5 for IA
 
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発Twitterbootstrapでモック開発
Twitterbootstrapでモック開発
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
 
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
 
芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
芸術情報演習デザイン(Web)  第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ芸術情報演習デザイン(Web)  第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
 
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
 
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
情報編集(Web)  第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ情報編集(Web)  第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
 
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
 
Java Script4
Java Script4Java Script4
Java Script4
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
 

More from Atsushi Tadokoro

「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
Atsushi Tadokoro
 
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめようプログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
Atsushi Tadokoro
 
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
Atsushi Tadokoro
 
coma Creators session vol.2
coma Creators session vol.2coma Creators session vol.2
coma Creators session vol.2
Atsushi Tadokoro
 
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
Atsushi Tadokoro
 
Interactive Music II Processingによるアニメーション
Interactive Music II ProcessingによるアニメーションInteractive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
Atsushi Tadokoro
 
Interactive Music II Processing基本
Interactive Music II Processing基本Interactive Music II Processing基本
Interactive Music II Processing基本
Atsushi Tadokoro
 
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Atsushi Tadokoro
 
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Atsushi Tadokoro
 
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Atsushi Tadokoro
 
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描くiTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
Atsushi Tadokoro
 
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリメディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
Atsushi Tadokoro
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Atsushi Tadokoro
 
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
Atsushi Tadokoro
 
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3DプログラミングWebデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Atsushi Tadokoro
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Atsushi Tadokoro
 
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画するiTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
Atsushi Tadokoro
 
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替えMedia Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替え
Atsushi Tadokoro
 
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習  オリジナルの楽器を作ろう!Interactive Music II SuperCollider実習  オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Atsushi Tadokoro
 

More from Atsushi Tadokoro (20)

「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
 
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめようプログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
 
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
 
coma Creators session vol.2
coma Creators session vol.2coma Creators session vol.2
coma Creators session vol.2
 
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
 
Interactive Music II Processingによるアニメーション
Interactive Music II ProcessingによるアニメーションInteractive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
 
Interactive Music II Processing基本
Interactive Music II Processing基本Interactive Music II Processing基本
Interactive Music II Processing基本
 
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
 
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
 
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
 
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描くiTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
 
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリメディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
 
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
 
Tamabi media131118
Tamabi media131118Tamabi media131118
Tamabi media131118
 
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3DプログラミングWebデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
 
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画するiTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
 
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替えMedia Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替え
 
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習  オリジナルの楽器を作ろう!Interactive Music II SuperCollider実習  オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
 

メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩