shokolog.com

Study HTML5 & JavaScript (3) – Canvas

HTML5の新しい機能、canvas!

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

processingを思い出します。

canvasではないけれど、

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

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のお勉強です。

今日は、「スライドショー」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 = false;

（ボタンの有効化 false）

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

—

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

Study HTML5 & JavaScript (1) – World Clock App

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

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

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

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

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

オフィス加減 (著)

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

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

今日は「世界時計」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属性の値を取り出すメソッド

—

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

* folding cosmos BATH

↓Download PDF (* folding cosmos BATH)

知人が、* folding cosmos　という展示会をしていて、

世界を回っております。

（何気にサイトデザイン、古堅先生w）

事後報告になってしまいましたが、、、昨日までイギリスで展示会でした。

私は行けませんでしたが、そのためのe-flyerをデザインさせてもらいました。

NY~イギリス~と次はどこで開催でしょうか？

Photoshop Training – Twitter app Interface

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

GUIを模写しました。

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

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を模写してみてかなり勉強になりました。

Dragon year 2012

もう4月も始まろうとしてるのに、今更すぎでなんですが、

ブログで全く挨拶していなかったので挨拶させてください。

というか、せっかく描いていたゆるぃ龍の絵が登場できずじまいだったので、

お披露目です。

だいぶだいぶ明けましたね、おめでとうございます！！！　

2012年、ドラゴン YEAR ！！！

先日来日したブータン国王曰く、人それぞれの心には龍がいるそうです。

(ブータン国王の龍のくだりは　こちら)

その龍は、さまざまな経験を食べて大きくなっていくそうです。

なので、みなさんもこの1年たくさん経験を食べて、己の龍を育んでください！

お祈りしています。

私の今年の目標は、

「たくさんの経験を食べて、己の龍を育てて、昨年より人生をenjoyする。」

です。

今年はいろいろ節目な年になりそうなので、

今までセーブしてきたことを解放して、

たくさんたくさん新しいことを経験していきたいです。

Microsoft: Productivity Future Vision (2011)

ちょっと前にCIIDの子達がこぞってFacebookでシェアしてたものを、

ここでもシェアです。

みなさんは、この映像を見てどう思われますか？

未来系動画を見ると、映像のカッコよさにただただ圧倒されて

こうなったらいいな！！！、とソッコー思いがちなのですが、

少し批判的な視点で見ると、どうでしょう。

個人的に私は、こんなにも全部が電子化されると

モニターばっかり見るようだし物質感がなさ過ぎてちょっとイヤかも、

と思いました。

このサイトの記事もおもしろいです。

http://worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/

未来のインタラクションは、

いろんなモノを感じたり操る「手」がカギなんじゃん！、

って書いてあります。

記事の中のこの言葉がとても印象に残っています、素敵です。

“Visions give people a direction and inspire people to act,

and a group of inspired people is the most powerful force in the world.”

IDEO: The Future of the Book

こんなん出てくると、本を読むスタイルがまたごっそり変わりそうですね。

Week 1 – Service Design (5)

SEE YOUR LUGGAGE -premium luggage tracking -:

空港で荷物を預けた後、

私達は自分の荷物がどのように運ばれていくか知るよしもありません。

それによって、ちゃんと届くのだろうか、自分の荷物は紛失しないだろうか、

と不安になることはないでしょうか。

SEE YOUR LUGGAGE というサービスは、そんな不安を解消してくれます。

エキストラ料金を払うと、荷物にタグがつけられ、

携帯や飛行座席のモニターから、

自分の荷物がどこにあるのか確認することが出来ます。

また、目的地で荷物を受け取る際は、

自分の荷物がいつやってくるのか、どこにあるか、イライラすることもなく

自分の荷物が後何分くらいでやってきます、と知らせてくれます。

先生や生徒からの批評では、

荷物がまるでペットのように一緒に旅をする、

という感じが出ていいね！とコメントを頂きました。

