【Box】Web版からBox Driveのフォルダーパスを取得する方法【JavaScript】

概要
サンプルコード
詳細
関連記事
おわりに

概要

Box Driveを利用していると、Web版Boxで開いているフォルダーをWindowsのエクスプローラーから開きたいことがあります。

しかし、Web版BoxではフォルダーのURLをコピーすることはできても、Box Driveで利用するWindows形式のフォルダーパスを直接取得することはできません。

例えば、以下のようなフォルダー構成がある場合です。

Box > 部署共有 > プロジェクト > 資料

Windowsのエクスプローラーでは、以下のようなパスになります。

C:\Box\部署共有\プロジェクト\資料

フォルダーの階層が深い場合、手動でパスを入力するのは少々面倒です。

そこで今回は、JavaScriptを利用してWeb版Boxからフォルダーの階層を取得し、Windows形式のフォルダーパスをクリップボードにコピーする方法を紹介します。

また、ブックマークレットとして登録することで、必要なときにワンクリックで実行できるようにします。

なお、利用する際は、Boxのホスト名とBox Driveのルートフォルダーを、ご自身の環境に合わせて変更してください。

サンプルコード

以下が今回利用するJavaScriptです。

企業向けBoxを想定していますが、ホスト名を変更することで個人向けBoxでも利用できる構成です。

javascript:(function () {
    // Boxのホスト名
    const host = "hogehoge.ent.box.com";

    // Box Driveのルートパス
    const rootPath = "C:\\Box\\";

    // 対象のBoxフォルダーか確認
    if (
        location.hostname !== host ||
        !location.pathname.startsWith("/folder/") ||
        location.pathname === "/folder/0"
    ) {
        alert("対象のBoxフォルダーを開いてください。");
        return;
    }

    const names = [];

    // 上位階層のフォルダー名を取得
    document.querySelectorAll("ul.aria-menu a")
        .forEach(el => names.push(el.textContent.trim()));

    // パンくずリストからフォルダー名を取得
    document.querySelectorAll(".ItemListBreadcrumb-link")
        .forEach(el => names.push(el.textContent.trim()));

    // 現在開いているフォルダー名を取得
    const current = document.querySelector(
        'h1[class*="currentItemTitle"]'
    );

    if (current) {
        names.push(current.textContent.trim());
    }

    // 不要な項目や重複を除外
    const folders = names.filter(
        (name, index, arr) =>
            name &&
            name !== "ファイル" &&
            arr.indexOf(name) === index
    );

    // Windows形式のフォルダーパスを生成
    const path = rootPath + folders.join("\\");

    // クリップボードへコピー
    navigator.clipboard.writeText(path)
        .then(() => alert("コピーしました:\n" + path))
        .catch(() => prompt("パスをコピーしてください:", path));
})();

上記のコードをブックマークレットとして登録することで、Web版Boxからフォルダーパスを取得できます。

詳細

1. Boxのホスト名を設定する

まず、利用しているBoxのホスト名を設定します。

const host = "hogehoge.ent.box.com";

企業向けBoxでは、企業ごとに専用のサブドメインを利用している場合があります。

例えば、以下のようなURLです。
https://hogehoge.ent.box.com/folder/123456789

この場合、ホスト名には hogehoge.ent.box.com を指定します。

個人向けBoxであれば、通常は以下のようになります。

const host = "app.box.com";

利用しているBoxのURLを確認し、環境に合わせて変更してください。

なお、今回のコードでは、指定したホスト名以外では実行されないようにしています。

2. Box Driveのルートパスを設定する

続いて、Box Driveのルートフォルダーを指定します。

const rootPath = "C:\\Box\\";

サンプルコードでは C:\Box\ を指定していますが、Box Driveのルートフォルダーは利用環境や設定によって異なります。

例えば、以下のようなパスが考えられます。

C:\Box\
C:\Users\ユーザー名\Box\

エクスプローラーでBox Driveのフォルダーを開き、実際のパスを確認したうえで、ご自身の環境に合わせて書き換えてください。

なお、JavaScriptでは \ を文字列として扱う際にエスケープが必要となるため、コード上では \\ と記載します。

ホスト名とルートフォルダーの2か所を変更することで、ご自身のBox環境に合わせて利用できます。

