Volt MXによるモバイルアプリ開発
はじめの⼀歩 Step 1
Launch your First Mobile App
最初のモバイルアプリの起動

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

このコースの前提条件
Step 0.トライアルアカウントの作成とVolt MX Iris インストールの終了後に、このコースを開始して下さい。

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

2Volt MX Iris
Launch your First Mobile App
最初のモバイルアプリの起動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最初のモバイルアプリの起動"Launch yourFirst Mobile App"を起動

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

6

Launch your First Mobile App

START

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

7

Welcome to Volt MX Iris

Startをクリック

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

8

(1/11) Welcome to Volt MX Iris

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

Welcome to Volt MX Iris
Let’s get started!

Volt MX Irisへようこそ
さぁ、はじめましょう

In this hike, we will:• Import a sample native app that shows lists ofAccounts and Recipients.
• Preview the sample app on a mobile device.

このハイキングでは、次のことを⾏います。
• アカウントと受信者のリストを表⽰する、サンプルのネイティブアプリをインポートします。
• サンプルアプリを、モバイルデバイスでプレビューします。

Before you get started,• Install the Volt MX App on your mobile device fromthe Google Play Store or the App Store.
• Download and extract the sample csv file from here.
Note the location of the extracted file.
When you are ready, click Start!

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

始める前に• Google Play StoreまたはApp Storeから、モバイルデバイスにVolt MXアプリをインストールします。
• サンプルのcsvファイルをここからダウンロードし、解凍します。解凍したファイルの場所をメモしておきます。
準備ができたら、Start︕をクリックします。

9サンプルのCSVファイルをダウンロードして解凍
https://raw.githubusercontent.com/HCL-TECH-SOFTWARE/volt-mx-tutorials/master/public/samples/SampleCSV.zip

解凍して内容を確認

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

10

(2/11) Import the Native App

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

Import the Native App

ネイティブアプリをインポートする

1.

1.

2.
3.
4.
5.
6.
7.

From the main menu of the Iris, navigate toForge > Browse.
The Volt MX Marketplace windows appears
after logging in.
On the search bar, enter Recipients Mobile.
Click the search icon .
In the list that appears, select Recipients
Mobile.
The details of the Recipients Mobile appear.
Click Import to Workspace.
It may take some time for Iris to import theapp.
If you have imported this project before, theoverwrite error dialog may appear, click OK
button to proceed.
Click the Continue button.

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

2.
3.
4.
5.
6.

7.

Iris のメインメニューから、[Forge] >[Browse] に移動します。
ログイン後、Volt MX Marketplace ウィンドウが表⽰されます。
検索バーで、Recipients Mobile と⼊⼒します。
検索アイコン をクリックします。
表⽰されたリストで、Recipients Mobile を選択します。
Recipients Mobile の詳細が表⽰されます。
[Import to Workspace] をクリックします。
Iris がアプリをインポートするのに時間がかかる場合があります。
以前にこのプロジェクトをインポートしたことがある場合、上書きエラーダイアログが表⽰されることがありますが、[OK] ボタンをクリックして次に進みます。
[Continue]ボタンをクリックします。
11メニューから Forge > Browse を選択

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

12テスト⽤アカウントでログイン

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

13

検索バーで Recipients Mobile を検索して選択
Recipients Mobile

Recipients Mobile
アプリを選択Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com14ワークスペースにインポート
Import To Workspaceをクリック

警告が出た場合はContinue

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

15

アプリケーションのインポートが完了

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

16

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

アプリを開く

1.After the app is imported, a Volt MX Iris dialog
appears.
Click OK.

1.

2.From the main menu of the Iris, navigate
to Project > Open > HCL Reference Architecture,and select RecipientsMobile.
The application opens in the Storyboard view.

2.

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

アプリがインポートされると、Volt MX Iris のダイアログが表⽰されるので、OK をクリックします。
Iris のメインメニューから、Project > Open> HCL Reference Architecture と進み、RecipientsMobile を選択すると、アプリがStoryboard ビューで開きます。

17

アプリを開く（既に開かれている場合は次に進む）
Project >Open >HCL Reference Architecture >RecipientsMobile
既に開かれている場合は選択肢に" RecipientsMobile "が表⽰されません。
次に進みます。

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

18

Storyboard ビューが開きます

RecipientsMobileが選択されていることを確認

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

19

