「AWS Mobile Hub」を使ったデスクトップアプリ作成

「AWS Mobile Hub」を使った
デスクトップアプリ作成
青柳英明
JAWS-UG福岡
2017/4/22 - Reboot #4

自己紹介
青柳英明
職業：インフラSE（未だオンプレOnly…）
経歴：アプリケーション開発 … 3年
インフラエンジニア … 16年
AWS歴： 1年
（もう「初心者」と言うと怒られますね…）
#初老枠
最近：情報処理安全確保支援士
とかいうのになった（関連する仕事は無い…）

AWS Mobile Hub とは？
mBaaS … Mobile Backend as a Service
モバイルアプリを開発する際の
バックエンドとなるサービスを提供

AWS Mobile Hub とは？
AWS の様々なサービスを組み合わせて提供されている
Cognito
S3 DynamoDB SNS Lambda
API Gateway CloudFront Lex (Preview)
AWS Mobile SDK
Device Farm
Pinpoint
認証
サービス
開発
テスト
分析
(PaaS)
(IAM)

AWS Mobile Hub を使うメリット
(1) 統合されたダッシュボードで一元管理できる

(2) IAMロール定義、リソースに対するアクセスポリシー設定を
自動的に行ってくれる
Cognito による
ユーザー認証
各サービスの
リソースへのアクセス
一番めんどくさい部分を
全部やってくれる！

(3) モバイル向け開発プロジェクトのテンプレート(サンプルコード)を
自動生成してくれる
＜対応プラットフォーム／言語＞
・ iOS（Swift／Objective-C）
開発者は、AWS 以外の部分（UI、ロジック）に注力できる
・ Android（Java）

Electron とは？
米 GitHub 社が開発した「デスクトップアプリ開発フレームワーク」
Atom Slack Visual Studio Code
・ HTML／CSS／JavaScript を使って開発できる
・マルチプラットフォーム（Windows／macOS／Linux）
＜採用例＞
＜特徴＞

Electron で使われている Web 技術
Renderer プロセス Main プロセス
「UI・レンダリング」を担当
Chromium
HTML／CSS／JavaScript
Node.js
JavaScript
「ロジック」を担当

Electron with AWS Mobile Hub
AWS Mobile Hub の
プロジェクトを作成
・ Mobile Hub のメリット(1)(2)を享受
・モバイルアプリ、デスクトップアプリ両方からアクセス可能
Mobile Hub が生成する
プロジェクトからビルド
モバイルアプリ
デスクトップアプリ
AWS SDK for JavaScript
を使ってコードを記述

Electron with AWS Mobile Hub
UI・レンダリング
Renderer プロセス
AWS 関連の処理
Main プロセス
両プロセス間は
「IPC」という仕組みで
情報のやり取りを行う
AWS SDK

まずは「Cognito」まわりの実装
AWS SDK からリソースへのアクセス
・ Access Key / Secret Access Key によるアクセス
→ ユーザーへ配布するクライアントアプリには埋め込むべきでない
・ Cognito を使った認証を行い、アクセストークンを発行
トークンを使うことでリソースへのアクセス権を得る
特に JavaScript の場合、ソースから容易に露呈するので絶対NG！

Cognito が取り扱う認証の種類
・ Federated Identities
IDプロバイダと連係して認証を行う
・ User Pools
AWS が提供する認証基盤
E-mail、電話(SMS) でアクティベーション → アカウント／パスワードでログイン
・「未認証ユーザー」の概念も有り
Cognito の認証を受けているが、特定ユーザーとの紐付け無し
→ 「ゲストユーザー」のような扱い

とりあえず今回は、User Pools の最低限の機能だけを実装
ユーザー登録アクティベーションログイン
モバイル
Electron

Cognito でハマった箇所…
Cognito User Pools で「App Client Secret (Key)」が設定されている場合
→ 認証でエラーとなる
NotAuthorizedException: Unable to verify secret hash for client XXXXXXXX
デフォルトの App Client
「Secret Key 無し」の App Client を
追加で作成する必要あり

S3 の利用（例：簡易ファイルビューアー）
(1) S3 上のファイル一覧を列挙
listObjects メソッド
(2) S3 へファイルを書き込み (アップロード)
putObject メソッド
(3) S3 からファイルを読み込み (ダウンロード)
getObject メソッド
引数：対象のフォルダ(S3キー)
戻り値：フォルダ内のファイル(S3キー)の一覧(配列) → 画面へ表示
引数：ファイル内容(バッファデータ) ← ローカルファイルから読み込み
アップロード先のフォルダ(S3キー)
引数：対象のファイル(S3キー)
戻り値：ファイル内容(バッファデータ) → ローカルファイルへ書き込み

S3 上の画像ファイルを表示するには…
Electron の画面描画は Chromium ベースなんだから、
HTML でこんな風↓にすればいいんじゃないの？
<IMG SRC=“https://s3-ap-northeast-1.amazonaws.com/xxxxxxxx/xxxxxxxx.jpg”>
→ 「Renderer プロセス」から直接 S3 へアクセスはできないので NG
(Cognito から受け取ったトークンを持っているのは「Main プロセス」側)

S3 上の画像ファイルを表示するには…
Renderer Main
ストリーム
送信
Renderer Main
パスを
教える
理想の処理今回 (妥協策)
データ受信
(同期)
データ受信
(非同期)
ローカルディスクに
ファイルとして保存
IMGタグで
ローカルファイルを
表示

（デモを少しだけ披露しました）

さいごに
「Electron with AWS Mobile Hub」をやってみて
・確かに Electron 自体はとっつき易かったですが…
AWS SDK を使ってガリガリ書いていくのは大変だった
ご清聴、ありがとうございました！
・まだまだ、実装できている機能がごく一部だけですし、
ソースも汚いし、(たぶん)バグいっぱいあるし…
でも、そのうちサンプルとしてお見せできれば…とか思ってます
(需要あるのか？)

「AWS Mobile Hub」を使ったデスクトップアプリ作成

Recommended

Recommended

More Related Content

More from Hideaki Aoyagi

More from Hideaki Aoyagi (11)

「AWS Mobile Hub」を使ったデスクトップアプリ作成