カテゴリ別:「HTML+CSS」の一覧

iPhoneのフリック時刻用ドラムUIを実現するTimeFlickerJSのサムネイル

以前も記事に書いたデザイナー主体のハッカソンプロジェクト「Designers Hack」で作っているモックをちょっと作り込みましたので、テストバージョンサンプルと動画をあげておきます。


DEMOはこちら(iPhone, Androidで見てください、PCブラウザでは動作しません)


TimeFlickerJS + iPhone4S



TimeFlickerJS + GALAXY S2


iPhoneのUIで見かける、数字を縦にフリックできる日付用のドラムっぽいあのUI。
あれ、HTMLのフォームなどで作ってほしいという要望がありがちです。

でも、「時」と「分」を同時にクルクル指でフリックさせて数字を合わせるHTMLのUIが無いので、作ってみました。
jQueryのプラグインみたいにしてます。

使い方は簡単です。


<head>
  <link rel="stylesheet" type="text/css" href="common/css/timeflicker.css">
  <script src="common/js/jquery-1.7.min.js"></script>
  <script src="common/js/jquery.timeflicker.js"></script>
  <script>
   $(function (){
    $("#timefrom").TimeFlickerJS();
   });
  </script>
</head>

 <body>
  <div id="timefrom">
   <span class="TimeFlickHour">4</span>
   <span class="TimeFlickMinite">10</span>
  </div>
</body>

以上です。 必要なのはHTML上でspan.TimeFlickHourを「時」として、span.TimeFlickMiniteを「分」とします。
これだけは必須なので忘れないように。
あとはその親divをjQueryな書き方でTimeFlickerJS()を付けるだけで準備はOKです。
親div("4時10分"と表示されている部分)をタップすると、ドラムっぽいUIが降りてきたら成功です。

メソッド

一応、OKボタンが押されたタイミングでイベントを発火できます。


var jikan = $("#timefrom").TimeFlickerJS();
jikan.change(function (e, v1, v2){ console.log(v1+" "+v2); });

とすると、v1に「時」が、v2に「分」が帰ってきますので、
例えばform要素の中で使う際、
<input type="hidden" name="jikan" value="ここにv1とv2を入れてサブミット" >
とかするとお問い合わせフォームでも使えるので良いでしょう。

シビアだけどAndroidでは不採用になりそう?

Designers Hackのフロントエンドエンジニアのメンバーと話していると、Android大丈夫?的な声が。。。
確かにiPhoneはレンダリングも強力なので割とフリックなど滑らかなんですが、GALAXY S2やXPERIA ARCなどで試したら結構厳しいところもあります。
クオリティを考えるとAndroidはもっと別のUIを考え、振り分けた方がいいのでは?という意見が続いています。

あと、このUIは今は横幅320pxとハードコーディングしてます。解像度のちがうAndroidではCSSを触らないといけなくなりそうです、というよりボツになりそうです。
例えばhtcとかの機種では横が空いてしまいますので。。。
これはもうちょっと改善できたらいいなと。

ただ、このようなUIの制作を色んな仲間の意見をもとに作れ、勉強しているって恵まれてるなあと感じます。
精進精進。

2011-09-24 15.11.25.jpgのサムネール画像

始まって2回目のHTML5-WEST.jp勉強会なんですが、50人も集まりました。
みなさんお疲れさまでした。

僕は「HTMLでつくるカメラ&落書きアプリ」というセッションでお話をさせてもらいました。

スライドはこちらです。


セッションの中でお話しましたけれど、まだ現在では、HTMLやJavaScriptベースでカメラを使ったWebアプリは作れません。
これは各ブラウザがまだこの機能をサポートしていないからです。
ただ、テストとして唯一Operaの特殊なビルドがそれを可能にしています。

Webの未来という意味では面白い試みだったと思います。
もうすでにW3Cのワーキングドラフトに上がっているので、「Webでこういったことが将来出来るようになる」ということを示唆するものなんですね。

1行のHTMLと簡単なJavaScriptのサンプルでカメラアプリが作れるデモを実際披露すると、色んな人の反応が多くて楽しかったですね。

getUserMedia()というJavaScriptのメソッドは、カメラやマイクを取得する機能ですが、仕様はまだあやふやでこれからもう少し整備されていくでしょう。

