User Tools

Site Tools


bookmarklet-mashup

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

bookmarklet-mashup [2010/11/09 02:55]
admin
bookmarklet-mashup [2014/01/18 07:44]
Line 1: Line 1:
-====== リングブックマークレット (Mashupバージョン)====== 
-===== Overview ===== 
-ウェブブラウジングをしていて、「そういえばこれちょっとWikipediaで調べてみたい!」とか、「この街のお店でいいところないかな?」とか、「勝間和代さん、これについてどう思っているかな?」なんて思うことはありませんか? 
  
-もちろんその都度検索をすることはできます。でもせっかくHTML5なこの時代なんだから、もう少しスマートな検索体験ができないだろうか、私たちはそう考えました。 
- 
-そこで作ったのがこのリングブックマークレットです。以下のリンクをブックマークに追加すると、あなたが見ているどのウェブページからでもリング状のメニューを呼び出し、瞬時にさまざまなツールで検索などを行うことができます。興味のある単語をハイライトしてブックマークレットを呼び出すと、どこか<​del>​聖剣伝説2(スクエア・エニックスのゲーム)</​del>​で聞いたこと・見たことのあるようなアニメーションと音と共にリング状のメニューが飛び出します。あとは好きなアイコンを選んで進んで行くだけで、ウェブをスマートに使いこなせます。 
- 
- 
-<​html>​ 
-→→→→→<​a href=" 
-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);​})();​ 
-">​これをブックマーク!</​a>​←←←←← 
-</​html>​ 
- 
- 
-ほとんどのブラウザでアニメーションは動きますが、Sound Effectを使うためにはHTML5対応ブラウザ(Safari 4, Firefox 3.5, Chromeなど)をお使いください。 
- 
-{{http://​www.g-language.org/​cube/​screen.png?​600|}} 
-===== 操作方法 ===== 
-  * **リングメニューの起動**:​ ブックマークレットをブラウザのブックマークリスト(あるいばブックマークバー)から起動してください。ブラウジング中のウェブサイトでキーワードをハイライトしておけばそれが検索語として使えます。ハイライトがない場合、ブックマークレットが検索に使う単語を聞いてきます。Safariでは、ブックマークバーに登録したリンクにはCommand+数字のショートカットが使えて便利です。例えば、ブックマークバーの一番左の項目としてリングブックマークレットを登録しておくと、Command+1で起動できます。 
-  * **リングの回転**:​ マウスのスクロールホイール、キーボードの左右の矢印キー(←と→)でリングを回転します。iPadやiPhoneから利用する場合は、2本指でそのまま回転できます。 
-  * **アイテムの選択**:​ 直接アイコンを2回クリックするか、エンターキーを押して下さい。 
-  * **リングを一つ戻る**:​ 上キーを押すか、iPad/​iPhoneではピンチインジェスチャーをしてください。 
-  * **リングの解放**:​ マウスカーソルをリングの外に移動するか、ESCキーを押すか、iPad/​iPhoneの場合ピンチアウトジェスチャーをしてください。 
-===== リングの内容 ===== 
-== キーワード検索系 == 
- 
-{{http://​www.g-language.org/​cube/​icons/​google.png?​57}} 
-{{http://​www.g-language.org/​cube/​icons/​youtube.png?​57}} 
-{{http://​www.g-language.org/​cube/​icons/​wikipedia.png?​57}} 
-{{http://​www.g-language.org/​cube/​icons/​eijiro.png?​57}} ​ 
-{{http://​www.g-language.org/​cube/​icons/​cookpad.png?​57}} ​ 
- 
-  - **Google**: 言わずと知れたGoogle検索。なんでもGoogle先生に聞きましょう。 
-  - **YouTube**:​ 言わずと知れた動画サイト。話題の動画をチェック! 
-  - **Wikipedia**:​ こちらも言わずと知れた百科事典。詳しく知りたいことがあったらここへ。 
-  - **英辞郎**:​ 英語が分からないときはここ。英語の単語なら英和辞典、日本語の単語なら自動的に和英辞典で検索します。 
-  - **Cookpad**:​ 今夜のレシピはもう決まりましたか?"​じゃがいも"​みたいに食材で検索してもよし、"​ソテー"​みたいに料理法でもよし、美味しいものをつくりましょう:) 
- 
-== ショッピング系 == 
- 
-{{http://​www.g-language.org/​cube/​icons/​rakuten.png?​57}} 
-{{http://​www.g-language.org/​cube/​icons/​amazon.png?​57}} 
- 
-  - **楽天市場**:​ どんなものでもまずは楽天で最安値をチェック! 
-  - **Amazon.co.jp**:​ 最近は本以外も充実しているAmazon。配送料も無料になりました。 
- 
-== 街の情報系 == 
-{{http://​www.g-language.org/​cube/​icons/​grunavi.png?​57}} 
-{{http://​www.suntory.co.jp/​enjoy/​img/​link_03.gif?​57}} 
-{{http://​www.infoatmackers.jp/​weblog/​img/​hotpepper.jpg?​57}} 
-{{http://​www.g-language.org/​cube/​icons/​eruca.png?​57}} 
-{{http://​www.g-language.org/​cube/​icons/​jalan.png?​57}} 
- 
-  - **ぐるなび**:​ 例えば「新宿」で検索して、"​300m以内"​を選べば、週末の飲み会幹事もバッチリ! 
-  - **BAR-NAVI**:​ 「六本木」で検索して、"​100m以内"​で出来る男のデートを演出?! 
-  - **Hot Pepper**: 「渋谷」で検索して、"​300m以内"​でお得なお店を予約しちゃいましょう! 
-  - **eruca**: 「銀座」で検索して、"​500m以内"​で新しいお店と出会えるかな? 
-  - **じゃらん**:​ 「箱根」などの温泉地名で検索してのんびりした週末をプラン!(温泉APIなので温泉地限定です) 
- 
-== その他 == 
-{{http://​www.g-language.org/​cube/​icons/​yahoo.png?​57}} 
-{{http://​www.g-language.org/​cube/​icons/​kazuyo.png?​57}} 
-{{http://​www.g-language.org/​cube/​icons/​sagool.png?​57}} 
-{{http://​www.g-language.org/​cube/​icons/​r25.png?​57}} 
-  - **Yahooカテゴリ**: ​ Yahooカテゴリをキーワード検索できます。 
-  - **勝間和代Tweet**:​ 勝間さんのTweetをキーワード検索できます。 
-  - **SAGOOL**: WebとVideoから面白いネタを探しましょう。 
-  - **R25**: R25の記事を検索できます。 
- 
-===== Code ===== 
-以下をURLにしたブックマークを作成してください。 
-<​code>​ 
-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);​})();​ 
-</​code>​ 
- 
-===== License ===== 
- 
-MIT Licenseによる提供です。 
- 
-===== Acknowledgements ===== 
- 
-リングブックマークレットは、ぐるなび、Bar-Navi、Yahooカテゴリ、SAGOOL、R25、じゃらんのAPI、そして勝間和代さんのTweetを利用させていただいています。 
- 
-<​html>​ 
-<a href="​http://​webservice.recruit.co.jp/"><​img src="​http://​webservice.recruit.co.jp/​banner/​hotpepper-s.gif"​ alt="​ホットペッパー Webサービス"​ width="​135"​ height="​17"​ border="​0"​ title="​ホットペッパー Webサービス"></​a>​ 
-</​html>​ 
- 
-また、リングコマンドのアイディアは、スクエアエニックス(株)のゲーム、聖剣伝説2にインスパイアされています。 
- 
-基本となるJavascriptの実装は [[http://​nyatla.jp/​ws/​nr/​|NavigationRing]]に基づいています. 
- 
-Sound Effectは [[http://​hp.vector.co.jp/​authors/​VA030448/​|SKLaunch]] のデータを使わせていただいています。. 
bookmarklet-mashup.txt · Last modified: 2014/01/18 07:44 (external edit)