ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

[Java][STS4] Pivotal tc Server Delevoper Editionが無い時

STS4.9.0でPivotal tc Server Delevoper Editionが無い。
と思ったら、stack over flowを見ていたらVMware tc Serverに変わったらしい。
https://stackoverflow.com/questions/54148054/pivotal-tc-server-is-not-included-in-sts-4

Javaって人気あるって思ってたけど、全然STSに関する日本語のドキュメントが無いな。。

[Java][STS4] new maven project

そもそもmavenとは？
-> Javaをビルドするためのツール
-> C言語のmakeのようなもの
-> 似たツールにAntやGradleなどがある
-> XMLを書くと色々できる

pom.xml
-> POMとは、「Project Object Model」の略で、プロジェクトのさまざまな情報を扱うためのオブジェクトモデル
-> プロジェクトの設定をXMLのタグとして記述

  <dependencyManagement>
  	<dependencies>
    <dependency>
      <groupId>io.spring.platform</groupId>
      <artifactId>platform-bom</artifactId>
      <version>2.0.5.RELEASE</version>
      <type>pom</type>
      <scope>import</scope>
    </dependency>
  </dependencies>
  </dependencyManagement>

  <dependencies>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>org.apache.taglibs</groupId>
      <artifactId>taglibs-standard-jstlel</artifactId>
    </dependency>
  </dependencies>

saveすると、src/main/webapp/index.jspのエラーが解消される

[Java][STS4] macでspringの環境構築

$ brew cask install java
-> エラーになるので
$ brew install cask
-> 更にエラーになるので
$ git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch –unshallow

$ brew install java
$ export JAVA_HOME=`/usr/libexec/java_home -v 15`
$ echo $JAVA_HOME
$ export PATH=$JAVA_HOME/bin:$PATH
$ echo $PATH
$ brew install maven
$ export M3_HOME=/usr/local/apache-maven-3.6.3
$ M3=$M3_HOME/bin
$ export PATH=$M3:$PATH
$ mvn –version

https://spring.io/tools

mavenのパスを通す

環境構築はこれでOKっぽい？

[filmora9] 動画編集の始め方

### 1. filmora9インストール
macにfilmora9をインストールします

### 2. filmora9を起動
16:9ワイドスクリーンを選択した状態で、「新しいプロジェクトを作成」を押下します。

### 3. 編集画面表示

– クリップウィンドウ: 動画、音、エフェクト、トランジションなどの素材を選ぶウィンドウ
– タイムラインウィンドウ: 上で選んだクリップを並べて動画にするウィンドウ
– プレビューウィンドウ: タイムラインを再生するウィンドウ

### 4. 動画をドラック&ドロップ
用意した動画を取り込みます。とりあえず適当に3本

### 5. タイトル作成
クリップウィンドウのタイトルタブを選択する

オーナー1を選択し、下にドラッグ&ドロップし、更にダブルクリックしてタイトルを編集します。
適当にMy First Videoとします。

### 6.動画挿入
タイトルに動画をつなげていきます。時間は自由にハサミで編集(切り抜き)できます。

### 7.音声追加

音量のフェードアウトも調整できる

### 8.トランジションの設定
動画の切り替え時にトランジションを設定できる

### 9. videoをエクスポート

なるほど、なんか凄え。こんな簡単にできるんや。。。

[CSS] SVGの使い方

SVGとは
– XMLをベースにした二次元ベクターデータ

SVGのメリット
– 拡大・縮小に強い
– 軽い
– CSSで装飾させたりアニメーションも可

デメリット
– 写真やイラスト等に向かない

### SVG作成
まずPhotoshopでSVG画像を作ります

あれ、保存できない。。
というか、SVGはillustratorで作るらしい。　なるほど。。。。

気を取り直して、illustratorで画像を作ります。

保存した状態

sublimeに当ててみると。。。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;}
	.st1{font-family:'KozGoPr6N-Regular-83pv-RKSJ-H';}
	.st2{font-size:261px;}
</style>
<rect x="14" y="106.68" class="st0" width="478" height="269.86"/>
<text transform="matrix(1 0 0 1 14 336.3662)" class="st1 st2">SVG</text>
</svg>

ほう、こんなんなってるのか。

	<h1>SVG</h1>
	<img src="/img/sample.svg">

### css表示

<div class="test"></div>

.test {
	background-image: url("img/sample.svg");
}

– fill, fill-opacity, stroke, stroke-width, stroke-dasharray, stroke-dashoffsetなど使用可能

### objectで表示

<object type="image/svg+xml" data="/img/sample.svg" width="200" height="100"></object>

### fillの例

	<svg id="test" xmlns="http://www.w3.org/2000/svg">
		<circle class="icon" cx="50" cy="50" r="50"/>
	</svg>

#test {
	fill: red;
}

[position:fixed;] ヘッダー固定

<body>
<div class="wrapper">
	<header>
		<h1 class="headline">
			<a href="">Sample</a>
		</h1>
		<ul class="nav-list">
			<li class="nav-list-item"><a href="">Home</a></li>
			<li class="nav-list-item"><a href="">About</a></li>
			<li class="nav-list-item"><a href="">Topic</a></li>
		</ul>
	</header>
	<div class="main">
	<img src="butterfly.jpg">
	<h1>Butterfly</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	</div>
	<footer>
		<ul class="footer-menu">
			<li>home |</li>
			<li>about |</li>
			<li>service |</li>
			<li>Contact Us</li>
		</ul>
		<p>&copy; All rights reserved by Sample</p>
	</footer>
</div>
</body>

