Archived entries for Training

Study HTML5 & JavaScript (4) – Draw App (1)

JavaScript+HTML5 Study Book

DrawApp_01

久々に本からJavaScriptとHTML5のお勉強です。

マウスで線を描く、らくがきアプリの制作を学習しました。

 

↓できたもの。

http://shokolog.com/study/draw

(とりあえずマウスイベントしか拾っていないので、タッチイベントは不可)

 

マウスお絵描きのコード自体はそんなに難しくないので、

マウスの動きにあわせて線が引ける仕組みだけ分かればいい感じです。

DrawApp_02

学習した内容は以下。

・マウスで線を描く

onMouseDown = “関数名(event)”

onMouseDownイベント(マウスボタンが押されたら関数〇〇を実行する)

ex.) <canvas id=”main” width=”640″ height=”480″ onMouseDown=”startDraw(event)”></canvas>

onMouseMove = “関数名(event)”

onMouseMoveイベント(マウスボタンが移動したら関数〇〇を実行する)

ex.) <canvas id=”main” width=”640″ height=”480″  onMouseMove=”draw(event)”></canvas>

onMouseUp = “関数名(event)”

onMouseUpイベント(マウスボタンが離されたとき関数〇〇を実行する)

ex.) <canvas id=”main” width=”640″ height=”480″ onMouseUp=”endDraw(event)”></canvas>

※eventオブジェクトは、 イベントが発生したときのマウスカーソルの位置やイベントの種類などが格納されている

 rgba(赤成分、緑成分、青成分、透明度)

色・透明度の指定

赤成分、緑成分、青成分は、0~255の値をとる

透明度は、0~1の値をとる(0:透明、1:不透明)

event.clientX

ウィンドウ(ブラウザー)上のX座標

event.clientY

ウィンドウ(ブラウザー)上のY座標

※マウス座標の取得はブラウザごとに異なっているので注意

※firefox以外のブラウザーでは、

event.offsetX, event.offsetY(イベントが発生した要素上のX,Y座標)で

キャンパス上の正確な座標を取得できる

コンテキスト.lineWidth

線の太さの指定

コンテキスト.lineCap

線の両端の形の指定

round:円

butt:ぶつ切り

square:四角形

 

らくがきアプリのコードはこれだけです。

そのままコピペすれば、使えます。


<!DOCTYPE html>
 <html>
 <head>
 <meta charset="Shift_JIS">
 <title>らくがき帳</title>

<script>

//マウスが押されているかどうか調べる変数を宣言
 var mouseDown = false;

//ペンの設定
 var penX = 0;
 var penY = 0;
 var penColor = "rgba(0,0,0,1)";
 var penWidth = 10;

//描画の開始
 function startDraw(event){

//マウスボタンが押された
 mouseDown = true;

//ペンの座標をセット
 penX = event.clientX;
 penY = event.clientY;

}
 //描画
 function draw(event){

//マウスボタンが押されていれば描画
 if (mouseDown){

//キャンバスの取得
 var canvas = document.getElementById("main");

//コンテキストの取得
 var context = canvas.getContext("2d");

//ペンのセット
 context.strokeStyle = penColor;
 context.lineWidth = penWidth;
 context.lineCap = "round";

//マウスカーソルの座標を取得
 var x = event.clientX;
 var y = event.clientY;

//パスの開始
 context.beginPath();

//座標の移動
 context.moveTo(penX,penY);

//線の描画
 context.lineTo(x,y);

//パスの描画
 context.stroke();

//ペン座標の切替
 penX = x;
 penY = y;

}

}

//描画の終了
 function endDraw(event){

//マウスボタンが離された
 mouseDown = false;

}

</script>
 <style>
 canvas{
 border:solid #999999 1px;
 }
 </style>

</head>

<body>
 <canvas id="main" width="640" height="480"
 onMouseDown="startDraw(event)"
 onMouseMove="draw(event)"
 onMouseUp="endDraw(event)"></canvas>

</body>
</html>

Study HTML5 & JavaScript (3) – Canvas

JavaScript+HTML5 Study Book

HTML5の新しい機能、canvas!

canvasタグ内で、いろいろ描画できるというやつです。

processingを思い出します。

 

canvasではないけれど、

