情報処理学会 インタラクション 2017
IPSJ Interaction 2017

1-506-26
2017/3/2

タイムラインとビジュアルプログラミングを融合した映像制作システム
高橋 弘毅†1

宮下芳明†1

概要：本稿ではモーショングラフィックスと呼ばれる映像の制作に焦点を当て，タイムラインとビジュアルプログラミングを組み合わせた映像制作システムを提案する．映像の制作手法にはタイムラインを用いるものと，プログラミングを用いるものがある．前者は映像を時間軸上で管理できるが大量の映像オブジェクトを扱うことや，数式に基づいてオブジェクトを移動させることなどが難しい．一方プログラミングを用いればタイムラインの欠点を補うことができるが時間指定での映像制作が難しく，プログラミング未経験者にとってハードルが高い．そこで提案手法では映像プログラムを視覚的にわかりやすいビジュアルプログラミングで構築し，タイムラインで映像プログラムの実行時間を制御することで既存の手法の問題点を解決する．本論文では提案システムの実装，評価を行った．

Video Production System that Integrates
Timeline and Visual Programming
KOKI TAKAHASHI†1

HOMEI MIYASHITA†1

Abstract: In this paper, We propose a video production system that integrates timeline and visual programming. There are two
methods for video production. One way is using timelines and the other is using programming. Although the former can manage
animation on the time axis, it is difficult to deal with large numbers of objects and to move objects based on mathematicalexpressions. On the other hand, using programming makes it possible to compensate for the shortcomings of the timeline, but it
is difficult to produce animation with time designation, and it is tough for inexperienced users. Therefore, the proposed method
solves the problem of the existing method by constructing the video program with visually easy visual programming andcontrolling the execution time of the video program in the timeline. In this paper, We implemented and evaluated the proposedsystem and discussed future tasks.

1. はじめにいて図形を移動させることが難しい．大量の図形を扱うためにはタイムライン上に表示したい図形の数だけ映像オブ

YouTube やニコニコ動画といった動画共有サービスだけ

ジェクトを設置しなければいけないため，編集画面が圧迫でなく，近年は Twitter や Facebook などの SNS でも動画のされてしまう．また，図形の移動もユーザが手作業でパラ投稿が増えていることから，映像制作はより一般的になっメタを入力しなければいけないため複雑な動きを表現するてきている．映像には多くの種類があるが，モーショングのが困難である．

ラフィックスと呼ばれる，図形や文字などのグラフィック

一方プログラミングを用いれば繰り返しの処理を行う

デザインに動きを加えた映像作品に焦点を当てる．映像のことで図形の複製や，数式に基づいた図形の移動などが可制作手法にはタイムラインを用いるものと，プログラミン能になる．しかしプログラミングによる映像制作ではシーグを用いるものがある．

ンチェンジや図形を表示させるタイミングの細かい編集がタイムラインは映像の再生時間に対応した横軸，映像の難しい．シーンチェンジを行うにはいくつかシーンごとにレイヤに対応した縦軸から構成され，時間軸上で映像を管実行するプログラムを用意し，再生フレーム数で条件分岐理する機能である．タイムライン上に映像オブジェクトをなどを行うことで実現できるが，タイムラインのように瞬設置し，シークバーが映像オブジェクトの上を通過してい時に表示するタイミングを入れ替えることや，表示する長る間，映像オブジェクトに対応した映像が出力される．タ

さを変更するのが難しい．また，プログラミング未経験者

イムラインの強みは図形を表示するタイミングやエフェクにとって映像プログラムの構造把握が難しく，プログラミトをかけるタイミングなどを視覚的に把握し編集できる点

ングを用いて自分の思い通りに映像を制作するのは困難でである．しかし大量の図形を扱うことや，ある数式に基づある．そこで，本論文では既存の２つの手法の問題点を解決するため，タイムラインとビジュアルプログラミングを†1 明治大学総合数理学部先端メディアサイエンス学科
Department of Frontier Media Science, Faculty of Interdisciplinary
Mathematical Sciences at Meiji University© 2017 Information Processing Society of Japan

