Windows および Windows Phone 8.1 で Web サイトのライブ タイルをサポートする

要約: RSS フィードをお持ちですか。buildmypinnedsite.com から数分で Web サイトのライブ タイルを作成しましょう。 Web を利用したスタート画面を有効にする Internet Explorer では、Windows および Windows Phone のスタート画面にピン留めすることで、お気に入りの Web サイトをお気に入りのアプリのすぐそばに置くことができます。IE から Web サイトをピン留めすることで、ユーザーはそれらのサイトに何度もナビゲーションすることなく、スタート画面からすぐにアクセスすることができます。 ユーザーがあなたのサイトをピン留めしたときには、そのユーザーがサイトの常連であり、サイトの更新を気にしているということが分かります。この点を考慮し、Internet Explorer では Web サイトのライブ タイルを導入し、ユーザーがブラウザーの外でも Web サイトにつながれるようになりました。 ライブ タイルを使用することで、最新ニュース、新しいメッセージ アラート、新しいブログの記事のタイトルなどの新鮮なコンテンツをユーザーのスタート画面に表示してユーザーに関わることができます。また、Web サイトで複数のタイル サイズをサポートし、ワイド タイルまたは大きいタイルとしてサイトを目立たせて表示することができます。 左上から、下に向かって各列を紹介します。IE アプリのタイル、youtube.com、techmeme.com、theverge.com、anandtech.com、mathrubhumi.com、twitter.com、reuters.com、t.msn.com、aol.com、economictimes.indiatimes.com、ピン留めサイトの IE Test Drive、wired.co.uk、lapresse.ca、cnet.com、contrejour.ie、dhakatimes.com.bd、outlook.com、wellsfargo.com、geekwire.com、nymag.com、gawker.com、indiatimes.com、facebook.com、vyclone.com、polygon.com、wpcentral.com、theage.com.au。 左上から、下に向かって各列を紹介します。IE アプリのタイル、techmeme.com、contrejour.ie、wellsgargo.com、gawker.com、t.msn.com、youtube.com、vyclone.com、ピン留めサイトの IE Test Drive、wpcentral.com Web サイトにライブ タイルを追加する Web サイトのライブ タイルには定期通知が利用されていて、プラットフォームが事前定義されたポーリング間隔でサーバーにホストされたポーリング URI からテキストと画像を収集し、このコンテンツを Web サイトのタイルに表示します。サイトにライブ…


IE11 のパスワード

今日の Web は認証の形式としてパスワードに依存しているため、さまざまな異なるサービスに毎日ログインする必要があります。 タッチ デバイスでパスワードを入力することが面倒なだけでなく、脆弱なパスワードを作成し、同じパスワードをすべてのサイトで使用することで、個人情報の盗難の被害に遭いやすくなります。 安全で信頼性のあるパスワード マネージャーを用意することが、ユーザーが強力で一意のパスワードをすべてのサイト用に作成することを促すために最善の方法です。   Internet Explorer 11 では、より速く、より信頼性を高めてサイトにサインインできるようにするとともに、資格情報の保存時にユーザーがより細かく制御できるようにしました。 また、IE11 では資格情報を Windows Phone 8.1 の IE11 に移動することができるようになります。 Windows Phone 8.1 の IE11 にパスワードを保存して移動することができるようになりました 信頼性のあるログイン フォーム検出 IE11 ではログイン フォーム検出が強化され、IE が Web 上の 90% 以上のログイン フォームでパスワードを記憶するためのプロンプトを表示するようになりました。 以前のバージョンの IE から大幅に改善されています。 パスワードを保存するかどうかを決定する 特定のサイトでパスワードを保存するかどうかの決定を、再びユーザーが行えるようになります。 IE11 では autocomplete=off 属性がログイン フォームに設定されている場合でも、パスワードを保存するためのプロンプトが表示されるようになりました。 その他のフォーム フィールド (ユーザー名、クレジット カード、住所、名前など) については、IE は引き続きこの属性を尊重します。 このような動作にした理由は主に 2 つあります。1 つは、なぜ IE は特定のサイトでパスワードを記憶しないのかというユーザーの混乱に対処するためです。2 つめは、フォームの autocomplete=off 属性を尊重することよりも、ユーザーが強力な一意のパスワードを作成することを促すことの方がより重要だと考えているためです。特定のデバイスと状況でパスワードを保存することが安全かどうかを、ユーザー自身が判断できる必要があります。  より速くサインインする…

