JSでWebに注釈をつけるAnnotatorで専用のサーバープログラムを使わなくてもannotationを保存、復元する方法

Webページにコメントなどの注釈をつけることができるJavascriptのライブラリannotatorがあります。

こちらの注釈の保存は、基本的には以下のPython製のバックエンドを利用することが想定されています。

https://github.com/openannotation/annotator-store

他には、ブラウザのローカルストレージに保存するプラグインもあります。 https://github.com/aron/annotator.offline.js

しかし、別サーバーを立てて管理はしたくなく、自前のWebサーバーでユーザーごとに紐付けて管理したいことがあると思います。

以下のようにannotationCreatedイベントのannotationからhighlightsのDOMを除外してどこかに保存し、@annotator.loadAnnotations(annotations)すれば、annotationを復元できそうだなぁってところまで調査しました。

    Annotator.Plugin.StoreLogger = (element) ->
      pluginInit: ->
        annotation = Cookies.get("annotator_test")
        if annotation?
          annotation = JSON.parse(annotation)
          @annotator.loadAnnotations([annotation])
        @annotator.subscribe('annotationCreated', (annotation) ->
          storable = jQuery.extend({}, annotation)
          delete storable.highlights
          Cookies.set("annotator_test", JSON.stringify(storable))
          console.info 'The annotation: %o has just been created!', annotation
        ).subscribe('annotationUpdated', (annotation) ->
          console.info 'The annotation: %o has just been updated!', annotation
        ).subscribe 'annotationDeleted', (annotation) ->
          console.info 'The annotation: %o has just been deleted!', annotation

    content = $('.target').annotator()
    content.annotator('addPlugin', 'StoreLogger')

後は適当に調整して、RailsにCRUD生やせば、ユーザーごとのannotationを管理できそうです。

が、デザインの変更やコンテンツの変更などでDOMがずれるとannotationを復元できなそうなので、今のところ、採用は見合わせることにしました。

一応のメモ書きで残しておきます。