メディアビューアとエディタ (Media Viewers and Editors)
パラメータが画像、動画、音声クリップ、3D モデル、またはガウシアンスプラット (Gaussian splat) を保持している場合、エディタはプレーンテキストフィールドの代わりに、そのメディアタイプ専用に設計されたビューアに切り替えます。これらのビューアの一部はエディタも兼ねており、キャンバスから離れることなく、マスクの描画、フレームのトリミング、レイヤーの合成を行うことができます。このページでは、各メディアビューアの表示場所、開き方、および開いた後に実行できる操作について解説します。
表示されるビューアは、パラメータのデータ型によって決定されます:
| パラメータの型 | ビューア |
|---|---|
ImageArtifact / ImageUrlArtifact |
画像ビューア |
VideoArtifact / VideoUrlArtifact |
動画プレイヤー |
AudioArtifact / AudioUrlArtifact |
音声プレイヤー |
ThreeDArtifact / ThreeDUrlArtifact |
3D モデルビューア |
SplatArtifact / SplatUrlArtifact |
ガウシアンスプラットビューア |
比較スライダー(画像および動画用)は個別のデータ型ではありません。ノードが 1 つのパラメータを通じて 2 つのメディア値を公開する際に、エディタが自動的に比較表示を選択します。(ノード開発者向け:型からウィジェットへの完全なマッピングは パラメータ UI リファレンス に記載されています)。
ビューアの上部にどの追加ボタン(クロップ、マスク、キャプチャなど)が表示されるかは、ノード開発者がそのパラメータに設定したオプションに依存します。これらはユーザー側で設定するものではなく、ノード内部に組み込まれています。そのため、同じ画像パラメータであっても、あるノードではクロップアイコンが表示され、別のノードではマスクアイコンが表示される場合があります。
画像ビューアと右クリックアクション
画像パラメータは標準の画像ビューアを通じて表示されます:画像のサムネイルと、その下に名前、解像度、ファイルサイズが表示されます。ホバーすると展開ボタンが表示され、ライトボックス内で画像をフルスクリーン表示できます。Escape キーを押すか、画像の外側をクリックすると閉じます。
任意の画像(ノード上のサムネイル、またはライトボックス内の拡大表示)を右クリックすると、以下のコンテキストメニューが表示されます:
- Copy image(画像をコピー) — フル解像度の画像を PNG 形式としてシステムクリップボードにコピーします(元が別形式の場合は自動で再エンコードされます)。
- Copy image URL(画像 URL をコピー) — 画像の URL をテキストとしてコピーします。
- Save image(画像を保存) — フル解像度の画像をディスクにダウンロード保存します。
- Make thumbnail(サムネイルに設定) — この画像をワークフローのヘッダーサムネイル(ワークフローブラウザで一覧表示されるサムネイル)に設定します。これにより、ワークフローの保存メタデータが即座に更新されます。
スライダーによる 2 枚の画像の比較
ノードが単一の比較パラメータを通じて 2 枚の画像を公開している場合、エディタはそれらをドラッグ可能な垂直の仕切り線付きの 1 枚の画像としてレンダリングします。仕切り線の左側が 1 枚目の画像、右側が 2 枚目の画像となります。マウスを比較エリア上で動かすことで、仕切り線をスライドできます。
ホバー時に表示される展開ボタンをクリックすると、同じ比較表示をフルスクリーンで開くことができ、左右それぞれにファイル名が表示されます。Escape キーで閉じます。
画像のトリミング(クロップ)
一部の画像パラメータにはクロップボタン(サムネイル上の切り抜きアイコン)が表示され、クリックするとクロップエディタが開きます。エディタ内では、オーバーレイ上のハンドルをドラッグしてクロップ領域のサイズを変更できるほか、以下のコントロールを使用できます:
- Reset All — クロップ領域を画像全体にリセットします。
- Aspect ratio presets — 正方形 (Square)、16:9、3:2、4:3、9:16、2:3、3:4 などのアスペクト比プリセット。
- Zoom — 10〜300% のズーム。点滅する破線オーバーレイとしてプレビューされます。
- Rotation — -180°〜180°の回転。上方向を示す矢印インジケーターが表示されます。
- Crop Details — ピクセル単位の現在の left / top / width / height。
Accept & Save をクリックすると、新しい画像ファイルに焼き込むのではなく、ノード上のパラメータ値(left、top、width、height、zoom、rotation)としてクロップ情報が保存されます。実際にクロップを適用する処理は、実行時にノード自身が担当します。Cancel を押すと変更が破棄されます。
マスクの描画 (Painting a mask)
マスク編集が有効になっている画像パラメータには、マスクアイコンが表示されます。これをクリックすると Paint Mask エディタが開きます。ソース画像の上に重ねられたキャンバスに直接ペイントできます:
- Brush(ブラシ)は白(表示領域)を描画し、Erase(消しゴム)は黒(非表示領域)を描画します。
- Brush Size(ブラシサイズ)と Blur(ぼかし)のスライダーで、線の太さとエッジの柔らかさを調整できます。スライダーに触れずに
[および]キーでブラシサイズを素早く調整することも可能です。 - Show Mask / Show Composite で、生のグレースケールマスク表示と、マスクを透明度として適用した合成画像表示を切り替えます。
- Invert Mask はマスク全体の白と黒を反転します。
- Reset Mask はマスクを画像の元のアルファチャンネルの状態に復元します。
- Flood Fill(塗りつぶし)は、マスク全体を現在のツールの色で塗りつぶします。
- Alt を押しながらドラッグするとパン、Alt+スクロールでズームできます。キャンバス上部には専用のズームボタンとビューリセットボタンも用意されています。
Apply をクリックした際の保存内容は、パラメータが保持している既存のデータ構造によって異なります:プレーンな画像の場合は、その画像のアルファチャンネルが編集され、透明度を持つ新しい画像として保存されます。パラメータがすでに個別のマスクとペアになっている場合は、代わりにそのマスクが編集され、元の画像には手を触れずに独立したグレースケールファイルとして保存されます。
Image Bash: 画像とペイントレイヤーの合成
Image Bash は、エディタに内蔵されたレイヤー合成ツールです。一部の画像パラメータにはこれを直接開く鉛筆アイコンが表示されます。また、構造化されたレイヤーデータとして状態を保持するパラメータの Edit ボタンからも開くことができます。Image Bash を利用する Griptape 公式ノードは、1 枚の画像をその場で編集するのではなく、複数のソース画像とペイントレイヤーから 1 枚のショットを構築するためにこのツールを使用します。
ツール内部では、各レイヤーは 画像レイヤー (image layer)(キャンバス上の変形ハンドルを使って移動、スケーリング、回転ができるソース画像)または ブラシレイヤー (brush layer)(自由に描画できるペイントキャンバス)のいずれかになります。サイドバーにはすべてのレイヤーがサムネイル、表示切り替え、不透明度、ドラッグによる並び替えハンドルとともに一覧表示されます。任意のレイヤーの名前変更、削除、複製、および画像レイヤーを新しい描画可能ブラシレイヤーとして複製することが可能です。
描画ツールには、ペン (Pen)、ソフト (Soft)、クレヨン (Crayon)、スプレー (Spray) の 4 種類のブラシが用意されており、それぞれ固有のサイズ、カラー、不透明度を設定できます。さらに、クレヨン(粒子サイズ、粒子密度、散布、正方形比率、密度減衰)やスプレー(スポットサイズ、スポット密度、散布半径)のための詳細設定も備えています。元に戻す/やり直し(Undo/Redo)は直近 50 回のブラシストロークに対応しています。また、ツール内からキャンバスのサイズ変更や背景色の変更も行えます。
ブラシとキャンバスのデフォルト設定は、エディタの Settings パネルにあります(「ImageBash」で検索してください)。ここでデフォルト値を変更すると、それ以降に新しく開くセッションにのみ反映されます。
動画の再生と比較
動画パラメータには、フレーム精度で操作可能な専用プレイヤーが使用されます:1 フレームずつのコマ送り/コマ戻し、順再生/逆再生、およびマークしたフレーム間のジャンプが可能です。キーボード操作も画面上のコントロールと同様に機能します:← / → で 1 フレーム移動、j / k / l で逆再生、一時停止、順再生を行います。ノードがフレーム選択パラメータを公開している場合、タイムライン上にマーカーが表示され、追加(. で現在のフレームを追加)、ドラッグ、クリアができ、n / m で前後のマーカーへ素早くジャンプできます。
下部バーには、再生 FPS(編集可能、動画本来のレートにスナップバックするボタン付き)、総フレーム数に対する現在のフレーム番号、ミュート、音量コントロールが表示されます。展開可能な Video Details パネルには、解像度、ファイルサイズ、フォーマット、コーデック、アスペクト比、再生時間、フレームレートが表示されます。Enlarge で大きめのダイアログとして開き、Fullscreen ボタンでブラウザの全画面表示を利用できます。
動画比較パラメータでは、画像比較と同様のドラッグ可能な仕切り線を使って 2 つの動画が並んで表示され、フレーム単位で完全に同期再生されます。左右どちらの音声トラックを再生するかを選択するスイッチも用意されています。
動画を右クリックすると、Copy video URL および Save video が利用できます。
音声の再生
音声パラメータは波形表示としてレンダリングされ、その下に再生コントロール(再生/一時停止、経過時間/総時間、ミュート、音量スライダー)が配置されます。波形上の任意の場所をクリックまたはドラッグすることで、その位置へ素早くシークできます。
ウェブカメラまたはマイクからのキャプチャ
ウェブカメラキャプチャが有効になっている画像パラメータでは、カメラへのアクセスを許可すると、通常のサムネイルの代わりにライブカメラプレビューが表示されます。カメラボタンをクリックすると静止画が撮影・アップロードされ、プレビューがキャプチャされた画像に置き換わります。再撮影ボタンでいつでも撮り直すことができます。
マイクキャプチャが有効になっている音声パラメータでは、波形の隣に録音ボタンが表示されます。クリックすると録音が開始され(タイマー表示に切り替わります)、もう一度クリックすると停止します。録音データは自動的にエンコードされてアップロードされます。ゴミ箱アイコンをクリックするとキャプチャした録音がクリアされ、再度録音できるようになります。
いずれもブラウザのカメラまたはマイクの権限許可が必要です。アクセスが拒否された場合、コンポーネントはキャプチャコントロールの代わりにエラーメッセージを表示します。
3D モデルの表示
3D モデルパラメータはインタラクティブなビューアで開きます:ドラッグでオービット(回転)、スクロールでズーム、右ドラッグでパン操作が可能です。サポートされているフォーマットは glTF/GLB(Draco 圧縮メッシュを含む)、OBJ、FBX、DAE、3DS、STL、PLY です。USDZ ファイルはプレーンテキストの USDA バリアントである場合のみ読み込まれます(Rodin や Apple QuickLook などのツールから書き出されたバイナリ USDC ファイルはプレビューできませんが、ファイル自体の保存やダウンロードは可能です)。独自のマテリアルを持たないフォーマット(STL、PLY、プレーンな OBJ)には中間色のデフォルトマテリアルが適用されるため、立体形状として視認できます。
ビューアにホバーして展開アイコンをクリックすると、同じモデルがフルスクリーンで開き、開いている間はゆっくりと自動回転します。Escape キーまたは閉じるボタンで終了します。
ガウシアンスプラットの表示
スプラットパラメータ(.splat および .ksplat ファイル)は、3D モデルビューアと同じオービット/ズームのカメラ操作を使用しますが、ポリゴンメッシュの代わりにガウシアンスプラッティング (Gaussian splatting) レンダラーを通じて描画されます。展開アイコンをクリックするとフルスクリーンで開きます。Escape キーまたは閉じるボタンで終了します。
画像からのワークフローの読み込み
Griptape Nodes は、サムネイルとして書き出す PNG 画像の内部に、ワークフローのノードグラフ構造をメタデータとして埋め込むことができます。これらの PNG ファイルのいずれかをキャンバス上にドロップした際、エディタが埋め込まれたワークフローメタデータを検出すると、単に画像ノードを追加するだけでなく、以下のいずれかを選択するダイアログを表示します:
- Add Image(画像として追加) — 他の通常の画像と同様に扱い、その画像を読み込む通常の画像ノードを作成します。
- Add Nodes from Workflow(ワークフローからノードを追加) — その画像を生成したノード群を現在のワークフローに追加し、参照されているライブラリ、静的ファイル、および依存するワークフローをインポートします。追加を確定する前に、ダイアログ内のノード、ライブラリ、依存関係のリストを展開して、何が追加されるかをプレビュー確認できます。
複数の PNG ファイルを一度にドロップした場合は、同じダイアログの一括処理バージョンが表示されます。ドロップされた画像のうち何枚にワークフローメタデータが含まれているかが示され、選択したアクション(画像として追加、またはワークフローからノードを追加)をすべての画像に一括適用できます。メタデータが埋め込まれていない画像は、どちらのオプションを選択した場合でも、常にプレーンな画像ノードとして追加されます。