はじめてのMobile Hubで Cognito と S3 を使ってみました

やまもと ● iOSモバイルアプリ開発

● Swift・Objective-C● AWS素人です

● Qiita書いています○ http://qiita.com/mafmoff

発表者その１

発表者その２

よこやま

● Androidモバイルアプリ開発

● Java・Kotlin● AWSがんばります！

● じゃがいもが好き

本日お話ししたいこと

1. Mobile Hubを使ってみた

2. Mobile Hubでアプリつくってみた

AWS Mobile Hubって？

AWS Mobile Hub

● AWS re:Invent 2015で発表

● AWSを使ったモバイルアプリの構築を3STEPで実現

どんなサービスが使えるのか？

コンソールを見てみると

ユーザー認証

ユーザー認証

● Cognitoによるサービス

● ユーザーをどのようにサインインさせるか設定できる

● SNS認証などと連携してユーザーに一意のIDを割当て可

能

データストレージ

データストレージ

● Cognito + S3によるサービス

● クラウドストレージに写真やドキュメントの保存

● ユーザー情報の保存も可能

● ユーザーのデバイス間のデータ同期

アプリ分析

アプリ分析

● Mobile Analyticsによるサービス

● アプリの使用状況や収益の測定

● データのグラフ化やエクスポートが可能

プッシュ通知

プッシュ通知

● SNSによるサービス

● 単一ユーザー / グループに向けたプッシュ通知配信

● トークンの登録等、面倒な設定はすべて構築済み

即座にプッシュ通知可能

Google Cloud Messaging

クラウドロジック

クラウドロジック

● Lambdaによるサービス

● サーバーレスでモバイルバックエンドを構築

● ロジックはAndroid、iOS間で共有できる

コンテンツ配信

コンテンツ配信

● S3 + CloudFrontによるサービス

● ストレージ上の画像や動画コンテンツの配信

これらのサービスが単一のコンソールから選んで使える

なんだか便利そう！

さっそく使ってみた

STEP 1 : プロジェクト作成

アプリのプロジェクト名を入力してCreate projectするだけ

STEP 2 : サービスを選ぶ

今回は、Facebook認証とストレージを使いたいので

User Sign-inとData Storageを選択してみます

STEP 2 : サービスを選ぶ User Sign-in

認証のオプションと認証方法を選択します

STEP 2 : サービスを選ぶ User Sign-in

FacebookのDeveloperコンソールでアプリIDを生成

※　facebook for developersの画面です

STEP 2 : サービスを選ぶ User Sign-in

作成したIDを入力、保存して設定完了

STEP 2 : サービスを選ぶ User Data Storage

設定して、保存するだけ

STEP 2 : サービスを選ぶ

ここまでの設定で

User Sign-inとData Storageがアプリに追加されました

STEP 3 : Build

Buildメニューを開いて、プラットフォームを選択します

STEP 3 : Build パッケージ生成

Generating...

STEP 3 : Build パッケージ生成

ボタンをクリックするとzipのダウンロードが開始します

完了！

STEP 3 : Build パッケージ内容

デモ画面用のソースコード

Xcodeプロジェクト

アプリのプロジェクトファイル

こちらを開いてシュミレータで起動します

SDK

今回Facebookのユーザー認証とデータストレージで使用す

るFrameworkが梱包されています

STEP 3 : Build シュミレータでデモ確認

● 先ほど選択した

○ User Sign-in○ Data Storageがアプリに実装済みでした

● 各画面からそれぞれの機能のデモ操作が行

えました※ デモ画像はつくってみた発表があるので割愛

STEP 3 : Build ガイドライン的な記載

環境構築や各機能、パッケージの使い方など簡単な手順が記載

STEP 3 : Build パッケージの使い方

　　　　　　

● デモ用のコードを削除● プロジェクトをリネームしてアプリIDを書き換え

　　　　　　

● 独自のプロジェクトにSDKだけコピーして使う

使い方その１

使い方その２

スターターアプリとして使う

サンプルとして使う

STEP 3 : Build 使い方その２が使えなかった

　　　　　　スターターアプリとして使う

● デモ用のコードを削除● プロジェクトをリネームしてアプリIDを書き換え

　　　　　　サンプルとして使う

● 独自のプロジェクトにSDKだけコピーして使う

使い方その１

使い方その２

これ豆な。

SwiftプロジェクトでやったらBuildできなくなって泣いた

ということで、

アプリをつくってみた

どんなアプリ？

プライム・フォトに対抗？

フォトストレージアプリ

つくったアプリ 機能の概要

● ストレージに画像をアップロード

● ストレージから画像をダウンロード

● 保存されている画像の閲覧

● ストレージは完全プライベート

アプリをつくるのに必要な工程

1. アプリをつくる

2. ストレージ用のサーバーを構築

3. サーバーの認証設定を行う

4. アプリとサーバーとの連携を行う(API)

サーバーとか認証とか

1. アプリをつくる

2. ストレージ用のサーバーを構築

3. サーバーの認証設定を行う

4. アプリとサーバーとの連携を行う

アプリをつくるのに必要な工程

できる

できない

できない

できない

でも大丈夫

そう、

Mobile Hub ならね！

1. アプリをつくる

2. ストレージ用のサーバーを構築

3. サーバーの認証設定を行う

4. アプリとサーバーとの連携を行う

自分

S3

Cognito

Mobile Hub

アプリをつくるのに必要な工程

つ・ま・り

インフラエンジニアいらず！

作る

STEP 1 : サンプルブロジェクトをDL

iOSと大差ないです

こっち！

STEP 2 : サンプルから必要なソースをコピー

● com.amazonaws.mobile　　⇒ AWS関連の処理がまとまったパッケージ

● com.mysampleapp　　⇒ アプリを構成するクラス (画面など)を内包

　　新しくアプリを作るときは、

　　com.amazonaws.mobile　　パッケージのみコピーします

STEP 3 : パーミッションやライブラリの設定

開発ガイドの通りに設定していきます

STEP 4 : コーディング

ちゃちゃっとレイアウト組みます

STEP 4 : コーディング （ログイン）

用意されたメソッドにログインボタンを渡してあげるだけ！

ボタン！

STEP 4 : コーディング （アップロード）

ファイルとコールバッククラスを用意すれば

あとは1行でアップロード開始！

1行！

STEP 4 : コーディング （ダウンロード）

ダウンロードもメソッドを呼ぶだけでOK！

めんどうな非同期通信も全部おまかせ！

おまかせ！

完成！

かかった時間

16時間くらい

開発期間

約

16時間

コーディング

サンプルコード解析

意識飛んでた

ふりかえり よかったところ

● 開発ガイドが超親切

● ソースコメントたくさん

● ライフサイクルが考慮されてる(落ちない)

ふりかえり よくなかったところ

● 依存関係が多く拡張しずらい

● シングルトン地獄

● コールバッククラス地獄

● 結局AWSってどうやって使うの？？？？

まとめ

まとめ

● 気軽にAWSの機能を試せるので

ＡＷＳ初学者が初めにさわるサービスとしておすすめ

● サンプルソースをもとにアプリを作るのは結構大変

　 あくまでサンプルとわりきったほうが良いかも

● AWS SDKの利用方法を勉強するのにも良さそう

感想など

あと、

AWS Summit たのしみですね