73
Azure Mobile Services Azure Mobile Apps - JAZUG福島 - 2015/4/4 Masaki YAMAMOTO @nnasaki

Azure Mobile ServicesとAzure Mobile Apps

  • Upload
    -

  • View
    575

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Azure Mobile ServicesとAzure Mobile Apps

Azure Mobile Servicesと

Azure Mobile Apps- JAZUG福島 -

2015/4/4

Masaki YAMAMOTO

@nnasaki

Page 2: Azure Mobile ServicesとAzure Mobile Apps

自己紹介

2

Masaki YAMAMOTOTwitter:@nnasaki

Microsoft MVPfor Microsoft Azure

Page 3: Azure Mobile ServicesとAzure Mobile Apps

最近あったこと

3

Page 4: Azure Mobile ServicesとAzure Mobile Apps

4

無職と紹介される

https://jazug.doorkeeper.jp/events/20654

Page 5: Azure Mobile ServicesとAzure Mobile Apps

5

不発のエイプリルフール

http://satoyasendai.com/

Page 6: Azure Mobile ServicesとAzure Mobile Apps

今日の予定

6

モバイルサービスを使ってみるモバイルサービスとはチャットアプリ開発プッシュ送信

ユーザーの動向を知りたいMobile Engagement

モバイルサービスの今後Mobile App となにが違うの?

Page 7: Azure Mobile ServicesとAzure Mobile Apps

必要なもの

• Azure サブスクリプション

• Android Studio

– NOT Eclipse

• Genymotion

–付属のエミュレーターは遅いのでオススメできません!

–実機で行うのが一番良い

– Push通知が受け取れなかったりするので注意

Page 8: Azure Mobile ServicesとAzure Mobile Apps

モバイルサービスとは

8

プッシュ通知数分以内に数百万台タグ付け(合計1億件以上)

マルチプラットフォームSDK iOS、Android、Windows、HTML5

認証連携Facebook、Twitter、Google、Active Directory

バックエンドC#、 NodeJS

http://azure.microsoft.com/ja-jp/services/mobile-services/

Page 9: Azure Mobile ServicesとAzure Mobile Apps

DEMO

ポータルからアプリを即実行

9

Page 10: Azure Mobile ServicesとAzure Mobile Apps

モバイルサービスの仕組み

10

Page 11: Azure Mobile ServicesとAzure Mobile Apps

http://channel9.msdn.com/Events/de-code/2014/SV-007

Page 12: Azure Mobile ServicesとAzure Mobile Apps

http://channel9.msdn.com/Events/de-code/2014/SV-007

今日使うところ

Page 13: Azure Mobile ServicesとAzure Mobile Apps

今日の予定

13

モバイルサービスを使ってみるモバイルサービスとはチャットアプリ開発プッシュ送信

ユーザーの動向を知りたいMobile Engagement

モバイルサービスの今後Mobile App となにが違うの?

Page 14: Azure Mobile ServicesとAzure Mobile Apps

チャットアプリの開発

14

Page 15: Azure Mobile ServicesとAzure Mobile Apps

Why?何故開発する?

Page 16: Azure Mobile ServicesとAzure Mobile Apps

登場人物達

Page 17: Azure Mobile ServicesとAzure Mobile Apps

登場人物達

デベロッパー(私)

デベロッパー

ユーザー

ユーザー

Page 18: Azure Mobile ServicesとAzure Mobile Apps

グループで会話するとき

Page 19: Azure Mobile ServicesとAzure Mobile Apps

デベロッパー(私)

デベロッパー

ユーザー

ユーザー

Page 20: Azure Mobile ServicesとAzure Mobile Apps

_人人人人人人人人人人人人_> 今時まさかのメール! <

 ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄

Page 21: Azure Mobile ServicesとAzure Mobile Apps

デベロッパー(私)

デベロッパー

ユーザー

ユーザー

@docomo.ne.jp

@gmail.com

×

