2014年メディア工房勉強会　第1章「Webの仕組みとHTML5」

本ワークショップについて
 Webデザインに触れてみよう
 Webの最新技術、HTML5でアプリが作ってみよう
 目的
 Webに関する基本的な知識を習得し、
 Webサイトを作れるようになるだけでなく
 Webアプリも作ることができるようになる

関連授業
 1年次
 メディア実践
 HTML5でゲームを作る
 2年次
 Web制作
 Webサイト制作の企画から公開まで
 Webシステム
 サーバ側のプログラムを学ぶ

ワークショップの流れ
 2限
 Webの仕組み
 HTML、CSS、JavaScriptを学ぶ
 3限
 Webサイト制作の流れ
 Webデザイン
 4限
 Webアプリ制作環境
 アプリまわりの技術
 ニコニコ動画新検索APIを使ってみよう

簡単に自己紹介
 遠藤崇
 D科3年
 デザイナーとコーダーで迷子やってる
 twitter.com/mikankari
 facebook.com/mikankari
 代表作
 「シに恋」即死系学園ADV
 「nikokara5」カラオケシステム

第1章Webの仕組みとHTML5

Webの仕組み
クライアント
（Webブラウ
ザ）
サーバ
（Webサーバソフトウェア）
インターネット
このページください
どうぞ、Webページです
Web
ページ

Webの仕組み
クライアント
（Webブラウ
ザ）
サーバ
（Webサーバソフトウェア）
インターネット
Web
ページ
クライアントサイド技術
• HTML・・・文書
• CSS・・・デザイン
• JavaScript・・・簡易プログラム
• Flash・・・動的コンテンツ
サーバサイド技術
• PHPなど・・・プログラム
• SQL・・・データベース
＼
見
れ
た／

Webの仕組み
Webページ
Webページは「HTMLで書かれている文書ファイル」
私たちが作るのはこれです

HTMLとは
 Webページを記述するための言語
 HyperText Markup Language
 ハイパーテキスト
 リンクを使って他のページと結び付けられる
 画像などを埋め込むことができる
 マークアップ言語
 見出しや段落などの文書構造の指定ができる
 マークアップで（目印を付けて）指定を行う

HTMLの例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN">
<html>
<head>
<title>ここはページのタイトルです</title>
</head>
<body>
<h1>ここは見出しです</h1>
<p>ここは段落です</p>
</body>
</html>

HTMLの親戚
 HTML（HTML4.01）
 従来のWebページ
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 XHTML（XHTML1.0 or XHTML 1.1 or XHTML 2.0）
 最近のWebページ
 HTMLよりも文法規則が厳しい
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 HTML5
 最新のWebページとWebアプリケーション
 多数の機能強化
 <!DOCTYPE html>

HTML5とは
 狭義
 HTMLがバージョンアップしたもの
 広義
 HTMLがバージョンアップしたもの
 HTML4.01→HTML5
 CSSがバージョンアップしたもの
 CSS2→CSS3
 JavaScriptがすごくなったもの
 いくつかのJavaScript APIが追加される
 その他Webまわりの新技術
 SVGやWebフォントなど

HTML5の利点
 HTML5のいいところ
 文書構造をよりわかりやすく
 データ保存、ファイル操作
 GPS、カメラ、マイクの利用
 通信機能の強化
 動画や音声の再生
 グラフィックス機能の強化
 並列処理
 デザインの幅が広がる
 Flashなどのプラグインをインストールさせる必要がない

HTML5の欠点
 HTML5で気を付けたいこと
 まだ仕様が固まっていない
2008年に草案
2014年に正式勧告予
定
 一部対応していないブラウザがある
古いブラウザなど
 HTML5を書ける人が不足しているらしい
単にHTML5といっても
技術が多い

HTML5で遊んでみよう
 HTML5 and CSS3 - Adobe - The Expressive Web –
Beta
 http://beta.theexpressiveweb.com/
 Adobe社が出したHTML5体験サイト
 Sketch Toy: Draw sketches and share replays with
friends!
 http://sketchtoy.com/
 絵が描ける、共有機能も
 Andrew Hoyer | The Cloth Simulation
 http://andrew-hoyer.com/experiments/cloth/
 布のシュミレーション

HTMLの書き方
<p>ここは段落です</p>
開始タグ終了タグ
<a href="index.html">ここはリンクです</a>
属性
<br />
終了タグがない要素もある
p要素
a要素
br要素

HTMLをさらに学びたい
 サイトのソースコードを見る
 サイトを表示→右クリックで「ソースを表示」
 解説サイトを見る
HTMLクリックリファレンス
http://www.htmq.com/index.htm
とほほのWWW入門
http://www.tohoho-web.com/www.htm

CSSとは
 Webページのデザインを記述するための言語
 Cascading Style Sheets
 スタイルシート
 ページの見栄えが指定できる
 色・枠・レイアウト・装飾など
 HTMLとは別に書く
 「意味付け」と「見栄え」を分離するため
Web
ページ
（HTML）
デザイン
（CSS）

CSSの用意
 別ファイル（CSSファイル）
