2016

2016 – メディアデザイン実習Ｊ

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

 

第13回　MOBA/MO/MMO オンラインゲームの制作

 

第12回　音ゲー

 

第11回　オブジェクト指向プログラミング

  • オブジェクト指向とは
  • ブラウザの限界までネコを飼う
  • ウォーリーをさがせ

 

第11回　ボドゲをプログラミングする

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

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

 

第x回　顔検出とAR/ジェスチャートラッキングとVR

 

第10回　WordPress

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

実践的なWordPressの話

 
 
 

localhost

第9回 サーバーサイドプログラミング

EURO2016が始まり、 Apple WWDC 2016が終わり、E3 2016 も終わりました。
世界は、アメリカ大統領選やブレグジットの問題で揺れていますが、日本では都知事のSEKOI騒動でもちきりでした。
我々のようなモノを作る立場の人間は、世間の大半を占める「労働者」の気持ちを理解していないと、人の心をうつモノは作れないでしょう。その意味で、SEKOI騒動を分析し理解することも重要ではあります。
しかしながら、世界のテクノロジーや経済の問題を把握している方が遥かに重要なのは事実です。

何も「最先端についていく」必要はないのです。ネット時代とはいえ、我々が知りうる「最新ニュース」なんて、たかがしれています。でもそれで充分なのです。きっちり「最新ニュース」をフォローアップしていくことで、時代の２歩後ろをしっかりと歩いていけます。
それでも、世間一般の人は、もっと後ろのことしか理解できていません。
偉そうにしているスーツ族も、ほとんど何も見えていません。

特にテクノロジーで言えば、大抵の人はコンテンツの方に目を奪われがちです。
しかし本当は、消費されては消えていくだけのコンテンツのことはあまり重要ではありません。それもSEKOI話にすぎません。
むしろ、技術的なプラットフォームがどうなっていくのか、コンピューティングそのもの・エンターテイメントそのものがどういう方向に向かっていくのかという大局を見極めなければなりません。

今年WWDCやE3、Google I/Oで発表された内容も、数ヶ月〜数年のうちに「あ、これはこういうことだったのか」とわかる日が来ます。毎年見ていると、何がどうなっていくのかわかってくるようになります。

また、メディアの学生さんは特に、目先の新しいコンテンツ（ゲーム、アニメ、マンガ）に気を取られてはいけません。
ハッキリ言って大半がゴミです。時間の無駄です。
なぜなら、そういうものは「時の試練」を経た「古典」とは異なるからです。
もっと「古典」に触れましょう。歴史を知りましょう。文脈を理解しましょう。
今あるほとんどのオタク向けコンテンツは、過去の焼き直しで、劣化版でしかないと気づかないといけません。
人生の時間は無限ではありません。花の命は短いです。
今からあと10歳年をとる間に、クリエイターとして最前線に立てる時期は終わります。
10年以内に、スキルのピークを迎えて、自分の人生で納得できるものを作っていなければなりません。
自分の仕事に集中しましょう。

 

サーバーサイドプログラミング

 
 
 

6/10 第8回 Web APIとオープンデータ

それでは、ウェブプログラミングの醍醐味の一つ「Web API」について学習しましょう。

さらに学習したい人は…

iTunes API

GeoLocation API
ここからは、ひとつのアプリを作成していきます。 (1)地図を表示 (2)現在地を取得して地図表示 (3)リアルタイム表示 (4)スマホからアクセス (5)仕上げ

 
 
 

6/3 第7回 jQuery補遺

まず、今日の受業の前半では、先週までに終わらなかった、jQueryによるWeb UI 制作のまとめを補完します。

そのあと、WebAPIの内容に移ります。

 

次に、処理のタイミングとフローについて考えます。
モチーフとして、有名なTVアニメ「ルパン三世」のオープニングタイトルを、モーショングラフィックとしてJS/jQueryで再現します。
 

 
 
 

5/27　第６回 UI実装のまとめ

あついですねー。

前回で終え切ることができませんでしたが、
今回でjQueryはおしまいにしようと思います。
週の終わりではありますが、集中力をグンと高めましょう。
学習初期段階でのペースが遅い人に問題があるわけでは決してありませんが、授業としての効率や深さを維持するため、遅い人はSAさんに集中的にケアしてもらいながら、早い授業展開についてきてください。

 

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

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

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

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

MacではOpenType、WindowsではTrueTypeをダウンロードします。
こいつをインストールしたら、Atomでは、設定画面から
「RictyDiminished-Regular」を指定します。

