monaca UG #6のプレゼン資料

1. #6 Monaca UG
アシアル株式会社 笹亀 弘

2. 自己紹介
• 名前：笹亀 弘（Sasagame Hiroshi）
• 会社：アシアル株式会社
• 年数：12年目
• やっていること：
• エンジニア < プロジェクトマネージャー
• 好きな技術：サーバサイド全般（AWSをゴニョゴニョ）

3. hoops link passアプリって？
• hoops link tokyoのイベント情報を確認する
• hoops link tokyoへ入退館をする
• hoops link tokyoへ入館しているメンバーを確認

4. 全体構成図
ここを中心にお
話し

5. アプリ開発につかったサービスなど
Monaca
TAGCAST-Beacon

6. MonacaとOnsenUIってなに？
■Monaca
• アシアルが開発者向けに提供しているモバイルアプリ開発環境で開発プ
ラットフォーム。
• ビルドなど基本となる機能はCordovaをベース。
• IonicとかXamarin（ザマリン）とかがライバル。
■Onsen UI
• アシアルがモバイルコンテンツの開発者向けにて提供しているモバイルUI
コンポーネント。
• いろんなJavascriptフレームワークにも対応。
• ライバルはlonic uiコンポーネント。
• 海外でも人気。

8. TAGCAST-Beaconの採用するまで
このBeacon使え
るんじゃない？
そうそう！これと同じ
ようにhoops link
tokyo施設にいるかどう
かで入退館を制御する
使い方がしたい！
ただ、アプリで提供を
するし、Cordovaで作
成するんだよね・・・
おぉ〜すばらしい！
Cordova pluginもあ
る！採用！！

9. hoops link passアプリでの開発環境（構成図）
VueからAPI Gateway,
Cognito, Google Calendar
のそれぞれのAPIを利用し、
データ連携をしている
データ連携
Cognito

10. hoops link passアプリ利用ライブラリと
プラグイン
• aws-amplify
• Cognitoを簡単に利用できるようになるライブラリ
• amazon-cognito-auth-js
• aws-amplifyに内包されているがCognitoの認証周りのライブラリ
• aws-sdk
• AWSサービス(Cognito, DynamoDB, S3など)を利用するためのライブ
ラリ
• tagcast-cordova-plugin
• Buletoothを用いて、Beacon情報を取得するためのcordovaのプラグイ
ン

11. アプリとの連携イメージ（Googleカレンダー編）
Googleカレンダーに予定を登録する
とhoops link passアプリの方へ情報
が更新される。
アプリ立ち上げ時にGoogleAPIを利
用して、当日のカレンダー情報を取
得。SCHEDULE画面ではまとめて
数ヶ月分の予定を取得。

12. アプリとの連携イメージ（チェックイン編）
Beaconにスマホ端末を近づ
けると、「チェックイン」
ボタンが表示され、チェッ
クインします。
一度、Facebookで認証（アクティ
ベーション）をしたあとは、立ち上
げ時にCognitoで自動認証をさせる
・Cognitoの認証トークン取得
・Facebookの情報取得

13. hoops link passアプリ構築秘話
• 公式外のcordova-pluginを利用する際にはプラグイン開発者と繋がりを
もっておくと吉。
• 今回の例だと、tagcast-cordova-pluginを検証した際にバグらしきものを見つけて報
告しした際も即日で対応していただいたり、BeaconとSDKの挙動や仕様などについ
て、質疑応答を迅速にご対応いただいて、とても助かった。
• Beaconとスマホアプリ（端末）との反応が端末ごとに異なるので挙動に
は注意
• 新規アプリも iPhoneXの対応が必須になり、SafeAreasの対応に苦労した
• FacebookAPI（GraphAPI）の仕様に振り回された
• 某国の大統領選の際にFacebookが悪用されたことにより、ちょうど開発時期にAPI
の仕様が毎月変わるというタイミングにあたり、仕様変更に振り回された・・
• やっぱり頼りになるMonacaチーム！！
• Monacaやcordova pluginなどの挙動で困ったときに相談して解決に至らなかったこ
とはなかった。アシアルなら相談がタダｗ
• わからないことはMonacaのプロに聞くのが早い！技術サポートを受けれるプランを
オススメします！

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