kharuka2016のブログ

日々の出来事を書き留めておくブログ

Visual Studioでアプリケーション(on Microsoft Azure)開発 Part2

目次

Visual Studioでアプリケーション(on Microsoft Azure)開発 もくじ

1. Visual Studioでアプリケーション(on Microsoft Azure)開発 Part1

kharuka2016.hatenablog.com

2. Visual Studioでアプリケーション(on Microsoft Azure)開発 Part2

3. Visual Studioでアプリケーション(on Microsoft Azure)開発 Part3

前提条件

Visual Studioでアプリケーション(on Microsoft Azure)開発 Part2

1. BLOB上にファイルをアップロードするWebアプリケーション作成

1.1. Part1で作成したソリューションファイルを開きます。
1.2. ソリューションエクスプローラーのプロジェクトを右クリックし、NuGetパッケージの管理をクリックします。
1.3. 参照タブを選択し、Azure Storageで検索をします。
1.4. WindowsAzure.Storageを選択し、インストールをクリックします。
1.5. 変更の確認ダイアログでOKをクリックします。
1.6. ライセンスへの同意ダイアログで同意するをクリックします。
1.7. Azureストレージへの接続方法1
1.7.1. ソリューションエクスプローラーのTest01プロジェクト配下Connected Serviceで右クリックします。
1.7.2. 接続済みサービスの追加をクリックします。
1.7.3. Azure Storageを使用したクラウドストレージをクリックします。
1.7.4. 新しいストレージアカウントの作成をクリックします。
1.7.5. ストレージアカウントダイアログで各入力事項を入力し、作成をクリックします。
1.7.6. 先ほど作成したストレージアカウントを選択し、追加をクリックします。
1.7.7. 警告が出ましたが、警告なので取り敢えず無視して勧めます。

バージョンの互換性問題は面倒くさいですね。

1.8. Azureストレージへの接続方法2
1.8.1. ソリューションエクスプローラーのWeb.configファイルを開きます。
1.8.2. Web.configファイルのconfiguration内にappSettings要素を追加し、ストレージへ接続するためのkeyとvalueを書きます。
<configuration>
 <appSettings>
  <add key="Storage" value="">
 </appSettings>
</configuration>
1.8.3. ストレージの接続文字列を取得するため、表示メニューのCloud ExplorerよりStorage Accountを選択します。
1.8.4. 使用するストレージアカウントを選択します。
1.8.5. プロパティのプライマリ接続文字列をを選択します。
1.8.6. プライマリ接続文字列をコピーしてWeb.configのvalueの二重引用符内にペーストします。
1.9. ファイルのアップロードボタンとイメージ表示のためのコントロールを用意します。

ソリューションエクスプローラーよりDefault.aspxを開きます。

ソース表示画面でasp:Content内の要素を削除します。

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
...
</asp:Content>

ツールボックスからFileUpload、ButtonとImageのコントロールasp:Content内にドラック&ドロップします。

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <asp:FileUpload ID="FileUpload1" runat="server" />
    <asp:Button ID="Button1" runat="server" Text="Button" />
    <asp:Image ID="Image1" runat="server" />

</asp:Content>

デザイン画面に切り替えます。

1.10. ソリューションエクスプローラーのプロジェクト内、Default.aspx配下のDefault.aspx.csを開きます。

以下usingを3つ追加します。

using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;
using System.Configuration;

クラス内に以下のメソッドを追加します。

        private CloudBlobContainer GetBlobContainer()
        {
            string conn = ConfigurationManager.AppSettings["Storage"];
            CloudStorageAccount account = CloudStorageAccount.Parse(conn);

            CloudBlobClient blobClient = account.CreateCloudBlobClient();
            CloudBlobContainer container = blobClient.GetContainerReference;("images");
            container.CreateIfNotExists();

            BlobContainerPermissions permission = container.GetPermissions();
            permission.PublicAccess = BlobContainerPublicAccessType.Container;
            container.SetPermissions(permission);

            return container;
        }
1.11. Default.apsxのデザイン画面からボタンをダブルクリックし、ボタンクリック時のイベントハンドラを記述します。

Button1_Clickメソッドに以下を記述します。

            if (FileUpload1.HasFile == false) { return; }

            CloudBlockBlob blob = GetBlobContainer().GetBlockBlobReference("imageobj");
            blob.Properties.ContentType = "image/png";
            blob.UploadFromStream(FileUpload1.FileContent);

            blob.Metadata.Add("OriginalName", FileUpload1.FileName);
            blob.SetMetadata();

            Image1.ImageUrl = blob.Uri.AbsoluteUri;
1.12. ビルドを実行し結果を確認します。

任意の画像ファイルをアップロードし表示されることを確認します。

DB接続がうまくいっていないようですね、、、

LocalBD の存在確認:OK

有効な LocalDB のインスタンス名を確認:OK

SQL Server Data Tools for Visual Studio の存在確認:NG

参考:

blog.clock-up.jp

1.13. SQL Server Data Tools for Visual Studioをインストールします。

Download SQL Server Data Tools (SSDT) | Microsoft Docs

できるVisual Studio 2015 Windows /Android/iOS アプリ対応 できるシリーズ

できるVisual Studio 2015 Windows /Android/iOS アプリ対応 できるシリーズ

1.14. localdbのinitやdeleteしてcreateも試してみましたがうまく行かず。Visual Studio再インストールしみますか。とほほ。

参考

できるVisual Studio 2015 Windows /Android/iOS アプリ対応 できるシリーズ

できるVisual Studio 2015 Windows /Android/iOS アプリ対応 できるシリーズ