EN
ホーム 記事一覧 ブック DH週間トピックス 検索 このサイトについて
English
ホーム » Tags

アノテーション

アノテーション・注釈技術

Hypothes.is：W3C準拠のオープンソースWebアノテーションツール

Hypothes.is：W3C準拠のオープンソースWebアノテーションツール

はじめに テキストの精読と注釈付けは、人文学研究における基本的な営みです。デジタル時代において、この営みをWebの文脈で実現するツールが求められています。 Hypothes.is は、あらゆるWebページにハイライトやコメントを付けられるオープンソースのアノテーションツールです。W3C Web Annotation標準に準拠しており、教育・研究・ジャーナリズムなど幅広い分野で利用されています。BSDライセンスで公開されています。 Hypothes.isの主な特徴 W3C Web Annotation標準への準拠 Hypothes.isは、W3C（World Wide Web Consortium）が策定したWeb Annotation標準に準拠しています。これにより、アノテーションデータの相互運用性が確保され、他のツールやプラットフォームとのデータ交換が可能です。 あらゆるWebページへの注釈 ブラウザ拡張機能やブックマークレットを使って、任意のWebページにハイライトやコメントを追加できます。PDFファイルへのアノテーションにも対応しています。注釈はHypothes.isのサーバーに保存され、同じURLを閲覧する他のユーザーと共有できます。 グループ機能 プライベートグループを作成し、メンバー間でアノテーションを共有できます。ゼミや研究グループでの共同読解に最適です。公開・グループ限定・個人のみの3段階の公開範囲を設定できます。 オープンソースとAPI Hypothes.isはオープンソースプロジェクトであり、ソースコードがGitHubで公開されています。APIも提供されており、アノテーションデータのプログラマティックな取得・操作が可能です。 DH研究での活用例 共同テキスト読解 文学作品やhistorical documentsのデジタルテキストに対して、研究グループのメンバーがそれぞれ注釈を付け、議論できます。異なる解釈や気づきを共有することで、テキストの多角的な理解が深まります。 デジタルソースの批判的分析 Webで公開されている一次資料やデジタルアーカイブのコンテンツに対して、批判的な注釈を付けられます。資料の信頼性評価や文脈の補足など、研究上の知見をソース上に直接記録できます。 教育でのアクティブリーディング 大学の授業において、学生が教材のWebページやPDFに注釈を付けながら読む「アクティブリーディング」を促進できます。教員は学生の注釈を確認し、理解度の把握やフィードバックに活用できます。 学術論文へのオープンアノテーション オープンアクセスの学術論文に対して、研究コミュニティがオープンにコメントや質問を付けるピアレビューの仕組みとして活用されています。従来の査読プロセスを補完する新しい学術コミュニケーションの形です。 基本的な使い方 アカウント作成: hypothes.is でアカウントを作成します ブラウザ拡張機能のインストール: Chrome拡張機能をインストールするか、ブックマークレットを追加します Webページの閲覧: 注釈を付けたいページを開き、Hypothes.isを有効にします テキストの選択: ハイライトしたいテキストを選択し、注釈やハイライトを追加します 共有: 公開範囲を設定し、注釈を保存・共有します LMS連携 Hypothes.isは、主要なLMS（Learning Management System）との連携に対応しています。 Canvas: LTI連携による統合 Moodle: プラグインによる統合 Blackboard: LTI連携 これにより、教育機関のeラーニング環境にシームレスにアノテーション機能を組み込めます。 APIの活用 Hypothes.isのAPIを使うことで、アノテーションデータを活用した高度な分析が可能です。 GET https://api.hypothes.is/api/search?url=https://example.com 特定のURLに付けられたすべてのアノテーションを取得し、テキストマイニングやネットワーク分析に活用できます。Pythonなどのスクリプト言語から簡単にアクセスでき、大量のアノテーションデータの分析も可能です。 まとめ Hypothes.isは、Webをアノテーションのレイヤーで拡張するオープンソースツールです。W3C標準への準拠によりデータの相互運用性が確保され、教育から研究まで幅広い用途に対応します。DH研究において、テキストの共同読解やデジタルソースの分析に欠かせないツールです。 参考リンク Hypothes.is 公式サイト Hypothes.is API ドキュメント W3C Web Annotation

2026年3月15日 · 1 分 · Nakamura
TETRAS-IIIF：Mirador 4向けアノテーション・動画・マルチユーザー拡張

