レベル: 中級 Uche Ogbuji (uche@ogbuji.net), Consultant, Fourthought, Inc.
2007年 8月 07日 Web 2.0 は、驚くような新しい発明をベースにしているのではなく、長年の Web 技術に改めて重点を置いていることで有名です。そんな Web 2.0 での復活を謳歌している Web 技術の 1 つとしては、ブックマークレットが挙げられます。ブックマークレットは基本的には、通常のブラウザー・ブックマークに押し込められた Web アプリケーションです。この記事では、完全に機能する 1 つのブックマークレットとそのインストール手順を紹介します。このブックマークレットを使えば、あらゆる Web ページでテキストを強調表示して、そのテキストを IBM developerWorks で検索することが可能になります。
ユーザーと開発者の観点から重要な Web 2.0 サイトを紹介してきた今までの「真の Web 2.0」では、カスタマイズした Web エクスペリエンスを作成するためのデータ共有に関する機能に重点を置いてきました。そのなかで最初に取り上げた重要なサイトは del.icio.us で、次に Digg と Reddit です。これから数回の記事では、このようなサイトを全体的に見て特徴を捉えていきたいと思います。これらの多種多様なサイトで共通して使用しているツールやテクニックには、ユーザーと開発者両方の読者に役立つものがあるからです。今回はそのうちの 1 つ、ブックマークレットを紹介します。
特殊な力を備えたブックマーク
Web ブラウザーについての知識があれば、ブックマークについてもご存知だと思いますが、ブックマークを使ってできることは別のサイトへの静的リンクだけではないいうことは、おそらくあまり知られていないと思います。javascript: という特殊な URL スキーマを使えば、ほとんどすべての類の Web ブラウザーがサポートする特殊な形式のリンクを使用することができるのです。このリンクの後には、ECMAScript (JavaScript とも呼ばれます) のステートメントを 1 つ以上配置することができます。ECMAScript を使用すればさまざまな操作を実行できるため、この手法を使えば、ブックマークのごとく簡単でしかも強力なツールを開発してインストールすることが可能になります。Java™ 技術が登場した十数年前、ブラウザーから立ち上げた Java コードで可能なリッチな機能を説明するために「アプレット」という言葉が生み出されました。それから程なくして「サーブレット」という言葉が登場し、そのような機能をブラウザーではなくサーバーで提供した場合を表すようになりました。「ブックマークレット」はこの命名法にならった言葉で、ブックマーク (リンク) の範囲内で利用可能な拡張機能を表します。ブックマークレットが実行されるのは、例えば Java アプレットと同じくブラウザー上のみです。ブックマークレットはあたかもページ自体のスクリプトのステートメントにロードされているかのように実行されるため、Web のエクスペリエンスをカスタマイズし、サーバー・サイドから制御を取り戻すには強力なツールとなります。ブックマークレットに適した作業は以下を含め、数多くあります。
- ブックマーク・サービスや検証サービスなどの Web ベースのツールにページをサブミットする
- ページからデータを照会して、そのデータを Web ベースのツールにサブミットする
- ページのコンテンツ、表示、またはナビゲーションを操作する
- ページを分析して有益な情報と統計を表示する
- オーディオやビデオの再生、一時停止など、動的 Web ページの機能を制御する
一般的に、上記の作業は、実在する Web 2.0 サービスが必要としている内容をカバーしているため、ブックマークレットは Web 2.0 のサイトでブラウザー機能を提供する手段としてよく使用されるようになっています。その一例として、del.icio.us、Digg、Reddit などのリンク・サイトを見ると、ページのサブミットにはブックマークレットが使われています。このようなブックマークレットをボタンとしてブラウザーのブックマーク・ツールバーに配置すれば、Web 上のあらゆるページから、ボタンをクリックして該当するリンク・サイトにページをサブミットできるようになります。実際、ブックマークレットを使用することで、最小限のプログラミング作業でブラウザー自体に機能を追加することが可能になります。さらに、そのニーズを満たすブックマークレットを誰かがすでに作成しているのであれば、プログラミングの必要さえありません。
基本的なブックマークレットの例
この単純な例で紹介する「del.icio.us に投稿」ボタンは、del.icio.us サイトがユーザーにブックマーク・ツールバーに追加するよう奨励しているブックマークレットです。リスト 1 はこのブックマークレットのフォームですが、空白を追加してあります。
リスト 1. del.icio.us に投稿するためのブックマークレット
javascript:location.href=
'http://del.icio.us/post?v=4;url='
+ encodeURIComponent(location.href)
+ ';title='
+ encodeURIComponent(document.title)
|
実際のブックマークレットは、上記のような空白は一切なく、すべてが 1 行につながっています。上記は、ブラウザーに新規ページのロードを指示する location.hrefを単純に再配置したものです。続く 3 行では、現行のページ位置とタイトルをクエリー・パラメーターとして指定し、del.icio.us サービスの構造に従って新規 URL を構成しています。Web ベースのサービスを呼び出すブックマークレットの多くは、目的のサービスが単純な URL ベースの API を提供する限り、このように単純なものです。この del.icio.us の例では、「GET」に対してサービスを利用できるようにしています。GET は、リンクをクリックしたり、ブラウザーの URL バーに入力したときに行われる Web アクセスの形式です。場合によっては、サービスが「POST」として提供されるだけのこともあります。これはブラウザーでフォームをサブミットすると行われる Web アクセスの形式で、このようなサービスもブックマークレットで呼び出すことも可能ですが、その場合は遥かに難しくなります。ここで注意として言っておきますが、この例は Web コーディングのプラクティスとしてはおそらく最善ではありません。del.icio.us には本来なら「POST」が必要だからです。簡単に言えば、「GET」は URL の呼び出しで実質的に Web リソースの状態が変更されない場合を対象としていますが、この例ではエントリーが del.icio.us データベースに追加されることによって状態が変更されます。このような場合、Web の専門家であれば「POST」を使用するほうを選択するはずです。
IBM developerWorks 検索ブックマークレット
次の例は前よりも高度なブックマークレットで、IBM developerWorks 検索エンジンに他のあらゆるページからアクセスしやすくするために私が作成したものです。例えば、技術関連のニュース・サイトを検索していて「Dojo」という言葉が出てきたとします。この言葉の意味がわからないとしたら、Dojo という単語を選択してこのブックマークを呼び出せば、IBM developerWorks の至るところで掲載されている Dojo 関連の情報を見つけることができます。リスト 2 は、見やすく整形したこのブックマークレットのコードです。
リスト 2. 見やすく整形した「developerWorks 検索」ブックマークレット
/* Get the query string from selected text */
/* Made a bit complicated by cross-browser compatibility concerns */
q = '' + (
window.getSelection ? window.getSelection() : document.getSelection
? document.getSelection() : document.selection.createRange().text
);
/* If there is no text selected, prompt the user */
if (!q)
q = prompt('Enter a search phrase on IBM developerWorks:', '');
if (q!=null){
/* Construct the basic string for IBM developerWorks searches */
dWsearch = 'http://www.ibm.com/developerworks/search/searchResults.jsp?'
+ 'searchType=1&'
+ 'searchSite=dW&'
+ 'searchScope=dW&'
+ 'Search.x=0&Search.y=0&'
+ 'Search=Search&';
/* Escape spaces in the query string and then go to the constructed page */
location.href = dWsearch + 'query=' + escape(q).replace(/ /g, '+');
}
void 0
|
リスト 2 はリスト 1 よりも長い ECMAScript ルーチンで、1 行ではありません。リスト 2 の先頭に javascript: を付けて、すべての改行とその他の空白の大部分を削除すると、ブックマークレットになります。私が見たブックマークレットにはリスト 2 の 2 倍の長さになるものもありました。つまり、リスト 2 のやり方に習えば、どんな複雑なプログラミング作業も実行できるというわけです。
developerWorks 検索の動作
よく使用するブックマークレットのいくつかをブラウザーのクリックで使えるようにすれば便利だと思いませんか。そこで、このセクションではリスト 2 のブックマークレットを Mozilla Firefox でクリックして有効にする方法を説明します。リンク 2 のブックマークレットは、次のリンク developerWorks を検索に組み込みました。Firefox ブラウザーで、このリンクを右クリックして「このリンクをブックマーク」を選択し、表示されたダイアログで、ブックマークを作成するフォルダーとして「ブックマークツールバー」を選択してください。すると、各ブラウザー・ウィンドウの右上に「developerWorks を検索」というタイトルのボタンが表示されるはずです。表示されない場合は、「表示」メニューの「ツールバー」で「ブックマークツールバー」の隣にチェック・マークが付いていることを確認してください。
ブックマークレットがインストールされると、任意のページに進んでテキストを選択し、ツールバーにあるこのボタンをクリックできるようになります。テキストを選択しないでボタンをクリックすると、プロンプトが表示されます。このプロンプトを示しているのが、図 1 のスクリーン・ショットです。プロンプト・ダイアログ・ボックスの左側を見ると、ツールバーにこのブックマークレットがあり、そして他にもよく使うブックマークレットをまとめるためのツールバー・エントリーがあるのがわかります。
図 1. developerWorks 検索ブックマークレットの動作
まとめ
Web 2.0 の全体像のなかで重要な部分を占めるブックマークレットは、私がこの記事で焦点を当てようとしている Web 2.0 技術の品質、透過性と開放性を例証するものです。ブックマークレットについては折に触れてまた取り上げようと思います。それまでの間、ECMAScript の経験が少しでもあるなら、Web ページの機能拡張を実験、開発、デプロイする優れた方法としてブックマークレットを使ってみてください。ECMAScript 開発者でないとしても、他の人たちが開発した多数のブックマークレットを活用できるはずです。
参考文献 学ぶために
製品や技術を入手するために
議論するために
著者について  | 
| | Uche Ogbuji氏は、Fourthought, Inc. のコンサルタント兼共同設立者です。この会社は、企業のナレッジ・マネジメントのためのXMLソリューションを専門とするソフトウェア・ベンダー兼コンサルタント会社です。Fourthoughtでは、XML、RDF、およびナレッジ・マネジメント・アプリケーション用のオープン・ソース・プラットフォームである4Suiteを開発しています。Ogbuji氏は、ナイジェリア出身のコンピューター・エンジニア兼ライターで、現在は、米国コロラド州ボールダーに住み、そこで働いています。Ogbuji氏の連絡先はuche.ogbuji@fourthought.com です。 |
記事の評価
| 
