2018年度 メディアプログラミング特論

      2018年度 メディアプログラミング特論 はコメントを受け付けていません

授業概要

プログラミング言語を習得するということは、どのような行為なのだろうか。何のためにプログラミング言語を学習するのだろうか。将来プログラマー(エンジニア)になるため?ゲームを開発するため?何となくやっておいておいたほうが良さそう?

プログラミング言語学習の授業は、一般的に言語そのものを学習することが主眼に置かれ、往々にしてただアルゴリズムを学習するものや、お絵かきの授業になることが多い。もちろん、それでも言語学習の目的さえ達成できればいいという考え方もあるがが、果たしてそれだけでいいのだろうか。プログラミング言語を習得した後、この言語をどのように使ったらいいのだろうか。

これらの問題に対する回答として、本授業ではプログラミング言語を「目的を達成するための表現手段」および「社会問題を分析するためのツール」として捉える。

本授業では、プログラミング言語の習得の前にまず問題設定を行い、その問題を可視化するための技術としてプログラミング言語を学習する。最終的にデータ・ヴィジュアライゼーションの手法を利用して、プログラミング言語を利用して社会問題を可視化する。

授業のプロセス

●STEP1

まずは社会問題を認識するところから始めるため、今年度は「廃棄」をテーマとしたフィールドワークをおこない、それぞれが社会問題に対して考える時間を作る。
リサイクルセンター、バイオマス発電機関などを予定している。

●STEP2

インフォメーションデザインの基礎的な要素となる形態、色彩、タイポグラフィ(文字組のデザイン)を行い、その結果としてのダイアグラムデザイン(図のデザイン)を行う。これらの実習をもとにして、設定したテーマについてのプレゼンテーションをグループでおこなう。

●STEP3

プログラミング言語の実習をおこなう。データ・ヴィジュアライゼーション用に最適化された、javaScriptのライブラリであるd3.jsを使用する。
参考:https://d3js.org/

●STEP4

これまでの実習をもとにして、自身で「廃棄」に関連するテーマを設定し、インフォメーショングラフィックスを作成する。

スケジュール

1. 9/14 ガイダンス

データ・ヴィジュアライゼーションの簡単な歴史
ポイント:不可視の現象を可視化する

まずは2人の会話を5分間録音する
素材:conversations

2. 9/21 ヴィジュアライゼーション基礎1(色彩、タイポグラフィ)

色彩
イメージと色彩の例
色彩実習テンプレート
色彩とイメージサンプル
タイポグラフィとは
和文/欧文フォント
フォントファミリー 
実習用テンプレート

4. 9/28 フィールドワーク(厚木市資源化センター

10/12 休講

3. 10/13 フィールドワーク(株式会社日本フードエコロジーセンター

5. 10/19 ヴィジュアライゼーション基礎(インフォグラフィック)

都道府県別のデータを使って、グラフおよび日本地図を作成する。
参考サイト:
統計局ホームページ http://www.stat.go.jp/
農林水産省の統計 http://www.maff.go.jp/j/tokei/index.html

素材:日本地図
japan_two_map160414.ai

素材:肉類の消費マップデータ
meat_map_data160512.xlsx

Excelの絶対参照

6. 11/2 中間課題制作(グループ制作)

7. 11/9 中間課題発表、プログラミング実習1(d3.js)

初めてのD3
データのバインド

8. 11/16 プログラミング実習2

div要素の描画
SVGの描画

9. 11/20(振替) プログラミング実習3

スケール
目盛り
データのアップデートとトランジション1

10. 11/30 プログラミング実習4

データのアップデートとトランジション2

11. 12/7 プログラミング実習5

enter、update、exitの関係
d3における連想配列(key, value)
マウスアクション

12. 12/14 プログラミング実習6

折れ線グラフ
円グラフ
積み上げグラフ
最終課題のアイデア出し

13. 12/21 最終課題制作

d3でCSVファイルを読み込む
d3で地図を描画する

14. 1/11 最終課題制作

15. 1/25 講評

課題

■小課題2-2:名刺を作成する

左にローマン体を使ったレイアウト。右にサンセリフ体を使ったレイアウトを行う。重要な点は、限られた条件で一書体のファミリーを使ってどれだけ変化を出せるか。
テンプレート

  • 各レイアウトにそれぞれ1書体だけ使う。ファミリーの使用は自由。
  • ローマン体はBaskerville, Minion, Adobe Caslon, Adobe Garamond、サンセリフ体はAvenir (Next), Helvetica (Neue), Myriadの中から選ぶ。
  • 文字以外は使わない。
  • 使用する色は白黒のみ(グレーは使わない)。サイズは90mm x 55mm以内。
  • 必ず入れる構成要素は、氏名、大学の住所と電話番号。メールアドレス。その他に入れたい人は他の情報を入れても構わない。
  • pdfで提出。
  • 大学の情報は以下の通り。

1583 Iiyama, Atsugi, Kanagawa
243-0297, Japan
Phone: 046-242-4111
Fax: 046-242-3000

■中間課題(インフォグラフィックス)

全体テーマの「廃棄」に沿った形でグループごとに自由にテーマを設定し、統計データを収集する(例:海洋プラスティック問題、食品ロスなど)。
この調査の結果として一般的には(なるべく)あまり知られていない事実を発見し、調査結果をインフォグラフィックを利用してプレゼンテーションをおこなう。

  • 2名程度のグループを作る。
  • プレゼンシート5ページ前後。PDF、PowerPoint、Keynoteなどを使用して作成すること。
  • 必ず図やグラフなどのインフォグラフィックと文章を用いて分かりやすく伝えることを意識すること。
  • プレゼンでは必ず全員発言すること。

■小課題3(散布図)

 実習を踏まえて、D3で散布図を作成する。
例:体重と身長の関係、都道府県の面積と人口の関係など。少なくとも30セット以上のデータを使うこと。

■小課題4

2種類以上のデータを用いて、交互に表示するプログラムを作成する。例:違う年度の都道府県別データ。
条件:

  • ボタン(テキスト)を押すと、切り替わるようにプログラムする。
  • 棒グラフを利用すること。
  • ソートの機能をつけてもいい。

■最終課題

これまでの実習を踏まえて、「廃棄」をテーマとしたデータの視覚化をおこなう。

  • D3.jsとデータベース(json)を使用すること。
  • 少なくとも2種類以上のデータをインタラクティブに体験することができるメディアにすること。
  • なるべく、あまり知られていない事実を扱っている方がいい。
  • データの収集は、必ず一次情報(オリジナルのデータ)を探し、作品中で出典元を明記すること。
  • ブラウザでプレゼンテーションすること。

評価

出席率 50%、小課題 15%、中間課題 15%、 最終課題 20%
みなさんの理解度を見ながら小課題の数が増減することがあります。上記の配点はあくまで目安です。