Movatterモバイル変換

[0]ホーム
URL:

メイン コンテンツにスキップ

このブラウザーはサポートされなくなりました。

Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。

Microsoft Edge をダウンロードするInternet Explorer と Microsoft Edge の詳細情報
目次フォーカス モードの終了

クイック スタート:ブラウザーで JavaScript v12 SDK を使用して BLOB を管理する

  • 2023-06-01
フィードバック

この記事の内容

Azure Blob Storage は、大量の非構造化データを格納するために最適化されています。 BLOB は、テキストやバイナリ データ (画像、ドキュメント、ストリーミング メディア、アーカイブ データなど) を保持できるオブジェクトです。 このクイックスタートでは、ブラウザーで JavaScript を使用して BLOB を管理する方法について説明します。 ここでは、BLOB のアップロードと一覧表示のほか、コンテナーの作成と削除を行います。

サンプルコードは、JavaScript用のAzure Blobストレージクライアントライブラリを使用して、次のタスクを達成する方法を示しています:

その他のリソース:

API リファレンス |ライブラリのソース コード |パッケージ (npm) |サンプル

前提条件

オブジェクト モデル

Blob Storage には、3 種類のリソースがあります。

  • ストレージ アカウント
  • ストレージ アカウント内のコンテナー
  • コンテナー内の BLOB

次の図に、これらのリソースの関係を示します。

Blob Storage のアーキテクチャ図

このクイックスタートでは、これらのリソースとやり取りするために、以下の JavaScript クラスを使用します。

  • BlobServiceClient:BlobServiceClient クラスを使用して、Azure Storage リソースと BLOB コンテナーを操作できます。
  • ContainerClient:ContainerClient クラスを使用して、Azure Storage コンテナーとその BLOB を操作できます。
  • BlockBlobClient:BlockBlobClient クラスを使用して、Azure Storage BLOB を操作できます。

ブラウザー アクセス用にストレージ アカウントを構成する

Web ブラウザーからストレージ アカウントにプログラムでアクセスするには、CORS アクセスを構成し、SAS 接続文字列を作成する必要があります。

CORS ルールを作成する

Web アプリケーションでクライアントから BLOB ストレージにアクセスするには、アカウントを構成して、クロス オリジン リソース共有 (CORS) を有効にしておく必要があります。

Azure portal で、自分のストレージ アカウントを選択します。 新しい CORS ルールを定義するために、[設定] セクションに移動し、[CORS] を選択します。 このクイック スタートでは、フルオープン CORS ルールを作成します:

Azure Blob Storage アカウントの CORS 設定

次の表は、各 CORS 設定の説明と、ルールを定義するために使用する値を示しています。

設定値説明
許可されたオリジン*許容されるオリジンとして設定されるドメインの、コンマ区切りの一覧を受け入れます。 値を* に設定すると、すべてのドメインがストレージ アカウントにアクセスできるようになります。
許可されたメソッドDELETE、GET、HEAD、MERGE、POST、OPTIONS、PUTストレージ アカウントに対して実行できる HTTP 動詞の一覧です。 このクイック スタートの目的に合わせて、利用可能なすべてのオプションを選択します。
許可されたヘッダー*ストレージ アカウントによって許可される要求ヘッダー (プレフィックス付きヘッダーを含む) の一覧を定義します。 値を* に設定すると、すべてのヘッダーがアクセスできるようになります。
公開されるヘッダー*アカウントによって許可される応答ヘッダーの一覧です。 値を* に設定すると、アカウントは任意のヘッダーを送信できるようになります。
最長有効期間86400ブラウザーがプレフライト OPTIONS 要求をキャッシュする最大時間 (秒)。 値を86,400 にすると、キャッシュが丸 1 日保持されます。

この表の値を各フィールドに入力したら、[保存] ボタンを選択します。

重要

アクセスの安全性を保つため、運用環境で使用するすべての設定で、公開するアクセスの量は、ストレージ アカウントに必要な最小限度に抑えるようにしてください。 ここで説明されている CORS 設定は、緩やかなセキュリティ ポリシーを定義するため、クイック スタートに適しています。 ただし、これらの設定は、現実的なコンテキストには推奨しません。

