【重要】サービス終了のお知らせ

Works

Canvasでアニメーションするチャート

ドーナツ型チャートに特化したjQueryプラグインを試しに組んでみました。 Chart.jsのソースを大いに参考にさせてもらいました。 (Chart.jsは読みやすくてお勧めです) ・初期段階でドーナツ状のグラフが通るレールを予め描画するようにした。 ・色つきグラフ部分は初めopacity=0で、ラジアンが2π(終点)に近づくに従ってopacity=1になるようにした。 ・shadowなど細かいデザインの作りこみが出来るようにした。 ・中心にアニメーションするテキストを出すようにした。テキストを出すロジックはまだ微妙。 ・各色のlabelはhtml+cssで出す事前提のスクリプトです。 Chart.js(MIT License) http://www.chartjs.org/ ※各項目の所に出すlabelはhtml+cssだけで作るのが現実的だけど、 せっかくだからマウスオーバーで出すとかしたい・・・ でもcanvasでは色々と面倒なので、 何かこれ自体SVGで書いちゃった方がいい気がしてきた。 ということで次回はSVGで書きだすバージョンを検討中。。。 #追記: SVGバージョン作った。このコードをforkしたものの、ほとんど原型とどめてないw http://jsdo.it/hirotweets/ybdA

  • 12458
  • 11

SVGでアニメーションするチャート,ツールチップ付き

0.2版として、canvasではなくSVGでアニメーションするドーナツチャートを作ってみた。 前バージョンとは違って、マウスオーバーするとTooltipが出て数字がわかるようになりました。 SVGで円弧を描くのはなかなか大変。。。 アンカーポイントの位置を一点ずつ計算して指定してあげないといけないので。 canvasはある程度よろしくやってくれるところがあったんだけど。。。 そのかわり、mouseenter, mousemoveなどの標準のイベントを監視できるように! なので、マウスオーバー監視してグラフの値を出すTooltipをつけました。 SVGでやってみて、やっぱりインタラクティブなものはSVGのほうが有利だと実感。 DOMの中にちゃんとパスごとのエレメントが作成されるので操作出来るしなによりデバッグが楽。 CSSである程度装飾も可能だし(box-shadowが使えないのは残念)。 あと、スマホ、タブレットで拡大しても輪郭がきれい。 canvasだとひと手間加えないといけないし、結局は画像なので細かい部分の小回りが利きにくい。 加工しやすく扱いやすいので好きなんですけどね。Canvas。 まだまだ作成途上だけどもいったん公開。 一応解説記事書いた。 http://me.hateblo.jp/entry/2013/11/27/215543

  • 13228
  • 7

input type="file" をCSSで装飾し、かつ機能させる(IE7~も対応)

input type="file" をCSSだけで装飾する。CSSでは装飾できないことで有名なinput type="file"を、 できるだけ装飾してみた。 …と言うより、本物を見えなくしてフェイクのinputを作って、JavaScriptから操作するようにしてみた。 ■内容 ・Chrome23.0.1, Firefox17, Opera12, IE9,8,7で正常に表示されるのを確認。 ・「参照」ボタンを押しても、textboxを押しても参照ダイアログが起動。 ・ファイルを参照するとtextbox内にファイル名が入る。ファイル名が長い場合は「...」と省略される。 ・「アップロード」ボタンがあった場合で作ってみた。押しても何も起こりませんが。 ・画面内に複数入れたい場合は、"uploader"を複数入れることで対応可能。 ・JavaScriptが無効な状態にも対応。無効な環境では普通のブラウザデフォルトのinput type="file"が出現し、  アップロードボタンの左に並びます。 IEは画像作ってないので必要であれば足してください。 ※IEのfilterでグラデ作ろうかとも思ったけど、あんまりすきじゃないので使ってません。 ■ポイント IE対策。trigger()で、潰して見えなくしたinput=fileをJavaScript経由でクリックさせる方法は IEには通用しないので(無効にされる)、力技でtextboxの上に透明にして重ねる方法を取りました。 ただ、IEのデフォルトのinput=fileは、 ・参照したファイル名が入るテキストbox部分をクリックしても参照ダイアログが立ち上がらない。 ・中身のテキストも修正可能 ということなので、font-sizeを大きくすることで「参照...」と書いてあるボタンのサイズを調整、 overflow: hiddenでカットという荒業で乗り切りました。 フェイクのinput要素(".text")は、 contenteditable="false" readonly="true"を付けることでタブキーなどでのフォーカスをお断りしています。

  • 17679
  • 1

SVGでアニメーションするインタラクティブな円グラフ

この間作ったこれ↓をベースに、今度は円グラフ作ってみました。 http://jsdo.it/hirotweets/ybdA (SVGでアニメーションするチャート,ツールチップ付き) グラフの各箇所にマウスオーバーした時、全体をopacityで薄くするのではなく、 今度は扇形のエッジの円弧部分だけを変化させています。 また、クリックするとフォーカスしている箇所が分かりやすくなるようにしてみました。

  • 8074
  • 3

マウスオーバー時にCSSアニメーションするボタン Part1

CSSだけで頑張るシリーズ、アニメーションボタン編。 ボタンだけだとつまんないのでぼかした画像+図形パターンという最近の 流行デザインの背景もつけてみた。 CSSアニメーションは奥が深いので、 何回かに分けて書いていこうと思います。 追記:Part2作った http://jsdo.it/hirotweets/btnanimation2

  • 7243
  • 20

[音付]マウスオーバー時にCSSアニメーションするボタン Part2

