クイック スタート:ブラウザーで Azure Storage v10 SDK for JavaScript と HTML を使用して BLOB をアップロード、一覧表示、削除するQuickstart: Upload, list, and delete blobs using Azure Storage v10 SDK for JavaScript/HTML in the browser

このクイック スタートでは、Azure Storage SDK V10 for JavaScript - BLOB ライブラリを使用して、ブラウザー内で実行が完結する JavaScript コードにより BLOB を管理する方法について説明します。In this quickstart, you'll learn to use the Azure Storage SDK V10 for JavaScript - Blob library to manage blobs from JavaScript code running entirely in the browser. ここで使用されている方法は、必要なセキュリティ対策を使用して BLOB ストレージ アカウントへの保護されたアクセスを確保する方法を示しています。The approach used here shows how to use required security measures to ensure protected access to your blob storage account.

前提条件Prerequisites

Azure Storage にアクセスするには、Azure サブスクリプションが必要です。To access Azure Storage, you'll need an Azure subscription. まだサブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。If you don't already have a subscription, create a free account before you begin.

Azure Storage へのアクセスはすべて、ストレージ アカウント経由で行われます。All access to Azure Storage takes place through a storage account. このクイック スタートでは、Azure portal、Azure PowerShell、または Azure CLI を使用して、ストレージ アカウントを作成します。For this quickstart, create a storage account using the Azure portal, Azure PowerShell, or Azure CLI. アカウントの作成については、「ストレージ アカウントの作成」を参照してください。For help creating the account, see Create a storage account.

Azure Storage JavaScript クライアント ライブラリは、ファイル システムからは直接操作できず、Web サーバーからデータの提供を受ける必要があります。The Azure Storage JavaScript client libraries won't work directly from the file system and must be served from a web server. このトピックでは、Node.js を使用して基本的なサーバーを起動します。This topic uses Node.js to launch a basic server. Node.js をインストールしない場合は、他の任意の方法でローカル Web サーバーを実行してください。If you prefer not to install Node, you can use any other means of running a local web server.

デバッグの手順を実施する場合は、Visual Studio Code のほかに、Debugger for Chrome 拡張機能と Debugger for Microsoft Edge 拡張機能のどちらかが必要になります。To follow the steps on debugging, you'll need Visual Studio Code and either the Debugger for Chrome or Debugger for Microsoft Edge extension.

ストレージ アカウントの CORS ルールの設定Setting up storage account CORS rules

Web アプリケーションでクライアントから BLOB ストレージにアクセスするには、アカウントの構成を変更して、クロス オリジン リソース共有 (CORS) を有効化しておく必要があります。Before your web application can access a blob storage from the client, you must configure your account to enable cross-origin resource sharing, or CORS.

Azure Portal に戻り、ストレージ アカウントを選択します。Return to the Azure portal and select your storage account. 新しい CORS ルールを定義するために、 [設定] セクションに移動し、 [CORS] リンクをクリックします。To define a new CORS rule, navigate to the Settings section and click on the CORS link. 次に、 [追加] ボタンをクリックして、 [CORS ルールの追加] ウィンドウを開きます。Next, click the Add button to open the Add CORS rule window. このクイック スタートでは、オープン CORS ルールを作成します。For this quickstart, you create an open CORS rule:

Azure BLOB ストレージ アカウントの CORS 設定

次の表は、各 CORS 設定の説明と、ルールを定義するために使用する値を示しています。The following table describes each CORS setting and explains the values used to define the rule.