1

IE11 の読み取りビューの紹介

IE11 では、アドレス バーのボタンをクリックまたはタップすると、Web ページの記事を読み取りビューで表示することができます。 読み取りビューは、Windows 8.1 向け Internet Explorer 11 の新機能です。この機能を使用すると、読みたい Web ページのメイン コンテンツに集中することができます。読み取りビューは、記事に関連するしないを問わず、周りにある不要な情報は表示せずに、読みたい Web ページの記事やブログ記事だけを表示する機能です。読みたい記事を見つけたら、読み取りビューに切り替え、落ち着いて読むことができます。記事を読み終えたら、読み取りビューを終了するだけで、サイトのブラウジングに戻ることができます。 読み取りビューで表示した Web ページの記事 読み取りビューは "イマーシブ" な IE にネイティブに実装された機能です。追加でインストールする必要はありません。IE がサポートするすべての言語に対応しており、テキスト量が多いページで利用できます。 IE11 の読み取りビューの使用方法 読み取りビューの使い方は簡単です。アドレス バーの [読み取りビュー] ボタンをクリックするだけです。キーボードを使用している場合、Ctrl + Shift + R キーを押して、読み取りビューでページを表示することもできます。 [読み取りビュー] ボタンは、"記事に相当" するコンテンツを持つページのアドレス バーに表示されます。ボタンが表示されていない場合、ページを読み取りビューで適切に処理することはできません。 読み取りビューを終了するには、アドレス バーのボタンをもう一度タップまたはクリックするか、Esc キーを押します。前のページに戻るには、[戻る] ボタンをタップまたはクリックします。タッチ対応デバイスを使用している場合は、スワイプして前のページに戻ります。 優れたリーディング エクスペリエンスの条件 IE11 で読み取りビューを開発したときの目標は、ページを快適に読めるビューを作成することでした。ブラウザーを一時的に特定の記事を読むためだけの場とすることで、元のページよりも読みやすくすることを目標としました。同時に、記事の URL、著者、その他の関連するコンテキスト情報だけでなく、コンテンツの整合性も保持したいと考えました。IE はこの機能を実装した最初のブラウザーではありませんが、印刷媒体の発行者たちが何世紀にもわたって使用し、改良し続けてきた読みやすさに関するベスト プラクティスを取り込み、オンラインでの閲覧に適用することで、他のブラウザーよりも優れたエクスペリエンスを実現する機会を得ました。 フォントの選択、行の長さ、余白、段落の設定マーカー、行間、カーニング、コントラスト、画像の配置など、ページの読みやすさにかかわる項目はたくさんあります。IE11 の読み取りビューにおける工夫をいくつか紹介します。 オンラインでの閲覧向けに新しいフォントをデザイン IE11…


EtchMark の内部のしくみ: タッチ、マウス、ペン、そしてデバイス シェイクを処理する Web サイトの構築

