Box UI ElementsでBox標準画面と同じ、新アノテーションが利用できるようになりました！
この機能は、Box UI Elementsのv16.0.0より利用可能となっています。

CDN経由でJSを読み込んで使う方法を簡単にご紹介します。
なお、この投稿はこちらの記事を参考にしています。

その前に、アノテーションで何が変わったかのご紹介します。

今までのUI Elementsのアノテーション

これまで利用可能だったアノテーションは、線を引くことと、コメントを付けるという機能だけでした。
これらのアノテーションは、アクティビティにコメントが反映されない、バージョンが上がると消えてしまう、Box標準画面では表示できないなどイマイチなものでした。

新しいUI Elementsのアノテーション

今回の変更により、標準BOX画面にはいち早く取り入れられていた新アノテーションが使えるようになりました。
新アノテーションではアクティビティにコメントが表示され、ファイルのバージョンが上がっても、アクティビティのコメントから古いバージョンにジャンプすることでアノテーションを確認できるという、Box標準画面と同じ動きになります。また、カスタムアプリのUI Elementsで表示しているアノテーションは、Box標準画面とも同期して表示できるようになっています。

簡単なカスタムアプリを作ってみる

node.jsを利用して、簡単なBox UI Elements（のPreview）を利用した画面を作ってみます。
ここからの作業は、node.jsをインストールしていることを前提としています。
私はMacを利用し、node.jsはv18.12.1を利用しています。
Windowsでも動くはずですが、コマンドは適宜読み替えてください。

BOXにサンプルファイルを入れ、IDをコピーする

プレビューを行なうサンプルファイルとして、標準BOX画面で任意のファイルをアップロードしておきます。
アップロードが終わったら、URLよりファイルIDをコピーしておきます。

BOXにアプリを作成する

BOXのマイアプリを開き、カスタムアプリを任意の認証タイプ、名前で作成します。
作成したアプリ設定の構成タブを開き、開発者トークンを生成します。
この開発者トークンは約一時間のみ有効なトークンとなるので、1時間を過ぎてしまった場合は再度取り直しをしてください。
ファイルIDと開発者トークンは後でプログラムの中で利用します。

次に、CORSドメインの箇所までスクロールダウンし、以下の文字列を設定し、保存ボタンを押します。
http://localhost:3000

これは、UI Elementsを利用するために必要な設定です。

プログラムのフォルダを準備

フォルダとプロジェクトを作成し、WebアプリサーバーのExpressを導入する

mkdir sample
cd sample
npm init -y
npm i express

アノテーション用ライブラリをダウンロード

アノテーション用のjsファイル、cssファイルが必要になるのですが、これらのファイルはなぜかCDNで公開されていません。
https://github.com/box/box-annotations からソースコードをダウンロードして、ビルドすることも可能ですが、面倒なので参考サイトがやっているように、npmで配布されているファイルを取り出してつかってみます。

sample フォルダの中で、以下のコマンドを実行します。

npm i box-annotations

このコマンドを実行すると、node_modules/box-annotations フォルダ配下に様々なものがダウンロードされてきますが、
今回利用したいものは、node_modules/box-annotations/dist だけです。
このフォルダには、annotations.cssとannotations.jsが含まれています。

これらのファイルは、npmパッケージとして利用するのではなく、次のステップで静的リソースとしてExpress上で公開し、ブラウザに読み込ませて使うようにします。

プログラムを作成

プログラムを入れるファイルを作成します。

touch annotations-sample.js

annotations-sample.jsファイルを開き、以下のコードを貼り付けます。

annotations-sample.js

const express = require("express");
const app = express();

// http://localhost:3000/static というURLでdistフォルダ以下のファイルをブラウザに公開する
app.use("/static", express.static(__dirname + "/node_modules/box-annotations/dist"));