TETRAS-IIIF：Mirador 4向けアノテーション・動画・マルチユーザー拡張

TETRAS-IIIFとは TETRAS-IIIFは、フランスのオープンソース企業Tetras Libre SARLを中心に開発が進められている、Mirador 4向けのプラグイン・ツール群です。アノテーション編集、動画対応、マルチユーザー協調など、Miradorの機能を大幅に拡張する複数のプロジェクトで構成されています。 従来のmirador-annotationsプラグインの課題を解決し、最新のReact 18/19、MUI 5/7に対応した次世代のアノテーション基盤を提供しています。 Mirador Annotation Editor（MAE） 概要 Mirador Annotation Editor（MAE）は、Mirador 4向けのアノテーション作成・編集プラグインです。従来のmirador-annotationsの後継として位置づけられており、Apache 2.0ライセンスで公開されています。 デモ: https://tetras-iiif.github.io/mirador-annotation-editor/ npm: mirador-annotation-editor 主な特徴 Konva.jsベースの描画エンジン mirador-annotationsがPaper.jsを使用していたのに対し、MAEはKonva.jsを採用しています。矩形、楕円、ポリゴン、フリーハンドなどの図形描画に加え、テキストや画像のオーバーレイにも対応しています。 テンプレートシステム MAEの特徴的な機能として「テンプレート」があります。アノテーションの構造をあらかじめ定義しておくことで、統一的なフォーマットでのアノテーション作成が可能になります。たとえば、コメントテンプレートでは見出しと本文を含むHTML構造が自動的に生成されます。 Dublin Coreメタデータ アノテーションにDublin Coreベースのメタデータを付与できます。作成者、日付、言語などの標準的なメタデータフィールドにより、アノテーションの管理・検索が容易になります。 アダプターアーキテクチャ アノテーションの永続化について柔軟なアダプター機構を備えています。ローカルストレージへの保存は標準で提供されており、IIIFアノテーションサーバーへの接続も可能です。 クロスマニフェストリンク 異なるマニフェスト間でアノテーションをリンクする機能を持ちます。これにより、複数のIIIFドキュメントにまたがるアノテーションのネットワークを構築できます。 MAEV（Mirador Annotation Editor for Video） 概要 MAEVは、MAEの機能を動画にまで拡張したプラグインです。IIIF Presentation API 3.0の動画コンテンツに対して、空間的・時間的なアノテーションを付与できます。 デモ: https://tetras-iiif.github.io/mirador-annotation-editor-video/ npm: mirador-annotation-editor-video ライセンス: GPL-3.0 動画アノテーションの特徴 動画アノテーションでは、画像アノテーションの空間的なターゲティング（画面上のどこ）に加えて、時間的なターゲティング（いつ）が可能です。特定の時刻範囲に限定したアノテーションを作成でき、動画の再生に合わせてアノテーションが表示されます。 MAEVの利用にはmirador-videoフォークが必要です。 mirador-video mirador-videoは、Mirador 4のフォークで、動画の表示・アノテーション・フィルタリング機能を追加したものです。React 18/19およびMUI 7に対応しており、Apache 2.0ライセンスで公開されています。 npmのエイリアス機能を使って、通常のMiradorの代わりにインストールできます。 npm install mirador@npm:mirador-video@^1.2.8 Mirador Multi User（MMU） 概要 Mirador Multi User（MMU）は、Miradorをマルチユーザー対応の協調ワークスペースに拡張するプラットフォームです。AGPL-3.0ライセンスで公開されています。 ライブインスタンス: https://app.mirador-multi-user.com/ Webサイト: https://www.mirador-multi-user.com/ 主な機能 ユーザー管理: ユーザーの登録・認証・権限管理 メディアコレクション管理: IIIFマニフェストの整理と共有 プロジェクトスナップショット: ワークスペースの状態を保存・復元 タグとテンプレート: プロジェクト単位でのアノテーションテンプレート管理 管理ダッシュボード: 利用状況の監視と管理 バックエンドはNestJSで構築され、MariaDBをデータベースとして使用しています。Docker/Caddyによるデプロイに対応しています。 ...

2026年3月15日 · 1 分 · Nakamura
Hypothes.is APIでWebアノテーションをエクスポートしてTEI/XMLに変換する

Hypothes.is APIでWebアノテーションをエクスポートしてTEI/XMLに変換する

