読者です 読者をやめる 読者になる 読者になる

Yuta Watanabe's Blog

開発周りと、その他諸々

データの生成/読出し/更新/削除を行う ( Part 1 ) - Microsoft Azure Mobile Services ( JavaScript バックエンド )

こんにちは。

マイクロソフトの渡辺です。

Microsoft Azure Mobile Services の話が続きます。

※これまでの記事

そろそろコードを書いて、実際に モバイル サービスを使ってみます。今日は、フロント/バックエンドともに JavaScript で書いていきます。

モバイル サービスにクライアント側からアクセスする準備

サービス/アプリから、モバイル サービスにアクセスする方法は、ブラウザ上の管理画面のクイックスタートから確認できます。

f:id:yuwata:20140822091308p:plain

上図の画面の指示通り、コードをコピーして貼り付ければ OK です。念のため確認しておくと、

Import the azure mobile services library.

で、モバイル サービスを使うための JavaScript ライブラリを読み込んでおきます。その上で、

Initialization of azure mobile service client.

JavaScript コードの中で、MobileServiceClient のインスタンスを生成します。このインスタンス ( ここでは、client ) を使って、このあとモバイル サービスにアクセスしていきます。

データ操作の基本:CRUD ( Create, Read, Update, Delete ) の方法

まずは、CRUD、データの生成、読出し、更新、削除の方法を見ていきます。

準備として、管理画面から、Item テーブルを作成しておきます。管理画面のデータ タブを開き、新しくテーブルを作成してください。

f:id:yuwata:20140822092446p:plain

また、構成タブに行き、動的スキーマはオンにしておきましょう。

f:id:yuwata:20140821120544p:plain

これで準備は、完了です。

先ほど、MobileServiceClient を初期化したのに続けて、

  • Item テーブルの取得
  • Item テーブルへの新しい項目の追加
  • Item テーブルからのデータ読出し
  • Item テーブルにある項目の更新
  • Item テーブルにある項目の削除

を行います。

まずは、テーブルの取得から新しい項目を追加し、それをテーブルから読み込んでみます。

Create and read items with Azure Mobile Service.

管理画面のデータ タブから Item テーブルを見てみると、新しくデータが追加されていることがわかります。

f:id:yuwata:20140822093905p:plain

また、ブラウザのコンソールを見ると、テーブルから先ほど追加された項目が読みだされているのもわかります。

f:id:yuwata:20140822093915p:plain

次は項目の更新と削除です。まずは、新しく追加した項目の text を "Updated Item" に変更してみます。

Update the created item in Azure Mobile Service

テーブルを見ると、新しく "Smaple Text" として追加した項目が、"Updated Text"になっていることがわかります。

f:id:yuwata:20140822100400p:plain

そして、項目の削除です。項目の削除も更新の際と同様に、項目の id を指定して行います。ここでは例として、Item テーブルの項目を読出し、一番先頭のものを削除してみます。

Delete the item in Azure Mobile Service

実行の度に、Item テーブルから項目が減っていくのを確認してみてください。

以上が、JavaScript バックエンドのモバイルサービスにおけるデータ操作の基本です。次回は、もう少し細かい機能についてみていきたいと思います。