2018 – #3

2018 – #3 – メディアデザイン実習J今週は前回の続きになります。

今週の映像

今週の映像は「佐藤雅彦とノーマン・マクラレン」です。
佐藤雅彦 – 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点残していることがあります。
・画像読み込みのタイミングを調整
・アドレスからのスクリプト実行

 

コメントを残す

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