SAS 接続文字列の作成

Shared Access Signature (SAS) は、Azure Blob Storage への要求を承認するために、ブラウザーで実行されているコードによって使用されます。 SAS を使用すると、クライアントはアカウント アクセス キーまたは接続文字列がなくても、ストレージ リソースへのアクセスを承認することができます。 SAS の詳細については、「Shared Access Signatures (SAS) の使用」を参照してください。

Blob service の SAS URL を取得するには、次の手順に従います。

  1. Azure portal で、自分のストレージ アカウントを選択します。
  2. [セキュリティとネットワーク] セクションに移動し、[Shared Access Signature] を選択します。
  3. 許可されたサービスを確認して 、SAS トークンがすべてのストレージ アカウント サービスにアクセスできることを理解します:
    • BLOB
    • ファイル
    • キュー
    • テーブル
  4. 許可されるリソースの種類を選択して、以下を含めます:
    • Service
    • コンテナー
    • Object
  5. 開始日と満了の日付/時刻を確認し、SASトークンがデフォルトで限られた有効期限を持っていることを理解します。
  6. 下へスクロールし、[SAS と接続文字列を生成する] ボタンを選択します。
  7. さらに下へスクロールし、[Blob service の SAS URL] フィールドを見つけます。
  8. [Blob service の SAS URL] フィールドの右端にある[クリップボードにコピー] ボタンを選択します。
  9. 後の手順で使用できるよう、コピーした URL をどこかに保存します。

注意

ポータルから返される SAS トークンには、URL クエリ文字列に必要な区切り文字 ("?") が含まれていません。 SAS トークンをリソース URL に追加する場合は、SAS トークンを追加する前に、必ずリソース URL に区切り文字を追加してください。

JavaScript プロジェクトの作成

blob-quickstart-v12 という名前の JavaScript アプリケーションを作成します。

  1. コンソール ウィンドウ (cmd、PowerShell、Bash など) で、プロジェクト用に新しいディレクトリを作成します。

    mkdir blob-quickstart-v12

  2. 新しく作成されたblob-quickstart-v12 ディレクトリに切り替えます。

    cd blob-quickstart-v12

  3. package.json を作成します。

    npm init -y

  4. Visual Studio Code でプロジェクトを開きます。

    code .

BLOB ストレージ用の npm パッケージをインストールする

  1. Visual Studio Code のターミナルで、Azure Storage の npm パッケージをインストールします:

    npm install @azure/storage-blob

  2. ブラウザ用のファイルやパッケージをバンドルするbundlerパッケージをインストールします:

    npm install parcel

    別のバンドルソフトを使用する場合は、Azure SDKのバンドルについて詳細をご覧ください。

ブラウザーのバンドル設定

  1. Visual Studio Code でpackage.json ファイルを開き、browserlist を追加します。 このbrowserlist では、一般的なブラウザの最新版を対象にしています。 完成したpackage.json ファイルは、次のようになります。

    "browserslist": [  "last 1 Edge version",  "last 1 Chrome version",  "last 1 Firefox version",  "last 1 safari version",  "last 1 webkit version"],

  2. Web サイトをバンドルする開始 スクリプトを追加します:

    "scripts": {  "start": "parcel ./index.html"},

HTML ファイルの作成

  1. index.html を作成し、次のHTMLコードを追加します:

    <!-- index.html --><!DOCTYPE html><html><body>    <button>Create container</button>    <button>Select and upload files</button>    <input type="file" multiple />    <button>List files</button>    <button>Delete selected files</button>    <button>Delete container</button>    <p><b>Status:</b></p>    <p />    <p><b>Files:</b></p>    <select multiple /></body><script type="module" src="./index.js"></script></html>

JavaScript ファイルを作成

プロジェクト ディレクトリで次の操作を行います。

  1. index.js という名前で新しいファイルを作成します。

  2. Azure Storage npm パッケージを追加します。

    const { BlobServiceClient } = require("@azure/storage-blob");

