超初心者でもできた!azuremobileservice jsバージョン
DESCRIPTION
MicrosoftAzureのMobileService(JavaScript)を試してみましたTRANSCRIPT
![Page 1: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/1.jpg)
超初心者でもできた!AzureMobileService JS バージョン
HTML と Javascript で試してみました
![Page 2: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/2.jpg)
今日お話しすること
自己紹介 Azure について MobileService について Azure を準備 サンプル・アプリを作ってみる アプリの改造 まとめ
![Page 3: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/3.jpg)
私はこんな人です
神守 由理子Web ショップで、商品ページ作ったりUP する画像加工してます。
* CSSNite 実行委員* Windows 女子部広島支部長* Windows Phone ハンズオン in 広島(女子求む)facebook→Yuri Kamimori twitter→LirioY (銀ねこ)※ 友達申請するときにはお手数ですがお手数ですが一言添えてください
![Page 4: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/4.jpg)
私はこんな人です
WindowsPhone のアプリ作りがきっかけです。2 年前にスマフォアプリ選手権で仲間と一緒に 29個作りました。 C# 触ったことがないので泣きながら…。鍛えられてだいぶ C# 触れるようになりました。
おかげさまで Windows のアプリばっかり作ってます。
![Page 5: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/5.jpg)
お願い
本業はプログラマではありません。最近よくかみます。
突っ込みはくれぐれもお手柔らかに…
![Page 6: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/6.jpg)
Azure について
マイクロソフトのクラウドプラットフォーム( PaaS/IaaS )
メモ… … … … … … … … … … … … …SaaS(Software as a Service)… ソフトウェアを利用に応じて提供PaaS(Platform as a Service) … プラットフォームを、インターネット経由のサービスとして提供 ( 月額使用事業モデル)IaaS(Infrastructure as a Service) … CPU ・ストレージなどコンピューターのインフラを提供
![Page 7: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/7.jpg)
Azure について
マイクロソフトのクラウドプラットフォームのきになる料金
初期費用は無料の従量課金制料金計算ツールもある
![Page 8: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/8.jpg)
MobileService について
今日のお題は MobileService 。スマフォやスレート(タブレット)から超~簡単にサーバへデータを保存したり取得したりできます。
20MB データベース& 50 万回 / 月の API 呼び出しはタダ【オススメ機能】プッシュ通知…サーバ連携して情報を取得(今日はやりません)認証…認証済みユーザーのみ利用可能というようなMobile Service へのセキュリティをあたえられる
![Page 9: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/9.jpg)
MobileService について
SQL (データベース)は JavaScrip か C# で選べます。
アプリも C #か JavaScript で選べます。プラットホームもいろんな種類あります。Android 、 IOS のアプリにも対応しています。
![Page 10: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/10.jpg)
デモしてみます
まずは、 1 か月無料のアカウントを作ってレッツトライ
http://azure.microsoft.com/ja-jp/
![Page 11: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/11.jpg)
サンプル・アプリを作ってみる
まずは WindowsStore アプリを新規で作ってみよう!
C# で作りたい方…VisualStudio2013 PRO 以上がオススメ( for Windows と Web できるけどはっきり言って超面倒)
Javascript で作りたい方…VisualStudio2013 for Windows で OK
![Page 12: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/12.jpg)
サンプル・アプリを作ってみる
今日はみんな大好き?HTML&Javascriptでサンプルをつついて改造してみます。
![Page 13: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/13.jpg)
サンプル・アプリを作ってみる
• ポータル管理からモバイルサービスを作ります• バックエンドは JavaScript• リージョンは近いところ
![Page 14: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/14.jpg)
サンプル・アプリを作ってみる
DB完成
![Page 15: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/15.jpg)
サンプル・アプリを作ってみる①新規でアプリを作成する
②テーブルを作成する( Todoitem)
③JavaScript でダウンロードする
DLしたファイルをつついてみます
![Page 16: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/16.jpg)
サンプル・アプリを作ってみる
わずか、 3 ステップで完成します ^-^v
![Page 17: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/17.jpg)
サンプル・アプリを作ってみる
Microsoft Azure 内にある新しい Mobile Service に POST リクエストを送信。リクエストから来たデータは TodoItem テーブルに挿入されます。テーブルに保存されたデータは、 Mobile Service から返され、このデータはアプリケーションの右のカラムに表示されます。
![Page 18: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/18.jpg)
サンプル・アプリを作ってみる
![Page 19: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/19.jpg)
アプリの改造
せっかくなのでいろいろつついて改造してみました
![Page 20: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/20.jpg)
表示するアイテムを変えてみる
デバッグしてポータルを確認。
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; });};
ここら辺をいじってみます
![Page 21: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/21.jpg)
表示するデータを変えてみる
t rue を false に変えてみる→ true のアイテムのみ表示todoTable.where({ complete: true }).read ~
.where() 自体を削除→すべてのデータ表示todoTable
.where() の括弧内が表示する条件になっている。
text に変えてみる→赤という text のみ表示todoTable.where({ text: “赤” }).read ~
![Page 22: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/22.jpg)
列を増やしてみる
列を増やしてみます。Date関数でポストした時の日時を列で追加。
buttonSave.addEventListener("click", function () { var date = new Date(); insertTodoItem({ text: textInput.value, tdate: date, complete: false }); });
![Page 23: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/23.jpg)
列を増やしてみる
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.html
![Page 24: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/24.jpg)
列を増やしてみる
ポータル側からも列の追加・削除ができます。
データ型と列名を追加
![Page 25: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/25.jpg)
アイテムを削除してみるアプリからも削除したいときは下記のコードを追記。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
![Page 26: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/26.jpg)
アイテムを削除してみるポータルからもアイテムをクリックするだけで削除できる
![Page 27: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/27.jpg)
データ操作
データ操作はこんな感じでできます。
update… データの更新 del… データの削除
insert… データの挿入 read… データの読込
![Page 28: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/28.jpg)
処理を挟んでみる
「文字数が 5文字以内」でないとデータ挿入できないようにしてみます。ポータル→データ→テーブル→スクリプトの挿入のスクリプト
資料参考URL
http://azure.microsoft.com/en-us/documentation/articles/mobile-services-windows-store-dotnet-validate-modify-data-server-scripts/
![Page 29: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/29.jpg)
処理を挟んでみる
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();}
![Page 30: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/30.jpg)
処理を挟んでみる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
![Page 31: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/31.jpg)
処理を挟んでみるタイムスタンプを付けてみる
function insert(item, user, request) { item.stamp = new Date(); request.execute();}
ポータル→挿入
![Page 32: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/32.jpg)
認証機能もつけられる認証済みユーザーのみ利用可能というような Mobile Service へのセキュリティをあたえられる
資料参考URLhttp://azure.microsoft.com/en-us/documentation/articles/mobile-services-windows-store-javascript-get-started-users/?fb=ja-jp
![Page 33: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/33.jpg)
認証機能もつけられる①使いたいSNSにアプリを登録しIDを取得する
Microsoft AccountFacebook loginTwitter loginGoogle loginAzure Active Directory
![Page 34: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/34.jpg)
認証機能もつけられる②ポータルのIDより各IDを登録
![Page 35: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/35.jpg)
認証機能もつけられる
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(); を書き換える
![Page 36: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/36.jpg)
認証機能もつけられる
client.login(“facebook”).done(function (results) ~
facebookmicrosoftaccount
twittergoogle
windowsazureactivedirectory
ピンクのとこを書き換えるだけでお好きなSNSにかえられます
![Page 37: 超初心者でもできた!AzureMobileService JSバージョン](https://reader034.vdocuments.site/reader034/viewer/2022042518/55843fb0d8b42a77068b51cd/html5/thumbnails/37.jpg)
まとめざっと、初心者でもできる
AzureMobileService ( Javascript )についてご紹介させていただきました。
ご清聴ありがとうございました。