Archived entries for Programming

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>

ChatPerf × Hackathon

ChatperfHackathon_01

2月23日-24日、初めてハッカソンに参加してきました。

開発者、デザイナー、プランナー三位一体で

ChatPerfという、スマホで香りが送れるディバイスを用いて

バカアプリを作ろうという内容です。

香りの種類は自分たちで決めることができました。

 

真面目な提案は禁止ということで

どうしようもなく不毛なアプリを提案した所、

思いがけずうちのチーム優勝しました。

かなりの棚からぼたもちっぷり!!

賞金も頂きました、ありがとうございます。

 

提案した不毛なアプリが、こちら。

DanmitsuGokko_01

『壇蜜ごっこ』!!!

 

このアプリは、

壇蜜さんをSEXYに育成してしていくことにより、

壇蜜さんがフェロモン(香り)を噴霧

そのフェロモンを浴びることにより

自身のエロティシズムや女子力を開花させていく、という内容です。

 

簡単に言えば、育成ゲームとアロマテラピーが融合されたアプリです。

 (*当アプリは壇蜜さん個人と一切関係がなく、壇蜜さんリスペクトのもと勝手に作ったものです)
 
 

DanmitsuGokko_03

育成方法はいたってシンプル、胸をひたすら擦るのみ!

壇蜜さんの胸元を擦り続けると、

女子力がアップするいい匂いフェロモンを噴射します。

 

フェロモンを実際に浴びることで、

自身の美容や心身の健康を増進させることができるというわけです。

 

DanmitsuGokko_02

「女子力」は、5つ(妖艶力 / 嫁力 / 清楚力 / 潤い力 / 知性力)から

選択することができます。

例えば、嫁力=柔軟剤の香り、潤い力=ジャスミンの香り

など効能によって、それぞれ違う香りフェロモンが出てきます。

 

DanmitsuGokko_04

一定のスコアを越えると、

壇蜜さんは言葉を覚えたり、表情や仕草が変わったりと、

バージョンがアップしていきます。

また、一定時間放置すると各スコアは低下して行き、

壇蜜さんはすねたり、言葉を忘れたりしていきます。

 

制作したプロトタイプ動画。

当日は、妖艶な香りを入れプレゼンしました。

 

なんて親父の発想、と思われるかもしれませんが、

オール女子チームでの提案でした。

 

内容はエロティックですが、あくまで「女性向け」にしたかったので

下品にならないよう女子っぽいUIを目指しました。

しかし、女子っぽいUIなんて普段ほとんどやらないので、

何度やっても「AVパッケージ」のような雰囲気にしかならず、

デザイン担当の私は、1日目の夜だいぶ焦りました。

 

「女子っぽいデザインが全然できない…」

 

夜な夜な夜な自己嫌悪に襲われつつ、

壇蜜さんがしゃべりそうな言葉を真剣に妄想したり、

今までダウンロードしなかったキラキラやらハートの素材を落としたりして、

過ごしました。

壇蜜さんを真剣に思い続けた2日間だったと思います。

 

デザイナーになって初めて頂いたawardが

「着パフハッカソン・バカアプリ制作優勝」

だなんて心中若干複雑ですが、みんなの心に刺さったようでよかったです。

これも、チーム編成がよかったからだと思います。

 

不毛なアイディアを理論的に形作ってくださった まなさん、

香りの種類や効能の知識を存分に発揮してくださった しまさん、

また、サポートで開発実装してくださった山谷さんありがとうございます。

 

そして、壇蜜さん勝手にすみません、リスペクトの上で考えました。

ありがとうございます。

 

そしてそして、全ての発想の原点は

吉本のシルクねぇさんの「胸を擦るとグレープフルーツの匂いがする」という

衝撃的な発言からなので、

シルクねぇさんにも感謝の意を表したいと思います。

 

ChatperfHackathon_02

 チームメンバー、着パフ社長坪内さん、審査委員カヤック柳澤さん
 
 

Arduino Note (3) – Software Serial

ArduinoNote_09

Arduinoのシリアル通信の方法は、2種類

- 0,1ピン(受信、送信)を使う [元から備わっているやつ]

または

- ソフトウエアシリアル [プログラムで作り出すやつ]

ソフトウエアシリアルは、

シリアルモニターでモニタリングできないので要注意!

 

 

openFrameworks Note (1)

oFNote_01

oFNote_02

openFrameworksの基本的事項。

ファイル構成ちゃんとしておかないと、動かなくなるので要注意。

openFrameworksはあんまり触っていないので、全然仲良しではないです。

どのファイルを触ったらいいか、すぐ分からなくなります。

 

 

Arduino Note (2) – Arduino × Processing, oF

ArduinoNote_04

キーボードで”S”押されると、サーボモーターが動き出す

Processing(入力)→ Arduino(出力)制御

 

ArduinoNote_05

押されたキーによって、サーボモーターの角度が変化

Processing(入力)→ Arduino(出力)制御

 

ArduinoNote_06

analogWriteとdigitalWriteについて

 

ArduinoNote_07

焦電型赤外線センサーをalanogReadで読む

電流、電圧、抵抗について

 

ArduinoNote_08

Arduinoの値で、openFrameworksの画像を変化させる

Arduino(入力)→ openFrameworks(出力)制御

 

tsugインターン時代のメモです。

主に、ArduinoとProcessing、openFrameworksの連携などなど。

Arduino Note (1) – Basic

ArduinoNote_01

ArduinoNote_02

ArduinoNote_03

ここまでは、CIIDのWeek3、Massimoさんの授業メモ。

ちょくちょく電子工作系の単語が分からず

ヒー!!と思いながら書いていたヤツ。

Arduinoの基本事項です。

 

Processing Note (1)

ProcessingNote_01

ProcessingNote_02

 

色んなプログラムやらプロトタイピングの方法を

たくさん覚えなきゃいけないので、

自分の整理のために、今まで書き溜めたノートを大公開です。

これは、CIIDのWeek2の時に書いたProcessingのノートです。

めっちゃ、基本的なことしか書いていませんが。

 

 

 

 

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属性の値を取り出すメソッド

 

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

 



Copyright © 2011 Shoko Tanaka. All rights reserved.

RSS Feed.