[音量注意]CSSだけで頑張るシリーズ、アニメーションボタン編 Part2 http://www.oregongridiron.com/ ←このサイトのボタンがかっこよかったので どうやってるか調べて自分なりに実装+少しアレンジしてみた。 かっこいいエフェクトができるけど、html側で必要なタグが多い。。。 Part1はこれ: http://jsdo.it/hirotweets/btnanimation1

  • 6639
  • 7

Canvasでjpgを透過PNGに変換してサイズ削減

背景が透けて見える画像はきれいだけども 透過PNGにしなきゃいけないのが難点。 RGB+Alphaチャンネルなので、今回みたいに写真の透過PNGだと 普通にサイズが1M近くになっちゃう。 これを、JPG画像とマスク用の画像を元にして canvasで透過PNGに加工してしまい、サイズを節約するプラギン作りました。 要はPhotoShopで普段やる「透過PNG書き出し」をcanvasでやってしまおうというもの。 →これでサイズが1/5位にできた!調べたらAppleのサイトとかでもフツーに使われてるテクニックだった。 ということでおそらくもっと優秀なプラギンは山のようにあると思います。 あと一応、画像がそれぞれ呼ばれた後と、すべての画像加工が終わった後にcallbackできるようにしています。 今回使ってないけど。詳しくはソースを。 苦労したのはマスクを掛けるjpeg画像とマスク元画像が完全にloadされてからcanvasでdrawしないと どちらかしか・またはまったく描画されないこと。 特にIEではキャッシュ画像を読んだ場合はonload自体が発生しないことがある。IEまたおまえか。。。 ということで、BuggyなIE9の場合は、画像を呼び出すときに末尾にクエリストリングをつけるという苦肉の策で対応。 使い方。 ■HTML側 →透過PNG生成に必要な画像のパスは、すべてhtml側にdata属性で書き出しておく。 "data-origsrc"にはcanvas非対応ブラウザ用に透過PNG版の画像パス、 "data-jpegsrc"にはアルファマスクしたいjpeg画像(png,gifでも可)、 "data-filtersrc"にはアルファマスクをするpng画像(透明にしたい部分を黒にした透過png)を指定。 ■JS側 onready以降の好きなタイミングでcreateAlphaJpegを実行するだけ。 $("img").createAlphaJpeg(); $("#imgWrapper").createAlphaJpeg();(←画像を含むwrapperでも可能) optionsも指定できますが詳しくはソースを見てください。 以下のURLを参考にしたけど、まだバグがあるかも。。。 参考にしたプラグイン、スニペット: https://gist.github.com/yemster/1539102 https://github.com/7vsy/ImgLoader/blob/master/ImgLoader.js ※MITなので使うのは自由ですが当方で責任は一切持ちません。

  • 10201
  • 1

アニメーションする円グラフ

小数点下一桁まで表示できるよう初期バージョンから書き直しました。 あちこちに効率の悪い部分があるので、 もっとまともなのに書き直す予定。 追記:根本的に色々微妙だったので、もうちょっとマシな 形で書き直しました → http://jsdo.it/hirotweets/zMcI

  • 5407
  • 4

CSS3で画像を使わずスタイリッシュなボタンを作る

画像使わず、かつaタグ1個だけでどこまでボタンをスタイリッシュに装飾できるか試してみた。 after擬似要素とcss gradientが使えること前提なので、IEは10以降、Chrome, Firefoxで確認。 グラデーションAからグラデーションBへcss-transformできないか調べたけど、 まだ実装されていないようですね。 lineじゃなくてradialのことも考えたら実装がかなり複雑なことになるから 今はまだということなのかな。

  • 3998
  • 0

select要素をCSSだけで装飾する(Firefox対策込)

フォーム要素などのブラウザ側でUIが勝手にレンダリングされるものは、 CSS3から登場した"appearance"というプロパティによって自由に装飾できるようになったけれど、 まだ実験段階なので、特定の要素にしか効かなかったり、細かいバグが有ったりとbuggy。 現段階では"-webkit-appearance"または"-moz-appearance"といったベンダプリフィックス付きで提供されてる。 便利な時代になったなぁ。。。 https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance よし、appearanceを"none"に設定してやれば、あとは自由に装飾し放題!と思いきや、 Firefoxだけ、デフォルトのSelect要素の右側に表示される下矢印みたいなのが 残ったままになってしまう。 なんとか消す方法は無いものかと調べた所、 text-indent: .01px; text-overflow: ""; をつけると、Firefoxの時だけ、うまい具合にコレが消えてくれる事を発見。 https://gist.github.com/joaocunha/6273016 でもこういうハックは後で何が起こるか分からないので、 UAでFirefoxを判定し、htmlタグに"firefox"というクラスを付けてから、 .firefox .uiSelect select { text-indent: .01px; text-overflow: ""; } とやったほうが良いと思われます。

  • 21056
  • 0

Input type="radio"をCSSだけで装飾するテスト

CSSだけで頑張るシリーズ、今回はradioボタンに挑戦。 FirefoxでもIE10でも非対応なので、完全にスマホ用です。 といってもプロダクションで使うのはまだ気が引けますね。 これをベースにfallbackをきちんと作れば、何とかいけるかもってレベル。。。 iOS6, Android4.X~ではうまく動くはず。 手持ちのAndroid2.XではうまくスタイルされたけどAndroidは端末によって描画が全然違うことがあるので微妙。 Firefox(23.0.1)では、選択されたとき中心に青い丸が出るはずが、黒になってしまう。 あと、全体的にデザインが意図したとおりになっていない。っていうか程通い... やっぱりappearance属性のサポートはまだ発展途上といったところですね。。。

  • 7060
  • 0

Skills

  • Photoshop
  • Illustrator
  • jQuery
  • jQuery mobile
  • HTML5
  • CSS3
  • JavaScript
  • PHP

Hot tags

Categories

HTML / CSS / JavaScript