組み合わせた映像制作システムを提案する．

201

情報処理学会 インタラクション 2017
IPSJ Interaction 2017

2. 関連研究1-506-26
2017/3/2

3. 提案システム

タイムラインは複数のアイテムを時間軸上で管理するの

提案システムは映像制作を行うためのビジュアルプログに大変有効であるが，扱うアイテム数が増えすぎてしまう

ラミング環境（図 1 赤枠），構築した映像プログラムの実と編集画面がアイテムで埋め尽くされ，機能しなくなって行区間を管理するためのタイムライン（図 1 緑枠），映像しまう問題がある．そこで栗原らは柔軟に動かすことのでを再生するためのディスプレイから構成される（図 1 青きる新しいタイムラインを提案した[1]．このタイムライン枠）．本章では提案システムの持つ機能について述べる．シではアイテムの位置を別のアイテムと揃えることや，長くステムの実装は JavaScript で行い，ブラウザ上で動作する．

なってしまったタイムラインの一部を部分的に表示することが可能で，最初に述べたアイテムが増えすぎるとタイムラインが機能しなくなる問題に対しては，複数のアイテムを一つのグループとして扱うことでタイムラインが埋めつくされることを回避した．また，的場らは音・映像構成のためのロータリーシーケンサを提案した[2]．円状のタイムラインを画面に設置することで音や映像を出力するというものである．タイムラインのシーケンスの周期や長さを変えることで複雑なリズムの音や，それに合わせた映像を作り出すことができる．
視覚的にプログラムの把握，編集ができるビジュアルプ
ログラミングに関しての研究は古くから行われており，Haeberli らはビジュアルプログラミングを用いたグラフィックスシステムを提案した[3].小林らはライブ映像パフォ

図1
Fig.1

提案システムの画面

User Interface of proposed system.

ーマンスにおいて映像素材の選別，エフェクトの適用などをデータフロー図によって表現するシステムを提案した

3.1 タイムライン機能[4]．データフロー図は映像ソースやエフェクトの構成を視提案システムのタイムラインは映像プログラムの実行時覚的に把握しやすいため，音楽用のビジュアルプログラミ間，実行順序を管理する役割を持つ．タイムライン上をダ

ング言語 Max/MSP[5]や映像用のビジュアルプログラミン

ブルクリックすることで映像プログラムを格納するためのグ言語 vvvv[6]などでも用いられている．After Effects やブロック（図 2）を配置することができる．このブロック

Adobe Flash にはアニメーションを制御するためのスクリを以後パッチと表記する．シークバーがパッチと重なってプト言語が用意されているが，アニメーションを確認するいる間，そのパッチの内部にあるプログラムが実行される．

ためにはスクリプトの記述を変更したあとに，レンダリン

パッチとパッチはタイムライン上で接続することでパッチグするまでどのようなアニメーションになったか確認する間での連携を実現できる．詳しい説明は 3.3.6 章でノードことができない．また，スクリプトの編集画面と GUI が別の説明と併せて述べる．パッチをクリックするとそのパッのウィンドウに分離されている場合があり，プログラム記チ内部のプログラムの編集が可能になる．編集可能状態に述と，アニメーションの確認を行うために画面を何度も切なったパッチは赤く点灯するため視覚的に確認できる．

り替える必要がある．そこで加藤らはアニメーションのアルゴリズムに対するパラメタを生成し，それをユーザが編集できるコードエディタと，パラメタ調整に適した GUI をもつシステムを提案した[7]．このシステムではキネティッ
クタイポグラフィという歌詞などの文字にアニメーションを加えた映像を制作することができ，歌詞を表示するタイムングを管理するためのタイムライン，アニメーションのパラメタを変更するためのエディタを持つ．物理シミュレーションを用いたアニメーション制作の支援では，アニメ
ー シ ョ ン の 軌 道 を 候補 の 中か ら 絞 り 込 ん で い く手 法 をTwigg らが提案した[8]．絞り込みは出力された映像の上をドラッグすることで行うことができ，数式などを操作する

図2

作成されたパッチ