Page 22: Azure Mobile ServicesとAzure Mobile Apps

_人人人人人人人人人人人人_> 迷惑メールブロック! <

 ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄

Page 23: Azure Mobile ServicesとAzure Mobile Apps

デベロッパー(私)

デベロッパー

ユーザー

ユーザー

@docomo.ne.jp

@gmail.com

×

今時ありえん。設定変えて

Page 24: Azure Mobile ServicesとAzure Mobile Apps

デベロッパー(私)

デベロッパー

ユーザー

ユーザー

@docomo.ne.jp

@gmail.com

×

え?なにそれわからんわ

Page 25: Azure Mobile ServicesとAzure Mobile Apps

デベロッパー(私)

デベロッパー

ユーザー

ユーザー

@docomo.ne.jp

@gmail.com

×

Facebook とか Line にしよう

Page 26: Azure Mobile ServicesとAzure Mobile Apps

デベロッパー(私)

デベロッパー

ユーザー

ユーザー

@docomo.ne.jp

@gmail.com

×

すまんが、娑婆に出られないのでSNSはちょっと

Page 27: Azure Mobile ServicesとAzure Mobile Apps

デベロッパー(私)

デベロッパー

ユーザー

ユーザー

@docomo.ne.jp

@gmail.com

×アプリ作るか…

Page 28: Azure Mobile ServicesとAzure Mobile Apps

とまぁ、こんな軽いノリで始めた。

Page 29: Azure Mobile ServicesとAzure Mobile Apps

こんな感じにします

Page 30: Azure Mobile ServicesとAzure Mobile Apps

Githubにプロジェクト登録

• git追加

• .gitignore更新

• githubへプッシュ

• https://github.com/nnasaki/shimaazu

Page 31: Azure Mobile ServicesとAzure Mobile Apps

レイアウト変更

• チェックボックス消す

• 発言を下に持ってくる

– listViewToDo layout:weight 1

Page 32: Azure Mobile ServicesとAzure Mobile Apps

Doneで入力できるように

• 改行を禁止にする

– android:autoText="false"

– android:inputType="text”

• ボタンイベントを追加する

– setOnEditorActionListenerを追加

– EditorInfo.IME_ACTION_DONE で判定

Page 33: Azure Mobile ServicesとAzure Mobile Apps

最新のチャットを確認したい

• スクロールを常に下になるように

– android:stackFromBottom="true”

– android:transcriptMode="alwaysScroll"

Page 34: Azure Mobile ServicesとAzure Mobile Apps

名前入力欄の追加

• 画面上部に名前入力欄のラベルとテキストボックスを追加する

– ActivityにmTextNewToDoと同様に追加

– ItemにmTextと同様に追加

Page 35: Azure Mobile ServicesとAzure Mobile Apps

時間を表示したい

• Mobile Services がデフォルトで持っている、__createdAt を利用する

– row_list_to_do.xml に LinearLayoutを追加

–発言者と日付を用意する

– ToDoItemに__createdAtのDateを追加

– ToDoItemAdapter にgetViewで情報取得を追加

Page 36: Azure Mobile ServicesとAzure Mobile Apps

こんな感じになりましたね?

Page 37: Azure Mobile ServicesとAzure Mobile Apps

サーバースクリプト修正なし

• 名前のカラムを追加したのに何故?

Page 38: Azure Mobile ServicesとAzure Mobile Apps

サーバースクリプト修正なし

• 名前のカラムを追加したのに何故?

動的スキーマ

Page 39: Azure Mobile ServicesとAzure Mobile Apps

これで解決したかと思いきや…

Page 40: Azure Mobile ServicesとAzure Mobile Apps

_人人人人人人人人人_> 結局届かない! <

 ̄Y^Y^Y^Y^Y^Y^Y^Y ̄

×

Page 41: Azure Mobile ServicesとAzure Mobile Apps

折り返し地点

Page 42: Azure Mobile ServicesとAzure Mobile Apps

