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

目次

1. はじめに
2. 使い方
3. 機能紹介
4. 最後に

はじめに

2023/9/12にV9 SP5 FP15がリリースされ、いくつか新しい機能が追加されました！
今回はその中から、AIアシスタント機能であるVolt IQの魅力をご紹介していきたいと思います。

Volt IQとは？

まず、Volt IQとは何か簡単に説明します。

Volt IQは、自然言語処理などの最先端テクノロジーを駆使して、
アプリケーション開発を簡素化および加速化するチャットボットです。

具体的には下記のようなことを行うことができます。

• 自然言語による Iris コマンドの実行
• サポートポータル、ハイキング、YouTubeなどから検索を実行
• デザインの提案
• コードの最適化、未使用のリソースのクリーンアップ、パフォーマンス最適化、ベストプラクティスの提案
• アプリケーションの自動翻訳

では、早速Volt IQの使い方とどのように活用できるかご紹介していきましょう！

使い方

Volt IQの機能を使うには、V9 SP5 FP15以上にアップデートする必要があります。
V9 SP5 FP15以下の人は、アップデートを行いましょう。

アップデートの方法はこちらの記事を参考にしてください。

アップデートが完了すると、左下にチャットマークが表示されるようになります。

マークをクリックすると、チャット画面が開くので、
通常のチャットボットのようにテキストボックスに質問したい内容を入力すればすぐに使うことができます！

それでは、実際に使っていきながら機能をご紹介していきます。

機能紹介

デザイン提案

Volt IQでは、デザインのビジュアル、テキスト、およびウィジェットの階層を元に
類似したデザインをリコメンドすることができます。

この機能により、1から作成することなく既存のコンポーネントを再利用して開発を効率化することができます。

デザイン提案の機能は、デフォルトで無効になっています。
メインメニューから、Help->Enable Design Suggestionsをクリックすることで有効にすることができます。

実際に、新しくフォームを作成しWidgetを追加してみましょう！

フォームのデザイン提案を表示するには、
少なくとも3つのウィジェットをフォームに追加する必要があります。

ラベルとテキストボックス、テキストエリアを配置した画面を作成してみると、、
左下に「デザイン提案を表示しますか？」とメッセージが表示されるようになります。

その状態でリコメンドを表示したい場合は、「Yes」をクリックします。
すると左側に提案されたデザインコンポーネントが表示されるようになりました！

提案されたデザインを見てみると、作成したフォームに似た構造のものが提案されていることがわかります。

提案されたコンポーネントの詳細を見たい場合は、
目のマークをクリックすると、Forge画面が開き対象のコンポーネントの詳細が表示されます。

もしそのままコンポーネントを使いたい場合は、
「Import to Collection Library」をクリックするとライブラリに追加されすぐに使うことができるようになります。

Irisのアクションを実行

Volt IQにテキストを入力するだけで、アプリのビルドやコンポーネントのインポートを行うことができます。
試しにテキストを入力してIrisを動かして見ましょう。

入力ボックスに「Run」と入力すると、
プレビューを行いたいデバイスのボタンが表示され、iPhoneをクリックするとLive Previewが実行されました。
ビルドを実行する以外にも、開いているタブを全て閉じたりプロジェクトを保存したり様々なことをテキストで実行することができます。

プロンプトの入力例は公式ドキュメントに記載がありますので、
必要に応じて使ってみてください。

ビルドやプロジェクト保存の場合は、テキスト入力する以外にもショートカットもあります。
ご自身のやりやすい方法で試して見てくださいね。

AI Assisted Development

AI Assisted Developmentは、
AIがプロジェクトをスキャンして、スキン、リソース、ウィジェットなどの未使用の要素を見つけるのを支援します。
AI Assisted Developmentは、リッチテキストのような重いウィジェットを
ラベルのような軽いウィジェットに置き換えることができるかどうかを確認することにより、
パフォーマンスの向上を目的としたプロジェクト分析もサポートします。

AI Assisted Developmentを使用すると、次のことが可能になります。

• プロジェクトのサイズの最適化
• ビルド時間の短縮
• アプリケーションのパフォーマンス向上

AI Assisted Developmentを使うには、
チャットボットに下記のいずれかの文字を入力すればOKです。

sample.txt

・　Run AI Assisted Development
・　Launch AI Assisted Development
・　Launch Cop
・　Open AI Assisted Development
・　Open Cop

