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

Similar to HTML5 on ASP.NET

More from Fujio Kojima

Recently uploaded

HTML5 on ASP.NET