Kony Visualizer Version9アップデート情報（開発画面）

#目次
1. はじめに
2. アップデート内容
    3. StoryBoardの追加
    4. アクションエディタの変更
3. まとめ


#はじめに
4月にQuantum VisualizerのVersion9がリリースとなり、大幅なアップデートを行いました。
アップデートした内容について、今回は開発画面についてVersion8以前との変更点をご紹介します。

#アップデート内容
今回のVersion9で、よりノンコーディングでアプリ開発ができるよう
視覚的に開発できるツールが増えている印象でした。
この記事では、2つの主なアップデートの内容についてご紹介します:thumbsup_tone1:

###StoryBoardの追加

Version9では、StoryBoardというタブが追加され、
各Formがどのような関係になっているか一目で確認することができます。

[Version8以前のKony Visualizer]
これまでは、左メニューに各フォームの一覧が、
右メニューにアクションやスキンの指定が可能なメニューが表示されていました。
また真ん中のメニューには、アプリのイメージが表示され、左メニューからWidgetを選んで配置したりすることができるようになっていました。
<img width="1677" alt="スクリーンショット 2020-06-02 22.49.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/43a22bd7-70dc-6462-b9e8-09ffd60fdfec.png">

[Version9のKony Visualizer]
Version9では、上記の画面に加えて、新たにStoryBoardタブが追加されました。
これまでの画面はDesignタブに表示され、それぞれ上部のタブで切り替えすることができます。

・Designタブ
Designタブでは、これまで通りに各フォームの一覧と画面のイメージを確認することができます。
<img width="1246" alt="スクリーンショット 2020-05-28 21.48.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f68bf977-b766-e388-24d1-6ed28dc81084.png">

・StoryBoardタブ
StoryBoardでは、作成したフォームの画面遷移を全体を俯瞰して見ることができます。
<img width="1298" alt="スクリーンショット 2020-06-02 23.55.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8ccf54db-eb47-e187-2214-24dd26966c68.png">

StoryBoardでは、+をクリックし画面の追加を行ったり
矢印マークを使って画面遷移先を変更することができます。

<img width="248" alt="スクリーンショット 2020-05-28 15.46.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/154ac030-ff10-587f-86f6-6d3b50f222c1.png">

これまではアプリをビルドしない限り、
画面遷移を確認することができませんでしたが、このStoryBoardを見れば一目瞭然ですね！

エンジニアが他メンバーにアプリの概要を説明する際など、
**VisualizerのStoryBoardを見せるだけで、アプリの画面遷移イメージを伝えられるので便利な機能だと思いました！**

Visualizerを起動すると、はじめにStoryBoardが開くため、最初は驚くかもしれませんが、
これまで通りの画面で開発を行う場合は、以下の`Design`タブに入っていますのでご安心ください:relaxed:
<img width="1246" alt="スクリーンショット 2020-05-28 21.48.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f68bf977-b766-e388-24d1-6ed28dc81084.png">


###アクションエディタの変更
Version9では、アクションエディターも視覚的に表示されるようになっています。

[Version8以前のKony Visualizer]
これまでのアクションエディターは真ん中でアクションの流れを順番で確認することができました。
左メニューからアクションを選択し、クリックすることでアクションを設定することができました。
<img width="1670" alt="スクリーンショット 2020-06-02 23.00.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5ce85bfd-8a0f-0f07-f05d-ddcba6eb9236.png">

[Version9のKony Visualizer]
Version9の画面では、上記の画面に加えてDiagramViewが追加され、
視覚的にアクションの動きを確認することができるようになりました。
左メニューにそれぞれのアクションが一覧として表示されており、
真ん中メニューではアクションの動きが表示されます。

<img width="1255" alt="スクリーンショット 2020-05-28 17.51.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e03fd221-f0d0-86ff-f17f-aa44eff3766a.png">

①には、アクションが一覧で表示されます。
各アクションは、②にドラッグ&ドロップするとアクション設定ができます。

②の画面では、アクションがどんな流れで動いているか視覚的に見ることができます。

アクションを追加すると、右メニューに③設定詳細が表示されます。
Navigate to Formを選択した場合は、遷移先のフォームを選択するメニューが開きます。