(4/11) Explore the App

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

Explore the App

アプリケーションを探索する

Once the application is imported, you can explore thedifferent forms in the application.

アプリケーションをインポートしたら、アプリケーション内のさまざまなフォームを探索することができます。
フォームは、2つの異なるビューで表⽰することができます。StoryboardビューとDesignビューです。

You can view the forms in two different views:
The Storyboard view and the Design view.
The application opens in the Storyboard view. You
can view the different forms inside the app andconnections between forms in the Storyboard view.
To view Properties of each widget in a form, double
click on any form to open the form in the Design View.
You can also select the Design tab to navigate to theDesign View.
Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

アプリケーションは、Storyboardビューで開かれます。
Storyboardビューでは、アプリケーション内のさまざまなフォームやフォーム間の接続を確認できます。
フォーム内の各ウィジェットのプロパティを表⽰するには、任意のフォームをダブルクリックして、そのフォームをDesignビューで開いてください。また、「Design」タブを選択してデザインビューに移動することもできます。
20

Storyboardビュー

アプリケーション内のさまざまなフォームやフォーム間の接続を確認できます
フォームをダブルクリックします

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

21

Designビュー

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

フォーム内の各ウィジェットの設計画⾯が表⽰されます22

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

アプリの探索In the Design View, to view the different forms
inside the app, navigate to the Project explorer,and expand Mobile > Forms.

Designビューで、アプリ内のさまざまなフォームを表⽰するには、プロジェクトエクスプローラに移動し、［Mobile］＞［Forms］を展開します。

You can see six forms inside the app. Click oneach form and see what the canvas displays.

アプリ内に6つのフォームが表⽰されます。各フォー
ムをクリックし、キャンバスに表⽰される内容を確認します。

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

23

フォームの表⽰［Mobile］＞［Forms］を展開
各々のフォームの内容を確認

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

24これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してください(6/11) Add Sample User
Add Sample User

サンプルユーザーの追加

1.From the Data & Services panel on the top right ofyour canvas, expand Project Services.

1.

2.Right-click on UserAuthentication and select Edit.
The Edit Identity Service window appears.
3.Click Import Users. The Import Users window
appears.
4.Click Choose File. The window explorer appears.

2.
3.

5.Navigate to the location of the exportUsers.csv file,select the file and click Open.
6.Click Import.

5.

7.Waiting for imported user successfully notices
appears.
8.Close the Edit Identity Service window.
Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

4.

6.
7.
8.

