We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

背景

ウェブページで http ではないプロトコルを使用したリソースへのリンクを見つけることがよくあります。例えば、 mailto: プロトコルです。

<a href="mailto:webmaster@example.com">ウェブマスター</a>

ウェブ制作者は、ユーザーがウェブページから直接 E メールを送るのに便利な方法を提供したいときに、 mailto: リンクを用いることができます。リンクがアクティブ化されたとき、ブラウザは、E メールを扱うための標準のデスクトップアプリケーションを起動させるはずです。これは、デスクトップベース プロトコルハンドラーと考えることができます。

ウェブベースプロトコルハンドラーは、ウェブベースアプリーケーションもその処理に追加することを可能にします。これはアプリケーションをウェブに移行させるうえでますます重要になってきています。実際、 mailto リンクを処理できる可能性がある多くのウェブベースの E メールを扱うアプリケーションが存在しています。

登録

ウェブアプリケーションをプロトコルハンドラーとして設定するのは、難しい処理ではありません。基本的に、ウェブアプリケーションは自身を指定したプロトコルのための可能なハンドラーとしてブラウザに登録するために registerProtocolHandler() を使用します。

navigator.registerProtocolHandler("web+burger",
                                  "http://www.google.co.uk/?uri=%s",
                                  "Burger handler");

ここでの引数は次の通りです。

  • プロトコル。
  • URL のテンプレート。"%s" は、リンクの href 属性の値に置換され、GET は置換後の URL に対して実行されます。
  • プロトコルハンドラーのためのユーザーにわかりやすい名前。

ブラウザがこのコードを実行するとき、ユーザーにプロンプトを表示し、そのプロトコルのためのハンドラーとしてそのウェブアプリケーションを登録して良いかどうかの許可を求めるはずです。Firefox は、情報バーエリアに以下のプロンプトを表示します。

メモ: URL テンプレートが提供されるとき、登録する URL は登録が行われようとするウェブページと同じドメインである必要があります。異なるドメインであった場合は、登録は失敗します。 例えば http://example.com/homepage.html では http://example.com/handle_mailto/%s はプロトコルハンドラーとして登録可能ですが、 http://example.org/handle_mailto/%s はプロトコルハンドラーとして登録することはできません。

同じプロトコルハンドラーを二回以上登録すると、そのプロトコルハンドラーが既に登録済みであることを示す別のポップアップが表示されます。従って、プロトコルハンドラーの登録を呼び出すのを防ぐために、以下のように既に登録済みであるかどうかを確認するのが良いでしょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
  <title>ウェブプロトコルハンドラーサンプル - 登録</title>
  <script type="text/javascript">
    navigator.registerProtocolHandler("web+burger",
                                  "http://www.google.co.uk/?uri=%s",
                                  "Burger handler");
  </script>
</head>
<body>
  <h1>ウェブプロトコルハンドラーサンプル</h1>
  <p>このウェブページは、 <code>fake:</code> プロトコルのためのウェブプロトコルハンドラーをインストールします。</p>
</body>
</html>

有効化

登録すると、ユーザーが登録されたプロトコルを用いたリンクを有効化したときに、ブラウザはウェブアプリケーションが登録されたときに提供された URL へアクションを送るようになります。Firefox は、既定では、アクションを実行する前にユーザーにプロンプトを表示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
  <title>ウェブプロトコルハンドラーサンプル - テスト</title>
</head>
<body>
  <p>やあ、前に<a href="web+burger:cheeseburger">これ</a>を見たことある?</p>
</body>
</html>

ハンドリング

次の段階は、アクションをハンドリング(実行)することです。ブラウザはアクティブ化されたリンクから href 属性の値を展開し、ハンドラー登録時に提供された URL テンプレートと結合し、その URL 上で HTTP GET を行います。ですから、上記の例では、ブラウザは、次の URL 上で GET を行います。

http://www.google.co.uk/?uri=web+burger:cheeseburger

サーバー側コードは、クエリ文字列パラメータを展開し、要求されたアクションを行います。

メモ: サーバー側コードには href 属性の値の 完全 な内容が渡されます。つまり、サーバー側コードは、そのデータからプロトコルを解釈しなければならないということです。

<?php
$value = "";
if ( isset ( $_GET["value"] ) ) {
  $value = $_GET["value"];
}
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
    <title>ウェブプロトコルハンドラーサンプル</title>
</head>
<body>
  <h1>ウェブプロトコルハンドラーサンプル - ハンドラ</h1>
  <p>このウェブページは、 <code>web+burger:</code> プロトコルアクションをハンドリングしたときに呼び出されます。次のデータが送られました。</p>
  <textarea>
<?php echo(htmlspecialchars($value, ENT_QUOTES, 'UTF-8')); ?>
  </textarea>
</body>
</html>

仕様書

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, chrisdavidmills, ethertank, Mgjbot, Potappo
最終更新者: mfuji09,