設定Setting Value [説明]Description
許可されるオリジンAllowed origins * 許容されるオリジンとして設定されるドメインの、コンマ区切りの一覧を受け入れます。Accepts a comma-delimited list of domains set as acceptable origins. 値を * に設定すると、すべてのドメインがストレージ アカウントにアクセスできるようになります。Setting the value to * allows all domains access to the storage account.
許可される動詞Allowed verbs delete、get、head、merge、post、options、および putdelete, get, head, merge, post, options, and put ストレージ アカウントに対して実行できる HTTP 動詞の一覧です。Lists the HTTP verbs allowed to execute against the storage account. このクイック スタートの目的に合わせて、利用可能なすべてのオプションを選択します。For the purposes of this quickstart, select all available options.
許可されるヘッダーAllowed headers * ストレージ アカウントによって許可される要求ヘッダー (プレフィックス付きヘッダーを含む) の一覧を定義します。Defines a list of request headers (including prefixed headers) allowed by the storage account. 値を * に設定すると、すべてのヘッダーがアクセスできるようになります。Setting the value to * allows all headers access.
公開されるヘッダーExposed headers * アカウントによって許可される応答ヘッダーの一覧です。Lists the allowed response headers by the account. 値を * に設定すると、アカウントは任意のヘッダーを送信できるようになります。Setting the value to * allows the account to send any header.
最大期間 (秒)Maximum age (seconds) 8640086400 ブラウザーがプレフライト OPTIONS 要求をキャッシュする最大時間。The maximum amount of time the browser caches the preflight OPTIONS request. 値を 86,400 にすると、キャッシュが丸 1 日保持されます。A value of 86400 allows the cache to remain for a full day.

重要

アクセスの安全性を保つため、運用環境で使用するすべての設定で、公開するアクセスの量は、ストレージ アカウントに必要な最小限度に抑えるようにしてください。Ensure any settings you use in production expose the minimum amount of access necessary to your storage account to maintain secure access. ここで説明されている CORS 設定は、緩やかなセキュリティ ポリシーを定義するため、クイック スタートに適しています。The CORS settings described here are appropriate for a quickstart as it defines a lenient security policy. ただし、これらの設定は、現実的なコンテキストには推奨しません。These settings, however, are not recommended for a real-world context.

次に、Azure Cloud Shell を使用して、セキュリティ トークンを作成します。Next, you use the Azure cloud shell to create a security token.

Azure Cloud Shell を使用するUse Azure Cloud Shell

Azure では、ブラウザーを介して使用できる対話型のシェル環境、Azure Cloud Shell がホストされています。Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell で Bash または PowerShell を使用して、Azure サービスを操作できます。You can use either Bash or PowerShell with Cloud Shell to work with Azure services. ローカル環境に何もインストールしなくても、Cloud Shell にプレインストールされているコマンドを使用して、この記事のコードを実行できます。You can use the Cloud Shell preinstalled commands to run the code in this article without having to install anything on your local environment.

Azure Cloud Shell を開始するには:To start Azure Cloud Shell:

オプションOption 例とリンクExample/Link
コード ブロックの右上隅にある [使ってみる] を選択します。Select Try It in the upper-right corner of a code block. [使ってみる] を選択しても、コードは Cloud Shell に自動的にコピーされません。Selecting Try It doesn't automatically copy the code to Cloud Shell. Azure Cloud Shell の [使ってみる] の例
https://shell.azure.com に移動するか、 [Cloud Shell を起動する] ボタンを選択して、ブラウザーで Cloud Shell を開きます。Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser. 新しいウィンドウで Cloud Shell を起動するLaunch Cloud Shell in a new window
Azure portal の右上にあるメニュー バーの [Cloud Shell] ボタンを選択します。Select the Cloud Shell button on the top-right menu bar in the Azure portal. Azure Portal の [Cloud Shell] ボタン

Azure Cloud Shell でこの記事のコードを実行するには:To run the code in this article in Azure Cloud Shell:

  1. Cloud Shell を開始します。Start Cloud Shell.

  2. [コピー] ボタンを選択して、コード ブロックをコードにコピーします。Select the Copy button on a code block to copy the code.

  3. Windows と Linux では Ctrl+Shift+V キーを選択し、macOS では Cmd+Shift+V キーを選択して、コードを Cloud Shell セッションに貼り付けます。Paste the code into the Cloud Shell session by selecting Ctrl+Shift+V on Windows and Linux or by selecting Cmd+Shift+V on macOS.

  4. Enter キーを選択して、コードを実行します。Select Enter to run the code.

Shared Access Signature を作成するCreate a shared access signature

