MENU

コラボフローのカスタマイズ！申請フォームにBox UI Elementsを埋め込んでみる

目次

はじめに

日常業務でこんな経験ありませんか？

「またストレージサービスにファイルをアップロードして、リンクをコピーして、メールに貼り付けて…」 「この動画ファイル、申請フォームに添付できないかな？」

毎回同じ作業の繰り返しで、正直面倒ですよね。今回はそんなお悩みを解決するカスタマイズを試してみました。

Box社のBox UI Elements とコラボフローを使えば、コラボフローのフォームに直接 Box の機能を組み込んで、ファイル操作をもっとスマートにできます。

今回は、その具体的な方法をわかりやすくご紹介していきます。ファイル共有の手間から解放されたいですよね。

🎯 注意点
今回の実装は「お試し版」です。本格運用には準備が必要です（詳しくは後でご説明します）

このカスタマイズで何ができるの？

1. 大容量ファイルもアップロード！

コラボフローの申請フォームから、Boxの容量上限まで直接アップロード可能

2. フォーム上で直接ファイル操作

わざわざBoxを開いてリンクをコピペしなくても、コラボフローの申請フォーム上でサクッと完結します。

3. プレビューもバッチリ

「このファイル何だっけ？」がなくなります。その場でプレビューできちゃう。

実際の動き

さっそく作ってみよう！

Step 1: フォームにスペースを作る

コラボフローのラベルパーツに、Boxの居場所を作ってあげましょう。

<!-- アップロード用のスペース -->
<div id="boxUploaderContainer" style="height: 200px; border: 1px solid #ccc; margin-bottom: 20px;"></div>

<!-- ファイル一覧用のスペース -->
<div id="boxExplorerContainer" style="height: 600px; border: 1px solid #ccc;"></div>

ラベルパーツの詳しい設定手順は、以下の記事を参考にして下さい。

https://uchimurasite.com/archives/384

Step 2: JavaScriptを書く

box-customize.js ファイルを作って、Boxを呼び出そう！

// Box UI Elements のロード状態をチェックし、初期化を行う関数
function initializeBoxElements() {
  // !!! 注意: ここにBoxのアクセストークンとフォルダIDを設定します !!!
  // !!! この値はあくまでサンプルです。本番利用にはセキュアな認証が必要です !!!
  const BOX_ACCESS_TOKEN = "YOUR_DEVELOPER_TOKEN_HERE"; // ご自身の開発者トークンに置き換え
  const BOX_FIXED_FOLDER_ID = "YOUR_BOX_FIXED_FOLDER_ID"; // 固定フォルダのIDに置き換え（例: '0'でルートフォルダ）

  // Box UI Elements がロードされているか最終確認
  if (typeof Box === 'undefined' || !Box.ContentUploader || !Box.ContentExplorer) {
    console.error("Box UI Elements がまだロードされていないか、正しくありません。");
    // 通常はポーリング処理でロードを待つため、ここに来ることは稀ですが、念のため。
    return;
  }

  // --- Content Uploaderの初期化と表示 ---
  const uploaderContainer = document.querySelector("#boxUploaderContainer");
  if (uploaderContainer) {
    const contentUploader = new Box.ContentUploader();
    contentUploader.show(BOX_FIXED_FOLDER_ID, BOX_ACCESS_TOKEN, {
      container: "#boxUploaderContainer",
      onComplete: function(data) {
        console.log("ファイルのアップロードが完了しました:", data);
        alert("ファイルのアップロードが完了しました！");
        if (window.contentExplorerInstance) {
          window.contentExplorerInstance.clearCache(); // アップロード後、表示を更新
          console.log("Content Explorer のキャッシュをクリアし、表示を更新しました。");
        }
      },
      onError: function(error) {
        console.error("ファイルのアップロード中にエラーが発生しました:", error);
        alert("ファイルのアップロード中にエラーが発生しました。\n詳細: " + (error.message || JSON.stringify(error)));
      },
      modal: null // ポップアップではなく常に表示
    });
  } else {
    console.error("Box Content Uploader のコンテナ要素 (#boxUploaderContainer) が見つかりません。");
  }

  // --- Content Explorerの初期化と表示 ---
  const explorerContainer = document.querySelector("#boxExplorerContainer");
  if (explorerContainer) {
    const contentExplorer = new Box.ContentExplorer();
    window.contentExplorerInstance = contentExplorer; // アップロード後の更新用

    contentExplorer.show(BOX_FIXED_FOLDER_ID, BOX_ACCESS_TOKEN, {
      container: "#boxExplorerContainer",
      canPreview: true,           // ファイルプレビューを有効に
      canDownload: true,          // ダウンロードを有効に
      canUpload: false,           // Uploaderがあるので無効に
      canDelete: true,            // 削除を有効に（必要に応じて）
      canRename: true,            // 名前変更を有効に（必要に応じて）
      canCreateNewFolder: true,   // 新規フォルダ作成を有効に（必要に応じて）
      canShare: true,             // 共有オプションを有効に（必要に応じて）
      sortBy: 'date',
      sortDirection: 'DESC',
      size: 'large'
    });
  } else {
    console.error("Box Content Explorer のコンテナ要素 (#boxExplorerContainer) が見つかりません。");
  }
}