はじめに Hypothes.isは、Webページ上にハイライトやコメントを付けられるオープンソースのアノテーションツールです。ブラウザ拡張やJavaScriptの埋め込みで手軽に使えますが、蓄積したアノテーションをバックアップしたい、あるいはTEI/XMLなど別の形式で活用したいケースもあります。 本記事では、Hypothes.is APIを使ってアノテーションをエクスポートし、TEI/XMLに変換する方法を紹介します。 APIキーの取得 Hypothes.isにログイン Developer settings にアクセス 「Generate your API token」でAPIキーを生成 取得したキーを.envファイルに保存します。 cp .env.example .env # .env を編集してAPIキーを設定 HYPOTHESIS_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx アノテーションのエクスポート APIの基本 Hypothes.is APIのベースURLは https://api.hypothes.is/api です。認証はAuthorization: Bearer <API_KEY>ヘッダーで行います。 主要なエンドポイント: エンドポイント 用途 GET /api/profile 認証ユーザーのプロフィール取得 GET /api/search アノテーション検索 GET /api/annotations/{id} 個別アノテーション取得 スクリプト エクスポートからTEI/XML変換までを1つのスクリプト hypothes_export.py にまとめています。 https://github.com/nakamura196/hypothes-export/blob/main/hypothes_export.py 以下、主要な処理を抜粋して説明します。 .envの読み込みとAPI呼び出し def load_env(): env_path = Path(__file__).parent / ".env" with open(env_path) as f: for line in f: line = line.strip() if line and not line.startswith("#") and "=" in line: k, v = line.split("=", 1) os.environ[k.strip()] = v.strip() def api_get(endpoint, params=None): api_key = os.environ["HYPOTHESIS_API_KEY"] url = f"https://api.hypothes.is/api/{endpoint}" if params: url += "?" + urllib.parse.urlencode(params) req = urllib.request.Request(url) req.add_header("Authorization", f"Bearer {api_key}") with urllib.request.urlopen(req) as resp: return json.loads(resp.read().decode()) 全アノテーションの取得（ページネーション対応） Search APIは1リクエストあたり最大200件なので、offsetをずらして全件取得します。 ...

2026年2月28日 · 更新: 2026年2月28日 · 2 分 · Nakamura
Annotorious v2のpolygonツールを使って、polylineを作成する

Annotorious v2のpolygonツールを使って、polylineを作成する

概要 Annotorious v2のpolygonツールを使って、polylineを作成する方法の備忘録です。 背景 Annotorious v2のウェブサイトは以下です。 https://annotorious.github.io/getting-started/ 以下のように、polygonを記述することができます。 一方、同様の方法でpolylineを記述するツールは、以下のプラグインを含めて、提供されていないようでした。 https://github.com/annotorious/annotorious-v2-selector-pack カスタマイズ 以下のような多角形を作成した場合、 以下のようなJSONファイルが作成されます。 { "type": "Annotation", "body": [ { "type": "TextualBody", "value": "polygon", "purpose": "commenting" } ], "target": { "source": "https://www.e-codices.unifr.ch/loris/gau/gau-Fragment/gau-Fragment_frag001a.jp2/full/full/0/default/jpg", "selector": { "type": "SvgSelector", "value": "<svg><polygon points=\"3383.121337890625,1290.137451171875 945.135498046875,1658.426513671875 885.9696655273438,3003.352294921875 2508.54150390625,3348.424072265625 3485.021484375,2724.35791015625 2170.811767578125,2107.6337890625\" /></svg>" } }, "@context": "http://www.w3.org/ns/anno.jsonld", "id": "#c469b1a3-8902-4443-8f54-47df8bb87d7e" } 上記に対して、autoCloseのような変数を用意し、これがfalseの場合、polygonという文字列をpolylineに変更する処理を加えました。 anno.on("createAnnotation", function (selection: any) { if(!autoClose.value) { selection.target.selector.value = selection.target.selector.value.replace("polygon", "polyline"); } ... }); これにより、以下のように、polygonツールをベースとして、polygonとpolylineを使い分けることができます。 TEI/XMLでの記述 TEI/XMLでの多角形の記述例として、path要素を使用することができます。この場合、polygonであれば始点を終点の後に追加することで、多角形を表現することができます。 <facsimile> <surface ulx="0" uly="0" lrx="8176" lry="6132"> <graphic url="https://www.e-codices.unifr.ch/loris/gau/gau-Fragment/gau-Fragment_frag001a.jp2/full/full/0/default/jpg" /> <zone xml:id="layer_000" change="#ch_layer_000" n="layer_01" type="layer"> <zone xml:id="sign_layer_000_0000" change="#ch_sign_layer_000_0000" type="sign"> <!-- polygon --> <path points="1290.137451171875,3383.121337890625 1658.426513671875,945.135498046875 3003.352294921875,885.9696655273438 3348.424072265625,2508.54150390625 2724.35791015625,3485.021484375 2107.6337890625,2170.811767578125 1290.137451171875,3383.121337890625"></path> </zone> <zone xml:id="sign_layer_000_0001" change="#ch_sign_layer_000_0001" type="sign"> <!-- polyline --> <path points="1393.265625,5290.81005859375 1921.02783203125,3869.745849609375 2982.731689453125,3829.64013671875 3428.122802734375,4874.005859375 2683.244384765625,5741.7509765625 2138.024169921875,4582.19775390625"></path> </zone> </zone> </surface> </facsimile> アプリケーションによっては、始点と終点が一致しなくても閉じた図形を描くことがあるかもしれませんが、polygonとpolylineを使い分ける方法として、参考になりましたら幸いです。 ...

