Next2D NoCode Tool入門

# NoCode Toolとは
Webブラウザ上で動作するオーサリングツールで、インストール不要、会員登録も不要、アクセスすれば誰でも利用できるサービスです。
サイトはこちら：[NoCode Tool](https://tool.next2d.app)

昨日の記事([Next2D入門](https://qiita.com/ienaga/private/76597607613a84726a10))では、SWFファイルを利用した過去の資産の再利用について書きました。

ですが、`NoCode Tool`本来の機能はSWFを読み込むところではありません。
今日はどのよう機能があるかをご紹介させて頂ければと思います。
前半は前日の記事と重複していますので、スクロールしてもらえればと

# ワークスペース
![workspace.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/61adea10-8095-66f5-6a0a-332bac45cdec.png)

## Tool Area
描画ツール、テキストツール、プロジェクトの読込・保存、書き出し設定や言語設定など各種ツールと設定項目が設置されているエリアになります。

## Screen Area
現在のフレームでStage上に表示されるDisplayObjectの閲覧・配置・重ね順など、描画情報を確認できるエリアになります。Command+EnterまたはCtrl+Enterで、Playerのプレビュー再生が行えます。

## Timeline Area
レイヤーやアニメーションのキーフレームなどを操作するエリアになります。Label名の設定や、フレームに任意のJavaScriptを埋め込む事ができ、レイヤー毎のTweenの追加・削除のコントロールも可能です。

## Controller Area
拡大縮小/回転/カラー操作/BlendMode/Filterなど、Screen AreaのDisplayObjectの操作を行えるエリアになります。テキストデータはサイズ、スタイル、行揃えなどの設定ができ、ビデオ・音声データはループ設定や音量の設定が可能です。Libraryタブから外部データ(画像、MP4、MP3、SWF)を読み込む事ができ、JavaScriptタグではプロジェクト全体に埋め込まれたJavaScriptの一覧を確認・編集ができます。

# 操作方法
英語表記しかないので、初見は「うっ・・・」っとなるかと思います。
(言語追加頑張ります！！)
(モーダルの説明文だけは日本語対応してます)
今日は全体の簡単な操作方法とデータの保存・書き出しに関して記載できればと思います。

アクセスすると、自動で新規のタブが画面の左上に「Untitled-1」と追加されます。
![スクリーンショット 2021-11-30 16.10.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/7fce7979-774f-658d-bffb-1e71a611a9ca.png)
＋マークを押下すると新しいタブを追加でき、メニューボタンでタブの一覧が表示されます。
![スクリーンショット 2021-11-30 16.21.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/75ea785a-6600-0eef-e4fa-485fcb477cc1.png)
タブの名前がデータ保存と書き出しを行った時のファイル名になります。

## 外部データの読み込み
Controller AreaのLibraryタブから外部データを読み込めます(直接ドロップも可能です。)
利用可能なフォーマットは以下となります。
- 画像データ(jpeg,png,gif,svg)
- 音声データ(mp3)
- 動画データ(mp4)
- SWF
![スクリーンショット 2021-11-30 23.48.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/efb48da7-3cdf-34b6-2bdb-3d87689b3bac.png)

## プロジェクトデータの保存・読み込み
Tool Areaの雲ボタンの下矢印がプロジェクトデータの保存で、上矢印が読み込みです。
データのフォーマットは`タブの名前.n2d`として保管され、同じく`.n2d`データーであればいつでもプロジェクトデータの読み込みが可能です。
![スクリーンショット 2021-11-30 23.53.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/6547aab1-8f42-9a1d-2d08-7282ae947111.png)

## 書き出し
作り上げたプロジェクトはTool Areaのoutputボタンから書き出しが可能です。
![スクリーンショット 2021-11-30 23.55.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/d9d4f94c-8993-bad6-f5b7-1f1d84ce5c0b.png)
書き出しは以下のフォーマットで書き出しが可能です。
- JSON(圧縮)
- JSON(無圧縮)
- webm
- GIF(Loop Animation)
- GIF Animation

JSONデータは`Next2D Player`で読み込む事が可能です。
データが重い場合は、圧縮を選択する事で軽量化されます。
CDNなどでgzip圧縮が可能な環境であれば無圧縮で書き出す事を推奨しています。
理由としては`Next2D Player`での圧縮データの解凍オーバーヘッドを回避できるからです。

### Next2D Playerでの読み込みサンプルコード

STEP1
`next2d.js`をHTMLに追加
([Next2D Player](https://github.com/Next2D/Player)はこちらダウンロードできます。)

```html
<script src="next2d.js"></script>
```

STEP2
表示させたいエレメントにscriptタグを追加

```html
<script type="text/javascript">
   next2d.load("path/to/output.json");
</script>
```

## 書き出し設定

書き出すフォーマットの設定は、Tool Areaの歯車ボタンの設定から行えます。
Hidden Layersを`Not Including`にした場合、非表示レイヤーを含めず書き出します。
逆に`Include`に設定した場合は、非表示レイヤーも含めて書き出します。

![スクリーンショット 2021-11-30 23.54.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/29e6f988-d771-6e6c-b0dd-a8aa17727525.png)


# 動作サンプル動画
<iframe width="560" height="315" src="https://www.youtube.com/embed/Kk05qJAPx0E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

この動画の中では、MP4、サウンド、画像、SWFを配置してます。
MP4に馴染むようにSWFと画像はBlendModeで加工し、MP4の角を丸くするのにマスク機能を利用しました。
マスクはロックをOffにすると無効になり対象のDisplayObjectを移動することでマスク位置を調整できます。
逆にOnにすると有効になり、マスクの中のDisplayObjectを移動することで位置を調整できます。


サウンドにはloop機能があり、BGMはloopして利用し、ジングルは1回の利用で停止するよう設定してます。
また、MP4のボリュームとloop再生もコントールが可能です。

このように複数の異なったフォーマットのデータを編集し、任意のデータに書き出す事が可能です。
明日からは機能を絞って紹介させていただければと思います。