Google製JPEGエンコーダー「Guetzli」

## Guetzli
https://github.com/google/guetzli

Guetzli [guɛtsli] とはスイスドイツ語でクッキーの意味。[^cookie]

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Go Guetzli or go home <a href="https://twitter.com/hashtag/baking?src=hash">#baking</a> <a href="https://twitter.com/hashtag/christmas?src=hash">#christmas</a> <a href="https://twitter.com/hashtag/cookies?src=hash">#cookies</a> <a href="https://twitter.com/hashtag/heyprettyeats?src=hash">#heyprettyeats</a> <a href="https://t.co/55nX22aNOA">https://t.co/55nX22aNOA</a> <a href="https://t.co/v4Fj8qyZo9">pic.twitter.com/v4Fj8qyZo9</a></p>&mdash; HeyPrettyBeautyBlog (@HeyPrettyBeauty) <a href="https://twitter.com/HeyPrettyBeauty/status/673161025609441280">2015年12月5日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Google が2016年10月22日に GitHub で Initial Release を公開 [^1] した JPEG エンコーダー。2017年1月13日に GIGAZINE で紹介される。[^2]
2017年3月15日に 1.0 がリリース [^3] され、Google Research Blog でアナウンスされた [^4] ため、同17日頃より国内メディアで紹介され始めた。

