MicrosoftAzureのMobileService（JavaScript）を試してみました

1. 超初心者でもできた！
AzureMobileService JSバー
ジョン
HTMLとJavascriptで試してみまし
た

2. 今日お話しすること
自己紹介
Azureについて
MobileServiceについて
Azureを準備
サンプル・アプリを作ってみる
アプリの改造
まとめ

3. 私はこんな人です
神守 由理子
Webショップで、商品ページ作ったり
UPする画像加工してます。
* CSSNite実行委員
* Windows女子部広島支部長
* Windows Phoneハンズオン in 広島（女子求む）
facebook→Yuri Kamimori twitter→LirioY（銀
ねこ）
※友達申請するときにはお手数ですがお手数ですが一言添えてくださ
い

4. 私はこんな人です
WindowsPhoneのアプリ作りがきっかけです。
2年前にスマフォアプリ選手権で仲間と一緒に29個
作りました。C#触ったことがないので泣きながら
…。
鍛えられてだいぶC#触れるようになりました。
おかげさまでWindowsのアプリばっかり作ってます。

5. お願い
本業はプログラマではありません。
最近よくかみます。
突っ込みはくれぐれもお手柔らかに…

6. Azureについて
マイクロソフトのクラウドプラットフォーム
（PaaS/IaaS）
メモ… … … … … … … … … … … … …
SaaS(Software as a Service)…ソフトウェアを利
用に応じて提供
PaaS(Platform as a Service) …プラットフォー
ムを、インターネット経由のサービスとして提供
(月額使用事業モデル）
IaaS(Infrastructure as a Service) … CPU・ス
トレージなどコンピューターのインフラを提供

7. Azureについて
マイクロソフトのクラウドプラットフォームのき
になる料金
初期費用は無料の従量課金制
料金計算ツールもある

8. MobileServiceについて
今日のお題はMobileService。
スマフォやスレート（タブレット）から超～簡単
に
サーバへデータを保存したり取得したりできます。
20MBデータベース＆50万回/月のAPI呼び出しはタ
ダ
【オススメ機能】
プッシュ通知…サーバ連携して情報を取得（今日
はやりません）
認証…認証済みユーザーのみ利用可能というよう
なMobile Service へのセキュリティをあたえられ

9. MobileServiceについて
SQL（データベース）はJavaScripかC#で選べます。
アプリもC＃かJavaScriptで選べます。
プラットホームもいろんな種類あります。
Android、IOSのアプリにも対応しています。

10. デモしてみます
まずは、1か月無料のアカウントを作ってレッツト
ライ
http://azure.microsoft.com/ja-jp/

11. サンプル・アプリを作ってみる
まずはWindowsStoreアプリを新規で作ってみよ
う！
C#で作りたい方…
VisualStudio2013 PRO以上がオススメ
（for WindowsとWebできるけどはっきり言って超
面倒）
Javascriptで作りたい方…
VisualStudio2013 for WindowsでOK

12. サンプル・アプリを作ってみる
今日はみんな大好き？
ＨＴＭＬ＆Ｊａｖａｓｃｒｉｐｔでサンプルを
つついて改造してみます。

13. サンプル・アプリを作ってみる
• ポータル管理からモバイルサービスを作りま
す
• バックエンドはJavaScript

14. サンプル・アプリを作ってみる
DB完成

15. サンプル・アプリを作ってみる
①新規でアプリを作成する
②テーブルを作成する
（Todoitem)
③JavaScriptでダウンロードす
る
DLしたファイ
ルを
つついてみま
す

16. サンプル・アプリを作ってみる
わずか、3ステップで完成します^-^v

17. サンプル・アプリを作ってみる
Microsoft Azure 内にある新しいMobile Service
にPOST リクエストを送信。
リクエストから来たデータはTodoItem テーブルに
挿入されます。テーブルに保存されたデータは、
Mobile Service から返され、このデータはアプリ
ケーションの右のカラムに表示されます。

18. サンプル・アプリを作ってみる

19. アプリの改造
せっかくなのでいろいろつついて改造して
みました

20. 表示するアイテムを変えてみる
デバッグしてポータルを確認。
var refreshTodoItems = function () {
// This code refreshes the entries in the list view be
querying the TodoItems table.
// The query excludes completed TodoItems
todoTable.where({ complete: false })
.read()
.done(function (results) {
todoItems = new WinJS.Binding.List(results);
listItems.winControl.itemDataSource =
todoItems.dataSource;
});
};
ここら辺を
いじってみま
す