// コラボフローの申請フォームが表示されたときに実行
collaboflow.events.on("request.input.show", function (e) {
  // Box UI Elements がロードされるまで待機するポーリング処理
  let checkCount = 0;
  const maxChecks = 50; // 最大チェック回数 (50回 * 100ms = 5秒まで待つ)
  const checkInterval = setInterval(() => {
    // Boxオブジェクトが定義され、必要なモジュールがロードされたら
    if (typeof Box !== 'undefined' && Box.ContentUploader && Box.ContentExplorer) {
      clearInterval(checkInterval); // 監視を停止
      initializeBoxElements(); // 初期化関数を実行
    } else {
      checkCount++;
      if (checkCount >= maxChecks) {
        clearInterval(checkInterval); // タイムアウト
        console.error("Box UI Elements のロードがタイムアウトしました。Box連携機能は利用できません。");
        alert("Box連携機能の読み込みに失敗しました。時間をおいて再度お試しください。");
      }
    }
  }, 100); // 100ミリ秒ごとにチェック
});

Step 3: 必要なファイルを登録

フォーム編集画面の「カスタマイズ」で、順番に登録します。

JavaScriptファイル（順番大事！）

  1. https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/explorer.js
  2. https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/uploader.js
  3. box-customize.js（あなたがアップロードしたファイル）

CSSファイル

  1. https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/explorer.css
  2. https://cdn01.boxcdn.net/platform/elements/23.0.0/en-US/uploader.css

💡 Tips！
URLの latest は使わずに具体的なバージョン（23.0.0など）を指定してください。

コラボフローのカスタマイズファイル登録手順は、以下の記事を参考にして下さい。

https://uchimurasite.com/archives/384

よくあるトラブルと解決法

「ファイルが見つからない」と言われた

原因: URLでlatestを使っている
解決: 23.0.0みたいに具体的なバージョンを指定しましょう

「ネットワークエラー」が出る

原因: CORS設定が足りない
解決: Box開発者コンソールでコラボフローのドメインを登録しましょう

でもちょっと待って！重要な話

この実装は「お試し版」です。本格的に使うには、いくつかの大きな課題があります。

1. 認証問題

  • 開発者トークンは1時間で切れてしまいます。
  • 本番にはもっとしっかりした認証が必要です。
  • バックエンドサーバーの準備なども必要になります。

2. セキュリティ

  • ブラウザから直接API接続するのは危険です。

3. 機能制限

  • アップロードするBoxフォルダが固定である
  • エラーハンドリングが簡易的
  • 動的な設定ができない

その他の可能性！こんな機能も欲しい

申請番号でフォルダ自動作成

「申請2024001-新商品企画」みたいなフォルダが自動で作られる！

承認フローと権限連動

承認者が変わったら、自動でアクセス権限も変更される！

申請書PDF自動保存

承認完了したら、申請書PDFも自動でBoxに保存！

自動ファイル整理

「進行中」「承認済み」「却下」フォルダに自動で振り分け！

最後に

コラボフローのカスタマイズは、「こんなことできたらいいな」を気軽に試すことができて楽しいですよね！

まずは今回のサンプルで「おぉ、こんなことができるんだ！」を体験してみてください。きっと、新しいアイデアがどんどん湧いてくるはずです。

みなさんも、ぜひこの「便利」で「楽しい」Boxカスタマイズにチャレンジしてみてください。

株式会社コラボスタイル

株式会社コラボスタイルは、『ワークスタイルの未来を切り拓く』を理念に掲げ、
ワークスタイルのちいさなチャレンジがライフスタイルをより良くすると考えております。

ITツールを提供するメーカーにとどまらず、働く人と働く場所の未来を作っていく会社です。

社内のワークフローを整備することで、働く人の業務ストレスを軽減し
みんなが働きやすい環境を実現するため、ソフトウエアエンジニアを募集しています。

株式会社コラボスタイルの会社情報

エンジニア

この記事が気に入ったら
いいねしてね！

よかったらシェアしてね！
  • URLをコピーしました！
目次