今週は前回の続きになります。

今週の映像

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

佐藤雅彦の作品
・ピタゴラスイッチ(アルゴリズム体操、ピタゴラ装置など)
・湖池屋 ポリンキー
・湖池屋 スコーン
・湖池屋 ドンタコス
・サントリー モルツ
・NEC バザールでござーる

ノーマン・マクラレンの作品
・「canon」 ノーマン・マクラレン 1964年(9分)

 

写経

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

※このプラグラムのポイントは、「クリックしたら…」と「val()」「html()」です。

 

デバッグ

完成までに、うまく動かない場合があったでしょうか。

そのようなプログラムの誤動作・コーディングの誤りのことを「バグ」と呼びます。
虫のことです。

バグを取りのぞきプログラムを改善する作業のことを「デバッグ」といいます。

テキストエディターなどの制作環境には、デバッグを助ける「デバッガー」などのツールがあったりします。(デバッグ作業を行う人のこともデバッガーと呼ばれます)

Webのフロントエンド制作においては、「JavaScriptコンソール」(Chrome)※が強力で、よく使用されます。
ためしてみましょう。

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

 

打ち間違いを減らす

写経をしてみて、単純な打ち間違いで時間をとられた諸君もおられたのではないでしょうか。
箇所によっては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」にしましょう。

 

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

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

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

1:ボタンがクリックされたらダイアログ表示
2:ボタンがクリックされたらオブジェクトが右に移動する
3:ボタンがクリックされたら背景が変わる

 

商用サイト(TVアニメ)のUI実装を再現する

4:「翠星のガルガンティア」を再現する

 

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

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

 

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

最後の作例はだいたい終わりましたが、2点残していることがあります。
・画像読み込みのタイミングを調整
・アドレスからのスクリプト実行

 

序盤はゆるゆると関係ない話をしますので、
ノートPCのない人は、この間に借りてきてください。

時事ネタ

Wizard Bible
– 4/22に閉鎖すると告知(4/16)
– Chromeの有害サイト指定

 

本日の内容

さてはじめます。

先週のおさらいです。

コーディング環境

ではここで、テキストエディタをインストールしましょう!
– Atom ←無難
– Visual Studio Code ←最近人気らしい
– Brackets ←Adobe

 

Boilerplateについて

とりあえず、今の時点ではBoilerplateはまだいいです。
使うタイミングになったら言います。

 

昨年度の授業でjQueryについても学習されているはずですが、簡単におさらいしましょう。

ここまでは問題ありませんか?
もし分かりにくいようであれば、一歩手前の話に戻ってみましょう。
JavaScriptの文法の話です。

 

では、テキストエディタ上で実際に自分で打っていってみましょう!

 

できるかな??

足し算のみが出来る「かんたん電卓」のようなものをつくりましょう。

動作サンプル

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

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

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

 

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

 

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

 

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

 

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

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

 

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

写経

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

※このプラグラムのポイントは、「クリックしたら…」と「val()」「html()」です。

 

 

Web制作に関わる技術の概要

 

ハック/デザイナ/PG/html/js/文法
※古い資料なので適宜読み飛ばします

 

クライアントサイド vs サーバーサイド

 

人間のWeb利用 vs プログラムのweb利用(Web API)

 

コーディング環境

 

エディタについて
エディタは最近では、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」というプラグインだったのですが、あまりにも便利なため、あっという間に全ブラウザで標準搭載されるようになりました。

 

本日2018年4月12日に、2018年度「メディアデザイン実習J」のシラバスとして、2017年度同実習のシラバスがCampusNetに掲載されてしまっていることが判明しました。

今年度予定していた新しいシラバスの内容(PDF)
(※本文最下部に、画像も掲載しています)

講師と学習支援センターとの手続きに齟齬があったことが原因です。
学生の皆さんにおきましては、履修予定・学習計画などに良くない影響を与えた可能性があることをここでお詫びいたします。

詳細な事情についてはこの場でのご説明は差し控えたいと思いますので、授業内で改めてご説明します。
履修者以外の方は、講師・入江まで問い合わせいただければ分かる範囲でお答えします。

(学生さんの権利として、学習支援センター側に説明や改善を求めることも当然可能だと思いますが、学科レベル・カリキュラムレベルでの対応や説明に関するご案内は講師・入江の権限を超えており適切に行えないという点をご了承ください。)

当該実習のレベルでの対応としましては、誤って掲載された古いシラバスの内容と本来あるべき今年度のシラバスを適切に折衷していくような着地点を前向きに検討してまいります。

昨年度のシラバスの内容を今年度実習として受けられると期待されて履修された学生さんもいらっしゃるでしょうし、現状のウェブ業界に即して更新された新しいシラバスの内容のほうが良いと考える学生さんもいらっしゃるかと思います。

そのため、履修登録された学生さんと積極的に相談しながら、今年度の具体的な授業計画を定めてまいります。

ご意見などあれば講師に伝えてください。
可能な限り対応します。