前提

Azuleの契約が完了していること（無料でOK）
開発環境のVisual Studioがインストールされていること

概要

Visual StudioにWeb API、Azuleを開発する為に機能を追加
WEB APIのプロジェクトを作成
Azuleにプロジェクトを公開
ブラウザからWEB APIに接続

実作業

開発する為の準備

1. Visual Studioを起動します。
「新しいプロジェクト」リンクを押下します。

 

 

 

 

 

2. 「visualStudioインストーラ開く」リンクを押下します。

 

 

 

 

 

3. 赤枠にチェックがない場合は、チェックし、「変更」（環境によりボタン名が違うかもしれません）ボタンを押下します。

 

 

 

 

 

4. インストールが完了するまで待ちます。

 

 

 

 

 

5. インストールが完了したら、「新しいプロジェクト」リンクを押下します。

赤枠を選択し、「OK」ボタンを押下します。

 

 

 

 

 

 

6. 赤枠を選択し、チェックし「OK」ボタンを押下します。

 

 

 

 

 

7. App Serviceの作成画面が表示されるので、サブスクリプション、リソースグループ、App　Serviceプランを選択し、「OK」ボタンを押下します。
リソースグループは適当に入力しています。

 

 

 

 

 

 

8. プロジェクトが作成されます。
Azuleに現在のプロジェクト内容でデプロイ（発行）します。
※プロジェクトを右クリックし、プロパティから発行を選択します。

 

 

 

 

 

成功すると以下の画面が表示されます。

 

 

 

 

 

 

Azuleに接続すると、VisualStudioから発行したWEB APIが自動生成されています。

 

 

 

 

 

 

9. 次にコントローラを作成し、APIのトリガーとビジネスロジックを作成します。
コントローラを右クリックして、「追加」を押下します。

 

 

 

 

 

10. 赤枠を選択し、「OK」ボタンを押下します。

 

 

 

 

 

 

コントローラ名を適当な名前で入力します。

※Defalutの部分を自由に書き換えてOKです。

 

 

 

自動生成したコントローラにHello worldを返すようコードを追加します。

    public class DefaultController : ApiController
    {
        // /api/HelloWorld
        public string Get([FromUri]MyParemeter parameter)
        {
            String ret = "val1:" + parameter.val1 + "aaa"+ "," + "val2:" + parameter.val2 + "bbb";

            return ret;
        }
    }

11. ローカル環境で動作確認

赤枠を押下し、ローカル環境でデプロイします。
この時、ブラウザはCrome等選択できます。

 

 

 

 

 

URLにアクセスします。
Defaultはコントローラ作成時に任意入力で、Contollerを除いた文字列です。

http://localhost:55602/api/Default

 

 

 

 

 

 

上記ではローカルに接続していますが、発行すればAzuleにアクセスした実行確認ができます。

12. ブラウザからアクセスし、Getするサンプルを作成します。
以下のサンプルはブラウザからパラメータを2つうけとり、コントローラで文字列を付加し、クライアントに返しています。

■サーバ側の修正
DefaultController.csを修正します。

namespace WebApplication2.Controllers
{
    public class MyParemeter
    {
        public string val1 { get; set; }
        public string val2 { get; set; }
    }

    public class DefaultController : ApiController
    {
        // /api/HelloWorld
        public string Get([FromUri]MyParemeter parameter)
        {
            String ret = "val1:" + parameter.val1 + "aaa"+ "," + "val2:" + parameter.val2 + "bbb";

            return ret;
        }
    }
}

WebApiConfig.csをjsonを返すよう修正します。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using System.Net.Http.Headers; //JSONを返すよう修正

namespace WebApplication2
{

    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API の設定およびサービス

            // Web API ルート
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

            // JSONを返すよう修正
            config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
        }
    }
}

発行します。

 

 

 

 

セキュリティーの変更
どのブラウザからもアクセスできるようサーバの設定変更をします。

 

 

 

 

 

■クライアント側の設定
以下のコードを適当な名前「test.html」でファイルに保存して、ブラウザで開いてください。
「$.getJSON」にURLを指定する必要があり、各自の環境に合わせて変更して下さい。

<meta charset="UTF-8" />
AZURE API APP 連携サンプル</pre>
<form>
<div><label for="keyword">キーワード：</label>

 <input id="val1" type="text" size="10" />
 <input id="val2" type="text" size="10" />
 <input id="search" type="button" value="取得" /></div>
<div><label for="address">結果：</label>

 <input id="result" type="text" size="35" /></div>
</form>
<pre><script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script><script type="text/javascript">// <![CDATA[
// ［検索］ボタンクリックでサーバから値を取得   $('#search').click(function() {     $.getJSON('http://webapplication220180511112811.azurewebsites.net/api/Default',       {         val1: $('#val1').val(),         val2: $('#val2).val()       }     )     .done(function() {     	console.log( "second success" ); 	}) 	.fail(function() { 		console.log( "error" ); 	})     // 結果を取得したら…     .always(function(data) {       // 中身が空でなければ、その値を結果欄に反映       if (data) {         var result = data;         $('#result').val(result);       // 中身が空の場合は、エラーメッセージを反映       } else {         $('#result').val('値の取得に失敗しました。');       }     });   });
// ]]></script>