Opera エクステンションでの cookie 共有

By Opera Software

デスクトップ向け Opera 11.50 では、エクステンションが cookie をブラウザと共有できる機能を導入しました。「クッキー」と言うと、ついついミルクとビスケットの話に脱線しそうになりますが、今回は、この新しい機能が、より使いやすいエクステンションを作成するにあたって、どのようなサポートを行うのかを見ていきましょう。また、この機能は開発者にとっても扱いやすいものであるということも付け加えておきます。

Cookie って何？

テクニカルなことに不案内なユーザーでも、cookie に関する良くない話が書かれた記事を目にしたことがあるのではないでしょうか。Cookie はコンピュータの中に居座り、ユーザーの行動を監視して首謀者に報告を行い、その結果、ユーザーは不要な物を売りつけられるようになるというような話です。そのようなこともあるでしょうが、ここでお話する cookie は役に立つ種類のものです。特定のサイトにログインしているかどうかを cookie がトラックするため、新しいページを閲覧する度にユーザー名とパスワードを入力する必要がなくなります。実際問題として、cookie 自体は独自で何も行うことはできず、設定しているサイトのみが確認できる文字列の一セットに過ぎないと言えます。参考にする情報を処理するのは、cookie というよりはむしろサイトです。

ちなみにOpera では、設定 → 詳細設定 → Cookie → Cookie の設定 から、どのサイトに cookie を設定しているかを確認することができます。この設定から、cookie それぞれに対して編集や削除を行えます。

でも cookie を共有したくない！

Cookie を共有するのはプライバシーの侵害のように受け取られるかもしれませんが、今回お話しする共有とは、第三者であるサイトとの情報共有ではなく、ユーザー設定のようなものを Web ページとエクステンション間で共有することを指しています。ここで行おうとしているのは、ユーザーが許可を与えたサイトに関して エクステンションが cookie を使用できるようにすることです。

ここで言及している共有 cookie は、Flash cookie とも呼ばれる ローカル共有オブジェクト (LSO) とは異なるものです。

非常に簡単なサンプル

これ以上簡単なものはないというような例をご紹介します。XMLHttpRequest を使用することはできますが、今回は単純にあるサイトのモバイル版（ここでは Reddit ）を含むインラインフレームが組み込まれたポップアップウィンドウを作成してみましょう。以下にすべてのコードを記していますが、こちらから Cookie を共有するエクステンションの例 をダウンロードすることもできます。

Facebook のモバイル版など、サイトによっては、セキュリティの観点からインラインフレームの埋め込みを許可していないものがありますのでご注意下さい。その場合、ネットワークの問題として Opera のエラーコンソールに報告されます。

Cookie の共有を行うには、特定のドメインへのアクセスをエクステンションに許可する、cookie 共有機能を有効にする、この 2 点が必要となります。両方共、エクステンションの config.xml ファイル に以下の 2 行を加えることで実行できます。

<feature name="opera:share-cookies" required="false"/>
<access origin="http://reddit.com" subdomains="true"/>

<feature> 要素の required 属性は、cookie が共有されない場合にエクステンションが機能するかどうかを示します。access 要素は、エクステンションがアクセスできるドメイン、また可能性のあるサブドメインを指定します。言い換えると、エクステンションが必要とする cookie が含まれるドメインということです。複数の access 要素が必要になるかもしれません。例えば、https ドメインへのアクセスが必要な場合もあります。ユーザーが必要としない第三者 cookie が共有されるのを防ぐため、ここではドメインを指定し、ワイルドカードを使用しないことが重要です。以下が今回ご紹介しているエクステンションサンプルの完全な config.xml ファイルです。個人的には、Reddit Quick と呼んでいます。

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="http://people.opera.com/danield/redditquick" defaultlocale="en">
  <name>Reddit Quick</name>
  <description xml:lang="en">Check the latest Reddit stories quickly without leaving your current page.</description>
  <author href="http://people.opera.com/danield/">Daniel Davis</author>
  <icon src="images/icon_64.png"/>
  <icon src="images/icon_18.png"/>
  <feature name="opera:share-cookies" required="false"/>
  <access origin="http://reddit.com" subdomains="true"/>
</widget>

次は極めて重要となる index.html ファイルです。ここでは、ファイル内の JavaScript で Opera のツールバーにボタンを一つ追加します。ボタンには、利用するアイコン、ヒントとして表示されるタイトル、ボタンで開けるファイルを指定することができます。ファイルはポップアップウィンドウに開かれるため、ポップアップの大きさを設定することも必要です。ネットブックなどの小さめな画面に対しては、高さの最大値を 480 ピクセルに抑えた方が適切と言えます。以下が、完全な index.html ファイルです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reddit Quick (background)</title>
</head>
<body>
<script>
(function() {
  // Define some properties for the button
  var buttonprops = {
    icon: 'images/icon_18.png',
    title: 'Reddit Quick',
    popup: {
      href: 'popup.html',
      width: 400,
      height: 480
    }
  };

  // Create the button
  var button = opera.contexts.toolbar.createItem(buttonprops);

  // Add the button to the browser's toolbar
  opera.contexts.toolbar.addItem(button);
})();
</script>
</body>
</html>

パズルの最後を埋めるのはポップアップ自体です。冒頭で申し上げた通り、このサンプルは単純にインラインフレームを含んだもので JavaScript は必要ありませんが、使用できるスペースをできるだけ有効に利用するために CSS を多少使いたいと思います。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reddit Quick (popup)</title>
<style>
body {
  margin:0;
  overflow:hidden;
  padding:0;
}
iframe {
  border:none;
}
</style>
</head>
<body>
<iframe src="http://www.reddit.com/.compact" width="100%" height="474"></iframe>
</body>
</html>

これで完成です！ Reddit のモバイル版を表示するポップアップができました。ポップアップ自体は目新しいものではありませんが、エクステンションはユーザーにとってメリットがあるものです。ユーザーが Reddit にすでにログインしている場合、ポップアップ内の新しいインスタンスに再度ログインする必要がなくなります。もちろん、cookie 共有機能は XMLHttpRequest を使用する Speed Dial エクステンションでも有効です。このため、便利な Opera Speed Dial で、特定のサイトでの未読状態のニュースやメッセージの数をユーザーに表示できるエクステンションを作成することができるでしょう。簡単に利用できるこの機能には多くの可能性が潜んでいます。今後も Opera エクステンションのレポジトリ でみなさんが作成したものが見られることを楽しみにしています。

This article is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported license.

Comments

The forum archive of this article is still available on My Opera.

No new comments accepted.