「今日のスダクリエイト」タグで作ったJavaScriptのコンテンツ

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


Twitterで仲良くなった[スダさん](https://twitter.com/sudarexyz)という方を題材に、この1年間 [#今日のスダクリエイト というハッシュタグで趣味のコンテンツを作ってきました](https://twitter.com/search?f=tweets&vertical=default&q=%23%E4%BB%8A%E6%97%A5%E3%81%AE%E3%82%B9%E3%83%80%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%88%20from%3Atonkotsuboy_com&src=typd)。自分が書きたいプログラムを定期的に書くことで、**業務で扱う以外の技術の勘が鈍らなくなり、作ることの喜びやモチベーションが向上し続けました**。

本記事では、ES2015+、TypeScript、SVG、WebGLなどを使ったインタラクションをピックアップし、その技術的な工夫点とともに紹介します。

# SVG、fetch APIで泡アニメーション
SVGの線や塗りなどの形状をJavaScriptでコントロールしようとするとSVGのインライン展開が必要ですが、HTMLのコード量が増えてしまいます。HTML内にSVGコードは書かず、[Fetch API](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API)を用いてリソースをダウンロードしてパースし、CSSアニメーションを加えたデモです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XHRに代わるリソース取得API「Fetch」を用いてSVGファイルをDL。テキストとして取得することで、SVGコードをインラインに展開。<br>結果的にSVGファイルのpath属性をCSS3により操作可能になる。<a href="https://t.co/dNuHTb5EQb">https://t.co/dNuHTb5EQb</a><a href="https://twitter.com/hashtag/javascript?src=hash&amp;ref_src=twsrc%5Etfw">#javascript</a> <a href="https://t.co/bAOy3gGiEx">pic.twitter.com/bAOy3gGiEx</a></p>&mdash; Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) <a href="https://twitter.com/tonkotsuboy_com/status/858691291626041344?ref_src=twsrc%5Etfw">April 30, 2017</a></blockquote> 
- [デモURL](http://jsdo.it/tonkotsuboy/q1qt/fullscreen)
- [ソースコード](https://github.com/tonkotsuboy/testCodes/tree/feature/svgtest/170430_svg/svg5-suda-rainbow)

SVGを表示するHTMLコードは次のように、空の`div`タグです。

```html:HTML
<div id="container">
</div>
```

JavaScript(TypeScript)を用いてSVGコードをダウンロードしています。

```ts:TypeScript
fetch("./images/suda.svg").then((response) => {
      return response.text();
    });
```

素材の変更もすぐに可能です。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">&quot;Suda in your Dream&quot;<a href="https://t.co/lBaNq8BnD6">https://t.co/lBaNq8BnD6</a><br><br>material : .<a href="https://twitter.com/fabrec_jp?ref_src=twsrc%5Etfw">@fabrec_jp</a><br>technology : SVG, Fetch API, TypeScript<a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E3%82%B9%E3%83%80%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%88?src=hash&amp;ref_src=twsrc%5Etfw">#今日のスダクリエイト</a> <a href="https://t.co/3SzY3MgUSV">pic.twitter.com/3SzY3MgUSV</a></p>&mdash; 鹿野壮@ICS (@tonkotsuboy_com) <a href="https://twitter.com/tonkotsuboy_com/status/919243263462084608?ref_src=twsrc%5Etfw">2017年10月14日</a></blockquote>

# SVGとCSSでTwitterのいいね風アニメーション
SVGとCSSアニメーションでTwitterのいいね風アニメーションを作成しました。レイアウトには[CSS Grid](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout)を用いています。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ものすごくいいねしたくなったので作りました。<br><br>URL<a href="https://t.co/0ZdkKOcIbn">https://t.co/0ZdkKOcIbn</a><br><br>ソース（SVG, CSS Grid, ES 2017）<a href="https://t.co/ltfS2KEE0H">https://t.co/ltfS2KEE0H</a><a href="https://twitter.com/hashtag/JavaScript?src=hash&amp;ref_src=twsrc%5Etfw">#JavaScript</a> <a href="https://twitter.com/hashtag/SVG?src=hash&amp;ref_src=twsrc%5Etfw">#SVG</a> <a href="https://t.co/HMyXuZG3y7">pic.twitter.com/HMyXuZG3y7</a></p>&mdash; 鹿野壮@ICS (@tonkotsuboy_com) <a href="https://twitter.com/tonkotsuboy_com/status/911199428668567552?ref_src=twsrc%5Etfw">2017年9月22日</a></blockquote>



- [デモ](https://tonkotsuboy.github.io/suda/superlikes/)
- [ソースコード](https://github.com/tonkotsuboy/suda/blob/master/superlikes/src/js/script.js)

ハート部分を「スダさん」のSVG要素に変更し、叫び声と共に爆発していくインタラクションを作りました。

- [デモ（音が出ます）](https://tonkotsuboy.github.io/suda/superlikes/suda2.html)
- [ソースコード](https://github.com/tonkotsuboy/suda/blob/master/superlikes/src/js/suda2.js)

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">泣き声とエフェクトを更新。<br><br>URL<a href="https://t.co/YAk2spWtBd">https://t.co/YAk2spWtBd</a><br><br>JavaScript<a href="https://t.co/CGZIveXCku">https://t.co/CGZIveXCku</a><a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E3%82%B9%E3%83%80%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%88?src=hash&amp;ref_src=twsrc%5Etfw">#今日のスダクリエイト</a> <a href="https://t.co/vIsTNExIKD">pic.twitter.com/vIsTNExIKD</a></p>&mdash; 鹿野壮@ICS (@tonkotsuboy_com) <a href="https://twitter.com/tonkotsuboy_com/status/912717704934572032?ref_src=twsrc%5Etfw">2017年9月26日</a></blockquote>


# SVG要素をパスに沿って移動する
SVG要素をパスに沿って移動させるインタラクションです。注射器を押す度に注入されるSVG要素「スダさん」が、大きなパスに沿って移動します。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">SVGのパスアニメーション「Suda Injection」 を作りました。<br><br>※ 押すと増えます<a href="https://t.co/iioliftxqc">https://t.co/iioliftxqc</a><a href="https://twitter.com/hashtag/SVG?src=hash&amp;ref_src=twsrc%5Etfw">#SVG</a> <a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E3%82%B9%E3%83%80%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%88?src=hash&amp;ref_src=twsrc%5Etfw">#今日のスダクリエイト</a> <a href="https://t.co/4lKjBoHsdd">pic.twitter.com/4lKjBoHsdd</a></p>&mdash; 鹿野壮@ICS (@tonkotsuboy_com) <a href="https://twitter.com/tonkotsuboy_com/status/869360089940893696?ref_src=twsrc%5Etfw">2017年5月30日</a></blockquote>

- [デモ](https://tonkotsuboy.github.io/svgclock/svgparticle/index3.html)
- [ソース1](https://github.com/tonkotsuboy/svgclock/blob/master/src/ts/Main3.ts)
- [ソース2](https://github.com/tonkotsuboy/svgclock/blob/master/src/ts/particle/SudaParticleEmitter.ts) 

移動経路となるパスは次のように定義しています。

```html:HTML
<path id="linePath" fill="none"
          d="M311,159h-1s-3-10-4-17l-2-12c-2-7-6-23-12-35s-4-5-6-6l-4-3c-3-3-5-9-7-13V71c-6-14-19-23-30-30h-1c-6-4-12-7-18-9h-5c-4,0-6-1-10-4L184,7（中略）"/>

```

- [パス部分のコード](https://github.com/tonkotsuboy/svgclock/blob/master/src/index3.html#L35-L36)

# SVG時計
JavaScriptによるSVG要素の操作説明のために作った時計です。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">「SVG Clock ~大きなのっぽのスダ時計~」を作りました。<br><br> <a href="https://t.co/KzcVzgsq1R">https://t.co/KzcVzgsq1R</a><a href="https://twitter.com/hashtag/SVG?src=hash&amp;ref_src=twsrc%5Etfw">#SVG</a> <a href="https://twitter.com/hashtag/TypeScript?src=hash&amp;ref_src=twsrc%5Etfw">#TypeScript</a> <a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E3%82%B9%E3%83%80%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%88?src=hash&amp;ref_src=twsrc%5Etfw">#今日のスダクリエイト</a> <a href="https://t.co/ZWsr28lWbb">pic.twitter.com/ZWsr28lWbb</a></p>&mdash; 鹿野壮@ICS (@tonkotsuboy_com) <a href="https://twitter.com/tonkotsuboy_com/status/865480753924014081?ref_src=twsrc%5Etfw">2017年5月19日</a></blockquote>

- [デモ](https://codepen.io/tonkotsuboy/full/pPxaNQ/)
- [ソース1](https://github.com/tonkotsuboy/svgclock/blob/master/src/ts/Main.ts)
- [ソース2](https://github.com/tonkotsuboy/svgclock/blob/master/src/ts/clock/ClockController.ts)

# TypeScriptとCreateJSでパーティクル表現
HTML5 Canvasのフレームワーク「CreateJS」を用いたパーティクル表現です。パーティクル発生時にマウスの加速度を加味しているので、マウスを早く動かすとパーティクルがより遠くに飛んでいきます。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">「スダマリ」<br><br>こちらから試せます。<a href="https://t.co/uiLek5YBgg">https://t.co/uiLek5YBgg</a><a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E3%82%B9%E3%83%80%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%88?src=hash&amp;ref_src=twsrc%5Etfw">#今日のスダクリエイト</a> <a href="https://twitter.com/hashtag/createjs?src=hash&amp;ref_src=twsrc%5Etfw">#createjs</a> <a href="https://twitter.com/hashtag/HTML5?src=hash&amp;ref_src=twsrc%5Etfw">#HTML5</a> <a href="https://t.co/PtJKM6ebl9">pic.twitter.com/PtJKM6ebl9</a></p>&mdash; 鹿野壮@ICS (@tonkotsuboy_com) <a href="https://twitter.com/tonkotsuboy_com/status/857948933519048705?ref_src=twsrc%5Etfw">2017年4月28日</a></blockquote>

- [デモ](http://tonkotsuboy.github.io/RainbowBubbles/)
- [ソースコード](https://github.com/tonkotsuboy/RainbowBubbles)

パーティクル発生座標とマウス加速度を算出している部分は次のとおり。

```ts:TypeScript
  /**
   * MainLayerのtickイベント毎に実行される処理
   */
  public update(goalX: number, goalY: number) {
    // 発生装置はgoalに徐々に近づいていく。
    let dx: number = goalX - this._emitX;
    let dy: number = goalY - this._emitY;
    let d: number = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));  // 斜め方向の移動距離
    let rad: number = Math.atan2(dy, dx);    // 移動角度
    this._vx = Math.cos(rad) * d * 0.1; // 速度の更新
    this._vy = Math.sin(rad) * d * 0.1; // 速度の更新
    this._emitX += this._vx;
    this._emitY += this._vy;
    // アニメーション中のパーティクルの状態を更新
    this.updateParticleList();
  }
```

- [該当部分のソースコード](https://github.com/tonkotsuboy/RainbowBubbles/blob/6c8cdc3e6651018474e3491bc3b5429d84e2edc6/src/ts/particle/ParticleEmitter.ts#L31-L46)

# WebGL(three.js)

Twitterで仲良くなった[@RR2arazさん](https://twitter.com/RR2araz)が、練習のために作ったWebGL（[three.js](https://threejs.org/)）の3Dコンテンツ。


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">鹿野先生( <a href="https://twitter.com/tonkotsuboy_com?ref_src=twsrc%5Etfw">@tonkotsuboy_com</a> )にプルリクエストしたやつをマージしてもらったので、GitHub Pagesに反映されました。便利！<br>おかげさまで大変勉強になりました。すだころがしです。<a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E3%82%B9%E3%83%80%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%88?src=hash&amp;ref_src=twsrc%5Etfw">#今日のスダクリエイト</a><a href="https://t.co/DzeNuXOM9X">https://t.co/DzeNuXOM9X</a></p>&mdash; 唐揚げになったたかはし (@RR2araz) <a href="https://twitter.com/RR2araz/status/881702298195329024?ref_src=twsrc%5Etfw">2017年7月3日</a></blockquote>

![sudakorogashi_1.gif](https://qiita-image-store.s3.amazonaws.com/0/67884/17a5f840-4dc4-9298-2efa-e723d0aa9f98.gif)

面白そうな素材だったので、回転率とクレイジーさをアップしました。ES2015+で記述しています。

![sudakorogashi_2.gif](https://qiita-image-store.s3.amazonaws.com/0/67884/014492cc-979e-5d85-fb24-c48c355a86b7.gif)

- [デモURL](https://tonkotsuboy.github.io/suda/suda-korogashi/index2.html)
- [ソースコード(JavaScript)](https://github.com/tonkotsuboy/suda/blob/master/docs/suda-korogashi/js/script.js)

# スダさんでコンテンツを作るのは楽しい

[#今日のスダクリエイト](https://twitter.com/search?f=tweets&vertical=default&q=%23%E4%BB%8A%E6%97%A5%E3%81%AE%E3%82%B9%E3%83%80%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%88%20from%3Atonkotsuboy_com&src=typd)で作るコンテンツは、仕事もお金も関係のない完全に趣味のもの。しかし、**「この表現はどうするんだろう？」「この技術はどう使うのかな？」と試行錯誤することで、創作の喜びに満たされていきました**。引き続き、趣味の「スダさん」を作っていこうと思います。