プッシュ通知

Page 43: Azure Mobile ServicesとAzure Mobile Apps

プッシュ通知

• 基本チュートリアルをなぞっていきますが日本語訳がAndroid Studioに対応していないので古い

• 英語と日本語の両方を見ていきます

– http://azure.microsoft.com/ja-jp/documentation/articles/mobile-services-javascript-backend-android-get-started-push/

– http://azure.microsoft.com/en-us/documentation/articles/mobile-services-javascript-backend-android-get-started-push/

Page 44: Azure Mobile ServicesとAzure Mobile Apps

プッシュ通知

• Genymotionの場合受け取れない。

–細工をすれば可能

– http://forum.xda-developers.com/showthread.php?t=2528952

• ARM Translation Installer v1.1

• Google Apps for Android をOSのバージョンに合わせて入れる

Page 45: Azure Mobile ServicesとAzure Mobile Apps

Google Cloud Messaging を有効にする

• Google Cloud Console Web でプロジェクト作成

– https://console.developers.google.com/project

• Google Cloud Messaging for Androidを有効にする

• APIキーを発行する

Page 46: Azure Mobile ServicesとAzure Mobile Apps

Mobile Services にAPIキーを入力する

• APIキーをGCMに設定する

Page 47: Azure Mobile ServicesとAzure Mobile Apps

アプリケーションにプッシュ通知を追加する

• ここらへんから日本語が古い

• Android SDKからダウンロード

– Google APIs

– Google Play services

• ビルドのバージョンを合わせる。二つのファイルを合わせること

– gradle.build

– AndroidManifest.xml

Page 48: Azure Mobile ServicesとAzure Mobile Apps

アプリケーションにプッシュ通知を追加する

• コードを修正する

– uses-permissionを追加

• アプリ名を合わせる

– receiver 登録

• アプリ名を合わせる

– build.gradle に play services-baseを追加

– Activity に SENDER_IDをプロジェクト番号で追加

– MobileServiceClientをstaticにする

Page 49: Azure Mobile ServicesとAzure Mobile Apps

アプリケーションにプッシュ通知を追加する

• MyHandlerを追加

• サーバーのInsertを修正

Page 50: Azure Mobile ServicesとAzure Mobile Apps

今日の予定

50

モバイルサービスを使ってみるモバイルサービスとは

チャットアプリ開発

ユーザーの動向を知りたいMobile Engagement

モバイルサービスの今後Mobile App となにが違うの?

Page 51: Azure Mobile ServicesとAzure Mobile Apps

Mobile Engagement

51

Page 52: Azure Mobile ServicesとAzure Mobile Apps

ユーザーの使用状況を把握できる

• リアルタイムに使用状況がわかる

• ユーザー数など統計がとれる

Page 53: Azure Mobile ServicesとAzure Mobile Apps

キャンペーンが打てる

• 広告やキャンペーンの通知をプッシュ配信できる

• 結果を確認できる

Page 54: Azure Mobile ServicesとAzure Mobile Apps

その他

• クラッシュやエラー解析

• まだ出たばかりでよくわからない

• プレビュー申込が必要

• とにかくスゴイ安いので使ってみてください

Page 55: Azure Mobile ServicesとAzure Mobile Apps

Getting Started• とりあえずポータルで作成

• チュートリアルをやってみる– http://azure.microsoft.com/ja-jp/documentation/articles/mobile-

engagement-android-get-started/

– 長いので Connecting your app to the Mobile Engagement backend の部分だけ

Page 56: Azure Mobile ServicesとAzure Mobile Apps

アプリを配布する

• DeployGateを使用する

• Google Play ではなくても配布可能

• 自己署名のアプリなので設定の変更が必要

Page 57: Azure Mobile ServicesとAzure Mobile Apps

アプリ配布方法

• Android Studio で Generate Signed APK で APK 作成

• できあがったAPKをDeployGateにドラッグアンドドロップ