ことなく直観的な操作でアニメーションを制作できる．

Fig. 2Created patches.

© 2017 Information Processing Society of Japan202

情報処理学会 インタラクション 2017
IPSJ Interaction 2017

パッチはマウスでドラッグすることで上下左右の移動，右端をドラッグすることでパッチの横幅を変更することができる．タイムライン上部の COPY ボタンを押すと選択中

1-506-26
2017/3/2

3.3 ノードの説明
本章ではビジュアルプログラミングに使用するノードの働きについて説明する．のパッチをコピーすることができる． また，タイムラインにはレイヤ機能があり，シークバーが複数のパッチの上を3.3.1 映像出力用ノード通過する際，タイムラインの上部にあるパッチからプログ受け取った情報を映像として出力するためのノードがラムが実行される．例えば patch0 に小さな青い四角を表示「render」である．入力ピンを 2 つもち左のピンでは映像するプログラム，patch1 に大きな赤い四角を表示するプロとして出力するメッシュ（3.2.2 参照）を受け取り，右のピグラムが格納されている場合，patch0 が上部にあるケース

ンでは映像の背景を変更するための「rgb」ノードから色情

ではまず青い四角が描画され，その後に patch1 の赤い四角報を受け取る．

が描画される（図 3 左）．同様に patch1 が上部にあるケー
スでは先に赤い四角が描画されその後に青い四角が描画される（図 3 右）．

3.3.2 メッシュノード
メッシュとは四角や円といった図形の情報のことで，「quad」ノードは四角，「cube」ノードは立方体，「circle」ノードは円のメッシュを扱う．入力ピンを 2 つもち，左のピンには図形の変形を行うための「transform」ノードをつなぎ，右のピンには「rgb」ノードをつなぐことができる．
「group」ノードは受け取ったメッシュを一つのまとまりのメッシュとして扱うためのノードである．例えば横一列に配置した四角をまとめて回転させる場合などにはこのノードを使用することで表現可能である．

図3
Fig.3

レイヤ機能を用いた例．
Example of using layer function.

3.3.3 数値ノード「IObox」ノードは入力ピンで受け取った数値，もしく

3.2 ビジュアルプログラミングシステム

はノードの持つテキストエリアに入力された数値を出力す映像プログラムは図形の情報や図形を変形させる命令ることができる．入力ピンから数値を受け取った場合は常などが入ったブロック（以後ノードと表記）を線でつなぎにその値を表示するため，どのような値がノード間でやり合わせるビジュアルプログラミングを用いて構築する．ノ取りされているかを確認するために使用することもできる．

ードには情報を入力するためのピンと，出力するためのピ

四則演算は「+」「-」「/」「*」の 4 つのノードを用いて行うことができる．四則演算を行うノードは入力ピンを 2 つンを持つ．
プログラミングエディタ上でダブルクリックすると生成したいノードの名前を入力するためのテキストエリアが持ち，入力された 2 つの値の演算結果を出力する．
「linearspread」ノードは配列を扱うためのノードである．

出現する．作成したいノードの名前を入力してエンターキ

入力ピンを 2 つ持ち，左のピンで受け取った数値を変化幅

ーを押すと入力した名前のノードが生成される．ノードのとし，中心を 0 として右のピンに入力された数値の数で分出力ピンをクリックすることで他のノードの入力ピンと接割した値を出力する．例えば左に 30，右に 4 を入れた場合，続するための線がマウスカーソルについてくるようになる

出力される配列は-15 , -5 , 5 , 15, となる(図 5)．

（図 4 左）．この状態で接続したいノードの入力ピンをクリックすると２つのノードが線で接続される（図 4 右）．

図4

ノードの接続図5「linearspread」ノードの出力例

Fig.4

Connected nodes.

Fig.5

Example of Linearspread node.

© 2017 Information Processing Society of Japan203

情報処理学会 インタラクション 2017
IPSJ Interaction 2017

1-506-26
2017/3/2

きるノードを実装した．まず連携させたいパッチの入力ピンと出力ピンをビジュアルプログラミングと同様に線で結3.3.4 物体変形用ノード「transform」ノードは図形の変形を行うためのノードでぶ．例えば patch0 の出力ピンと patch1 の入力ピンが接続さある．入力ピンを 7 つ持ち，左から図形を表示する x 座標，れている場合，patch0 から patch1 へと値を送ることができ

y 座標，図形の横幅，縦幅，xyz 軸に対する図形の回転角度

る．パッチを接続した後は，それぞれのパッチ内のプログの数値を受け取ることができる．

ラムに値をやり取りするためのノードを追加する．値を渡

メッシュノードは「transform」ノードから配列で数値がす方のパッチには「remoteInput」ノードを追加し渡したい

送られてきた場合，受け取った数値の数だけ図形を表示す値を入力ピンにつなぎ（図 8 左），値が渡される方のパッチることができる．そのため「linearspread」，「transform」ノに「remoteOutput」ノードを追加することで出力ピンからードを用いることで図形を大量に扱えるようになる（図 6）．

値を得ることができる（図 8 右）．このノードを使うことで異なるプログラムから出力された図形の回転周期や座標変化の速度を同期することができる．

図6
Fig.6

図形を複数描画した例

図8

Example of rendering multiple geometry.

3.3.5 アニメーションノード

Fig.8

パッチ間連携ノード
Patch synchronization node.

3.4 サンプルパッチ「time」,「LFO」は描画した図形に動きを加えるための映像プログラムの構築を楽にすることと，ビジュアルプノードである．「time」は入力ピンを持たず，2 つの出力ピログラミングの理解を手助けする目的であらかじめ映像プンを持つ．左のピンからはパッチ内での再生時間，右のピログラムを組んだパッチを 3 つ用意した．「quads straight」

ンからはパッチの最大再生時間を出力する．例えばシークは配列ノードを用いて四角を横一列に並べ，「quads circle」

バーが 10ms で 1 フレーム進む場合，パッチの最大再生時は四角を円状に並べるものである．
「sin rotation」は三角関

間が 970ms,シークバーがパッチの開始点から 700ms 過ぎた数を用いたアニメーションである．サンプルパッチは映像

位置にあるときは「time」ノードは図 7 のように値を出力

出力用ディスプレイの右にある 3 つのパッチを指す．サンする．

プルパッチをドラッグしてタイムライン上にドロップするとその位置にパッチが作られ，中にはそれぞれのプログラムを動かすためのノードが配置されている．サンプルパッ
チの例として「sin rotation」のプログラム構造を図 9 に示す．

図7「time」ノード

Fig.7

Time node.

3.3.6 パッチ間連携ノード
タイムラインとビジュアルプログラミングをよりインタ

図9

ラクティブなものにするために，パッチ間で情報を共有で

Fig.9© 2017 Information Processing Society of Japan

サンプルパッチの例
Example of sample patch.

204

情報処理学会 インタラクション 2017
IPSJ Interaction 2017

グに関して 5 段階評価を行うもので，内容は表 1 に示し．

4. 実験
4.1

1-506-26
2017/3/2

実験内容

提案システムがユーザにとって使いやすいものか，提案システムを用いてユーザがどのような映像を作ることができるかを明らかにするために実験を行った．参加者は映像アンケートの結果を表 2 に示す．また，提案システムを分析するために被験者の制作した映像の長さ，映像プログラ
ムに使用されたパッチの数，ノードの数，映像オブジェク
トの最大表示数についてまとめたものを表 3 に示す．

制作経験のある 20～23 歳までの大学生 4 名であった．この

表1

うち 2 名はプログラミングの経験があり，2 名はプログラミング未経験者である．
実験の手順は，初めに提案システムの使い方を説明し，Table 1

質問 1

提案システムの持つタイムラインを使うことで映像プログラムの時間管理は容易に行えたか

1 時間程度の制作時間を設け被験者に提案システムを用いて映像を作らせた．映像制作が終了した後，提案システムに関するアンケートをとった．本章では制作された映像，（当てはまれば 5，当てはまらなければ 1）
質問 2

ビジュアルプログラミングによる映像プログラ
ムの構造は把握しやすかったか

アンケートの結果から提案システムの分析を行った結果に（当てはまれば 5，当てはまれなければ 1）

ついて述べる．
4.2

アンケート内容

The questionnaire contents.

表2

実験結果

Table 2

プログラミング未経験者でもビジュアルプログラミングが行えたかをプログラミング経験者と比較するため，被験アンケート結果

Result of the questionnaire.

abcd

平均

者 4 名をプログラミング未経験者 a,b とし，プログラミン

質問 1

555

4

4.75

グ経験者 c,d とする．

質問 2

33

45

3.75

表3

映像の各要素Table 3Element of video.

4.2.1 映像の作例とプログラムの構造例
まずはプログラミング未経験者の例として被験者 a の作

abcd

映像の長さ[s]

3.9

42.75

9.5

パッチ数

2324

ノード数

36403174

映像オブジェクトの最大数

315226

例を図 10 上，プログラミング経験者の例として被験者 dの作例を図 10 下，に示す．作例は制作された動画の中から2 シーンずつ取り上げた．

4.3

考察

アンケートの結果から，タイムラインを用いることで映像プログラムの実行時間の管理を容易に行えることがわかった．ビジュアルプログラミングに関しては，プログラミン
グ未経験者にとってはやや使いやすさの評価点が低いが，全くプログラムが組めないということはなかった．ノードとノードを線で結ぶことでプログラムを構築していくため，視覚的にも構造が把握しやすく，プログラミング未経験者
でも映像プログラムを組むことができることが分かった．
被験者からはノードに数値を入れるために「IObox」ノー
図 10（上）被験者 a の作例（下）被験者 d の作例

Fig.10 (Top) Example of subject a (Bottom) Example of subject d.

ドを作ると 1 つのパッチ内に「IObox」ノードがたくさん必要になりエディタが圧迫されてしまう意見があった．この問題を解決するためはノードに直接数値を入力できる機

4.2.2 アンケートの結果とプログラムの分析能が必要である．また，パッチ連携ノードで 1 つのパッチ

映像制作後に被験者に対して提案システムに関するアから複数の数値を送りたかったという意見もあった．現時

ンケート調査を行った．これは提案システムがユーザにと点ではパッチ連携ノードで送信できる値は 1 つだけであり，ってどの程度使いやすいものかを分析するためのものであ

この機能も強化することでより映像制作の幅が広がると考る．アンケートはタイムラインとビジュアルプログラミン

える．

© 2017 Information Processing Society of Japan205

情報処理学会 インタラクション 2017
IPSJ Interaction 2017

1-506-26
2017/3/2

表 3 の映像の各要素を比較すると，被験者 d は多くのパにそって図形を動かすといったことができない．また，壁ッチとノードを生成している．この差はパッチのコピーをにぶつかったら四角を反射させる，受け取った配列の中で活用したことで生まれた．被験者 d は作成したパッチをコx 座標が偶数の場合のみ色を変更するなど，細かい条件分ピーして一部分を変え，またパッチ間での連携を行うこと岐を用いた表現も困難である．制作できる映像はノードので多くのパッチとノードを扱った．

種類に依存しているため，テキストベースのプログラミン

映像の作例を比較すると，被験者全員がサンプルパッチ

グと比較すると映像制作の自由度が下がってしまう．

を元にして映像プログラムの構築を行ったため，回転アニ以上の点から提案システムは細かく時間管理されたプロメーションを基本とした作例が多くなった．プログラミン

グラミングによる映像制作に有用ではあるが，制作できる

グ未経験者の被験者は図形の回転を反対にする方法や，配映像はノードの種類に依存するため細かいアルゴリズムを列ノードの使い方を理解するのにやや時間がかかった．配用いた映像などの制作には向いていないと言える．

列ノードはテキストベースのプログラミングにおける for
文による繰り返し処理の役割を果たすため，プログラミン
グ未経験者にとって繰り返し処理の感覚がつかみにくかっ

6. まとめたと考える．また，パッチ間連携ノードもプログラミング

本論文ではタイムラインとビジュアルプログラミングをにおける変数の役割を果たすため，映像プログラムに組み用いた映像制作システムを提案した．タイムラインで映像込むことを控えてしまったと考える．

オブジェクトを一つずつ管理する方法では，大量の映像オブジェクトを扱うことや，数式に基づいた図形の移動など

5. 議論
実験の結果を踏まえ，提案システムでどのような映像をが難しい．プログラミングを用いればこの問題を解決できるがプログラミング未経験の映像制作者にとって扱うのが難しく，時間軸上での細かいパラメタ操作も難しい．

作ることができるのかについて述べる．提案システムでは提案システムでは映像プログラムを構築しやすくする

ビジュアルプログラミングを用いて for 文による繰り返しためにビジュアルプログラミングを用いてプログラムを組処理や数値の共有，演算などを行うことで数式に基づいた

み，タイムラインで作ったプログラムの実行時間を管理す

図形の移動や図形を大量に生成，操作することが可能であることで既存の手法の課題を解決した．本論文では提案シる．また，テキストベースのプログラミング言語では手間ステムの有用性を評価するための実験を行なった．実験ののかかるプログラム実行のタイミングの調整をタイムライ

結果，プログラミング経験の有無にかかわらずビジュアルンで管理することで容易に編集できる．これらの点から細プログラミングを用いて映像を制作できることが分かり，かく時間調整された，プログラミングの力が必要な映像のタイムラインが映像プログラムの時間軸上での管理に有用制作に向いていると考える．関連として映像用ビジュアルであることが示された．しかし提案システムでは制作が困プログラミング言語である vvvv には時間変化に応じて難な映像もあり，今後はそのような映像制作の方法につい様々な値を出力することができるノードが存在する．このて検討したい．

ノードはタイムラインで値の出力を管理するであり，プログラムの実行時間を管理する提案システムのタイムライン

参考文献とは別である．このノードを使用してシーンチェンジを実装するには映像プログラムのパッチをいくつか作成し，そ[1]れらを条件分岐で表示するタイミングを分ける必要がある．
しかし作成するシーンが多くなるほど条件分岐は複雑にな[2]り，調整も難しい．時間軸上でのパラメタ操作が難しいというプログラミングの問題を解決できても，シーンの切り替えといった映像プログラミングの問題に対しては有効な手段とは言えず，提案システムのもつタイムラインではこ[3][4]の問題にも対処できる強みがあると考える．Adobe Flash と比較した場合，プログラムを時間軸上で管理できるが複数プログラム間での連携ができない点や，プログラムの構造把握が難しいという点で提案システムに劣ると考えた．

[5][6][7]

次にこの提案システムでは作成が困難な映像について述
べる．図形の動きはすべてシステム側で用意したノードを使って表現しなければいけないため，ユーザの描いた軌道© 2017 Information Processing Society of Japan[8]

Kazutaka Kurihara, David Vronay, Takeo Igarashi. Flexible
timeline user interface using constraints. CHI’05, pp.1581-1584,
2005.
的場 寛, 中村 滋延. dial:音・映像構成のためのロータリーシーケンサ. 情報処理学会研究報告音楽情報科学, Vol.89, pp.1-5,
2011.
Paul E.Haeberli. ConMan: a visual programming language forinteractive graphics. SIGGRAPH’92, Vol22, pp.103-111, 1988.
小林 敦友, 志築 文太郎, 田中 二郎. データフロー図に基づ
くリアルタイム映像合成システム. 情報処理学会研究報告音楽情報科学, Vol.50, pp.1-6, 2008.
Max/MSP, https://cycling74.com/products/max/(2016-11-20)
vvvv - a multipurpose toolkit, https://vvvv.org/(2016-05-21)
Jun Kato, Tomoyasu Nakano, Masataka Goto. TextAlive:Integrated
Design Environment for Kinetic Typography. CHI’15,
pp.3403-3412, 2015.
Christopher D. Twigg, Doug L.James. Many-Worlds Browsing forControl of Multibody Dynamics, SIGGRAPH'07, Vol.26, No.3,
2007.

206