2018 – #2

2018 – #2 – メディアデザイン実習J序盤はゆるゆると関係ない話をしますので、
ノート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()」です。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です