UI 要素のフィールドを宣言する

ユーザーとの対話のために DOM 要素を追加します:

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 関数を実装しています。

ストレージ アカウントの情報を追加する

ストレージアカウントにアクセスするには、index.js ファイルの末尾に次のコードを追加します。<placeholder>を、先ほど生成したBlobサービスの SAS URL に置き換えます。index.js ファイルの末尾に次のコードを追加します。

// Update <placeholder> with your Blob service SAS URL stringconst blobSasUrl = "<placeholder>";

クライアント オブジェクトを作成する

ストレージアカウントに接続するには、BlobServiceClientとContainerClientオブジェクトを作成します。index.js ファイルの末尾に次のコードを追加します。

// Create a new BlobServiceClientconst blobServiceClient = new BlobServiceClient(blobSasUrl);// Create a unique name for the container by // appending the current time to the file nameconst containerName = "container" + new Date().getTime();// Get a container client from the BlobServiceClientconst containerClient = blobServiceClient.getContainerClient(containerName);

ストレージ コンテナーを作成および削除する

Webページで対応するボタンを選択すると、ストレージコンテナーの作成と削除ができます。index.js ファイルの末尾に次のコードを追加します。

const createContainer = async () => {    try {        reportStatus(`Creating container "${containerName}"...`);        await containerClient.create();        reportStatus(`Done. URL:${containerClient.url}`);    } catch (error) {        reportStatus(error.message);    }};const deleteContainer = async () => {    try {        reportStatus(`Deleting container "${containerName}"...`);        await containerClient.delete();        reportStatus(`Done.`);    } catch (error) {        reportStatus(error.message);    }};createContainerButton.addEventListener("click", createContainer);deleteContainerButton.addEventListener("click", deleteContainer);

BLOB を一覧表示する

ファイル一覧ボタンを選択すると、ストレージ コンテナーの内容を一覧表示します。index.js ファイルの末尾に次のコードを追加します。

const listFiles = async () => {    fileList.size = 0;    fileList.innerHTML = "";    try {        reportStatus("Retrieving file list...");        let iter = containerClient.listBlobsFlat();        let blobItem = await iter.next();        while (!blobItem.done) {            fileList.size += 1;            fileList.innerHTML += `<option>${blobItem.value.name}</option>`;            blobItem = await iter.next();        }        if (fileList.size > 0) {            reportStatus("Done.");        } else {            reportStatus("The container does not contain any files.");        }    } catch (error) {        reportStatus(error.message);    }};listButton.addEventListener("click", listFiles);

このコードは、ContainerClient.listBlobsFlat 関数を呼び出し、返された各BlobItem の名前を、反復子を使用して取得します。BlobItem ごとに、name プロパティの値でBlobItem リストを更新します。

コンテナーに BLOB をアップロードする

ファイルを選択してアップロードボタンを選択すると、ストレージ コンテナーにファイルをアップロードします。index.js ファイルの末尾に次のコードを追加します。

const uploadFiles = async () => {    try {        reportStatus("Uploading files...");        const promises = [];        for (const file of fileInput.files) {            const blockBlobClient = containerClient.getBlockBlobClient(file.name);            promises.push(blockBlobClient.uploadBrowserData(file));        }        await Promise.all(promises);        reportStatus("Done.");        listFiles();    }    catch (error) {            reportStatus(error.message);    }}selectButton.addEventListener("click", () => fileInput.click());fileInput.addEventListener("change", uploadFiles);

このコードでは、[Select and upload files]\(ファイルを選択してアップロード\) ボタンを非表示のfile-input 要素に結び付けています。 ボタンのclick イベントによりファイル入力のclick イベントがトリガーされ、ファイル ピッカーが表示されます。 ファイルを選択してダイアログ ボックスを閉じると、input イベントが発生してuploadFiles 関数が呼び出されます。 この関数によってBlockBlobClient オブジェクトが作成され、選択したファイルごとに、ブラウザー専用のuploadBrowserData 関数が呼び出されます。 各呼び出しではPromise が返されます。 各Promise をリストに追加してすべてのファイルをまとめて待機状態にすることで、全ファイルを並列でアップロードしています。

