2017

2017 – メディアデザイン実習J

ノートPCを忘れた方

  • Raspberry Pi をお貸しします。
  • Dellデスクトップには、開発に必要なソフトが入っていない/入れられません。

今年度の授業内容について

◆目的・ねらい
この授業では、実践的なウェブ制作やゲーム開発を軸に据えて、プログラミング全般について解説します。履修者は、IT分野においてディレクター・プログラマー・エンジニア・デザイナー・コーダーに求められる基礎的事項を横断的に学習します。
プログラマーとしての高度な専門性よりもむしろ、ディレクター・プランナー・デザイナーに求められる普遍的な視野の獲得を目指します。

◆内容
UI実装からCMS導入、サーバーサイドプログラミング、ゲームプログラミング、フィジカルコンピューティングまで、授業内容は多岐にわたります。
プログラミングだけでなく、グラフィックデザイン・メディアアート・企画立案などの話題も積極的に取り入れ、なるべく広く浅くわかりやすい授業を目指します。
各回授業の冒頭5〜10分で、アートフィルム・ミュージックビデオ・アニメーションなどを上映・解説する予定です。

  • 04/14 第1回 ガイダンス
  • 04/21 第2回 ヒアリング・おさらい・環境構築
  • 04/28 第3回 Excel関数・Photoshopバッチ処理・ターミナルとコマンドプロンプト
  • 05/12 第4回 JavaScriptの基本とステップアップ
  • 05/19 第5回 商用サイト(TVアニメ)のUI実装を再現する
  • 05/26 第6回 さまざまなUIとアルゴリズム
  • 06/02 第7回 Web APIとオープンデータ
  • 0_/__ 第8回 PHP/MySQL ロゴジェネレーターとアンケートフォーム
  • 0_/__ 第9回 WordPress(1)基本設定とプラグイン
  • 0_/__ 第10回 WordPress(2)テーマカスタマイズ
  • 0_/__ 第11回 ドキュメンタリー映画「Branching Paths」または「Indie Game: The Movie」
  • 0_/__ 第12回 ゲームの制作(1)トリックテイキング(ターン制オンラインゲーム)
  • 0_/__ 第13回 ゲームの制作(2)Timber ManとMagic Piano
  • 0_/__ 第14回 Arduinoによるフィジカルコンピューティング(IoT)

◆事前・事後
昨年度までの授業内容については http://zokei.koekatamarin.com を参照してください。

◆テキスト
主に http://zokei.koekatamarin.com の内容をテキストとして使用します。

◆参考書
授業内で随時説明します。

◆用意するもの・要望
第2回目から、ノートパソコンを持参してください。
無い方は第1回目で相談してください。

◆成績評価
出席点を主とし、実習内での制作状況などを加味して客観的に評価します。

第14回 Arduinoによるフィジカルコンピューティング

Arduinoボードと電子部品一式を用意してあります。

 

第13回 ゲームの制作(2)Timber ManとMagic Piano

 

第12回 ゲームの制作(1)トリックテイキング(ターン制オンラインゲーム)

  • アナログゲームの世界
  • 天才ゲームデザイナー「アレックス・ランドルフ」による「ハゲタカのえじき」
  • 「ハゲタカのえじき」をプログラミングする

ゲーム紹介: ハゲタカのえじき / Hol’s der Geier 高円寺0分すごろくや
http://sgrk.blog53.fc2.com/blog-entry-90.html

 

第11回 

 

第10回 WordPress(2)テーマカスタマイズ

 

第9回 WordPress(1)基本設定とプラグイン

まず、前提となる知識を抑えておきます。

実践的なWordPressの話

 

第8回 PHP/MySQL ロゴジェネレーターとアンケートフォーム

今回は、サーバーサイドプログラミングの解説と実習です。
使用するプログラミング言語は、Lightweight Languageとして有名な「PHP」です。
また、データベースとして「MySQL」を使用し、PHPからこれに接続します。

 

第7回 Web APIとオープンデータ

 

第6回 さまざまなUIとアルゴリズム

 

05/19 第5回 商用サイト(TVアニメ)のUI実装を再現する

今日の映像コーナーでは、「スパイク・ジョーンズ」のMTV作品を紹介します。

