<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=139163818022217&amp;ev=PageView&amp;noscript=1"> <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=271598307802760&amp;ev=PageView&amp;noscript=1">
お問い合わせ

UI Elementsとインターセプタについて

 公開日:2025.04.15  更新日:2026.06.10 Box Japan

多くの開発者が、ウェブサイトのカスタムエクスペリエンスにBoxコンテンツを埋め込むためにBox UI Elementsを使用しています。Box UI Elementsは、導入のスピードと使いやすさという点で非常に魅力的です。詳細については、REACTでのBox UI Elementsの使用、Boxの統合について、Introducing the Box UI Elements Workshop (英語) をご覧ください。

しかし、UI Elementsで現在は直接サポートされていない非常に特殊な機能を開発者が実装しなければならないユースケースがある場合もあります。以下に例を示します。

  • アップロードコンポーネントを使用したPDFのアップロードのみを許可する (または、ZIPファイルのアップロードを禁止する)
  • ファイルまたはフォルダのメタデータに基づいてメッセージ/バナーを表示する
  • 特定のファイルをビューから除外する
  • 有効期限が切れた場合にアクセストークンを自動的に更新する
  • アップロードしたファイルにプレフィックスを追加する
  • 監視目的でリクエストとレスポンスを独自に記録する

上記のユースケースの機能に対する1つの解決策として、「インターセプタ」を使用できます。インターセプタは、Box APIとの間のリクエストとレスポンスの操作を開発者に直接許可するJavaScript関数です。クライアントとBox APIの間の通信を円滑にするためにBox UI Elementsで使用されるAxiosライブラリに含まれています。

インターセプタの変更はクライアントのエクスペリエンスにのみ影響し、Boxの権限や設定には影響しません。

Box UI Elementsは、以下の2つのインターセプタパターンをサポートしています。

  1. リクエストインターセプタ: Box APIに送信されるリクエストにアクセスして操作します。
  2. レスポンスインターセプタ: Box APIからのレスポンスにアクセスして操作します。

設定

BoxのコンテンツエクスプローラUI Elementと、リクエストおよびレスポンスインターセプタの例を含む標準的なHTMLページがあります。現時点では、configオブジェクトの値をコンソールに書き込むだけです。configオブジェクトは、アクセスして操作できるようになる、リクエストまたはレスポンスに関するデータです。リクエストの場合は、ヘッダー、URL、渡されるデータを変更でき、レスポンスの場合は、返されるたデータを変更できます。

var myResponseInterceptor = (config) => {
            console.log(config);
   return config;
    };
    var myRequestInterceptor = (config ) => {
            console.log(config);
   return config;
    };
        var accessToken = "<DEVELOPER TOKEN>";
        var folderId = "<FOLDER ID>";
        var explorer = new Box.ContentExplorer();
        explorer.show(folderId, accessToken, 
        {
            "container":".container",
            "requestInterceptor":myRequestInterceptor,
            "responseInterceptor":myResponseInterceptor
        });

インターセプトされたGETリクエストは次のようになり、リクエストされているURL、ヘッダー、クエリパラメータを操作するためにアクセスできます。

0_2qZfcfo6BaoKLvFl

インターセプトされたPOSTリクエストは次のようになり、送信されたデータにもアクセスできます。

0_tyuJaseXo2bPcQ8f

また、インターセプトされたレスポンスは次のようになり、返されたデータと、レスポンスの元となったリクエストの詳細の両方を照会できます。

0_FKqOKwGynPhR-rxn

1つ目の例 — アップロードからZIPファイルを除外する

1つ目の例を見てみましょう。ユーザーがUI Elementを介してZIPファイルをBoxにアップロードできないようにしたいとします。もちろん、ページにメッセージを追加することなどは可能ですが、フォルダにZIPが絶対入らないようにしなければなりません。

そのためには、zipをアップロードするリクエストをインターセプトし、完了しないようにする必要があります。

  1. アップロードの原因となるリクエストを特定する
    これにはBox APIの動作についてある程度の知識が必要です。ファイルのアップロードに関するこちらのリファレンスを参照すると、リクエストが「https://upload」で始まるURLに対するPOST呼び出しの場合は、アップロード呼び出しが行われていると判断できます。
  2. 名前を確認する
    ファイルの名前は、アップロードエンドポイントで使用されるformDataを含むPOSTリクエストのデータ属性に含まれます。formDataは実際にはJSON文字列であるため、個々の属性にアクセスするにはJSONオブジェクトに解析する必要があります。
  3. 別のURLを設定する
    ファイルをアップロードしたくないので、URLを「何か別のもの」に変更できます。ここでは、エラーを返すことがわかっているURLをBox APIに追加します。これにより、リクエストが失敗するため、ファイルはアップロードされません。リクエストを直接キャンセルすることはできないため、代わりに「偽の」リダイレクトを使用します。
  4. ユーザーに警告する
    ここではJavaScriptアラートを追加しますが、ページ上のバナーや通知に書き込むことも可能です。
var myRequestInterceptor = (config ) => {
      console.log(config);
      if ( config.method == "post" && config.url.startsWith("https://upload")) {
          var formDataAttributes = JSON.parse(config.data.attributes);
          if (formDataAttributes.name.endsWith(".zip")) {
            console.log("No zip files allowed");
            //send to another URL that will error
            var rejectURL = "https://api.box.com/2.0/files/badextension";
            config.method = "get";
            config.url = rejectURL;
            //Alert the user - could also display a banner or similar
            alert("Please upload anything other than ZIP files.");
          }
      }
      return config;
    };