BLOB を削除する

選択したファイルを削除するボタンを選択すると、ストレージ コンテナーからファイルを削除します。index.js ファイルの末尾に次のコードを追加します。

const deleteFiles = async () => {    try {        if (fileList.selectedOptions.length > 0) {            reportStatus("Deleting files...");            for (const option of fileList.selectedOptions) {                await containerClient.deleteBlob(option.text);            }            reportStatus("Done.");            listFiles();        } else {            reportStatus("No files selected.");        }    } catch (error) {        reportStatus(error.message);    }};deleteButton.addEventListener("click", deleteFiles);

このコードでは、ContainerClient.deleteBlob 関数を呼び出して、一覧で選択された各ファイルを削除しています。 その後、先ほど紹介したlistFiles 関数を呼び出して、listFiles一覧の内容を更新しています。

コードの実行

  1. Visual Studio Code ターミナルからアプリを実行します。

    npm start

    このプロセスでは、ファイルをバンドルし、web サーバーを起動します。

  2. 次の URL を使用してブラウザーで web サイトにアクセスします:

    http://localhost:1234

手順 1: コンテナーを作成する

  1. Web アプリで[Create container](コンテナーの作成) を選択します。 状態を見ると、コンテナーが作成されたことがわかります。
  2. Azure portal で、コンテナーが作成されたことを確認します。 使うストレージ アカウントを選びます。[Blob service] で[コンテナー] を選択します。 新しいコンテナーが表示されることを確認します。 必要に応じて、[Refresh](最新の情報に更新) を選択してください。

手順 2: コンテナーに BLOB をアップロードする

  1. ローカル コンピューターでテスト ファイル (test.txt など) を作成し、保存します。
  2. Webアプリでファイルの選択とアップロードを選択します。
  3. テスト ファイルを参照し、[開く] を選択します。 状態を見ると、ファイルがアップロードされたこと、またファイル リストが取得されたことがわかります。
  4. Azure portal で、先ほど作成した新しいコンテナーの名前を選択します。 テスト ファイルが表示されることを確認します。

手順 3: BLOB を削除する

  1. Web アプリの[Files](ファイル) で、テスト ファイルを選択します。
  2. [Delete selected files](選択したファイルを削除) を選択します。 状態を見ると、ファイルが削除されたこと、またコンテナーにファイルが存在しないことがわかります。
  3. Azure portal で[Refresh](最新の情報に更新) を選択します。 "BLOB が見つかりませんでした" と表示されていることを確認します。

手順 4: コンテナーを削除する

  1. Web アプリで[Delete container](コンテナーの削除) を選択します。 状態を見ると、コンテナーが削除されていることがわかります。
  2. Azure portal のペインの左上にある<account-name> | [コンテナー] リンクを選択します。
  3. [最新の情報に更新] を選択します。 新しいコンテナーが消えます。
  4. Web アプリを閉じます。

ストレージ エミュレーターを使用する

このクイックスタートでは、Azure クラウド上にコンテナーと BLOB を作成しました。 Azure Blob Storage npm パッケージを使って、開発およびテスト用にAzure Storage エミュレーター上のローカルにこれらのリソースを作成することもできます。

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

  1. このクイックスタートを完了したら、blob-quickstart-v12 ディレクトリを削除します。
  2. Azure Storage リソースの使用が完了したら、次のいずれかの方法でリソースグループを削除します:

次のステップ

このクイックスタートでは、JavaScript を使用して BLOB をアップロード、一覧表示、削除する方法について説明しました。 また、Blob Storage コンテナーの作成方法と削除方法についても説明しました。

チュートリアル、サンプル、クイックスタートなどのドキュメントについては、次のページを参照してください。

フィードバック

このページはお役に立ちましたか?

Yesいいえ

この記事の内容

このページはお役に立ちましたか?

Yesいいえ