Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,085 views

Published on

2017/04/22 「JAWS-UG福岡 Reboot#4」 で発表した資料です

Published in: Technology
  • Be the first to comment

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

  1. 1. 「AWS Mobile Hub」を使った デスクトップアプリ作成 青柳 英明 JAWS-UG福岡 2017/4/22 - Reboot #4
  2. 2. 自己紹介 青柳 英明 職業: インフラSE(未だオンプレOnly…) 経歴: アプリケーション開発 … 3年 インフラエンジニア … 16年 AWS歴: 1年 (もう 「初心者」 と言うと怒られますね…) #初老枠 最近: 情報処理安全確保支援士 とかいうのになった(関連する仕事は無い…)
  3. 3. AWS Mobile Hub
  4. 4. AWS Mobile Hub とは? mBaaS … Mobile Backend as a Service モバイルアプリを開発する際の バックエンドとなるサービスを提供
  5. 5. AWS Mobile Hub とは? AWS の様々なサービスを組み合わせて提供されている Cognito S3 DynamoDB SNS Lambda API Gateway CloudFront Lex (Preview) AWS Mobile SDK Device Farm Pinpoint 認証 サービス 開発 テスト 分析 (PaaS) (IAM)
  6. 6. AWS Mobile Hub を使うメリット (1) 統合されたダッシュボードで一元管理できる
  7. 7. AWS Mobile Hub を使うメリット (2) IAMロール定義、リソースに対するアクセスポリシー設定を 自動的に行ってくれる Cognito による ユーザー認証 各サービスの リソースへのアクセス 一番めんどくさい部分を 全部やってくれる!
  8. 8. AWS Mobile Hub を使うメリット (3) モバイル向け開発プロジェクトのテンプレート(サンプルコード)を 自動生成してくれる < 対応プラットフォーム/言語 > ・ iOS(Swift/Objective-C) 開発者は、AWS 以外の部分(UI、ロジック)に注力できる ・ Android(Java)
  9. 9. Electron
  10. 10. Electron とは? 米 GitHub 社が開発した 「デスクトップアプリ開発フレームワーク」 Atom Slack Visual Studio Code ・ HTML/CSS/JavaScript を使って開発できる ・ マルチプラットフォーム(Windows/macOS/Linux) < 採用例 > < 特徴 >
  11. 11. Electron で使われている Web 技術 Renderer プロセス Main プロセス 「UI・レンダリング」 を担当 Chromium HTML/CSS/JavaScript Node.js JavaScript 「ロジック」 を担当
  12. 12. Electron with AWS Mobile Hub
  13. 13. Electron with AWS Mobile Hub AWS Mobile Hub の プロジェクトを作成 ・ Mobile Hub のメリット(1)(2)を享受 ・ モバイルアプリ、デスクトップアプリ 両方からアクセス可能 Mobile Hub が生成する プロジェクトからビルド モバイルアプリ デスクトップアプリ AWS SDK for JavaScript を使ってコードを記述
  14. 14. Electron with AWS Mobile Hub UI・レンダリング Renderer プロセス AWS 関連の処理 Main プロセス 両プロセス間は 「IPC」 という仕組みで 情報のやり取りを行う AWS SDK
  15. 15. まずは 「Cognito」 まわりの実装 AWS SDK からリソースへのアクセス ・ Access Key / Secret Access Key によるアクセス → ユーザーへ配布するクライアントアプリには埋め込むべきでない ・ Cognito を使った認証を行い、アクセストークンを発行 トークンを使うことでリソースへのアクセス権を得る 特に JavaScript の場合、ソースから容易に露呈するので絶対NG!
  16. 16. Cognito が取り扱う認証の種類 ・ Federated Identities IDプロバイダと連係して認証を行う ・ User Pools AWS が提供する認証基盤 E-mail、電話(SMS) でアクティベーション → アカウント/パスワードでログイン ・ 「未認証ユーザー」 の概念も有り Cognito の認証を受けているが、特定ユーザーとの紐付け無し → 「ゲストユーザー」 のような扱い
  17. 17. とりあえず今回は、User Pools の最低限の機能だけを実装 ユーザー登録 アクティベーション ログイン モバイル Electron
  18. 18. Cognito でハマった箇所… Cognito User Pools で 「App Client Secret (Key)」 が設定されている場合 → 認証でエラーとなる NotAuthorizedException: Unable to verify secret hash for client XXXXXXXX デフォルトの App Client 「Secret Key 無し」 の App Client を 追加で作成する必要あり
  19. 19. Cognito でハマった箇所… Cognito User Pools で 「App Client Secret (Key)」 が設定されている場合 → 認証でエラーとなる NotAuthorizedException: Unable to verify secret hash for client XXXXXXXX デフォルトの App Client 「Secret Key 無し」 の App Client を 追加で作成する必要あり
  20. 20. S3 の利用 (例:簡易ファイルビューアー) (1) S3 上のファイル一覧を列挙 listObjects メソッド (2) S3 へファイルを書き込み (アップロード) putObject メソッド (3) S3 からファイルを読み込み (ダウンロード) getObject メソッド 引数: 対象のフォルダ(S3キー) 戻り値: フォルダ内のファイル(S3キー)の一覧(配列) → 画面へ表示 引数: ファイル内容(バッファデータ) ← ローカルファイルから読み込み アップロード先のフォルダ(S3キー) 引数: 対象のファイル(S3キー) 戻り値: ファイル内容(バッファデータ) → ローカルファイルへ書き込み
  21. 21. S3 上の画像ファイルを表示するには… Electron の画面描画は Chromium ベースなんだから、 HTML でこんな風↓にすればいいんじゃないの? <IMG SRC=“https://s3-ap-northeast-1.amazonaws.com/xxxxxxxx/xxxxxxxx.jpg”> → 「Renderer プロセス」 から直接 S3 へアクセスはできないので NG (Cognito から受け取ったトークンを持っているのは 「Main プロセス」 側)
  22. 22. S3 上の画像ファイルを表示するには… Renderer Main ストリーム 送信 Renderer Main パスを 教える 理想の処理 今回 (妥協策) データ受信 (同期) データ受信 (非同期) ローカルディスクに ファイルとして保存 IMGタグで ローカルファイルを 表示
  23. 23. (デモを少しだけ披露しました)
  24. 24. さいごに 「Electron with AWS Mobile Hub」 をやってみて ・ 確かに Electron 自体はとっつき易かったですが… AWS SDK を使ってガリガリ書いていくのは大変だった ご清聴、ありがとうございました! ・ まだまだ、実装できている機能がごく一部だけですし、 ソースも汚いし、(たぶん)バグいっぱいあるし… でも、そのうちサンプルとしてお見せできれば…とか思ってます (需要あるのか?)

×