最後にアイデアネタとして「変顔カメラアプリ」として画像がウネウネ動いていたのは、実はとても頑張って作ったんです。
将来はもうちょっとアレをアプリっぽくしますのでご期待ください!!

スクリーンショット(2011-09-24 17.34.21).png
デモでお見せしたテクスチャマッピングによる画像を変形させて撮影
カヤックさんのWebサービスで、HTML5関連の自己スキルが試せるというものが公開されています。

html5cat.png


これはエンジニア向けのJavaScriptコース、そしてデザイナー向けのHTML / CSSコースの二つの科目(?)があり、それぞれ好きな方を選べるし、両方受験することもできます。

まあ、内容はもちろんここでは書けないけど、結構難しいことから、割と誰でも知ってそうなことまで幅広いので、自分のスキルを試すということで、やってみてはいかがでしょう?

高い点数だったら、みんなに自慢しちゃおう、ということでTwitterのアカウントでログインして受験してみるのもよいでしょう。
逆に点数が低いからといって、一方的に公開されるわけではありませんのでご安心を。

ちなみに僕はJavaScriptは専門外なので、HTML / CSSコースだけ受験。
惜しくも93点。
一問間違えてしまいました。。
よく考えたら分かることを、、、悔やんでしまいます。

score.png


HTML5がテーマとなる試験なので、セマンティックな考え方を理解しておいた方がよいですし、CSS3の知識も必要になってきますし、JavaScript APIとの絡みも理解が必要になってきます。

と、書くと、「何でJavaScript APIとの絡みが必要なん?」って思うかもしれません。
しかしこれは僕としては当たり前のことと思い、苦手だけど勉強中です。
(オライリーから出ているJavaScriptのパターン本を読んで、確かに面白いですが、これは僕がやる分野じゃないな、と思っています。)

ただプロジェクトって、制作に関わる人全てが同じゴールを見ないとチグハグなものが出来上がってくるのにこの日本ってのは、フロントに関わる大事な作業をする人がディレクターからの指示だけで動いているという現状があまりにも多く、ヒドい場合には途中で大幅な仕様変更などに何故そうなったかも理解出来ず、苦しむ場合があります。

「上が言ってるからそれは当たり前」とか「徹夜してでもやるべき」とかそんな言う人もいるけど、もの作りの本質からは確実にずれている気がします。

ただ、大きなプロジェクトになれば(何十人、何百人のエンジニアが動くプロジェクト)になると、さすがにそうも行かないケースもあるので一概には言えませんが。

少なくとも数人体制で制作にかかる場合、もっとフロント制作に関わる人(フロントエンドエンジニアやデザイナー)も会議に参加させて、その人のことをちゃんと信用していこうよ。
フロントに関してはその人の意見が一番知識があるし、的を得ているはずなのに、何故違う人が仕様を決められるのか?は問題として認識しておくべきかな?と。

理想的な話ばかりしてるけど、制作者は全てコミュニケーション能力がないとダメ。
上記のように、フロントエンドの人やデザインの人などは、信用されている以上、プロジェクト全体のゴールを見据えて話が出来て提案も出来ないと、ただの言いなりにしかなれない存在なんです、悲しいかな。

だから僕らの立場を5年先、10年先でももっと価値のあるものにし、言いなりにならずに「この人にお願いしたい」と言われたいので、今が訓練の時期だと思う訳です。

だから話が戻るけど、デザイナーの知識にとって「何でJavaScript APIとの絡みが必要なん?」という答えは、自分が作ったUIと密接に関わるからです。
自分がUIを設計する以上、最後はプログラムによってどのように動くかなんて知っていて当然、その挙動が予測できるようにならないといけません。

少なくとも、スクリプトを書けなくても、何が出来るか?
ここを最初に設計/定義しておかないと後々困る、という部分だけは抑えておきましょう。
これが今後、複雑な仕様になって広大なHTML5の技術に対する、僕らデザイナーの向き合い方だと考えて勉強しています。