きっと確認するときに、ただ単に地図と荷物の位置情報だけが載っている、

っていう画面じゃ全然面白くなくて、

 http://thewildernessdowntown.com/　(Chromeでしか見れません、確か)

みたいに、自分の荷物があるストーリーのムービーに登場して出てくる、とか

自分と荷物の関係をもっとエモーショナルに描いてインターフェースを作ると

このサービスはより面白くなるのでは、と思いました。

他のグループもCIIDの外の壁に模造紙を貼って、青空プレゼンしました。

さすが欧米人！（゜∇゜）という感じで、みんなプレゼンがすごく上手でした。

他のグループのアイディアはあまり覚えていないのですが、

うちのグループの他のアイディアとして、

「その国へ帰国する人と行く人をつなげるサービス」を考えたりもしました。

たとえば、日本からコペンハーゲンへ戻る人と

日本からコペンハーゲンへ向かう人を成田空港で結びつけて

情報をシェアしてもらうとか、

飛行機の座席が隣になるようにしてもらう、とか。

日本では全く流行っていませんが、

今ある旅のサービスとして世界的に有名なものはCouch Surfingでしょうか。

海外旅行などをする人が、

その国の他人の家にタダで宿泊させてもらう、というサービスです。

Facebookのようにウェブサイト上で登録して、

お泊まり受け入れますよ、とか、

お泊まりはダメだけど一緒にお茶だけならいいよ、とか掲載したり、

逆に、ここの国行くから泊めてもらえませんか？とか、

いついつ行くんで案内してもらえませんか、と申請することもできます。

先日日本に遊びにきたポーランドの友達も

京都でこのCouch Surfingにお世話になった、と言っていました。

日本人は見ず知らない人を家に泊めたり、泊まったり、

っていうのはかなり抵抗があるし、英語が喋れない、という人が多いので、

Couch Surfingは日本では受け入れられずらいのでは、

と個人的に思ったりします。

プレゼン終了後、Super Normalについてのオープンレクチャーがありました。

この時はたしか脳内のブドウ糖が完全に消費されていて、

クタクタでして、残念ながらあまりレクチャーの内容を覚えていません、

すみません。。

▶ Week 1 – Service Design (1)

▶ Week 1 – Service Design (2)

▶ Week 1 – Service Design (3)

▶ Week 1 – Service Design (4)

Week 1 – Service Design (4)

「事前課題のリサーチをもとに、

旅に関する新しいサービスデザインを考えて提案しなさい。

ELEVATOR PITCH参照のこと。(30分)」

ELEVATOR PITCH 

For (Target Customer) who has (Customer Need),

(Product Name) is a (Market Category) that

(one key benefit) unlike (the competition),

the product (unique differentiation).

事前課題については、こちらとこちら。

アメリカ人のMegan、ドイツ人のKatrin、

オランダ人のGijsとグルークワークでした。

時間は、本当に少ししか与えられなくて、

さっとコンセプトを考えてプレゼンしなさい、とのことでした。

この日は天候が良かったので、模造紙を持って川辺でアイディア出し。

Meganの笑顔がまぶしい。

各々の国からコペンハーゲンに来るまでにどんな体験をし、どう感じたのか、

みんなで意見を言い合いました。

私は、事前課題で制作したダイアグラムと写真を見せて、

「日本にいたときは無意識になんでも行動できたけど、

コペンハーゲンに来て人の行動を良く見たり、

五感を研ぎ澄まして行動していると思う。

サインに全て頼っていて、サインがなかったら何もできない。」

的なことを言いました、確か。（ちゃんと伝わっていたのかは、謎。）

そして、Gijsはコペンハーゲンに着いた時

自分のbaggageが紛失しててすごく焦ったし大変だった、

というお話をしてくれて、

その不安要素をどうにかしてサービスで改善できないか、

という話になりました。

こうして我々が考えたアイディアに関しては、次の記事にて。