人に自慢したいフローができたとき、手っ取り早く見せびらかす3つの方法

以前参加したenebular meetup であったできごとです。


その回はハンズオンのイベントだったのですが、その中でフローを各自で作成するシーンがありました。
人々が苦戦している中、一人の人が手を挙げました。
「オレ、できましたよ。Discoverに上げたからよかったら使ってください。」
作成に苦心していた皆さんはDiscoverから無事フローをimportし次の作業に進めました。めでたしめでたし。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271210/a9673461-700b-710b-3a7e-b738313cd56a.png)


これが人に自慢したいフローができたとき、手っ取り早く見せびらかすための代表的な例です。自分で作成したフローが瞬時にその場にいる人に展開できるというのは大変便利ですよね！
実はenebularはこのdiscoverを使う方法以外にもいくつかフローの共有方法があります。


共有方法は3通り。
　１．[該当フローへの招待](#該当フローへの招待)
　２．[Discoverへのアップ](#discoverへのアップ)
　３．[json形式で共有](#json形式で共有)
　　　①[基本のフローのコピー](#基本のフローのコピー)
　　　②[追加したノードを利用しているフローのコピー](#追加したノードを利用しているフローのコピー)
　　　③[過去のバージョンのフローのコピー](#過去のバージョンのフローのコピー)
　　　

今回はこれら共有方法の解説と、実際こんなシーンで使える！といった使い方のおすすめをご紹介します。




#該当フローへの招待
該当のフローAccessタブを開くと、一番下に「Invite outside collaborators」という機能がありますので、
共有したいアカウントのメールアドレスを入力しInviteをクリックしてください。
対象アドレスにInviteメールが送られます。
![adventcalender1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271210/659afb19-c430-ccd3-d008-d859763acff1.png)


なお、フロー単位だけでなく、Project単位でも同様の方法で共有することができます。
ProjectのSide Barから「Access」をクリックしてください。一番下に「New Collaborator Email...」という欄がありますのでそこから招待したい人のメールを入力しInviteします。
![adventcalender2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271210/adbc5008-79e0-5b17-8ced-2ed235ecc15c.png)

#Discoverへのアップ
該当フローの「Publish」をクリックすると登録画面が開きます。
登録するとDiscoverでフローが公開されます。
フローの情報を入力しPublishボタンをクリックすると、Discoverにアップされます。
![publish.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271210/668032bf-f05c-4118-8e13-7181cec0920c.png)
![publish2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271210/3a27ba35-c034-0325-717b-f451ff46a8c9.png)

ただしこの方法はenebularを使用している全てのアカウントで見れてしまうため、使い方には注意が必要です。フォーマルな案件にはお勧めできません。


#json形式で共有
こちらはフローのファイルでなく、フローのみを共有したいときにお勧めです。
過去のバージョンのフローのコピーとか、パッケージ含むフローのコピーとか、色々できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271210/25382f00-13cc-bbd7-6bd9-87e5e5a18984.png)

#基本のフローのコピー
該当フローの「Overview」より「source」タブを選択するとフローがjsonで表示されます。"flow"というキーに対応している値をコピーしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271210/c117485b-ab20-5579-263a-2673f24f447e.png)
フローを編集したいキャンバスにおいて右上のメニューから「読み込み」→「クリップボード」を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271210/622545bd-326c-bfb3-57f5-d0038dd65fa2.png)

先ほどコピーした値を貼り付けて読み込むと、キャンバスにフローが現れます。


#追加したノードを利用しているフローのコピー
標準装備されているノードに加え、外からのノードやサブフローを使用している場合、それらのパッケージを追加してからフローをコピーする必要があります。

「基本フローのコピー」でコピーした「source」タブのコードの中の最後の部分にパッケージのリストが含まれています。このリストに入っているパッケージ名をメモしてください。これらのパッケージはあらかじめインストールしておく必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271210/b29a4001-1d56-3f8c-ff7b-816074bfe7f8.png)
リモートエディタを開いて「Manage palette」を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271210/9024cf9c-2d77-67b1-a4a8-d3ef0a2b459a.png)
パッケージのInstallを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271210/820d4917-1fe6-ff6a-3c61-4cc96b1b7b37.png)
メモしているパッケージを順番にインストールしていきます。緑色の枠内の通りに入力してパッケージを検索し、適切なバージョンを選んでInstallをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271210/2dabdd59-adac-1351-930d-72bc0aa89645.png) 
Installをクリックして承認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271210/a927ec4d-8972-a124-7f74-83d87231b88b.png)
インストールが実行されているかどうか確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271210/ed00630e-e691-8da1-c677-2881f1254d21.png)
同じ手順を繰り返しすべてのパッケージがインストールされたら、それらがパレットに現れるのを待ちます。
インストールされたパッケージの確認が表示されるのを待ちます。こんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271210/f0e4e795-d2bc-5247-362c-0834104cb570.png) 
これでノードがインストールされ利用可能になりました。
あとは「基本のコピー」に倣ってコピーすればOKです。
 
ちなみに、デプロイ先のデバイスに予めこれらパッケージがデプロイされている場合(既にDeploy済みのフローに今回必要なパッケージが含まれていた場合とか)、この作業をしなくともフローのコピーが可能です。
Web上でフロー編集する場合は「必要パッケージがないよ！」エラーが出てしまいますが、enebular editorを使用したリモートモードでのフロー編集の場合はそのままのコピーでいいのでちょっと楽ですね。

#過去のバージョンのフローのコピー
フローの過去のバージョンをコピーすることもできます。
該当フローの「Overview」より「Version」タブを選択するとフローのバージョンが表示されます。その中から使いたいバージョンの左側の「Preview」ボタンをクリックしてください。
 ![version.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271210/c6ceb126-97d4-e249-add4-3f355decd41f.png)
![version2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271210/d4085d2a-4887-bde9-2dd7-6c355ccc92ba.png)
このように、「source」タブを選択するとフローがjsonで表示されます。
 
あとは「基本のコピー」に倣ってコピーすればOKです。



いかがでしたでしょうか？
そのときの用途に合わせて使い分けてみてください！