2025年5月5日 · 更新: 2025年5月5日 · 1 分 · Nakamura
Mirador 3のmirador-annotationsプラグインとSimpleAnnotationServerを試す

Mirador 3のmirador-annotationsプラグインとSimpleAnnotationServerを試す

概要 mirador-annotationsはアノテーションの作成ツールを追加するMirador 3のプラグインです。 https://github.com/ProjectMirador/mirador-annotations 今回、以下のSimpleAnnotationServerとの組み合わせを試してみましたので、その備忘録です。 https://github.com/glenrobson/SimpleAnnotationServer SimpleAnnotationServerの準備 以下のGetting Startedの通りに進めます。 https://github.com/glenrobson/SimpleAnnotationServer#getting-started http://localhost:8888/index.html にアクセスすると、以下の画面が表示されます。 エンドポイントは http://localhost:8888/annotation/ のようで、登録済みのアノテーションの一覧（はじめは空）が表示されます。 このエンドポイントをMirador 3から利用することになります。 Mirador 3の準備 ソースコードから 以下のサイトからソースコードをクローンして立ち上げます。 https://github.com/ProjectMirador/mirador-annotations git clone https://github.com/ProjectMirador/mirador-annotations cd mirador-annotations npm i # npm i --force が必要かもしれません npm run start http://localhost:3000/ にアクセスすると、以下の画面が表示されます。 アダプタの設定 demo/src/index.jsについて、SimpleAnnotationServerV2Adapterをインポートし、さらにエンドポイント（ここでは、endpointUrlV2）に先ほど起動したSimpleAnnotationServerを指定します。 import mirador from 'mirador/dist/es/src/index'; import annotationPlugins from '../../src'; import LocalStorageAdapter from '../../src/LocalStorageAdapter'; import AnnototAdapter from '../../src/AnnototAdapter'; // 以下を追加 import SimpleAnnotationServerV2Adapter from '../../src/SimpleAnnotationServerV2Adapter'; const endpointUrl = 'http://127.0.0.1:3000/annotations'; // 以下を追加 const endpointUrlV2 = 'http://0.0.0.0:8888/annotation'; const config = { annotation: { // 以下をコメントアウト // adapter: (canvasId) => new LocalStorageAdapter(`localStorage://?canvasId=${canvasId}`), // adapter: (canvasId) => new AnnototAdapter(canvasId, endpointUrl), // 以下を追加 adapter: (canvasId) => new SimpleAnnotationServerV2Adapter(canvasId, endpointUrlV2), exportLocalStorageAnnotations: false, // display annotation JSON export button }, id: 'demo', window: { defaultSideBarPanel: 'annotations', sideBarOpenByDefault: true, }, windows: [{ loadedManifest: 'https://iiif.harvardartmuseums.org/manifests/object/299843', }], }; mirador.viewer(config, [...annotationPlugins]); アダプタの修正 以下のプルリクエストでも指摘されていますが、アダプタの一部修正が必要です。 ...

2023年8月18日 · 更新: 2023年8月18日 · 2 分 · Nakamura