* {
	margin:0; padding:0;
}
.wrapper {
	min-height: 100vh;
	position:relative;
	padding-bottom: 120px;
	box-sizing: border-box;
}
header {
	height: 100px;
	width: 100%;
	padding: 15px 0;
	background-color: #337079;
	color: white;
	margin-top: 0px;
	position: fixed;
}
header .headline {
	line-height: 100px;
	float: left;
	font-size: 30px;
	margin-left: 100px;
}
.nav-list {
	line-height: 100px;
	float: left;
	margin-left: 30px;
	list-style:none;
}
.nav-list-item {
	list-style: none;
	display: inline-block;
	margin: 0 20px;
}
.main {
	width: 80vw;
	padding-top: 170px;
	margin: 0px auto;
}
footer {
	width: 100%;
	height: 100px;
	background-color: #cab64a;
	color: #fff;
	text-align: center;
	position: absolute;
	bottom:0;
}
ul.footer-menu li {
	display: inline;
}

レポジトリに登録しておこう。

[position:relative;] footer下固定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="layout.css">
	<title>Document</title>
</head>
<body>
<header>
	<h1 class="headline">
		<a href="">Sample</a>
	</h1>
	<ul class="nav-list">
		<li class="nav-list-item"><a href="">Home</a></li>
		<li class="nav-list-item"><a href="">About</a></li>
		<li class="nav-list-item"><a href="">Topic</a></li>
	</ul>
</header>
	<footer>
		<ul class="footer-menu">
			<li>home |</li>
			<li>about |</li>
			<li>service |</li>
			<li>Contact Us</li>
		</ul>
		<p>&copy; All rights reserved by Sample</p>
	</footer>
</body>
</html>

* {
	margin:0; padding:0;
}
header {
	height: 100px;
	width: 100%;
	padding: 15px 0;
	background-color: #337079;
	color: white;
}
header .headline {
	line-height: 100px;
	float: left;
	font-size: 30px;
	margin-left: 100px;
}
.nav-list {
	line-height: 100px;
	float: left;
	margin-left: 30px;
	list-style:none;
}
.nav-list-item {
	list-style: none;
	display: inline-block;
	margin: 0 20px;
}
footer {
	width: 100%;
	height: 100px;
	background-color: #cab64a;
	color: #fff;
	text-align: center;
}
ul.footer-menu li {
	display: inline;
}

.wrapper {
	min-height: 100vh;
	position:relative;
	padding-bottom: 120px;
	box-sizing: border-box;
}

footer {
	width: 100%;
	height: 100px;
	background-color: #cab64a;
	color: #fff;
	text-align: center;
	position: absolute;
	bottom:0;
}

意外とするできる。

[Google Analytics API] PHPでリアルタイムユーザ数を取得して表示する

GA APIでページビューやセッションだけでなく、rt:activeUsersでリアルタイムユーザを取得できる。

require_once '../google-api-php-client/src/Google/autoload.php';
$service_account_email = '*.iam.gserviceaccount.com';
$key = file_get_contents('*.p12');
$profile = '*';

$client = new Google_Client();
$analytics = new Google_Service_Analytics($client);

$cred = new Google_Auth_AssertionCredentials(
  $service_account_email,
  array(Google_Service_Analytics::ANALYTICS_READONLY),
  $key
);

$client->setAssertionCredentials($cred);
if($client->getAuth()->isAccessTokenExpired()){
  $client->getAuth()->refreshTokenWithAssertion($cred);
}

$optParams = array(
'dimensions' => 'rt:medium');

try {
$results = $analytics->data_realtime->get(
  'ga:' . $profile,
  'rt:activeUsers',
  $optParams);
} catch (apiServiceException $e) {
  $error = $e->getMessage();
}
print("<pre>");
// print_r($results["totalsForAllResults"]["rt:activeUsers"]);
print_r($results);
print("</pre>");

$array[“totalsForAllResults”][“rt:activeUsers”] でアクティブユーザすうを取れるが、配列で何が取れるか確認した方が良い。

GAの場合、analytics.jsでajaxで処理しているので、ELBのアクセスログから例えば過去5分間のアクセス数を数えてログインユーザとして表示するってよりは、GA APIの方が現実的か。

ちなみに、rtって、リツイートの略かと思ったけど、real timeの略っぽいね。なんじゃそりゃw

[CSS] cssでのvwとは？

cssの中でvwってよく見ますが、vwって何でしょう？
vw: viewport width -> 幅に対する割合、100がマックス
vh: viewport height -> 高さに対する割合

	<style>
		img {
			display: inline-block;
			margin:auto;
			width: 50vw;
		}
	</style>
	<div class="container">
		<img src="/img/test.jpg">
	</div>

フォルクスワーゲンの事じゃないのね。。
VW、cssまで進出して凄いと思ってたが、違った様だ。

[CSS] transitionとは

CSSトランジションとは、CSSプロパティが変化する際のアニメーション速度を操作する

	<style>
		.sample {
			border: 1px solid #ccc;
			border-radius: 5px;
			width: 150px;
			height: 60px;
			line-height: 60px;
			font-weight: bold;
			text-align: center;
			color: green;
			box-shadow: 20px 10px 2px #8D9EB8;
			transition: 0.5s;
		}
		.sample:hover {
			color: orange;
			box-shadow: -20px 10px 5px #8D9EB8;
		}
	</style>
	<div class="container">		
		<div class="sample">Sample</div>		
	</div>

transitionの値を2sとか0.5sとか変えると、動きも変わる。

なるほど、アニメーションの動きは、ここで制御しとるんか。