Microsoft Azureで始めるサクサク

Android開発JAZUG 青森

2015/03/07

山本 誠樹

2

自己紹介

Masaki YAMAMOTOTwitter:@nnasaki

Microsoft MVPfor Microsoft Azure

今日はAndroidアプリ開発をします

必要なもの

• Azure サブスクリプション

• Android Studio

– NOT Eclipse

• Genymotion

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

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

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

スマホアプリを作りたい

モバイルサービスとは

チャットアプリ開発

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

Mobile Engagement

サービスを外部に公開したい

API Management

モバイルサービスとは

プッシュ通知

数分以内に数百万台

タグ付け（合計1億件以上）

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

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

バックエンド

C#、 NodeJS

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

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

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

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

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

今日使うところ

SDKがGithubにある！

https://github.com/Azure/azure-mobile-services

バッグエンドが選べる

手軽なのはJavaScript(NodeJS)

Gitリポジトリで開発

オフラインデータ同期

無料で遊べる

今日話さないことオフラインデータ同期

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

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

クライアントはSQLiteまたはCoreDataがデータを保持

同じデータを複数の人が更新した場合、競合を検出できる

サンプルはGithubで

https://github.com/Azure/mobile-services-samples/tree/master/TodoOffline

でもお高いんでしょ？

無料

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

http://azure.microsoft.com/ja-jp/pricing/details/sql-database/

ちょろっと遊ぶだけなら無料

無料で足りなくなったら、大体2000円程度。(2015/3月時点)

モバイルサービスが約1500円/月

SQL Databaseが約600円/月

送信データ転送量込みです。

JOIN NOW!

http://azure.microsoft.com/ja-jp/pricing/free-trial/

無料枠あります

http://azure.microsoft.com/ja-jp/pricing/free-trial/

月々約15000円

http://azure.microsoft.com/ja-jp/pricing/free-trial/

スマホアプリを作りたい

モバイルサービスとは

チャットアプリ開発

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

Mobile Engagement

サービスを外部に公開したい

API Management

チャットアプリ開発

Why?何故開発する?

登場人物達

登場人物達

デベロッパー（私）

デベロッパー

ユーザー

ユーザー

グループで会話するとき

デベロッパー（私）

デベロッパー

ユーザー

ユーザー

＿人人人人人人人人人人人人＿＞ 今時まさかのメール！ ＜

￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣

デベロッパー（私）

デベロッパー

ユーザー

ユーザー@docomo.ne.jp

@gmail.com

×

＿人人人人人人人人人人人人＿＞ 迷惑メールブロック！ ＜

￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣

デベロッパー（私）

デベロッパー

ユーザー

ユーザー@docomo.ne.jp

@gmail.com

×

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

デベロッパー（私）

デベロッパー

ユーザー

ユーザー@docomo.ne.jp

@gmail.com

×

え？なにそれわからんわ

デベロッパー（私）

デベロッパー

ユーザー

ユーザー@docomo.ne.jp

@gmail.com

×

Facebook とか Line にしよう

デベロッパー（私）

デベロッパー

ユーザー

ユーザー@docomo.ne.jp

@gmail.com

×

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

ちょっと…

デベロッパー（私）

デベロッパー

ユーザー

ユーザー@docomo.ne.jp

@gmail.com

×アプリ作るか…

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

以降はスライドごとにコードをGithubにアップしてますので

確認してくださいhttps://github.com/nnasaki/JAZUG

-AOMORI/pulls?q=is%3Apr+is%3Acl

osed

Githubにプロジェクト登録

• git追加

• .gitignore更新

• githubへプッシュ

• https://github.com/nnasaki/JAZUG-AOMORI

レイアウト変更

• チェックボックス消す

• 発言を下に持ってくる

– listViewToDo layout:weight 1

Doneで入力できるように

• 改行を禁止にする

– android:autoText="false"

– android:inputType="text”

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

– setOnEditorActionListenerを追加

– EditorInfo.IME_ACTION_DONE で判定

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

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

– android:stackFromBottom="true”

– android:transcriptMode="alwaysScroll"

名前入力欄の追加

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

– ActivityにmTextNewToDoと同様に追加

– ItemにmTextと同様に追加

折り返し地点

時間を表示したい

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

– row_list_to_do.xml に LinearLayoutを追加

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

– ToDoItemに__createdAtのDateを追加

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

それっぽくなってきた

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

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

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

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

動的スキーマ

アプリを配布する

• DeployGateを使用する

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

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

アプリ配布方法

• Android Studio で Generate Signed APK で APK 作成

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

アプリインストール方法

• 共有リンクを作成する

• DeployGateをインストールする

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

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

名無し防止