こう考えると、色んなスキルが必要となってくるので、ひと独りでこのスキルを理解出来る人なんていないんじゃないかと思ってきます。
JavaScriptエンジニアと言っても、今までDOM操作が得意だったエンジニアだけでなく、描画アプリをcanvasやSVGなどを使って作ることを得意とするエンジニアやAjaxやWebSocketなどの通信系が得意なエンジニアとか色々、エンジニアのなかでも幅広く分野が分かれていくものと予感しています。
これはあくまでディレクターとしての一つの意見ですが。

デザイナーもそうです。
ビジュアルを担当するデザイナーから、ユーザの指や目の動きを考えたり使いやすい設計を考えるデザイナーなど、デザイナーといってもWebに関わらずプロダクトやエディトリアルデザインの世界でもいっぱいいます。

どれがWebの世界で一番重要かだなんて順位をつけられるわけがありません。

見た目も機能性も、全てにおいてクオリティを保たないとそれをクオリティとは言わないからです。

さ、そんなわけで、コレからも勉強、勉強、と。
お互いいい仕事をしたいですね!

以前ブログにも書きましたjQuery用のプラグイン、jquery.monochromer.jsですが、ある件でこのプラグインを紹介してくださるらしく、ちょっと改良しました。

<img>画像マウスオーバーでモノクローム変化するjQueryプラグイン「jquery.monochromer.js」

色を指定できるデモとソースのダウンロードはこちらでお願いします。

どういったものかというと、img要素にこれを適用すると画像がモノクロになるというものです。
適用方法は簡単で、jQueryを読み込んだ後このプラグインを設置し、指定するだけです。

facebookプロフェッショナルガイド

一番シンプルなカタチ。
monochromerをデフォルトの状態で与えてください。
img要素がグレースケール化します。
本の画像にマウスを乗せるとカラーになります。

今回はイヤラシく、僕も執筆に参加した宣伝も兼ねて「Facebookページ プロフェッショナルガイド」のサムネイルを使います、ゴメンナサイ。

$(".demo01 img").monochromer();

改良点ですが、HTML5のcanvasを使っています。
IE8までは、「なにもしないプラグイン」というように、内部でブラウザ判定をしてます。
つまりIE6などでは、画像が表示されるだけなので、必要最低限の表示は出来ます。
新しいブラウザは機能が増え、古いブラウザはそのままで、、という感じでしょうか?

facebookプロフェッショナルガイド

今度はカラーを指定します。
monochromerのcolorパラメータに、16進数のCSSカラー値を指定します。
この例は#f00、もちろん#ff0000でもOKです。

$(".demo02 img").monochromer({color: "#f00"});
facebookプロフェッショナルガイド

しかし、いきなりページが表示されて画像がモノクロになるとおかしいですね。
通常はカラーのまま、マウスオーバーでモノクロ、という流れにしたいときには、typeパラメータを"false"にしたらOKです。

$(".demo03 img").monochromer({color: "#f00", type: false});
  • facebookプロフェッショナルガイド
  • facebookプロフェッショナルガイド

今度は二つ並べました。
こういったレイアウトをするときは、imgに親要素で囲ってください。
今回はli要素で囲み、liをfloat: leftしてます。
monochromerの指定はcolorパラメータに"sepia"と"blue"を指定しました。

$(".demo04 li:first-child img").monochromer({color: "sepia", type: false});
$(".demo04 li:nth-of-type(2) img").monochromer({color: "blue", type: false});
  • facebookプロフェッショナルガイド
  • facebookプロフェッショナルガイド

ここでaタグを付けないと指マークにならないのですが、Webアプリケーションを制作していると、どうしてもa要素ナシでマウスを指マークにしたいことがあったとしましょう。
この時、実はプラグインの内部的な都合で、CSSでimgに「cursor: pointer;」としても指マークにならないので、パラメータをひとつ追加しました。
それがCSSのcursorプロパティの名前、そのもので、以下のように追記します。
これでマウスを乗せてください、マウスの形が変わると思います。

$(".demo05 li:first-child img").monochromer({color: "sepia", type: false, cursor: "pointer"});
$(".demo05 li:nth-of-type(2) img").monochromer({color: "blue", type: false, cursor: "crosshair"});

実はcanvas要素を生成して、span要素でラップ

span.monochrome-wrapのDOM構造

