HTML5などなど次世代Web勉強会 in 福井が開催されます

11月27日（土）に「HTML5などなど次世代Web勉強会 in 福井」という勉強会が開催されます。その名の通りHTML5などについての勉強会です。講演とサービス/アプリのデモ＆解説の2部構成になっています。

講演はMozilla Japan の方と最近フランスで開催されたW3C会議に参加されたjig.jpの方のセッションがあり、とても興味深い内容となっています。

・Firefox4で見るHTML5時代のWeb技術 by Mozilla Japan dynamis(@dynamitter)

・W3C、SVGの2本立て(仮) by @rch850

サービス/アプリのデモ＆解説では、HTML5などの技術を使ったサービスやアプリの紹介をしてくれますので、こちらもとてもおもしろそうです！

・クイズ(仮) by @tkmsm
　利用技術: WebSocket, Scala

・HTML5で始めるお気楽プログラミング(仮) by @aroma_black
　利用技術: Web Storage, Offline Web Applications, CSS3, (Flask@Python), Widgets

・twistmap(仮) by @mirutover
　利用技術: WebSocket(socket.io), node.js

・Canvasでアニメーションしてみたよ（仮） by @taiju
　利用技術: Canvas

・デザイナーがつくるHTML5アプリ（仮） by @shirokuro331
　利用技術: Canvas

・Firefox for Android by Mozilla Japan dynamis(@dynamitter)

一応僕も簡単なデモさせてもらおうかなと思います。
LT芸人らしく、前説的な感じですけどねw

イベントのターゲットは初心者、開発者、デザイナー問わずです。興味のある方はお気軽にご参加ください。
参加定員まで残りわずかだと思いますので、お申し込みはお早めにー。

→HTML5などなど次世代Web勉強会 in 福井
http://kokucheese.com/event/index/5492/

WCAN2010 Winterが開催されますね

名古屋のweb系勉強会WCANのイベント、WCAN2010 Winterが今年も開催されますね。

WCANとは

WCANとは、Web Creators Association Nagoyaの略で、名古屋を中心としたエリアでWEB制作に携わっている人、WEB に興味のある人のグループとして活動しています。

前から参加したいなーと思ってたんですけど、ちょうど用事がかぶったりとかでなかなか参加できなかったんですけど、先日WCAN主催の@kazumichさんが福井にいらっしゃったときに、WCAN Winterのことを教えていただいたので、なるべく予定をかぶらないようにしたので、なんとか参加できそうです。

今回は株式会社ワンパクの阿部 淳也さん、株式会社タービン・インタラクティブの志水 哲也さん、COULDの長谷川恭久さんのお三方のセッションとＬＴという構成らしいです。
まだ詳細は決まってないようですけど、興味深い話が聴けそうな予感がします。興味のある方は参加してみては如何でしょうか。

日程
　2010年12月18日(土) 13:30〜19:15（受付13:00〜）
会場
　名古屋国際会議場 会議室 141+142
　〒456-0036
　愛知県名古屋市熱田区西町1-1（→地図・アクセス方法）
　TEL : 052-683-7711
定員
　170名
会費
　事前支払一般 ￥3,000
　学生 無料(学生証をお持ちください)
　※領収証は当日お渡しいたします。
お申込
　

HTML5新要素 canvasの勉強

CSS3から一旦離れてHTML5のお勉強。
HTML5といえばcanvas！

canvas要素とは

canvas要素はスクリプト(一般的に JavaScript)を使って図形を描くために使われる新しい HTML 要素です。

引用元：HTML 5 canvas要素 + Javascriptで作る、動的コンテンツ

canvas sample1 - jsdo.it - share JavaScript, HTML5 and CSS

上のコードはcanvasとJSを使って矩形を描画するというもの。

　canvas id="sample" width="400" height="300"

で、幅400px、高さ300pxのsampleって名前のついたステージがあります。そこにJSで図形を描画しましょうってイメージ。

　ctx.fillRect(50,50,300,200); // 塗られた矩形を描く
　ctx.clearRect(120,80,200,140);　//　指定された領域を消去し、完全な透明にする
　ctx.strokeRect(200,20,180,260);　//　矩形の輪郭を描く

canvas sample2 - jsdo.it - share JavaScript, HTML5 and CSS

上のコードは矩形じゃなくて、パスを書くもの。パスを繋げて三角形とかを書ける。

　ctx.beginPath(); // パスの開始
　ctx.moveTo(50,50); // パスの始点を移動する
　ctx.lineTo(360,200); // 現在の始点の座標から、座標(x, y)に向けて直線を描く
　ctx.closePath(); // パスを閉じる(始点に向けて直線を描くことで図形を閉じる)
　ctx.stroke();　// stroke();で輪郭線
　ctx.fill(); // fill();で塗り潰し

canvas sample3 - jsdo.it - share JavaScript, HTML5 and CSS

上のコードは丸を書くもの。arc メソッドを使う。

　arc(x, y, radius, startAngle, endAngle, anticlockwise)