ここで、ソフトウェアや素材などの「ライセンス」について説明しておきたいと思います。
さまざまなライセンス

 

さて、まずは、エディタの設定を見直したいとおもいます。

  1. プログラミング用フォントの使用
  2. 文字を大きくする
  3. エディタの背景は黒く(暗く)する

1. 可読性に優れ、見間違いを起こしづらい、いわゆる「プログラミング用フォント」というのがいくつか存在します。

MacではOpenType、WindowsではTrueTypeをダウンロードします。
こいつをインストールしたら、Atomでは、設定画面から
RictyDiminished-Regular」を指定します。
※環境によっては、「RictyDiminished-Regular.ttf」とすべきかもしれません。

このフォントは、例えば英語の小文字のエル「l」や、大文字のアイ「I」、数字の「1」といった見間違いやすい文字が見分けやすくデザインされています。
また、全角スペースが□として表示されているので、全角スペースまじりのエラーを起こさずに済みます。

2. さらに、フォントサイズを思い切って「21」とか「18」ぐらいにしましょう。

3. テーマを「Atom Dark」か「One Dark」にしましょう。

 

さて、前回の続きです。
足し算のみが出来る「かんたん電卓」のようなものをつくりましょう。

動作サンプル

まずどのような順番で取り掛かっていけばよいでしょうか?

(今回は設計書や仕様書、デザインラフなどは脳内で処理してしまうこととします)

1) UIモックアップ
まず、簡単な見た目を作ってしまいます。
具体的には、HTMLタグを書いていきます。
CSSを書くとしても、最低限に留めます。

 

2) プログラム
次に、画面上の要素を、適切に動作させていきます。
具体的には、JavaScriptコードを書いていきます。
HTMLコードから、ユーザーの入力した値やイベントを取ってきて、プログラムで解散した結果を返す(出力する)ための、jQueryコードを書きます。

 

3) 仕上げ(デザインの適用)
動作するモックアップが完成したら、最後に見た目を整えます。
具体的には、CSSを書いていきます。

 

4) テスト
見た目まで本当に完成したら、テストを行います。
テストは大きく、動作テスト(正しく動くか)と、ユーザビリティのテスト(使いやすく出来ているか)に分かれます。

 

ゲーム制作の場合は、テストを行ったあと、完成したものをまたゼロから作り直すことはよくあります。実際にプレイしてみて「面白くない」「気持ち悪い」といったことがはじめてわかるものであり、正解がない世界だからです。

ウェブの場合は、仕様書や設計書やデザインカンプの段階でユーザビリティが考慮されることが多いですし、またウェブというものはゲームに比べると正解らしきものがだいたい存在し、そもそもそんなに可能な表現の幅が広くないので、作り直すとしてもそんなに大きな範囲を直したりはしません。

 

では、少しお時間を設けますので、各自考えながら「かんたん電卓」のコーディングに取り掛かってみてください。
まだできなくても全然問題ありません。
まず「自分で考える」クセをつけてもらうために、トライしてみて欲しいというのがこのセクションのねらいです。
あとできちんと一緒に適切なコードを説明していきます。
.
.
.
では、実際に動くコードの説明に入ります。

&bnsp;

では、このセクションからは徐々に、自分で考えながらコーディングしていけるようになっていただきたいと思います。

実際にプログラミングする感覚をつかもう
ここで取り組む内容は以下の4つです。

1:ボタンがクリックされたらダイアログ表示
2:ボタンがクリックされたらオブジェクトが右に移動する
3:ボタンがクリックされたら背景が変わる
4:「翠星のガルガンティア」を再現する

いかがだったでしょうか。

ポイントは、animate() addClass() attr() の3つのメソッド。
animate()の「イージング」は、こちらのプラグインをHTMLで読み込むことで多彩な表現が可能になります。

 

05/12 第4回 JavaScriptの基本とステップアップ

今日紹介する映像のテーマは、「板野サーカスと伝説の5秒」です。

みなさんGWはいかがお過ごしでしたか。
いざまとまった休みができたからといって、何も手を付けられない人もいるかもしれません。
そういう人は、それはそれでダラダラするということが、必要な時間だったのでしょう。
無駄にしたなぁ〜などと悔しがる暇があったら、今この瞬間から気持ちを切り替えて明るく楽しく「日常」を大切にしていきましょう!

 

