ウェブサイトを「ピン留め」機能に対応させるための簡単な記述

サンプルソースを「ピン留め」して、ジャンプリストを表示してみたところ

サンプルソースを「ピン留め」して、ジャンプリストを表示してみたところ

自サイトを「ピン留め」機能に対応させ、ジャンプリストに項目を5つ掲載するために必要な記述は、以下の8行です。

これらのmeta要素とlink要素を、HTMLのhead要素内(<head>~</head>内)に記述しておけば、それだけで「ピン留め」機能に対応させられます。なお、以下のソースを加えたHTMLを実際に「ピン留め」すると、右図のように見えます。

※実際にはもっと少ない行数でも実現は可能です。ここでは、「必須ではないものの、記述しておく方がお勧め」な指定も含めています。それでも十分、少ない行数でしょう。

<!-- ▼ピン留め情報 -->
<meta name="application-name" content="オールアバウト">
<meta name="msapplication-starturl" content="./">
<!-- ▼タスク(静的ジャンプリスト) -->
<meta name="msapplication-task" content="name=デジタル; action-uri=/r_itdigital/; icon-uri=/favicon.ico; window-type=tab">
<meta name="msapplication-task" content="name=趣味; action-uri=/r_hobby/; icon-uri=/favicon.ico; window-type=tab">
<meta name="msapplication-task" content="name=ビジネス; action-uri=/r_business/; icon-uri=/favicon.ico; window-type=tab">
<meta name="msapplication-task" content="name=旅行; action-uri=/r_travel/; icon-uri=/favicon.ico; window-type=tab">
<meta name="msapplication-task" content="name=マネー; action-uri=/r_finance/; icon-uri=/favicon.ico; window-type=tab">
<!-- ▼アイコン -->
<link rel="shortcut icon" href="/favicon.ico">
上記の11行のうち、「<!-- ▼××× -->」のコメント行(3行)は、ソースを見やすくするために加えただけですから、実際には記述しなくて構いません。必要なのは、それ以外の8行のみです。

各行の意味は以下の通りです。「ピン留め」機能に対応させる上で、省略しても構わない記述には「省略可」と記しています。また、読み込まれるタイミング(初回または毎回)も記しています。タイミングに関しては、次のページで詳しく説明します。

アプリケーション名 [省略可/初回のみ読み込み]
<meta name="application-name" content="オールアバウト">
スタートメニューに「ピン留め」したところ

スタートメニューに「ピン留め」すると、アプリケーション名も表示

「ピン留め」のタイトルを指定します。省略した場合には、HTMLのtitle要素の内容が使われます。title要素にはサイト名以外にも様々な文字列が入っていることもあるでしょうから、ここに分かりやすい名称を記述しておくことをお勧め致します。

このアプリケーション名は、スタートメニューへ「ピン留め」した場合の項目名や、タスクバーへ「ピン留め」した場合のツールチップなどに表示されます。


 
ピン留めスタートページ [省略可/初回のみ読み込み]
<meta name="msapplication-starturl" content="./">
スタートページへは、左上端に現れるサイトアイコンで簡単に戻れる

スタートページへは、左上端に現れるサイトアイコンで簡単に戻れる

ユーザが「ピン留め」サイトを起動したときに、最初に表示されるページを指定します。省略すると、ユーザが「ピン留め」操作(=サイトアイコンをタスクバーにドラッグ)をしたページがスタートページになります。

深い階層のページで「ピン留め」操作をされた場合のために、そのコーナーのトップページや、サイトのトップページなどを指定しておくと良いでしょう。現在のページをそのままスタートページにしたい場合は、この記述は不要です。

このスタートページを指定した場合、ユーザが「ピン留め」サイトを起動した際には、スタートページのHTMLからジャンプリストなどの各種データが読み込まれるようになります。したがって、スタートページを指定しておくと、(スタートページのHTML内だけにジャンプリスト等の記述を含めておけば済むため)「ピン留め」に関するデータの管理がしやすくなります。

※「スタートページ」として、「今表示しているページ」とは異なるページが指定されている場合は、ユーザが「ピン留め」操作をした瞬間に、ブラウザ上の表示内容がスタートページに変わります。

なお、URLは相対パスでも絶対パスでも記述可能です。絶対パスは以下の2例のように「/」から始めても、プロトコル名(http://など)から始めても構いません。
content="/internet/"
content="http://allabout.co.jp/internet/"

タスク(静的ジャンプリスト) [省略可/毎回読み込み]
<meta name="msapplication-task" content="……">
「タスク」(静的ジャンプリスト)

「タスク」(静的ジャンプリスト)

上記のようなmeta要素を必要なだけ列挙することで、最大5つまでの項目を「タスク」(静的ジャンプリスト)に登録できます。

また、JavaScriptを使うことで、最大20個までの項目を「動的ジャンプリスト」として登録できます。ジャンプリストの作成方法については、4ページ目以降で詳述します。


 
サイトアイコン
<link rel="shortcut icon" href="/favicon.ico">
サイトアイコンが使われる箇所の例

サイトアイコンが使われる箇所の例

「ピン留め」に使われるアイコンファイルを指定します。

この方法で記述したアイコンは、ブラウザのアドレス欄やタブの端などに表示されるサイトアイコンとして、「ピン留め」機能以外でも使われます。サイトアイコンに関しては、4ページ目で詳述します。


 
以上の記述で、ウェブサイトを「ピン留め」対応にできました。 meta要素を使った「ピン留め」に関する設定には、ナビゲーションボタンの配色を指定したり、ツールチップとして表示される文面を指定したりするなど、他にもいくつかあります。 詳しくは、次のページでご紹介致します。

それでは、ピン留め機能に関して、もっと細かく指定できるオプションを見てみましょう