ぼくらのプログラミングから、
From “programmers are people, too”

みんなのプログラミングへ
to “people are programmers.”
国立研究開発法人 産業技術総合研究所

加藤 淳
http://junkato.jp/ja (arcatdmz)

2015/9/20 第48回 情報科学若手の会 若手特別講演

digitalmuseum’00-

http://digitalmuseum.jp• 主宰; 高校の頃から運営• フリーウェアやデザインした作品を展示
arX MusicPlayer ’01-06• 友人との創作活動の拠点• 産学交流の場づくり
CD制作
-‘07

ゲーム制作

‘07-09

アニメ設定考証{ぼくらの→みんなの}プログラミング‘12

お茶会(産学交流)‘12-14

立花隆ゼミ (SCI/サイ)‘05-07

http://sci.gr.jp/• 幹事、デザイナ、プログラマ; 学部生活を捧げた• ジャーナリストの立花隆氏と学部生で作るゼミ• 最先端の科学技術に関する取材記事を配信• 企画→参加募集→取材→執筆→校正→Web公開• 誰でも記事をWebページ化できるシステムの開発

NHK番組やNINSシンポジウムの補足

攻殻機動隊 製作元との共同企画{ぼくらの→みんなの}プログラミング

研究者の討論会主催

おうちハック

http://kadecot.net/ouch-hack/• 実践中！ (リズム家電,なめこカメラ, …)• 画像処理のためのビジュアル環境を研究{ぼくらの→みんなの}プログラミング‘1１-OpenPool‘12

http://openpool.cc/• 元メインプログラマ; 一昨年グッドデザイン賞• 大学至近の学生向けカフェ発、ビリヤード台を拡張する企画• オープンソースでSDK公開• API設計、独自ハード用ライブラリ実装などを担当

Engadget, GIZMODOなど大手サイトで紹介

Lab-Cafe{ぼくらの→みんなの}プログラミング

研究分野:

Human-Computer Interaction• 人とコンピュータの関係改善• とくに、プログラミング体験の改善

HumanComputerInteraction

ProgrammingLanguage

人々が快適に楽しく過ごすための仕組み作り{ぼくらの→みんなの}プログラミング

仕組みに萌える

Whipple Museum of the History of Science{ぼくらの→みんなの}プログラミング

仕組みに萌える

Whipple Museum of the History of Science{ぼくらの→みんなの}プログラミング

仕組みを疑う・考える・作る

異質な人が集まって何かが起きる仕組み(場)をつくる

誰でも創造性を発揮できる・楽しめる仕組み(システム)をつくる

研究分野:

Human-Computer Interaction
人々が快適に楽しく過ごすための仕組み作り{ぼくらの→みんなの}プログラミング今日の講演の目標• プログラミングに使っている仕組み（開発環境）を疑ってみてほしいです！
• プログラミングに使っている仕組みの過去を知り、少し先の未来を知ってほしいです！！
• プログラミングの未来、社会の未来について、考えてみてほしいです！！！

よろしくお願いします！
{ぼくらの→みんなの}プログラミングぼくらのプログラミング
みんなのプログラミング{ぼくらの→みんなの}プログラミング1960年代前半までの開発環境• コンピュータは自動計算のためのもの• 「コーディング」はカードにパンチすることを指した機械語をカードに記録

記録する内容は自力で計算実行

プログラミングは全くインタラクティブじゃなかった

12

統合開発環境の登場• コンピュータ上でインタラクティブに開発できる• ワークフロー全体を支援してくれる
public class HelloWorld {// Hello World!
public static voidmain(String[] args) {System.out.println("Hello World!");}}

機械語を電子的に保存

実行

スクリーン上で高級言語を記述
エディタ

コンパイラ

デバッガ

インタラクティブにプログラムを作れるようになった
13

文字ベースの統合開発環境 (1/2)
Dartmouth Time-Sharing System [1964-]• ソースコードの読み込み･保存、編集、コンパイル、実行が一通りできた初めての統合開発環境

GW-BASICDTSSに似たMicrosoft製方言

14

文字ベースの統合開発環境 (2/2)
Visual Studio (Microsoft C) [1983-], Eclipse(IBM VisualAge) [1984-], Xcode [2003-], …
• 文字列の高級言語を編集できるエディタ• メモリ内容を文字列で表示できるデバッガ• …
インタフェースの大部分が文字ベースという点では40年前と同じ
15

実世界データを伴うプログラムの増加
実世界入力

ab

（センサの生データ）

a.RGBカメラ映像情報

b.深度センサ

姿勢情報

実世界出力

c

（アクチュエータの生データ）

c. 姿勢情報ロボット16

実世界データを伴うプログラム開発の特徴 (1/2)
従来型入出力:

開発環境

実行環境

開発環境

実行環境

実世界入出力:17

実世界データを伴うプログラム開発の特徴 (2/2)
従来型入出力:シンプルで断続的文字表記が容易

複雑で連続的文字表記が困難

実世界入出力:18

Picode[Kato, ACM CHI ’13]

31

