TOKEI @2018/12/13
ひつじアドカレ2018/12/13枠です
急遽12/10に決まってアワアワしてました。
TOKEI？
@sakaponさんのデスクトップに浮いている時計かっこいいですよね
ああいうのって作ってみたくなる魔力があると思います
ああいうやつ作ってみよう！
リポジトリ
大体ここらへん
概要
がっつり解説系ではないです。
VueとElectron使って時計デスクトップアプリをつくります。
https://techblog.recochoku.jp/wp-content/uploads/2017/02/electron-180x180.png
Vue: Webアプリケーションフレームワーク
Electron: デスクトップアプリケーションフレームワーク
html / css / jsでネイティブアプリが作れるすごいやつ
Atom、VSCode、Slackとかに使われている
裏でChrome的なのが動いて頑張ってる
もともとGithubがAtomを作るためのものだった
通信かますとセキュリティ怖い
Windowsだと透過処理あたりはかなり怪しいです。
大体ちゃんと透過されません。
Macもmojaveにしてるとなんか白い線が上部に表示されます。
透明なアプリケーションを作ると線だけ残って異様な光景に。
defaults write -app [app name] NSRequiresAquaSystemAppearance -bool No
で、アプリ単体のダークモードを切ってやると多少マシになりますが、やっぱりなんか表示されます。
現状どうしようもないっぽいです。
プロジェクト作成
vue createで作りたいところですが、デスクトップアプリなので、Electronを使うために
@vue/cli-initを使ってプロジェクトを作成します。
npm i -g @vue/cli-init
vue init simulatedgreg/electron-vue .
出来上がった雛形を使います。
漂うYeoman臭。
https://avatars0.githubusercontent.com/u/1714870?s=200&v=4.png
webpack等の設定込みなのでホットリロードが効きます。
素で作るより断然楽になります。至れり尽くせり。
依存関係インストールしてrun devします。
アプリケーションが起動します。やったね。
スクショ忘れました。
ルーティングとかなんか必要なもの入れたり色々やって、
code:html
<html>
<body>
<h3 id="day"></h3>
<h1 id="time"></h1>
</body>
<script>
Moment.jsいんぽーと
const render = () => {
const now = moment()
document.querySelector('#day').innerHTML = now.format('YYYY/MM/DD')
document.querySelector('#time').innerHTML = now.format('HH:mm:ss')
}
setInterval(render, 1000)
</script>
</html>
的なことをすると
https://gyazo.com/45bf2e53188564da2c378b6894be17de
なんか野暮ったい時計が出来上がりました。
背景が、透過 / 弱透過でトグる。
この消えない枠線。くそださい。
https://gyazo.com/02b0e6ad41b4668db50a42952fe2cf91
ループの手段として、setInterval / setTimeoutではなく、requestAnimationFrameでもいいんですが、1変更/secの時計に高FPSとかいらないので今回はなしです。
それなりに描画しつつ、省エネを考えるならrequestAnimationFrameは有用です。
バックグラウンドへ行くと描画数を落としてくれたりするので。
Electronの設定はこんな感じ
code:js
// src/main/index.js
// Electron window設定
mainWindow = new BrowserWindow({
height: 300,
width: 300,
useContentSize: true,
frame: false,
transparent: true,
alwaysOnTop: true,
darkTheme: false,
resizable: false,
hasShadow: false
})
hasShadow: trueにしている状態でtransparent: trueにして背景透過させて、
画面に何かしら動きがあると、すっげー勢いで残像まみれになります。
大体いらん子なので消すのが安定です。
frame: falseにすると、タイトルバーが消えてドラッグ不可になります。
code:sass
html
-webkit-app-region: drag
-webkit-user-select: none
をどっかしらに付けてあげるとドラッグ可になります。
これだと流石に出来高があれなんでもうちょっと頑張ります。
Part2
https://gyazo.com/9f47707bed1a3d06258c3ccda21ec9ad
バイナリ時計。
以前作っていたものを移植、ちょろちょろ変更。
YYMMDDhhmmssをそれぞれ二進数に変えてテーブルで表示。
アニメーションはCSS
読めない
code:sass
.star
transition-property: color, transform
transition-duration: 1s
transition-timing-function: ease
.star.on
color: rgba(33, 150, 243, .9)
transform: rotate(0deg)
.star.off
transform: translate(20px, 50px) rotate(-216deg) scale(.001, .001)
color: rgba(100, 100, 150, .1)
大元(.star)で、transitionするものを選んで、時間決めて、どういう動きにするか決めています。
あとは.on .off時にどうなっているかを決めて、毎秒classの付け替えをするだけです。
CSS様様ですね。
もうちょっと頑張る。
Part3 ~~ここらへんからハードコーディング~~
https://gyazo.com/3b9be1e733848491c00655b6e50ed7d7
アナログ時計。
まごうことなき失敗作。
なんせ読めない
spanタグをくるくる回しています。
タグの左上が座標になるため、若干のズレが生まれています。
めんどくさかったんで治していません。
秒針だけミリ秒を使って動かします。
6°/sと比べてぬるぬる動くようになります。
時計の角度0°はY軸上にあります。
0時:0分0秒は - 90°の位置です。
忘れていると悲しいことになります。なりました。
code:sass
ハートマークのセレクタ
animation: mid-animation 3s ease infinite
@keyframes mid-animation
0%
opacity: .9
transform: scale(1.5, 1.5)
50%
opacity: .3
transform: scale(1, 1)
100%
opacity: .9
transform: scale(1.5, 1.5)
中央のハートアイコンがこれで動いています。
便利な永続可能なアニメーションCSS。
animation: [名前] [時間] [種類] [回数]
@keyframes [名前]
0% か fromで開始時、100% か toで終了時の状態です。
50%で間の時のスタイルを当てています。
上の例だと、3 / 2s経つとopacity: .3; transform: scale(1, 1)になり、3s経って元に戻る感じです。
回数がinfiniteなので、これが動き続けます。
classの付け替えをしなくていいんでめっちゃ楽です
color, background-color, filter: grayscale(---) sepia(---)あたりを突っ込むと、
すっげーやかましいデザインにできます。
あとちょっとだけ頑張る。
Part4
https://gyazo.com/bb46623eea465cb7c17ddef213b988ec
デジタル時計。
読める！！！
でも、もう二度と作りたくないです。
position: absolute; left:...; top:...; width:...; height:...で、divをベタ置きしています。
棒1本1本がそうです。
おわり
今回は全部dom操作だけで済ませています。
2日間の突貫工事なので粗が目立ちます。
ElectronはWebの知識が使えるのでかなり楽にアプリを作成できます。
細かい差でできること、できないことはありますが、Win / Mac / Linux 用のアプリを1つのコードで作れるのは強いです。
超強力なnpmの存在が大きく、大体誰かがいい感じのライブラリを作ってくれています。
クリックを透過させて背景アプリを作るとか、Live2Dや3Dモデリングと組み合わせてデスクトップマスコットを作るとか、可用性は高いです。
デメリット
Chroniumで動くためメモリの消費が激しい
ほぼブラウザのようなものなので、あんまりパフォーマンスはよろしくない
.exe .app化する時に実行環境も内蔵するため、出来上がりの容量がやたら膨れ上がる
バッテリーをやたら喰う
お疲れ様でした。
その他
https://gyazo.com/611a916bb0568e2350e0718ae6ed1bdb
https://gyazo.com/3a92102e4eeae2284913ae3a53657802
OK
https://gyazo.com/f1b70bdc5cb6aa1ea7264d85da09d11a
https://gyazo.com/c83f2a23c67a0f3ba2a7a663f5e4caaf
https://gyazo.com/ab5055a425488a06d5a382ded439f506