3. フォルダー階層を取得する

Web版Boxの画面には、現在開いているフォルダーの階層を示すパンくずリストがあります。

今回のコードでは、この情報を利用してフォルダー名を取得しています。

document.querySelectorAll("ul.aria-menu a")
    .forEach(el => names.push(el.textContent.trim()));

document.querySelectorAll(".ItemListBreadcrumb-link")
    .forEach(el => names.push(el.textContent.trim()));

上位階層の情報とパンくずリストを取得し、配列に格納しています。

また、現在開いているフォルダー名については、以下のコードで取得しています。

const current = document.querySelector(
    'h1[class*="currentItemTitle"]'
);

if (current) {
    names.push(current.textContent.trim());
}

これにより、現在のフォルダーを含めたパスを生成できるようにしています。

4. 不要な項目を除外する

取得した情報には、不要な文字列や重複した項目が含まれる場合があります。

そこで、以下の処理を行っています。

const folders = names.filter(
    (name, index, arr) =>
        name &&
        name !== "ファイル" &&
        arr.indexOf(name) === index
);

この処理では、空白の項目や「ファイル」という文字列など、フォルダーパスの生成に不要な情報を除外しています。

5. Windows形式のフォルダーパスに変換する

取得したフォルダー名を \ で連結し、Windows形式のパスに変換します。

const path = rootPath + folders.join("\\");

例えば、以下のフォルダー構成の場合、

部署共有 > プロジェクト > 資料

次のようなパスが生成されます。

C:\Box\部署共有\プロジェクト\資料

6. クリップボードにコピーする

生成したパスは、JavaScriptのClipboard APIを利用してクリップボードにコピーします。

navigator.clipboard.writeText(path)
    .then(() => alert("コピーしました:\n" + path))
    .catch(() => prompt("パスをコピーしてください:", path));

コピーに成功すると、取得したフォルダーパスがメッセージとして表示されます。

クリップボードへのコピーに失敗した場合は、ダイアログにパスを表示するため、手動でコピーすることも可能です。

7. ブックマークレットとして登録する

毎回JavaScriptを実行するのは面倒なため、ブックマークレットとして登録しておくと便利です。

今回はGoogle Chromeを例に説明します。

ブラウザのブックマークバーを右クリックし、「ページを追加」を選択します。
名前に「Boxフォルダーパス取得」など、任意の名称を入力します。
URL欄に、サンプルコードを1行にしたJavaScriptを貼り付けます。
保存します。

これで準備は完了です。

Web版Boxで任意のフォルダーを開き、登録したブックマークをクリックしてください。

正常に動作すると、取得したフォルダーパスが表示され、クリップボードへコピーされます。

コピーしたパスをエクスプローラーのアドレスバーに貼り付けることで、該当フォルダーを開くことができます。

8. 注意事項

今回のJavaScriptは、Web版BoxのHTML構造からフォルダー名を取得しています。

そのため、Box側の画面構成やHTML構造が変更された場合、正常に動作しなくなる可能性があります。

また、以下の点にも注意してください。

Box Driveがインストールされていること
対象フォルダーにアクセス権限があること
Box Driveのルートパスが正しく設定されていること
ブラウザや組織のセキュリティ設定によって、ブックマークレットの実行が制限される場合があること

なお、今回のコードはBoxの公式APIを利用するものではなく、ブラウザ上に表示されている情報を取得するものです。

【Box】EverythingでBoxDriveを検索する方法

久しぶりに Box を Everything で検索しようとすると、アクセス権限に関するエラーが発生するようになっていました。一応検索できるようにはなりましたので、そのときのことを備忘録として残しておきます。概要Box はセキュリティの高さ…

おわりに

今回は、JavaScriptを利用してWeb版BoxからBox Driveのフォルダーパスを取得する方法を紹介しました。

Box Driveを利用している場合、Web版Boxで開いているフォルダーをエクスプローラーから開きたいことが意外とあります。

毎回フォルダーの階層を確認して入力するのは面倒ですが、今回のJavaScriptを利用することで、簡単にパスを取得できるようになります。

ブックマークレットとして登録しておけば、必要なときにクリックするだけで利用できるため、Boxを日常的に利用している方は試してみてください。

概要