引数は5つ。
・x と y は円の中心
・Radius は半径
・startAngle と endAngle パラメタは円弧の始まりと終点をラジアン角で定義します
・anticlockwise パラメタは true の時には円弧を反時計回りに、それ以外は時計回りの方向に描く

canvas sample4 - jsdo.it - share JavaScript, HTML5 and CSS

色のつけ方。

　ctx.globalAlpha = 0.5;　//←透明度
　ctx.fillStyle = '#3399ff'; //←塗りの色
　ctx.strokeStyle = '#ff9933'; //←線の色

とりあえず今日はこんなとこで。
canvasはいろいろできそうな感じで興味深く、奥が深い！＞＜

参考サイト：HTML 5 canvas要素 + Javascriptで作る、動的コンテンツ | yoppa.org

CSS3 @font-faceの使い方

クライアントPCにインストールされてないフォントでも表示させることが可能になる@font-faceについて。
動作確認はsafari, Google Chromeで確認。（参考サイトにはfirefoxもOKって書いてあるけど表示されなかった。フォントの種類の問題かな？）

（11/10追記）
winで見れなかった。truetypeってmacだけ？
フォントは奥が深い・・・。

@font-face sample - jsdo.it - share JavaScript, HTML5 and CSS

まずは@font-faceセレクタでフォントの名前（font-family）とフォントファイルへのパス（src）を指定する。

（例）
　@font-face{
　　font-family:'Justice by Dirt2'; /* fontの名前 */
　　src:url('http://dl.dropbox.com/u/5882398/Justice%20by%20Dirt2.ttf') format('truetype');　/* truetypeフォント*/
　}

次にbodyセレクタで先に指定しておいた@font-face内の名前を指定する。

（例）
　body {
　　background-color: #fff;
　　font-size: 100px;
　　font-family:Justice by Dirt2; /* @font-faceで指定したfont-familyの名前 */
　}

これだけ。

整理すればそんなにややこしいことしてないんだなって印象。
IEに使うこともできるみたいだけど今はいいのでここまで。

参考サイト：CSS3 「gradient」と「@font-face」

CSS3 画像を使わずにつくるナビゲーションメニュー

画像を使わないでグラデーションを表現して見た目いい感じのナビゲーションメニューを作るCSS3の書き方。

CSS3 menu - jsdo.it - share JavaScript, HTML5 and CSS

うーん、解説できるほど消化してない。。
もうちょっと理解してから解説書こうっと。

参考サイト：insidesigns

kanazawa.jsが始まったよ！

男の中の男、@t32kがとうとうやってくれました！

前にWCAF来てくれたときとか、石川にお邪魔したときに話してた構想をとうとう実現してくれました。流石です！ステキです！＞＜

kanazawa.js は主に金沢市・石川県・北陸地方近辺の JavaScript デザイナー・プログラマによる非営利団体です。各個人のプログラミングスキルの向上を目的に、勉強会ならびにカンファレンスの開催、情報交換などを行うコミュニティを目指しています。
kanazawa.js は JavaScript を利用し、スキル向上を望む方であればどなたでも無料で参加できます。

引用元：kanazawa.js | facebook

ということなので、興味のある方はぜひチェックしてみてはいかがでしょうか。

でもとりあえず活動計画は未定みたいw
いい機会なので、なにかやりたい人は手挙げるといいと思いますよ！

→kanazawa.js（facebook）

twitterもあるよ。Tumblrもあるよ。Ustreamもあるよ！

CSS3 border-radiusの使いかた

CSS3のお勉強。
border-radiosで画像を使わずに角丸をつくる方法。
Firefox, Safari, GoogleChromeで使える。IEやオペラでも使えるみたいだけど、別途JavaScriptが必要みたい。

border-radius sample1 - jsdo.it - share JavaScript, HTML5 and CSS

（例）
　-webkit-border-radius:10px;　/* safari, Google Chrome */

で4角に10pxの角丸がつく。

下記は4角それぞれに角丸の大きさを指定する方法。
※-webkitと-mozで書き方が違うので注意。

（例）
　/* safari, Google Chrome */
　-webkit-border-top-left-radius:30px;　/* 左上 */
　-webkit-border-top-right-radius:60px;　/* 右上 */
　-webkit-border-bottom-left-radius:60px;　/* 左下 */
　-webkit-border-bottom-right-radius:0;　/* 右下 */
　/* Firefox */
　-moz-border-radius-topleft:30px;　/* 左上 */
　-moz-border-radius-topright:60px;　/* 右上 */
　-moz-border-radius-bottomleft:60px;　/* 左下 */
　-moz-border-radius-bottomright:0;　/* 右下 */

線だけもできる。

（例）
　background:#fff;
　border:#cc0000 3px solid;
　-webkit-border-radius:10px;

参考サイト：CSS Lecture

CSS3でググるといつもCSS Lectureさんにたどり着くなぁ。お世話になってます！（＞人＜）

Transitionの動きが見れるサイトが便利

tweenerのtransitionの動きをサイト上で見れるページがあるのでメモ。

「easeOutSine」とか「easeInSine」とか言われても実際どんな動きするかわかんないので、このページ見ながら欲しい動き探すといいかも。グラフクリックするとラインが動いて動きわかるのもイイ！

