Embed Size (px)
DESCRIPTION
2011-08-27 Tech Party 2011 in 北陸 https://atnd.org/events/18440
Citation preview
HTML5 on ASP.NET
2011/08/27小島 富治雄
小島 富治雄@Fujiwo福井コンピュータ株式会社Microsoft MVP C# (2005-2012)
自己紹介
HTML5 に興味を持っていただく
ASP.NET 開発環境で HTML5 を使う方法について知っていただく
本セッションのゴール
ASP.NET のトレンドVisual Studio で HTML5 を書くには
HTML5 とはHTML5 で追加されたタグHTML5 APIHTML5 on ASP.NETTips
アジェンダ
ASP.NET のトレンド
• HTML5 周辺◦ HTML 5◦ CSS 3◦ Web API
• ECMAScript◦ jQuery
• REST• RIA
Web 開発のトレンド
• Web フォーム vs. MVC• ASP.NET MVC 3
◦ “Razor”◦ HTML5 CSS3 対応プロジェクト
テンプレート◦ 最新 jQuery 対応◦ NuGet◦ Azure 対応
ASP.NET のトレンド
Visual Studio でHTML5 を書くには
HTML5 CSS3 対応プロジェクトテンプレート
最新 jQuery 対応
ASP.NET MVC 3
• ASP.NET MVC 3 Tools Update◦ Visual Studio 2010 のテンプレート
とツール
ASP.NET MVC 3
• 準備◦ HTML5 、 CSS ３対応
インテリセンス、文法チェック◦ jQuery 用コードスニペット
Visual Studio で HTML5
• HTML5 、 CSS3 対応インテリセンス、文法チェック
◦Web Standards Update for Microsoft Visual Studio 2010 SP1
VisuaL Studio 2010 SP1
◦ jQuery 用コードスニペット◦ jQuery
Cod Snippets for Visual Studio 2010
VisuaL Studio 2010 SP1
$(title).fadeOut(1000);$(title).fadeIn (1000);
• HTML5 、 CSS3 に対応• Expression
Web 4 Service Pack 1 Available for Download - MSDN Blogs◦ Microsoft Expression Web 4 Servic
e Pack 1
Expression Web
HTML5 とは
HTML5を学ぶなら必ず見ておきたいWEBサイト35選
HTML5の可能性を体験できる、すごいサイトのまとめ
HTML5で作られた美しいサイト12 | Web活メモ帳
HTML5 で作られたサイト
狭義の HTML 5 CSS 3
API
ECMAScript
広義の HTML 5
Open Web Technology Platform◦オープンかつ標準
2011/5/25 最終草案◦使い始めて良い◦2014 W3C 勧告 ( 予定 )
HTML5
各ブラウザの対応状況
HTML5 & CSS3 Support, Web Design Tools & Support - FindMeByIP - CSS3 & HTML5 Browser Supporthttp://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>
HTML5
<!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>
XHTML1.0
HTML5 で追加されたタグ
+ デモ
セマンティクス◦<section>◦<nav>◦<figure>◦<time>
HTML5
グラフィックス◦<canvas>
マルチメディア◦<audio>◦<video>
HTML5
コントロール◦<input>◦<progress>◦<meter>
UI◦<details>◦<menu>◦<command>
HTML5
• Ruby • MathML• SVG• WAI-AREA
HTML5
<ruby> 瓊脂 <rp> (</rp><rt> ところてん </rt><rp>)</rp></ruby> は <ruby> 石花菜 <rp> (</rp><rt> てんぐさ </rt><rp>)</rp></ruby> から作られる。
Ruby
<figure><img src="DSCF7297.JPG" width="240" height="180" alt=" かんぱーい !" /><figcaption> 先週のイベントの様子その 1</figcaption></figure>
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">
HTML5 Forms
テキスト ( 入力必須 ):<input type="text" required>
郵便番号 :<input type="text“pattern="¥d{3}¥-¥d{4}“title=" 郵便番号： 999-9999 形式で入力してください。">
HTML5 Forms
進捗 :<progress value="50" max="100"></progress>
メーター :<meter value="50.0" min="0" max="100" ></meter>
HTML5 Forms
二次元ラスター グラフィック◦高速描画◦アニメーション可◦三次元やベクター描画は SVG を使う
Canvas
<canvas width="300" height="300"></canvas>
Canvas
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);
Canvas 矩形描画
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();
Canvas パス描画
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();
Canvas 円描画
setTimeout() または setInterval()
Canvas アニメーション
var flops = 60;window.setInterval( function() { context.clearRect(0, 0, canvas.width, canvas.height); // 描画 },1000 / flops);
<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>
SVG
<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>
MathML
HTML5 API
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 が使えません。");}
Geolocation
// localStorage への格納var storage = localStorage;var value = "1"storage.setItem("A", value);
// localStorage からの取得var storage = localStorage;var value = storage.getItem("A");
Local Storage
スマートフォン
デモ
HTML5 on ASP.NET
デモ
HTML5 をレンダリングするサーバー コントロールを作成して貼る
ユーザー コントロール
JavaScript で直にサービスを呼び出す1. 「 AJAX 対応 WCF サービス」を作
成2. ASPX 側に ScriptManager を貼り、
サービスを指定3. JavaScript でサービスを new して
サービス内のメソッドを呼び出す
AJAX 対応 WCF サービス
// MyService.svc - MyService.cs[ServiceContract(Namespace = "MyServices")][AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class MyService { [OperationContract] public object MyMethod() { return 何かのデータ ; }}
AJAX 対応 WCF サービス
// 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>
AJAX 対応 WCF サービス
Tips
HTML5.JS◦ [参考]HTML5.jsの中身を見てみよう
HTML5 の IE9 未満（ IE8 以下）への対応
<!--[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; }
• JavaScriptで配列をLINQにより処理できるライブラリ「linq.js」を利用するには？
• neue cc - linq.js LT資料料
Linq to js
var result = Enumerable.From(jsonArray) .Where("$.Count > 5") .OrderByDescending("$.Count") .ThenBy("$.Name") .Select("$.Name") .ToArray();
Internet Explorer の「スクリプトのデバッグを使用しない (Internet Explorer) 」のチェックを外す
Internet Explorer のみVisual Studio でデバッグ実行
◦ブレークポイントやトレース実行
JavaScript デバッグ
もう HTML5 でVisual Studio は HTML5 エディターとしても既にいける
まとめ
Let’s enjoy HTML5on ASP.NET!
