おぼえがき

2018年6月7日木曜日

メニューサンプル

【HTML】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>menu title</title>
<meta name="description" content="menu template">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<div class="wrapper">
<header>header</header>
<div class="container">
<div class="tab">tab1</div>
<div class="tab">tab2</div>
<div class="tab">tab3</div>
<div class="tab">tab4</div>
<div class="tab">tab5</div>
</div>
<div class="container">
<div class="menu">menu1</div>
<a class="menu" href="test.jsp"><span class="menu_inner">menu2</span></a>
<div class="menu">menu3</div>
<div class="menu">menu4</div>
</div>
<div class="container">
<div class="menu">menu5</div>
<div class="menu">menu6</div>
<div class="menu">menu7</div>
<div class="menu">menu8</div>
</div>
<div class="container">
<div class="menu">menu5</div>
<div class="menu">menu6</div>
<div class="menu">menu7</div>
<div class="menu">menu8</div>
</div>
<div class="container">
<div class="menu">menu5</div>
<div class="menu">menu6</div>
<div class="menu">menu7</div>
<div class="menu">menu8</div>
</div>
<footer>footer</footer>
</div>
</body>
</html>

【CSS】
.wrapper {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
header {
background: white;
padding: -1px;
}
.container {
display: flex;
}
.tab {
background: Black;
color: #fff;
text-align: center;
display: inline-block;
line-height: 1;
margin: 1;
padding: 10px;
border: 1px solid #fff;
border-radius: 25px 3px 2px;
font-size: 20px;
font-weight: normal;
box-shadow: 8px 6px 10px -1px gray inset;
width: 20%;
}
.menu {
height: 80px;
line-height: 3;
vertical-align: middle;
background: black;
background: -moz-linear-gradient(top, #a3ea3f, #5b9507);
background: -webkit-gradient(linear,
left top,
left bottom,
from(#000000),
to(#303030));
color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 0 1px #fff;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 10px #487606;
overflow: hidden;
font-family: "Jun 501", sans-serif;
font-size: 28px;
display: inline-block;
margin: 1;
padding: 5px;
border: 10px solid #fff;
border-radius: 1px;
font-weight: normal;
width: 25%;
}
.menu_inner {
display: block;
opacity: 0.9;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.menu:hover .menu_inner{
background-color: #59b1eb;
opacity: 1;
x-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-xtransform: scale(1.1);
}

.side {
background: orange;
width: 30%;
}
footer {
background: plum;
}

@media (max-width: 400px){
.container {
flex-direction: column;
}
.main,
.side {
width: 100%;
}
}

2018年6月6日水曜日

ホーム画面からの全画面表示

下記の記述があるページを、「HOME画面に追加」でアイコンを作成し、そこから起動すると全画面で起動できる。

【IOSの場合】
<meta name="apple-mobile-web-app-capable" content="yes">

【Chrome for Androidの場合】

ウェブアプリマニフェストを作成すると更に詳細の設定ができる。

(manifest.json)

{

"short_name": "Kinlan's Amaze App",

"name": "Kinlan's Amazing Application ++",

"icons": [

{

"src": "launcher-icon-4x.png",

"sizes": "192x192",

"type": "image/png"

}

"start_url": "/index.html",

"display": "standalone",

"orientation": "landscape"

}

2018年5月24日木曜日

全画面でグラフ表示してみた。

【HTML】
<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>"Angular JS & Chart.js & screenfull example"</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/1.0.4/screenfull.min.js"></script>
</head>
<body>
<p> Angular.js + Chart.js + screenfull DEMO</p>
<div ng-controller="formCtrl as form">
<div ng-show="form.showFlag">
<div class="canvas-area" style="position: relative">
<canvas id="myChart" height="30vh" width="50vw"></canvas>
</div>
</div>

<button id="EnterFullScreen" ng-click="form.onClick();" ng-show="!form.showFlag">Enter Full Screen DEMO</button>
<button id="ExitFullScreen" type="button">Exit Full Screen</button>
<hr>
<pre id="result">here</pre>
<hr>
</div>
<script>
document.getElementById( "EnterFullScreen" ).onclick = function () {
var rootElement = document.documentElement ;
rootElement.requestFullscreen = rootElement.requestFullscreen || rootElement.mozRequestFullScreen || rootElement.webkitRequestFullscreen || rootElement.msRequestFullscreen ;
rootElement.requestFullscreen().then(
function () {
document.getElementById( "result" ).textContent = "Success" ;
} ,
function ( errorMessage ) {
document.getElementById( "result" ).textContent = "Error" + "(" + errorMessage + ")" ;
}
);
}
document.getElementById( "ExitFullScreen" ).onclick = function () {
document.exitFullscreen = document.exitFullscreen || document.cancelFullScreen || document.mozCancelFullScreen || document.webkitCancelFullScreen || document.msExitFullscreen ;
document.exitFullscreen() ;
}
</script>
</body>
</html>

【JS】
/**
*
*/
var app = angular.module('myApp', []);
app.controller('formCtrl', function () {
//念の為thisを退避
var me = this;
me.showFlag = false;

var myChart;

//グラフの値
me.items= [
//{値,月度}
{month:'01月',sales:111,profit:022,num:10},
{month:'02月',sales:221,profit:212,num:15},
{month:'03月',sales:331,profit:232,num:40},
{month:'04月',sales:411,profit:242,num:60},
{month:'05月',sales:511,profit:252,num:165},
{month:'06月',sales:611,profit:212,num:226},
{month:'07月',sales:711,profit:292,num:321},
{month:'08月',sales:811,profit:232,num:422},
{month:'09月',sales:911,profit:252,num:533},
{month:'10月',sales:111,profit:222,num:614},
{month:'11月',sales:111,profit:242,num:765},
{month:'12月',sales:111,profit:262,num:826}
];

//値を配列に入れ替えてから、Chart.jsへ渡す
var addDataSales = (function(){
var arr = [];
for(var i = 0; i<me.items.length; i++){
arr.push(me.items[i].sales);
}
return arr;
}());
var addDataProfit = (function(){
var arr = [];
for(var i = 0; i<me.items.length; i++){
arr.push(me.items[i].profit);
}
return arr;
}());
var addDataNum = (function(){
var arr = [];
for(var i = 0; i<me.items.length; i++){
arr.push(me.items[i].num);
}
return arr;
}());

chartData.data.datasets[0].data = addDataSales;
chartData.data.datasets[1].data = addDataProfit;
chartData.data.datasets[2].data = addDataNum;

function init(){
//canvas取得
var ctx = document.getElementById("myChart").getContext("2d");

//グラフを生成(Line:折れ線グラフ)
myChart = new Chart(ctx, chartData);
}

//フォームの値に変更があったら
me.change = function(formName,ind){
//フォームにエラーが無いかチェック
if(!formName.$valid)return false;
//下記のプロパティを差し替えることによって、グラフを動的に変更できる
myChart.data.datasets[0].data[ind] = me.items[ind].sales;
myChart.data.datasets[1].data[ind] = me.items[ind].profit;
myChart.data.datasets[2].data[ind] = me.items[ind].num
//グラフ描画指示
myChart.update();
};

me.onClick = function(){
me.showFlag = true;
setTimeout(init,100);
};
});

//Chart.jsへ渡すデータ(Line:折れ線グラフ用)
var chartData ={
type: 'bar',
data: {
labels: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//X軸のラベル
datasets: [
{
type: 'bar',
label:'売上',
yAxisID: "y-axis-0",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1,
data: [] //値(動的にバインドする為、空にしておく)
},
{
type: 'bar',
label: '利益',
yAxisID: "y-axis-1",
backgroundColor: 'rgba(254,97,132,0.5)',
borderColor: 'rgba(254,97,132,0.8)',
data:[]
},
{
type: 'line',
label: '契約数',
yAxisID: "y-axis-2",
backgroundColor: 'rgba(54,164,235,0.5)',
borderColor: 'rgba(54,164,235,0.5)',
data:[]
}
]
},
options: {
title:{
display: true,
text: '売上と利益'
},
responsive: true,
scales: {
yAxes: [
{
id: "y-axis-0", // Y軸のID
type: "linear", // linear固定
position: "left", // どちら側に表示される軸か？
ticks: { // スケール
max: 1000,
min: 0,
stepSize: 100
},
},
{
id: "y-axis-1",
type: "linear",
position: "left",
ticks: {
beginAtZero:true,
max: 500,
min: 0,
stepSize: 100
},
},
{
id: "y-axis-2",
type: "linear",
position: "right",
ticks: {
beginAtZero:true,
max: 1000,
min: 0,
stepSize: 100
},
}
]
}
}
}

動くけどエラー　？？？？？？
Uncaught TypeError: Cannot read property 'then' of undefined

2018年5月23日水曜日

全画面表示　javascript screenfull.js

【例１】
(HTML)
<img id="img"
src="img.jpg" />

(script.js)
window.onload = function() {

document.body.onclick = function() {
if (this.webkitRequestFullScreen) {
this.webkitRequestFullScreen();
} else if (this.mozRequestFullScreen) {
this.mozRequestFullScreen();
} else if (this.msRequestFullScreen) {
this.msRequestFullScreen();
} else if (this.RequestFullScreen) {
this.RequestFullScreen();
} else {
alert("このブラウザは全画面に対応していません。")
}
};
};

【例２】
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/screenfull.js/1.0.4/screenfull.min.js"></script>
<script>
$(document).ready(function(){
$('#go-full').click(function() {
if (this.webkitRequestFullScreen) {
this.webkitRequestFullScreen($('#my-full-site')[0]);
} else if (this.mozRequestFullScreen) {
this.mozRequestFullScreen($('#my-full-site')[0]);
} else if (this.msRequestFullScreen) {
this.msRequestFullScreen($('#my-full-site')[0]);
} else if (this.RequestFullScreen) {
this.RequestFullScreen($('#my-full-site')[0]);
} else {
alert("このブラウザは全画面に対応していません。");
}
})
})
</script>
<button id="go-full">Go Fullscreen</button>
<iframe id="my-full-site" src="http://www.cxdnext.co.jp"></iframe>

2018年4月23日月曜日

Angular.js と Chart.js (v2)で動的グラフを作ってみた。

■eclipse　javascript　環境

マーケットプレースで「wibclipse]をインストール
（Webclpse 2017 CL 11B)

https://playcode.io/
ここ便利！！
https://codepen.io
https://paiza.io/
ここもいい！！

<!DOCTYPE HTML SYSTEM "about:legacy-compat">
<html lang="ja" ng-app="myApp">
<head>
<title>"Angular JS & Chart.js　バインド"</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

</head>
<body>
<p> Angular.js + Chart.js TEST</p>
<div ng-controller="formCtrl as form">
<div ng-show="form.showFlag">
<form name="myForm" novalidate>
<div class="list-form">
<p ng-repeat="item in form.items" class="form-parts">
<ng-form name="formItem">
{{item.month}}:<input type="number" ng-change="form.change(formItem,$index);" ng-required="true" min="1" max="1000" ng-pattern="/^[0-9]+$/" ng-model="item.sales">
<input type="number" ng-change="form.change(formItem,$index);" ng-required="true" min="1" max="1000" ng-pattern="/^[0-9]+$/" ng-model="item.profit">
<input type="number" ng-change="form.change(formItem,$index);" ng-required="true" min="1" max="1000" ng-pattern="/^[0-9]+$/" ng-model="item.num">
<br>
<span ng-show="!formItem.$valid">1～1000間で<br>入力して下さい。</span>
</ng-form>
</p>
</div>
</form>
<div class="canvas-area" style="position: relative">
<canvas id="myChart" height="30vh" width="50vw"></canvas>
</div>
</div>
<button ng-click="form.onClick();" ng-show="!form.showFlag">PLAY DEMO</button>
</div>
</body>
</html>

/**
*
*/
var app = angular.module('myApp', []);
app.controller('formCtrl', function () {
//念の為thisを退避
var me = this;
me.showFlag = false;

var myChart;

//グラフの値
me.items= [
//{値,月度}
{month:'01月',sales:111,profit:022,num:10},
{month:'02月',sales:221,profit:212,num:15},
{month:'03月',sales:331,profit:232,num:40},
{month:'04月',sales:411,profit:242,num:60},
{month:'05月',sales:511,profit:252,num:165},
{month:'06月',sales:611,profit:212,num:226},
{month:'07月',sales:711,profit:292,num:321},
{month:'08月',sales:811,profit:232,num:422},
{month:'09月',sales:911,profit:252,num:533},
{month:'10月',sales:111,profit:222,num:614},
{month:'11月',sales:111,profit:242,num:765},
{month:'12月',sales:111,profit:262,num:826}
];

//値を配列に入れ替えてから、Chart.jsへ渡す
var addDataSales = (function(){
var arr = [];
for(var i = 0; i<me.items.length; i++){
arr.push(me.items[i].sales);
}
return arr;
}());
var addDataProfit = (function(){
var arr = [];
for(var i = 0; i<me.items.length; i++){
arr.push(me.items[i].profit);
}
return arr;
}());
var addDataNum = (function(){
var arr = [];
for(var i = 0; i<me.items.length; i++){
arr.push(me.items[i].num);
}
return arr;
}());

chartData.data.datasets[0].data = addDataSales;
chartData.data.datasets[1].data = addDataProfit;
chartData.data.datasets[2].data = addDataNum;

function init(){
//canvas取得
var ctx = document.getElementById("myChart").getContext("2d");

//グラフを生成(Line:折れ線グラフ)
myChart = new Chart(ctx, chartData);
}

//フォームの値に変更があったら
me.change = function(formName,ind){
//フォームにエラーが無いかチェック
if(!formName.$valid)return false;
//下記のプロパティを差し替えることによって、グラフを動的に変更できる
myChart.data.datasets[0].data[ind] = me.items[ind].sales;
myChart.data.datasets[1].data[ind] = me.items[ind].profit;
myChart.data.datasets[2].data[ind] = me.items[ind].num
//グラフ描画指示
myChart.update();
};

me.onClick = function(){
me.showFlag = true;
setTimeout(init,100);
};
});

//Chart.jsへ渡すデータ(Line:折れ線グラフ用)
var chartData ={
type: 'bar',
data: {
labels: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//X軸のラベル
datasets: [
{
type: 'bar',
label:'売上',
yAxisID: "y-axis-0",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1,
data: [] //値(動的にバインドする為、空にしておく)
},
{
type: 'bar',
label: '利益',
yAxisID: "y-axis-1",
backgroundColor: 'rgba(254,97,132,0.5)',
borderColor: 'rgba(254,97,132,0.8)',
data:[]
},
{
type: 'line',
label: '契約数',
yAxisID: "y-axis-2",
backgroundColor: 'rgba(54,164,235,0.5)',
borderColor: 'rgba(54,164,235,0.5)',
data:[]
}
]
},
options: {
title:{
display: true,
text: '売上と利益'
},
responsive: true,
scales: {
yAxes: [
{
id: "y-axis-0", // Y軸のID
type: "linear", // linear固定
position: "left", // どちら側に表示される軸か？
ticks: { // スケール
max: 1000,
min: 0,
stepSize: 100
},
},
{
id: "y-axis-1",
type: "linear",
position: "left",
ticks: {
beginAtZero:true,
max: 500,
min: 0,
stepSize: 100
},
},
{
id: "y-axis-2",
type: "linear",
position: "right",
ticks: {
beginAtZero:true,
max: 1000,
min: 0,
stepSize: 100
},
}
]
}
}
}

2018年3月24日土曜日

CentOS7 MPEG-4　デコーダをインストール

＃yum update

# yum install http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noarch.rp m

# yum -y install ffmpeg vlc smplayer

# yum -y install libdvdcss gstreamer{,1}-plugins-ugly gstreamer-plugins-bad-nonfree gstreamer1-plugins-bad-freeworld

CentOS7 ログイン画面がセカンダリディスプレイに表示される。

自分のログインIDで、ディスプレイの配置の調整をした後、

アプリケーション→システムツール→設定→Displays

# cp ~/.config/monitors.xml /var/lib/gdm/.config/

登録: 投稿 (Atom)