日々是好日

プログラミングについてのあれこれ、ムダ知識など

Sushi Buffet を支える技術 ver2.0.0

VSCode拡張機能 TypeScript Node.js プログラミング VSCode シェル

VS Code でいつでも回転寿司を眺められる拡張機能を作りました。 sushi-buffetを支える技術 - 日々是好日 のメジャーアップデートです。

マーケットプレイスはこちら。 marketplace.visualstudio.com

ぎとはぶ github.com

どうやって回転させているの？

わりと腕力で解決しました。

操作したファイルは前回と同じくworkbench.main.cssです。

追加する構文

/*ext-sushi-buffet-start*/
body{
  /* 寿司8種類分。ランダムに生成する */
  background-image:
  url(c:\\...\\sushi_aburi_engawa.png),
  ...
  url(c:\\...\\sushi_buri.png);
  
  /* 寿司の初期位置を比率で指定 */
  /* 8角形の頂点に配置するようにする */
  background-position:
  40% 20%,
  ...
  20% 40%;

  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:auto 15%;
  opacity:0.7;
  
  /* アニメーションを無限ループでセット */
  animation-name:rotate;
  animation-duration:20s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes rotate {
  /* 8角形の頂点を8個の寿司が動く */
  0% {
    background-position:
    40% 20%, ... ,20% 40%;
    }
  12.5% {
    background-position:
    60% 20%, ... ,40% 20%;
    }
  ...
  100% {
    background-position:
    40% 20%, ... ,20% 40%;
    }
}

12.5% 刻みで綺麗に1周させるため、8角形の頂点上に配置しています。

f:id:kcpoipoi:20190511231442p:plain:w300

要は回転というか、各頂点上を移動させているだけですね。

transform.rotate は使えないの？

body {
  /* 適当に背景をセット */
  background-image: ...;

  /* アニメーションを無限ループでセット */
  animation-name:rotate;
  animation-duration:20s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

@keyframe rotate {
  from { transform:rotate(0deg) }
  to { transform:rotate(360deg) }
}

body の全パーツ、すなわち画面全体が回転するのでやめておいた方がいいです（ぇ

workbench.html に div タグ仕込めばいいのでは？

<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<!DOCTYPE html>
<html>
    <head>
       ...
   </head>
    <body class="vs-dark" aria-label="">
    </body>

    <!-- Startup via workbench.js -->
    <script src="workbench.js"></script>
</html>

自分 HTML 全然分からない勢なので、とりあえず

<body class="vs-dark" aria-label="">
  <div><img src="画像.png"></div>
</body>

としたところ、

f:id:kcpoipoi:20190511231808p:plain:w300

となってしまいました。メニューバーの上に表示されています。

よく考えれば、こんな適当に<div>加えたらそうなりますよ…( ˘ω˘)

本当にマジでガチでやるなら、画面を構成するパーツを定義してる部分を探し出し、 適切に追加してやればいいはずですが、環境壊す可能性もあるのでもう諦めです_(:3｣∠)_

結局なんなのこの機能

そんなんわいが一番教えてほしい（）