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

FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdfFIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
Fukuoka Institute of Technology
 
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
iPride Co., Ltd.
 
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdfFIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance
 
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
yassun7010
 
【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow
Sony - Neural Network Libraries
 
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdfFIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
Toru Tamaki
 
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
harmonylab
 
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
atsushi061452
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
 
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdfFIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdfFIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
Matsushita Laboratory
 
CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料
Yuuitirou528 default
 
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
NTT DATA Technology & Innovation
 

Recently uploaded (16)

FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdfFIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
 
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
 
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdfFIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
 
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
 
【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow
 
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdfFIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
 
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
 
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
 
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdfFIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
 
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdfFIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
 
CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料
 
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
 

CSSから国民を守る党