Last active
July 3, 2021 09:20
-
-
Save mr-gradation/d8eec5bbfa4cbe774793bb5c616c0055 to your computer and use it in GitHub Desktop.
a-blog cmsのユニットサイズを計算する
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="ja"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>a-blog cmsのユニットサイズを計算するやつ</title> | |
<meta property="og:site_name" content="a-blog cmsのユニットサイズを計算するやつ"> | |
<meta property="og:title" content="a-blog cmsのユニットサイズを計算するやつ"> | |
<meta property="og:type" content="article"> | |
<meta property="og:description" content="ページのコンテンツ幅からa-blog cmsのユニットサイズを計算するツールです。"> | |
<meta property="twitter:card" content="summary_large_image"> | |
<meta property="twitter:title" content="a-blog cmsのユニットサイズを計算するやつ"> | |
<meta property="twitter:description" content="ページのコンテンツ幅からa-blog cmsのユニットサイズを計算するツールです。"> | |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> | |
</head> | |
<body> | |
<div class="container py-5"> | |
<h1>a-blog cmsのユニットサイズを計算するやつ</h1> | |
<p class="lead mb-5">テキストフィールドをクリックで、値をクリップボードにコピーします。</p> | |
<div id="app"> | |
<div class="card bg-light"> | |
<div class="card-body"> | |
<div class="row"> | |
<label class="col-sm-2 col-form-label">コンテンツ幅</label> | |
<div class="col-sm-10"> | |
<input type="number" v-model="contentWidth" class=" form-control" /> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="card mt-4"> | |
<div class="card-header">メディアサイズ</div> | |
<div class="card-body"> | |
<div class="row mb-2"> | |
<div class="col-sm-6"> | |
<input type="text" :value="mediaSize(1)" class=" form-control" @focus="copyValue" /> | |
</div> | |
<div class="col-sm-6"> | |
<input type="text" v-model="mediaLabel(1)" class=" form-control" @focus="copyValue" /> | |
</div> | |
</div> | |
<div class="row mb-2"> | |
<div class="col-sm-6"> | |
<input type="text" :value="mediaSize(2)" class=" form-control" @focus="copyValue" /> | |
</div> | |
<div class="col-sm-6"> | |
<input type="text" v-model="mediaLabel(2)" class=" form-control" @focus="copyValue" /> | |
</div> | |
</div> | |
<div class="row mb-2"> | |
<div class="col-sm-6"> | |
<input type="text" :value="mediaSize(3)" class=" form-control" @focus="copyValue" /> | |
</div> | |
<div class="col-sm-6"> | |
<input type="text" v-model="mediaLabel(3)" class=" form-control" @focus="copyValue" /> | |
</div> | |
</div> | |
<div class="row mb-2"> | |
<div class="col-sm-6"> | |
<input type="text" :value="mediaSize(4)" class=" form-control" @focus="copyValue" /> | |
</div> | |
<div class="col-sm-6"> | |
<input type="text" v-model="mediaLabel(4)" class=" form-control" @focus="copyValue" /> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="col-sm-6"> | |
<input type="text" :value="mediaSize(6)" class=" form-control" @focus="copyValue" /> | |
</div> | |
<div class="col-sm-6"> | |
<input type="text" v-model="mediaLabel(6)" class=" form-control" @focus="copyValue" /> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="card mt-4"> | |
<div class="card-header">ビデオサイズ <small class="text-muted d-inline-block mx-3">すべて16:9で表示します</small></div> | |
<div class="card-body"> | |
<div class="row mb-2"> | |
<div class="col-sm-6"> | |
<input type="text" :value="videoSize(1)" class=" form-control" @focus="copyValue" /> | |
</div> | |
<div class="col-sm-6"> | |
<input type="text" v-model="videoLabel(1)" class=" form-control" @focus="copyValue" /> | |
</div> | |
</div> | |
<div class="row mb-2"> | |
<div class="col-sm-6"> | |
<input type="text" :value="videoSize(2)" class=" form-control" @focus="copyValue" /> | |
</div> | |
<div class="col-sm-6"> | |
<input type="text" v-model="videoLabel(2)" class=" form-control" @focus="copyValue" /> | |
</div> | |
</div> | |
<div class="row mb-2"> | |
<div class="col-sm-6"> | |
<input type="text" :value="videoSize(3)" class=" form-control" @focus="copyValue" /> | |
</div> | |
<div class="col-sm-6"> | |
<input type="text" v-model="videoLabel(3)" class=" form-control" @focus="copyValue" /> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="card mt-4"> | |
<div class="card-header">マップサイズ <small class="text-muted d-inline-block mx-3">大は16:9、中は3:2、小は1:1の比率で表示します</small></div> | |
<div class="card-body"> | |
<div class="row mb-2"> | |
<div class="col-sm-6"> | |
<input type="text" :value="mapSize(1)" class=" form-control" @focus="copyValue" /> | |
</div> | |
<div class="col-sm-6"> | |
<input type="text" v-model="mapLabel(1)" class=" form-control" @focus="copyValue" /> | |
</div> | |
</div> | |
<div class="row mb-2"> | |
<div class="col-sm-6"> | |
<input type="text" :value="mapSize(2)" class=" form-control" @focus="copyValue" /> | |
</div> | |
<div class="col-sm-6"> | |
<input type="text" v-model="mapLabel(2)" class=" form-control" @focus="copyValue" /> | |
</div> | |
</div> | |
<div class="row mb-2"> | |
<div class="col-sm-6"> | |
<input type="text" :value="mapSize(3)" class=" form-control" @focus="copyValue" /> | |
</div> | |
<div class="col-sm-6"> | |
<input type="text" v-model="mapLabel(3)" class=" form-control" @focus="copyValue" /> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- /app --> | |
</div> | |
<!-- /container --> | |
<footer class="pt-5 text-muted text-center text-small"> | |
<p class="mb-1"> | |
<a href="https://gist.github.com/mr-gradation" class="text-muted text-decoration-none"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16"> | |
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/> | |
</svg> | |
mr-gradation | |
</a> | |
</p> | |
</footer> | |
</div> | |
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> | |
<script> | |
var app = new Vue({ | |
el: '#app', | |
data: { | |
contentWidth: 980 | |
}, | |
methods: { | |
copyValue: function(event){ | |
event.target.select(); | |
document.execCommand("copy"); | |
}, | |
sizeLabel: function(number){ | |
let sizeLabel = ""; | |
switch(number){ | |
case 1: sizeLabel = "大"; break; | |
case 2: sizeLabel = "中"; break; | |
case 3: sizeLabel = "小"; break; | |
case 4: sizeLabel = "小"; break; | |
case 6: sizeLabel = "小"; break; | |
} | |
return sizeLabel; | |
} | |
}, | |
computed: { | |
mediaSize: function(){ | |
self = this; | |
return function(number){ | |
let mediaWidth = Math.floor( (self.contentWidth - 20 * (number - 1)) / number ); | |
return mediaWidth; | |
} | |
}, | |
mediaLabel: function(){ | |
self = this; | |
return function(number){ | |
return `${this.sizeLabel(number)}:幅1/${number} ( ${this.mediaSize(number)}px )`; | |
} | |
}, | |
videoSize: function(){ | |
self = this; | |
return function(number){ | |
let mediaWidth = this.mediaSize(number); | |
let mediaHeight = Math.floor( mediaWidth * 0.5625 ); | |
return `${mediaWidth}x${mediaHeight}`; | |
} | |
}, | |
videoLabel: function(){ | |
self = this; | |
return function(number){ | |
return `${this.sizeLabel(number)} ( ${this.videoSize(number)}px )`; | |
} | |
}, | |
mapSize: function(){ | |
self = this; | |
return function(number){ | |
let mapWidth = this.mediaSize(number); | |
let mapHeight = 0; | |
switch(number){ | |
case 1: mapHeight = Math.floor(mapWidth * 0.5625); break; | |
case 2: mapHeight = Math.floor(mapWidth * 0.66); break; | |
case 3: mapHeight = Math.floor(mapWidth * 1); break; | |
} | |
return `${mapWidth}x${mapHeight}`; | |
} | |
}, | |
mapLabel: function(){ | |
self = this; | |
return function(number){ | |
return `${this.sizeLabel(number)} ( ${this.mapSize(number)}px )`; | |
} | |
} | |
} | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment