JavaScript 画像注釈用 Annotorious ライブラリ
JavaScript の Annotorious ライブラリを使用して、Web ページ内の画像に描画、コメント、ラベルを追加します。
Annotorious とは何ですか?
Annotorious は、JavaScript で記述されたオープンソースの画像注釈ライブラリです。画像の任意の位置に図形を描画することで、ブラウザ内で画像に注釈を追加できます。注釈用の図形が描画されるたびに、ポップアップが開き、コメントを追加したり、タグを追加して注釈にラベルを付けたりすることもできます。ライブラリは、既存の注釈への返信の追加や、必要に応じて注釈の削除もサポートしています。
Annotorious ライブラリでサポートされている機能の一部を以下に示します。
- 図形を描く: Annotorious を使用すると、画像上に長方形、円、楕円などの図形やフリーハンドの注釈を描くことができます。
- コメントとメモ: ユーザーは Annotorious を使用して、画像の特定の部分にカスタムのコメントとメモを追加できます。
- ラベル付けまたはタグ付け: Annotorious は、画像内のさまざまな領域またはオブジェクトに注釈を付けるラベルまたはタグを追加する機能をサポートしています。
- 統合: Annotorious は Web ページや Web サイトに簡単に統合できるため、シームレスな注釈機能を実現できます。
- カスタマイズ: ライブラリには、ニーズに合わせて注釈の外観と動作をカスタマイズするためのオプションが用意されています。
- 互換性: Annotorious はさまざまな Web ブラウザーやプラットフォームで適切に動作し、さまざまな環境に柔軟に対応します。
Annotorious を使い始める
Annotorious を入手して Web プロジェクトで使い始めるには、3 つの方法があります。
1. NPMを使用してインストールする
Node.js をインストールしたら、以下のコマンドを実行します。
NPMを使用してAnnotoriousをインストールする
npm install @recogito/annotorious
2. CDN経由でホストされたライブラリを使用する
Annotorious は 無料の CDN サーバー でもホストされており、以下のような URL を使用できます。
- JS: https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.js
- CSS: https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.css
3. ビルド済みのリリースを使用する
GitHub から、ビルド済みの Annotorious の最新リリースをダウンロードします。圧縮されたリリースを解凍すると、以下のファイルが表示されます (annotorious.min.css と annotorious.min.js は、Web サイトで画像注釈に使用されます)。
- annotorious.min.css
- annotorious.min.js
- 悪名高い.umd.js.マップ
- ポリフィル
画像に注釈を追加する
ビルド済みのリリースをダウンロードすると、annotorious.min.css および annotorious.min.js ファイルが取得されます。これらのファイルは、head タグで Web サイトにリンクして、Annotorious JavaScript ライブラリを統合できます。画像注釈ライブラリを統合したら、注釈を追加する画像を追加し、最後に JavaScript コードを記述して Annotorious ライブラリを初期化し、画像に注釈を追加できます。
上記のコードは、注釈を付けられる画像をブラウザに表示するだけです。画像とライブラリがブラウザに読み込まれたら、画像の任意の位置をダブルタップして押したままドラッグして図形を描き、必要な領域を強調表示できます。図形が描画されると、ポップアップが開き、コメントを追加したり、関連するコメントにラベル/タグを付けたりすることもできます。たとえば、以下のスクリーンショットを確認してください。
画像にJSON保存注釈を追加する
前の例では、Annotorious ライブラリを Web ページに統合し、画像に手動で注釈を描画する方法を示しました。ただし、定義済みの注釈をその位置とともに JSON ファイルに保存し、loadAnnotations メソッドを使用して JSON ファイルから注釈データを読み込み、それらの注釈を画像に自動的に追加することもできます。
注意: Annotorious は、メディア リソースの特定の部分またはフラグメントに注釈を追加するために、W3C Web Annotation Data Model および W3C Media Fragments Specific に準拠しています。そのため、互換性のある JSON ファイル構造を使用する必要があります。
以下は、画像に注釈を自動的に追加するために使用されるサンプルの annotations.json ファイルです。
上記のコードは、annotations.json ファイルから注釈データを読み込み、自動的に画像に追加します。たとえば、以下のスクリーンショットを確認してください。
オンラインデモ
また、Annotorious JavaScript ライブラリをより深く理解するために、画像注釈デモと JSON ベースの画像注釈デモをチェックして、上記の 2 つの例をオンラインで試すこともできます。
結論
Annotorious はオープンソースで、優れた注釈 JavaScript ライブラリです。ただし、画像への注釈の追加のみをサポートしています。さらに、注釈に使用できる図形の数も限られています。