そういえば、昨年教えてもらったJavaScriptのみで描かれたサイト。

WebGLShaderLab

http://www.cake23.de/traveling-wavefronts-lit-up.html

(Google Chromeでしか見れません)

綺麗すぎて悶絶するけど、ソースを見ると鬼!!!

コードだけでこんなにも有機的な表現ができるなんて、感動です。

 

以下、学習内容です。

・キャンバスの制作

<canvas id=”ID” width=”幅” height=”高さ”></canvas>

グラフィックスを描画する領域

指定したサイズ(幅×高さ)の透明なキャンバスがページ内に作成される

var canvas(変数) = document.getElementById(“main(ID)”);

var context(変数) = canvas.getContext(“2d”);

キャンバスの取得、コンテクストの取得

キャンバスを使用する際に必ず記述するコード(決まり文句として覚える)

 

・四角形の描画

コンテキスト.strokeStyle

線の色の設定

コンテキスト.strokeRect(x,y,w,h)

四角形(輪郭のみ)の描画

x: 四角形の左上の頂点のx座標

y:四角形の左上の頂点のy座標

w:四角形の幅

h: 四角形の高さ

コンテキスト.fillStyle

塗りつぶし色の設定

コンテキスト.fillRect(x,y,w,h)

四角形(塗りつぶし)の描画

 

・線の描画

コンテキスト.beginPath()

パスの開始

コンテキスト.moveTo(x,y)

始点の移動

コンテキスト.lineTo(x,y)

線の作成(指定の座標まで線を引く)

コンテキスト.closePath()

パスを閉じる

コンテキスト.stroke()

パスの描画

 

・円、弧の描画

コンテキスト.arc(x,y,radius,startAngle, endAngle, anticlockwise)

円・弧の作成

x:円の中心のx座標

y:円の中心のy座標

radius:円の半径

startAngle:開始角度(ラジアンで指定)

endAngle:終了角度(ラジアンで指定)

anticlockwise:描画方向(反時計回りはtrue、時計回りはfalseを指定)

JavaScriptでは π (ラジアン) = Math.Pl と記述

ex.) 360°=2π = 2*Math.Pl /  45° = 2*Math.Pl*(45/360)

コンテキスト.fill()

パスで囲まれた領域を塗りつぶす

塗りつぶしの色は、fillStyleで指定した色になる

 

・曲線の描画

quadraticCurveTo(cp1x, cp1y,x,y)

2次ベジェ曲線を描画

bezierCurveTo(cp1x, cp1y,cp2x,cp2y, x,y)

3次ベジェ曲線を描画

arcTo(x1,y1,x2,y2,radius)

直線に接する弧を描画

 

 

Study HTML5 & JavaScript (2) – Slide Show App

JavaScript+HTML5 Study Book

Slide Show

本日もJavaScriptとHTML5のお勉強です。

今日は、「スライドショー」Appをコンプリートしました。

再生ボタンを押すと、

壮大なクラシック音楽が流れながら画像が見れる、

と結構シュールなサンプルでした。

サンプルそのままの素材とGUIなので、オシャな感じではないですが、

まず先にコードを書いて覚える、ということを重きに学習しました。

 

昨日からやたらと書いていて

document.getElementById(“IDの名前〇〇”); //指定IDの取得

が出てくるので要注意です。

JavaScriptからHTML5のIDを読み取る、

という両コードの橋渡し的な役割なのでよく出てくるようです。


以下、学習内容とメモです。

・サムネイル画像をクリックすると画像が表示されるビューアーの作成

function 関数名 (imageNo){
}

引数imageNoに、表示したい画像番号を渡す

document.getElementById(“ID名〇〇”).src = 配列名〇〇[imageNo];

メイン画像の切替

(指定IDのsrcにアクセスし、配列に入れておいた画像を呼び出して表示)

配列 = document.getElementByClassName(“クラス名〇〇”)

クラス名〇〇を元にエレメントを取得(全てのサムネール画像要素の取得)

DOM要素.classList.remove(“取り除くクラス名〇〇”)

slectクラスを削除する

DOM要素.classList.add(“追加するクラス名〇〇”)

slectクラスを追加する(選択されたサムネール画像にslectクラスを追加)

onClick = “・・・”

マウスが押されたら関数〇〇を実行する

 