Shared Access Signature (SAS) は、ブラウザーで実行されているコードによって、BLOB ストレージへの要求を承認するために使用されます。The shared access signature (SAS) is used by the code running in the browser to authorize requests to Blob storage. SAS を使用すると、クライアントはアカウント アクセス キーまたは接続文字列がなくても、ストレージ リソースへのアクセスを承認することができます。By using the SAS, the client can authorize access to storage resources without the account access key or connection string. SAS の詳細については、「Shared Access Signatures (SAS) の使用」を参照してください。For more information on SAS, see Using shared access signatures (SAS).

SAS は、Azure Cloud Shell 経由で Azure CLI を利用するか、Azure portal または Azure Storage Explorer を使用して作成できます。You can create a SAS using the Azure CLI through the Azure cloud shell, or with the Azure portal or Azure Storage Explorer. 次の表に、CLI で SAS を生成するために値を指定する必要があるパラメーターを示します。The following table describes the parameters you need to provide values for to generate a SAS with the CLI.

パラメーターParameter [説明]Description プレースホルダーPlaceholder
expiryexpiry YYYY-MM-DD の形式の、アクセス トークンの有効期限。The expiration date of the access token in YYYY-MM-DD format. このクイック スタートで使用する場合は、翌日の日付を入力します。Enter tomorrow's date for use with this quickstart. FUTURE_DATEFUTURE_DATE
account-nameaccount-name ストレージ アカウント名。The storage account name. 前の手順で控えておいた名前を使用します。Use the name set aside in an earlier step. YOUR_STORAGE_ACCOUNT_NAMEYOUR_STORAGE_ACCOUNT_NAME
account-keyaccount-key ストレージ アカウント キー。The storage account key. 前の手順で控えておいたキーを使用します。Use the key set aside in an earlier step. YOUR_STORAGE_ACCOUNT_KEYYOUR_STORAGE_ACCOUNT_KEY

以下の CLI コマンドを、各プレースホルダーを実際の値に置き換えたうえで使用して、JavaScript コードで使用可能な SAS を生成します。Use the following CLI command, with actual values for each placeholder, to generate a SAS that you can use in your JavaScript code.

az storage account generate-sas \
  --permissions racwdl \
  --resource-types sco \
  --services b \
  --expiry FUTURE_DATE \
  --account-name YOUR_STORAGE_ACCOUNT_NAME \
  --account-key YOUR_STORAGE_ACCOUNT_KEY

各パラメーターの後の一連の値が、少しわかりにくいかもしれません。You may find the series of values after each parameter a bit cryptic. これらのパラメーター値は、各アクセス許可の頭文字です。These parameter values are taken from the first letter of their respective permission. 次の表は、値が何の頭文字であるかを示しています。The following table explains where the values come from:

パラメーターParameter Value [説明]Description
アクセス許可permissions racwdlracwdl この SAS は、read (読み取り)append (追加)create (作成)write (書き込み)delete (削除) 、および list (一覧表示) 機能を許可します。This SAS allows read, append, create, write, delete, and list capabilities.
resource-typesresource-types scosco SAS の影響を受けるリソースは、service (サービス)container (コンテナー) 、および object (オブジェクト) です。The resources affected by the SAS are service, container, and object.
servicesservices bb SAS の影響を受けるサービスは、BLOB サービスです。The service affected by the SAS is the blob service.

SAS が生成されたら、戻り値をコピーして、後の手順で使用できるように任意の場所に保存します。Now that the SAS is generated, copy the return value and save it somewhere for use in an upcoming step. Azure CLI 以外の方法で SAS を生成した場合は、先頭に ? が付いていたら削除する必要があります。If you generated your SAS using a method other than the Azure CLI, you will need to remove the initial ? if it is present. この文字は URL 区切り記号であり、本トピックの後半にある、SAS を使用する URL テンプレートでは既に入力されています。This character is a URL separator that is already provided in the URL template later in this topic where the SAS is used.

重要

運用環境では、常に SSL を使用して SAS トークンを渡します。In production, always pass SAS tokens using SSL. また、SAS トークンはサーバーで生成され、HTML ページに送信されて、Azure Blob Storage に戻される必要があります。Also, SAS tokens should be generated on the server and sent to the HTML page in order pass back to Azure Blob Storage. 考えられる 1 つのアプローチとして、サーバーレス機能を使用して SAS トークンを生成する方法があります。One approach you may consider is to use a serverless function to generate SAS tokens. Azure portal には、JavaScript 関数を使用して SAS を生成する機能を備えた関数テンプレートが含まれています。The Azure Portal includes function templates that feature the ability to generate a SAS with a JavaScript function.

