SlideShare a Scribd company logo
1 of 45
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でアニメーション!その1Nishida 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-naaonNaoki 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

2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用KLab Inc. / Tech
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイントonozaty
 
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルLoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルCRI Japan, Inc.
 
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdkokinagano2
 
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルCRI Japan, Inc.
 
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfTakayuki Nakayama
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。iPride Co., Ltd.
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperleger Tokyo Meetup
 

Recently uploaded (8)

2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイント
 
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルLoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
 
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltd
 
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
 
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
 

CSSから国民を守る党