内部的にcanvas要素を生成して、img要素のピクセルをcanvasに取り込み、変色させています。
img要素とcanvas要素はCSSのpositionで重ねて、その親にspan.monochrome-wrapという要素を生成しています。

レイアウトをするとき、img要素にmarginとpaddingとborderとfloatを指定すると、span.monochrome-wrapに適用します。
しかし他のCSS設定は無視されますので、例えばtransformとかで、マウスオーバーでscaleによって大きくしたり、とかが出来ません。
なので、内部的に生成されたspan.monochrome-wrapに対してCSSを当てるといいです、以下のようなCSS設定でマウスを載せると大きく見せられます。

facebookプロフェッショナルガイド .demo06 span.monochrome-wrap {
-webkit-transition: .3s;
}

.demo06 span.monochrome-wrap:hover {
-webkit-transform: scale(1.2);
}

将来的には、img要素に指定したCSSプロパティを全部span.monochrome-wrapに適用させたいところ。
実は試したのですが、クロスブラウザの作業でどうしてもうまくいきませんでした。
ぜひ改良したいなあ、と思います。

あと大事なことなんですが、canvasの仕様でドメインの違う画像のピクセルを操作することは出来ないことに鳴っているようです。なので、同じドメイン内の画像だけにおいて使うとよいでしょう。

ie9.png
今さら書くことでもないのですが、IE6〜8に引き続き、IE9でも同じような仕様なので、自分用にメモ。

JavaScriptで画像(<img>)の読み込みの完了を待ってから処理を実行する時に、キャッシュ対策としてよくやってる

