JavaScriptからAzure SQL Databaseを利用する

以前Microsoft AzureのMobile Serviceが作成できる頃（旧ポータルの頃、2年前ぐらい）に、
> **フロントのJavaScript**からAzureの**Mobile Service**を利用して、**Azure SQL Databaseを利用（参照・挿入・更新・削除）する**コードが書けた

ので、「今も同じようにしてAzure SQL Databaseを利用できるでしょー」と思ってやってみたら**できませんでした**。タイトルの内容を実装するのに、少し調べる必要があったので、やり方について記載してみます。

ちなみにWebアプリケーションは、３、4個しか作ったことがない素人なので、あまり細かい追及はしないでやってください…。

# 以前行った手順

1. Mobile Serviceを作成
- クイックスタートをクリック
- 言語「JavaScript」を選択
- TodoItemテーブルの作成
- ライブラリ、アプリケーションキーが記載されたコードが表示されるので、自身のソースコードに追加

現在、再現することができないので少しうろ覚えですが、上記のような手順でJavaScriptからAzure SQL Databaseを利用していました。


# Mobile Serviceは既に作成できない

まず、最初の衝撃。
時既に時間切れで、現在のMicrosoft Azureでは、Mobile Serviceを作成できません。
<img width="1037" alt="スクリーンショット 2017-02-22 13.34.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/92506/fa1f97d1-928b-13c0-10cd-6c303ab2d7b2.png">

これまでMobile Serviceで作成したものは、気づいた時にはWebアプリに移行されていました。

今まで旧ポータルにおいてMobile Serviceから作成していたものは、新ポータルでは**Mobile App**から作成するようです。
<img width="691" alt="スクリーンショット 2017-02-22 10.14.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/92506/5a9c2866-063b-9f3b-98ad-9bfac4bce258.png">

役割・中身は「Mobile Service」も「Mobile App」もほぼ同じものみたいです。


# JavaScriptの言語選択がない

新ポータルにて、Mobile Appを作成し、クイックスタートへ。
そこでJavaScriptの言語選択が存在しないことに気づきます。
<img width="882" alt="スクリーンショット 2017-02-22 10.43.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/92506/202cc523-9db7-9df0-ee55-3686d0d29acb.png">

とりあえずこの場では、「Cordova」を選びます。

後で確認してみてわかったのですが、環境の選択は、「クライアントアプリケーションの構成」（挿入に必要な手順（ソースコード））の表示が変わるだけで、「データベース接続」と「テーブルAPIの作成」ができれば、**どれを選択してもいい**ようです。


# アプリケーションキーがない

以前作成したソースコードがあったので、クライアント接続を行う関数の引数である"エンドポイント"と"アプリケーションキー"を変更すれば、ほとんど元のまま使えるのでは？と思い、アプリケーションキーの確認に乗り出します。
しかし、環境をCordovaにして、「データベース接続」、「テーブルAPIの作成」（バックエンド言語：Node.js、TodoItemテーブルの作成）を行いましたが、肝心のアプリケーションキーが、「クライアントアプリケーションの構成」に記載されてきませんでした。

以前だと下図のように、関数の引数としてエンドポイントの後にアプリケーションキーが連なっていたのですが、現在ではなくなっています。
![3312.image_2DD4EA48.png](https://qiita-image-store.s3.amazonaws.com/0/92506/f8f1b323-624c-e5f8-b166-090d60968912.png)


アプリケーションキーが登録される「アプリケーション設定」の項目を確認してみますが、登録がありません。そもそも設定されなくなったようです。

その時点で、「もう以前作成したソースコードのままじゃダメだな…」と見切り、**Azure Mobile Services REST API**を利用してAzure SQL Databaseを利用する方法に切り替えました。

[Azure Mobile Services REST API Reference](https://msdn.microsoft.com/en-us/library/jj710108.aspx)

「Azure Mobile Services REST API」は文字通り、REST APIを送信するためのもので、上記リンクのリファレンス通り実装したら、参照、挿入、更新、削除とうまいこと使えました。

ajax通信でのデータ参照だとGETを使ってこんな感じに

```js:list.js
$.ajax({
    type: "GET",
    url: 'https://xxxxxxxx.azurewebsites.net/tables/todoitem?$filter=(deleted eq 0)&$orderby=createdAt desc',
    headers: {
        'ZUMO-API-VERSION': '2.0.0'
    },
    dataType: 'json',
    success: function(results){
        // 成功時処理
    },
    error: function(err){
        // 失敗時処理
    }
});
```

Azure Mobile Services REST API利用の際の注意点としては、下記リンクにも記載してある内容になります。

[Mobile Apps と Mobile Services のクライアントとサーバーのバージョン管理](https://docs.microsoft.com/ja-jp/azure/app-service-mobile/app-service-mobile-client-and-server-versioning)

リンク内に、

> Mobile Apps のクライアント/サーバー SDK は Mobile Services のクライアント/サーバー SDK にもともと基づいていますが、互いに互換性が ありません 。 つまり、Mobile Apps クライアント SDK と共に Mobile Apps サーバー SDK を使用する必要があり、Mobile Services の場合も同様です。 この契約は、クライアント/サーバー SDK により使用される特殊なヘッダー値 ZUMO-API-VERSIONにより適用されます。

と記載されている通り、リクエストのヘッダーに"ZUMO-API-VERSION"を記載する必要があります。
Mobile Appのアプリケーション設定で「バージョンチェックの除外」を行うことでも問題を回避できるようです。


# まとめ

ぐだぐだ書きましたが、まとめます。

- Mobile Appから作成開始する
- クイックスタートで選ぶ環境はなんでもいい
- Azure Mobile Services REST APIを利用してデータベースを利用する

以前にAzure Mobile Serviceを利用したことがあっただけに色々と悩んでしまいました。
JavaScriptからMicrosoft AzureのAzure SQL Databaseを利用するなら上記事項を押さえておけばよいかと思います。


余談ですが、TodoItemテーブルを作る際に説明に、
> 追加のテーブルを後で作成する場合には、[簡易テーブル] 設定に移動します。

と書いてあって、「簡易テーブルってなんや？どこのこと？」と思っていたのですが、「Easy Tables」のことなんですね。