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ファイルを開き、以下のコードを貼り付けます。
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のサンプル
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"));
以上です。