var img = $(this); // <img>を指す
img.src = 画像のパス + "?" + new Date().getTime();
img.onload = function () { //読み込み完了後の処理

でもでも、、今回はちょっと違うケースで、
もう既にHTMLに書かれている以下のようなimg要素のロード完了を待つ場合、src属性の値はもう決まっているから、キャッシュ対策っていうものでもないのです。

<img src="image01.jpg" alt>

IE9の場合では、もう既に画像がキャッシュによって読み込みが完了している場合、
onloadイベントハンドラを実行しないでスルーしちゃうので、読み込み後の処理が全くされない状態でした。

ただしこれはIEだけの問題で他のブラウザは素直に処理してくれるので、
ブラウザ判定をして、「IEで見てる、なおかつ、画像の幅が0ではない」事を条件として、ロード完了後の処理を行う、
さもなくば、他のブラウザと同様の処理としてonloadを使って、読み込み完了を待つ、という処理で対応してみる。

//jQuery使用です
var img = $(this); // <img>を指す
var ua = $.browser;
if(ua.msie && img.width() !=0) {
imageLoaded();
}else{
img.load(imageLoaded);
}
function imageLoaded (){ //読み込み完了後の処理

画像が読み込まれないと、後で処理などをするときに困るので、
画像読み込みとIE9仕様の対策はこれから要るのかな?と。
css3event1.jpg

本が無事発売されて、出版記念イベントが開催されました。
(写真は左からマイコミ角竹さん、秋葉、小山田さん、外村さん)

「CSS3 デザインプロフェッショナルガイド」

著者は以下の人たちです。
秋葉秀樹, 秋葉ちひろ, 小山田晃浩, 外村和仁, 蒲生トシヒロ, 宮澤了祐 

僕らが手がけたのは第三章のデザインサンプルで、実際にCSS3を使って作ったサイトやその一部を紹介する実践的なセクションです。
アイデアを織り交ぜ、全てのサンプルがオリジナルのデザインなので、そこからの作り込みがとても大変だったので思い入れのある作品になっています、よかったら是非手に取ってみてくださいね。

さてさて、先日5/28には東京に行ってきました、この書籍の発売セミナーイベントがありましたので、今日はそのレポートです。

USTREAMでセミナーの内容を見れます。
前編
後編

◎外村さんセッション-前編-

hokamura_session.jpg

トップバッターは外村さん、CSS3のtransitionとanimationを解説しています。
書籍には詳しく解説出来なかったイージングの濃い話もあります。
両方ともアニメーションができるプロパティなんですが、動きをtransitionとanimationの違い、記述の方法などを実際作ったデモで解説しています。
■Transitionsプロパティの解説(外村さんセッション)
transition-durationはアニメーションする時間を指定出来ます、例えば...

 transition-duration: 2s:

とすると2秒かけてアニメーションします。
transition-propertyとは、どのプロパティの値をアニメーションするのか?という指定が出来ます。
例えば...

 transition-property: left;

にすると、leftの値に限定してアニメーションします。

 他にもdelay(遅延)やイージングをコントロールできます。

■Animationプロパティの解説(外村さんセッション)
Transitionsと似ているのですが、大きな違いはいくつもあります。
・キーフレームを指定して、例えば開始から50%のタイミングでCSSの数値状態を細かく指定します。
・無限ループが可能です。
・繰り返す回数が指定できます。

animation-directionとは、アニメーション終了時に繰り返しが指定されていると巻き戻しすることも指定出来ます。
 animation-direction: alternate;
にすると、今までのアニメーションの軌道を巻き戻し再生するという変わったプロパティです。

■イージング(外村さんセッション)
・アニメーションの動き方を指定できます。
・「ずっと等速」「最初ゆっくり、だんだん早く」など

CSSでアニメーションさせるのは簡単にできますが、内部でどういう処理が行われているか?という原理をJavaScriptに置き換えて解説してくださいました。
JavaScriptが分からない人でも、できるだけ短いソースで細かく解説してますので興味のある方は動画を停止しながら一つ一つ確認してみてください。

◎小山田さんセッション

oyamada_session.jpg

まずはCSS3のサポート状況の説明。
古いブラウザへの問題。

■Graceful Degradation(小山田さんセッション)
基準を新しいブラウザに持っていき、古いブラウザには妥協するという考え方。
実際にはTwitterのホームページなどは、角丸やシャドウ、グラデーションなどをCSS3で表現していますが、IE8以前では諦める。
デザインが劣化するけど情報閲覧は可能、機能性も問題ないようにする、といった考え方です。

■Regressive Enhancement(小山田さんセッション)
手法としてPolyfillという方法を使うのですが、Graceful Degradationと違いは古いブラウザへの対応を諦めない、という言い方が正しいかもしれませんが、古いIEなどへの対応を正規のCSS3以外の手法で対応するというもの。
PIEというCSSエミュレータ使って、IE6でもborder-radiusなどを実現できるというもの。
http://www.lawson.co.jp/
などが代表的な例です。
元々背景画像などを指定してPIEで角丸などを使うと、深度の問題で隠れてしまうのでその対策なども紹介しています。くわしくは映像をみてください。

■SVGとSessionStrageを使った実際のサイトの紹介(小山田さんセッション)
http://www.kirishima.co.jp/aji/2011/spring/01/
PolyfillとはCSSだけでなく、HTML5の技術にも対応する考え方です。
例えばこのあたりのライブラリを使うことで古いIEにもHTML5の技術を使うことが可能になります。

◎秋葉のセッション

akiba_session.jpg

この言葉を使わなかったんですがHTML5の「Web Socket」を使ってアンケート投票をしました。
双方向通信の面白さが伝わったらうれしいなあ、と。

こちらはスライドも用意しましたので、USTREAMとあわせて見てみてください。
スライドURL(PDF: 3.9MB)

それでは、本をぜひ、よろしくお願いします!!

cover2.jpg
「CSS3 デザインプロフェッショナルガイド」
前回の記事でもそうだったんだけど、例えば-webkit-perspectiveとか、Safariだけしか動かないって言われてますが、Chrome13.0.767.1 devだと、ちゃーんと動いているみたいですね。知らなかった。
(CSS3の3D関連はここに仕様が書いています。[ http://www.w3.org/TR/css3-3d-transforms/ ]) 

以下は参考サイト[ http://css-3d.org/space-cube-1.htm ]をスクリーンショットしてみました。

view_on_safari.jpg
Chrome13.0.767.1 devで確認、CSS3 3D transformsが効いています。

view_on_FF.jpg
Firefoxだとこんな感じ
ただ、Chromeの開発段階のバージョンってあって、レンダリング中、画像が欠けたりする場合があります。ちなみに下の画像はそのスクリーンショット。
僕の場合大きな画像を使ったせいかもしれませんが、いずれにせよ、CSS3の3Dtransforms関連はSafariが安定してますね。

view_on_chrome2.jpg
(Chromeで見た不具合、たまにポリゴンが割れているような見え方になる時がある)

もうすぐChromeもサポートされるようになるんですかね。きっと。
今後も他のブラウザに期待、今日はここまでです。。

えーっと、本を書きました、5/28に毎日コミュニケーションズから発売される「CSS3デザインプロフェッショナルガイド」という本を共著で、SOY CMS2の開発者、宮澤さんと、東京のWeb制作会社、ピクセルグリッドの小山田さんや外村さん、そしてITプロフェッショナルの蒲生さん、そして弊社とみたと僕、といった豪華(?)メンバーで執筆しました。

amazonではすでに公開されています。

どういうコンセプトかというと、大きく3つの章に分けられています。
入門的な章と、リファレンス的な章と、ビジュアルサンプルの章。
僕はビジュアルサンプルを担当しました。

始めは、そもそもCSS3ってどんなものか?とか、どんな場面でうまく使うべきか?などを主に蒲生さんが担当してます。
これはどちらかというと、私たちフロント周りの制作をしている人やデザイナーさん向けなので、
今までの書籍などを読んで、どうしても難しく考えがちな人に読んでもらいたいです。

そして小山田さんや外村さんはとてもCSS3周りの仕様書などに詳しく、CSS3のリファレンスを担当しています。
彼らの実績豊富な知識と常に新しい情報を発信しているCSS3の最新の動向などを、分かりやすく解説したものです。

そして僕が担当したビジュアルサンプルでは、実際CSS3で作ったサンプルを公開してます。
単に画像を使わずにボタンを作ったり、アニメーションや3Dゲームの応用を解説したり、商品ギャラリーの見せ方だったり、フォームをカスタマイズしてもっと便利にしたり、出来るだけ分かりやすく、マニアックにならないように作ったつもりです。

実は、執筆途中でFirefoxのバージョンが4になったり、Operaのバージョンが11になったり、それによって書き直しが発生したところが大変でした。

例えばFirefox、3.6までは遷移(アニメーションのようなもの)を行うtransitionプロパティがサポートされてなかったけれど、4でサポートされだした、とか。
OperaではCSS3グラデーションが11から直線グラデーションだけサポートされたとか。
対応ブラウザの確認をしたり、不具合やクセがないか確認したり。

そんな中こんどはInternetExploler 10の発表があって、Platform Previewがダウンロード出来るようになってるので、そっちも調べたり。

本当に過渡期なんですね、まさにまっただ中。

さてさて、今日はとても簡単なサンプルなんですが、Safariで実装されているCSS3の3Dトランスフォームを試したいと思います。
書籍では、3Dカードゲームのサンプルを執筆していますが、これはもっと簡単なもの。

平面の広大な地図を上空に見おろし、視点を回転させるようにしてみましょう。

CSS3にカメラオブジェクトなんてないですね。だから地図を立体回転させて、自分が回っているようにみせます。

image.png

ただ、この画像はちょっと使用上問題があるので、実際のサンプルでは「白地図、世界地図、日本地図が無料【白地図専門店】」さんからダウンロードさせていただきました、ありがとうございます。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 地図を上空から眺める</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="3d.js"></script>
</head>
<body>
<div class="world">
<img src="world_ga_kabegami1_1024.gif" alt="地図">
</div>
</body>
</html>

これだけ、つまり地図をdivタグで囲っただけです。
そこでCSSにより、横軸(X軸)を50度回転させます。
div.world {
-webkit-transform: rotateX(50deg);
}

Safariで見るとこんな感じです。

no_perspective.jpg
これでは、縦がつぶれて見えるだけです。

ではこれに「遠近感」をつけます。
CSS側で、まずbody要素に遠近感をつけます。

body {
-webkit-perspective: 300px;
}

結果、Safariではこう見えます。
perspective.png

気になるのは、300pxという数値ではないでしょうか?
この数値、実は大きくなればなるほど、平面的に近づいていきます。
ゼロだと、まともに見えることが出来ません、数値が小さければ、遠近感もキツくなります。(このあたりは書籍を読んでいただけたら。)

さて、それではキーボードの左右(←と→)で視点を360度回転するようにしましょう。
回転させる対象はdiv.worldです。
そして回転する軸ですが、これはrotateZになります。
これは元々地図を真っ正面から見るとZ方向の奥に軸を置いて回転させることになりますよね?
それが親のbody要素にperspectiveがかかっているせいで、Y軸と勘違いしそうですが、Z軸を回転させることが正しいのです。
この値を4度ずつ足したり引いたりすると、地図が回ります。
サンプルはこちら
サンプル(Safariで見ましょう)

では、カクカク動くのは毎回、角度が更新されているので、瞬間で角度が変わるのではなく、それをつなげるようにアニメーションさせたいので、ここではCSS3のtransitionプロパティを使います。
CSSファイルにはdiv.worldに以下を記述します。

div.world {
-webkit-transition: -webkit-transform 0.3s linear;
}

上記は「linear」がポイントです、イージングすると「くいっくいっ」と、変な動きになるので、ここはイージングなしでいきます。
今度はカクカクせず、動きます。transitionが効いているからですね。
サンプル(Safariで見ましょう)

でも、これだとキーを押したタイミングで一回回転したら止まります。
ここは一つ、transitionを使わずに、JavaScriptで一定間隔で数値を入れ替えた方が良さそうです。
角度が入っている変数に、プラスかマイナスのスピードを都度加算するといいかな?と。
サンプル(Safariで見ましょう)


grad2.png

こちらになります。
CSS3 Easy Gradation Editor "Grad2" < http://grad2.ecoloniq.jp/ >

最近Webkit系とMozilla系のCSS3グラデーションの記述がW3Cの規定に統一されるらしく、もうすぐ記述がひとつにまとまるって話を聞きました。

なので、近いうち、吐き出されるコードを見直す必要があるんですが、、、

以前、CSS3グラデーションを生成するサイト「Grad? Gradient!」を作って公開しましたが、使ってみると非常に使いづらい点がいくつかあり、悶々していたので以下の点を改善点として新しく作り直しました。

  • スライダーをダブルクリックしてもカラーピッカーのデフォルトの色がスライダーの色にならない。
  • そもそも色が選びにくい!色を編集するには使いたくない。
  • 無駄にborderプロパティとか色々ソースが吐き出されるけど、大抵そこは自分で書くだろう。
で、以下のように手段を変更しました。

  • カラーピッカーは有名でしっかりしてるプラグイン「Farbtastic: jQuery color picker plug-in」があるので、使わせていただく。
  • グラデーションスライダーのドラッグは「jQuery UI Draggable plug-in」を使わせていただく。
  • スライダーは前回canvasで全部を描画していたけど、今回はp要素であるHTMLを使う。
  • 今回はグラデーションのソースだけ吐き出させる。
といったように、jQueryさまさま。

Farbtasticカラーピッカーはすばらしくって、ホントにしっかりしています。
もちろん、色をget / setするためにプロパティやメソッドも用意されているので、「このスライダーがクリックされたから、スライダーが持っている色をカラーピッカーにセットする」ということが楽にできます。

設定はこんな感じです。

// HTML側

<p><input type="text" id="colorCode" name="color" value="#123456"></p>
<div id="colorPicker"></div>

// JavaScript側

var picker = $.farbtastic('#colorPicker'); // div#colorPickerにカラーピッカーを出現させる
picker.linkTo($("#colorCode")); // input#colorCode内とリンクしてカラー値を表示させる

これだけで、カラーピッカー単体はもう完成です。
すごい。

で、あとはセットするために

var val = "#ff0000";
picker.setColor( val );

とすると、その色の場所にカラーピッカー内のアイコンが移動します。(つまり赤を指す)
今現在ピッカーの色の何色が選択されているかを知りたい場合

picker.color

で、カラー値が返ってきます。

もうこれだけで使える!と思ったんですが、独自のイベントについては公式サイトには詳しく触れてなくてちょっと困ってました。
中身のソースを読めるほどの知識がないもんだから、どうしようと。。

要は色を選んでいる最中、mousemoveのようなイベントがあれば使いたかったんですが、どうやら取れず、別の方法を使ってマウスを押しながら動かしている間はcolorプロパティを取得し続けて、ボタンの色にリアルタイムに反映させることにしました。

というわけで、良かったら使ってください。


shot.jpg

クリスマスに何してたかって言うと、jQueryプラグインを作ってました。。
サンプルはこちら。

タイトルの通り、画像をモノクロに自動で変換して、マウスが乗ったらカラーに変化するってやつです。HTML5のcanvasを使ってます。
命名「jquery.monochromer.js」

まず、どんな事が出来るかっていうと、、、

  • カラー画像をセピア調、ブルー調、コントラスト強めのグレー調など、「古い写真」のイメージに変換できる。
  • モノトーンなのですが、CSSの16進数カラー値をそのまま使う事が出来るので、ぶっちゃけどんな色でも使える(カラーのフィルターをかぶせたような感じでとらえてくださいませ)
  • 「フワッと」変移するのか「パッと」変移するのか、スピードをミリ秒で指定出来る(ここはjQueryのアニメーションでおなじみのミリ秒をそのまま)
  • 「最初にモノクローム → (元の)カラー画像」だけでなく「最初に(元の)カラー画像→モノクローム」というように、変移の順番を逆にできる。
で、HTMLコーディングは以下の通り

<ul id="photoNav">
<li><a href="#"><img src="images/image01.jpg" alt></a>
<li><a href="#"><img src="images/image02.jpg" alt></a>
<li><a href="#"><img src="images/image03.jpg" alt></a>
<li><a href="#"><img src="images/image04.jpg" alt></a>
<li><a href="#"><img src="images/image05.jpg" alt></a>
</ul>

よくある光景ですね、ただしHTML5的なマークアップなので、終了タグを省略したりしてます。

使い方は簡単です。
まず、プラグインとサンプルをダウンロードしてください。

で、解凍して、index.htmlのソースを見てください、正直HTMLが分かる方なら全然簡単です。
<head>要素内にjQueryを読み込みます。
さらにその下にjquery.monochromer.jsを読み込みます。そして<li>要素に対してmonochromer()を実装します。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.monochromer.js"></script>
<script type="text/javascript">
$(function () {
$("ul#photoNav li").monochromer();
})

以上で動作します、ただし注意が1点。
HTML5 canvasのセキュリティ仕様の問題で、ローカル環境では動作しません、サーバに上げて確認してください。

あと、HTML5仕様なので完全にIE8以下を無視しています。
なのでその場合<![if !IE ]>〜などで対処してください。
IE8以下では普通の画像リンクで対応できるというワケです。


では、次に細かい指定ですが、上記の通り色が変えられたり、変移スピードが指定出来たり、マウスオーバーの前後の状態を逆転できます。パラメータを指定しましょう。

$(function () {
$("ul#photoNav li").monochromer({
speed: 300,
color: "sepia",
type: false
});
})

◎変移スピード(speed)
 文字通り、マウスオーバーして色が変わるまでの時間をミリ秒で決められます。
 1000で1秒を意味します。デフォルトでは300ミリ秒(0.3秒)です。

◎変色させたい色(color)
 キーワードとCSSでおなじみ#付きの16進数の2種類が用意されています。
 キーワードは以下の通り。
 gray, lightgray, sepia, blue, green

color: gray
color: lightgray
color: sepia
color: blue
color: green


といった感じで、キーワードで色を指定すると、その通りに変わってくれます。 さらに、もっと細かく設定したい場合、CSSのカラー値(#ff0000で赤、など)を指定してください。 原色に近いほど効果が得られやすいでしょう。

 
color: #ff0000
color: #0033ff
color: #00ff33


最後にtypeプロパティですが、初期状態を「変色している状態で表示」か「マウスオーバーして変色か」をtrue, falseで切り分けられます、デフォルトはtrueです。 
よってこの場合▼

$(function () {
$("ul#photoNav li").monochromer({
speed: 300,
color: "sepia",
type: false
});
})

li要素内の最初のimg要素に対して、 typeがfalseなので、通常時が普通のカラー画像(そのまま)でマウスオーバー時に セピア調に、300ミリ秒で変色していく。といった感じです。
« Flash AS3 学習 | メインページ | アーカイブ | HTML5 canvas学習 »

このページの最初へもどる