勉強やスキルアップ、物事へのチャレンジは確かに億劫ですが、習慣にしてしまえば楽になります。
まずはゲーム感覚で経験値を貯めてレベルを上げるように、将来の自分の輝かしい姿を想像しつつ、いま目の前のチマチマを楽しんでしまえばいいのです。
習慣を獲得することができれば、何も考えずにできるし、やらないと気持ち悪くなります。
騙されたと思って、なにか習慣を作って下さい。

日課にする・習慣づける

 

今回は即興の特別実習として、ブラウザ上で動作する人工無能を制作しました。

HTML5/JS/CSSで制作したプログラムは、ブラウザ上で動作するだけでなく、スマホアプリやデスクトップアプリ(electron)としても機能します。

 

04/28 第3回 Excel関数・Photoshopバッチ処理・ターミナルとコマンドプロンプト

今週の映像は「ソウルバスと映画タイトルバック」です。

 

昨今、プログラミング教育が大切、と盛んに言われています。
しかしその実態は「ほ〜ら先生の言う通りにやれば、クマさんが右から左に動きましたねー」とかその程度のもので、率直に言ってあまり意味のあるものではないと思います。

「プログラミング的思考」を育むこと自体は歩いことではないですが、あまりにも稚拙なことが問題です。
実際には、何かこれまでにない価値があるものを生み出そうとするときには、もう少し気合の入ったスキルが必要です。

エンジニアやデザイナーは、専門知識がなくてもものが作れる社会を目指してはいますが、まだまだ過渡期です。
100年後の人たちから見たら、「そんなめんどくさいことしてたの?!」と言われるかもしれませんが、それは歴史の宿命というものです。
現実問題として、あなたが作りたいと思うもの、実現したいと思うものに必要なスキルや知識を身に着けておく必要があります。

 

少々強引ですが、ここで、ソフトウェアや素材などの「ライセンス」について説明しておきたいと思います。
さまざまなライセンス

 

まずは前回の続きです。

前回、写経をしてみて、単純な打ち間違いで時間をとられた諸君もおられたのではないでしょうか。
箇所によってはconsoleにエラーメッセージも吐き出されず、非常にデバッグが困難になることがあります。
打った文字・打った行が正しいのか、確認しながらしっかりコーディングしていきましょう。

さらに補助として、エディタの設定を見直したいとおもいます。

  1. プログラミング用フォントの使用
  2. 文字を大きくする
  3. エディタの背景は黒く(暗く)する

1. 可読性に優れ、見間違いを起こしづらい、いわゆる「プログラミング用フォント」というのがいくつか存在します。

MacではOpenType、WindowsではTrueTypeをダウンロードします。
こいつをインストールしたら、Atomでは、設定画面から
RictyDiminished-Regular」を指定します。
※環境によっては、「RictyDiminished-Regular.ttf」とすべきかもしれません。

このフォントは、例えば英語の小文字のエル「l」や、大文字のアイ「I」、数字の「1」といった見間違いやすい文字が見分けやすくデザインされています。
また、全角スペースが□として表示されているので、全角スペースまじりのエラーを起こさずに済みます。

2. さらに、フォントサイズを思い切って「21」とか「18」ぐらいにしましょう。

3. テーマを「Atom Dark」か「One Dark」にしましょう。

 

さて、ひとつプログラムを書いてみたわけですが、みなさんのなかには、「JavaScriptとjQueryってどう違うの?」といった疑問がいまいち払拭できていない方もおられるかもしれません。
ここまででJavaScriptの基本には触れましたが、さきほどのサンプルはjQueryで書かれていました。昨年度の授業でjQueryについても学習されているはずですが、簡単におさらいしましょう。

 
それでは、JavaScriptとJQueryについておさらいを済ませたところで、次のコーディングにも取り組んでみましょう。

写経ですが、少しだけ面白みが増したサンプルになっており、最初の写経よりは少し何かが見えてくるといいのですが。。。

写経 その2
ポイントは「クリックしたら…」と「val()」「html()」

 

04/21 第2回 ヒアリング・おさらい・環境構築