HTML ページを実装するImplement the HTML page

このセクションでは、基本的な Web ページを作成してから、VS Code を構成してページの起動とデバッグを行います。In this section, you'll create a basic web page and configure VS Code to launch and debug the page. ただし、起動を行うには、Node.js を使用してローカル Web サーバーを立ち上げて、ブラウザーからの要求に応じてページを提供する必要があります。Before you can launch, however, you'll need to use Node.js to start a local web server and serve the page when your browser requests it. その後、各種 BLOB ストレージ API を呼び出して、ページ上に結果を表示する JavaScript コードを追加します。Next, you'll add JavaScript code to call various blob storage APIs and display the results in the page. これらの呼び出しの結果は、Azure portalAzure Storage Explorer、および VS Code 用の Azure Storage 拡張機能でも確認できます。You can also see the results of these calls in the Azure portal, Azure Storage Explorer, and the Azure Storage extension for VS Code.

Web アプリケーションをセットアップするSet up the web application

初めに、VS Code で azure-blobs-javascript という名前の新しいフォルダーを作成し、開きます。First, create a new folder named azure-blobs-javascript and open it in VS Code. 次に VS Code で新しいファイルを作成して以下の HTML を入力し、azure-blobs-javascript フォルダーに index.html という名前で保存します。Then create a new file in VS Code, add the following HTML, and save it as index.html in the azure-blobs-javascript folder.

<!DOCTYPE html>
<html>

<body>
    <button id="create-container-button">Create container</button>
    <button id="delete-container-button">Delete container</button>
    <button id="select-button">Select and upload files</button>
    <input type="file" id="file-input" multiple style="display: none;" />
    <button id="list-button">List files</button>
    <button id="delete-button">Delete selected files</button>
    <p><b>Status:</b></p>
    <p id="status" style="height:160px; width: 593px; overflow: scroll;" />
    <p><b>Files:</b></p>
    <select id="file-list" multiple style="height:222px; width: 593px; overflow: scroll;" />
</body>

<!-- You'll add code here later in this quickstart. -->

</html>

デバッガーを構成するConfigure the debugger

VS Code でデバッガー拡張機能を設定するには、 [デバッグ] > [構成の追加] の順に選択し、前の「前提条件」セクションでインストールした拡張機能に応じて [Chrome] または [Edge] を選択します。To set up the debugger extension in VS Code, select Debug > Add Configuration..., then select Chrome or Edge, depending on which extension you installed in the Prerequisites section earlier. この操作により、launch.json ファイルが作成され、エディターで開かれます。This action creates a launch.json file and opens it in the editor.

次に、launch.json ファイルを編集して、下記のように url の値に /index.html を追加します。Next, modify the launch.json file so that the url value includes /index.html as shown:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080/index.html",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

この構成により、起動するブラウザーと読み込む URL を VS Code に指示します。This configuration tells VS Code which browser to launch and which URL to load.

Web サーバーを起動するLaunch the web server

ローカルの Node.js Web サーバーを起動するには、VS Code 内で [表示] > [ターミナル] の順に選択してコンソール ウィンドウを開き、次のコマンドを入力します。To launch the local Node.js web server, select View > Terminal to open a console window inside VS Code, then enter the following command.

npx http-server

このコマンドにより、http-server パッケージがインストールされてサーバーが起動され、前の手順で指定した URL を含む既定の URL を介して、現在のフォルダーが公開されます。This command will install the http-server package and launch the server, making the current folder available through default URLs including the one indicated in the previous step.

デバッグを開始するStart debugging

VS Code デバッガーをアタッチした状態で index.html をブラウザーで開くには、VS Code で [デバッグ] > [デバッグの開始] の順に選択するか、F5 キーを押します。To launch index.html in the browser with the VS Code debugger attached, select Debug > Start Debugging or press F5 in VS Code.

