Visualizer機能 "Hikes"と"Quantum IQ"の基本的な使い方

# 目次 
1. はじめに
1. Hikes
1. Quantum IQ
1. まとめ

# 1.はじめに
Quantum Visualizer（以下「Visualizer」と呼称）ではじめて開発していくとなると分からない所が多く、スムーズに開発に着手することが出来ないと思います。
例えば、アプリのUIデザインやロジックはどこで組むのか、または、何とかアプリは作成できたけどiOSやandroidのデバイスでテストするにはどうすればいいのかなど、、、
そこで今回は、Visualizerで開発をスムーズに進めるのに役立つ、次の便利な機能２つを紹介したいと思います。
- Hikes
- Quantum IQ

# 2.Hikes

## a.概要  
- Hikesは、Visualizerを使用してアプリケーション開発する方法のいくつかの概念を学習するために使用できる学習コンテンツです。対話形式で段階的に学習を進めることが出来るので、Visualizerを使う上での基本を理解するのに役立ちます。
- 一般的なチュートリアルに似ており、初心者でも簡単に利用できます。

## b.アクセス方法  
- Visualizerの左側のナビゲーションパネルからHikesにアクセスすることができます。Hikesはガイドツアーがカタログとしてまとめられており、順番に学習パスを辿ることで使い方を理解できます。指定された順序で学習を進める必要があります。

### 手順
b-1. 左側のナビゲーションパネルにある「山」アイコンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/01ae2f29-9ebc-c069-f4a3-91d72bd02ba6.png)
b-2. Hikes画面が開き、ガイドツアーのカタログを見ることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5d518c31-860d-3c4c-de3f-222fb44ac6a9.png)

## c.ガイドツアーをはじめよう
- どのガイドツアー（※以下「ツアー」と呼称）からでも開始できますが、開発者のアドバイスに従い、カタログ内で既に作成されている順序に従ってはじめることをおすすめします。

### 手順
c-1. はじめたいツアーを選択してください。（例では"Create UI from Collections"を選択しています。）
※ツアーはカテゴリ毎に分類されており、簡単にフィルタリングが可能です。また検索機能を使って指定のツアーを見つけることもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5917cc09-2858-07b1-40b9-c8593edfbdc4.png)
c-2. ツアー選択後、当該ツアーの詳細情報画面が表示されます。
※ツアーを開始するには、画面右下にある"START"ボタンを押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2778c598-8077-5ddd-4bda-4ae5f6197219.png)
c-3. ポップアップ画面の指示通りにツアーを進めます。ステップ数が同数になりましたら、そのツアーは終了となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2bea6724-3c73-9a91-4fcd-316dddacc775.png)
※途中でツアーを終了したい場合は、画面右上の×ボタンを押して終了してください。終了時点から再開できません。最初から再度開始する必要がありますので、その点には注意してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/773bc1d3-e302-1c28-6263-61bc54b2acf8.png)

# 3.Quantum IQ

## a.概要
- Quantum IQは、VisualizerユーザーがKonyAppPlatformで多種多様なチャネル用のアプリケーション開発を支援するように設計されたチャットボットです。バイナリ構築、プロジェクトのインポート、QuantumBaseCamp上にある参考資料検索など、様々な形でユーザーを助けてくれます。
- ユーザーと対話しFAQに対して回答を提供してくれます。例えば"how to upgrade Visualizer(Visualizerをアップグレードする方法は？)"や"what is my Visualizer version(私のVisualizerバージョンは何？)"といった簡単な質問に答えてくれます。
- 上記の他にも、最適化、翻訳および多くの時間を要するタスクを容易に完了させるのにも役立ちます。その理由として、高度なAIアルゴリズムを使用し、ユーザーのアプリケーション構築におけるエクスペリエンスを向上させる最適な推奨事項も提供します。

## b.アクセス方法

### 手順
b-1. 左側のナビゲーションパネルの一番下にある「吹き出し」アイコンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/89da533b-c05a-90d6-a9aa-cb543011ac9c.png)
b-2. 次のようなチャット画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3bd01705-db94-5e26-b886-f5e929d59622.png)
※以下のアイコンを押すと、Visualizerとは別画面として切り離すことが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/fa166ffd-a56d-5aa6-2b4a-5727fae97892.png)
b-3. チャットボックスに問合せしたい内容を入力します。少しすると、Quantum IQから適切な回答が返ってきます。
問合せ内容の種類に基づき、様々な方法で回答してくれます。
回答の種類は次の通りです。
- チャット（文章）で回答します。
- Visualizerのアクションを実行します。
- 詳細情報を求めます。この場合、問合せ内容に適切に回答するために多くの情報を求めていることを示しています。
※会話を続けたくない場合は、チャットボックスに"cancel"を入力することで会話をやめることができます。

