cables.gl で遊ぶために必要な「超基礎」だけをサクっとまとめてみた！【インターフェース（UI）編】
ナカジ(@cp_nakajun)です。
cables.glで遊ぶための第一歩をお伝えしようと思います。
先に公式のドキュメント(英語)を紹介しておきますね。
これからクリエイティブツールを使って何かを作ってみたいというような方にも
cables.glの雰囲気を知って頂くことで踏み出す一歩の一助となればうれしいです。
cables.glって何？？という方は以下も併せてご覧いただけたらと思います。
今回はインターフェース面（UI）を取り上げます。
cables.gl 新規プロジェクトの作成・保存
先の記事でも書きましたが、今この記事を書いている時点でcables.glはベータ中です。
ベータテスターの招待に申し込み、無事ログインができると下記のようなページにアクセスします。
「Create」タブから「Empty New Project」で新規プロジェクトが作成され、下記のようなcablesの制作画面に遷移します。
画面上部、真ん中あたりの「歯車マーク」をクリックするとプロジェクト名を変更したりできる設定画面が開きます。
サイドバーのカスタマイズ
cables.glは左にあるサイドバーを自分好みにカスタマイズすることができます。
方法はサイドバーの一番下（左下）にある「⋮」をクリックするとウインドウが開きます。
ドラック＆ドロップで追加したり、並び順を変更することができます。
cables ユーザーインターフェース
cablesの制作画面です。
- パッチングスペース
- プレビュースペース
- パラメータースペース
- タイムライン
この名称が公式ではありませんが、役割的にはこんな感じです。
各スペースの大きさは境目をドラックすることで変更することができます。
cablesはオペレータという特定の役割を持つボックスを線でつなぐことで処理（動作）をプログラミングし制作していきます。
①のパッチングスペースでオペレータをつなぎ
③パラメータースペースで各オペレーターが持つパラメーターを調節します。
②のプレビュースペースで制作しているもののアウトプットを確認しながら上記の作業を繰り返し制作していきます。
④のタイムラインは各パラメータの左にある「時計マーク」をクリックするとそのパラメータをタイムラインに設定できます。
今回はここまでです。
