More Related Content Similar to HTML5 on ASP.NET (20) More from Fujio Kojima (20) HTML5 on ASP.NET4. ASP.NET のトレンド
Visual Studio でHTML5 を書くには
HTML5 とは
HTML5 で追加されたタグ
HTML5 API
HTML5 on ASP.NET
Tips
6. • HTML5 周辺
◦ HTML 5
◦ CSS 3
◦ Web API
• ECMAScript
◦ jQuery
• REST
• RIA
7. • Web フォームvs. MVC
• ASP.NET MVC 3
◦ “Razor”
◦ HTML5 CSS3 対応プロジェクト
テンプレート
◦ 最新jQuery 対応
◦ NuGet
◦ Azure 対応
10. • ASP.NET MVC 3 Tools Update
◦ Visual Studio 2010 のテンプレート
とツール
11. • 準備
◦ HTML5、CSS3対応
インテリセンス、文法チェック
◦ jQuery 用コードスニペット
13. ◦ jQuery 用コードスニペット
◦ jQuery Cod Snippets for Visual
Studio 2010
$(title).fadeOut(1000);
$(title).fadeIn (1000);
14. • HTML5、CSS3 に対応
• Expression Web 4 Service Pack 1
Available for Download - MSDN
Blogs
◦ Microsoft Expression Web 4
Service Pack 1
18. Open Web Technology Platform
◦オープンかつ標準
2011/5/25 最終草案
◦ 使い始めて良い
◦2014 W3C勧告(予定)
20. HTML5 & CSS3 Support, Web
Design Tools & Support -
FindMeByIP - CSS3 & HTML5
Browser Support
http://www.findmebyip.com/litmus/
22. <!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>
23. <!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>
31. <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>
32. 検索: <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">
33. テキスト(入力必須):
<input type="text" required>
郵便番号:
<input type="text“
pattern="¥d{3}¥-¥d{4}“
title="郵便番号:999-9999形式で入力してください。">
34. 進捗:
<progress value="50" max="100"></progress>
メーター:
<meter value="50.0" min="0" max="100" ></meter>
37. 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);
38. 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();
39. 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();
40. setTimeout() またはsetInterval()
var flops = 60;
window.setInterval(
function() {
context.clearRect(0, 0, canvas.width, canvas.height);
// 描画
},
1000 / flops);
41. <svg width="540" height="200" viewBox="0 0 270 100" style="margin:-2em 0em -3em
0em">
<defs>
<radialGradient id="radial" cx="50%" cy="50%" fx="25%" fy="25%">
<stop offset="0%" stop-color="#60bafc" />
<stop offset="50%" stop-color="#409adc" />
<stop offset="100%" stop-color="#005a9c" />
</radialGradient>
<path id="curve" d="M18,60 C100,10 180,110 264,60" fill="none"/>
</defs>
<circle cx="138" cy="50" r="38" fill="url(#radial)" stroke="#005a9c" />
<text font-family="Verdana" font-size="20" fill="#ff9900">
<textPath xlink:href="#curve" method="stretch" style="visibility: visible;">Scalable
<tspan fill="white">Vector</tspan>
Graphics
</textPath>
</text>
</svg>
42. <math style="display:block">
<mi>t2</mi>
<mo>=</mo>
<mfrac>
<mi>t1</mi>
<msqrt><mrow>
<mn>1</mn>
<mo>-</mo>
<mfrac>
<msup>
<mi>v</mi>
<mn>2</mn>
</msup>
<msup>
<mi>C</mi>
<mn>2</mn>
</msup>
</mfrac>
</mrow></msqrt>
</mfrac>
</math>
44. function show(pos) {
var location ="<span>"+"緯度:" + pos.coords.latitude +
"</span>";
location += "<span>"+"経度:" + pos.coords.longitude +
"</span>";
document.getElementById("location").innerHTML =
location;
}
if (navigator.geolocation) {
window.alert("本ブラウザでGeolocation が使えます。");
window.navigator.geolocation.getCurrentPosition(show);
} else {
window.alert("本ブラウザではGeolocation が使えません。");
}
45. // localStorage への格納
var storage = localStorage;
var value = "1"
storage.setItem("A", value);
// localStorage からの取得
var storage = localStorage;
var value = storage.getItem("A");
49. JavaScript で直にサービスを呼び出す
1. 「AJAX 対応WCF サービス」を作成
2.ASPX 側にScriptManager を貼り、
サービスを指定
3. JavaScript でサービスをnew して
サービス内のメソッドを呼び出す
50. // MyService.svc - MyService.cs
[ServiceContract(Namespace = "MyServices")]
[AspNetCompatibilityRequirements(RequirementsMode =
AspNetCompatibilityRequirementsMode.Allowed)]
public class MyService {
[OperationContract]
public object MyMethod() {
return 何かのデータ;
}
}
51. // 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>
53. HTML5.JS
◦ [参考]HTML5.jsの中身を見てみよう
<!--[if lt IE 9]>
<script src=
"http://html5shiv.googlecode.com/svn/trunk/html5.js"
>
</script>
<![endif]-->
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary
{ display:block; }
55. Internet Explorer の
「スクリプトのデバッグを使用しな
い(Internet Explorer)」
のチェックを外す
Internet Explorer のみ
Visual Studio でデバッグ実行
◦ ブレークポイントやトレース実行