今週の映像は「佐藤雅彦とノーマン・マクラレン」です。

さて、前回はきちんと画面が表示できなかったので、改めて自己紹介させてください。

ウェブ制作スキルの確認

さて、本日から数回は、ウェブUIのコーディングに関する実習を行っていきます。

コーディング環境

エディタについて
エディタは最近では、Atom、Bracket、SublimeTextなどがよく使われます。
Mac標準の「テキストエディット」や、Windows標準の「メモ帳」は使用すると痛い目にあいます。
またこの授業ではDreamWeaverはサポートしません。
DreamWeaverは本当の初心者にはいいのかもしれませんが、ソフトを使うことの意味が大きすぎて、ソフトに使われるような融通の効かない制作スタイルになってしまいます。誰でも使えるように作られた高額なソフトの使い方を勉強することは、スキルとは言えません。

Boilerplateについて

ブラウザについて
ウェブには標準の技術仕様というのがいろいろあります。RFCとかW3Cとか。
ブラウザは、仕様に合わせながら、それぞれ異なる企業が実装したソフトに過ぎないので大小さまざまな違いがあります。
CSSやJavaScriptのコードの解釈そのものが違ったりもします。つまり、このブラウザでは動くのに、こっちでは動かない!ということがあります。かつてほどではありませんが、ブラウザの互換性の問題を甘く見てはいけません。
「Google Chrome」は、もっとも標準的で、処理速度も速く、最新の仕様に対するアップデートも早いブラウザです。
まずは、Chromeを標準のブラウザとみなしてChromeで確認しながら制作し、そのあとでSafariやFirefoxで動作確認して修正する、という手順が最も効率的です。

 

さて、みなさんそれぞれウェブ制作のスキルにばらつきがあると思います。
まずは、HTML/CSS/Javascriptによる比較的簡単なサンプルを確認しましょう。
それぞれ、自分一人で作ることが出来るかどうか、考えてみてください。

  1. ボタンがクリックされたらオブジェクトが右に移動する
  2. ボタンがクリックされたら背景が変わる
  3. ページ切り替えの際にカーテンのようなアニメーション
  4. JSとHTML5による ルパン三世タイトルコール
  5. iTunesからジャケット画像を取得して表示

みなさんの多くにとって、いきなり上記デモのようなものを自分でゼロから作るのは、少し難しいかもしれません。
制作にあたって、まずはJavaScriptの基礎について抑えておく必要があります。

このなかで、「オブジェクト」というのが少しわかりにくかったのではと思います。
オブジェクトを理解するためにも、コードの「写経」をしてみましょう。

HML/CSS/jQueryのおさらい

「写経 syakyo」・・・すでに存在するコードをそのまま書き写すこと。プログラマーの間でしばしば用いられるスラングのようなもの。

おさらいも兼ねて、以下のサンプルコードを、自力で打っていってみてください。

コピペしても何の意味ないですからねー。
プログラマーやコーダーは、一時間あたり何行書けるか(生産性)を求められる、アスリートのような職業でもあります。
早く書ければ、それだけ多く間違ってもいい時間の余裕ができます。
早く書ければ、それだけ面白いものを次々作っていけます。

 

この「写経」の目的は、いくつかあります。
まずはJavaScriptのプログラミング(コーディング)に、形から入って、慣れてもらうこと。
そして、バグ(書き間違い・考え違い)とデバッグ(修正)を経験してもらうこと。
まだコードの意味はわからなくても構いません。

 

もうひとつのポイントは「JavaScriptコンソール」(Chrome)※の使用です。
Chrome Windows:[ツール] – [JavaScript コンソール] を選択する (参考サイト
Chrome MacOSX:[その他のツール] – [JavaScript コンソール] を選択する
 もしくは、共通:ページのどこかで[右クリック] – [要素を検証] – [Console]
 
※この「コンソール」は、どのモダンブラウザにも同じようなものが用意されています。
Safariの場合 ・IEの場合 ・Firefoxの場合
もともともは2009年ごろに誕生したFirefoxの「FireBug」というプラグインだったのですが、あまりにも便利なため、あっという間に全ブラウザで標準搭載されるようになりました。

 

04/14 第1回 ガイダンス