HTML5 on ASP.NET

 小島富治雄
@Fujiwo
 福井コンピュータ株式会社
 Microsoft MVP C# (2005-2012)

HTML5 に興味を持って
いただく
ASP.NET 開発環境で
HTML5 を使う方法につ
いて知っていただく

 ASP.NET のトレンド
 Visual Studio でHTML5 を書くには
 HTML5 とは
 HTML5 で追加されたタグ
 HTML5 API
 HTML5 on ASP.NET
 Tips

• HTML5 周辺
◦ HTML 5
◦ CSS 3
◦ Web API
• ECMAScript
◦ jQuery
• REST
• RIA

• Web フォームvs. MVC
• ASP.NET MVC 3
◦ “Razor”
◦ HTML5 CSS3 対応プロジェクト
テンプレート
◦ 最新jQuery 対応
◦ NuGet
◦ Azure 対応

 HTML5 CSS3 対応
プロジェクト
テンプレート
 最新jQuery 対応

• ASP.NET MVC 3 Tools Update
◦ Visual Studio 2010 のテンプレート
とツール

• 準備
◦ HTML5、CSS３対応
 インテリセンス、文法チェック
◦ jQuery 用コードスニペット

• HTML5、CSS3対応
インテリセンス、文法チェック
◦Web Standards Update for Microsoft
Visual Studio 2010 SP1

◦ jQuery 用コードスニペット
◦ jQuery Cod Snippets for Visual
Studio 2010
$(title).fadeOut(1000);
$(title).fadeIn (1000);

• HTML5、CSS3 に対応
• Expression Web 4 Service Pack 1
Available for Download - MSDN
Blogs
◦ Microsoft Expression Web 4
Service Pack 1

 HTML5を学ぶなら必ず見ておきたい
WEBサイト35選
 HTML5の可能性を体験できる、すご
いサイトのまとめ
 HTML5で作られた美しいサイト12 |
Web活メモ帳

狭義のHTML 5 CSS 3
API
ECMAScript

 Open Web Technology Platform
◦オープンかつ標準
 2011/5/25 最終草案
◦ 使い始めて良い
◦2014 W3C勧告(予定)

 HTML5 & CSS3 Support, Web
Design Tools & Support -
FindMeByIP - CSS3 & HTML5
Browser Support
http://www.findmebyip.com/litmus/

<!DOCTYPE html>
<html lang=ja>
<head>
<meta charset=UTF-8>
<title>タイトル</title>
<link rel="stylesheet" href="style.css">
<script src="linq.js"></script>
</head>
<body>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<meta http-equiv="Content-Language" content="ja" />
<title>タイトル</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="linq.js"></script>
</head>
<body>

</body>
</html>

セマンティクス
◦<section>
◦<nav>
◦<figure>
◦<time>

グラフィックス
◦<canvas>
マルチメディア
◦<audio>
◦<video>

コントロール
◦<input>
◦<progress>
◦<meter>
UI
◦<details>
◦<menu>
◦<command>

• Ruby
• MathML
• SVG
• WAI-AREA

<ruby>瓊脂<rp> (</rp><rt>ところてん
</rt><rp>)</rp></ruby>は<ruby>石花
菜<rp> (</rp><rt>てんぐさ
</rt><rp>)</rp></ruby>から作られる。

<figure>
<img src="DSCF7297.JPG" width="240"
height="180" alt="かんぱーい!" />
<figcaption>先週のイベントの様子
その1</figcaption>
</figure>

 <video src="v.mp4" controls></video>
 <audio src="v.mp3" controls></audio>
<video autoplay="autoplay" loop="loop“
width="480" height="272">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<p>動画を再生するには、videoタグをサポートしたブラウ
ザが必要です。</p>
</video>

 検索: <input type="search">
 電話番号: <input type="tel">
 URL: <input type="url">
 Email: <input type="email">
 日付: <input type="date">
 時刻: <input type="time">
 数値: <input type="number">
 範囲: <input type="range">
 色: <input type="color">

 テキスト(入力必須):
<input type="text" required>
 郵便番号:
<input type="text“
pattern="¥d{3}¥-¥d{4}“
title="郵便番号：999-9999形式で入力してください。">

 進捗:
<progress value="50" max="100"></progress>
 メーター:
<meter value="50.0" min="0" max="100" ></meter>

二次元ラスターグラフィック
◦高速描画
◦アニメーション可
◦三次元やベクター描画はSVG
を使う

var canvas =
document.querySelector('canvas');
var context =
canvas.getContext('2d');
// 矩形描画
context.clearRect(0, 0, canvas.width,
canvas.height);
context.fillRect(50, 50, 200, 200);
context.strokeRect(20, 20, 260, 260);

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
// パス描画
context.beginPath();
context.moveTo(150, 30);
context.lineTo( 30, 270);
context.lineTo(270, 270);
context.closePath();
context.fillStyle= "Yellow";
context.fill();
context.strokeStyle= "Red";
context.stroke();

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
// 円描画
context.beginPath();
context.arc(150, 150, 50, 0, Math.PI * 2, true);
context.fillStyle = "Magenta";
context.fill();
context.strokeStyle = "Blue";
context.stroke();

 setTimeout() またはsetInterval()
var flops = 60;
window.setInterval(
function() {
context.clearRect(0, 0, canvas.width, canvas.height);
// 描画
},
1000 / flops);

// localStorage への格納
var storage = localStorage;
var value = "1"
storage.setItem("A", value);
// localStorage からの取得
var storage = localStorage;
var value = storage.getItem("A");

HTML5 をレンダリングする
サーバーコントロールを
作成して貼る

 JavaScript で直にサービスを呼び出す
1. 「AJAX 対応WCF サービス」を作成
2.ASPX 側にScriptManager を貼り、
サービスを指定
3. JavaScript でサービスをnew して
サービス内のメソッドを呼び出す

// MyService.svc - MyService.cs
[ServiceContract(Namespace = "MyServices")]
[AspNetCompatibilityRequirements(RequirementsMode =
AspNetCompatibilityRequirementsMode.Allowed)]
public class MyService {
[OperationContract]
public object MyMethod() {
return 何かのデータ;
}
}

// MyPage.aspx
<script>
onload = function() {
var service = new MyServices.MyService();
service.MyMethod(onSuccess, null, null);
}
function onSuccess(data) {
// data を描画
}
</script>
<asp:ScriptManager ID="scriptManager" runat="server">
<services>
<asp:servicereference Path="MyService.svc" />
</services>
</asp:ScriptManager>

 HTML5.JS
◦ [参考]HTML5.jsの中身を見てみよう

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary
{ display:block; }

• JavaScriptで配列をLINQにより処
理できるライブラリ「linq.js」を利
用するには？
• neue cc - linq.js LT資料料
var result = Enumerable.From(jsonArray)
.Where("$.Count > 5")
.OrderByDescending("$.Count")
.ThenBy("$.Name")
.Select("$.Name")
.ToArray();

 Internet Explorer の
「スクリプトのデバッグを使用しな
い(Internet Explorer)」
のチェックを外す
 Internet Explorer のみ
 Visual Studio でデバッグ実行
◦ ブレークポイントやトレース実行

もうHTML5 で
Visual Studio はHTML5
エディターとしても既にい
ける

HTML5 on ASP.NET

More Related Content

What's hot (20)

Similar to HTML5 on ASP.NET (20)

More from Fujio Kojima (20)

Recently uploaded (9)

HTML5 on ASP.NET