新機能のQuantum IQを触ってみた

#目次
1. はじめに
2. 利用方法
3. 機能説明
    4. 一括検索
    5. アクションの実行
    6. デザインのリコメンド
3. まとめ


#はじめに
Version9のアップデートでは、新たにQuantum IQというチャット機能が追加されました。
この機能では、これまでメニューから選択していた機能がチャット形式で、
文字入力するだけでアクションを実行してくれるなど便利な機能が追加されていました。

今回は、そのQuantum IQでできる機能について紹介したいと思います。

#利用方法
Quantum IQを利用するためには、Version9をインストールした方は、
デフォルトで左下にチャットアイコンが表示されていると思うので、
表示されている方はそのまま利用することができます。
↓のアイコン
<img width="292" alt="スクリーンショット 2020-06-07 17.36.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3d58c234-8256-b8b7-57ca-186d42f33d03.png">

左下にチャットアイコンが表示されない方は、以下の手順でQuantum IQを有効にして下さい。
Visualizerをインストールした際のフォルダに移動し、Visualizer -> install_config.js
をテキストエディットで開いてください。
<img width="619" alt="スクリーンショット 2020-06-07 17.37.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3dcb517c-6bc3-9a07-d80c-959a39622191.png">
<img width="603" alt="スクリーンショット 2020-06-07 17.40.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/779018d4-aacc-055d-3a8b-cbfdd108316d.png">

以下のようなテキストが表示されるので、
<img width="629" alt="スクリーンショット 2020-06-07 17.41.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3cf7586e-61da-858e-8bd6-d3fef29e11fb.png">

`enableIQChat`が、exports.enableIQChat!=1 or exports.enableIQChat=nullとなっている場合は、
exports.enableIQChat=trueとしてください。
enableIQChatのキーがない場合は、exports.enableIQChat=trueを追加してください。

変更が完了したら、変更を保存してVisualizeを再起動してください。

Visualizerが開くと、左下にチャットアイコンが表示されているので、
これでQuantum IQが利用できるようになります！


#機能説明
Version9にはQuantum IQというVisualizer上でチャットボットに問い合わせができる機能が追加されました。

チャットを開始するには、左下のチャットアイコンをクリックして、
文字入力をするとチャットを開始することができます。

また、チャットを終了する場合は、チャットのテキスト欄に、「Cancel」と入力するとQuantum IQを終了することができます。

Quantum IQでは、大きく分けて以下のような機能があります。

- 一括検索
- アクションの実行
- デザインのリコメンド
- 翻訳機能

##一括検索
一括検索では、Quantum IQで文字入力すると以下の4つのチャネルでの一括検索ができます。
Basecampで検索できていた内容が、Visualizer上で検索できるようになったイメージです。

- MarketPlaceの検索
- BaseCampの検索
- Youtubeの検索
- Hike Catalogの検索

これまでAPIの検索するときは、
公式ドキュメントのバージョンをチェックして検索を行わなければいけませんでしたが、
Quantum　IQで検索すれば、Version一致しているドキュメントが一発でヒットします。
また、ドキュメントだけでなく、関連しているMarketPlaceでのコンポーネントの検索なども可能です。
Hike Catalogは、Kony Visualizerの学習コンテンツなどを閲覧できるサービスなので、
利用したいWidgetの利用方法などを学習したい場合は、ここから検索することが可能になりました。

（実際の画面）<img width="719" alt="スクリーンショット 2020-05-28 22.28.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/36e17acc-9682-a0cd-7e07-68f8e85b8a10.png">


##アクション実行

アクションの実行では、以下のようなアクションができます。
①プロジェクトのクリーン
②プロジェクトのインポート/エクスポート
③コンポーネントのインポート
④プロジェクトの実行
⑤プロジェクトのビルド

それぞれのアクションでできる機能と、実行方法を説明します。
①プロジェクトのクリーン
クリーンアクションを実行すると、未使用や重複しているSkinを検出して、
削除することができます。

（実際の画面）
<img width="574" alt="スクリーンショット 2020-05-28 22.22.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ed825d90-8258-63e1-d906-8bd6448197d4.png">


Version8以前は、Widgetをコピー&ペーストしたり複製を行うだけで、
Skinがどんどん量産されてしまいアプリの動作が遅くなる原因になってしまっていましたが、
この機能活用すると、使われていないSkinを削除してくれるので、アプリを常に綺麗な状態にキープすることができます。