DejaVu[Kato, ACM UIST ’12]

自動録画

録画データの再生プログラム再実行

40

VisionSketch

Canvas[Kato, GI ’14]

Visual Editor

Code Editor
49

これからのプログラムとデータ
さまざまな種類のデータがあふれる時代、ロジックだけを文字で開発する環境では不十分• プログラムとデータの主従関係逆転• 開発（プログラム）と制作（データ）の境界消失{ぼくらの→みんなの}プログラミングこれからの統合開発環境• プログラムとデータの主従関係逆転• 開発（プログラム）と制作（データ）の境界消失• 各データの扱いに特化した開発環境が必要• 制作・編集支援ツールの知見を融合するべき• （視覚以外も）五感をフル活用するインタフェース
メディアコンテンツのための統合開発デザイン環境がウェブ上に現れる{ぼくらの→みんなの}プログラミングみんなのプログラミング
ぼくらのプログラミング[Kato, ACM CHI ’15 & ICLC ‘15]
{ぼくらの→みんなの}プログラミング歌詞アニメーション

more at http://textalive.jp{ぼくらの→みんなの}プログラミング歌詞アニメーションの魅力
カラオケ表示

歌詞アニメーション• どの楽曲でも同じ見た目• 発声に合わせて色が変わるだけ• 楽曲ごとに歌詞を魅力的に演出• 動画共有サービスで増加中

歌詞アニメーションは音楽の楽しみを広げてくれる{ぼくらの→みんなの}プログラミング歌詞アニメーションの自動生成• 産総研の謎技術でウェブ上の歌詞・楽曲から歌詞アニメーションを自動生成• スタイルを選んで演出を瞬時に切り替えられる

歌詞 楽曲

歌詞URL未登録の楽曲ページ

歌詞の発声
タイミング

動画

産総研の謎技術{ぼくらの→みんなの}プログラミング

歌詞URL登録済みの楽曲ページ

歌詞アニメーションの編集

編集パネル

タイムライン{ぼくらの→みんなの}プログラミングみんなの「プログラミング」？
( ﾟдﾟ)＿(__つ/￣￣￣/＿＼//￣￣￣( ﾟдﾟ ) ??
＿(__つ/￣￣￣/＿＼//￣￣￣{ぼくらの→みんなの}プログラミング動画vは時間の関数f(t)for each (全描画対象オブジェクト)
描画のためのパラメタを操作

for each (グラフィック)
座標系操作と描画

for each (フレーズ)

座標系操作
for each (単語)座標系操作
for each (文字)描画

演出のライブプログラミング• 文字の動きなどの演出機能をプログラミングできる• プログラミングした内容がすぐに動画に反映される

TextAliveは、ユーザがプログラミングで機能を強化できる{ぼくらの→みんなの}プログラミング「みんなの」プログラミング？
( ﾟдﾟ)＿(__つ/￣￣￣/＿＼//￣￣￣( ﾟдﾟ ) ??
＿(__つ/￣￣￣/＿＼//￣￣￣{ぼくらの→みんなの}プログラミングみんな幸せなプログラミング• 成果をみんなが使える• みんなが好きに調整できる{ぼくらの→みんなの}プログラミング

プログラマ的方法の一般化
例えば…
バージョン管理貢献度の可視化{ぼくらの→みんなの}プログラミング

全部が関数＝解像度無限大{ぼくらの→みんなの}プログラミングhttp://textalive.jp
ぜひ遊んでみてください！
{ぼくらの→みんなの}プログラミングさまざまな種類のデータがあふれる時代、ロジックだけを文字で開発する環境では不十分• プログラムとデータの主従関係逆転• 開発（プログラム）と制作（データ）の境界消失• 各データの扱いに特化した開発環境が必要• 制作・編集支援ツールの知見を融合するべき• （視覚以外も）五感をフル活用するインタフェース
メディアコンテンツのための統合開発デザイン環境がウェブ上に現れる{ぼくらの→みんなの}プログラミングメディアコンテンツのための統合開発デザイン環境がウェブ上に現れる• プログラミングできる• プログラミングでツールそのものの機能を拡張できる• 機能拡張の結果をみんなで共有・活用できる• プログラマ的方法で運用される例）バージョン管理、貢献が可視化される、再利用性、etc.

• プログラミングの利点が活かされる例）解像度無限大、転送サイズがコンパクト、etc.

プログラミング＝{ぼくらの→みんなの}プログラミング

歌詞アニメーション

以外にも応用可！

プログラミング＝• 昔: プログラミングは{どうして|どこが|なぜ}• 今: 確かにっぽい を始点に議論できる• みんなでにプログラミングしましょう？

Programmers are people, tooPeople are programmers{ぼくらの→みんなの}プログラミング今日の講演の目標• プログラミングに使っている仕組み（開発環境）を疑ってみてほしいです！
• プログラミングに使っている仕組みの過去を知り、少し先の未来を知ってほしいです！！
• プログラミングの未来、社会の未来について、考えてみてほしいです！！！

ありがとうございました！
{ぼくらの→みんなの}プログラミング