ページを読み込んでzipファイルをアップロードしようとすると、次のアラートが表示されます。

0_R4GwiElVdAczXMcT

さらに、次のメッセージがアップローダーUI Elementに表示されます。

0_0s-9g1BxE6n4B-PM

このページのGitHub Gistをご覧ください。

2つ目の例 — ファイルのリストからdocx、xlsx、pptxを除外する

この例では、コンテンツエクスプローラUI Elementを読み込みますが、リストのビューからxlsx、pptx、docxファイルを除外します。

これを実現するには、Boxからのレスポンスをインターセプトし、返された項目リストからエントリを削除する必要があります。

  1. ファイルリストを含むレスポンスを特定する
    フォルダのファイルリストを取得する方法は2とおりあり、/itemsエンドポイントまたはフォルダ情報エンドポイント (「item_collection」フィールドを含める) を使用します。リクエストをログに記録することで、UI Elementsで2番目のオプションが使用されていることを確認できます。
  2. レスポンスを変更して、指定した拡張子の付いたファイルを削除する
    レスポンスデータでは、返されたすべてのファイルのリストを含むitem_collectionが保持されます。3つのOffice形式を削除するフィルタを追加します。
var myResponseInterceptor = (config) => {
      if(config.request.responseURL.includes('item_collection')) {
          config.data.item_collection.entries = config.data.item_collection.entries.filter((entry) => {
            return !entry.name || !/\.(docx|xlsx|pptx)$/i.test(entry.name);
          });
       }
  return config;
};

インターセプタを実装する前は、以下のようになっています。

0_KE-ZrA_HKfjm3KC7

インターセプタを実装した後は、以下のようになります。

0_3qT_QlDYfBJo4VZw

このページのGitHub Gistをご覧ください。

3つ目の例 — ファイルにマルウェアが含まれている場合にプレビューにバナーを追加する

このインターセプタでは、Box Shieldのセキュリティによってファイルにマルウェアが含まれていることが判明した場合のbox.comアプリのエクスペリエンスを再現できます。Box Shieldは、アップロードされたすべてのファイルでマルウェアがないかをスキャンし、保護機能 (ダウンロードの無効化など) をさらに追加したり、管理者にファイルについて警告したりできます。ファイルにマルウェアが含まれていることが判明した場合は、「MalwareDeepScan」というグローバルメタデータテンプレートインスタンスがファイルに追加されます。

このインターセプタでは、3つの処理を行う必要があります。

  1. マルウェアメタデータテンプレートをリクエストに追加する
    マルウェアのメタデータを読み取れるように、必ずこのテンプレートがレスポンスに含まれるようリクエストする必要があります。それには、Box UI Elementからプレビューされるファイルのフィールドのリストにこのテンプレートを追加します。
  2. レスポンスでマルウェア属性を確認する
    レスポンスには、リクエストされたすべてのフィールドの値が一覧表示されます。マルウェアのメタデータがファイルに存在する場合は、Box Shieldによってファイル内のマルウェアが特定されたことを意味します。
  3. ファイルにマルウェアが含まれていることが判明した場合にプレビューの上にバナーを表示する
    ファイルにマルウェアが含まれていることが判明した場合にページにバナーを表示するためのHTMLを以下に示します。
var myResponseInterceptor = (config) => {
      //If the type of the returned data is file and the metadata is not null, then prepend a malware warning banner
     if(config.data.type && config.data.type=='file') { 
        if(config.data.metadata!=null) {
          $("#banner").text('Malware detected');
        }
   };
   return config;
};
var myRequestInterceptor = (config ) => {
   if(config.url.startsWith('https://api.box.com/2.0/files')) {
      //Clear the banner
      $("#banner").text('');
      let params = config.params;
      //Inject the metadata.global.MalwareDeepScan field into the request
      params.fields+=params.fields + ',metadata.global.MalwareDeepScan';
      config.params = params;
   }
   return config;
};

マルウェアに感染したドキュメントのプレビュー

0_wOEXXwnHbN2vnyoT

通常のドキュメントのプレビュー

0_LsKH9-8Azsvjqlue

このページのGitHub Gistをご覧ください。

詳細情報

Axiosインターセプタのパターンの詳細については、以下を参照してください。

🦄 Box Platformの他のエキスパートと交流したい場合は、サポートや知識共有のためのBox Developer Community (英語のみ) にご参加ください。
Box AIによる企業コンテンツのためのMeta Llama 4モデルの評価
First look: GPT-4.1がBox AI Studioで利用可能に

RECENT POST「開発者」の最新記事

開発者

2026.04.20

Box、MCPアプリのサポート対象をChatGPT、Microsoft 365 Copilot、Gleanに拡大
開発者

2026.04.19

AIエージェントにコンテンツの活用方法を教える: OpenAI Codex向けBox Skillの構築
開発者

2026.04.16

Box AIとOpenAI Agents SDKで自律的なドキュメントワークフローを実行
開発者

2026.03.24

Box CLI: 開発者とAIエージェントのためのコンテンツCLI
Box製品情報 AIリサーチ 開発者 コラム イベント・セミナーレポート