ユーザーと開発者の観点から重要な 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 はこのブックマークレットのフォームですが、空白を追加してあります。

                
 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 は、見やすく整形したこのブックマークレットのコードです。

                
/* 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 のスクリーン・ショットです。プロンプト・ダイアログ・ボックスの左側を見ると、ツールバーにこのブックマークレットがあり、そして他にもよく使うブックマークレットをまとめるためのツールバー・エントリーがあるのがわかります。

上に戻る

まとめ

Web 2.0 の全体像のなかで重要な部分を占めるブックマークレットは、私がこの記事で焦点を当てようとしている Web 2.0 技術の品質、透過性と開放性を例証するものです。ブックマークレットについては折に触れてまた取り上げようと思います。それまでの間、ECMAScript の経験が少しでもあるなら、Web ページの機能拡張を実験、開発、デプロイする優れた方法としてブックマークレットを使ってみてください。ECMAScript 開発者でないとしても、他の人たちが開発した多数のブックマークレットを活用できるはずです。

参考文献

学ぶために

• チュートリアル「User annotations in Ajax」(Greg Travis 著) にブックマークレットについての有益な情報が記載されています。
  
  
• developerWorks technical events and webcasts で最新情報を入手してください。
  
  
• developerWorks Web development ゾーンの Web 技術を専門とした記事やチュートリアルで、サイト開発の腕を磨いてください。この連載のすべての記事もここに記載されています。
  
  
• developerWorks Web 開発ニュースレターに サブスクライブしてください。
  
  

製品や技術を入手するために

• Bookmarklets ホーム・ページや Jesse's Bookmarklets Site などの従来のサイトで使用しているブックマークレットの多くは古いものですが、時間をかけて証明されたものなので今でも有益です。Stephen Ostermiller のコレクションは、数は少ないながらも最近のブックマークレットが揃っています。
  
  
• この記事で説明した del.icio.us のブックマークレットを調べてください。
  
  
• IBM 製品の評価版をダウンロードしてください。
  
  

議論するために

• ディスカッション・フォーラムに参加してください。
  
  
• developerWorks コミュニティーに参加してください。ここにはブログ、フォーラムなど盛りだくさんの内容が揃っています。
  
  

著者について

Uche Ogbuji氏は、Fourthought, Inc. のコンサルタント兼共同設立者です。この会社は、企業のナレッジ・マネジメントのためのXMLソリューションを専門とするソフトウェア・ベンダー兼コンサルタント会社です。Fourthoughtでは、XML、RDF、およびナレッジ・マネジメント・アプリケーション用のオープン・ソース・プラットフォームである4Suiteを開発しています。Ogbuji氏は、ナイジェリア出身のコンピューター・エンジニア兼ライターで、現在は、米国コロラド州ボールダーに住み、そこで働いています。Ogbuji氏の連絡先はuche.ogbuji@fourthought.com です。

この記事を評価する

コメント

上に戻る

目次

• 特殊な力を備えたブックマーク
• 基本的なブックマークレットの例
• IBM developerWorks 検索ブックマークレット
• まとめ
• 参考文献
• 著者について
• コメント