データ URI (Data URI)サポート : Internet Explorer 9 (PC) / IE Mobile (Windows Phone 7.5)

Internet Explorer 9 は Data URI をサポートしています。Data URIのスキーマはRFC2397にあります。IE の歴史においては、IE 8から Data URIがサポートされました。IE 9では、Data URIのサイズ上限が4GBまで拡張されています。 次のような書式で記述します。 data:[mime-type][;base64],<data as text>   たとえば、左の画像は、Data URI を利用すると <img src=’data:image/png;base64,iVBORw0KGgoA…’ /> という形式で宣言することができます。メリットは、クライアントからサーバーへのHTTP リクエストが減り、パフォーマンスが向上することです。 PC版のInternet Explorer 9だけではなく、Windows Phone 7.5のInternet Explorer Mobileでも利用できます。加えて、Windows Phone 7.5のWebBrowser コントロールでも表示できます。左の図は、WebBrowserコントロール上でData URIを利用して画像を表示している例です。 サンプルファイルを添付します。 WebDataURI.zip


Windows Phone : WebBrowserコントロールの User Agent文字列は何?

本日のTech Fielders セミナーで 「IE Mobileでモバイル優先とデスクトップ優先、2つのユーザーエージェントがありますが、Windows Phone 7.5/Windows Phone OS 7.1のWebBrowserコントロールのユーザーエージェント文字列はどうなりますか?」 という質問がありましたので、記事に残します。 回答としては、「Internet Explorer Mobileの設定に依らず、モバイル優先のユーザーエージェントになります」 エミュレーターでの確認例: IS12TにおけるWebBrowserコントロールのユーザーエージェント文字列: Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; FujitsuToshibaMobileCommun; IS12T; KDDI) 確認用のプロジェクトを添付します。 GetUserAgent.zip


Internet Explorer Test Drive Mobileを使ってCSS3 Media Queries を体験しよう

CSS3 の Media Queries (http://www.w3.org/TR/css3-mediaqueries/)を利用して、1つのWebページで、デバイスの表示できる解像度に応じてページが切り替わる仕掛けを作ってみませんか。 論より証拠、まずは次のサイトをHTML5/CSS3に対応したPCブラウザーで表示してください。 http://ie.microsoft.com/testdrive/mobile/HTML5/CSS3MediaQueries/Default.html   解像度大: 写真が2列に表示 解像度中: 写真は一列表示 解像度小: モバイル向けに最適化されたページ 具体的には次のスタイルシートが利用されています。 .smallPhoto, .placeTitleShort, #mobile, #netbook, #widescreen  { display:none;} @media (min-width:950px) {   .place {   border: thin solid black;   width: 46%;   padding:0px  10px 10px 5px;   margin:5px;   float:left;   } .photo {  width:100%;  text-align:center; }  .bigPhoto {  margin:0 auto;  width:100%;  height:100%;  max-width:640px;  max-height:480px; } .smallPhoto, .placeTitleShort {      display:none; }  .description {   margin:10px; }  #widescreen {   display:inline;   float:left;   color:purple;   margin-top:12px;    } #DemoContent h1 {  float:left;  margin-top:0px !important;  margin-right:15px !important;  font-weight:bold !important;  color:…


Viewportを利用して、Windows PhoneのIE Mobileのブラウズ体験を変える

Windows Phoneに搭載されているInternet Explorer MobileはViewportに対応しています。皆さんのWebサイトにも、1行のmetaタグを追加していただけませんか。 <meta name=”Viewport” content=”width=device-width” /> このブログにはすでにこのタグを設定しています。 設定前と後の比較を画像で紹介します。 Viewport設定なし Viewport設定あり

2

Windows Phone : IS12T の Internet Explorer Mobileの ユーザーエージェント / UserAgent

http://blogs.msdn.com/b/aonishi/archive/2011/08/10/10194470.aspx の記事に追記しても良かったのですが、独立して残しておきます。 Windows Phone 7.5のInternet Explorerには、設定メニューから[Webサイトの優先設定]というのがあり、それぞれユーザーエージェントが異なります。 「モバイル用サイト」を優先にしている場合に、Windows Phone IS12Tが送信するユーザーエージェント文字列Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; FujitsuToshibaMobileCommun; IS12T; KDDI) 「デスクトップ用サイト」を優先にしている場合に、Windows Phone IS12Tが送信するユーザーエージェント文字列Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; XBLWP7; ZuneWP7) Webサイトを運営されている皆様へのお願いです。 もしスマートフォンに最適化したページをお持ちであれば、ユーザーエージェントに「 MSIE 9.0;  Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; 」が含まれている場合に、そちらのページへ誘導していただくようにお願いします。「デスクトップ用サイト」を優先にしているWindows Phone ユーザーは、スマートフォンに最適化されたページではなく、意図的にデスクトップと同等のページを見たい場合が考えられますので、ユーザーエージェントに「Trident/5.0; XBLWP7; ZuneWP7」が含まれている場合は、何もされずに通常のページを表示する、あるいは、スマートフォンページへ移動する・しない、を誘導するページをご用意いただくとよいと思います。  


Windows Phone “Mango”: IE9によるWeb開発 #2 – Windows Phone 7.5のIE Mobileのユーザーエージェントを知る方法

よくある質問として、「Windows Phone “Mango”のIE Mobileのユーザーエージェントはどうなっていますか」というものがあります。単純に回答を示してもいいのですが、ここは開発ツールを活用して答えを見つけましょう。Visual Studioをお持ちの皆様であれば、簡単なプログラムを作れば、簡単に確認できます。 手順1:Visual Studio 2010を起動し、新しいプロジェクトを選択し、Webのテンプレートから、[ASP.NET 空の Web アプリケーション]を選択し、名前を[GetUserAgent]にします。 手順2:[Ctrl]+[Shift]+[A]を押し、新しい項目の追加ダイアログを開き、プロジェクトに Webフォームを追加します。名前を[Default.aspx]とします。 手順3:Default.aspxの[ソース]を表示し、編集します。赤い太字部分を追加します。<body>タグ内の<form>タグは削除しましょう。 <%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”GetUserAgent.Default” %> <!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 runat=”server”>     <title></title>     <meta name=”Viewport”        content=”width=device-width, height=device-height, user-scalable : ‘yes'”/> </head> <body>     <div>      User Agent:<%=Request.UserAgent.ToString() %>        </div> </body>…


Windows Phone “Mango”: IE9によるWeb開発 #1

Windows Phone SDK 7.1 Beta 2のリリースとともに、MSDNライブラリの文書が更新されています。 Web Development for Windows Phone この文書では、Internet Explorer Mobile を利用して、Webサイトやアプリケーションを作成するために、Internet Explorer Mobileがどのような機能をサポートしているかを解説しています。 PC版とWindows Phone版では相違がありますが、基本事項として、Internet Explorer 9 開発者ガイドに目を通しましょう。 ”Mango”のInternet Explorer Mobileには、PC版にはない特別な機能が用意されています。 ・HTML5 geolocation (GPSサポート)   W3C Geolocation APIが利用できるため、navigator.geolocation.watchPosition()により現在位置を取得できます。   Internet Explorer Test Driveのモバイル版にサンプルがあります。   http://ie.microsoft.com/testdrive/mobile/HTML5/Geolocation/Default.html ・Viewportのサポート HTML文書が表示される矩形領域の設定ができます。   width         : device-width または 整数で320-10,000 の範囲でviewportの幅を指定します   height        : device-height または整数で480-10,000 の範囲でviewportの高さを指定します  …