21. 表示するデータを変えてみる
ｔrueをfalseに変えてみる→trueのアイテムのみ表
示todoTable.where({ complete: true }).read～
.where()自体を削除→すべてのデータ表示
todoTable
.where()の括弧内が表示する条件になっている。
textに変えてみる→赤というtextのみ表示
todoTable.where({ text: “赤” }).read～

22. 列を増やしてみる
列を増やしてみます。
Date関数でポストした時の日時を列で追加。
buttonSave.addEventListener("click", function () {
var date = new Date();
insertTodoItem({
text: textInput.value,
tdate: date,
complete: false
});
});

23. 列を増やしてみる
Htmlファイルにも追記して右のカラムにも表示さ
せる。
<div style="-ms-grid-column: 2; -ms-grid-row-align:
center; margin-left: 5px“ data-win-bind="innerText:
text"></div>
<div style="-ms-grid-column: 4; -ms-grid-row-align:
center; margin-left: 5px"data-win-bind="innerText:
tdate"></div>
Default.htm
l

24. 列を増やしてみる
ポータル側からも列の追加・削除ができます。
データ型と
列名を追加

25. アイテムを削除してみる
アプリからも削除したいときは下記のコードを追
記。
var deleateCheckedTodoItem = function (todoItem) {
todoTable.del(todoItem).done(function (item) {
todoItems.item;
});
refreshTodoItems();
};
listItems.addEventListener("change", function (eventArgs) {
var todoItem = eventArgs.target.dataContext.backingData;
deleateCheckedTodoItem(todoItem);
});
Default.
js

26. アイテムを削除してみる
ポータルからもアイテムをクリックするだけで削
除できる

27. データ操作
データ操作はこんな感じでできます。
update…データの更新 del…データの削除
insert…データの挿入 read…データの読込

28. 処理を挟んでみる
「文字数が5文字以内」でないとデータ挿入できな
いようにしてみます。
ポータル→データ→テーブル→スクリプトの挿入のスク
リプト
資料参考URL
http://azure.microsoft.com/en-us/documentation/articles/mobile-
services-windows-store-dotnet-validate-modify-data-server-scripts/

29. 処理を挟んでみる
function insert(item, user, request) {
if (item.text.length > 5) {
request.respond(statusCodes.BAD_REQUEST,
'5文字までじゃないと入力できんよ');
} else {
request.execute();
}
}
function insert(item, user, request) {
request.execute();
}

30. 処理を挟んでみる
Default.js側にも追記。
var insertTodoItem = function (todoItem) {
todoTable.insert(todoItem).done(function (item) {
todoItems.push(item);
}, function (error) {
var msg = new Windows.UI.Popups.MessageDialog(
error.request.responseText);
msg.showAsync();
});
};
Default.
js

31. 処理を挟んでみる
タイムスタンプを付けてみる
function insert(item, user, request) {
item.stamp = new Date();
request.execute();
}
ポータル→挿入

32. 認証機能もつけられる
認証済みユーザーのみ利用可能というような
Mobile Service へのセキュリティをあたえられる
資料参考URL
http://azure.microsoft.com/en-us/documentation/articles/mobile-
services-windows-store-javascript-get-started-users/?fb=ja-jp

33. 認証機能もつけられる
①使いたいＳＮＳにアプリを登録しＩＤを取得す
る
Microsoft Account
Facebook login
Twitter login
Google login
Azure Active
Directory

34. 認証機能もつけられる
②ポータルのＩＤより各ＩＤを登録

35. 認証機能もつけられる
var userId = null;
var login = function () {
return new WinJS.Promise(function (complete) {
client.login("facebook").done(function (results) {
userId = results.userId;
refreshTodoItems();
var message = "こんにちは、" + userId + "さん";
var dialog = new Windows.UI.Popups.MessageDialog(message);
dialog.showAsync().done(complete);
}, function (error) {
userId = null;
var dialog = new Windows.UI.Popups.MessageDialog("ログインできません", "ログインしてください");
dialog.showAsync().done(complete);
});
});
}
var authenticate = function () {
login().then(function () {
if (userId === null) {
authenticate();
}
});
}
Default.jsのrefreshTodoItems();を書き換え
る

36. 認証機能もつけられる
client.login(“facebook”).done(function
(results)～
facebook
microsoftaccount
twitter
google
windowsazureactived
irectory
ピンクのとこを書き換えるだ
けで
お好きなＳＮＳにかえられま
す

37. まとめ
ざっと、初心者でもできる
AzureMobileService（Javascript）について
ご紹介させていただきました。
ご清聴ありがとうございました。