EtchMark は昔からおなじみのお絵描きおもちゃの新しいバージョンであり、IE11 の向上したタッチ サポートと最新の Web 標準 (ポインター イベント、デバイスの方向など) を紹介するサンプルです。この記事では、サイトに簡単に追加できるいくつかの機能について説明します。それらの機能を使用すると、タッチ、マウス、ペン、キーボード、さらにはデバイス シェイクにも対応して、スムーズで自然な操作感を実現できます。 デモの構造 EtchMark では、タッチ、マウス、ペン、または方向キーを使用して、画面上に自由に線を描くことができます。 描画サーフェスは、つまみを回すと更新される HTML5 Canvas 要素です。 ベンチマーク モードでは、requestAnimationFrame API を使用して、60 フレーム/秒のスムーズなアニメーション ループを行い、バッテリ寿命を延ばします。 つまみのドロップ シャドウは、SVG フィルターを使用して作成します。IE11 のハードウェア アクセラレーションによって、この作業の大部分が GPU に移されるので、非常に高速なエクスペリエンスが実現できます。 以下のビデオで、これらの機能の動作を確認してください。その後、実際の構築方法の説明に入ります。 EtchMark では、HTML5 Canvas、requestAnimationFrame、SVG フィルター、ポインター イベント、および Device Orientation API を使用して、昔からおなじみのおもちゃの新しいバージョンを作成します ポインター イベントを使用するタッチ、マウス、キーボード、およびペン ポインター イベントを使用すると、マウス、キーボード、ペン、およびタッチのいずれを使用しても、1 つの API に対するコードを記述するだけで、同じようにうまく動作するエクスペリエンスを構築できます。ポインター イベントは、Windows デバイス全般でサポートされており、間もなく他のブラウザーでもサポートされます。 ポインター イベント仕様は W3C の勧告候補となり、IE11 ではプレフィックスを使用しないバージョンのポインター イベントをサポートしています。 まず、最初に行う必要があるのは、Knob.js のポインター イベントの接続です。最初に標準のプレフィックスを使用しないバージョンを確認し、その確認が失敗したら、IE10 をサポートできるようにするために必要な、プレフィックスの付いたバージョンに戻ります。 次の例で、hitTarget はつまみの画像を含む単純な…


IE11 のリッチ エディット エクスペリエンスが強化されました

Internet Explorer 11 を使うと、Web ベースのアプリケーションやサイトで、ユーザーが簡単にデータをキャプチャし、共有できる、リッチ エディット エクスペリエンスを実現できます。電子メールや Web ベースのドキュメント編集 (Office 365 を含む) のようなオンラインかつクラウド ベースのコンテンツ作成シナリオは、HTML5 の contentEditable 機能に依存しています。IE11 では、さまざまな入力ソースから画像の貼り付け、書式を維持したままリストのコピー、さらに簡単に編集内容を元に戻すことができるようになりました。 各種ソースから細かく制御して画像を貼り付け IE11 を使うと、クリップボードから貼り付ける画像に、Web サイトが直接アクセスできるようになりました。IE11 は、クリップボード (写真編集ソフトウェアや PrintScreen 機能など) からの直接の画像の貼り付けと、(ローカル パスに一時的に画像を保存する Microsoft Office などのアプリケーションなどから) ローカル イメージを組み込む HTML の貼り付けの両方をサポートする初めてのブラウザーです。こういった画像は、DataURI または Blob を使ってエンコードできます。 IE11 の新しい DataURI エンコード機能があれば、Web サイトへのクリップボードからの画像の貼り付けが自動的にサポートされ、追加の Javascript は必要ありません。既定では、IE11 はクリップボードの画像を DataURI に変換し、HTML として contentEditable に挿入することで、画像を貼り付けます。たとえば、写真編集ソフトウェアで赤い四角を作成し、それを contentEditable にコピーすると、この画像は編集中のマークアップ内の <img> タグになります。…

2

相互運用可能なパン エクスペリエンスを実現する CSS Scrolling Snap Points 仕様