[^1]: https://github.com/google/guetzli/releases/tag/v0
[^2]: [GoogleがJPEGエンコーダー「Guetzli」をオープンソースで公開 - GIGAZINE](http://gigazine.net/news/20170113-google-guetzli/)
[^3]: https://github.com/google/guetzli/releases/tag/v1.0

[^4]: [Research Blog: Announcing Guetzli: A New Open Source JPEG Encoder](https://research.googleblog.com/2017/03/announcing-guetzli-new-open-source-jpeg.html)
* [Google、より高画質で小サイズを実現するJPEGエンコーダをオープンソースで公開 - PC Watch](http://pc.watch.impress.co.jp/docs/news/1050088.html)
* [Google、JPEGエンコーダ「Guetzli」公開、同じ画質で35％小さく圧縮 | マイナビニュース](http://news.mynavi.jp/news/2017/03/17/071/)

### 使ってみた感想
Mozilla の JPEG エンコーダー [mozjpeg](http://qiita.com/bezeklik/items/05cc23c0b053706d4fea) と画像処理を比較した結果、200倍の処理時間がかかった上に圧縮率が拮抗してて（しかも負けてる）、見た目も大差ないので、正直使えないかもしれない。ナニコレ。

### 指摘を受けた後の補足
個人的な感想に変更はないが、Guetzli のメリットとしては、同じく Google 製の butteraugli による品質評価でスコアが優位であり、butteraugli のスコアを同一にした場合に、画像サイズがより小さくなるらしい。GIGAZINE の1月の記事にちゃんと書いてあった…。
ただ、よっぽど大きい画像とかじゃないと正直違い分からないと思うよ。quality 84 より下に設定できないし。

どういった画像が人間が評価したときに違いが出やすいかが明示されて、200倍の時間をかける必要性があることに対してであれば、あるいは使いどころもあるかもしれない。

[^cookie]: http://www.dict.cc/?s=Guetzli

### より詳しい情報
この記事を書いている人間は画像処理についてまったく知見のない完全な素人です。
そして画像処理に詳しい人たちにヘイトの溜まる書き方だったようでかなり反感を買いましたが、おかげで詳しい記事を書いてくれたようです。
少なくともこの記事より技術的に正しい、あるいは詳しい内容かと思うので、技術的に気になる方はそちらを参照してください。

* [Guetzli／Butteraugliに関するあれこれ - Qiita](http://qiita.com/yohhoy/items/406af27d4415c7bb6346)
* [Reputeless/Guetzli-test](https://github.com/Reputeless/Guetzli-test)

## インストール
```bash
curl -L https://github.com/google/guetzli/releases/download/v1.0/guetzli_linux_x86-64 -o guetzli
chmod a+x guetzli && mv $_ /usr/local/bin
```
CentOS 7.3.1611 (minimal) で動作確認。
コンパイル手順では libpng (extras) と gflags (epel) のインストールが記載されているが、バイナリ版には含まれているのかインストールしなくても動作した。（インストールしてもエンコードサイズは変わらなかった）

## 使い方
※リリース早々に1.0.1にバージョンアップして挙げ句パラメーター変わってるらしいのでご注意ください。
### 基本
```bash
guetzli bees.png bees_compressed.jpg
```
### 品質指定
```bash
guetzli -quality 90 bees.png bees_90.jpg
```
### 詳細表示
```bash
guetzli -verbose bees.png bees_compressed.jpg
```
```
Original Out[ 148444] BA[100.00%] D[0.4312] Score[148444.0000] (*)
Iter  1: f111111 quantization matrix:
  1  1  1  1  1  1  1  1     1  1  1  1  1  1  1  1     1  1  1  1  1  1  1  1
  1  1  1  1  1  1  1  1     1  1  1  1  1  1  1  1     1  1  1  1  1  1  1  1
  1  1  1  1  1  1  1  1     1  1  1  1  1  1  1  1     1  1  1  1  1  1  1  1
  1  1  1  1  1  1  1  1     1  1  1  1  1  1  1  1     1  1  1  1  1  1  1  1
  1  1  1  1  1  1  1  1     1  1  1  1  1  1  1  1     1  1  1  1  1  1  1  1
  1  1  1  1  1  1  1  1     1  1  1  1  1  1  1  1     1  1  1  1  1  1  1  1
  1  1  1  1  1  1  1  1     1  1  1  1  1  1  1  1     1  1  1  1  1  1  1  1
  1  1  1  1  1  1  1  1     1  1  1  1  1  1  1  1     1  1  1  1  1  1  1  1
Iter  1: f111111 GQ[ 0.00] Out[ 148314] BA[100.00%] D[0.4312] Score[148314.0000] (*)
(snip)
Iter  9: f111111 quantization matrix:
  3  3  3  3  3  3  5  5     3  3  3  3  3  3  5  5     3  3  3  3  3  3  5  5
  3  3  3  3  3  5  5  5     3  3  3  3  3  5  5  5     3  3  3  3  3  5  5  5
  3  3  3  3  5  5  5  5     3  3  3  3  5  5  5  5     3  3  3  3  5  5  5  5
  3  3  5  5  5  5  5  5     3  3  5  5  5  5  5  5     3  3  5  5  5  5  5  5
  3  5  5  5  5  5  5  5     3  5  5  5  5  5  5  5     3  5  5  5  5  5  5  5
  5  5  5  5  5  5  5  5     5  5  5  5  5  5  5  5     5  5  5  5  5  5  5  5
  5  5  5  5  5  5  5  5     5  5  5  5  5  5  5  5     5  5  5  5  5  5  5  5
  5  5  5  5  5  5  5  5     5  5  5  5  5  5  5  5     5  5  5  5  5  5  5  5
Iter  9: f111111 GQ[29.82] Out[  58432] BA[100.00%] D[0.9286] Score[58432.0000]

YUV444 selected quantization matrix:
  3  3  3  3  3  3  5  5     3  3  3  3  3  3  5  5     3  3  3  3  3  3  5  5
  3  3  3  3  3  5  5  5     3  3  3  3  3  5  5  5     3  3  3  3  3  5  5  5
  3  3  3  3  5  5  5  5     3  3  3  3  5  5  5  5     3  3  3  3  5  5  5  5
  3  3  5  5  5  5  5  5     3  3  5  5  5  5  5  5     3  3  5  5  5  5  5  5
  3  5  5  5  5  5  5  5     3  5  5  5  5  5  5  5     3  5  5  5  5  5  5  5
  5  5  5  5  5  5  5  5     5  5  5  5  5  5  5  5     5  5  5  5  5  5  5  5
  5  5  5  5  5  5  5  5     5  5  5  5  5  5  5  5     5  5  5  5  5  5  5  5
  5  5  5  5  5  5  5  5     5  5  5  5  5  5  5  5     5  5  5  5  5  5  5  5
Iter 10: f111111(7) up Coeffs[24885/45016] Blocks[1287/1797/1848] ValThres[0.7288] Out[  46401] EstErr[0.10%] BA[100.00%] D[1.0452] Score[1820309.3844]
Iter 11: f111111(7) up Coeffs[3563/19983] Blocks[861/1781/1848] ValThres[0.0294] Out[  44501] EstErr[0.07%] BA[100.00%] D[1.0487] Score[2088126.7296]
Iter 12: f111111(7) up Coeffs[3543/16420] Blocks[944/1771/1848] ValThres[0.0332] Out[  42585] EstErr[0.08%] BA[100.00%] D[1.0651] Score[4521058.0405]
(snip)
Iter 33: f111111(7) down Coeffs[49/3569] Blocks[27/136/1848] ValThres[0.0173] Out[  37860] EstErr[0.08%] BA[100.00%] D[0.9947] Score[119150.1578]
Iter 34: f111111(7) down Coeffs[47/1717] Blocks[23/73/1848] ValThres[0.0259] Out[  37897] EstErr[0.10%] BA[100.00%] D[0.9796] Score[56045.0362]
Iter 35: f111111(7) down Coeffs[44/285] Blocks[10/21/1848] ValThres[0.0265] Out[  37910] EstErr[0.06%] BA[100.00%] D[0.9717] Score[37910.0000] (*)
```
### バグ？
```bash
guetzli -version
```
とやっても `guetzli` としか出力されない。

## スピードとサイズ
| quality | 時間 | サイズ | 圧縮率 |
|:-:|:-:|:-:|:-:|
| 84  |  9.474s |  19881 | 11.2% |
| 90  | 10.960s |  25783 | 14.5% |
| 95  | 13.667s |  37910 | 21.4% |
| 100 | 23.489s | 148444 | 83.7% |
|未指定| 13.530s | 37910 | 21.4% |

公式のサンプル画像を元にした数値。オリジナル画像のサイズは 177424 バイト。
`-quality` は 84 からしか指定できない。
変換サイズから推測して未指定の場合は `-quality 95` になるようだ。

## その他の JPEG エンコーダー
* Lepton
* mozjpeg
* libjpeg-turbo
* jpegoptim

## mozjpeg との比較
### 画像
画像処理界隈で有名な Lena の画像 [^lena] で比較。PLAYBOY 1972年11月の切り抜き。
<br/> Source: <a href="http://www.computableminds.com/post/lena-soderberg-common-image-processing-test-images.html">The photo of Lena Söderberg photo and other image processing test images</a><br/>

![remastered-lena.jpg](https://qiita-image-store.s3.amazonaws.com/0/15175/144db3cd-bb83-03a6-4371-5c2ffd53a604.jpeg)

[^lena]: http://www.computableminds.com/post/lena-soderberg-common-image-processing-test-images.html

### 時間
| quality | Guetzli | mozjpeg<br>(cjpeg) |
|:-:|:-:|:-:|
| 84  | 19.498s | 0.073s |
| 90  | 22.506s | 0.079s |
| 95  | 29.476s | 0.111s |
| 100 | 44.614s | 0.214s |

Guetzli 時間かかりすぎワロタ。

### ファイルサイズ
| quality | Guetzli | mozjpeg<br>(cjpeg) |
|:-:|:-:|:-:|
| 84  | 50071<br>17.7% | 49451<br>17.5% |
| 90  | 60965<br>21.6% | 60599<br>21.5% |
| 95  | 91629<br>32.5% | 80572<br>28.6% |
| 100 | 223908<br>79.3% | 173504<br>61.5% |

Guetzli 軒並み負けてて草。

### 品質
コメントで指摘があるが、品質の比較はファイルサイズでやらないとナンセンスかもしれない。ファイルサイズ揃えるのだるいんでまだ未対応。
#### AE
| quality | Guetzli | mozjpeg<br>(cjpeg) |
|:-:|:-:|:-:|
| 84  | 248724 | 246865 |
| 90  | 244907 | 242166 |
| 95  | 234535 | 235457 |
| 100 | 120435 | 179307 |

ImageMagick の compare で AE で比較。異なるピクセル数。少ない方が~~品質が高い。~~オリジナルとの差異が少ない。
quality 90 以下で200倍時間かけてる Guetzli が負けてて草も生えない。

#### butteraugli
| quality | Guetzli | mozjpeg<br>(cjpeg) |
|:-:|:-:|:-:|
| 84  | 1.944450 | 2.432503 |
| 90  | 1.473460 | 1.867565 |
| 95  | 0.971432 | 1.363530 |
| 100 | 0.211575 | 0.756934 |
Google 製の心理視覚を比較するツール [butteraugli](http://qiita.com/bezeklik/items/28b03647687a57de97fb) で比較。同一画像で 0 スコアとなるようだ。
butteraugli 自体の妥当性がどの程度なのかさっぱり分からないが、butteraugli のスコアに最適化されているというだけあって Guetzli の方が数値が良い。

## この記事に対する反応

<blockquote class="twitter-tweet" data-cards="hidden" data-lang="ja"><p lang="ja" dir="ltr">誤解されてるのでコメント書いた <a href="https://t.co/YfVR7WeQrb">https://t.co/YfVR7WeQrb</a></p>&mdash; Ryo Suzuki (@Reputeless) <a href="https://twitter.com/Reputeless/status/843237567554179072">2017年3月18日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

[Siv3D](http://play-siv3d.hateblo.jp/) というゲームとメディアアートのための C++ ライブラリを開発している未踏スパクリ(2013年度)の人が[コメント](#comment-11e60bde1ea31681483a)で butteraugli を紹介してくれた。ありがたい。

品質評価手法の見直しを提案されたので、紹介された butteraugli を使って比較したデータを「品質」の項目に「butteraugli」を追加した。

なお、書いた当人としては特に誤解はしていない（AEによる比較が絶対的に妥当な品質評価基準だとは思っていない）が、多少バズっているので表現を修正した。

> 画像の品質とファイルサイズについて、[butteraugli](https://github.com/google/butteraugli)を用いてlibjpegと結果を比較したところ、同等のスコア(品質)でもファイルサイズを35％減らすことができたそうです。

そもそもの話として、2017年1月13日の GIGAZINE の記事 [^2] にリンク付きで記載されてた。が、この記事だといずれにしろスルーしてしまう。

<blockquote class="twitter-tweet" data-cards="hidden" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://t.co/WHEvBQAUAU">https://t.co/WHEvBQAUAU</a> 朝っぱらから切れそうになったのでコメントした</p>&mdash; yoh (@yohhoy) <a href="https://twitter.com/yohhoy/status/843280892902563840">2017年3月19日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

お、人に仕事させるのうまいな、見習いたい。と思い、とりあえずリツイートしといたら、よくわからないが切れそうになって[コメント](#comment-8297d7dec70696f3c01a)してくれた。尊い。

<blockquote class="twitter-tweet" data-cards="hidden" data-lang="ja"><p lang="ja" dir="ltr">コメントも見たが、違う評価手法のために試行錯誤して時間がかかっているというなら、用途は限られるかもしれないな。画像が参照される頻度にもよるが、計算量もコストだろうし。 / “Google製JPEGエンコーダー「Guetzli」 …” <a href="https://t.co/Z4muo73Neg">https://t.co/Z4muo73Neg</a></p>&mdash; mohno (@mohno) <a href="https://twitter.com/mohno/status/843314627425394688">2017年3月19日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

画像処理の専門家とかでなければ、この辺がごく常識的な理解と評価だろう。

<blockquote class="twitter-tweet" data-conversation="none" data-cards="hidden" data-lang="ja"><p lang="ja" dir="ltr">あと評価方法について。Qiitaのこの人のコメントが正しいと思う。<a href="https://t.co/DXZTT9ifEy">https://t.co/DXZTT9ifEy</a></p>&mdash; Ichinose Shogo (@shogo82148) <a href="https://twitter.com/shogo82148/status/843355551555710976">2017年3月19日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

評価方法が「正しくない」という指摘があるので、「品質」の項目で AE を採用した理由を書いておこう。

ぱっとググった範囲では、JPEGエンコーダーの紹介記事で品質の比較を実施している記事は見当たらなかったので、数値による客観的あるいは機械的な比較がしたかった。数字棒。

AE が本当の意味での品質を評価するのに十分であるとは言えないということは最初から理解していたが、品質とはすなわち人間が実際に見て劣化がひどく感じるかどうかであり、Guetzli では quality は 84 までしか下げられず、違いがぱっと見分からない時点でより妥当な評価手法を~~ゼロから探すコストを掛ける意味はない~~見つけても処理速度を200倍かけるだけのメリットを覆すことはできないと判断した結果である。

AE が評価基準として一番当てにならない、というのについては、単にそれ以外の評価方法についての妥当性について判断する知見を持ち合わせていなかったためである。

思ったよりバズって情報提供とマサカリが飛んできたから、とりあえず [butteraugli](http://qiita.com/bezeklik/items/28b03647687a57de97fb) のインストール手順まとめといたよ。

<blockquote class="twitter-tweet" data-cards="hidden" data-lang="ja"><p lang="ja" dir="ltr">雑な批判Qiitaを書いたらコメントで丁寧にフルボッコにされたでござる。 / “Google製JPEGエンコーダー「Guetzli」 - Qiita” <a href="https://t.co/SzBxLb2QhF">https://t.co/SzBxLb2QhF</a></p>&mdash; 鳥頭のフレンズ௵ (@b_a_a_d_o) <a href="https://twitter.com/b_a_a_d_o/status/843412239935651840">2017年3月19日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

雑な批判ツイートをもらったでござる。

<blockquote class="twitter-tweet" data-cards="hidden" data-lang="ja"><p lang="ja" dir="ltr">Google製JPEGエンコーダー「Guetzli」 by <a href="https://twitter.com/BezeklikTecnica">@BezeklikTecnica</a> on <a href="https://twitter.com/Qiita">@Qiita</a> <a href="https://t.co/1ZOCKIy0N2">https://t.co/1ZOCKIy0N2</a><br><br>で、なんで画像処理の比較でスクショ貼らないんだこいつは？<br>Doom9あたりだったら荒らし扱いでスレストだぞ</p>&mdash; Chikuzen (@mtfmk) <a href="https://twitter.com/mtfmk/status/843571781667446784">2017年3月19日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

で、なんで自分で試してコメント欄に画像を貼らないんだこいつは？

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">比較用画像が追加されたそうなのでもう一度見に行ってみた<br>とりあえずどっちがどっちだかよくわかない<br>ついでにいえば、libjpegとどれぐらいちがうのかもよくわかない<a href="https://t.co/7u3yqlWy9s">https://t.co/7u3yqlWy9s</a></p>&mdash; Chikuzen (@mtfmk) <a href="https://twitter.com/mtfmk/status/843836464504827904">2017年3月20日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

煽り返したら仕事してくれたみたい。

<blockquote class="hatena-bookmark-comment"><ul class="comment-tag" style="list-style: none; margin: 0px;"><li style="float: left">[<a href="http://b.hatena.ne.jp/search/tag?q=!%E3%82%A8%E3%83%B3%E3%83%88%E3%83%AA%E3%83%BC">!エントリー</a>]</li><li style="float: left">[<a href="http://b.hatena.ne.jp/search/tag?q=%E5%9C%A7%E7%B8%AE">圧縮</a>]</li><li style="float: left">[<a href="http://b.hatena.ne.jp/search/tag?q=%E3%81%93%E3%82%8C%E3%81%AF%E3%81%B2%E3%81%A9%E3%81%84">これはひどい</a>]</li></ul><br><p style="clear: left">画像圧縮の比較で一番簡単な方法は、両者が同じサイズになるようにパラメータ調節したものを見た目で比較すればいい。</p><a class="datetime" href="http://b.hatena.ne.jp/sea_side/20170319#bookmark-327711596"><span class="datetime-body">2017/03/19 12:46</span></a></blockquote>

今回試した小さい画像じゃ数値がそろわなかったから大きい画像探して後で試すわ。「これはひどい」タグはひどい。

<blockquote class="hatena-bookmark-comment"><p style="clear: left">そうか、コメント読め、というエントリーだったんだな。そりゃ、そこまで時間かける理由があるんだからなぁ。実際の画像見て比べたいところ。</p><a class="datetime" href="http://b.hatena.ne.jp/ttysumi/20170319#bookmark-327711596"><span class="datetime-body">2017/03/19 13:23</span></a></blockquote>

だよね。200倍時間をかけた画像がこちらです。どちらがどちらかは一目瞭然ですよね。

（03/21 14:07追記）面目ない、[コメント](#comment-9d3f561f60c4ed249be6)で指摘があったが、Qiita の編集画面でそのままアップしたためか処理されている様子。後ほど別の場所に上げて直します。

（03/21 15:42追記）Qiita の処理が入らない形で再アップ。ごめんなさいごめんなさい。でもあれか、Qiita の再圧縮が入ってた方がアラが分かりやすくなって逆によかった？
ちなみに Guetzli は quality が 84 までしか下げられないのでそちらに合わせた。mozjpeg は quality を 84.5 にしたらファイルサイズが近くなった。順番は変えてない。
というわけで今度のファイルサイズは Guetzli が quality 84 で 50,071 バイト、 mozjpeg が quality 84.5 で 50,002 バイト。
答えは alt 属性に書いてあるから、まずは alt を見ずにどちらがどちらか当ててみよう。

![lena_mozjpeg_0845.jpg](http://p80.jp/guetzli/lena_a.jpg)![lena_guetzli_084.jpg](http://p80.jp/guetzli/lena_b.jpg)

以下はオリジナルの lena.tif を PNG にした奴。
![lena.png](http://p80.jp/guetzli/lena.png)

<blockquote class="hatena-bookmark-comment"><p style="clear: left">考えず見ちゃうとgoogleだめじゃんpgrってなる。コメ欄(違う視点から)も見ろ。人は簡単に勘違いする。という戒めブクマ→Qiitaでコメント返しされてて和んだw</p><a class="datetime" href="http://b.hatena.ne.jp/koji28/20170319#bookmark-327711596"><span class="datetime-body">2017/03/19 14:33</span></a></blockquote>

おっ、そうだな。／（´∀`）

<blockquote class="hatena-bookmark-comment"><p style="clear: left">勉強になる記事。投稿者もどういう観点で比較したかわかるデータをちゃんと載せてて信頼できる。元の主張がしっかりしてるからこそ内容のある議論ができる。／この記事で比較画像乗せるのは蛇足に思う。観点がぶれる</p><a class="datetime" href="http://b.hatena.ne.jp/hiro_curry/20170319#bookmark-327711596"><span class="datetime-body">2017/03/19 18:29</span></a></blockquote>

こういうまともな人がいると、少し安心する。／なるほど数値で比較してんのに主観の入る画像比較は蛇足と。確かに比較画像を当初マストで掲載しなかったのはそういうのもあったのかも。ただ「目視で比較して品質に差異を感じなかった」という大前提があって、それは読者は記事では確認出来なかったのでやはり載せるのは仕方ないかな的な。

<blockquote class="hatena-bookmark-comment"><p style="clear: left">バイナリ落としてエンコ時間とサイズ見てGoogle使えねーと思った自分としては、これらのコメントを引き出した投稿主を褒めることしかできない / おぉ更新されてて勉強になる素晴ら</p><a class="datetime" href="http://b.hatena.ne.jp/mofigan/20170319#bookmark-327711596"><span class="datetime-body">2017/03/19 19:31</span></a></blockquote>

おま俺。／╭( ・ㅂ・)و ̑̑ ｸﾞｯ !

<blockquote class="hatena-bookmark-comment"><p style="clear: left">数字棒</p><a class="datetime" href="http://b.hatena.ne.jp/hiroomi/20170319#bookmark-327711596"><span class="datetime-body">2017/03/19 22:45</span></a></blockquote>

数字棒。

<blockquote class="hatena-bookmark-comment"><p style="clear: left">人間の知覚で劣化が分かりにくくなることを狙ってるのに、画像を見て比較してないのはちょっと……。</p><a class="datetime" href="http://b.hatena.ne.jp/yorkfield/20170320#bookmark-327711596"><span class="datetime-body">2017/03/20 03:16</span></a></blockquote>

アップすんの遅くなってごめんね。消しちゃった線画のアニメーションGIF作ったところで力尽きちゃったの。


## 参照