また、メインメニューからHelp->AI Assisted Developmentをクリックして開くことも可能です。

プロジェクト分析

では早速使ってみましょう。

実行前は、このようにSkinとComponentにそれぞれ未使用のリソースがある状態になっています。

Skin	Component

AI Assisted Developmentの画面を開き、
未使用のSkinとComponentを削除するルールにチェックをつけて分析を実行してみます。

すると分析結果が開き、使っていないリソースの数、ID、全体の数、分析サマリが表示されます。

ID名は見切れてしまうため、
~/workspace名/project名/reports/outputFile.jsonまたは
~/workspace名/project名/reports/outputFile.htmlを開くと全量を見ることができます。

分析結果を見て、自分でリソースの見直しをしたい場合は、そのままCancelをすると分析を終了します。

分析結果でエラーと表示された箇所を全て修正したい！という場合は、
修正したいルールにチェックをつけて、
Fix Errorsのボタンをクリックすると、未使用のリソースはAIが自動で削除してくれます！

自動修正実行後のGitの差分を見てみると、未使用と表示されていたリソースが削除されていることがわかります。

ひとつひとつ人の手で未使用のリソースを見直すのは骨が折れる作業のため、
AIが分析を行うことで、工数を削減できプロジェクトのパフォーマンスも向上することができます！

SkinやComponent以外にも、
未使用の画像、関数、i18n、テンプレート、StudioActions、空のプレースホルダー、リッチテキストからラベルへの変換、フォントとサイズの一貫性、ハードコードされているデータ等も分析することが可能です。

特にStudioActionsなどは、アクションを一度設定すると自動的にフォルダが作成されてしまうので、
未使用ファイルを自動検知して削除してくれるのはとってもありがたいですね・・・！

それぞれのルール名とルールの詳細は、公式ドキュメントに詳しく記載がありますので、
こちらも参考にしてください！

Widgetでは使用していないが、ContollerにSkinを指定している場合はどうなる？
👉ControllerにのみSkinを指定している場合でも、「使用中」として判別することが可能です！

Controller	分析結果

一点、ControllerでSkinを設定後コメントアウトした場合でも
「使用中」として判別されるため、
不要なコードはコメントアウトするのではなく削除しておく等しておくようにしましょう！

プロジェクト分析の例外追加

AI Assisted Developmentの分析の際、
分析対象から除外したいSkinやWidget, Componentがある場合それらを除外することができます。

ルールを追加する場合は、Project SettingsのAI Assistant Rulesetで設定可能です。

+ボタンをクリックして、除外したいSkin名を入力していきます。
（この時、分析結果のhtmlを開いておいて、コピペをすると楽に入力できます。）

入力したらEnterを押すと、一列に複数のSkinを入力することができます。
登録が完了したら、忘れずDoneを押して設定を保存しましょう！

ルールの保存ができたら再度分析を実行してみます。
除外したSkinは分析結果に表示されず、対象から外すことができました。

設定したルール	分析結果

翻訳機能

AIチャットボットでは、Google 翻訳 APIを使用してプロジェクトをさまざまな言語に翻訳することができます。
i18nが未設定でUI上のみに文字を入力している場合でも、
翻訳機能を実行するとi18nのキーを自動生成し、指定した言語に翻訳・値を登録してくれます。

実際に使ってみましょう。
実行前はこのようにi18nを設定しておらず、Widgetに直接文字を入力していました。

i18nの設定	文字の登録

この状態から、AIチャットボットを使って日本語に翻訳してもらいましょう。

しばらくすると、プロジェクトがリフレッシュされました。
フォームを見てみると、英語から日本語に翻訳されi18nのキーも自動的に指定されています。
またi18nの設定を見てみると、i18nが有効になりキーと日本語と英語のロケールでの文字が自動で登録されていました！

i18nの設定	文字の登録

これまで1からキーと文言を作成していたのが、
翻訳機能を実行することで全て自動で行うことができるためとっても楽ですね！

キーの名前や翻訳の精度などは、人の目でチェックして適宜修正を行えば良いので、
これまでよりもはるかに楽に作業ができるのはないかと思いました

最後に

今回は、新機能のVolt IQを紹介しました！
全て魅力的な機能でしたが、特にAI Assisted Developmentは、
使いこなすことでアプリのパフォーマンスの向上やビルド時間の短縮が可能なので、
是非触ってみてどんどん活用してみてくださいね🔥

参考