# ontologyviewer [English](README.md) · [API](docs/API.md) · [npm公開手順](docs/PUBLISHING.md) Webページ内のTurtleを、読み取り専用の **Schema** 図と **Triples** グラフとして表示する独立ライブラリです。Cytoscapeを同梱し、サーバー、アカウント、テレメトリ、外部Ontology取得を必要としません。 ## クイックスタート ```html ``` 実行されない `text/turtle` の `` があるとHTMLがsource要素の終了タグとして扱うため避けてください。従来の `

` も利用できますが、HTMLソース内の `<` は `<` と書く必要があります。`destroy()` はどちらのsource要素も元の状態へ戻します。

`examples/` のHTMLをFinderなどから直接開かないでください。ブラウザのES Moduleは `file:` URLでCORSブロックされます。`npm run examples` を実行し、`http://127.0.0.1:4173/examples/index.html` を開いてください。直開きや `dist/` 未生成時には、example画面に起動手順が表示されます。

再現性を重視するページでは完全なバージョン（`@0.2.0`）を固定してください。`@10` のようなmajor指定は互換更新に追従できますが、配信内容は将来変化します。

## npmから利用

```bash
npm install --save-exact ontologyviewer@0.2.0
```

```ts
import ontologyviewer from "ontologyviewer";

const manager = ontologyviewer.initialize({
  startOnLoad: true,
  theme: "auto",
  locale: "auto",
});
await manager.ready;
```

## 機能

- datatype property、アイコン、色指定、cardinality、推論関係、統計、凡例、読み取り専用Inspectorを備えたSchemaカード。
- Triples表示、検索、近傍focus、pan、zoom、fit、fCoSE/Dagre、node移動、PNG出力。
- Triples表示の簡約（既定で有効）。ラベル・コメント・標準語彙の用語を、それを参照しているノードに畳み込みます。1182トリプルのスキーマオントロジーで箱が3分の1、エッジが70%減りました。ツールバーのトグルで展開でき、`compactTriples: false` または `data-compact-triples="false"` で最初から展開状態にできます。
- 1ページ内の複数Viewerを完全に分離。
- 英語・日本語UIとlight/darkテーマの自動追従。
- `storageKey` を指定した場合だけ、有効値を検査してレイアウトを `localStorage` に保存。
- Turtleエラーを行・列付きで安全に表示し、`update()` で復旧可能。
- 通常はCSSを自動注入し、制限の強いCSP向けには外部CSSモードを提供。
- 編集機能、ネットワーク通信、telemetry、cookie、アカウントはありません。

## HTML属性

```html

```

API optionは `data-*` より優先されます。高さには数値付きの `px`、`rem`、`em`、`vh`、`vw`、`%` を指定できます。不正値は安全に `600px` へ戻します。

## プログラムAPI

```ts
const source = document.querySelector("#ontology")!;
const instance = ontologyviewer.render(source, {
  baseIri: "https://example.org/base/",
  defaultView: "schema",
  compactTriples: true,
  layout: "fcose",
  storageKey: "example-layout", // 省略すると保存しない
  onError(error) {
    console.error(error.line, error.column, error.message);
  },
});

await instance.update(nextTurtle);
instance.fit();
instance.runLayout("dagre");
const png: Blob = await instance.exportPng();
instance.destroy();
```

`initialize()` は `MutationObserver` を登録しません。後から追加した要素は `manager.scan(container)` または `render(element)` で明示的に初期化してください。`startOnLoad: true` の初回scanは、documentが既にcompleteでない限り `window.load` まで待つため、Gatsby/Reactのhydrationがserver-rendered DOMを置換する処理と競合しません。

完全な型とライフサイクルは [API.md](docs/API.md) を参照してください。

## 厳格なCSPと外部CSS

inline `