js ファイル読み込み元 (cdnjs 形式):https://mn.tamabi.ac.jp/ajax/libs/taueda2/1.2.2/taueda2.min.js
※codepen.io などで外部ライブラリとして読み込めます
https://mn.tamabi.ac.jp/research/database.html のページは、下記のサンプルコードを発展させたものとして同じ仕組みの上に実装されています。全ての機能を利用したコードになっているので、html のソースを確認すると参考になります。
基本のサンプル
See the Pen basic example by HORIGUCHI Junshi (@toolbits) on CodePen.
サムネイルとタイトルのサンプル
See the Pen thumbnail & title example by HORIGUCHI Junshi (@toolbits) on CodePen.
作品詳細を詳細ページで表示するサンプル
See the Pen view details example by HORIGUCHI Junshi (@toolbits) on CodePen.
任意キーワード検索のサンプル
See the Pen basic example by HORIGUCHI Junshi (@toolbits) on CodePen.
キーワード検索の初めの1項目の関係グラフを表示するサンプル
See the Pen basic example by HORIGUCHI Junshi (@toolbits) on CodePen.
サイズ情報をスケールして表示するサンプル
See the Pen basic example by HORIGUCHI Junshi (@toolbits) on CodePen.
data-eda2-query は、次の検索へリンクされるべき値項目(%{value}%)が、どのようにリンクされるかと指定するための指定子である。data-eda2-query には以下の値を指定できる。※表内のプロパティとは、tau-eda2-cardタグの子供タグで利用される各種属性のことをあらわし、”title”, “artist”, “credit”などカードに記述された情報の具体的な項目のことである。tau-eda2-titleタグ内部では、プロパティは”title”と自動的に解釈され、tau-eda2-creditタグ内部では、プロパティは”credit”と解釈される。
値 | 覚え方 | 動作 | リンク例 |
---|---|---|---|
無指定・空白 | – | リンクしない | – |
* | ワイルドカード | プロパティ名を指定して、各%{value}%の値にもとづき検索リンクを設置する | mode=search&query=title:”%{value}%” |
% | 変数の% | 文脈により変化するタグ名や変数名をプロパティ名として利用して、各%{value}%の値にもとづき検索リンクを設置する | mode=search&query=material:”%{value}%” |
# | 番号の# | 各%{value}%の項目を、DBIDを指定したものとして検索リンクを設置する | mode=search&query=dbid:”XXXX” |
@ | アンカーの@ | プロパティタグ全体を一つのリンクとして、DBIDを指定したものとして検索リンクを設置する | mode=search&query=dbid:”XXXX” |
~ | 接続された~ | 構造リンク・関連リンクのプロパティタグにおいて、関連付けされたカードのDBIDを指定して検索リンクを設置する | mode=search&query=dbid:”XXXX” |
任意文字列 | – | 指定した文字列をプロパティ名として利用して、各%{value}%の値にもとづき検索リンクを設置する | mode=search&query=custom:”%{value}%” |
! | inspectのiの反転 | この指定子は、上記の指定子と組み合わせて利用することができる。指定する場合は、上記の指定子の次の文字として “#!” などのように記述する。指定すると、リンクをクリックした時にinspectモードで検索が行われる。指定しない場合は、searchモードで検索が行われる。 | mode=inspect&query=dbid:”XXXX” |