・スライドショー(タイマーを使って画像を順に切替)

<button type=”button”>

 ボタンに表示するラベル

</button>

ボタンの作成(<imput>タグでもボタンはつくれるが、<button>方が

ボタンのテキストを複雑に変更できたり画像を貼り付けたりできる)

clearInterval(タイマー変数名)

インターバルタイマーをクリアする(setInterval関数で開始したタイマーは、

生成されたタイマー変数をclearInterval関数に渡して止めることが出来る)

 

・音楽データの再生・一時停止・停止

<audio src=”音楽データファイル” controls autoplay loop></audio>

src : 再生する音楽データファイルを指定

controls : 再生/一時停止、ボリュームなどを操作するコントロールバーが表示

autoplay : ページを開いたときに自動的に再生を開始

loop : 繰り返し再生

<audio controls autoplay loop>

<source src=”音楽データファイル1″></source>

<source src=”音楽データファイル2″></source>

<source src=”音楽データファイルn”></source>

</audio>

*再生できるファイル形式がwebブラウザーによって異なるので、

AUDIOタグだけでは全ての環境に対応することが出来ない

よって、複数のファイル形式を記述できるSOURCEタグも一緒に書く

要素.play()

音楽・動画データの再生

要素.pause()

音楽・動画データの一時停止

要素.load()

音楽・動画データの再読み込み / 音楽・動画データの停止

 

・スライダーバーによる音楽ボリュームの変更

<input type=”range” id=”ID” value=”初期値” min=”最小値” max=”最大値” step=”間隔”> 

レンジ入力欄(スライダーバー)の作成

id : 要素を特定するためのIDを指定

value : 初期値の指定

min : 最小値の指定(省略時は0)

max : 最大値の指定(省略時は100)

step : 数値の間隔を指定(省略時は1)

*現在、Chrome、Safari、Operaブラウザーに対応

要素.volume

ボリュームの変更

onChange = “・・・”

スライダーが変化したときに発生するイベント

disabledプロパティ

一度だけしか押せないボタン作成時に使用

ex.) document.getElementById(“buttonStart”).disabled = true;

(ボタンの無効化 true)

「ボタンがクリックされた時」に実行すると「1度しか押せないボタン」になる

ex.) document.getElementById(“buttonStart”).disabled = false;

(ボタンの有効化 false)

無効にしたボタンを再度クリック可能にする

1回勉強したら 絶対に忘れない脳みそがほしいです。

Study HTML5 & JavaScript (1) – World Clock App

JavaScript+HTML5 Study Book

もっと武器を持つために、HTML5とJavaScriptの勉強をしています。

Web のコードがだいたい書けるようになったので、

今度はWeb Appが作れるようになるよう訓練です。

 

『つくって覚えるJavaScript+HTML5入門』 

出版社 : アスキー・メディアワークス

オフィス加減 (著)

 

Web Appに特化した本 & とにかく書いて書いてつくっていく、

という内容だったので、この本にしました。

 

World Clock

今日は「世界時計」Appをコンプリートしました。

学習した内容を忘れないように、以下メモです。

・現在の時刻(時間、分、秒)の取得

new Date()

現在の日時を取り出すメソッド

getHours()

時間を取り出すメソッド 0~23の値を返す

getMinites()

分を取り出すメソッド 0~59の値を返す

getSeconds()

秒を取り出すメソッド 0~59の値を返す

DOM要素 = document.getElementById(“〇〇”); 

HTML ID「〇〇」のDIVタグを取り出すメソッド

DOM要素.innerHTML = 書き換えたい文字列;

HTML ID「〇〇」のDIVタグの中に書き込むメソッド

onLoad = “関数〇〇”

ページ読み込み時に関数〇〇を実行するメソッド

 

・現在の日付(年、月、日、曜日)の取得

getFullYear()

年を取り出すメソッド 4桁の年を返す

getMonth() 

月を取り出すメソッド 0~11の値を返す

(12月にするためには+1を忘れずに)

getDate()

日を取り出すメソッド  1~31の値を返す

getDate()

曜日を取り出すメソッド 0~6の値を返す

(0は日曜日、6は土曜日に相当)

var 配列名 = [要素1, 要素2,・・・, 要素n];

配列に要素を格納するメソッド