## c.機能と特徴
### デザイン提案： 
Quantum IQのデザイン提案機能は、アプリケーション開発の迅速化に役立ちます。UIを予測し関連するデザインを提案します。この予測は既存コンポーネントやデザインを再利用するため、最初から作成するというコストを減らすことができます。

Quantum IQに以下のコマンドを入力することで、提案機能を有効化できます。
` enable design suggestions `
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4d715840-c791-0593-c9bf-04a73588ce17.png)

次のように使用しているform名とwidgetに従ってデザインを提案します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ae56509d-45b6-39aa-d21e-a61579f1f243.png)

ポップアップが表示され、デザイン提案機能を「オフ」「一時停止」にするオプションもあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a9750aa9-8763-3e87-9e98-2e2da2920b7c.png)

### 汎用的な検索： 
汎用検索機能は、Temenos Forge 、Base Camp、YouTubeから検索した結果の有無に応じたデータを取得するのに役立ちます。
以下は、一般的な検索問合せです。
- セグメント
- DBXとは何ですか？
- FFIを統合するには？

**＋ TemenosForge検索**
Temenos Forgeの検索機能は、Quantum IQに統合されています。このボットを使って、Temenos Forgeからコンポーネントを検索し、それらのコンポーネントをVisualizerプロジェクトにインポートすることができます。

Temenos Forgeから結果を取得するには、@marketplace <Temenos Forgeで検索するテキストクエリ>と入力してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7d3a4441-a9ff-3f1b-c0c2-7e95f0a78255.png)

**＋ QuantumBaseCamp検索**
Quantum Base Campの検索機能は、Quantum IQと統合されています。このボットを使って、Base Camp内の記事やドキュメントを検索することができます。ボットは、問合せに関連する記事のリストを表示します。

Quantum Base Campから限定的に結果を取得するには、@basecamp <ベースキャンプで検索するテキストクエリ>と入力してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/eff42c8f-4b7a-9356-7fe7-b27664f3d9a5.png)

**＋ YouTube検索**
Quantum YouTubeチャンネル内の検索は、Quantum IQと統合されています。ボットを使用すると、Quantum YouTubeチャンネル上の任意のビデオを検索することができます。

YouTubeから限定的に結果を取得するには、@youtube <YouTubeで検索するテキストクエリ>と入力してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/01c88d3b-d021-5b28-2939-688a9f3135ac.png)

**＋ Hikes検索**
Quantum IQを使用すると、Hikesカタログに掲載されているあらゆるHikesを検索することができます。Quantum IQのチャットウィンドウに問合せを入力すると、「HIKES」タブの下に関連するHikesのリストが表示されます。

各結果には、名前、ステップ数、PLAY HIKEボタンなど、Hikesの基本情報が表示されます。PLAY HIKE をクリックすると、Quantum Visualizer でそのHikesを開くことができます。

Hikesカタログから結果を取得するには、@Hikes <Hike Catalog で検索するテキスト・クエリ> と入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9f3ea448-9ca7-c386-882c-a61abc4ea228.png)

**＋ 翻訳**
Quantum IQは、Google翻訳APIを利用して、アプリケーションを各言語への翻訳する支援をします。翻訳中、アプリケーション内のテキストは、ターゲット言語の同等の国際化キーに変換されます。プロパティパネルやコードで設定されたWidgetのプロパティは翻訳されます。

デフォルトlocalは、ランタイムにアプリを起動したときに表示される言語です。アプリのデフォルトlocalは、Visualizer のプロジェクト設定から設定・変更することができます。デフォルトlocalがまだ設定されていない場合、Quantum IQ はデフォルトlocalをアプリで翻訳したい言語に更新します。

翻訳は2つの方法で行うことができます。
- ターゲット言語を指定する：問合せで直接ターゲット言語を指定することができます。
- ボットは、言語をプロンプト表示する：ターゲット言語を指定せずに、プロジェクトを翻訳するための問合せを入力することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6e651fe8-5d27-7fe1-6c0b-ff639f8b7908.png)

### Visualizerアクション種類：
Quantum IQ は、ボット内のコマンドを使用して Visualizer 上の小さなアクションをトリガーすることができ、時間の節約に役立ちます。
サポートされているVisualizerのアクション一覧はこちらになります。
（※アクションの一部を記載しております。）
•	Project Clean Up
•	Import and Export Project (Local/ Cloud)
•	Import Component (Local/ Cloud)
•	Run Project
•	Build Project
•	Test Project
•	Analyze Project

# 4.まとめ  
今回はVisualizer機能の"Hikes"と"Quantum IQ"を紹介しました。
実際の開発現場でもよく使われており、Hikesはエントリー者に向けてVisualizerでの開発手順の学習コンテンツとして、また、Quantum IQは開発する時にUIコンポーネント作成のヒントをもらったりなどで利用しています。
皆さんも積極的に利用してみてください。