ウェブページにコメントやハイライトを付けて他人と共有できる「Hypothesis」を実際に使ってみた

ウェブサイトの文章を読んでいると、分からなかったことや疑問に思ったことをメモしたり、誰かに聞いてみたりしたいと思うことがあります。そんな時にウェブページ上の任意のテキストに対し、自由に「ウェブ・アノテーション」を付与&閲覧ができる「Hypothesis」を実際に使ってみました。
Hypothesis – The Internet, peer reviewed.
https://web.hypothes.is/
本来「アノテーション(Annotation)」とは英語で「注記、注釈」という意味を持ちますが、ここでのアノテーションとは注釈だけにとどまらず、ハイライトやタグ付けなどの情報も含む広い意味を持ちます。テキストや動画、画像などのデジタルコンテンツに、作者や管理者以外もアノテーションをつけられるようにする枠組を「オープン・アノテーション」と呼び、この枠組をインターネット上に応用し、ウェブサイトのテキストを改変せずにコメントやハイライトを共有できるサービスが「Hypothesis」というわけ。
◆導入
公式サイトの「Get started」をクリック。

まずはHypothesisにアカウントを登録する必要があります。「1:Sign up to anotate」の欄の下にある「a free account」という場所をクリック。

ユーザー名とメールアドレス、パスワードを設定したら「Sign up」をクリック。登録したアドレスに届いたメールからアカウントを有効化しなければならないので注意が必要。

登録したらトップページにジャンプするので、右上の「Log in」をクリック。

先ほど登録したメールアドレスとパスワードを用いてログインします。

ログインに成功したら、Hypothes.isのアノテーションサービスを利用するための拡張を追加。Chromeを使用している場合は「Install our chrome extension」をクリック。

拡張のページに誘導されるので、「CHROMEに追加」をクリック。

再度確認されるので、「拡張機能を追加」をクリック。これで準備完了です。

ちなみに、Chrome以外のブラウザでも、ブックマークレット経由で利用することが可能です。「Get started.」のページに戻り、「other browsers」をクリック。

「LAUNCH HYPOTHESIS」と書かれたアイコンをそのままブックマークツールバーにドラッグ&ドロップして登録すれば準備完了。

◆使い方
まずは実際にWebページのテキストにコメントをつけてみます。今回は例としてiPhone Xの公式サイトを用います。Hypothes.isを利用する場合は、Chromeなら左上のふきだし型アイコンをクリック。Firefoxなどその他のブラウザであれば、登録したブックマークレットをクリックすればOK。

拡張やブックマークレットを有効にすると、ブラウザの右端に3つのボタンが表示されます。

テキストを選択するとサブメニューが出てくるので「Annotate」をクリック。「Highlight」をクリックした場合はテキストにハイライトのみがつきます。

テキストに黄色いハイライトがつき、サイドバーが展開されます。コメントや注釈、解説などを入力したら、「Post to Public」をクリック。これでウェブ・アノテーションの付与は完了。

ページを再読込すると、右上のアイコンに「1」という通知バッジ。

さらにコメントをつけたテキストには黄色いハイライトがついており、ハイライトをクリックするとサイドバーが展開し、先ほどつけたコメントがきちんと表示されました。

ブラウザ右端にあったボタンのうち、真ん中の目のアイコンをクリックすると、黄色のハイライトのON/OFFを切り替えることができます。

もちろんついているコメントに対する返信をつけることも可能。ゴミ箱の右にあるアイコンをクリックすると返信入力欄が表示、コメントをつけた他ユーザーとコミュニケーションを取ることもできます。

つけたコメントは削除も可能。ゴミ箱のアイコンをクリックしたら確認ウィンドウが現れるので、OKをクリックすれば無事削除されます。

Hypothesis公式サイトのトップページで拡張を有効化すると、全てのテキストにハイライトがつきまくり。1つの単語に複数のハイライトが重なると、黄色から緑色へと濃くなっています。サイドバーを展開すると山のようなコメント。その中には他人からのレスポンスもついているものもあり、TwitterなどのSNSで見られるようなコミュニケーションが行われていました。

ただし、ひとつのページにたくさんコメントがついているとかなり動作が重くなってしまい、Firefox版ではスクリプトがエラーを起こしてしまいました。一度スクリプトを停止し、ページを読み込み直すのがベター。

「Hypothesis」が発展途上であるためか、ユーザーやアノテーションの量はまだ少ないですが、世界中に公開されているウェブページにコメントをつけて共有するというのはやはり面白いサービス。「Hypothesis」にアカウントを登録して拡張を導入さえすれば、誰でもウェブ・アノテーションを閲覧・共有できるというハードルの低さも魅力で、今後の展開が期待されます。
・関連記事
ホーキング博士の博士論文がオンラインで無料公開されて人が殺到しケンブリッジ大学のサイトがダウン - GIGAZINE
ウェブページに蛍光ペンで線を引いてハイライトをSNSライクに共有できるネットサービス「txtpen」 - GIGAZINE
論文海賊版サイトSci-Hubでは世の中の論文のほとんどがアップロードされ閲覧可能になっている - GIGAZINE
画像にアノテーション機能でコメントをつけチームでフィードバックを共有できる「Visualtip」 - GIGAZINE
オンライン掲示板redditで行われたエイプリルフールの全員参加型アート作成企画がスゴイ - GIGAZINE
・関連コンテンツ
in レビュー, ネットサービス, Posted by log1i_yk
You can read the machine translated English article I actually tried using "Hypothesis" whic….