モバイルアプリ（iOS/Android）を作ってみよう

# 目次
1. はじめに
1. プロジェクトの作成
1. 動かしてみよう
1. どんな動きになるかみてみよう

# はじめに

今回は、モバイルアプリの作成から
動作の確認を行う方法を紹介していきます！

# プロジェクトの作成

Webアプリの作成時と同様、
Project > New projectから新規のプロジェクトを作成します。

モバイルアプリを作成するので、
「Native App」を選択しましょう。
![スクリーンショット 0004-06-30 11.05.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/22f5c831-126c-9a66-31d2-58b72f76bf6d.png)

次にプロジェクト名を選択したら、プロジェクトの作成は完了です。

# 動かしてみよう

Webアプリ作成時と同様、Formを新規で作成して
Widgetを配置して色々と動かしてみましょう！

方法がわからない方は、復習しながら進みましょう👌
▶︎[Webアプリを作ってみよう](https://qiita.com/Kony_Team/items/80d6bbab808699ab7bef)

今回はこのように配置しました。
![スクリーンショット 0004-06-30 11.25.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c8e7bc89-8dc1-5218-e450-67b1cf02ae8e.png)

プルダウンリストには、Listbox Widgetを使用しています。
プルダウンリストの一覧にデータを表示したい場合は、
Listboxを選択した状態で、右メニューにあるMaster Dataの「Edit」ボタンをクリックします。
![スクリーンショット 0004-06-30 11.26.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d1e7a9fd-a66f-4698-e98b-58ffd1da7ea6.png)
モーダルが開くので、Display Valueを編集すると
プルダウンのリストの中身を更新することができます。
![スクリーンショット 0004-06-30 11.26.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/bc454d6d-de29-0da0-4456-cac3078746ff.png)

# どんな動きになるかみてみよう
簡単なアプリの作成ができたので、
早速動作の確認をしてみましょう！

ローカルと実機またはシミュレーターで確認する方法があり、
今後どれも必要になってくるので、覚えていくようにしましょう:writing_hand_tone1:

## ローカルで確認する
デザインの確認など通信を行わない動作の確認をする際は、
Webアプリと同様「Live Preview」で確認します。

Visualizerの一番上にあるメニューから、
Build -> Live Preview Settingsをクリックしてください。

モバイル（iOSまたはAndorid）にチェックをつけて、
Save & Run を実行します。
![スクリーンショット 0004-06-30 13.07.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/75024ec8-411f-41ce-b7f7-85b710e1c28a.png)


プレビューが完了すると、
モバイルの場合は、QRコードが書かれたポップアップが表示されます。
QRコードを読み取ると、アプリのプレビューを確認することができますが、
これには専用の「Temenos Quantum」というアプリが必要となります。

![スクリーンショット 0004-06-30 11.33.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/89700565-556c-59c9-e554-8d4b6c234405.png)

まだアプリをダウンロードしていない人は、
「Get Temenos Quantum」をクリックすると、
QRコードが表示されるので、標準のカメラアプリで読み取って、
Quantumモバイルアプリをダウンロードしてください。

モバイルのQuantumアプリを開いたら、
自身のクラウドアカウントでログインをします。

使い方については、
以下の記事を参考にしながら進めてみてください！
▶︎[Temenos Quantumアプリを使って開発したアプリを確認してみた](https://qiita.com/Kony_Team/items/54e6adefce6817fdd28d#4-%E9%96%8B%E7%99%BA%E3%81%97%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E8%87%AA%E5%88%86%E3%81%AE%E7%AB%AF%E6%9C%AB%E4%B8%8A%E3%81%A7%E5%8B%95%E3%81%8B%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B)

プレビューで確認したところ、アプリ画面が表示されたかと思います！
![ezgif-2-c5165e0fd0.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c202b4d5-37cf-d0eb-bbb3-63cfda313d0a.gif)



デザインの確認などだけ行いたい場合は、
さくっとプレビューアプリで確認できるのでおすすめです👍

## 実機またはシミュレーターで確認する
API通信が必要な確認の場合は、
実機またはシミュレーターでの確認を行うようにしてください。

下記の記事でiOS、Androidそれぞれで
実機とシミュレーターでの確認方法を記載していますので、
「2. Mobileのビルド」のパートを参考にしながら進めてみてください！

▶︎[Visualizer Version9 でのアプリビルド方法](https://qiita.com/Kony_Team/items/3e3c52c379583df57c08#2-mobile%E3%81%AE%E3%83%93%E3%83%AB%E3%83%89)

iOS、Androidそれぞれで、
実機またはシミュレーターで確認できるようになりましたでしょうか？

Xcodeでのビルドを行えるようになると、
コンソールに以下のようなログが表示されるようになります。
![スクリーンショット 0004-06-30 12.59.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/49d8821e-f649-945e-7552-9ad20ea09631.png)

ログが見れるようになると、
うまく動かない部分があってもエラー箇所を確認することによって、
スピーディに実装を進めることができるようになります。

次回以降、演習問題に入っていきますので、
今のうちから実機またはシミュレーターでビルドできるようになっておいてくださいね🙆‍♂️

# 次の記事
次回からは早速、演習問題スタートです！
※現在作成中です。しばらくお待ちください。
▶︎[Exercise1 モバイルでクーポン画面を作ってみよう](https://qiita.com/Kony_Team/items/~)

記事一覧：
https://qiita.com/Kony_Team/private/4c922fa016ce95c58406

# 最後に一言
より読みやすい記事にしていきたいので、
「ここがわからなかった！」
「ここがもっと知りたい」
など、コメントいただけると嬉しいです！