HTML5 Canvasで視覚画像ライブラリを作成する方法

今朝、メールを開いた後、Canvas要素を使用して画像ギャラリーを作成する興味深い方法を説明するコードプロジェクトから別のメールを受け取りました。 記事は十分に面白そうで、その翻訳を公開することにしました



ご注意 翻訳者から：IEを促進するいくつかの提案と、明らかに明らかなものが記事から削除されました。 私自身はIEブラウザのサポーターではありません。また、以下で説明するすべての方法が理想的というわけではありません。 しかし、HTML5の機能の概要とCanvasの新しいアプリケーションの試みとして、この記事は非常に興味深いものです。

コードプロジェクトに関する記事へのリンク

オリジナルへのリンク



ユーザーインターフェイスのファンとして、HTML5 Canvasで何かを開発する機会を逃すことはできませんでした。 このツールは、Web上で画像やデータを表示するための非常に多くの新しい方法を提供します。 この記事では、そのうちの1つについて説明します。

• アプリケーションの概要
• ツール
• HTML5ページ
• データ検索
• 地図の読み込みとキャッシュの処理
• 地図表示
• マウス制御
• 状態保存
• アニメーション
• さまざまなデバイスで作業する
• おわりに

アプリケーションの概要

Magic the Gathering©マップコレクションを表示できるアプリケーションを作成します。 マウスを使用すると、ユーザーはスクロールとズームを使用できます（たとえば、Bing Mapsの場合）。







完成したアプリケーションは、 bolaslenses.catuhe.comで見ることができます。

ソースはここからダウンロードできます： www.catuhe.com/msdn/bolaslenses.zip



マップはWindows Azureストレージに保存され、Azure Content Distribution Network（ CDN ：エンドユーザーにデータを提供/展開するサービス）を使用して最大のパフォーマンスを実現します。 ASP.NETサービスは、マップのリストを返すために使用されます（ JSON形式を使用）。

ツール

アプリケーションを作成するには、Visual Studio 2010 SP1とWeb Standards Updateを使用します 。 この拡張機能は、HTML5ページのIntelliSenseサポートを追加します（これは非常に重要です）。

ソリューションには、.jsファイルとともにHTML5ページが含まれます。 デバッグについて：Visual Studioを使用すると、ブレークポイントを設定し、環境で直接操作できます。





Visual Studio 2010でのデバッグ



したがって、IntelliSenseとデバッグサポートを備えた最新の開発環境があります。 したがって、開始する準備ができており、最初にHTML5ページを作成します。

HTML5ページ

ページはHTML5キャンバスを中心に構築され、マップを描画するために使用します： コード



ページを見ると、2つの部分に分かれていることがわかります。

• タイトル、ロゴ、特別なリンクのある見出し
• アプリケーションのステータスを表示するキャンバス要素とツールチップを含む主要部分。 そして、まだロードされていないマップのソースとして使用される非表示画像（backImage）。

また、スタイルシートfull.css ： stylesheetを追加しました。 したがって、次のページが得られました。







スタイルは、無限の数のマッピングを作成できる強力なツールです。



これでインターフェイスの準備が整い、表示用のマップデータを取得する方法を確認できます。

データ検索

サーバーは、次のリンクでJSON形式を使用してマップのリストを提供します。

bolaslenses.catuhe.com/Home/ListOfCards/?colorString=0

URLは、1つのパラメーター（colorString）を使用して、目的の色を選択します（0 =すべて）。

JavaScriptを使用して開発する場合、今日すでにあるものを見るといいでしょう（これは他のプログラミング言語にも当てはまりますが、JavaScriptには非常に重要です）。既存のフレームワークですでに作成されていますか？

実際、世界には多くのオープンソースJavaScriptプロジェクトがあります。 その1つがjQueryで 、これは豊富な便利な機能を提供します。

したがって、この場合、サーバーのURLに接続してマップのリストを取得するには、 XmlHttpRequestを使用して、返されたJSONの解析を楽しんでください。 または、jQueryを使用できます。