この機能を利用するには、テキストに以下の文字を入力すると、
クリーンを実行することができます。

- Clean my project
- Sanitize my project
- Project clean up
- Clean unused items

②プロジェクトのインポート/エクスポート（ローカル/クラウド）
以下の文字を入力すると、
localまたはcloudに存在するプロジェクトをインポートorエクスポートすることができます。

<img width="460" alt="スクリーンショット 2020-06-07 18.12.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/04f8429e-5321-5c1a-b1e0-2cba0df7f0f5.png">

Localを選択すると、自分のPCのフォルダが開きます。
Cloudを選択すると、Cloudに保存されているプロジェクトが一覧で表示されますので、
インポートしたいプロジェクトを選択して下さい。

同様にプロジェクトをエクスポートすることができます。

アクションを実行するには、以下の文字を入力すると実行されます。

- Import project from cloud
- Import project from local
- Import project
- Export project

③コンポーネントのインポート（ローカル/クラウド）
プロジェクトのインポートだけでなく、コンポーネントのインポートも実行することができます。
以下の文字を入力すると、ローカル/クラウドに保存されているコンポーネントを選択して、
自分のプロジェクトに取り込むことができます。

- Import local component
- Import component
- Import component from cloud

④プロジェクトの実行
以下の文字を入力すると、プロジェクトを実行することができます。

- Run for iPhone
- Run for Android
- Run for web and Android

例えば、Run for iPhoneを入力すると、
実行する環境を選択する画面が表示されますので、該当の環境を選択して「Continue」をクリックすると、
プロジェクトが実行されます。
<img width="597" alt="スクリーンショット 2020-06-07 18.20.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/688eb03d-b53d-4771-25c9-a725727d53bc.png">

⑤プロジェクトのビルド
ビルドも同様に、`Build for 「デバイス名」`を入力するとアプリのビルドを行うことが出来ます。
- Build project
- Build for Android
- Build for iPhone
- Build for Android tablet
- Build project for iPad
- Build for Android SPA
- Build my project for iPhone SPA
- Build for iPad SPA
- Build project for Android tablet SPA
- Build for Windows tabletBuild project for Windows tablet SPA
- Build for Windows
- Build for Windows SPA
- Build for Desktop Web

##デザインのリコメンド
Quantum IQは、現在のフォームのUIを、現在のプロジェクトまたはQuantum Marketplaceの既存のデザインと比較して、
類似しているデザインをリコメンドすることができます。

既存のデザインをリコメンドしてくれるので、
新たにデザインを設計したりSkinを命名したりする時間を減らすことができるので、
コンポーネントを有効活用し、スピーディな開発を行うことができます。


この機能を利用するには、
Quantum IQでフォームの設計提案を表示するには、少なくとも3つのウィジェットをフォームに追加する必要がありますので、
適当にlabelを2つと、imageを1つフォームに追加すると、
自動的にチャットが開き、デザインのリコメンドを表示するかどうか聞いてきます。

yesをクリックすると、右側に推奨のデザインを表示します。
<img width="470" alt="スクリーンショット 2020-06-07 18.01.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f0d421db-4fe2-7f9c-5084-8f37a9d6d9c1.png">

このリコメンド機能が不要な場合は、この時に「Turn off suggestion」を選択すると
リコメンドは表示されなくなります。
<img width="446" alt="スクリーンショット 2020-06-07 18.36.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/21456ef1-b4ce-8df2-7824-e5a3caad679d.png">

再度この機能を利用したい場合は、
チャット画面を開き、「Import duplicates」を入力すると右側に表示されますので、
必要な時に利用して見てくださいね。

<img width="516" alt="スクリーンショット 2020-06-07 18.01.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6e87a758-7793-35a0-043d-b746eb1adc03.png">
#まとめ
今回はKony Visualizer Ver9の新機能であるQuantum IQについてまとめました。
ドキュメントの検索以外にも、不要なSkinを削除してくれるなど便利な機能が追加されていたので
今後活用していきたいと思いました。

また使っていて便利だと思った機能や、V8から改善された点など随時アップしたいと思います！


#参考
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/Kony_IQ.htm