演習 - Azure ストレージアカウントに画像をアップロードする - Training

5 分

Azure ストレージアカウントに画像をアップロードするコードを追加してみましょう。この例では、次の画像を Azure Storage コンテナーにアップロードします。

An image of the Docs mascot and the Azure mascot taking a selfie.

自分のローカルコンピューターで作業している場合は、この画像を右クリックし、自分のアプリケーションと同じフォルダーにそれを保存します。

Microsoft Learn サンドボックスの環境で作業している場合は、アプリケーションフォルダーで次のコマンドを実行して、画像をサンドボックスにダウンロードします。
```
wget https://github.com/MicrosoftDocs/mslearn-connect-app-to-azure-storage/blob/main/images/docs-and-friends-selfie-stick.png?raw=true -O docs-and-friends-selfie-stick.png
```
いずれの場合も、画像の名前は docs-and-friends-selfie-stick.png です。

画像を Blob Storage にアップロードする

Azure ストレージアカウント内の個々の BLOB オブジェクトを操作するには、BlobClient オブジェクトを使用します。 BlobClient オブジェクトを取得するには、BLOB が格納されるコンテナーの BlobContainerClient オブジェクトで GetBlobClient メソッドを呼び出します。 GetBlobClient メソッドを呼び出すときに、コンテナー内の BLOB の名前も指定します。この例では、BLOB の名前はファイルの名前と同じになります。

BlobClient オブジェクトを取得したら、Upload メソッドを呼び出して、Azure Blob Storage にファイルをアップロードできます。 Program.cs ファイルに次のコードを追加します。
```
string blobName = "docs-and-friends-selfie-stick";
string fileName = "docs-and-friends-selfie-stick.png";
BlobClient blobClient = container.GetBlobClient(blobName);
blobClient.Upload(fileName, true);
```
Upload メソッドの 2 番目の引数で、同じ名前を持つ既存の BLOB オブジェクトを上書きできるかどうかを指定します。この値の既定値は false です。この例では true を指定して、プログラムを複数回実行できるようにします。

Azure Blob Storage コンテナー内のオブジェクトの一覧を表示する

プログラムが動作したことを確認するため、Azure Storage Blobs SDK の別の機能を実行し、Blob Storage のコンテナーに格納されているオブジェクトの一覧を表示します。これを行うには、BlobContainerClient オブジェクトの GetBlobs メソッドを呼び出します。 GetBlobs メソッドからは、コンテナー内の各 BLOB に関するデータが含まれる BlobItem オブジェクトのページング可能なリストが返されます。

前に追加したコードの後に次のコードをプログラムに追加し、ファイルを保存します。
```
var blobs = container.GetBlobs();
foreach (var blob in blobs)
{
    Console.WriteLine($"{blob.Name} --> Created On: {blob.Properties.CreatedOn:yyyy-MM-dd HH:mm:ss}  Size: {blob.Properties.ContentLength}");
}
```
このコードにより、photos コンテナーの BlobContainerClient オブジェクトで GetBlobs が呼び出されます。その後、各 BLOB が反復処理されて、BLOB の名前、BLOB が作成された日時、BLOB のサイズが出力されます。自分のプログラムを実行すると、このコードが、アップロードされた 1 つの画像に対して 1 行で出力されます。

作業内容を確認したい場合、最終的な Program.cs ファイルは次のようになります。

using System;
using Microsoft.Extensions.Configuration;
using System.IO;
using Azure.Storage.Blobs;

namespace PhotoSharingApp
{
    class Program
    {
        static void Main(string[] args)
        {
            var builder = new ConfigurationBuilder()
                .SetBasePath(Directory.GetCurrentDirectory())
                .AddJsonFile("appsettings.json");

            var configuration = builder.Build();

            // Get a connection string to our Azure Storage account.
            var connectionString = configuration.GetConnectionString("StorageAccount");

            // Get a reference to the container client object so you can create the "photos" container
            string containerName = "photos";
            BlobContainerClient container = new BlobContainerClient(connectionString, containerName);
            container.CreateIfNotExists();

            // Uploads the image to Blob storage.  If a blb already exists with this name it will be overwritten
            string blobName = "docs-and-friends-selfie-stick";
            string fileName = "docs-and-friends-selfie-stick.png";
            BlobClient blobClient = container.GetBlobClient(blobName);
            blobClient.Upload(fileName, true);

            // List out all the blobs in the container
            var blobs = container.GetBlobs();
            foreach (var blob in blobs)
            {
                Console.WriteLine($"{blob.Name} --> Created On: {blob.Properties.CreatedOn:yyyy-MM-dd HH:mm:ss}  Size: {blob.Properties.ContentLength}");
            }
        }
    }
}

