Your SlideShare is downloading. ×
CSSだけで実現するグラフィック表現
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSSだけで実現するグラフィック表現

851

Published on

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
851
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Advanced Tech Night No.07 CSSだけで実現する グラフィック表現 2013/08/30 Acroquest Technology 村田 賢一郎(@muraken720) Visualization JavaScript ~データ可視化のためのJavaScript~
  • 2. 目次 1. はじめに 2. CSS3/Sass/SCSS/Compass 3. CSS Tube Map is awesome. 4. CSS Tube Map を解剖してみる 5. CSS Position Editor を勢いで作ってみた 6. CSS Toyoko Map を作ってみよう! 7. CSS3 animations を使ってアラーム状態を表現する 8. A light, semantic, responsive, CSS framework “Jeet2” 9. Jeet2 を使って Chassis View を表現する 10.まとめ Copyright © Acroquest Technology Co., Ltd. All rights reserved. 2
  • 3. 1. はじめに 自己紹介 = 氏名: ‘村田 賢一郎’ twitter: ‘@muraken720’ 所属: ‘Acroquest Technology Co.,Ltd.’ 仕事: ‘ライフライン系ネットワーク集中監視システム開発’ ‘フレームワーク開発’ 言語: ‘Java & JavaScript & CSS3 & HTML5’ 興味: ‘Backbone.js/AngularJS’ ‘Vert.x’ ‘Jeet2’ Copyright © Acroquest Technology Co., Ltd. All rights reserved. 3 ‘機関車トーマス!’
  • 4. 1. はじめに 今回のATNのテーマは 「Visualization JavaScript ~データ可視化のためのJavaScript~」 ですが、本発表では、JavaScriptは主題ではありません(^^; 可視化、グラフィカルな表現の手段として、直ぐに「JavaScriptで」と言 わずに、モダンなCSSだとどこまでできるのか?を調べてみました。 問題領域は監視系のアプリケーションの中では比較的毎回開発する Map ViewとChassis Viewを対象としています♪ Copyright © Acroquest Technology Co., Ltd. All rights reserved. 4
  • 5. 2. CSS3/Sass/SCSS/Compass(1/2)  CSS3 1. 現在策定中のCSSの規格 2. 機能毎にモジュール分割されている 3. 角丸、影、グラデーション、Webフォント、アニメーション、トラ ンスフォームなど  Sass/SCSS 1. Sass(Syntactically Awesome Stylesheets) Sass is an extension of CSS3 2. SCSS(Sassy CSS) Sass’s another syntax(a superset of CSS3’s syntax). Copyright © Acroquest Technology Co., Ltd. All rights reserved. 5 http://sass-lang.com
  • 6. 2. CSS3/Sass/SCSS/Compass(2/2)  Compass 1. Compass is an open-source CSS Authoring Framework. 2. Compass uses Sass. 3. Compassのmixinを使うと・・・ ① ベンダプレフィックスやクロスブラウザ対応コードを自動生成 ② CSSスプライト自動生成 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 6 CSSの常識が変わる!「Compass」、基礎から応用まで! http://liginc.co.jp/designer/archives/11623
  • 7. 3. CSS Tube Map is awesome. Copyright © Acroquest Technology Co., Ltd. All rights reserved. 7 http://www.csstubemap.co.uk/
  • 8. 4. CSS Tube Map を解剖してみる(1/4) Copyright © Acroquest Technology Co., Ltd. All rights reserved. 8 .route { height: 10px; width: 10px; z-index: 15; } <ul id="toyoko" class="line"> <li id="ty01" class="route"></li> <li id="ty02" class="route rot45"></li> <li id="ty03" class="route"></li> <li id="ty04" class="route rot45"></li> 【HTML】 .route { height: 10px; width: 10px; z-index: 15; } .rot45 { @include rotate(45deg); } #ty01 { width: 50px; } #ty02 { width: 50px; } #ty03 { height: 50px; } #ty04 { height: 50px; }
  • 9. 4. CSS Tube Map を解剖してみる(2/4) Copyright © Acroquest Technology Co., Ltd. All rights reserved. 9 bend45 bend90 <li id="ty05" class="route bend45deg rot180"></li> <li id="ty06" class="route bend45deg flipped"></li> <li id="ty07" class="route bend45deg rot180 flipped"></li> <li id="ty08" class="route bend45deg"></li> <li id="ty09" class="route bend45deg rot90 flipped"></li> <li id="ty10" class="route bend45deg rot90"></li> <li id="ty11" class="route bend45deg rot270"></li> <li id="ty12" class="route bend45deg rot270 flipped"></li> <li id="ty13" class="route bend90deg rot180"></li> <li id="ty14" class="route bend90deg rot90"></li> <li id="ty15" class="route bend90deg rot270"></li> <li id="ty16" class="route bend90deg"></li>
  • 10. 4. CSS Tube Map を解剖してみる(3/4) Copyright © Acroquest Technology Co., Ltd. All rights reserved. 10 .bend45deg { height: 23px; width: 31px; z-index: 9; @include border-radius(0 23px 0 0); &:after { height: 60px; width: 60px; content: ''; background-color: #fff; position: absolute; top: 10px; left: -29px; @include border-radius(95px); z-index: 11; } } .bend90deg { height: 31px; width: 31px; z-index: 9 !important; @include border-radius(0 31px 0 0); &:after { height: 40px; width: 40px; content: ''; background-color: #fff; position: absolute; top: 10px; left: -19px; @include border-radius(95px); z-index: 11; } } .flipped { @include border-radius(0 0 23px 0); &:after { bottom: 10px; top: auto; } }
  • 11. 4. CSS Tube Map を解剖してみる(4/4) Copyright © Acroquest Technology Co., Ltd. All rights reserved. 11 <li id="ty20" class="roundel station"> <strong class="above">菊名</strong></li> <li id="ty21" class="roundel station"> <strong class="below">横浜</strong></li> <li id="ty22" class="roundel station"> <strong class="right">武蔵小杉</strong></li> <li id="ty23" class="roundel station"> <strong class="left">中目黒</strong></li> .station { height: 22px; width: 22px; display: block; background: #fff; border: 6px solid #000; line-height: 22px; } .roundel { @include border-radius(50px); z-index: 100 !important;
  • 12. 5. CSS Position Editor を勢いで作ってみた Copyright © Acroquest Technology Co., Ltd. All rights reserved. 12 Backbone.js & jQuery UI Draggable
  • 13. 6. CSS Toyoko Map を作ってみよう! Copyright © Acroquest Technology Co., Ltd. All rights reserved. 13 Demo
  • 14.  CSS3 animationsとは? 1. ある CSS のスタイル設定を別の設定へ遷移させることを可 能にする https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_ animations 2. でも、ベンダプレフィックスとかめんどくさい・・・ 7. CSS3 animations を使ってアラーム状態を表現する Copyright © Acroquest Technology Co., Ltd. All rights reserved. 14 css3 animation plugin for compass https://github.com/ericam/compass-animation
  • 15. 8. A light, semantic, responsive, CSS framework “Jeet2” Copyright © Acroquest Technology Co., Ltd. All rights reserved. 15 http://jeetframework.com/
  • 16. 9. Jeet2 を使って Chassis View を表現する(1/3) Copyright © Acroquest Technology Co., Ltd. All rights reserved. 16  Jeet2を使う 1. (Install Ruby) 2. Install Compass 3. (Install Node) 4. Install LiveReload Browser Extension 5. npm install -g jeet 6. jeet create Jeet2Project 7. cd Jeet2Project 8. jeet watch 9. Edit either css/scss/style_scss.scss or css/styl/style_styl.styl https://github.com/CorySimmons/jeet#quick-start SCSSとStylusの使い分け  SCSS Compassを使った仕込み系 のCSSを定義  Stylus レイアウトやデザインを定義
  • 17. 9. Jeet2 を使って Chassis View を表現する(2/3) Copyright © Acroquest Technology Co., Ltd. All rights reserved. 17 <div class="container"> <h3>Chassis View</h1> <div class="rack"> <div class="server state-normal"></div> <div class="server state-normal"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> <div class="server"></div> </div> <div class="rack"> <div class="router"> <div class="port state-alarm"></div> <div class="port state-normal"></div> <div class="port state-normal"></div> <div class="port"></div> <div class="port"></div> U=20px .container center(800px) .rack background #000 col(1,1) .server height U*10 background #ccc col(1,8) .router background #ccc col(1,1) .port height U background #555 col(1,12) 【stylus】
  • 18. 9. Jeet2 を使って Chassis View を表現する(3/3) Copyright © Acroquest Technology Co., Ltd. All rights reserved. 18 .server { @include border-radius(5px); } .router { @include border-radius(10px); } .port { @include border-radius(20px); } @include keyframes(alarm-animation) { 0%, 100% { background-color: #98005d; } 50% { background-color: #ff0000; } } .state-alarm { @include animation(alarm-animation 2s infinite); } .state-normal { background-color: green !important; } 【scss】
  • 19. 10. まとめ 1. CSS3だけでもかなりのことができる。 2. CSS3使うなら、Sass/SCSSを使おう! 3. Sass使うなら、Compassを使おう! 4. CSS Tube MapからCSSで実現できることの可能性を 知った! 5. CSS framework を使おう! 6. 特に、自分でCSSをデザインしたければ、Jeet frameworkは面白い! 7. CSSで表現できることはCSSに任せよう。 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 19
  • 20. Copyright © Acroquest Technology Co., Ltd. All rights reserved. 20 CSSによるグラフィック表現を 一緒に楽しみませんか? Infrastructures Evolution

×