本日 Microsoft は、W3C への新たな提案 (英語) として CSS Scrolling Snap Points を提出いたしました。CSS Scrolling Snap Points は、高速で流れるようなパン エクスペリエンスを、タッチ デバイスを始めとする各種入力デバイスに実現するもので、IE10 で導入され IE11 で進化した API を基礎に設計されています。開発者の皆様は、これらの API を活用することで、ページ分割されたコンテンツやスクロール対応のフォト ギャラリーなど、パンを活かしたエクスペリエンスを簡単に構築できます。これはタッチに最適化されたエクスペリエンスですが、マウス、キーボード、トラックパッドでも直感的に操作できます。このエクスペリエンスが活用されているのが、Windows 8 に最適化された MSN ホームページです。 ユーザーは右左にスワイプして最新の見出しを切り替えることができます。CSS Snap Points によって Internet Explorer に実現されるこのエクスペリエンスでは、IE でのタッチ操作による Web ページのパンに使用されているものと同じ、ハードウェア アクセラレーションを活用したパン テクノロジが使われています。指にくっついて動かすことができ、パンを離すと慣性で進み、行き過ぎると揺れながら止まるなど、ユーザーが想定するとおりに動作します。また、ユーザーがパンを止めた後は、最も近い見出しでコンテンツがスナップされます。 このエクスペリエンスを実現するコードはシンプルです。CSS のコード行を 2 つ追加するだけです。 <style> .photoGallery { width: 500px; overflow-x: auto; overflow-y: hidden; white-space:…

1

IE11 では視覚障碍をお持ちの方のブラウジングがさらに容易に

Internet Explorer 11 では、視覚障碍をお持ちで、Windows ナレーターなどのスクリーン リーダーをお使いの方に、より簡単に Web ブラウズをしていただけます。IE11 では編集および入力機能が強化され、編集領域内の現在のコンテンツについてより詳しい情報をスクリーン リーダーが提供できるようにしました。また、入力方式エディター (IME) を使った東アジア言語の入力も簡単になりました。これらの変更により IE11 では、世界でますます利用者が増えている、次世代のクラウドベースのアプリケーションのエクスペリエンスを向上しています。 通知の拡充により、さらに詳しい情報をスクリーン リーダーから提供 IE11 では、自動的であれ、ユーザー操作であれ、テキストが変更された場合、スクリーン リーダーに通知することで、電子メールやオンライン Web ドキュメント アプリケーションでの編集時の利便性を高めています。以下は、IE11 の新しい通知機能の例です。 オートコレクト: Internet Explorer では、スペルの正しくない単語が自動的に修正されます。たとえば、英語で「teh」と入力すると、「the」に修正されます。IE11 では、新しい通知を追加し、オートコレクトが実行されたことをスクリーン リーダーによって伝えられるようにしています。 BackSpace: ユーザーの入力に合わせて、スクリーン リーダーは各キー入力を読み上げます。ただし、単に「バックスペース」と言われても、削除される対象を把握することはできず、あまり役に立ちません。IE11 では、削除された文字がスクリーン リーダーに通知され、スクリーン リーダーがその文字を読み上げることができます。 書式設定: メールやその他の Web コンテンツを読んだり書いたりするときには、文章だけではなく、メッセージに設定されている書式も知る必要があります。IE11 では、より詳しい情報がスクリーン リーダーに通知されるので、読んでいるまたは編集しているコンテンツの状態を細かく把握できます。たとえば、Microsoft ナレーターでは、「太字」と「太字の終了」と読み上げ、テキストのどの部分が太字の書式で強調されているかをユーザーに伝えます。Microsoft ナレーターで CapsLock キーと A キーを使って詳細モードにすると、この機能を実際に試すことができます。以下のビデオでは、Microsoft ナレーターで書式情報が読み上げられるようすを紹介しています。 IE11 では、スクリーン リーダーが視覚障碍をお持ちの方に、詳しい書式情報を提供できる 東アジア言語での入力機能の向上 入力方式エディター (IME) は、通常の英語キーボードを使って東アジア言語を入力するために使われます。たとえば、日本語…

1

IE11: 現在そして将来の Web に対応するタッチ ブラウジング

Windows 8.1 Preview の Internet Explorer 11 では、新しいタッチ機能、既存のタッチ機能の強化、新しい開発者 API を通して、Windows 8 で導入された革新的なタッチ サポートをさらに充実させています。このブログ記事では、Windows 8.1 の IE11 におけるタッチ サポートの進化について、その一部を紹介します。 ホバー メニューに対するタッチ操作の信頼性向上 現在の Web の大部分はマウスを前提に設計されています。特に、マウス ホバーだけでしか起動しないメニューは、非常に多くのサイトに見られます。しかし Web はタッチだけでも操作できる必要があります。このため IE11 では、タッチによる擬似ホバーのサポートを実装しました。ページ要素のタップがホバーなのかクリックなのかという決定は、多くのシナリオであいまいになっています。この問題を解決するため、Internet Explorer 11 ではこれら 2 つの対話操作を異なるジェスチャで実行できるようにしました。 タップ – クリック 長押し – ホバー さまざまなサイトのホバー メニューに対するタッチ操作を紹介するビデオ タッチによるホバーのサポートに加えて、リンクを長押しするとコンテキスト メニューのコマンド バーが画面下部に表示されるようになりました。つまり、サイトによるホバー メニューの表示を邪魔せずにコマンド バーが表示されます。また、コマンド バーのボタンから新しいタブやウィンドウを簡単に開くことができます。 リンクの強調表示の改善 Windows 8.1 の Internet Explorer 11 では強調表示の機能が新たに改善され、タッチ操作にすばやい表示で応答するようになりました。これは、ページ上でタッチした要素を確認できるようにしてタッチ操作の信頼感を高める、フィードバックに基づき追加された機能です。…

1

IE11 の新しいエクスペリエンス: Web のポテンシャルを引き出すアプリとサイトの融合

目的のサイトにすばやくアクセスし、Windows 8.1 の Windows ストア アプリと同時に利用できる IE11 は、日々のブラウジングで最高のエクスペリエンスを実現します。高速で滑らかなブラウジング、タッチに最適な操作性、多数のタブのサポート、よりリッチなサイト候補の提案、整理しやすいお気に入りに加え、2 つのウィンドウを横並びで表示できるため、サイト間の比較や、サイトと Windows ストア アプリの同時利用が可能です。   Internet Explorer 11: 多数のタブと 2 ウィンドウ横並び表示を使った日々のブラウジング   必要なタブを必要なだけ IE11 では 1 ウィンドウあたり最大 100 個のタブを利用でき、管理も効率的に行われるため、いつでも非常に高速なブラウジングが可能です。最近使用していないタブはシステム リソースを使用せず、バッテリを浪費することもありません。 IE11 は 1 ウィンドウあたり最大 100 個のタブに対応する 使用中のデバイスで開いているタブに加えて、他のデバイスのタブにもアクセスが可能です。ネットワーク接続されているすべての Windows 8.1 デバイスのタブが同期されるため、中断したところからシームレスにブラウジングを続行することができます。 ネットワーク接続されたすべての Windows 8.1 デバイスのタブにアクセスでき、シームレスにブラウジングを続行可能 すべてのタブを参照するには、画面の下端から上に向かってスワイプします (マウスの場合は右クリック、キーボードでは Windows + Z キー)。多くのサイトでは重要なナビゲーション メニューや検索ボックスがページ上部にありますが、アドレス バーとタブの一覧はこれを邪魔しない位置に表示されます。また、ブラウザーの UI が画面下部にまとまり、ブラウジング中に必要なすべての操作を 1 か所で行うことができるようになっています。 タブとアドレス…

3

Windows 8 の Flash コンテンツを含む Web サイトに関する開発者向けガイダンス

Windows 8 Release Preview には、電力消費について最適化されたタッチ操作対応 Adobe Flash Player が搭載されています。互換性のある Web サイトの Adobe Flash コンテンツが Metro スタイル IE10 で再生されるようになりました。Windows 8 の Flash に対応した Metro スタイル IE10 を使うと、他のタッチ主導エクスペリエンスやタブレット エクスペリエンスと比べて特に品質の高い Web 作品を表示できるようになります。 Windows 8 では、デスクトップの Internet Explorer 10 と Metro スタイル IE で同じ統合型 Adobe Flash Player が使用され、追加のプレーヤーをダウンロードしたりインストールしたりする必要はありません。デスクトップの IE10 では、Adobe Flash Player プラグインに依存していた以前のバージョンの IE と同様に Flash が完全にサポートされ、引き続き他のサード パーティ プラグインがサポートされます。Metro…

3