SlideShare a Scribd company logo
CSSから国民を守る
党
自己紹介
• 名前 暁の流星
• Twitter @nomber1910 @1910akatsuki
• GitHub Akatsuki1910
• 普段はプログラミング(主にJavaScript)
• 最近HP制作中
• 英語わかんなすぎて同じ変数名ばっかなるのなんでなん
注意事項
• JavaScriptをひいきした内容です
• 決して戦争を起こすわけではないのであしからず
• 出てくる登場人物や名前は全てノンフィクションだったりします
政党公約文(あらすじ)
• CSSAnimationとかいうものが最近(設立当時)できたので、JavaScript(以
下JS)を愛する上級国民様方から守るというものです
• JSにはcanvasタグというものがあり、ライブラリを使うことによってアニメー
ションができる
• CSSでできないような芸当をみせてJSの格の違いを見せつける
CSSをぶっ壊す!!!
党の設立理由
• 有名な人も自分の店を守るために
戦っていたから
• Twitter ことかす
@NNPS_KM_SONYA
それでは見ていきましょう
JSアニメーションの味方PIXIJS
• WebGLを簡単に使えるようにしたやつ
• Adobe Flash の代わりになるもの
• 2D
• 軽い
• すごい
• 最近3Dにも浸食してるやべーやつ
• https://www.pixijs.com/
JSのターン
実際に動いてるのを見ます
var width = 500;
var height = 500;
var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(width, height,{
antialias: true,
});
document.getElementById("pixiview").appendChild(renderer.view);
var graphics = new PIXI.Graphics();
graphics.beginFill(0x66FF33);
graphics.lineStyle(4, 0xffd900, 1);
tri(0,0,100);
graphics.endFill();
stage.addChild(graphics);
graphics.position.x=200;
graphics.position.y=200;
!function main(){
requestAnimationFrame(main);
graphics.rotation+=Math.PI/180;
renderer.render(stage);
}();
function tri(x,y,t){
h=t/2*Math.sqrt(3);
graphics.moveTo(x,y-h/2);
graphics.lineTo(x-t/2,y+h/2);
graphics.lineTo(x+t/2,y+h/2);
graphics.lineTo(x, y-h/2);
}
JSのターン
var width = 500;
var height = 500;
var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(width, height,{
antialias: true,
});
document.getElementById("pixiview").appendChild(renderer.view);
var graphics = new PIXI.Graphics();
graphics.beginFill(0x66FF33);
graphics.lineStyle(4, 0xffd900, 1);
tri(0,0,100);
graphics.endFill();
stage.addChild(graphics);
graphics.position.x=200;
graphics.position.y=200;
!function main(){
requestAnimationFrame(main);
graphics.rotation+=Math.PI/180;
renderer.render(stage);
}();
function tri(x,y,t){
h=t/2*Math.sqrt(3);
graphics.moveTo(x,y-h/2);
graphics.lineTo(x-t/2,y+h/2);
graphics.lineTo(x+t/2,y+h/2);
graphics.lineTo(x, y-h/2);
}
(0,0)を中心にして三角形
を作成して座標をずらす
JSではルートの計算ができ
るので正三角形が簡単に
作れる
すごい
CSSのターン
.border {
margin: 100px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
実際に動いてるのを見ます
CSSのターン
.border {
margin: 100px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
枠線の幅とかをいじって無
理やり三角形にする
linear 一定のスピード
Infinite 永遠に実行
CSSのターン
.border {
margin: 100px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
三角形の高さが173.2px
これは100×√3したもの
いちいち計算しなければな
らない
めんどくさい←重要
ここ
これは勝った!!!
JSの勝利だ!!!!
とあるついーと
意訳
数式追加するのが決定したで
これから進化するから楽しみにしとき
by 偉い人
ルートの計算式
:THINKING:
いや、まだ勝機はある
JSアニメーションの味方THREEJS
• WebGLを簡単に使えるようにしたやつ
• 本格的に3D表現ができる
• 2Dもできる
• 軽い
• すごい
• 日本語説明してるサイトもあるので楽
• https://threejs.org/
ThreeJSの下位互換
日本語説明が少ない気がする
すぐに変わる中身
軽さを重視して根本を変えてくる
さっさと安定させろよ
文字表示ライブラリ
写真表示できるだけ
リファレンスから消されたやつ消せや
JSのターン
実際に動いてるのを見ます
var width = window.innerWidth;
var height = window.innerHeight;
var renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('canvas')
});
renderer.setSize(width, height);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.i
nnerHeight, 1, 10000);
camera.position.z = 500;
scene.add(camera);
var geometry = new THREE.CubeGeometry(200, 200, 200);
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
!function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}();
JSのターン
大きさを指定するだけなの
ですごく楽
materialを変えるだけで色んな
種類の見た目に変えることがで
きる
var width = window.innerWidth;
var height = window.innerHeight;
var renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('canvas')
});
renderer.setSize(width, height);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.i
nnerHeight, 1, 10000);
camera.position.z = 500;
scene.add(camera);
var geometry = new THREE.CubeGeometry(200, 200, 200);
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
!function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}();
CSSは所詮2Dのもの
これは勝たしてもらった
とあるサイト
MDN web docs https://developer.mozilla.org/ja/docs/Web/CSS/transform-style
:THINKING:
SECOND TIMES
でもこれ説明してるサイトですら曖昧
流行ってないし勝利だ!!!
あ り ま し た
CSSのターン
実際に動いてるのを見ます
CSSのターン
四角を回転させて動かして立方
体を無理やりつくってる
座標計算が大変
複雑な図形を作る時にhtml側
にも気を配らなければならない
この人正四面体と正八面体も
作ってる
しかし我ら政党ともなると
頭がさえている
いちいち数値を指定していると
複雑化した時に大変ではないか
これは利便性の点において
勝利だな(確信)
とあるSASS SCSS
CSSの構文が少し楽になる
変数が使える
演算が簡単にできる
条件分岐(if文)ができる
繰り返し(for,while文)ができる
クラス指定に変数が使える
:THINKING:
THIRD TIMES
CSSのターン
• 2Dどころか3Dも実現可能
• もうすぐで数式が増える
• SASSやSCSSを使えばできるものが増える
• Ifやforといったアニメーションする時に便利なものがある
• will-changeとかいったもので軽量化が可能
JSのターン
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pixijs</title>
<script src="../jquery-3.3.1.min.js"></script>
<script src="../pixi.min.js"></script>
</head>
<body>
<div id="pixiview"></div>
<script src="main.js"></script>
</body>
</html>
htmlがキレイ
美しい
divの奥行を変えれば手前に文
字ができるので、背景にも使え
る
すごい
JSのターン
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pixijs</title>
<script src="../jquery-3.3.1.min.js"></script>
<script src="../pixi.min.js"></script>
</head>
<body>
<div id="pixiview"></div>
<script src="main.js"></script>
</body>
</html>
実際に動いてるのを見ます
JSのターン
どのブラウザ(IEを除く)でも起こる
body{
margin:8px;
}
[悲報] JSでアニメーションするにはCSSが必須
CSSから国民を守る党
解 体
しかし救いの手が!!
CSSのターン
PostCSS
JSを用いることで更に簡単に
CSSを書くことが可能
SASS,SCSSより使い勝手がよく
なる(らしい)
海外のフロントエンドユーザー
には非常に好評
平 和 協 定
おわり