表示される UI はまだ何の動作もしませんが、以降のセクションで JavaScript コードを追加し、示されている機能のそれぞれを実装していきます。The UI displayed doesn't do anything yet, but you'll add JavaScript code in the following section to implement each function shown. その後、ブレークポイントを設定し、コードを一時停止しながらデバッガーを操作できます。You can then set breakpoints and interact with the debugger when it's paused on your code.

index.html に変更を加えた場合は、ページを再読み込みしてブラウザーで変更内容を確認してください。When you make changes to index.html, be sure to reload the page to see the changes in the browser. VS Code で、 [デバッグ] > [デバッグの再起動] の順に選択するか、CTRL + SHIFT + F5 キーを押すこともできます。In VS Code, you can also select Debug > Restart Debugging or press CTRL + SHIFT + F5.

BLOB ストレージ クライアント ライブラリを追加するAdd the blob storage client library

BLOB ストレージ API の呼び出しを有効にするには、まず Azure Storage SDK for JavaScript - BLOB クライアント ライブラリをダウンロードし、この ZIP ファイルの中身を展開して、azure-storage-blob.js ファイルを azure-blobs-javascript フォルダー内に配置します。To enable calls to the blob storage API, first Download the Azure Storage SDK for JavaScript - Blob client library, extract the contents of the zip, and place the azure-storage-blob.js file in the azure-blobs-javascript folder.

次に、以下の HTML を index.html 内の </body> 終了タグの後に貼り付けて、プレースホルダーのコメントを置き換えます。Next, paste the following HTML into index.html after the </body> closing tag, replacing the placeholder comment.

<script src="azure-storage-blob.js" charset="utf-8"></script>

<script>
// You'll add code here in the following sections.
</script>

このコードはスクリプト ファイルへの参照を追加するものであり、独自の JavaScript コードの入力場所にもなります。This code adds a reference to the script file and provides a place for your own JavaScript code. このクイック スタートでは、スクリプト ファイルを VS Code で開き、内容を確認してブレークポイントを設定できるように、azure-storage-blob.js スクリプト ファイルを使用します。For the purposes of this quickstart, we're using the azure-storage-blob.js script file so that you can open it in VS Code, read its contents, and set breakpoints. 運用環境では、ZIP ファイルに同梱されている、よりコンパクトな azure-storage.blob.min.js ファイルを使ってください。In production, you should use the more compact azure-storage.blob.min.js file that is also provided in the zip file.

各 BLOB ストレージ関数の詳細については、リファレンス ドキュメントを参照してください。You can find out more about each blob storage function in the reference documentation. SDK の関数の中には、Node.js とブラウザーのいずれか一方でしか使用できないものがあることに注意してください。Note that some of the functions in the SDK are only available in Node.js or only available in the browser.

azure-storage-blob.js のコードでは、JavaScript コード内で BLOB ストレージ API へのアクセスに使用する、azblob というグローバル変数がエクスポートされます。The code in azure-storage-blob.js exports a global variable called azblob, which you'll use in your JavaScript code to access the blob storage APIs.

最初の JavaScript コードを追加するAdd the initial JavaScript code

次に、前述のコード ブロック内にある <script> 要素に以下のコードを貼り付けて、プレースホルダーのコメントを置き換えます。Next, paste the following code into the <script> element shown in the previous code block, replacing the placeholder comment.

const createContainerButton = document.getElementById("create-container-button");
const deleteContainerButton = document.getElementById("delete-container-button");
const selectButton = document.getElementById("select-button");
const fileInput = document.getElementById("file-input");
const listButton = document.getElementById("list-button");
const deleteButton = document.getElementById("delete-button");
const status = document.getElementById("status");
const fileList = document.getElementById("file-list");

const reportStatus = message => {
    status.innerHTML += `${message}<br/>`;
    status.scrollTop = status.scrollHeight;
}

このコードでは、今後のコードで使用する各 HTML 要素用のフィールドを作成してから、出力を表示する reportStatus 関数を実装しています。This code creates fields for each HTML element that the following code will use, and implements a reportStatus function to display output.

以降のセクションでは、上記ブロックの後に新しい各 JavaScript コード ブロックを追加していきます。In the following sections, add each new block of JavaScript code after the previous block.

