インタラクティブクリエイティブにおける裏の最新技術

この記事は、「インタラクティブクリエイティブマスターコース」【5月28日(水)開講決定】の開講に合わせ、掲載します。

遠崎 寿義(ザ・ストリッパーズ 代表取締役社長/クリエイティブ・ディレクター)

「インタラクティブクリエイティブにおける最新技術」といったときにみなさんは何を思い浮かべるのだろう?

3Dプリンター?AR?ビッグデータ?プロジェクションマッピング? HTML5、WebGL、openFrameworks、Cinder、Kinectなどなど。ここ数年の流行っている技術で思いつくものはこういったものだろう。

これらについては、アドタイを読まれる諸兄もよくご存じかと思うので、今回はあまり馴染みのなさそうなウェブアプリケーションの開発環境・デプロイ周辺の最近の技術を紹介してみよう。

オシャレエンジニアはJavascriptなど書かない!

HTML5、WebGLやスマホのブラウザゲームなどクライアント側で色々動くものを作るにはJavascriptは不可欠。だけどJavascriptは開発効率の悪いプログラム言語で、最近の巨大なウェブアプリケーションやゲームの開発には不向きだ。

そこで近年開発されたのが、MicrosoftのTypeScriptや、GoogleのDartCoffeeScriptなどのJavascript上位言語だ。これらはJavascriptに比べて厳密で開発しやすい。ただし、ブラウザではそのまま動作しないので、コンパイルしてJavascriptにしてウェブサイトに組み込む。

オシャレエンジニアはCSSも書かない!

この見出しはあおりすぎかもしれないが、大規模開発ではCSSで頑張るのは非常にしんどい。そこで、SASSというCSS拡張言語を使う。SASSはCSSの書き方がそのまま使え、変数や繰り返し処理などのプログラム言語で使える機能をサポートしている。

CompassというSASS用のフレームワークが提供されていて、一緒に使うことが多い。
SASSもそのままではブラウザでは動かないので、コンパイルしてCSSにしてウェブサイトに組み込む。

おしゃれなエンジニアは自動化する!

プログラムを変更するたびに、TypeScriptやSASSをコンパイルするのも面倒だ。そこでGrunt というソフトを使うのが最近の流行。このソフトはTypeScriptやSASSのファイルを監視して変更があるたびに自動的にコンパイルしてくれたり、テンプレート化したファイルから一括して複数のファイルを生成したり、表示しているブラウザを自動リロードしたりもしてくれる。他にも難読化コードや差分ファイルをFTPサーバーにアップしたりといったこともできる。

これらのソフトを駆使すれば、単純作業を減らし、よりクリエイティブなブラッシュアップ作業などに時間を割くことができる。デスマーチ(過酷な労働環境)になりがちなウェブの制作現場では、開発環境の効率化は重要な課題の一つ。

インタラクティブクリエイティブマスターコース」の私の講義では、プログラム言語に触ってみることも含め、時間の許す限りウェブサイトやスマホアプリなど色々な開発現場の話もできればと思う。


遠崎 寿義
ザ・ストリッパーズ 代表取締役社長/クリエイティブ・ディレクター

横浜出身、慶應義塾大学総合政策学部卒業。イメージソース取締役を経て、2005年独立し、ザ・ストリッパーズを設立。多くの広告キャンペーン制作、オンラインサービスの開発、ディレクションからプログラミングまで幅広く担当。Cannes Lions Gold / One Show Interactive Gold / ロンドン国際広告賞 Winner / Tokyo Interactive Ad Award Goldなど受賞多数。

JavaScript」関連記事はこちら


【インタラクティブクリエイティブマスターコース】特別連載
第1回 「宮崎駿監督の引退会見にみる、心を動かすコミュニケーションの変化とは」
 ――澤邊 芳明(ワン・トゥー・テン・デザイン社長)
第2回 「インタラクティブなクリエイティブの企画の出し方のヒント」
 ――木下 謙一(ラナエクストラクティブ 代表取締役CEO/クリエイティブディレクター)
第3回 「Co−Creative = 協調型プロジェクトのすすめ」
 ――阿部 淳也一(ワンパク代表取締役 クリエイティブディレクター)
第4回 「音楽から考える、理想のクリエイティブ・チーム」
 ――村田 健一(ソニックジャム 代表取締役 チーフプロデューサー)
第5回 「インタラクティブクリエイティブにおける裏の最新技術」
 ――遠崎 寿義(ザ・ストリッパーズ 代表取締役社長/クリエイティブ・ディレクター)こちらの記事です

その他「インタラクティブクリエイティブマスターコース」関連記事はこちら

この記事の感想を
教えて下さい。
この記事の感想を教えて下さい。

この記事を読んだ方におススメの記事

    タイアップ