More Related Content

Similar to CSSから国民を守る党

⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
 
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会Takuya Ueda
 
LINE LIFF with Azure ハンズオン資料 - Azure サービス解説
LINE LIFF with Azure ハンズオン資料 - Azure サービス解説LINE LIFF with Azure ハンズオン資料 - Azure サービス解説
LINE LIFF with Azure ハンズオン資料 - Azure サービス解説
Kazumi IWANAGA
 
2011 10-satalabo-naaon
2011 10-satalabo-naaon2011 10-satalabo-naaon
2011 10-satalabo-naaon
Naoki Okino
 
データビジュアライゼーション Dc.jsで遊ぼう - 清水
データビジュアライゼーション   Dc.jsで遊ぼう - 清水データビジュアライゼーション   Dc.jsで遊ぼう - 清水
データビジュアライゼーション Dc.jsで遊ぼう - 清水chome03
 
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!
Nishida Kansuke
 

Similar to CSSから国民を守る党 (6)

⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
 
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
 
LINE LIFF with Azure ハンズオン資料 - Azure サービス解説
LINE LIFF with Azure ハンズオン資料 - Azure サービス解説LINE LIFF with Azure ハンズオン資料 - Azure サービス解説
LINE LIFF with Azure ハンズオン資料 - Azure サービス解説
 
2011 10-satalabo-naaon
2011 10-satalabo-naaon2011 10-satalabo-naaon
2011 10-satalabo-naaon
 
データビジュアライゼーション Dc.jsで遊ぼう - 清水
データビジュアライゼーション   Dc.jsで遊ぼう - 清水データビジュアライゼーション   Dc.jsで遊ぼう - 清水
データビジュアライゼーション Dc.jsで遊ぼう - 清水
 
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!
 

Recently uploaded

ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
osamut
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
harmonylab
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
Toru Tamaki
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
Osaka University
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
tazaki1
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
azuma satoshi
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
嶋 是一 (Yoshikazu SHIMA)
 

Recently uploaded (7)

ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
 

CSSから国民を守る党