jsdo.it

[MooTools, HTML5] ToDoアプリを萌え化してみた

2012/03/24 Memo No comments , , ,

Web Creatros Contest “Q” っていうのがjsdo.itでやってます。
商品がApple製品だったのでまた釣られてしましました(ノω^)

お題を呼んでわが身をふりかえってみると……
仕事のToDoは会社が用意してくれるポストイットに書き、
プログラムに係わることは//TODO で書いている。
プライベートでは使う事がないから……
ほとんどToDoアプリをつかったことがなかった!

……ならToDo管理以外にも使えるものだったら
私みたいな「ToDoアプリ?なにそれおいしい?」ユーザーも振り向いてくれるかもしれない。
などと考えていたら神様がそっと囁いた。

 ノノノノノ
( ○○) < 身近にイイ人材がおるじゃないか…ほれ、脳内に
  (||||)

なるほど!脳内にいる住人とかタルパとか妄想とか俺の嫁とかに覚えてもらえばいいのか!
具現化するに合う素材を探してみたら素敵な立ち絵素材と巡り会えたので
ニュートリノの速さでレジ直行した勢いのまま作ったのがこれです。

todoll-start

プロジェクト名 はtoDoll
販売中の素材集が男女よりどりみどりだったので
あとでバージョン増やせるようにカスタムできる構造にしました。

(さらに…)

【初音ミク】 フルCSSでみくみくにしてあげる♪ 【してやんよ】

2011/03/03 CSS No comments , ,

3/1の夕方、jsdo.itの公式アカウントが大っぴらに誘い受けしてた。

そういえば3/9はミクの日だな~ (゚ω`)チラッ 3/9はミクの日だよなあ~(゚ω`)チラッ

その昔、マクパペットをフルカスタムしたり…

あの楽器を再現したり…

あの楽器 (Firefox4 only) – jsdo.it – share JavaScript, HTML5 and CSS

…した過去があるのでつい反応。

CSSで初音ミク祭りですね分かります

したらすかさず煽られた。

いや〜いくらCSS3がスゴイとはいえ初音ミクは難しいですよねえ?(゚ω`)チラッ

…………CSS3に不可能はない!!

心の中で啖呵を切った。そして釣られた事に気付いた午後6時。
ぶわっと頭の中に広がったのはCSSなはちゅねを-webkit-animationでネギ振らせる映像だったのだけども、
前記事で紹介したjsdo.piggという素晴らしい素体をみっくみくにしてやることに決めたら後は早かった。

※Webkit以外だと残念なミクさんになってしまうので実行画面はChromeかSafariで見てね!
(IE6-8で見るのはダメ!絶対!)

jsdo.miku forked from: jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS

ブラウザ起動するのマンドクセという人の為の画像はこちら。(左はノーマル素体)

jsdo-miku はちゅねミク

我ながら変態なソースだなと思いました。だがそれがいい。

髪や服やネギは同色で作った擬似要素を重ねてあの形にしています。
はちゅね化したときのほっぺ渦巻きはborder-radiusで円にしたborderだけの要素を擬似要素加えて3つ繋げて描いてます。
同じくはちゅね化した時の口はborderで作った台形を2枚重ねてます。
あと足の絶対領域や脇もちゃんとありますので目を凝らしてチェックして貰えるとありがたい。

CSSだけで絵を書くのは図形を上手いこと作る事がポイントなんですけど、パターンさえ覚えてしまえばそう難しくないです。
CSS3でつくれる形いろいろ。 や The Shapes of CSSを見れば一目瞭然。
幾何学図形を重ねる手法はForza2のペイントカーと通じるものがあるので、痛車職人と同じ位変態になればkei版ミクの再現も出来るんじゃないかなぁと思ってみたり。

来る3/9に向けて、他のユーザーやWonderflもみっくみくにされるよう呪っておきます 😀

ミクの日終わったけどVOCALOIDコンプ目指してまだまだ製作中!

(さらに…)