プレビューアプリのTemenos Quantumを使って開発したアプリを確認してみた

# 目次
1. はじめに
2. プレビューアプリって？
3. 利用環境
4. 開発したアプリを自分の端末上で動かしてみる
4. アプリを遠隔で複数メンバーに共有する
5. まとめ

# 1. はじめに
iOSやAndroidなどでモバイルアプリで開発を進める時に、
ビルド、インストールせずに手軽に確認できたらなぁ...
と思うことはありませんか？:thinking:
そんなときは簡単にアプリのプレビューができるTemenos Quantumというアプリを利用してみましょう！

自分の端末上で確認する場合と、
遠隔で複数人に共有する場合の手順をご紹介します！


# 2. Temenos Quantumアプリって？
Temenos Quantumアプリは、ビルド、インストールせずに手軽に確認できるアプリとなります。
Apple StoreおよびGoogle Playにあるので、早速ダウンロードしてみましょう:grinning:


| Apple Store     | Google Play |
|:-----------------|:------------------|
|[![Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/60a435e9-ddc6-e4d6-3b77-ca0261b54cd0.png)](https://apps.apple.com/jp/app/kony-quantum/id1459085071?l=en)| [![google-play-badge (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/cc3c0295-d9cd-39f8-53cc-b697728426e2.png)](https://play.google.com/store/apps/details?id=com.kony.FunctionPreviewApp&hl=ja)| 

# 3. 利用環境
:warning:ダウンロードする前にご利用の端末の環境を確認してください。（※2022/7/1時点）



| iOS    | Android |
|:-----------------|:------------------|
| 11.0以降 | 5.0以上 |



# 4. 開発したアプリを自分の端末上で動かしてみる
ダウンロードは終わりましたか？
では早速やってみましょう！

## ログイン
端末からTemenos Quantumアプリを開いてみましょう。
するとログイン画面が表示されます。
`USERNAME`と`PASSWORD`を入力し、`SIGN IN`を押してください。
`USERNAME`およびは`PASSWORD`はKonyのアカウントになります。

![IMG_0464のコピー.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e24eca61-bbec-3709-d34b-3bb322625bcd.png)

## アプリの説明
Temenos Quantumアプリでは様々な方法でアプリを反映させることができます。
![IMG_0466.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/79bde67e-2843-a8a4-3c1a-585dd3d27eda.png)
1. `USB`→USBケーブルで繋いだ端末とPC間でアプリを反映。
2. `Wi-Fi`→同Wi-Fiに繋げている端末とPC間でアプリを反映。IP AddressとPort番号を入力し、繋げる。
3. `Cloud`→Cloud上で公開したアプリを見ることができる。App Viewer Code（5桁）が必要。

その他にMarketplaceを確認することもできます。
Marketplaceに関しては以下の記事に記載されておりますので、よろしければご参照ください。
https://qiita.com/Kony_Team/items/37cf23305c4c084b2279

Moreについては色々な設定が可能となっております。
今回は割愛とさせていただきます。

## Kony Visualizerでやること
アプリの説明が一通り終わったところで早速やってみましょう！
1. Kony Visualizerを開いてください。
2. `Preview` > `Configure Channels`
3. 対象箇所にチェックを入れ、`Save and Run`
（今回はiPhoneでみてみたいと思います。）
<img width="450" alt="スクリーンショット 2020-05-19 16.56.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/457813e3-d402-6992-6422-0d9f4edf2a19.png">

4.この画面が表示されたらOKです！
<img width="699" alt="スクリーンショット 2020-05-19 16.57.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/944219f8-a3b0-b588-55bc-a8a660901979.png">

## Temenos Quantumアプリを使って開発したアプリを確認
今回はUSB接続でみてみたいと思います。
1. 正しく接続されていることを確認（緑色になっていたらOK）
![IMG_0466.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/eff9cea9-b4a1-ca62-b6a8-3909be8cce3e.png)
2. `LAUNCH`をタップ
3. アプリが反映
（今回用意したアプリははWELCOME画面上で`次へ`ボタンを押すとHello Worldが表示されるといったアプリになります。）
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/9RErAQohXp">pic.twitter.com/9RErAQohXp</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1262646363659005952?ref_src=twsrc%5Etfw">May 19, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

＜補足＞
・指2本で左から右へスワイプするとアプリを終了させることができます。
・注釈を表示/追加するには、画面上で2本の指を2秒間押し続けるか、デバイスを振ってください。
![IMG_0467.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/45dc096b-e566-7ca1-ae44-c9ac5855f308.png)



# 5. アプリを遠隔で複数メンバーに共有する
上記で紹介した方法は、同じ環境にいる場合の確認方法でした。

実際プロジェクトを進めていく中で、
モックアプリを作成し、遠隔で複数のメンバーにもアプリを共有したい場面があると思います。

そんな時でも、Quantumアプリとクラウドアカウントがあれば、
別環境にいる人にも共有することができます。

## 1. クラウドアカウントに追加する
まずはFabricコンソールのUser一覧画面で、
共有したい人のアカウントを招待してください。

![スクリーンショット 0004-07-01 15.49.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3f0c33dd-1280-f567-ac7d-2b8f9e59aa13.png)

対象者にメールが届きますので、
承認を押したらアカウント作成が完了となります。

## 2. Visualizerでアプリを公開する
Visualizerで、Build -> Publish Live Previewをクリックします。
![スクリーンショット 0004-07-01 15.40.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b2813648-c7ca-c204-deb8-3ccab03748a1.png)

公開したいOSにチェックをつけて、
以下のように設定をしたら「Publish」をクリックします。
![スクリーンショット 0004-07-01 15.40.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7f4a5796-8f90-bc7f-ce61-fb9dcc7efb13.png)

しばらくすると、
以下のように5桁のコードとQRコードが表示されます。
![スクリーンショット 0004-07-01 15.42.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c77cae45-4c32-b6d6-0f34-bec1dc94f161.png)

共有したいメンバーにQRコードか５桁の番号を教えるだけで、
そのメンバーにも遠隔でアプリを確認することができるようになります！

この機能があるおかげで、
開発したものをすぐに他メンバーに共有することができるので、
認識齟齬をなくしスピーディに開発を進めることができます！

便利な機能なので、ぜひ活用してみてくださいね:relaxed:



# 5. まとめ
デザインや動き等をちょっと確認したい,
すぐに共有したいというときにすぐに確認できるので、便利なアプリだと思います:smile:

また接続方法が3つもあるので、シーンに応じて使い分けできるのもいいですね！
（例えば同じWi-Fiに数人が繋げている場合、Wi-Fiでアプリを同時に共有する等）