Windows 8 で IE10 からリンクを共有する
Web ページへのリンクの共有は、PC でよく行う操作であり、Windows 8 の IE10 ではこの操作が強化されました。Windows 8 の新機能の 1 つは、PC 上のアプリ間でコンテンツをシームレスに送信できる共有チャームです。これまで、興味深い記事を友人と共有したり、おもしろい画像をブログに投稿したりする場合は、アドレス バーからリンクをコピーし、別のサイトまたはアプリに切り替えてリンクを貼り付けていました。Windows 8 の共有チャームを使うと、現在のページから離れなくてもブラウザーから直接共有することができるようになりました。
共有チャームを使ってブラウザーからサイトを共有すると、IE10 により関連するコンテンツ (URI と、ページのリッチ表現が含まれる一部の HTML) が含まれる 2 つのデータ形式が作成されます。YouTube ビデオを共有するデータの例を以下に示します。
(現在のサイトの) URI
https://www.youtube.com/watch?v=4DbgiOCTQts
(リンクをプレビューする) HTML
IE10 による Web ページのリッチ プレビューの例
どちらのデータ形式も "暗黙的な" 共有 (これは、現在表示しているサイトを共有したときに起こる事柄の名称です) のために作成されます。Web ページは、ハイパーリンクまたはリッチ HTML リンクのプレビューとして表現可能なため、IE10 には両方の種類のデータが含まれています。もちろん、ページ全体ではなく、ハイライトした一部のコンテンツを共有する場合は、URI とリンク プレビューの代わりに選択範囲の HTML が IE10 で共有されます。この場合、選択範囲の共有は "明示的な" 共有と呼ばれ、リンクは含められません。この記事では、リンクを共有するケースについて扱い、IE10 が HTML を使って Windows 8 共有コントラクトに参加する方法や、Web 開発者がいくつかのメタタグだけを使ってリンク プレビューを作成する方法について説明します。
共有チャームと IE10
次のビデオは、ユーザーがブラウザーから HTML を使うアプリとリンクを共有する方法について説明しています。
IE10 からの共有: リンク プレビューの動作 (英語)
このビデオの "Stash" は、HTML を使って Windows 共有チャームを利用するサンプル リンク保存アプリです。このサンプル アプリでは、共有用の HTML データ形式のみサポートされており、IE にリンク プレビューが表示されます。リンク プレビューは、各共有リンクのタイトル、画像、説明を含む HTML です。これにより、サイトの内容を簡単に見分けることができるようになります。Windows 8 Consumer Preview と Visual Studio 11 Beta を使っている場合は、PC に Stash をダウンロードして実行 (英語) することができます。Stash は、次の図のようにターゲット アプリとして Windows 8 共有コントラクトに統合されます。次の図は、IE10 からリンクがどのように共有されるかの概要を示しています。
図: 共有チャームのデータ パッケージを使った IE10 からターゲット アプリへのリンクの共有
Windows 8 の共有チャームは、ソース アプリとターゲット アプリの間で調整を行って、すべてのアプリ間で共有操作が同じになるようにします。この結果、ターゲット アプリとソース アプリが互いを認識して調整する必要がなくなります。
始めから終わりまで強化された Web の共有
Web は HTML で構成されています。共有コントラクトとの IE10 の統合において、HTML が最も重要なデータ形式の 1 つであるのはこのためです。IE10 は、ユーザーの共有操作を強化するためだけでなく、Web 開発者が Windows 8 共有に接続できるようにするために、リンク プレビューを作成します。メタデータ マークアップを少し追加することで、サイトはリンク プレビューに含められる情報を定義できます。共有コントラクトの反対側では、単一のサイトを解析しなくても、HTML データ形式をサポートするターゲット アプリでコンテキスト Web ハイパーリンクがフルに機能します。最終的に、最初から最後までリッチかつモダンで滑らかな共有操作になります。
共有ペインで使用可能なターゲット アプリのスクリーンショット
Stash の共有ペインのスクリーンショット
Web サイトを共有すると、IE10 によりそのサイトが解析されてリンク プレビューが作成されます。上の例では、IMDb の映画ページを表すコンテンツの短いスニペットです。URI に加えて HTML を共有することの目標は、ユーザーが共有しようと思った内容のできる限り最良の表現を共有することであるため、IE10 はすべての暗黙的な共有のリンク プレビューを作成します。HTML のメリットは、URI より多くの情報を含めることができることであり、HTML の内容はハイパーリンクよりわかりやすくなっています。Leslie Knope (英語) の言葉を借りれば、だれも "複雑で意味のわからないもの" を共有したいとは思いません。
NBC の「Parks and Recreation」(英語)、シーズン 4、エピソード 16 より引用
狂っているわけじゃないんですから、やはりだれもこんな複雑で意味のわからないものは注文しませんよね。
ただし、ターゲット アプリによってはリッチ コンテンツが最適とは限らず、URI の方が役に立つこともあります。たとえば、ブログ アプリはリッチ HTML コンテンツを活用できますが、SMS アプリには URI が最適です。Metro スタイル アプリの開発者の方は、Windows 8 共有ガイダンス (英語) に従って、アプリが受け取って最も意味があるデータ形式を選択してください。
サイトがマークアップを使って IE10 が共有する内容を定義
IE10 は、Web で共有するために作られた既存のマークアップを使うため、Windows 8 で HTML リンク プレビューを共有すると、多くのサイトはそれだけできれいに見えます。ページに関するメタデータを追加する簡単な方法として、Open Graph プロトコルがサポートされています。ユーザーが Facebook と Windows 8 および IE10 をとおしてサイトを共有するとき、OpenGraph を使って Web ページが他のユーザーに表示される方法を制御できます。
このマークアップを使う IE テスト ドライブ デモ (英語) の例を次に示します。
<head>
<meta name="description" content="Brick Breaker TestDrive Demo Game, Performance and Touch benchmark" />
<title>Brick Breaker</title>
<meta property="og:image" content="Views/Homepage/Icons/BrickBreaker.png" />
</head>
IE は、サイトのマークアップで次のタグを探して、ページのリンク プレビューを作成します。
| プロパティ | HTML タグ | 文字数制限 |
|---|---|---|
| タイトル 1 | <meta name="title" content="Insert Site Title Here” /> | 160 |
| タイトル 2 | <title>Insert Site Title Here</title> | 160 |
| 説明 | <meta name="description" content="Insert Site Description Here” /> | 253 |
| 画像 1 | <meta property="og:image" content="insert_image_link_here" /> | 2,048 (画像 URI の制限) |
| 画像 2 | <link rel="image_src" href="insert_image_link_here" /> | 2,048 (画像 URI の制限) |
| 画像 3 | <meta name="image" content="insert_image_link_here" /> | 2,048 (画像 URI の制限) |
| 画像 4 | <meta name="thumbnail" content="insert_image_link_here" /> | 2,048 (画像 URI の制限) |
これは、各属性を解析する順序である点に注意してください。たとえば、画像 1 タグと画像 2 タグが両方とも存在する場合、画像 1 タグを使います。さらに、いずれかの種類のタグが複数存在する場合、リスト内の最初のタグをマークアップで使います。
文字数制限については、説明が最大長より長い場合、IE はプレビューの末尾に "…" を挿入します。
Windows 8 で共有したときにきれいなページにするには、必ず各プロパティを少なくとも 1 つずつサイト マークアップに含めてください。マークアップの動作の詳細については、IE テスト ドライブ サイトのこのデモ (英語) をご覧ください。
アプリが強力な Web ブラウザーのメリットを活用
アプリで共有ターゲット アプリ コントラクトがサポートされる場合、共有データ形式として HTML をサポートすることはアプリにとって意味があるかどうかを考えてください。面倒な処理は IE10 がすべて行うため、HTML を使うアプリは IE10 により共有されるリンク プレビューのメリットを活かすことができます。IE10 がサイトを解析し、短いリンク プレビューと情報量の多いリンク プレビューを一緒に配置するので、アプリは表示して HTML をホストするだけでかまいません。ハイパーリンクはプレビュー内に埋め込まれるため、URI と同じように機能しますが、見た目はきれいになります。このようにして、Web を解析してページを小さいリッチ プレビューに凝縮するリソースがないアプリでも、コンテキスト リンクを HTML として表示できます。
IE10 だけでなく多くのアプリが HTML を共有します。HTML を受け入れるターゲット アプリは、共有データのソースを知ることがありません。上で説明したとおり、IE10 は暗黙的な共有シナリオでも明示的な共有シナリオでも HTML を共有するため、HTML はリンク プレビューであったり、ユーザーの選択範囲であったりします。どちらの場合も、HTML の内容はユーザーが共有しようと思った内容のできる限り最良の表現です。次のスニペットは、IE10 により生成されたリンク プレビュー HTML が、共有チャームのデータ パッケージに追加されるとどのようになるかを示しています。
<html>
<body>
<!--StartFragment-->
<style>
/* IE10\uc1\u8217?s metro-style CSS attributes */
</style>
<a class="snippet-URL" href="https://site_link_goes_here">Website Title goes here</a>
<table>
<tr>
<td class="snippet-image">
<img src="image_link_goes_here" />
</td>
<td class="snippet-text">Website description goes here </td>
</tr>
</table>
<!--EndFragment-->
</body>
</html>
IE10 からの HTML を使うアプリの例については、上のビデオに出てきたサンプル アプリ "Stash" をダウンロード (英語) してください。このアプリは、Metro スタイル アプリが共有ターゲットとしてどのように HTML データを使うことができるかをデモンストレーションします。
アプリの次のコード スニペットは、Stash が共有チャームから送信された HTML をどのように使うかを示しています。
function activatedHandler(eventArgs) {
// In this sample we only do something if it was activated with the Share contract
if (eventArgs.detail.kind
=== Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {
// We receive the ShareOperation object as part of the eventArgs
var shareOperation = eventArgs.detail.shareOperation;
if (shareOperation.data.contains(
Windows.ApplicationModel.DataTransfer.StandardDataFormats.html)) {
shareOperation.data.getHtmlFormatAsync().then(
function (htmlFormat) {
// Extract the HTML fragment from the HTML format
var htmlFragment = Windows.ApplicationModel.DataTransfer
.HtmlFormatHelper.getStaticFragment(htmlFormat);
// Display the HTML in the Share pane.
id("htmlArea").innerHTML = htmlFragment;
});
}
}
}
上のコードでは、ユーザーが共有ターゲットとして HTML を選択すると、Stash は HTML を受け入れることができます。Windows 8 での共有ターゲット アプリの開発については、共有コンテンツの受け取りに関する MSDN クイックスタート ページ (英語) をご覧ください。
共有を活用しましょう!
— Internet Explorer 担当グループ プログラム マネージャー Alex Feldman