Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,817 views

Published on

Published in: Technology, Education
  • Be the first to comment

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

  1. 1. Advanced Tech Night No.07 CSSだけで実現する グラフィック表現 2013/08/30 Acroquest Technology 村田 賢一郎(@muraken720) Visualization JavaScript ~データ可視化のためのJavaScript~
  2. 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. 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. 4. 1. はじめに 今回のATNのテーマは 「Visualization JavaScript ~データ可視化のためのJavaScript~」 ですが、本発表では、JavaScriptは主題ではありません(^^; 可視化、グラフィカルな表現の手段として、直ぐに「JavaScriptで」と言 わずに、モダンなCSSだとどこまでできるのか?を調べてみました。 問題領域は監視系のアプリケーションの中では比較的毎回開発する Map ViewとChassis Viewを対象としています♪ Copyright © Acroquest Technology Co., Ltd. All rights reserved. 4
  5. 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. 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. 7. 3. CSS Tube Map is awesome. Copyright © Acroquest Technology Co., Ltd. All rights reserved. 7 http://www.csstubemap.co.uk/
  8. 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. 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. 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. 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. 12. 5. CSS Position Editor を勢いで作ってみた Copyright © Acroquest Technology Co., Ltd. All rights reserved. 12 Backbone.js & jQuery UI Draggable
  13. 13. 6. CSS Toyoko Map を作ってみよう! Copyright © Acroquest Technology Co., Ltd. All rights reserved. 13 Demo
  14. 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. 15. 8. A light, semantic, responsive, CSS framework “Jeet2” Copyright © Acroquest Technology Co., Ltd. All rights reserved. 15 http://jeetframework.com/
  16. 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. 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. 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. 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. 20. Copyright © Acroquest Technology Co., Ltd. All rights reserved. 20 CSSによるグラフィック表現を 一緒に楽しみませんか? Infrastructures Evolution

×