// http://localhost:3000 にアクセスしたときの処理
app.get("/", async (req, res) => {
  // コンテントタイプを指定
  res.set("Content-Type", "text/html");
  // HTML文書をブラウザに戻す
  res.send(`
    <!DOCTYPE html>
    <html lang="en-US">
      <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="https://cdn01.boxcdn.net/platform/elements/16.0.0/ja-JP/preview.css" crossorigin="anonymous"/>
        <!-- /staticで公開したannotation.css -->
        <link rel="stylesheet" href="/static/annotations.css" />
      </head>
      <body>
        <div class="container" style="height:660px; margin: 30px;"></div>
　　　　　　　　　　　　　　　　<!-- /staticで公開したannotation.js -->
        <script src="/static/annotations.js"></script>
        <script src="https://cdn01.boxcdn.net/platform/elements/16.0.0/ja-JP/preview.js"></script>
        <script>
          const fileId = "11111111111";
          const accessToken = "xxxxxxxxxxxxxxxxxxxxxxxxxx";
          const annotations = new BoxAnnotations();
          const options = {
            // hasHeader: true,
            showAnnotations: true,
            showAnnotationsControls: true, 
            contentSidebarProps: {
                hasActivityFeed: true, 
                features: { activityFeed: { annotations: {enabled: true}}}, 
            },
            enableAnnotationsDiscoverability: true,
            enableAnnotationsImageDiscoverability: true,
            showAnnotationsControls: true,
            showAnnotationsDrawingCreate: true,
            boxAnnotations: annotations,
            container: ".container",
          }
          const contentPreviewer = new Box.ContentPreview();
          contentPreviewer.show(fileId, accessToken, options);
        </script>
      </body>
    </html>
  `);
});

app.listen(3000, () => console.log("started on port 3000"));

const fileId = "11111111111";と、const accessToken = "xxxxxxxxxxxxxxxxxxxxxxxxxx";の箇所を、コピーして置いた値に書き換えてください。

実行

以下のコマンドをsampleフォルダで実行します。

node annotations-sample.js

ブラウザで以下のURLを開くと、新アノテーションが動くはずです。
http://localhost:3000

Content Explorerでの利用

ここまでは、Content Previewコンポーネントを利用して説明してきましたが、
アノテーションはContent Explorerでも動かすことができます。
その場合、Content Preview用のオプションを、Content Explorerのオプションには、contentPreviewPropsというフィールドを通して設定することが可能です。

// content explorerにわたすオプション
{
  contentPreviewProps: options,
}

Content Explorerのサンプル

annotations-sample.js

const express = require("express");
const app = express();

console.log(__dirname + "/node_modules/box-annotations/dist");
app.use("/static", express.static(__dirname + "/node_modules/box-annotations/dist"));

app.get("/", async (req, res) => {
  res.set("Content-Type", "text/html");
  res.send(
    `<!DOCTYPE html>
    <html lang="en-US">
      <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="https://cdn01.boxcdn.net/platform/elements/16.0.0/ja-JP/explorer.css" crossorigin="anonymous"/>
        <link rel="stylesheet" href="/static/annotations.css" />
      </head>
      <body>
        <div class="container" style="height:660px; margin: 30px;"></div>
        <script src="/static/annotations.js"></script>
        <script src="https://cdn01.boxcdn.net/platform/elements/16.0.0/ja-JP/explorer.js"></script>
        <script>
          const folderId = "0";
          const accessToken = "6eoiLWhIhotHUo68PzNGgXzNTaa7g1nV";
          const annotations = new BoxAnnotations();
          const options = {
            hasHeader: true,
            showAnnotations: true,
            showAnnotationsControls: true,
            hasHeader: true,
            contentSidebarProps: {
                hasActivityFeed: true,
                features: { activityFeed: { annotations: {enabled: true}}},
            },
            enableAnnotationsDiscoverability: true,
            enableAnnotationsImageDiscoverability: true,
            showAnnotationsControls: true,
            showAnnotationsDrawingCreate: true,
            boxAnnotations: annotations,
            
          }
          const explorer = new Box.ContentExplorer();
          explorer.show(folderId, accessToken, {
            contentPreviewProps: options,
            container: ".container",
          });
        </script>
      </body>
    </html>
    `
  );
});

app.listen(3000, () => console.log("started on port 3000"));

以上です。