ストレージ アカウントの情報を追加するAdd your storage account info

次に、ストレージ アカウントにアクセスするためのコードを追加し、プレースホルダーを、アカウント名および前の手順で生成した SAS に置き換えます。Next, add code to access your storage account, replacing the placeholders with your account name and the SAS you generated in a previous step.

const accountName = "<Add your storage account name>";
const sasString = "<Add the SAS you generated earlier>";
const containerName = "testcontainer";
const containerURL = new azblob.ContainerURL(
    `https://${accountName}.blob.core.windows.net/${containerName}?${sasString}`,
    azblob.StorageURL.newPipeline(new azblob.AnonymousCredential));

このコードでは、アカウントの情報と SAS を使用して、ストレージ コンテナーの作成と操作に役立つ ContainerURL インスタンスを作成します。This code uses your account info and SAS to create a ContainerURL instance, which is useful for creating and manipulating a storage container.

ストレージ コンテナーを作成および削除するCreate and delete a storage container

次に、対応するボタンが押されるとストレージ コンテナーを作成および削除するコードを追加します。Next, add code to create and delete the storage container when you press the corresponding button.

const createContainer = async () => {
    try {
        reportStatus(`Creating container "${containerName}"...`);
        await containerURL.create(azblob.Aborter.none);
        reportStatus(`Done.`);
    } catch (error) {
        reportStatus(error.body.message);
    }
};

const deleteContainer = async () => {
    try {
        reportStatus(`Deleting container "${containerName}"...`);
        await containerURL.delete(azblob.Aborter.none);
        reportStatus(`Done.`);
    } catch (error) {
        reportStatus(error.body.message);
    }
};

createContainerButton.addEventListener("click", createContainer);
deleteContainerButton.addEventListener("click", deleteContainer);

このコードでは、Aborter インスタンスは使用せず、containerURL の create 関数と delete 関数を使用しています。This code calls the ContainerURL create and delete functions without using an Aborter instance. このクイック スタートの内容をシンプルにしておくため、上記コードでは、ストレージ アカウントが作成済みであり有効化されていることを前提としています。To keep things simple for this quickstart, this code assumes that your storage account has been created and is enabled. 運用環境のコードで、タイムアウト機能を追加するには、Aborter インスタンスを使用してください。In production code, use an Aborter instance to add timeout functionality.

BLOB を一覧表示するList blobs

次に、 [List files](ファイルの一覧表示) ボタンが押されるとストレージ コンテナーの内容を一覧表示するコードを追加します。Next, add code to list the contents of the storage container when you press the List files button.

const listFiles = async () => {
    fileList.size = 0;
    fileList.innerHTML = "";
    try {
        reportStatus("Retrieving file list...");
        let marker = undefined;
        do {
            const listBlobsResponse = await containerURL.listBlobFlatSegment(
                azblob.Aborter.none, marker);
            marker = listBlobsResponse.nextMarker;
            const items = listBlobsResponse.segment.blobItems;
            for (const blob of items) {
                fileList.size += 1;
                fileList.innerHTML += `<option>${blob.name}</option>`;
            }
        } while (marker);
        if (fileList.size > 0) {
            reportStatus("Done.");
        } else {
            reportStatus("The container does not contain any files.");
        }
    } catch (error) {
        reportStatus(error.body.message);
    }
};

listButton.addEventListener("click", listFiles);

このコードでは、すべてのセグメントが確実に取得されるよう、containerURL.listBlobFlatSegment 関数をループ内で呼び出しています。This code calls the ContainerURL.listBlobFlatSegment function in a loop to ensure that all segments are retrieved. 各セグメントについて、含まれる BLOB 項目の一覧をループ処理し、ファイル一覧を更新しています。For each segment, it loops over the list of blob items it contains and updates the Files list.

BLOB をアップロードするUpload blobs

次に、 [Select and upload files](ファイルを選択してアップロード) ボタンが押されると、ストレージ コンテナーにファイルをアップロードするコードを追加します。Next, add code to upload files to the storage container when you press the Select and upload files button.