キャンバスの右上にある［Data & Services］パネルから、［Project Services］を展開します。
"UserAuthentication" を右クリックし、Edit を選択します。[Edit Identity Service（IDサービスの編集）]ウィンドウが表⽰されます。
[Import Users］をクリックします。[ImportUsers］ウィンドウが表⽰されます。
[ファイルを選択] をクリックします。ウィンドウ
エクスプローラが表⽰されます。
最初にダウンロードしたexportUsers.csvファイルの場所に移動して、ファイルを選択し、Openをクリックします。
[開く］をクリックします。
"Users Imported Successfully" が表⽰されます[Edit Identity Service］ウィンドウを閉じます。

25

［Project Services］を展開［Data & Services］パネルから、［Project Services］を展開

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

26

UserAuthentication を右クリックし、Edit を選択

UserAuthentication を右クリックし、Edit を選択

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

27

Edit Identity Serviceウィンドウ[IMPORT USERS]をクリック

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

28

exportUsers.csvを選択[ファイルを選択]をクリックして、exportUsers.csvを選択し、[開く]。
IMPORTをクリックします。

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

29

ユーザーが追加されます

1 Users imported successfully と表⽰され、ユーザーが1⼈追加されます。
パネルを閉じます
Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

30

Foundry アプリケーションのパブリッシュ
Webブラウザで、Volt MX Foundry Console (https://manage.demo-hclvoltmx.com/console/)にアクセスしてログイン①[RecipientsMobile]を選択②[Publish]タブを選択③[Publish]ボタンをクリック④[APP STATUS]が[Published]であることを確認※この⼿順は Hikeにはありませんが、アプリの動作確認でログインエラーを回避するために必要です。
Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

31

※次に進む前に

Volt MXアプリのプレビューについて

Volt MX App Preview can be run in 2 modes:①

Running the application that's been
published on the Cloud
For sharing the app with othersYouʼll need to have the 5-digit code that iscreated when you publish the application②

Running the application locallyconnecting to Iris using Wi-Fi or USB
For testing the application from theirdesktop/laptop

Let see how to publish an Iris preview to thecloud
Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

Volt MX App Previewは、2つのモードで実⾏することができます。
①

クラウド上に公開されたアプリを実⾏する
アプリを他の⼈と共有する場合
アプリケーションを公開した際に作成される5桁のコードが必要です②

Wi-FiまたはUSBでIrisに接続し、ローカルでアプリケーションを実⾏する
デスクトップ／ラップトップからアプリケーションをテストする場合

今回は、Iris プレビューを クラウドに公開する⽅法について⾒てみましょう。
32

これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してください(7/11) 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 モバイルアプリケーションにログインすると、下部のメニューに様々なモードが表⽰され、デフォルトではクラウドモードが選択されています。

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

33

Volt MX モバイルアプリを起動してログイン

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

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

34

(8/11) Publish Live Preview

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

Hikeでは USBケーブルを接続する⽅法を説明していますが、ここではクラウド環境を使います。
Publish Live preview
1. From the main menu, select Build.
Click Publish Live Preview.
2. From the Publish Live Preview Settings
window, check the boxes next to the OS ofthe mobile device on which you are going to
publish the app.
For example, iOS and Android.

ライブプレビューを公開する
1. メインメニューから、［Build］を選択します。
[Publish Live Preview]をクリックします。

3. 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.

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

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

2.

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

35

クラウド環境にアプリをパブリッシュ②[Platform and Channels]
ここでは[MOBILE] の"iOS"と"Android"を選択①[Build] > [Publish Live Preview]
を選択

Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com④
5桁のコードとQRコードが⽣成されます③[Publish]36

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

アプリの起動On your Volt MX App,

あなたのスマホのVolt MXアプリでEnter the 5 Digit App View Code and

5桁のアプリビューコードを⼊⼒しLAUNCHLAUNCH

orScan the QR code using ʻSCAN QR CODEʼbutton to preview the application.

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

または'SCAN QR CODE'ボタンでQRコードを読み取り、アプリケーションをプレビューします。

37サンプルアプリケーションの起動

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

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

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

アプリを試してみる

You will now be able to view the app on
your mobile device.
1.Enter the following login credentials in your app:• Username: john.doe@woodburn.com• Password: VoltMX@123
2.Click Login.
The Accounts List appears.
3.Click Recipients.
The Recipient list appears.

ここまでの⼿順により、モバイルデバイスでアプリを表⽰できるようになります。

In the Recipients list page, you can do the following:• Click Add (+), to add a recipient to your account.
• Select a recipient from the list to view their details.
• From the details page, you can edit or delete therecipient.
To exit the mobile app, swipe two fingers from left toright or shake your mobile device and click Exit App.
Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

1.

アプリに以下のログイン情報を⼊⼒してください。
••

ユーザー名: john.doe@woodburn.com
パスワード: VoltMX@123

2.

[Login] をクリックします。
"ACCOUNTS"が表⽰されます。

3.

[Recipients］をクリックします。
"Recipients List"が表⽰されます。

"Recipients List"ページでは、以下の操作が可能です。
•追加(+)をクリックして、受信者をアカウントに追加•

リストから受信者を選択し、その詳細を表⽰• 詳細ページで、受信者の編集や削除。
モバイルアプリを終了するには、2本指を左から右にスワイプするか、モバイル端末を振って、「Exit App」をクリックします。
39

アプリを試してみる①
ユーザー名: john.doe@woodburn.com
パスワード: VoltMX@123②
紺⾊のバーをドラッグして移動

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

40

(11/11) Congratulations
Congratulations

おめでとうございます︕

You have successfully:

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

• Imported a mobile app• Launched the app on a mobile device using the Volt
MX App••To learn how to create this app on your own, checkout the next hike:

このアプリを⾃分で作成する⽅法については、次のハイクを参照してください︓

2. Create UI from Collections

2.コレクションからUIを作成する

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

モバイルアプリのインポート
Volt MXアプリを使⽤して、モバイルデバイス上でアプリを起動。

41Wi-FiまたはUSBでIrisに接続し、ローカルでアプリを実⾏する場合
⼿順の (7/11) 〜 (9/11) が異なります。

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

42

(7ʼ/11) Volt MX App（ローカルの場合）
Volt MX App
1.Connect your mobile device to your computer usinga USB cable.
For Android mobile devices, ensure that the user of
USB is set as Transfer files.
For iOS mobile devices, ensure that trust has been
established between your device and yourcomputer.
2.Launch the Volt MX App on your mobile device.
3.Select the USB tab.
On a successful connection, Volt MX Iris on yourcomputer shows a success prompt.
4.From the main menu, select Build.
5.Click Live Preview Settings.
Copyright © 2022 HCL Technologies Limited | www.hcltechsw.com

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

Volt MXアプリ
1. モバイル端末をUSBケーブルでパソコンに接続します。
Android端末の場合、USBの使⽤者がファイル転送に設定されていることを確認します。
iOSモバイルデバイスの場合は、デバイスとコンピュータの信頼関係が確⽴されていることを確認します。（WindowsはiTunesが必要です）
2. モバイルデバイスでVolt MXアプリを起動します。
3. USBタブを選択します。
接続に成功すると、コンピュータ上のVolt MXIrisは成功のプロンプトを表⽰します。
4. メインメニューから、[Build]を選択します。
5. [Live Preview Setting]をクリックします。

43

Windows に iOSを USB接続する場合 iTunesが必要です
重要︓WindowsマシンでのiOSデバイスのUSBテザリング︓
前提条件 - Windowsマシンに最新バージョンのiTunesがインストールされていることを確認してください。Volt MXアプリのUSB機能を使ってiOSデバイスでテストを開始する前に、WindowsマシンのiTunesを開いてください。
Important: USB Tethering for iOS devices on Windows Machine:
Prerequisites - Ensure that the latest version of iTunes is installed on the Windowsmachine. Before you start viewing the app on your iOS device by using the USBfeature on the Volt MX App, open iTunes on your Windows machine.

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

44ローカルでのVolt MXアプリのテスト[Build] > [Live Preview Settings]

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

45

(8ʼ/11) Run the App（ローカルの場合）
Run the App

アプリを実⾏する

1.From the Live Preview Settings window,
under Native, check the boxes next to the OSof the mobile device on which you are goingto view the app.
For example, iOS and Android.
Ensure that you have unselected thecheckboxes for all the other platforms andchannels.
2.Click Save & Run.
It may take some time for Iris to run the app.
The Live Preview is ready window appears

1.

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

2.

これはチュートリアルの翻訳です
作業⼿順は次⾴を参照してください[Live Preview Settings]ウィンドウから、「Native」の下にある、アプリを表⽰するモバイルデバイスのOSの横にあるボックスにチェックを⼊れます。
例えば、iOSやAndroidなどです。
他のすべてのプラットフォームとチャネルのチェックボックスの選択が解除されていることを確認します。
[Save & Run］をクリックします。
Iris がアプリを実⾏するまでに時間がかかる場合があります。
Live Preview is ready（ライブ プレビューの準備ができました）ウィンドウが表⽰されます。

46

Live Preview Settings[Platform and Channels]
ここでは [MOBILE] の"iOS“ と“ Android"を選択してSave & Run をクリック。
ビルドに多少時間がかかります。

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

47

USB接続 もしくは Wi-Fi 経由で接続可能に

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

48

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

アプリの起動On your Volt MX App, click Launch.
You may see an Application Name input box.
If there is an input box,
enter RecipientsMobile and then click Launch.

Volt MX アプリ で、[Launch] をクリックします。

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

アプリケーション名の⼊⼒ボックスが表⽰される場
合があります。
⼊⼒ボックスがある場合は、「RecipientsMobile」と⼊⼒し、[Launch]をクリックします。

49

USB接続によるアプリの起動[Launch]をタップ

ユーザー名: john.doe@woodburn.com
パスワード: VoltMX@123[USB]タブ

USB接続できていない
場合はこの表⽰です

アプリが起動ガイドを閉じる
アプリ名⼊⼒を求められた場合は[RecipientsMobile]を⼊⼒して[LAUNCH]をタップ

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

50

Wi-Fi 接続の場合
Irisに表⽰された
IP アドレスとポートを⼊⼒[RecipientsMobile]と⼊⼒して[CONNECT]

Wi-fi 接続できない
場合はこの表⽰です[Wi-fi]タブ

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

ポートの開放状況などを確認して下さい

51

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