Volt MXによるモバイルアプリ開発
はじめの⼀歩 Step 2
Create UI from Collections
コレクションからのUI作成

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

このコースの前提条件
Step 1. Launch your First Mobile App（最初のモバイルアプリの起動）の終了後に、このコースを開始して下さい。

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

2Volt MX Iris
Create UI from Collections
コレクションからのUI作成

Volt MX Irisを起動し、テストアカウントでログイン

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

4

Learn More を選択して、Hike（チュートリアル）を起動
環境により起動直後の画⾯が異なる場合があります。いずれかの⽅法でHikeを起動します。

Learn More をクリック

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

左側メニューの⼀番下のアイコンをクリック

5コレクションからのUI作成

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

6Create UI from Collections

STARTCopyright © 2022 HCL Technologies Limited | www.hcltechsw.com

7

(1/19) Build your First Mobile App

これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してくださいLetʼs get started!

さぁ、はじめましょう

In this hike, we will:

このハイキングでは、次のことを⾏います。

••

Create forms with UI elements for userinteraction.
Add navigation to access the different forms
in this app.

Before you get started, complete the hike:
1. Launch your First Mobile AppWhen you are ready, click Start!

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com••

ユーザーとのインタラクションを実現するためのUI要素を含むフォームを作成する。
このアプリのさまざまなフォームにアクセスするためのナビゲーションを追加します。

始める前に、以下のハイクを完了させてください。
1. 最初のモバイルアプリを起動する準備ができたら、「Start」をクリックします。

8

Build your First Mobile AppStartをクリック

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

9

(2/19) Create a New Project

これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してください

Create a New Project

新規プロジェクトの作成

1.

1. メインメニューから、 Project > New Projectを選択します。
2. What do you want to start with now? ウィンド

2.
3.
4.
5.

From the main menu, navigate to Project >New Project.
From the What do you want to start withnow? window, select Native App.
Click Next.
The You started with a Native Appwindow appears.
Under Project Name, enter
RecipientsMobApp.
Click Create.
A new application is created with Form1
form.
The application opens in the Storyboard
view.
Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

