User Tools

Site Tools


bookmarklet-mashup

リングブックマークレット (Mashupバージョン)

Overview

ウェブブラウジングをしていて、「そういえばこれちょっとWikipediaで調べてみたい!」とか、「この街のお店でいいところないかな?」とか、「勝間和代さん、これについてどう思っているかな?」なんて思うことはありませんか?

もちろんその都度検索をすることはできます。でもせっかくHTML5なこの時代なんだから、もう少しスマートな検索体験ができないだろうか、私たちはそう考えました。

そこで作ったのがこのリングブックマークレットです。以下のリンクをブックマークに追加すると、あなたが見ているどのウェブページからでもリング状のメニューを呼び出し、瞬時にさまざまなツールで検索などを行うことができます。興味のある単語をハイライトしてブックマークレットを呼び出すと、どこか聖剣伝説2(スクエア・エニックスのゲーム)で聞いたこと・見たことのあるようなアニメーションと音と共にリング状のメニューが飛び出します。あとは好きなアイコンを選んで進んで行くだけで、ウェブをスマートに使いこなせます。

→→→→→これをブックマーク!←←←←←

ほとんどのブラウザでアニメーションは動きますが、Sound Effectを使うためにはHTML5対応ブラウザ(Safari 4, Firefox 3.5, Chromeなど)をお使いください。

操作方法

  • リングメニューの起動: ブックマークレットをブラウザのブックマークリスト(あるいばブックマークバー)から起動してください。ブラウジング中のウェブサイトでキーワードをハイライトしておけばそれが検索語として使えます。ハイライトがない場合、ブックマークレットが検索に使う単語を聞いてきます。Safariでは、ブックマークバーに登録したリンクにはCommand+数字のショートカットが使えて便利です。例えば、ブックマークバーの一番左の項目としてリングブックマークレットを登録しておくと、Command+1で起動できます。
  • リングの回転: マウスのスクロールホイール、キーボードの左右の矢印キー(←と→)でリングを回転します。iPadやiPhoneから利用する場合は、2本指でそのまま回転できます。
  • アイテムの選択: 直接アイコンを2回クリックするか、エンターキーを押して下さい。
  • リングを一つ戻る: 上キーを押すか、iPad/iPhoneではピンチインジェスチャーをしてください。
  • リングの解放: マウスカーソルをリングの外に移動するか、ESCキーを押すか、iPad/iPhoneの場合ピンチアウトジェスチャーをしてください。

リングの内容

キーワード検索系

  1. Google: 言わずと知れたGoogle検索。なんでもGoogle先生に聞きましょう。
  2. YouTube: 言わずと知れた動画サイト。話題の動画をチェック!
  3. Wikipedia: こちらも言わずと知れた百科事典。詳しく知りたいことがあったらここへ。
  4. 英辞郎: 英語が分からないときはここ。英語の単語なら英和辞典、日本語の単語なら自動的に和英辞典で検索します。
  5. Cookpad: 今夜のレシピはもう決まりましたか?"じゃがいも"みたいに食材で検索してもよし、"ソテー"みたいに料理法でもよし、美味しいものをつくりましょう:)
ショッピング系

  1. 楽天市場: どんなものでもまずは楽天で最安値をチェック!
  2. Amazon.co.jp: 最近は本以外も充実しているAmazon。配送料も無料になりました。
街の情報系

hotpepper.jpg

  1. ぐるなび: 例えば「新宿」で検索して、"300m以内"を選べば、週末の飲み会幹事もバッチリ!
  2. BAR-NAVI: 「六本木」で検索して、"100m以内"で出来る男のデートを演出?!
  3. Hot Pepper: 「渋谷」で検索して、"300m以内"でお得なお店を予約しちゃいましょう!
  4. eruca: 「銀座」で検索して、"500m以内"で新しいお店と出会えるかな?
  5. じゃらん: 「箱根」などの温泉地名で検索してのんびりした週末をプラン!(温泉APIなので温泉地限定です)
その他

  1. Yahooカテゴリ: Yahooカテゴリをキーワード検索できます。
  2. 勝間和代Tweet: 勝間さんのTweetをキーワード検索できます。勝間さんは「ブログ」や「Twitter」に関して何を思っていらっしゃるでしょうか。
  3. SAGOOL: WebとVideoから面白いネタを探しましょう。
  4. R25: R25の記事を検索できます。「マーケティング」や「Twitter」の最新事情をチェック!

Code

以下をURLにしたブックマークを作成してください。

javascript:(function(){var%20url='http://www.g-language.org/cube/cube.cgi?openWindow=0&useAudio=1&id=mashup';if(!url.match(/\?/))url+='?t='+(new%20Date()).getTime();var%20d=document;var%20e=d.createElement('script');e.charset='UTF-8';e.src=url;d.getElementsByTagName('head')[0].appendChild(e);})();

License

MIT Licenseによる提供です。

Acknowledgements

リングブックマークレットは、ぐるなび、Bar-Navi、Yahooカテゴリ、SAGOOL、R25、じゃらんのAPI、そして勝間和代さんのTweetを利用させていただいています。

ホットペッパー Webサービス

また、リングコマンドのアイディアは、スクエアエニックス(株)のゲーム、聖剣伝説2にインスパイアされています。

基本となるJavascriptの実装は NavigationRingに基づいています.

Sound Effectは SKLaunch のデータを使わせていただいています。.

bookmarklet-mashup.txt · Last modified: 2014/01/18 07:44 (external edit)