• 名前のテキストのlengthをチェック

• コメントのlengthをチェック

• toast表示

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

＿人人人人人人人人人＿＞ 結局届かない！ ＜

￣Y^Y^Y^Y^Y^Y^Y^Y￣

×

スマホアプリを作りたい

モバイルサービスとは

チャットアプリ開発

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

Mobile Engagement

サービスを外部に公開したい

API Management

Mobile Engagementとは

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

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

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

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

キャンペーンが打てる

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

• 結果を確認できる

その他

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

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

• プレビュー申込が必要

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

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

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

jp/documentation/articles/mobile-engagement-android-get-started/

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

スマホアプリを作りたい

モバイルサービスとは

チャットアプリ開発

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

Mobile Engagement

サービスを外部に公開したい

API Management

サービスを外部に公開したい

どういうこと？たとえばサービスがめっちゃ成功したとき

APIをフリーミアムで公開したい

つまりどういうこと？

Twitterみたいなことしたいとき

http://azure.microsoft.com/ja-jp/services/api-management/

http://azure.microsoft.com/ja-jp/services/api-management/

モバイルサービス

YOU

アクセス制御

自動ドキュメント作成

キャッシュ

マルチリージョン

参考リンク集

公式リソース

Microsoft Azure Mobile Services http://azure.microsoft.com/ja-jp/services/mobile-services/

チュートリアルhttp://azure.microsoft.com/ja-jp/develop/mobile/

料金表http://azure.microsoft.com/ja-jp/pricing/details/mobile-

services/

Microsoft Azure Japan Team Blog (ブログ) http://blogs.msdn.com/b/windowsazurej/

Azure Mobile Services の Node バックエンドでの Socket.IO の使用方法

http://blogs.msdn.com/b/windowsazurej/archive/2014/09/02/blog-how-to-use-socket-io-with-azure-mobile-service-node-backend.aspx

フォローアップ情報

github azure-mobile-serviceshttps://github.com/Azure/azure-mobile-services

github mobile-services-sampleshttps://github.com/Azure/mobile-services-samples/

パワフル モバイル アプリ開発 ～ 最新 Microsoft Azure Mobile Services をフル活用しよう! ～ | de:code 2014 | Channel 9

http://channel9.msdn.com/Events/de-code/2014/SV-007Shotaro Suzuki‘s Blog（MSエバンジェリストのBlog)

http://blogs.msdn.com/b/shosuz/S/N Ratio (by SATO Naoki) | Microsoft Azure and more…

http://satonaoki.wordpress.com/

私のブログや記事

nnasakiのブログ（近々移転するかも）http://nnasaki.hatenablog.com/

Windows Azureモバイルサービスの基礎 - 技術評論社http://gihyo.jp/dev/serial/01/wams/0001

Windows Azureモバイルサービスで作る簡単スマートフォンアプリ - Build Insider

http://www.buildinsider.net/web/azuremobilesvc

ユーザーグループ

Japan Azure User Group(JAZUG)http://r.jazug.jp/

Japan Azure User Group | Doorkeeperhttp://jazug.doorkeeper.jp/

facebook pagehttps://www.facebook.com/jazug.jp

facebook grouphttps://www.facebook.com/groups/jazug/

スマホアプリを作りたい

モバイルサービスとは

チャットアプリ開発

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

Mobile Engagement

サービスを外部に公開したい

API Management

スマホアプリを作りたい

モバイルサービスとは

チャットアプリ開発

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

Mobile Engagement

サービスを外部に公開したい

API Management

ちょっと戻ってみよう

サーバースクリプト修正

• モバイルサービスのデフォルトは50行までしか返却しない

• チャットなので割り切って最新50行だけ取るようにする

• ページングはそのうち実装

サーバースクリプト修正

• カウントだけを取得する術が無い

– SQLを直接書く

• スキップして最新50だけ取る

プッシュ通知

ここからはGithubにまだ置いていません。

2015/4/4 の JAZUG 福島で話します。

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

プッシュ通知

• 基本チュートリアルをなぞっていきますが日本語訳が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/

プッシュ通知

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

– 細工をすれば可能

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

• ARM Translation Installer v1.1

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

Google Cloud Messaging を有効にする

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

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

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

• APIキーを発行する

Mobile Services にAPIキーを入力する

• APIキーをGCMに設定する

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

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

• Android SDKからダウンロード

– Google APIs

– Google Play services

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

– gradle.build

– AndroidManifest.xml

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

• コードを修正する

– uses-permissionを追加

• アプリ名を合わせる

– receiver 登録

• アプリ名を合わせる

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

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

– MobileServiceClientをstaticにする

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

• MyHandlerを追加

• サーバーのInsertを修正