ウから、Native App を選択します。
3. [Next］をクリックします。
[You started with a Native App］ウィンドウが表⽰されます。
4. プロジェクト名に、［RecipientsMobApp］と⼊⼒します。
5. [Create］をクリックします。
フォーム[Form1]で新しいアプリケーションが作成されます。
アプリケーションがストーリーボードビューに表⽰されます。

10

メニューから Project > New Project を選択

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

11Native Appを選択

NEXT

Native Appを選択

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

12

RecipientsMobApp と⼊⼒して Create

Createをクリック“RecipientsMobApp”と⼊⼒

既に”RecipientsMobile” という名前のアプリをインポートしているため、別の名前で新規プロジェクトを作成します
Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

13

Storyboardビューに Form1 が表⽰されます

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

14

(3/19) Rename the Form

これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してください

Rename the Form

フォームの名前を変更する

1.

1. ストーリーボードビューで、新しいフォームの上にある「Form1」をクリックします。
2. フォームの名前を Form1 から frmLogin に変更します。
3. Enterキーを押します。

2.
3.

In the Storyboard view, above the newform, click Form1.
Rename the form from Form1 to frmLogin.
Press on Enter key.

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

15Form1をクリック

Form1をクリック

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

16

frmLoginに変更

frmLoginに変更

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

17

(4/19) UI for Login Form

これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してください

UI for Login Form

ログインフォームのUI

1.

1. Iris キャンバスの左側から、Default Library に移動します。
2. 検索アイコンをクリックします。
3. 表⽰された検索バーで、UserLogin と⼊⼒します。
4. 結果、RecipientsMobile の下に、UserLoginが表⽰されます。
5. UserLogin コレクションをキャンバス上のfrmLogin フォームにドラッグします。

2.
3.
4.
5.

From the left of the Iris canvas, navigate tothe Default Library.
Click the search icon.
In the search bar that appears, enter
UserLogin.
From the results, under RecipientsMobile,find UserLogin.
Drag the UserLogin collection onto thefrmLogin form on the canvas.

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

18

Default Libraryを確認

Default Library

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

19

Default Libraryの検索バーで UserLogin を検索①
検索アイコンをクリック②
検索バーに “UserLogin”と⼊⼒③
検索結果に”RecipientsMobile”の下に“UserLogin”が表⽰

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

20

frmLoginにドラッグ“UserLogin” をキャンバス上のfrmLogin フォームにドラッグ

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

21

(5/19) Create an Account Form

これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してください

Create an Account Formアカウントフォームの作成

1.

1. Storyboardビューから frmLogin を選択し、[+] アイコンをクリックします。
Iris が新しいフォームを作成します。
2. 新しいフォームの上で、Form1 をクリックします。
3. Form1 を frmAccount に名前を変更します。
4. Enterキーを押します。

2.
3.
4.

From the Storyboard view, selectfrmLogin, and then click the + icon.
Iris creates a new form.
Above the new form, click Form1.
Rename form from Form1 to frmAccount.
Press on Enter key.

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

22

+ アイコンをクリックしてフォームを追加+ アイコンをクリック

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

23

作成されたフォームを frmAccount に名前を変更“frmAccount” に変更してEnterキー

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

24

(6/19) UI for Account Form

これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してください

UI for Account FormアカウントフォームのUI

1.

1. Iris キャンバスの左側から、「DefaultLibrary」に移動します。
2. 表⽰された検索バーに、AccountList と⼊⼒します。
3. 結果から、RecipientsMobile の下にAccountList を⾒つけます。
4. AccountList コレクションをキャンバスのfrmAccount フォーム上にドラッグします。

2.
3.
4.

From the left of the Iris canvas, navigate tothe Default Library.
In the search bar that appears, enter
AccountList.
From the results, under RecipientsMobile,find AccountList.
Drag the AccountList collection onto thefrmAccount form on the canvas.

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

25

Default Libraryの検索バーで AccountList を検索①
検索アイコンをクリック②
検索バーに “AccountList”と⼊⼒③
検索結果に”RecipientsMobile”の下に“AccountList”が表⽰

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

26

frmAccountにドラッグ“AccountList” をキャンバス上のfrmAccount フォームにドラッグ

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

27

(7/19) Create Recipients Form

これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してください

Create Recipients Form

受信者フォームの作成

1.

1. ストーリーボードビューから、frmAccountを選択し、+アイコンをクリックします。
Iris は、新しいフォームを作成します。
2. 新しいフォームの上で、Form1 をクリックします。
3. フォーム名をForm1からfrmRecipientsに変更します。
4. Enter キーを押します。

2.
3.
4.

From the Storyboard view, selectfrmAccount, and then click the + icon.
Iris creates a new form.
Above the new form, click Form1.
Rename form from Form1 to
frmRecipients.
Press on Enter key.

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

28

+ アイコンをクリックしてフォームを追加

frmAccountで+ アイコンをクリック

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

29

作成されたフォームを frmRecipients に名前を変更“frmRecipients” に変更
して Enterキー

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

30

(8/19) UI for Recipients Form

これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してください

UI for Recipients Form

受信者フォームの UI

1.

1. Iris キャンバスの左側から、「DefaultLibrary」に移動します。
2. 表⽰された検索バーに、「RecipientList」と⼊⼒します。
3. 表⽰された結果から、RecipientsMobile の下にある RecipientList を⾒つけます。
4. RecipientsList コレクションをキャンバス上のfrmRecipients フォームにドラッグします。
5. Iris キャンバスの上部から、［Design］タブを選択して、アプリケーションをDesignビューで開きます。

2.
3.
4.
5.

From the left of the Iris canvas, navigate tothe Default Library.
In the search bar that appears, enter
RecipientList.
From the results, under RecipientsMobile,find RecipientList.
Drag the RecipientsList collection onto thefrmRecipients form on the canvas.
From the top of the Iris canvas, select theDesign tab to open the application in theDesign view.

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

31

Default Libraryの検索バーで RecipientList を検索①
検索アイコンをクリック②
検索バーに “RecipientList”と⼊⼒③
検索結果に”RecipientsMobile”の下に“RecipientList”が表⽰

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

32

frmRecipientsにドラッグ“RecipientList” をキャンバス上のfrmRecipients フォームにドラッグ

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

33

警告が出た場合はそのまま Close します

既に存在するリソース名と重複があると警告が表⽰されます。
Closeします。

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

34

Designタブを表⽰

Designタブを選択

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

35

これはチュートリアルの翻訳です(9/19) Navigation from Login Form 作業⼿順は次⾴を参照してくださいNavigation from Login Form

ログインフォームからのナビゲーション

1.

1. プロジェクトエクスプローラから、Mobile >Forms > frmLogin > flexUserLoginに移動
し、btnSigninを選択します。
2. [Properties]パネルから、[Action]タブに移動します。
3. Generalセクションで、onClickイベントのEditをクリックします。
[Action Editor]ウィンドウが表⽰されます。

2.
3.

From the Project explorer, navigate to
Mobile > Forms> frmLogin>flexUserLogin and select btnSignin.
From the Properties panel, navigate to theAction tab.
Under the General section, for the onClick
event, click Edit.
The Action Editor window appears.

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

36

Mobile > Forms > frmLogin > flexUserLoginに移動し、btnSigninを選択

Mobile >Forms >frmLogin >flexUserLoginに移動し、btnSigninを選択

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

37

ログインボタンのプロパティを表⽰[Properties]パネルから、[Action]タブに移動

Generalセクションで、onClickイベントのEditをクリック

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

38

onClickイベントの Action Editorが表⽰されます

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

39

(10/19) Add Navigationfrom the Login screen

これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してくださいAdd Navigation from the Login screen

ログイン画⾯からのナビゲーションを追加する

1.

1. Action Editorの左メニューから、［General］セクションの［Navigate to Form］を選択します。
2. Action Editorの右ペインから、[frmAccount]を選択します。
3. [Save］をクリックします。

2.
3.

From the Action Editor left menu, under
the General section, select Navigate toForm.
From the right pane of the Action Editor,select frmAccount.
Click Save.

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

40

[Navigate to Form]をクリック[Navigate to Form]をクリック

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

41

ナビゲーション先として frmAccount を選択[Navigate to Form]を選択した状態で“frmAccount” を選択[Save]

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

42

(11/19) Add Navigationfrom Accounts Form

これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してください

Add Navigation from Accounts Formアカウントフォームからのナビゲーションを追加

1.

1. Projectエクスプローラから、Mobile > Forms> frmAccount > flexAccountList >flexFooterを展開し、flxRecipientを選択します。
2. [Properties]パネルから、[Action]タブに移動します。
3. Generalセクションで、onClickイベントのEditをクリックします。
[Action Editor]ウィンドウが表⽰されます。

2.
3.

From the Project explorer, expand toMobile > Forms > frmAccount >flexAccountList > flexFooter and selectflxRecipient
From the Properties panel, navigate to theAction tab.
For the onClick event, click Edit.
The Action Editor window appears.

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

43

Mobile > Forms > frmAccount > flexAccountList >flexFooterを展開し、flxRecipientを選択

Mobile >Forms >
frmAccount >flexAccountList >flexFooterを展開し、flxRecipientを選択

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

44flxRecipient のプロパティを表⽰[Properties]パネルから、[Action]タブに移動

Generalセクションで、onClickイベントのEditをクリック

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

45

onClickイベントの Action Editorが表⽰されます

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

46

(12/19) Add Navigationfrom Accounts Form

これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してください

Add Navigation from Accounts Formアカウントフォームからのナビゲーションを追加

1.

1. Action Editorの左メニューから、［General］セクションの［Navigate to Form］を選択します。
2. Action Editorの右ペインから、[frmRecipients]を選択します。
3. [Save］をクリックします。

2.
3.

From the Action Editor left menu, under
the General section, select Navigate toForm.
In the right pane of the Action Editor,select frmRecipients.
Click Save.

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

47

[Navigate to Form]をクリック[Navigate to Form]をクリック

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

48

ナビゲーション先として frmRecipients を選択[Navigate to Form]を選択した状態で“frmRecipients” を選択[Save]

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

49

(13/19) Add Navigationfrom Recipients Form

これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してください

Add Navigation from Recipients Form

受信者フォームからナビゲーションを追加

1.

1. Projectエクスプローラから、Mobile > Forms> frmRecipients に展開します。
2. flexRecipientList > flexFooterまで展開し、flxAccountsを選択します。
3. [Properties]パネルから、[Action]タブに移動します。
4. onClickイベントのEditをクリックします。
[Action Editor]ウィンドウが表⽰されます。

2.
3.
4.

From the Project explorer, expand to
Mobile > Forms > frmRecipients.
Expand to flexRecipientList > flexFooterand select flxAccounts.
From the Properties panel, navigate to theAction tab.
For the onClick event, click Edit.
The Action Editor window appears.

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

50

Mobile > Forms > frmRecipients >flexRecipientList > flexFooter > flxAccountsを選択

Mobile >Forms >
frmRecipients >flexRecipientList >flexFooterを展開し、flxAccountsを選択

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

51

flxAccounts のプロパティを表⽰[Properties]パネルから、[Action]タブに移動

Generalセクションで、
onClickイベントのEditをクリック

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

52

onClickイベントの Action Editorが表⽰されます

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

53

(14/19) Add Navigationfrom Recipients Form

これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してください

Add Navigation from Recipients Form

受信者フォームからのナビゲーションを追加

1.

1. Action Editorの左メニューから、［General］セクションの［Navigate to Form］を選択します。
2. Action Editorの右ペインから、[frmAccount]を選択します。
3. [Save］をクリックします。

2.
3.

From the Action Editor left menu, under
the General section, select Navigate toForm.
In the right pane of the Action Editor,select frmAccount.
Click Save.

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

54

[Navigate to Form]をクリック[Navigate to Form]をクリック

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

55

ナビゲーション先として frmAccount を選択[Navigate to Form]を選択した状態で“frmAccount” を選択[Save]

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

56

(15/19) Volt MX App
Volt MX App

Volt MX App

After logging in to the application, we can see
the various modes available as the menu items
at the bottom and by default cloud mode isselected.

Volt MX モバイルアプリケーションにログインすると、下部のメニューに様々なモードが表⽰され、デフォルトではクラウドモードが選択されています。

デフォルトではCloud モードが選択されています

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

57

(16/19) Publish Live Preview
Hikeでは USBケーブルを接続する⽅法を説明していますが、ここではクラウド環境を使います。
Publish Live preview

ライブプレビューを公開する

1. From the main menu, select Build.

1. メインメニューから、［Build］を選択します。
2. [Publish Live Preview]をクリックします。

2. Click Publish Live Preview.

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

58

これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してください(17/19) Publish the App
Publish the App

アプリの公開1. From the Publish Live Preview Settings
window, check the boxes next to the OS ofthe mobile device on which you are going topublish the app.
For example, iOS and Android.

1.

2. Click Publish.
It may take some time for Iris to publish theapp.
The Live Preview is ready window appears.
Iris gives you a 5-digit code.

2. Publish をクリックします。
Iris がアプリを公開するのに時間がかかる場合があります。
Live Preview is ready ウィンドウが表⽰され、Iris から 5 桁のコードが表⽰されます。

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com[Publish Live Preview Settings]ウィンドウで、アプリを公開するモバイルデバイスの OSの横にあるチェックボックスをオンにします。
たとえば iOSとAndroidなどです。

59

アプリの公開[Platform and Channels]
ここでは[MOBILE] の"iOS"と"Android"を選択

5桁のコードとQRコードが⽣成されます[Publish]

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

60

これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してください(18/19) Launch the App
Launch the App

アプリの起動

1. On your Volt MX App,Enter the 5 Digit App View Code andLAUNCH
2. Click the Login button on the form to view
the Accounts list.
You do not need login credentials for this app.
You will be adding authentication to the app
in the next hike.

1. モバイルデバイスのVolt MXアプリで5桁のアプリビューコードを⼊⼒し LAUNCH

3. Click Recipients.
The Recipients list appears.
4. To exit the app on your mobile device, swipe
two fingers from left to right or shake yourmobile device and click Exit App.
Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

2.

フォームのログインボタンをクリックすると、Accountsリストが表⽰されます。
このアプリには、ログイン認証は必要ありません。次のステップでアプリに認証を追加します。

3.

[Recipients]をクリックします。
[Recipients]リストが表⽰されます。
4. モバイルデバイスでアプリを終了するには、2本の指を左から右にスワイプするか、モバイルデバイスを振って［Exit App］をクリックします。

61

アプリケーションの起動

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com①
5桁のコードを⼊⼒

アプリの終了⽅法のガイドが表⽰されます②[LAUNCH]③[X] をタップ62

アプリケーションの動作確認②
Accoutns リストが表⽰されます。

①
Login をタップ

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com⑤
Recipients リストが表⽰されます。

④
Recipientsをタップ③
紺⾊のバーをドラッグして移動

63

(19/19) Congratulations
Congratulations

おめでとうございます︕

You have successfully:

あなたは以下のことに成功しました。

•••

Created forms with UI elements for userinteraction
Added navigation between the forms•

Launched your app on a mobile device
using the Volt MX App••

ユーザーとのインタラクションを実現するためのUI要素を備えたフォームを作成
フォーム間のナビゲーションを追加
Volt MX App を使⽤してモバイルデバイスでアプリを起動する。

To learn how to add login and logout operations
for this app, check out the next hike:

このアプリにログインとログアウトの操作を追加する⽅法については、次のハイクを参照してください。

3. Add Authentication to the App.

3. アプリに認証を追加する。

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

64

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com