このフォントは、全角スペースが□として表示されるのが特徴です。
全角スペースまじりのエラーを起こさずに済みます。

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

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

 

また、ブラウザは必ず「Google Chrome」を使用してください。
授業以外でも、制作や開発の段階でChrome以外のブラウザを使うメリットは何もありません。
ブラウザの互換性の問題を甘く見てはいけません。

 

それでは前回の続きです。
実践的な商用UIの事例として、「翠星のガルガンティア」を再現します。

http://zokei.koekatamarin.com/archives/579
１：ボタンがクリックされたらダイアログ表示
２：ボタンがクリックされたらオブジェクトが右に移動する
３：ボタンがクリックされたら背景が変わる
４：「翠星のガルガンティア」を再現する

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

 

引き続き、ゼロからjQueryでの実装にトライしていきましょう。

では、さらに実践的なUIを実装したり、高度な処理を考えてみたりしましょう。

次に、処理のタイミングとフローについて考えます。
モチーフとして、有名なTVアニメ「ルパン三世」のオープニングタイトルを、モーショングラフィックとしてJS/jQueryで再現します。
 

 

ここまでで、昨年度の８週分の授業内容です。

 
 
 

ca3df_1449_acac75ad6b5c8dddf97c62a88e422a32

19d5eec3b2b0d58cd831d488968770b3

2016-05-17 00.11.52

5/20　第５回 UI実装のまとめ

おねがい
2000円払うから、誰かWindows8.1のUSB回復ドライブをつくって下さい…
25万のノートPCが起動しなくなって辛いんじゃ…

前回の補足

時事ネタ

注目のイベント

  • 5/14　UNREAL FEST OSAKA (Unreal Engine)
  • 5/14、15　デザインフェスタ vol.43
  • 5/19深夜〜　Google I/O 2016 (Google) – Google公式サイトで
  • 5/24、25　Microsoft de:code (日本マイクロソフト) – 中継なし
  • 6/14深夜〜　WWDC 2016 (Apple) – Apple公式サイトで
  • 6/15深夜〜　E3 2016 (Electronic Entertainment Expo) – Twitchやゲーム機などで
  • 8/6、7　Maker Faire Tokyo 2016 – ビッグサイトへGo!
  • 8/27、28　真夏のDESIGN FESTA + GAKUTEN 2016 – ビッグサイトへGo!
  • 9/15〜18　TGS 2016 （東京ゲームショー） – 幕張メッセ
  • 11/5、6　オープンソースカンファレンス2016 Tokyo/Fall – 会場未定

 

前回はjQueryによる「かんたん電卓」の写経からはじめて、アニメーションまでを学習しました。
今回は、その続きです。

http://zokei.koekatamarin.com/archives/579
１：ボタンがクリックされたらダイアログ表示
２：ボタンがクリックされたらオブジェクトが右に移動する
３：ボタンがクリックされたら背景が変わる
４：「翠星のガルガンティア」を再現する

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

 
 
 

5/13　第4回 商用レベルのUI実装を通して、実際にプログラミングする感覚をつかむ

粟野先生と久しぶりに相談する機会がありまして、今年度以降のこの授業の方針を改めることになりました。
といっても、みなさんがガッカリ刷ることはなにもないと思いますのでご安心を。

これまでの授業では、教授側からの「大学を出た時にJavaScript/jQueryで使い物になるレベルに学生を引き上げる」という要請に基づいて授業内容を計画していました。
ところがこの数年の卒業生の就職傾向などを鑑み、粟野先生と私とで、制作面でのスキルにこだわらるべきではないという認識に達しました。
事実、この数年制作的なスキルを就職に結びつけている学生さんはほとんどいませんでした。
むしろ、総合的な人柄であったり、視野の広さや、論理構成といったことが重要なようです。
これは就職にかぎらず、一人の「気の利いた面白い大人」になるためにも当然重要な事ですよね。

そんなわけで、この授業はシラバスに定めた内容にとどまらない形で発展させていくことにしました。
具体的には、（つまらない）基礎の文法みたいな部分はひかえめにして、講師独自の先鋭化した部分をもっと授業内容に充実させていきます。

例えば、少し前回お話した

もそうです。

また他にも、

  • WebAPIを利用する
  • オープンデータで社会に役立つプログラムを作る
  • アンケートフォームの作成
  • →サーバーサイドとは→脳内メーカー
  • →ブログと管理画面→CMSとは→MVCとは
  • カードゲームをプログラミングする
  • オブジェクト指向とは→ブラウザの限界までネコを飼う→ウォーリーをさがせ