getJSON関数を使用します。この関数はすべてを処理します。

function getListOfCards() { var url = "http://bolaslenses.catuhe.com/Home/ListOfCards/?jsoncallback=?"; $.getJSON(url, { colorString: "0" }, function (data) { listOfCards = data; $("#cardsCount").text(listOfCards.length + " cards displayed"); $("#waitText").slideToggle("fast"); }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、この関数は変数listOfCardsにマップのリストを保存し、2つのjQuery関数を呼び出します。

• text-タグのテキストを変更します
• slideToggle-高さをアニメーション化してタグを非表示/表示します

listOfCardsリストには、次の形式のオブジェクトが含まれます。

• ID ：カードID
• パス ：相対マップパス（拡張子なし）

サーバーURLは「？Jsoncallback =？」サフィックスで呼び出されることに注意してください。 Ajax呼び出しは、呼び出されたスクリプトと同じアドレスに接続するセキュリティによって制限されます。 ただし、サーバーへの共同呼び出しを可能にするJSONPと呼ばれるソリューションがあります。 そして幸いなことに、jQueryはすべてを単独で処理できます。正しいサフィックスを追加するだけです。

カードのリストを取得するとすぐに、画像の読み込みとキャッシュを構成できます。

地図の読み込みとキャッシュの処理

画面に表示されているカードのみを描画するアプリケーションの主なトリック。 表示ウィンドウは、ズームレベルとシステム全体のインデント（x、y）によって決まります。



var visuControl = { zoom : 0.25, offsetX : 0, offsetY : 0 };











システム全体は14,819枚のカードで定義され、 200列と75行以上に分散されています。

また、各カードには3つのバージョンが用意されていることも知っておく必要があります。

• 高解像度：圧縮なしの480x680 （拡張子.jpg）
• 中解像度：標準圧縮で240x340（.50.jpgサフィックス）
• 低解像度： 120x170 、強力な圧縮（.25.jpgサフィックス）

したがって、ズームレベルに応じて、ネットワークを最適化するために必要なバージョンをダウンロードします。

これを行うには、カードに必要な画像を提供する機能を開発します。 さらに、目的のレベルのカードがまだサーバーにアップロードされていない場合、関数は以下の品質の画像を参照します。

  function imageCache(substr, replacementCache) { var extension = substr; var backImage = document.getElementById("backImage"); this.load = function (card) { var localCache = this; if (this[card.ID] != undefined) return; var img = new Image(); localCache[card.ID] = { image: img, isLoaded: false }; currentDownloads++; img.onload = function () { localCache[card.ID].isLoaded = true; currentDownloads--; }; img.onerror = function() { currentDownloads--; }; img.src = "http://az30809.vo.msecnd.net/" + card.Path + extension; }; this.getReplacementFromLowerCache = function (card) { if (replacementCache == undefined) return backImage; return replacementCache.getImageForCard(card); }; this.getImageForCard = function(card) { var img; if (this[card.ID] == undefined) { this.load(card); img = this.getReplacementFromLowerCache(card); } else { if (this[card.ID].isLoaded) img = this[card.ID].image; else img = this.getReplacementFromLowerCache(card); } return img; }; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ImageCacheは、サフィックスと目的のキャッシュを提供します。

以下に2つの重要な機能を示します。

• load ：この関数は、目的のイメージをロードしてキャッシュに保存します（ msecnd.net urlはAzure CDNのマップのアドレスです）
• getImageForCard ：この関数は、既にダウンロードされているか、新しいものにロードされている場合、キャッシュから画像を返し、キャッシュに入れます

3つのキャッシュレベルを処理するには、3つの変数を宣言します。

  var imagesCache25 = new imageCache(".25.jpg"); var imagesCache50 = new imageCache(".50.jpg", imagesCache25); var imagesCacheFull = new imageCache(".jpg", imagesCache50);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

適切なキャッシュの選択は、ズームによって異なります。

  function getCorrectImageCache() { if (visuControl.zoom <= 0.25) return imagesCache25; if (visuControl.zoom <= 0.8) return imagesCache50; return imagesCacheFull; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ユーザーからのフィードバックのために、既に読み込まれている写真の数を表示するツールチップを制御するタイマーを追加します。

  function updateStats() { var stats = $("#stats"); stats.html(currentDownloads + " card(s) currently downloaded."); if (currentDownloads == 0 && statsVisible) { statsVisible = false; stats.slideToggle("fast"); } else if (currentDownloads > 1 && !statsVisible) { statsVisible = true; stats.slideToggle("fast"); } } setInterval(updateStats, 200);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

注：jQueryを使用してアニメーションを簡素化することをお勧めします。

それでは、地図表示に移りましょう。

地図表示

マップを描画するには、2Dコンテキスト（ブラウザーがHTML5キャンバスをサポートしている場合にのみ存在します）を使用してキャンバス要素を塗りつぶす必要があります。

  var mainCanvas = document.getElementById("mainCanvas"); var drawingContext = mainCanvas.getContext('2d');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

描画は、 processListOfCards関数によって実行されます（1秒間に60回呼び出されます）。

  function processListOfCards() { if (listOfCards == undefined) { drawWaitMessage(); return; } mainCanvas.width = document.getElementById("center").clientWidth; mainCanvas.height = document.getElementById("center").clientHeight; totalCards = listOfCards.length; var localCardWidth = cardWidth * visuControl.zoom; var localCardHeight = cardHeight * visuControl.zoom; var effectiveTotalCardsInWidth = colsCount * localCardWidth; var rowsCount = Math.ceil(totalCards / colsCount); var effectiveTotalCardsInHeight = rowsCount * localCardHeight; initialX = (mainCanvas.width - effectiveTotalCardsInWidth) / 2.0 - localCardWidth / 2.0; initialY = (mainCanvas.height - effectiveTotalCardsInHeight) / 2.0 - localCardHeight / 2.0; // Clear clearCanvas(); // Computing of the viewing area var initialOffsetX = initialX + visuControl.offsetX * visuControl.zoom; var initialOffsetY = initialY + visuControl.offsetY * visuControl.zoom; var startX = Math.max(Math.floor(-initialOffsetX / localCardWidth) - 1, 0); var startY = Math.max(Math.floor(-initialOffsetY / localCardHeight) - 1, 0); var endX = Math.min(startX + Math.floor((mainCanvas.width - initialOffsetX - startX * localCardWidth) / localCardWidth) + 1, colsCount); var endY = Math.min(startY + Math.floor((mainCanvas.height - initialOffsetY - startY * localCardHeight) / localCardHeight) + 1, rowsCount); // Getting current cache var imageCache = getCorrectImageCache(); // Render for (var y = startY; y < endY; y++) { for (var x = startX; x < endX; x++) { var localX = x * localCardWidth + initialOffsetX; var localY = y * localCardHeight + initialOffsetY; // Clip if (localX > mainCanvas.width) continue; if (localY > mainCanvas.height) continue; if (localX + localCardWidth < 0) continue; if (localY + localCardHeight < 0) continue; var card = listOfCards[x + y * colsCount]; if (card == undefined) continue; // Get from cache var img = imageCache.getImageForCard(card); // Render try { if (img != undefined) drawingContext.drawImage(img, localX, localY, localCardWidth, localCardHeight); } catch (e) { $.grep(listOfCards, function (item) { return item.image != img; }); } } }; // Scroll bars drawScrollBars(effectiveTotalCardsInWidth, effectiveTotalCardsInHeight, initialOffsetX, initialOffsetY); // FPS computeFPS(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この機能は、いくつかの重要なポイントを中心に構築されています。

• マップのリストがまだロードされていない場合、ロードがまだ進行中であることを示すヒントを表示します。

  var pointCount = 0; function drawWaitMessage() { pointCount++; if (pointCount > 200) pointCount = 0; var points = ""; for (var index = 0; index < pointCount / 10; index++) points += "."; $("#waitText").html("Loading...Please wait<br>" + points); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

• 続いて、表示ウィンドウの位置を（マップと座標の観点から）決定し、キャンバスをクリアします。

  function clearCanvas() { mainCanvas.width = document.body.clientWidth - 50; mainCanvas.height = document.body.clientHeight - 140; drawingContext.fillStyle = "rgb(0, 0, 0)"; drawingContext.fillRect(0, 0, mainCanvas.width, mainCanvas.height); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

• 次に、マップのリストを表示し、drawImageコンテキストのcanvas関数を呼び出します。 特定の画像はアクティブキャッシュによって提供されます（ズームに依存）：

  // Get from cache var img = imageCache.getImageForCard(card); // Render try { if (img != undefined) drawingContext.drawImage(img, localX, localY, localCardWidth, localCardHeight); } catch (e) { $.grep(listOfCards, function (item) { return item.image != img; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

• また、2次曲線を使用するRoundedRectangle関数を使用してスクロールバーを描画する必要があります。

  function roundedRectangle(x, y, width, height, radius) { drawingContext.beginPath(); drawingContext.moveTo(x + radius, y); drawingContext.lineTo(x + width - radius, y); drawingContext.quadraticCurveTo(x + width, y, x + width, y + radius); drawingContext.lineTo(x + width, y + height - radius); drawingContext.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); drawingContext.lineTo(x + radius, y + height); drawingContext.quadraticCurveTo(x, y + height, x, y + height - radius); drawingContext.lineTo(x, y + radius); drawingContext.quadraticCurveTo(x, y, x + radius, y); drawingContext.closePath(); drawingContext.stroke(); drawingContext.fill(); } function drawScrollBars(effectiveTotalCardsInWidth, effectiveTotalCardsInHeight, initialOffsetX, initialOffsetY) { drawingContext.fillStyle = "rgba(255, 255, 255, 0.6)"; drawingContext.lineWidth = 2; // Vertical var totalScrollHeight = effectiveTotalCardsInHeight + mainCanvas.height; var scaleHeight = mainCanvas.height - 20; var scrollHeight = mainCanvas.height / totalScrollHeight; var scrollStartY = (-initialOffsetY + mainCanvas.height * 0.5) / totalScrollHeight; roundedRectangle(mainCanvas.width - 8, scrollStartY * scaleHeight + 10, 5, scrollHeight * scaleHeight, 4); // Horizontal var totalScrollWidth = effectiveTotalCardsInWidth + mainCanvas.width; var scaleWidth = mainCanvas.width - 20; var scrollWidth = mainCanvas.width / totalScrollWidth; var scrollStartX = (-initialOffsetX + mainCanvas.width * 0.5) / totalScrollWidth; roundedRectangle(scrollStartX * scaleWidth + 10, mainCanvas.height - 8, scrollWidth * scaleWidth, 5, 4); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

• 最後に、1秒あたりのフレーム数を計算する必要があります。

  function computeFPS() { if (previous.length > 60) { previous.splice(0, 1); } var start = (new Date).getTime(); previous.push(start); var sum = 0; for (var id = 0; id < previous.length - 1; id++) { sum += previous[id + 1] - previous[id]; } var diff = 1000.0 / (sum / previous.length); $("#cardsCount").text(diff.toFixed() + " fps. " + listOfCards.length + " cards displayed"); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

マップの描画は、主にブラウザーのキャンバス要素のレンダリングを高速化する機能に依存しています。 たとえば、これは最小ズームレベル（0.05）のマシンでのパフォーマンスです。

ブラウザ	Fps
Internet Explorer 9	30
Firefox 5	30
Chrome 12	17
iPad（ズームレベル0.8）	7
Windows Phone Mango（ズームレベル0.8）	20（!!）

このサイトは、HTML5をサポートしている携帯電話やタブレットでも動作します。



ここでは、フルスクリーンマップを1秒あたり30回以上処理できるHTML5ブラウザーの内部強度を確認できます。 これはハードウェアアクセラレーションで可能です。

マウス制御

カードのコレクションを通常表示するには、マウス（ホイールを含む）を制御できる必要があります。

スクロールについては、onmouvemove、onmouseup、およびonmousedownイベントを処理するだけです。



onmouseupおよびonmousedownイベントは、マウスクリックの追跡に使用されます。

  var mouseDown = 0; document.body.onmousedown = function (e) { mouseDown = 1; getMousePosition(e); previousX = posx; previousY = posy; }; document.body.onmouseup = function () { mouseDown = 0; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

onmousemoveイベントはcanvas要素に接続され、ビューを移動するために使用されます：

  var previousX = 0; var previousY = 0; var posx = 0; var posy = 0; function getMousePosition(eventArgs) { var e; if (!eventArgs) e = window.event; else { e = eventArgs; } if (e.offsetX || e.offsetY) { posx = e.offsetX; posy = e.offsetY; } else if (e.clientX || e.clientY) { posx = e.clientX; posy = e.clientY; } } function onMouseMove(e) { if (!mouseDown) return; getMousePosition(e); mouseMoveFunc(posx, posy, previousX, previousY); previousX = posx; previousY = posy; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この関数（onMouseMove）は現在の位置を計算し、表示ウィンドウのシフトが移動した場合は前の値を提供します。

  function Move(posx, posy, previousX, previousY) { currentAddX = (posx - previousX) / visuControl.zoom; currentAddY = (posy - previousY) / visuControl.zoom; } MouseHelper.registerMouseMove(mainCanvas, Move);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

念のため、jQueryにはマウスイベントを管理するためのツールも用意されています。

ホイールを制御するには、この場合すべて異なる動作をするため、各ブラウザーに個別に適応する必要があります。

  function wheel(event) { var delta = 0; if (event.wheelDelta) { delta = event.wheelDelta / 120; if (window.opera) delta = -delta; } else if (event.detail) { /** Mozilla case. */ delta = -event.detail / 3; } if (delta) { wheelFunc(delta); } if (event.preventDefault) event.preventDefault(); event.returnValue = false; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

イベントログ機能：

  MouseHelper.registerWheel = function (func) { wheelFunc = func; if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false); window.onmousewheel = document.onmousewheel = wheel; }; //  MouseHelper.registerWheel(function (delta) { currentAddZoom += delta / 500.0; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最後に、マウスの移動中（またはズーム中）に少し慣性を追加して、滑らかな感覚を与えます。

  //  var inertia = 0.92; var currentAddX = 0; var currentAddY = 0; var currentAddZoom = 0; function doInertia() { visuControl.offsetX += currentAddX; visuControl.offsetY += currentAddY; visuControl.zoom += currentAddZoom; var effectiveTotalCardsInWidth = colsCount * cardWidth; var rowsCount = Math.ceil(totalCards / colsCount); var effectiveTotalCardsInHeight = rowsCount * cardHeight var maxOffsetX = effectiveTotalCardsInWidth / 2.0; var maxOffsetY = effectiveTotalCardsInHeight / 2.0; if (visuControl.offsetX < -maxOffsetX + cardWidth) visuControl.offsetX = -maxOffsetX + cardWidth; else if (visuControl.offsetX > maxOffsetX) visuControl.offsetX = maxOffsetX; if (visuControl.offsetY < -maxOffsetY + cardHeight) visuControl.offsetY = -maxOffsetY + cardHeight; else if (visuControl.offsetY > maxOffsetY) visuControl.offsetY = maxOffsetY; if (visuControl.zoom < 0.05) visuControl.zoom = 0.05; else if (visuControl.zoom > 1) visuControl.zoom = 1; processListOfCards(); currentAddX *= inertia; currentAddY *= inertia; currentAddZoom *= inertia; // Epsilon if (Math.abs(currentAddX) < 0.001) currentAddX = 0; if (Math.abs(currentAddY) < 0.001) currentAddY = 0; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このような小さな機能を実装することは難しくありませんが、ユーザーとの作業の質が向上します。

状態保存

また、表示をより便利にするために、表示ウィンドウの位置とズームを維持します。 これを行うには、 localStorageサービスを使用します 。これは、キーと値のペアを長期間保存し（ブラウザーを閉じた後にデータが保存されます）、現在のウィンドウオブジェクトでのみ使用できます。

  function saveConfig() { if (window.localStorage == undefined) return; // Zoom window.localStorage["zoom"] = visuControl.zoom; // Offsets window.localStorage["offsetX"] = visuControl.offsetX; window.localStorage["offsetY"] = visuControl.offsetY; } // Restore data if (window.localStorage != undefined) { var storedZoom = window.localStorage["zoom"]; if (storedZoom != undefined) visuControl.zoom = parseFloat(storedZoom); var storedoffsetX = window.localStorage["offsetX"]; if (storedoffsetX != undefined) visuControl.offsetX = parseFloat(storedoffsetX); var storedoffsetY = window.localStorage["offsetY"]; if (storedoffsetY != undefined) visuControl.offsetY = parseFloat(storedoffsetY); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アニメーション

アプリケーションにダイナミズムを追加するために、ユーザーは地図をダブルクリックしてズームし、焦点を合わせることができます。



システムは、2つのインデント（オフセット（X、Y））とズームの3つの値をアニメーション化する必要があります。 これを行うために、変数をソースから指定された期間で最終値にアニメーション化する機能を使用します。

  var AnimationHelper = function (root, name) { var paramName = name; this.animate = function (current, to, duration) { var offset = (to - current); var ticks = Math.floor(duration / 16); var offsetPart = offset / ticks; var ticksCount = 0; var intervalID = setInterval(function () { current += offsetPart; root[paramName] = current; ticksCount++; if (ticksCount == ticks) { clearInterval(intervalID); root[paramName] = to; } }, 16); }; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

関数の使用法：

  //    var zoomAnimationHelper = new AnimationHelper(visuControl, "zoom"); var offsetXAnimationHelper = new AnimationHelper(visuControl, "offsetX"); var offsetYAnimationHelper = new AnimationHelper(visuControl, "offsetY"); var speed = 1.1 - visuControl.zoom; zoomAnimationHelper.animate(visuControl.zoom, 1.0, 1000 * speed); offsetXAnimationHelper.animate(visuControl.offsetX, targetOffsetX, 1000 * speed); offsetYAnimationHelper.animate(visuControl.offsetY, targetOffsetY, 1000 * speed);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

AnimationHelperの利点は、好きなだけ多くのパラメーターをアニメーション化できることです。

さまざまなデバイスで作業する

最後に、タブレット、PC、さらには携帯電話でもページを表示できるようにします。

これを行うには、CSS 3： The media-queries propertyを使用します。 このテクノロジーを使用すると、特定の画面サイズなど、いくつかの要求に応じてスタイルを適用できます。

  <link href="Content/full.css" rel="stylesheet" type="text/css" /> <link href="Content/mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" /> <link href="Content/mobile.css" rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、画面の幅が480ピクセル未満の場合、次のスタイルが追加されることがわかります。

  #legal { font-size: 8px; } #title { font-size: 30px !important; } #waitText { font-size: 12px; } #bolasLogo { width: 48px; height: 48px; } #pictureCell { width: 48px; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このスタイルは、ブラウザの幅が480ピクセル未満の場合でも（たとえば、Windows Phoneの場合）、タイトルのサイズを縮小し、サイトを表示したままにします。

おわりに

HTML5 / CSS 3 / JavaScriptおよびVisual Studio 2010を使用すると、ハードウェアアクセラレーションレンダリングなどの優れた機能を備えた（HTML5をサポートするブラウザー内で）ポータブルで効率的なソリューションを開発できます。

このタイプの開発は、jQueryなどのフレームワークを使用することにより簡素化されます。



結論として、私は何かを確認するためにそれを言う-あなたはそれを試してみる必要がある！