Adobe Flashでイージング調整するときにもいい参考になる。

→Tweener Documentation

CSS3 text-shadowの使いかた

今回は文字に影（shadow）をつけるCSS3。
firefox, safari, Google Chromeで使える。
（-webkit, -moz はいらないみたい。）

text-shadow sample1 - jsdo.it - share JavaScript, HTML5 and CSS

box-shadowと同じような感じ。

（例）
text-shadow: 1px 1px 3px #000;

で右下に1pxづつずれて3pxのびた#333の影がつけられる。

box-shadow: [x軸] [y軸] [ぼかしの大きさ] [色] ;

,（カンマ）で複数の指定が可能。

text-shadow: 0px 0px 5px #cc0000, 3px 3px 6px #333;

で5pxの赤い影がついて、その下に右下に3ｐｘづつずれて6ｐｘのびた#333の影がつく。

参考サイト：CSS Lecture

CSS3 box-shadowの指定方法

今回はボックス（div,p など）に影（shadow）をつけるCSS3。
firefox, safari, Google Chromeで動作。

下記はbox-shadowの例。

box-shadow sample1 - jsdo.it - share JavaScript, HTML5 and CSS

（例）
　box-shadow: 5px 5px 10px #333;

で右下に5pxづつずれて10pxのびた#333の影がつけられる。

　box-shadow: [x軸] [y軸] [ぼかしの大きさ] [色] ;

という感じ。

-（マイナス）の指定も可能。
もちろん影の色の変更も可能。

参考サイト：CSS Lecture

CSS3 アニメーション（transition）の使い方

CSS3のお勉強。今回はアニメーション（transition）の指定方法の一例。
この記事内のサンプルはsafari, Google Chromeで動作。

下記はロールオーバーすると背景色が変化するというコード。

transition sample1 - jsdo.it - share JavaScript, HTML5 and CSS

上記のコードは

　-webkit-transition: background-color 1s linear;

と省略して書くこともできる。

　-webkit-transition:[変化させる要素] [何秒] [変化するタイミング]

という感じ。

[変化させるタイミング]で指定できる値は

・default
・linear（一定のスピード）
・ease-in
・ease-out
・ease-in-out
・cubic-bezier() 4つの数字をカンマ区切りで指定

次に背景色と幅を変更したい場合は、

transition sample2 - jsdo.it - share JavaScript, HTML5 and CSS

複数変化させる場合は ,(カンマ)をつかって複数しているすることもできる。というか[変化させる要素]もいらないみたい。動いた。

transition sample3 - jsdo.it - share JavaScript, HTML5 and CSS

画面外に飛ばすこともできるみたいw

transition sample4 - jsdo.it - share JavaScript, HTML5 and CSS

FlashみたいにタイムラインでアニメーションつくるSencha Animatorっていうのもあるけど、基本知りたかったのでコード書いてみた。

他にもいろいろできそうなのでもうちょっと調べよう。

参考サイト：CSS Lecture | CSS3 アニメーション（Transitions）の使用方法

WindowsPhone7 Icon

UI Design and Interaction Guide for Windows Phone 7 v2.0.pdfに載ってるアプリケーションバーアイコンの一覧。シンプルだけどわかりやすくていい感じなアイコン。

Application Bar Icons should be clear, understandable, and leverage real- world metaphors that are familiar to users.

アプリケーションバーアイコンはユーザーにとって理解しやすいものにする必要があります、的なことが書いてあるのかな。

CSS3でつくるグラデーション

CSS3の勉強がしたかったのでブログのヘッダーにCSS3のgradientを使ってみた。

[css]
#header {
margin-bottom:0.6em;
padding: 4em 2em 2em ;
background: -moz-linear-gradient(top, #005eca, #0077ff);
background: -webkit-gradient(linear, left top, left bottom, from(#005eca), to(#0077ff));
}
[/css]

上記はヘッダーに指定しているCSSの一部。
backgroundが2つあるけど、上がFirefox用、下がsafari, Google Chrome用の記述。
IEは知らない（たぶんきかない）
要はブラウザごとに記述が違うということらしい。

上（#995eca）から下（#0077ff）に向かってグラデーションするみたい。

途中の色変えたりとかもできるみたいでいろいろとおもしろそお。

参考サイト：CSS Lecture | CSS3 グラデーション（gradient）の指定方法

WindowsPhone7 Font Segoe

WindowsPhone7アプリの基本フォントはSegoe。
メイリオみたいな感じで、すっきりとした印象なフォント。

Regular, Bold, Semi-bold, Semi-light, Blackの5種類。

フォントファイルの入手は Design Templates for Windows Phone 7からダウンロードすることができる。（その他のデザインテンプレートPSDファイルと同梱のzipファイル）

Developers can embed their own fonts for use within their application, but they will only be available for use within that application.

引用元：UI Design and Interaction Guide for Windows Phone 7 v2.0.pdf

上記のように書いてあるけど、SegoeってWindowsPhone7アプリにしか使えないってことなのかな？？