この記事では Windows 8 の Internet Explorer 10 と、Windows 8 の [共有] 機能について解説しています。
Internt Explorer 10 と Windows 8 の [共有]
Windows 8の新しいユーザー インターフェースでは、アプリ間の「共有」の仕組みが搭載されています。「共有」がどのような物か、スマートフォンのユーザーなら理解しやすいでしょうが、実行中のアプリで表示されている情報を他のアプリに送信し、情報を「共有」する仕掛けです。共有する相手はローカルのアプリに限らず、というよりむしろソーシャルなアプリ (例えば Facebook、Twitter、Google+、LinkedIN など) への投稿が意識されています。「共有」を行うには、チャームを呼び出して [共有] をタップ (クリック) します。
この操作が行われると、Windows ストア アプリは別のアプリで利用可能な形式のデータを作成し、Windows に渡します。[共有] チャームで共有先のアプリを選択すると、Windows は受け取ったデータを共有先のアプリに引き渡します。そこから先は共有先のアプリの処理になりますが、例えばクラウド上のワークスペースへの書き込みや、SNS への投稿などがを行うことができます。では Windows 8の新しいユーザー インターフェースの Internet Explorer 10 で Web ページを表示している時に「共有」のアクションを行うと、共有できるデータとしてどのような物が作成されるのでしょうか。
Internet Explorer 10 では、ページ内のコンテンツが選択されている時に [共有] が呼び出されると、選択されている範囲のデータが共有データになります。こうした共有を「明示的な共有」と呼びます。これに対して何も選択されていない時に [共有] が呼び出されると、現在表示しているページを示す 2 つの形式のデータを作成します。このような共有を「暗黙的な共有」と呼びます。
暗黙的な共有で作成される 1 つめの形式は現在表示しているページの URL です。
URL を共有すれば、例えば SNS で特定のページを多くの人に知らせたり、あるいは自分の備忘録としてページを記録しておくことができます。ただし Internet Explorer で作成されるデータは URL の文字列だけで、ページの内容に関する情報は含まれません。そのため共有先のアプリでは (そのアプリ内で独自に URL のリンク先ページのプレビューやタイトルの取得ができるような機能が無ければ) リンクの文字列だけしか表示されません。そのため、ページの内容を明確にしたい場合、別途説明を書き込んだり投稿する必要があるでしょう。
もう 1 つの形式は、リンク プレビューと呼ばれるデータです。リンク プレビューは現在のページのイメージが含まれるHTMLデータです。このデータの形式は Windows ストア アプリで共通しています。
リンク プレビューには以下のような情報が含まれます。
- ページの URL
- ページ タイトル
- 説明文
- ページの画像
共有先のアプリケーションがリンク プレビューに対応していれば、リンク プレビューのデータを利用して共有するページを示す表示が行われます。例えば次のスクリーンショットのように、People アプリを共有先として選択して Facebook に投稿する場合、リンク プレビューのデータが利用されます。
URI だけ共有するのではなく、リンク プレビューを共有するメリットは、ユーザーが共有しようと思ったページの内容をより具体的に示し、わかり易い形で状態で共有できることです。こうしたメリットが活用されるように、Internet Explorer 10は暗黙的な共有が行われると、常にリンク プレビューを作成します。
共有データを受け取る側のアプリでは、そのアプリの動作や目的に適したデータを利用できます。Facebook のような Web ベースのサービスであれば、共有されているページの情報をより理解しやすくするためリンク プレビューを利用することが適切でしょう。しかし単純なテキスト メッセージングであれば、単純な URL のデータだけを利用した方が良いかもしれません。このように共有可能なデータのうち何を利用するかは、共有先のアプリで決めることができます。
注 共有先のアプリでの処理方法については「共有のためのデータ形式の選択(JavaScriptとHTMLを使ったWindowsストア アプリ)」(http://msdn.microsoft.com/ja-jp/library/windows/apps/hh771179.aspx)に詳しい解説があります。
リンク プレビューの作成
Internet Explorer 10は [共有] の操作が行われると、表示中のページを解析してリンク プレビューを作成します。解析では、まずリンク プレビューの内容について指定するマークアップが存在するかどうか調べられます。もしそれらが存在していれば、その内容をもとにしてリンク プレビューが作成されます。リンク プレビューの内容を指定するマークアップが存在しなければ、それ以外のマークアップから自動的にリンク プレビューを生成します。
リンク プレビューの内容を指定するマークアップでは、リンク プレビューに含まれる内容ごとにメタ データを定義できます。こうした指定によって、ページが共有された際のプレビューの見栄えがよりよくなるよう調整したり、リンク プレビューに共有先で有益な情報を追加したりすることができます。
リンク プレビューの内容を指定するマークアップと定義できるメタデータは以下の通りです。
|
プロパティ |
HTML タグ |
文字数制限 |
|---|---|---|
|
タイトル1 |
<meta name="title" content="ページのタイトル” /> | 160 |
|
タイトル2 |
<title>ページのタイトル</title> | 160 |
|
説明 |
<meta name="description" content="ページの説明” /> | 253 |
|
画像1 |
<meta property="og:image" content="画像のURI" /> | 2,048 (画像 URI の制限) |
|
画像2 |
<link rel="image_src" href="画像のURI" /> | 2,048 (画像 URI の制限) |
|
画像3 |
<meta name="image" content="画像のURI" /> | 2,048 (画像 URI の制限) |
|
画像4 |
<meta name="thumbnail" content="画像のURI" /> | 2,048 (画像 URI の制限) |
この表に含まれるマークアップを指定する際に注意が必要なのは、マークアップには優先順位がある事です。この表の表示順はその優先順位を示しています。つまりタイトルについては「タイトル1」(metaタグ)があればそれが優先されて利用され、「タイトル2」(titleタグ)があっても利用されません。画像についても同様で、「画像1」(Open Graphプロトコルでの指定)があれば、「画像2」以下の指定は無視されます。
注 Open Graphプロトコルについては、http://ogp.me/ 参照してください。
もし公開しているページが Windows 8 のユーザーに広く共有される事を期待するのであれば、その共有によるインフルエンスを最大限にするためにも、リンク プレビューが適切に作成されるようこうしたマークアップを記述するべきでしょう。特にプレビューで使用される画像についてはマークアップでの指定が不可欠です。なぜならたいていのページ内にはページ内容とは直接関係しないイメージが多数含まれており、Internet Explorerが自動的に解析した結果は時としてそうしたページのコンテンツの本筋とは関係ない画像を選択する場合があるからです。意図しないような変な画像が表示されたら、せっかくのリンク プレビューも台無しです。
また説明も表示可能な文字数があまり多くないため、内容を的確に要約した説明が指定されているのとそうでないのとでは、共有先での印象が大きく異なります。共有されたページがより魅力的に見えるよう、そしてサイトに実際に訪問してもらえるよう、強くアピールする説明文を指定することが望ましいでしょう。
Web サイトを運営している方、Web サイトの開発者の皆さんは、ぜひリンク プレビューを上手に活用し、サイトへの注目を高めてください。
Hebikuzure's Tech Memo 