前回は、JavaScriptプログラムをひとつ写経することに成功しました。
さらに写経をつづけましょう。
「プログラムが思い通りに動く」ということのよろこびを感じていってもらえればと思います。

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

クリックと文字列・数値を理解するための「かんたん電卓」
http://zokei.koekatamarin.com/archives/653

今回からは、脱「写経」ということで、自分で考えながら、自分でコーディングしてみましょう。
制作するものも、ぐっと実用的なものになっていきます。
ポイントは、animate()　addClass()　attr()　の３つのメソッド。

http://zokei.koekatamarin.com/archives/579
１：ボタンがクリックされたらダイアログ表示
２：ボタンがクリックされたらオブジェクトが右に移動する
３：ボタンがクリックされたら背景が変わる
４：「翠星のガルガンティア」を再現する

 

ここまでできたら、現時点で昨年度の授業より２週分速いペースで授業が進められています。
なんとすばらしい！

 
 
 

b2a69270-343c-441c-b989-dfd409028224

05/06 第3回 基本からのステップアップ

入江の最近の仕事
– WPによる団体サイト http://standbyme2001.org/
– ↑ 昨年制作した教育支援NPOのサイト http://edventure.jp/ がベース（そういう依頼）
– 既存PCサイトのリニューアル デザインカンプPDF
– 現行のPCサイト http://www.river-guide.org/
– ↑ スマホサイト http://www.river-guide.org/?dev

 

世間はGWでしたが、みなさんは有意義な時間を過ごせましたでしょうか。
「学生の頃はあんなに時間が有り余っていたのに、社会にでると自分の時間なんてほとんどない」とは、大人のよく言うセリフです。
みなさんにはまだ何の実感もわかないと思いますが、これはやはり事実です。
社会に出て、やるべきこと・やりたいことと、自分のスキルのギャップを埋めようとしても、毎日朝から晩まで働くようになると、時間はほとんどありません。
ですから今のうちに、たとえ将来の自分に必要なスキルが何か分からなくても、広い視野で落ち着いてものを見られるように、チャレンジすることを恐れない気持ちや自ら進んで学習することを厭わない精神だけは鍛えていきましょう。
いつか本当にやりたいことと出会った時に、基礎的な体力があなたを支えてくれるはずです。

かくいう入江は半分ぐらい仕事をして、のこりの半分は調査学習という名目で積みゲーをかたっぱしから遊び、最後の半分は女の子のために費やしました。

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

「調査学習という名目でゲーム」と上に書いた通り、僕の場合は、自分のプロジェクトとしてスマホゲームを展開していくために「ゲームを１日１本プレイする」ことを習慣にしています。

 

では、本日の本題に入って行きたいと思います。

 

まず、前回はJavaScriptの文字列・配列・オブジェクトについて、学習しましたよね。

このなかで、「オブジェクト」というのが少しわかりにくかったのではと思います。
オブジェクトを理解するためにも、サンプルコードの「写経」をしてみましょう。
※「写経 syakyo」・・・すでに存在するコードをそのまま書き写すこと。プログラマーの間でしばしば用いられるスラングのようなもの。

写経をはじめる前に、以下の環境が整っているものとします。

 

コーディング環境
・テキストエディタ「Atom」 https://atom.io/
・Boilerplate 5.3.0 https://html5boilerplate.com/
・授業ではブラウザは「Google Chrome」を使用してください

 

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

 

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

 

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

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

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

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

 
さて、2016年度の本授業では、ひとつ仮の目標として「音ゲー」のようなものが作れるところを目指してみたいと思っています。

どうですか？少し面白そうでしょう？

 
 
 

Prince

04/22 第2回 ヒアリング・JavaScriptの基本

まずはヒアリングを行います。

その後、基礎的な知識のインプットに進みます。

これから、JavaScriptを使って、こんなものを作っていきます。
どうやって作っていくか？その前に、どう考えるか？
まずはデモを見ながら、一度考えてみましょう。

いきなり、上記デモのようなものを自分でゼロから作るのは、どうも少し難しいみたいです。
制作にあたって、まずはJavaScriptの基礎について学習しましょう。

基礎を踏まえた上で、実際のコードを「写経」してみましょう。
サンプルコードを、自分でそのまま入力して、同じように動かせればよいだけです。
とはいってもプログラミングにつきものなのが「バグ」です。
実際のコーディングを体験する中で、書き間違いとデバッグ（修正）の感覚を味わってみましょう。

 
 
 

04/15 第1回 ガイダンス