配列名[インデックス]

配列に〇〇メソッドを渡すメソッド

 

・時間の経過によって時刻が変化(タイマーの使用)

setTimeout (関数, 待機時間) / setInterval(関数, 繰り返し時間)

関数を待機時間ごとに繰り返すメソッド

 

・プルダウンリストの作成

<select id = “ID”>

<option value = “値1″> ラベル1

<option value = “値2″ selected> ラベル2

<option value = “値n” > ラベルn

</select>

slected は初期値

 

・世界各国の都市の日時を取得

getTime()

1970年1月1日午前0時から、現在までの経過ミリ秒を参照するメソッド

selectedIndex 

フォームの選択メニューで選択されている項目の参照番号を返すメソッド

select要素.options[選択されたインデックス].value

optionタグのvalue属性の値を取り出すメソッド

 

淡々とこなしていこうと思います。

 

Photoshop Training – Twitter app Interface

PhotoshopTraining_1

PhotoshopTraining_2

 

今後の仕事のため&Photoshopのスキルアップのために、

GUIを模写しました。

 

ここのチュートリアルを見ながら。

PhotoshopTraining_3

Create a Clean Twitter App Interface in Photoshop | Psdtut+

 

模写は、予備校のとき以来な気がします。

ムサビの平面構成対策のために、

紅白歌合戦見ながら電球の絵を描いたのを覚えています。

 

今まで紙の仕事が多かったので、

Photoshop=写真のレタッチくらいしか作業していなかったのですが、

今回描画としていろいろ使ってみて、

Photoshopが全然分かっていなかったことが判明、

自分でもドン引きしました。

 

結局Photoshopに振り回されまくって、

トータル15時間半ほどかかってしまいました。。

手が速く動くよう、慣れなきゃです。

 

せっかくなので、今回模写して気づいたことをメモっておきます。

 

[Photoshop基本事項]

- ベクターのものをビットマップにすること=ラスタライズ

- スマートオブジェクトは、拡大縮小しても画像が荒れない

レイヤー>ラスタライズ をかけると、

スマートオブジェクトがラスタライズされる

- 拡大 shift / 縮小 option

-  チャンネルレイヤーRGBがはいってることを確認する

- レイヤーマスクの追加>レイヤーマスクチャンネルON

>マスクしたい部分を描画

(描画色がblackになっていることをちゃんと確認する)

- シェイプは先にボタン(合体、交差など)を押してから、描画する

 

[PhotoshopでGUIをデザインするときの注意点]

- レイヤーの数がハンパなくなるので、

描画したらすぐレイヤーに適切な名前を付けて管理する

-  ノーマル時、マウスオーバー時のパーツは

Button> Normal, Hover 2フォルダに分けて入れておく

- 細かいパス描画があるときは、

Illustratorで描いてからコピペでPhotoshopに持っていくほうが早い

- 作業パスも名前を付けて管理、保存

- たまにエッジがきれいに選択されないときがあるので

「パス→選択範囲を作成→塗る」 より「パスの塗りつぶし」で

塗った方がエッジがきれいかも

- 何度も使うスタイルは登録しておく

 

[Twitter app Interfaceデザインのひみつ]

- ここぞとばかり、レイヤー効果を使う

ドロップシャドウ、シャドウ(内側)、光彩(外側)、光彩(内側)、

グラデージョンオーバーレイ、境界線 使用

- 1px単位の細かさ

- 細かいトーンのグレー色数が多い

- GUIのアウトラインは、ドロップシャドウと1pxの細い境界線でシメる

(3pxとか太いとヤボったい)

- 角丸の長方形は、2,3,5pxを使いこなしている(全て同じRな訳ではない)

- ツヤっとした表現は、大抵 「光彩(内側)、グラデージョンオーバーレイ」

- レタープレスエフェクトの多用

(文字がボコっと押された表現、ドロップシャドウを用いる)

- マウスオーバーのボタンは、普通のボタンより

グラデーションオーバーレイの透明度をあげて変化を付ける

- 使用fontの大きさ、11~18pt

 

 

2色平面のアイコンしか作ったことがなかったので、

今回ツヤっとGUIを模写してみてかなり勉強になりました。

 



Copyright © 2011 Shoko Tanaka. All rights reserved.

RSS Feed.