ブラウザベースのプロジェクトでBox TS SDKを使用する

Published in

Box Developer Japan Blog

9 min readDec 14, 2023

以前の記事では、新しくリリースされたBox TSを取り上げ、シンプルなNode.jsアプリで使用しました。ブラウザベースのプロジェクトでのこのSDKの使用に関して寄せられる質問が増えてきましたので、今回の記事で簡単に説明します。フレームワークもバンドラーも必要ありません。Box Platformの機能で強化されたシンプルな静的ページだけを使用します。

まず、Boxアプリがこのプロジェクトで使用できる状態であることを確認します。Boxアカウントをまだお持ちでない場合は、先に進むために用意してください*。

* 無料のDeveloperアカウントに関わる最近の出来事により、Boxでは、新規の無料Developerアカウントオプションを制限せざるを得なくなりました。
既存のEnterpriseアカウントをお持ちの場合は、手順に従ってサンドボックスを作成してください。
それ以外の場合は、無料のBox Individualアカウントを作成してください。クレジットカードは必要ありません。サインアップし、メールアドレスを確認したら、次のリンクにアクセスします: https://app.box.com/developers/console

Box開発者コンソールに移動して、アプリを作成します。Boxアプリをすでに作成済みの場合は、手順に従ってアプリの設定を確認してください。

カスタムアプリを作成し、[ユーザー認証 (OAuth 2.0)] を選択します。アプリ名や簡単な説明など、プロジェクトに関連する必要な情報を入力します。

[構成] タブに移動し、[CORSドメイン] セクションに移動します。ローカルでの開発を目的としているため、ローカルホストを追加します。アプリを展開したら、最終的なプロジェクトのURLも追加します。

⚠️ 重要: 許可する送信元の末尾にあるスラッシュを削除してください。

最後に、開発者トークンを生成します。これは、アプリを操作する際に必要になります。

Developer Token in Configuration tab, Developer Console

⚠️ 重要: 開発者トークンの有効期間は1時間のため、無効になったら更新してください。

ブラウザベースのカスタムアプリからファイルをダウンロードする機能を維持したい場合は、[Boxに格納されているすべてのファイルとフォルダへの書き込み] チェックボックスをオンにしてください。

Boxアプリを実行する準備ができたので、シンプルな静的HTMLページを作成します。アプリをローカルで提供するために、npx serveコマンドを使用します。これまでにserveを使用したことがない場合は、マシンにインストールし、そのドキュメントページで詳細を確認してください。

npm i serve

TS SDKをインストールし、次にindex.htmlファイルでインポートします。

npm install box-typescript-sdk-gen

<script src="./node_modules/box-typescript-sdk-gen/lib/bundle.js"></script>

次に、以下の例のように、ドキュメントの先頭にmetaタグを追加して、キャッシュを防ぎます。

<meta
  http-equiv="Cache-Control"
  content="no-cache, no-store, must-revalidate"
/>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

最後に、追加のスクリプトを作成して、BoxClientとBoxDeveloperTokenAuthをインポートし、Boxユーザー名を取得するためのtry-catchブロックを追加します。実際に使えるサンプルindex.htmlファイル全体を以下に示します。

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Website</title>
    <!-- Meta tags to prevent caching -->
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
  </head>
  <body>
    <script src="./node_modules/box-typescript-sdk-gen/lib/bundle.js"></script>
    <script>
      const { BoxClient, BoxDeveloperTokenAuth } =
        window['box-typescript-sdk-gen'];

      async function main(token) {
        try {
          const client = new BoxClient({
            auth: new BoxDeveloperTokenAuth({ token }),
          });
          const { name } = await client.users.getUserMe();
          alert(`Hello ${name}!`);
        } catch (e) {
          alert(String(e));
          console.error(e);
        }
      }

      main(prompt('Provide the developer token'));
    </script>
  </body>
</html>

アプリを実行し、ブラウザでhttp://localhost:3000に移動します。

npx serve

開発者トークンを入力して認証します。

完了です。すぐにブラウザでBox TS SDKとの統合が成功するはずです。

簡単な関数をもう1つ使用するだけで、アプリのユーザーに挨拶メッセージを表示できます。

<body>
    <script>
      [...]
      function addElement(text) {
        const newDiv = document.createElement("div");
        const newContent = document.createTextNode(text);
        newDiv.appendChild(newContent);
        // Get container with ID app
        const app = document.getElementById("app");
        document.body.insertBefore(newDiv, app);
      }

      async function main(token) {
        try {
          const client = new BoxClient({
            auth: new BoxDeveloperTokenAuth({ token }),
          });
          const { name } = await client.users.getUserMe();
          // Add dynamically user name to your app
          addElement(`Welcome ${name}`);
        } catch (e) {
          alert(String(e));
          console.error(e);
        }
      }

      main(prompt('Provide the developer token'));
    </script>

    [...]
    <!-- Add the container with app ID -->
    <main id="app"></main>
  </body>

トークンを入力すると、挨拶メッセージがページに動的に追加されます。

ここからさらにコーディングしていきます。利用可能なメソッドの詳細については、TS SDKのドキュメントを確認してください。利用可能なすべてのエンドポイントを確認するには、Box APIリファレンスのページを参照してください。

次回の記事では、ReactアプリでのTS SDKの使用について詳しく説明します。

サポートや知識共有のためのBox Developer Community (英語のみ) にご参加ください。

ブラウザベースのプロジェクトでBox TS SDKを使用する

Written by Yuko Taniguchi