<link rel="stylesheet" type="text/css" href="CSSファイ
ルが置いてある場所" />
 HTMLファイルに埋め込む
<style type="text/css">
CSSの内容
</style>
☆いずれもHTMLのhead要素の中に置く

CSSの書き方
table{ text-align: center; }
セレクタプロパティ
HTMLの要素
h1.name{ font-size:
<h1 class=“name“>ここ16px; }
</h1>
<h1 class=“name“>ここ
</h1>
div#divsample{ border: 1px dashed #c0c0c0; }
<div id=“divsample“>ここ</div>
単位付ける
複数の要素に
１つの要素に

CSS3について
CSS3では
 色・枠・レイアウト・装飾などだけでなく
 2D、3D変形
 アニメーション
 透過
 グラデーション
などが追加された

Webページを作ってみよう
 用意するもの
 テキストエディタ
 ブラウザ
 作るもの
 PC向けWebサイトで一般的な固定レイアウトのページ

JavaScriptとは
 Webページの簡易プログラムを記述する言語
 JavaScript
 スクリプト
 Webページに動きを持たせることができる
 テキストファイルを1行ずつ解析してプログラムを実行する
 HTMLとは別に書く
 「意味付け」と「プログラム」を分離するため
Web
ページ
（HTML）
デザイン
（CSS）
プログラム
（JavaScrip
t）

JavaScriptとJavaの違い
 よく同じものと勘違いされるが、まったくの別物
 JavaScript
 Webページ上で動く
 文法規則がゆるい
 コンパイル（機械語への翻訳）の必要が無い
 Java
 デスクトップ上で動く
 文法規則が厳しい
 コンパイルの必要あり、でないと動かない
 2年後期の「応用プログラミングB」でお世話になる

JavaScriptができること
 状況に応じてWebページの一部を書き換える
 フォームの入力をチェックをする
 作ろうと思えばゲームも作れる
 HTML5のJavaScript API
 データ保存、ファイル操作
 GPS、カメラ、マイクの利用
 通信機能の強化
 動画や音声の再生
 グラフィックス機能の強化
 並列処理
Webアプリがさらに作りやすくなった

JavaScriptの用意
 別ファイル（JSファイル）
<script type="text/javascript" src="JSファイルが置いて
ある場所"></script>
 HTMLファイルに埋め込む
<script type="text/javascript">
JavaScriptの内容
<script>
☆HTMLのhead要素の中にもbody要素の中にも置ける

JavaScriptのプロパティ
 プロパティ
 データ、変数みたいなもの
var test;
プロパティ名
宣言
代入test = 5;
整数の他にも実数や文字列など
が代入できる
まとめて書くとvar test = 5;

JavaScriptのメソッド
 メソッド
 処理、関数みたいなもの
function test(args1, args2){
処理内容
}
メソッド名引数
定義
呼出しtest(5,
6);

JavaScriptのオブジェクト
 オブジェクト
 プロパティ（データ）とメソッド（処理）をまとめたもの
他のオブジェクト
プロパティ
プロパティ
メソッド
（株）アンク『Javaの絵本』P61より
 オブジェクト内のプロパティ、メソッド、オブジェクトにアク
セスするためには「.」（ドット）を使う

JavaScriptのオブジェクト
 JavaScriptはなんでもオブジェクトで扱う性質がある
document.lastModified
Documentオブジェクト
ページを扱うオブジェクト
"文字列です".length
Stringオブジェクト
文字列を扱うオブジェクト
66.toString(16)
Numberオブジェクト
数字を扱うオブジェクト
(function(){ a =
5; }).arguments
Functionオブジェクト
メソッドを扱うオブジェクト

JavaScriptの制御文
 四則計算や論理演算、条件分岐や繰り返しは、
 Processing言語、C言語、Java言語などとほとんど同じ
 JavaScript固有なもの
 for in 文…配列とfor文
 with 文…処理をまとめる

 配列とfor文
var test = [‘a‘, ‘b‘, ‘c‘]; // 配列を作成
for(var i in test){
alert(test[i]); // 配列の値を順に表示
}
 配列の変わった使い方
var test = []; // 空の配列を作成
test["miku"] = 3; // 添え字には文字列も使える
test["rin"] = 9;

 with文
alert(document.title);
alert(document.URL);
alert(document.lastModified);
with(document){
alert(title);
alert(URL);
alert(lastModified);
}

Webページの一部を書き換える
<div id=“output“></div>
var output = document.getElementById(“output“);
output.innerHTML = ‘こんにちは‘;
<div id=“output“>こんにちは</div>
☆HTMLが直接編集されるわけではない

イベント
 Event、できごと
 ボタンが押された、マウスポインタが画像の上に乗ったなど
HTMLタグにon + イベント名の属性をつける
<input type="button" value="PUSH!"
onclick="JavaScriptの内容" />

2014年メディア工房勉強会　第1章「Webの仕組みとHTML5」

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 2014年メディア工房勉強会　第1章「Webの仕組みとHTML5」

Similar to 2014年メディア工房勉強会　第1章「Webの仕組みとHTML5」 (20)

More from Takashi Endo

More from Takashi Endo (6)