ICP Tutorial 02

日本語 / English

ICP Tutorial 02: IIIF Curation Viewer

<<ICP Tutorial 01    ICP Tutorial 03>>

(This tutorial is a tentative version. I will update this tutorial according to the latest version.
Because of my English skill, this tutorial may contain some English mistakes and sentences that are difficult to understand. Please give me feedback if you find some problems.)

IIIF Curation Viewer

On this page and next page, we use demo version ICP on CODH web site. Let’s actually create, manage and edit curation.

When the tutorial 03 is over, you will be able to create, publish and share your own curation.

(1) Access demo version ICViewer

Demo version ICViewer is available at http://codh.rois.ac.jp/software/iiif-curation-viewer/demo/?lang=en.
The following simple screen will be displayed when accessed.

IIIF Curation Viewer

(2) Logging in

You can use ICViewer without logging in. But if you want to manage your own curation with ICManager later, you need to log in. Also, curation made without logging in can be edited by anyone. So we recommend that you use ICViewer with logged in.

Press the login button displayed in the upper right of the screen to display the account selection button. On demo version, you can authenticate using Google, Facebook, Twitter or email address.

Log in Button

(3) Load IIIF Manifest to ICViewer

After logging in, let’s load IIIF manifest you want to make curation. You can load by drag and drop Manifest published on each site to ICViewer or append Manifest url at the end of ICViewer url.

Let's look at an example. On Database of Pre-Modern Japanese Works which is the Largest Digital Reference on Pre-Modern Japanese Works, contents corresponding to IIIF has Manifest URL and IIIF icon below the images. This time we use “Urashima (浦しま)” as an example. Access contents page https://kotenseki.nijl.ac.jp/biblio/200017771/viewer/24?ln=en and drag and drop IIIF icon to ICViewer.

IIIF Manifest

Manifest drag and drop

If you want to load by appending url, please enter URL following "?manifest=".
Such as http://codh.rois.ac.jp/software/iiif-curation-viewer/demo/?manifest=https://kotenseki.nijl.ac.jp/biblio/200017771/manifest

(4) View images in the ICViewer

After loading Manifest, the name of the material is displayed at the top of the screen, and the image is displayed center of the screen. ICViewer has basic viewer functions.

IIIF Curation Viewer UI

You can zoom in/out with the + and-buttons on left side. Also, you can zoom by operation mouse wheel. Below the zoom button, there is full screen button.

When loading a Manifest containing multiple images such as "Urashima", you can browse frame-by-frame advance with the previous and next buttons on the top left. When you click the number in between, a drop-down menu will be displayed and you can move directly by selecting the frame number.

When you click the thumbnail button, the thumbnails of frames in the Manifest are displayed. You can also move directly by click a thumbnail image.

(5) Add an image to curating list

Let’s start creating curation together. With the image you want to add curation displayed, press the "☆" button on the upper right of the screen. Does the "☆" button changes to "★" ? O.K! The displayed image is added to the curating list.

Put into Curation List

You can check curated content by “show your curating list” button next to one right. Clicking this button, curated contents are displayed as thumbnail list. We call each contents in curating list "Canvas".

You can rearrange canvases by drag-and-drop or delete canvases from curation using this thumbnail list.

Curation List

(6) Add a part of images to curating list

Next step, we explain how to add a part of image to curation. We use "■" button (draw a rectangle button) on the top right of the image.

Clicking "■" button, the mouse pointer changes to "+". In this mode, you can select rectangle by dragging. The selected rectangle area is surrounded by a blue translucent box. If you want to reselect, please press the "edit layers" button that appears newly where the "■" button was. IF you want to cancel, please click "trash box icon" button.

Put into Curation List

Then clicking "☆" button, a image of the selected rectangle area is add to curation list. You can find a canvas of this part from "show your curating list" button.

Curation List

(7) Curation across multiple Manifest

You can create curation across multiple Manifest with ICViewer. Let’s load the other Manifest and add images.

In the way of (3), load new IIIF Manifest. Please rest assured, the curated content will not disappear. Let's load another work "Urashima Taro" with the same theme as "Urashima" as an example. https://kotenseki.nijl.ac.jp/biblio/200016413/viewer?ln=en

Then display an image or select a rectangle as you like and press the "☆" button. Checking curation list, you can find canvases curated from multiple Manifest.

Curation List

(8) Export curation

The next step is export curation to save it. On the demo version ICViewer, you can export curation to pre-prepared server by CODH. Display curating list and click “Export” button below right thumbnail list.

Export Button

When curation is exported, new URL for curation is loaded automatically. Please check the upper left of the display. There are a title of materials such as 浦しま and the new subtitle (Curating list). Also “thumbnails” button change to "selected thumbnails" button. And two new buttons, "Books" and "view in original order" appear.

Also URL changes to curation mode, such as http://codh.rois.ac.jp/software/iiif-curation-viewer/demo/?curation=xxx

Clicking previous and next buttons, canvases in curating list are displayed in order of curating list. O.K. Now you can save curation and share by this URL.

Curating List

(9) Add metadata to canvas

You can add metadata to canvases on exported curation. Clicking "Edit curation metadata" button, the metadata window appears left side of the display.

Metadata UI

Clicking “+item” button on metadata window, a text box for metadata is added. We assume that enter a metadata label for Label box and a metadata value for Value box.

This time, we add a label "title" and a value "Urashima" to each canvas. Before you move to next canvas, you need to click “✓Apply button”. If you forget it, input will be wasted.

label and value

Metadata schema depends on your policy or intention about creating curation. Metadata is important to clarify where you focused with your curation.

(10) Export curation with metadata

Let’s export curation with metadata. Clicking “Export” button on the metadata window (not on curating list!), you can export curation with metadata on the new URL. And the new URL is loaded automatically.

Also you can update curation with the same URL. Clicking "▼" button at the right of "Export", "Update" button appears. If you use "Update" button, curation with metadata overwrites current URL.


Now you can create and add metadata to curation. Also, you can share your curation with the url generated by "Export" button. Next step, you can learn how to manage and edit your curation.

<<ICP Tutorial 01    ICP Tutorial 02>>

Captured images from
『浦しま』(CC BY-SA 国文学研究資料館所蔵)DOI:10.20730/200017771
『浦嶌太郎』(CC BY-SA 国文学研究資料館所蔵)DOI:10.20730/200019888