const uploadFiles = async () => {
    try {
        reportStatus("Uploading files...");
        const promises = [];
        for (const file of fileInput.files) {
            const blockBlobURL = azblob.BlockBlobURL.fromContainerURL(containerURL, file.name);
            promises.push(azblob.uploadBrowserDataToBlockBlob(
                azblob.Aborter.none, file, blockBlobURL));
        }
        await Promise.all(promises);
        reportStatus("Done.");
        listFiles();
    } catch (error) {
        reportStatus(error.body.message);
    }
}

selectButton.addEventListener("click", () => fileInput.click());
fileInput.addEventListener("change", uploadFiles);

このコードでは、 [Select and upload files](ファイルを選択してアップロード) ボタンを非表示の file-input 要素に結び付けています。This code connects the Select and upload files button to the hidden file-input element. こうすることで、ボタンの click イベントによりファイル入力の click イベントがトリガーされ、ファイル ピッカーが表示されます。In this way, the button click event triggers the file input click event and displays the file picker. ファイルを選択してダイアログ ボックスを閉じると、input イベントが発生して uploadFiles 関数が呼び出されます。After you select files and close the dialog box, the input event occurs and the uploadFiles function is called. この関数では、選択したファイルごとに、ブラウザー専用の uploadBrowserDataToBlockBlob 関数を呼び出しています。This function calls the browser-only uploadBrowserDataToBlockBlob function for each file you selected. 各呼び出しでは Promise が返されます。これを一覧に追加してすべてのファイルをまとめて待機状態にすることで、全ファイルを並列でアップロードしています。Each call returns a Promise, which is added to a list so that they can all be awaited at once, causing the files to upload in parallel.

BLOB を削除するDelete blobs

次に、 [Delete selected files](選択したファイルを削除) ボタンが押されると、ストレージ コンテナーからファイルを削除するコードを追加します。Next, add code to delete files from the storage container when you press the Delete selected files button.

const deleteFiles = async () => {
    try {
        if (fileList.selectedOptions.length > 0) {
            reportStatus("Deleting files...");
            for (const option of fileList.selectedOptions) {
                const blobURL = azblob.BlobURL.fromContainerURL(containerURL, option.text);
                await blobURL.delete(azblob.Aborter.none);
            }
            reportStatus("Done.");
            listFiles();
        } else {
            reportStatus("No files selected.");
        }
    } catch (error) {
        reportStatus(error.body.message);
    }
};

deleteButton.addEventListener("click", deleteFiles);

このコードでは、blobURL.delete 関数を呼び出して、一覧で選択された各ファイルを削除しています。This code calls the BlobURL.delete function to remove each file selected in the list. その後、先ほど紹介した listFiles 関数を呼び出して、ファイル一覧の内容を更新しています。It then calls the listFiles function shown earlier to refresh the contents of the Files list.

Web アプリケーションを実行してテストするRun and test the web application

これで、ページを起動して、BLOB ストレージの動作を試すことができるようになりました。At this point, you can launch the page and experiment to get a feel for how blob storage works. (たとえば、コンテナーの作成前にファイルを一覧表示しようとして) エラーが発生すると、 [ステータス] ウィンドウに、受信したエラー メッセージが表示されます。If any errors occur (for example, when you try to list files before you've created the container), the Status pane will display the error message received. また、JavaScript コード内にブレークポイントを設定して、ストレージ API で返される値を調べることもできます。You can also set breakpoints in the JavaScript code to examine the values returned by the storage APIs.

リソースをクリーンアップするClean up resources

このクイック スタートで作成したリソースを削除するには、Azure portal にアクセスして、「前提条件」セクションで作成したリソース グループを削除します。To clean up the resources created during this quickstart, go to the Azure portal and delete the resource group you created in the Prerequisites section.

次のステップNext steps

このクイック スタートでは、ブラウザーベースの JavaScript から BLOB ストレージにアクセスする単純な Web サイトを作成しました。In this quickstart, you've created a simple website that accesses blob storage from browser-based JavaScript. BLOB ストレージ上で Web サイト自体をホストする方法について学習するには、次のチュートリアルに進んでください。To learn how you can host a website itself on blob storage, continue to the following tutorial: