LogoMark.png

日本映像学会2015 の変更点


*MotionSquare
― マルチ映像提示のための Web システム
~
~
~
RIGHT:
井上 貢一 / Inoue, Koichi 所属:九州産業大学芸術学部デザイン学科
~
~

#contents2_1
//#contentsx
~
~

**はじめに 

***これは何?
 本作品は、複数の動画をWebページ内に配置し、それらを同時再生してマルチ映像として楽しむためのWebシステムである。動画をファイルとして扱うことができる今日では、HTML5の<video>タグを用いた直接的な埋め込みや、<iframe>タグを用いたYouTube動画の埋め込みなど、Webページに複数の動画を配置して、それをマルチ映像として表示・共有することができる。しかし、それにはHTMLの知識が必要であり、一般には若干敷居が高い。また例えばYouTube上にチャンネルを開設すれば、登録した動画を羅列再生することも可能だが、それでは見せ方の自由度が低い。そこで筆者は「まとめサイト」等によく用いられるWikiをベースに、動画を自由なレイアウトで配置するためのプラグインを作成し、誰にでも簡単に動画のマルチ再生ができるしくみを開発した。
~

***動作環境
本システムの動作環境については、特別に必要な条件はない。一般的なブラウザがあればPC、タブレット、スマートフォンなど、環境を選ばず動作可能である。
~

**制作の背景
***マルチスクリーン
 複数の映像を一挙に提示するマルチ映像。個々の映像素材の色彩や動きが相互に関係しあうその視覚体験に、筆者は以前から音楽的な魅力を感じていた。視覚的なコンポジションにおいては、個々の映像は旋律を奏でる楽器であり、空間的な和声の進行には、無限の組み合わせがある。
~

***Design Concept|「編集可能性」
筆者がその活動において常に意識しているのは、生産完成品としてのコンテンツをつくることではなく、生産性としての「仕組み」を提供することである。誰もが手に入れることができ、小さな規模で応用でき、人間の創造力を喚起させるような「編集可能性」の提供。今回は、インターネット上に無限にある「映像素材」の活用を前提とすることで、その可能性はより大きなものとなった。
~

私が考える「デザイン=技術の人間化」とは
「資源を編集可能な状態で共有する」ということです。 
ユーザーによる自由な編集 ( 改変 ) を可能にするとともに、 
ユーザーの学習意欲を喚起する。 そうしたモノ・仕組・コトが、
社会の健全な発展に貢献すると考えています。
作品はひとつの「生産性」であって、生産完成品ではない
 (J. クリステヴァ ,1984)
~

***標準仕様とブラウザ環境の充実
-Web のドキュメントに関する標準仕様の定着
➡ より多くの人に「編集」・「学習」の機会を与える
-ブラウザ開発環境の充実 
➡ 高機能な「開発ツール」が標準で整備され、開発効率がアップ
-テキストファイルのみで完結する   
➡ テキストエディタひとつで、いつでもどこでもコンテンツ作りができる
~
~

**使用した技術

***Web標準技術
-HTML5( Hyper Text Markup Language )・・・文書構造
-CSS ( Cascading Style Sheets )・・・・ビジュアル
- JavaScript  +  Libraries ( three.js / physi.js )・・・ふるまい
-PHP(Hypertext Preprocessor / Personal HomePage Tool )・・・・サーバーサイド処理
~

***Pukiwiki
 PukiWikiとは、オープンソースのCMS(Content Management System)で、このシステムを用いたWebサイトでは、Wikipediaのようにブラウザの画面からページの編集ができるので、誰にでも簡単に文字や画像、また各種コンテンツを配置することができる。
 そこで、1)動画名、2)幅、3)高さ、という3つのパラメータだけで動画を表示するプラグインを作成し、これをシステムに投入するかたちで、ページ内に複数の動画を配置できるしくみを実現した。例えば、
 &Youtube(ABC,320,240);
と記述すると、ページ上には、YouTubeの動画(ID=ABC)が320x240で表示される。これを3つ連続して書けば、3面のマルチスクリーンがページ上に実現する…というぐあいである。
~

***ファイル構成とソースコード

(書きかけです)
~
~


***開発環境とライブラリ
 PukiWikiは、そのプラグインも含めて、大半のファイルがPHP(Hypertext Preprocessor)で書かれている。また、サイトのビジュアルを定義するCSS、インタラクティブなアクションを実現するJavaScriptも、すべてテキストファイルであることから、開発に用いたのはテキストエディタのみである。またデバッグには、WebブラウザであるFirefox2)に標準で搭載された開発ツールを用いた。すべてオープンな技術である。

gedit テキストエディター
Linux 標準のシンプルなテキストエディタ
Firefox 標準 Web 開発ツール
JavaScript プログラムのバグ発見に貢献
Linux ( Ubuntu12.04 LTS )
~
~

**結び


***Small is Beautiful
科学・技術の方法や道具とは、
・安くてほとんどだれでも手に入れられ、 ・小さな規模で応用でき、 ・人間の創造力を発揮させる ようなものでなくてはならない。
E.F.Schumacher | 1973


~

ご清聴ありがとうございました。
~
~
~
~