Hebikuzure's Tech Memo

2010年1月15日

アクセラレータ作成ガイド

Filed under: Internet Explorer — hebikuzure @ 7:16 AM

Accelerator Creation Guide
http://blogs.msdn.com/ie/archive/2009/12/23/accelerator-creation-guide.aspx


去年の記事はこれでおしまいです。

以下の文章は IE Blog の 12/23 の記事 Accelerator Creation Guide を hebikuzure が私的に試訳したものです。翻訳については Microsoft Corporation およびマイクロソフト株式会社とは無関係に hebikuzure が公開情報に基づき独自に行ったものであり、この文書の内容についての文責は公開者である hebikuzure にあります。翻訳の内容および技術的内容については正確を期すよう十分な注意を払っておりますが、誤りや不正確な部分が含まれている可能性がありますので、本文書を利用される際には原文も併せてご確認ください。


アクセラレータ作成ガイド

はじめに

世の中には実にクールなサービスがたくさんありますが、それらの多くはアクセラレータとしてもふさわしいと思います。ところがアクセラレータを作成するには多くの重要な事項があるのにもかかわらず、そのための手順をステップ バイ ステップで説明したブログ記事はなかったようです。そこでこの記事でお役に立ちたいと思います。

私はこの機能について取り組んできましたので、アクセラレータの構築をより効率的にするのに役立ついくつかのヒントとベスト プラクティスを考えつきました。また同時にいくつかのミスも繰り返し何度も見かけ (また自分でもミスし) ているので、他の皆さんが開発プロセスを少しでも容易にできるよう、そうした事についても説明したいと思います。

アクセラレータの構築

アクセラレータは、ユーザーが選択したコンテンツを現在の Web ページからお気に入りの Web サービスの一つに送信できるようにすることで、よく行われる “コピー – ページ移動 – 貼り付け” の操作を合理化します。幸いなことに、この機能は非常に強力ですが、それを利用するためのコードを書く事は実際にはとても簡単です。それでは簡単なアクセラレータを作成するためのステップ バイ ステップのガイドを始めましょう。

まずあらかじめサンプルの情報を読み込んだアクセラレータのテンプレートを用意しました。必要な作業は、サンプルの情報をあなた自身のものに置き換えるだけです。注目してほしいのは、あなたは作成するアクセラレータが情報をやり取りするサービスのサービス プロバイダーである必要は無いということです。以下の情報が確認できるのであれば、事実上希望するどのようなサービスでもアクセラレータを作成できるのです。

それでは手順です:

  1. まずアクセラレータのための <homepageUrl> を決定します。これは重要なフィールドで、マニフェストに含まれる他のすべての URL とドメイン名が同一である必要があります。一般的にいえば、あなたのサービスのトップ レベル ドメインを選択するのが良いでしょう。

例:   <homepageUrl>http://www.example.com</homepageUrl&gt;

  1. 利用する favicon への絶対パスを <icon> フィールドに入れます。簡単に行う方法: サービスのページで右クリックし、ソースを表示し、.ico ファイルを検索します。

例:   <icon>http://www.example.com/favicon.ico</icon&gt;

  1. <display> ノードの下にある <name> フィールドに、サービスの説明を 50 文字以内で入力します。この名前にはまずアクセラレータのカテゴリーを示し、その後にサービス プロバイダーの名前を含めることをお勧めします。

<display>
<name>Act with Example.com</name>
</display>

  1. <activity> フィールドの “category” 属性を選択します。これについてはカテゴリーについての記事を別に公開していますが、以下のようなカテゴリーがお勧めできます:
      • ブログ – 選択したリンクや範囲を元にした新しいブログ記事を作成するブログ サービス
      • ブックマーク – Web 上のユーザーの個人的ブックマークにリンクを追加するサービス
      • 辞書 – 選択範囲を元に意味や定義を提供するサービス
      • 電子メール – 新しい電子メール メッセージの作成ができる、電子メール コミュニケーションを提供するサービス
      • 検索 – サイトの範囲内で関連したコンテンツを検索するサービス
      • 地図 – ユーザーの選択を元に地図上の位置を示すサービス
      • 送信 – Web ページ上のデータを別の Web アプリケーションのデータに変換するサービス
      • 共有 – サイトのコミュニティーやネットワークによりリンク (と追加のコメント) を共有できるサービス
      • 翻訳 – 現在の Web ページやユーザーの選択範囲を別の言語に翻訳するサービス

