Your SlideShare is downloading. ×
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

超初心者でもできた!AzureMobileService JSバージョン

222

Published on

MicrosoftAzureのMobileService(JavaScript)を試してみました

MicrosoftAzureのMobileService(JavaScript)を試してみました

Published in: Internet
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
222
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. サンプル・アプリを作ってみる 今日はみんな大好き? HTML&Javascriptでサンプルを つついて改造してみます。
  • 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. 表示するデータを変えてみる trueを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. 認証機能もつけられる ①使いたいSNSにアプリを登録しIDを取得す る Microsoft Account Facebook login Twitter login Google login Azure Active Directory
  • 34. 認証機能もつけられる ②ポータルのIDより各IDを登録
  • 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 ピンクのとこを書き換えるだ けで お好きなSNSにかえられま す
  • 37. まとめ ざっと、初心者でもできる AzureMobileService(Javascript)について ご紹介させていただきました。 ご清聴ありがとうございました。

×