読者です 読者をやめる 読者になる 読者になる

みつろぐ

やれることはやってみる

いつでもAffectionな気持ちになりたい

これはゆゆ式AdventCalendar 2016 11日目の記事になります

本AdventCalendar初日にid:esuji5さんが取り上げてくださっているように新作OVAが2月22日に発売が決定、新OP/EDとキャラクターソングアルバムに加えてイベント開催決定と来年もゆゆ式な1年になると思うと胸が熱くなります。
d.hatena.ne.jp


さて、ゆゆ式といえばOP「せーのっ」で五臓六腑に染み渡る津田さんの歌声もいいですが、個人的にはすべてを忘れて脳汁だけが流れ続けるED「Affection」も好きです。
「せーのっ」を拝聴し続けるとすぐに歌いそうになってしまうため、今回はいつでもAffectionな気持ちになれるツールを作ってみました。
f:id:Mitu217:20161211220021p:plain

画面右下に表示されるデスクトップアイコン的なアプリとなっているため、少し容量は思いですがぜひ使ってみてください。zipファイルを解凍してでてきたAlwaysAffectionというファイルが実行ファイルとなります。
AlwaysAffection


以下は作成記録です。NW.jsの導入方法やビルド方法については今回触れません。

  1. まずはAffectionを拝聴しながら素材をゲットします

f:id:Mitu217:20161211220837p:plain

  1. いい感じにGIFへ編集します。今回はあまり時間がなくPhotoShop先生に頼りきってしまいましたので、あとで調整したい…

f:id:Mitu217:20161211221022g:plain

  1. NW.jsでGIF画像を表示するだけのアプリを作ります
{
	"name": "AlwaysAffection",
	"main": "index.html",
	"version": "1.0",
	"window": {
			"width": 200,
			"height": 250,
		"icon": "icon.png",
		"transparent": true,
		"toolbar": false,
		"frame": false,
		"always_on_top": true,
		"show": false
	}
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>いつでもAffection</title>
</head>

<style>
html {
  height: 200px;
  width: 200px;
}
body {
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.0);
  color:#fff;
  -webkit--app-region: drag;
}
.content {
  position: absolute;
  bottom: .25rem;
  right: 0rem
}
</style>

<script>
  var gui = require('nw.gui');
  var win = gui.Window.get();
  win.moveTo(
    window.screen.availWidth - win.width,
    window.screen.availHeight - win.height
  );
  win.show();
</script>

<body>
  <div class="content">
    <img src="Affection.gif" width="200" height="200" border="0" align="center" hspace="10" vspace=10 loop=infinite ondragstart="return false;"  oncontextmenu="return false;">
  </div>
</body>
</html>
  1. あとはビルドをして実行すれば完成!

f:id:Mitu217:20161211221909p:plain


動きがそこまで激しくないため常に表示しても邪魔に感じないので、さすがゆゆ式というところです。


雑な記事になってしまいましたが、以上となります。
明日はid:masaybloveさんで4コマ漫画を書いてくれそうな雰囲気で非常に楽しみです。よろしくお願いいたします。