カテゴリーの記述は、アクセラレータがアクセラレータ メニューでグループ分けされるのに使われ、またユーザーが実際に試す前にあなたのアクセラレータがどのような物か理解できるので、重要です。

  1. あなたのアクセラレータが “selection”、“link”、および/または “document” のどのコンテキストを必要とするのか選択し、それを一つまたは複数の <ActivityAction> 要素の属性として追加します。以下はその例です:

<activityAction context="selection"> … </activityAction>

リンク (link) とドキュメント (document) コンテキストについては追加の説明が必要でしょう。リンク (link) コンテキストはユーザーがリンク上で右クリックしたときに有効になり、コンテキスト メニューの選択結果によってアクセラレータを実行します。同じように、ドキュメント (document) コンテキストはユーザーがページ自身の上で右クリックしてコンテキスト メニューを使った場合に有効になる他、ページ メニューを選択して “すべてのアクセラレータ” のサブメニューの下のいずれかの項目を実行することもできます。

  1. 次に、<execute> 要素の “action” 属性に、利用したいサービスの URL を埋め込みます。データをあなたのサービスに渡す方法については以下の変数についてのセクションを参照してください。

例:  <execute action="http://example.com/default.aspx?sel={selection}&amp;src=IE8"&gt;

  1. プレビュー ウィンドウはユーザーに同じページ内でのブラウジング エクスペリエンスの一部としてサービスの結果を提供できる優れた方法であると同時に、ユーザーをサービスのホーム ページに誘引するための優れた方法でもあります。

<preview> 要素を使ってプレビュー ウィンドウを追加できます。以下は私が作成したプレビューのセクションです。

例:  <preview action="http://example.com/default.aspx?sel={selection}&amp;src=IE8"&gt;

次のセクションではここまでの手順についてより詳細な仕様を提供します。

変数

IE はアクセラレータを利用するために多くの変数を提供します。以下はよく使われる変数の一覧です:

  • {selection} – Web ページ内のユーザーが選択した範囲。selection コンテキストでのみ利用可能です。
  • {documentUrl} – アクセラレータが呼び出された Web ページの URL。
  • {documentTitle} – アクセラレータが呼び出された Web ページのタイトルを表します。
  • {link} – ユーザーが選択したリンクの URL。
  • {linkText} – ユーザーが選択したリンクのテキスト。

変数の完全な一覧はこちらにあります。

アクセラレータを通じてサービスに変数を渡すには二つの方法があります。一つ目はクエリー ストリングを通じた方法です:

<execute action=”http://www.example.com/script.aspx?foo=bar”>

二番目の方法は一つ以上の <parameter> タグを通じた方法です:

<execute action=”http://www.example.com/script.aspx”>
<parameter name=”foo” value=”bar” />
</execute>

<parameter> 要素の利用は HTTP リクエストの body にデータを挿入するための唯一の方法であることに注意してください。パラメーターを含むクエリー ストリングを伴った POST メソッドを利用することはできますが、引き渡すすべてのパラメーターは URL に含まれます。<activityAction> 要素の “method” 要素を使って、GET リクエストを使うか POST リクエストを使うかが指定できます。

プレビューの追加

プレビューはアクセラレータのもっとも視覚的な機能かもしれませんし、また効果的に実装すれば非常に有用な機能です。

アクセラレータのプレビューは 320×240 ピクセルのサイズのウィンドウを使います。そのためプレビューを利用する多くのアクセラレータでは表示のための特別なプレビュー ページを作成します。

効果的なプレビューのために重要な点は、ユーザーから送信された情報に基づいて可能な限り最も関連性のある情報を返し、それを必ずプレビュー ウィンドウで提供されるスペースに合わせて表示することです。

一例として Bing Maps のアクセラレータは、選択された住所の場所の地図を独自の UI を使い、320×240 にスケール ダウンします:

<preview method="get" action="http://www.bing.com/maps/geotager.aspx"&gt;
<parameter name="b" value="{selection}" />
<parameter name="clean" value="true" />
<parameter name="w" value="320" />
<parameter name="h" value="240" />
<parameter name="client" value="ie" />
<parameter name="format" value="full" />
</preview>

プレビュー ウィンドウには、実行の際と同じ方法で変数を渡すことができます。例えば上記のアクセラレータは {selection} を使っています。

もう一つの有用な点は読み込み時間です。プレビュー ウィンドウへの読み込みに 0.5 秒以上かかるようであれば、ユーザー エクスペリエンスの観点から、長すぎると言えるでしょう。

役に立つテクニックの一つとして、プレビュー ウィンドウのために Web サービスのモバイル版を利用する方法があります。プレビュー ウィンドウのサイズは意図的にモバイル サービスと互換にしてあります。

アクセラレータのテスト

アクセラレータを作成したら、今度はテストする番です。インストールのためには Javascript API が用意されています。以下のようなコードでアクセラレータのインストールのためのダイアログを表示するリンクが作成できます。

<a href=”javascript:window.external.addService(‘myAccelerator.xml’)”>Install me</a>

これを機能させるには、実際の Web サーバーが必要です。ローカル ハード ドライブ上のページからこのリンクを開こうとしてもエラーになります。ローカル サーバーであればどんなものでも上手くいきますので、例えば Visual Studio の ASP.NET でも問題なく利用できます。

すべてについて問題がなければ、通常のアクセラレータのインストール ダイアログが表示されるでしょう。そうでなければ、以下のようなダイアログが表示されます:

このダイアログが表示されるときは、しばしば問題であることが分かっているいくつかのミスがあります。

文字のエンコード

最初に確認すべきなのは XML 自体についてです。クエリー ストリングを扱う際、複数の引数を渡すためにアンパサンド文字 (&) を使う事が一般的です。ところがこの文字は XML の予約文字なので、これをクエリー ストリング中にリテラルとして使うとエラーが発生します。そうならないよう、以下のように “&amp;” とエンコードする必要があります:

<execute action=”http://www.microsoft.com/testscript.aspx?foo=test&amp;bar=test”>

ドメイン一致の必要性

二番目に確認すべきなのは <homepageUrl> です。サービスを適切に識別できるよう、<homepageUrl>と、<execute> の action 属性、<preview> の action 属性で指定された URL のすべてが同じドメインを共有している必要があります。そうでないと、エラーが発生します。

テスト

アクセラレータのインストールができたら、多くのアクセラレータで問題を起こす傾向にある、以下のようないくつかのシナリオについて確実にテストするべきです:

  • 空のコンテンツ – サービスに空のコンテンツが送信されたらどうなるでしょう? わかりやすいエラーメッセージが表示されますか?
  • 複数行のコンテンツ – サービスは改行を考えたように処理できますか? キャリッジ リターン – ライン フィードのシークエンス (URL エンコードすると “%0d%0a”) を解析し、空白文字など適切なものに置き換える処理をするべきです。
  • スクリプト – ユーザーが選択した範囲には JavaScript が関連づいているかもしれません。選択範囲を HTML として受け取る場合、セキュリティー的な理由からサーバーはでスクリプトをフィルタリングするべきです。
  • 大きな選択範囲 – アクセラレータは GET リクエストを 2048 文字までに切り縮めます。アクセラレータでより大きなデータを扱いたい場合は、POST リクエストを使う事を検討すべきです。

次のステップと、まとめ

クールなアクセラレータができたら、ぜひ にアップロードしてください。あなたのサービスとアクセラレータがより目立つための優れた方法です。

この記事がアクセラレータの作成に役立つと良いと思います。この記事へのフィードバックやアクセラレータについて考えること、また共有してよいと思う良いアイデアがあれば、ぜひコメントに書き込んでください。

ありがとうございました。
Jon Seitel
プログラム マネージャー

広告

コメントする »

まだコメントはありません。

RSS feed for comments on this post. TrackBack URI

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

WordPress.com Blog.

%d人のブロガーが「いいね」をつけました。