[こちら](https://qiita.com/Kony_Team/items/963a88c97dab99f8b583)で紹介した記事と同じく、Identity Serviceを読んでアクションを設定してみましょう。

まず、Kony FabricのAppとの接続を行います。
Version8以前は、以下のように左メニューのKony FabricをクリックしてAppとの接続を行っていました。

[Version8以前のKony Visualizer]
<img width="256" alt="スクリーンショット 2020-06-02 23.22.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c607400b-c706-1b1a-115b-3e3c79908b64.png">

Version9では、左メニューの赤枠のマークをクリックして、既に作成しているアプリがあれば`Use Existing`を選んで、
Appとの接続を行いましょう。

[Version9のKony Visualizer]
<img width="1680" alt="スクリーンショット 2020-06-02 23.07.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ba150a0a-72e8-fdfb-8a46-a3e51a3956d6.png">

既存のアプリがある場合は、`Use Existing`をクリック、ない場合は、`Create`を選択
<img width="522" alt="スクリーンショット 2020-06-03 0.00.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/373911ea-3f85-43bb-0b88-f1b684e6194c.png">
`Use Existing`を選択した場合の画面。
接続したいAppを選んで、Associateで接続が完了します。
<img width="899" alt="スクリーンショット 2020-06-03 0.00.37 2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ce9833cf-adb5-7303-497d-7f70067da09d.png">

接続できているかどうかは、再びマークをクリックすると確認することができます。
接続できていればKony Fabricで作成したAppが起動し、接続できていない場合は、接続するかどうかのポップアップが表示されます。

これでAppとの接続は完了です。

次にアクションの設定をしていきます。
アクションを行いたいWidgetを選択し、アクションのEditをクリックすると、↓のようなエディターがポップアップ表示されます。
<img width="1242" alt="スクリーンショット 2020-05-28 17.57.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7a7eecf6-7237-a082-8062-b964dca2ec49.png">


Identity Serviceを呼びたいので、左メニューから選択しましょう。

[Version8以前のKony Visualizer]
これまでは、左メニューの`NetWorkAPI`から`Identity Service`を選択していました。
その他にも、`Object Service`や`Asynchronous Service`を選択することができていました。
<img width="175" alt="スクリーンショット 2020-06-02 23.33.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f4867cd3-fc5f-101d-1cde-0e65f5712202.png">

ですが、Version9では`Identity Service`の選択肢が消え、代わりに`Invoke Service`に統一されていました。
Version9でObjectServiceやIdentity Serviceをアクションメニューで呼びたい時は、Invoke Serviceを選ぶようにしてください。

左メニューで`Invoke Service`を選択したら、
真ん中のメニューにアクションが追加されるので、右メニューで呼びたいServiceを選択してください。
今回はIdentityServiceを呼ぶので、PCLogin$loginを選択。
<img width="1464" alt="スクリーンショット 2020-06-02 23.28.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8991e79f-613c-8749-2f39-39228d5f867c.png">


サービスが選択できたら、これまでの設定と同様Mappingをクリックし、
以下のようにそれぞれの値をマッピングしたら完成です。
<img width="1242" alt="スクリーンショット 2020-06-02 23.42.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/71e2453f-bbb5-eca2-9c31-c72788afffab.png">



これまで通りのアクションメニューの方が使いやすい、、という方は、
④右上タブの`Design View`を選択すると、以下のようにV8以前のようなアクションメニューが表示されますので、
自分の操作しやすい方を選択することができます。


#まとめ
今回はKony Visualizer Ver9のアップデート情報について、StoryBoardとActionメニューについて変更点をまとめました。
アップデート内容はまだほんの一部ですが、
個人的に非エンジニアの人でも、より理解しやすいように感覚的に操作できるような画面になっていたかと思います:clap_tone1:

まだまだ私自身も新機能について勉強中なので、
使っていて便利だと思った機能や、V8から改善された点など随時アップしたいと思います！
また、Kony fabricも新たな機能が追加されているので、そちらについても改めて記事書きたいと思います:muscle_tone1:

#参考
https://basecamp.temenos.com/s/whats-new