Page 58: Azure Mobile ServicesとAzure Mobile Apps

アプリインストール方法

• 共有リンクを作成する

• DeployGateをインストールする

• 自作したapkをインストールする

Page 59: Azure Mobile ServicesとAzure Mobile Apps

適当に文字をうっててください。目標はみんなで100行!!

Page 60: Azure Mobile ServicesとAzure Mobile Apps

サーバースクリプトの修正

function read(query, user, request) {

// query.take(1000);// request.execute();

var countSql = "SELECT COUNT(Id) count FROM TodoItem";mssql.query(countSql, {

success: function(results) {var skipCount = results[0].count - 50

query.orderBy('__createdAt').skip(skipCount).take(50);request.execute();

}});

}

Page 61: Azure Mobile ServicesとAzure Mobile Apps

今日の予定

61

モバイルサービスを使ってみるモバイルサービスとは

チャットアプリ開発

ユーザーの動向を知りたいMobile Engagement

モバイルサービスの今後Mobile App となにが違うの?

Page 62: Azure Mobile ServicesとAzure Mobile Apps

モバイルサービスの今後

62

Page 63: Azure Mobile ServicesとAzure Mobile Apps

Mobile Appとは

• モバイルサービスの新バージョン

• アプリ サービスの一つ

• 他のアプリサービスとの連携が簡単

• 移行途中なのでモバイルサービスであった機能が無い

– QuickStart の Android版

– JavaScript バックエンド

• 料金体系が異なる

Page 64: Azure Mobile ServicesとAzure Mobile Apps

モバイルサービスなくなっちゃうの?

• 今後も継続してサポートすることが宣言されている

– http://azure.microsoft.com/en-us/documentation/articles/app-service-changes-existing-services/

64

Page 65: Azure Mobile ServicesとAzure Mobile Apps

すぐに移行すべき?

• .NET バックエンドを使っている人は移行が簡単なので、可能であれば移行した方が良い

–ただし、料金には気をつけて!

• JavaScript バックエンドの人はまだ対応されていないので様子見

65

中の人が鋭意対応中

Page 66: Azure Mobile ServicesとAzure Mobile Apps

66

料金、お高いんでしょ?

Page 67: Azure Mobile ServicesとAzure Mobile Apps

67

無料から使えます

http://azure.microsoft.com/ja-jp/pricing/details/mobile-services/

Page 68: Azure Mobile ServicesとAzure Mobile Apps

Mobile Services

Notification Hubs

Mobile Services Notification Hubs

Windows ストア

iOS

Android

Xamarin

PhoneGap

Sencha

Windows Phone

iOS

Android

HTML 5/JS

クライアント送信データ転送(Outbound data transfer) 料金について• Mobile Services、Notification Hubsはサービス料金に含まれる• 言い換えれば、http://azure.microsoft.com/ja-

jp/pricing/details/data-transfers/ の料金は別途かからない

Included

Included

Includedincluded(*1)

*1) 同じリージョン内であれば、そもそも無料

Page 69: Azure Mobile ServicesとAzure Mobile Apps

モバイルサービスの使用条件について

• 例えば、Standardレベルで500GBを超えてしまった場合、サービスは即使用出来なくなる

• 送信データが超えそうになったらユニット数を上げれば良い

Page 70: Azure Mobile ServicesとAzure Mobile Apps

告知

70

Page 71: Azure Mobile ServicesとAzure Mobile Apps

Global Azure BOOTCAMP 2015

71

Page 72: Azure Mobile ServicesとAzure Mobile Apps

Global Azure BOOTCAMP 2015

• 日時 4/25(土)

• 場所:東京(gloopsさん)

• 学生向け

– https://jazug.doorkeeper.jp/events/22795

• 一般向け

– https://jazug.doorkeeper.jp/events/22782

72

Page 73: Azure Mobile ServicesとAzure Mobile Apps

ご清聴ありがとうございました

73