アプリを実行する

アプリケーションをビルドして実行し、すべてが機能していることを確認して、Azure Blob Storage に自分の画像をアップロードします。

Note

PhotoSharingApp ディレクトリで操作していることをご確認ください。
```
dotnet run
```

結論

Azure Storage Blobs SDK パッケージと Azure Blob Storage を使用するための基本事項を学習しました。必要に応じて、別のコンテナーを作成したり、自分のストレージアカウントに別の画像をアップロードしたり、画像を削除したりして、さらに詳しく調べてください。詳細については、.NET 用の Azure Storage Blobs クライアントライブラリに関する GitHub のページを参照してください。

画像を Blob Storage にアップロードする

自分の Azure Storage コンテナー内の BLOB オブジェクトを操作するには、BlockBlobClient オブジェクトを使用します。 BlockBlobClient オブジェクトには、コンテナー内の BLOB オブジェクトをアップロード、ダウンロード、一覧表示、削除するメソッドがあります。 BlockBlobObject を取得するには、ContainerClient オブジェクトで getBlockBlobClient メソッドを呼び出します。次に、uploadFile メソッドを使用して、画像を Azure Storage にアップロードできます。

このコードを、index.js プログラムファイルのコンテナーを作成するコードのすぐ後に追加します。

const filename = 'docs-and-friends-selfie-stick.png';
const blockBlobClient = containerClient.getBlockBlobClient(filename);
blockBlobClient.uploadFile(filename);

Azure Blob Storage コンテナー内のオブジェクトの一覧を表示する

コードが動作していることを確認するには、プログラムの ContainerClient オブジェクトで listBlobsFlat メソッドを呼び出すことができます。次のコードを index.js ファイルに追加し、ファイルを保存します。
```
let blobs = containerClient.listBlobsFlat();
let blob = await blobs.next();
while (!blob.done) {
    console.log(`${blob.value.name} --> Created: ${blob.value.properties.createdOn}   Size: ${blob.value.properties.contentLength}`);
    blob = await blobs.next();
}
```
このコードにより、Azure Blob Storage コンテナー内のすべての BLOB が、BLOB の作成日およびサイズと共に出力されます。このプログラムでは、アップロードした 1 つの画像を表す 1 行が出力されます。

最終的なファイルは次のようになります。

#!/usr/bin/env node
require('dotenv').config();

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

const storageAccountConnectionString = process.env.AZURE_STORAGE_CONNECTION_STRING;
const blobServiceClient = BlobServiceClient.fromConnectionString(storageAccountConnectionString);

async function main() {
// Create a container (folder) if it does not exist
const containerName = 'photos';
const containerClient = blobServiceClient.getContainerClient(containerName);
const containerExists = await containerClient.exists()
if ( !containerExists) {
    const createContainerResponse = await containerClient.createIfNotExists();
    console.log(`Create container ${containerName} successfully`, createContainerResponse.succeeded);
}
else {
    console.log(`Container ${containerName} already exists`);
}

// Upload the file
const filename = 'docs-and-friends-selfie-stick.png';
const blockBlobClient = containerClient.getBlockBlobClient(filename);
blockBlobClient.uploadFile(filename);

// Get a list of all the blobs in the container
let blobs = containerClient.listBlobsFlat();
let blob = await blobs.next();
while (!blob.done) {
    console.log(`${blob.value.name} --> Created: ${blob.value.properties.createdOn}   Size: ${blob.value.properties.contentLength}`);
    blob = await blobs.next();
}
}
main();

アプリを実行する

アプリケーションをビルドして実行します。

Note

PhotoSharingApp ディレクトリで操作していることをご確認ください。
```
node index.js
```
ヒント

await キーワードの使用に関するエラーが表示される場合は、上記の手順の最後のステップに従って main 関数定義に async キーワードを追加していることを確認します。

結論

JavaScript 用の Azure Storage Blob クライアントライブラリと Azure Blob Storage を使用するための基本事項を学習しました。必要に応じて、別のコンテナーを作成したり、自分のストレージアカウントに別の画像をアップロードしたり、画像を削除したりして、さらに詳しく調べてください。 JavaScript 用の Azure Storage Blob クライアントライブラリの npm.js ページには、ライブラリの使用例が多数あります。

続行

演習 - Azure ストレージ アカウントに画像をアップロードする

画像を Blob Storage にアップロードする

Azure Blob Storage コンテナー内のオブジェクトの一覧を表示する

アプリを実行する

結論

画像を Blob Storage にアップロードする

Azure Blob Storage コンテナー内のオブジェクトの一覧を表示する

アプリを実行する

結論

フィードバック

演習 - Azure ストレージアカウントに画像をアップロードする