No Regrets in Bathing

カレーを週に一度食っていく

地獄のCSSアニメーションフレームワークを作った

今年もイブがやってきました。特にやることもないので 毎年 何かしら 作っています。

今回は「シュッ、クルッ、ピョン、フワッ…」みたいに書くとアニメーションになるというアイデアを温めていたので、それを作りました。

動いているところは動画から見てください。直感的としか言いようがないと思います。

「直感的イコール素晴らしい」とは限らない、ということがよくわかります。

最近CSSフレームワークのTailwindを触っていて、インスピレーションを受けています。

Tailwindは大量のクラスをプログラムから生成する仕組みで、巨大なCSSが生成される代わりに色々な恩恵を受けることができます。 プロダクション時にはpurgeCSSというツールを内部的に使って、Viewで利用しているCSSクラス以外を削除する仕組みです。 最初はなかなか富豪的な仕組みだなぁと驚きました。

で、今回のkanawindはプログラムから大量のクラスを生成するというところだけを真似しています。 アニメーション用のクラスは総当りで生成され、CSSのサイズは地獄の6.8MBです。

6.8MBも何が詰まってるのかというと、こういうやつが12万行くらい書かれています。

...
.パッフワックルッ←シュッ{
    animation:
        パッ 0.25s ease-in 0s forwards,フワッ 0.25s ease-in 0.25s forwards,クルッ 0.25s ease-in 0.5s forwards,←シュッ 0.25s ease-in 0.75s forwards;
}
.パッフワックルッ↓シュッ{
    animation:
        パッ 0.25s ease-in 0s forwards,フワッ 0.25s ease-in 0.25s forwards,クルッ 0.25s ease-in 0.5s forwards,↓シュッ 0.25s ease-in 0.75s forwards;
}
.パッフワックルックルッ{
    animation:
        パッ 0.25s ease-in 0s forwards,フワッ 0.25s ease-in 0.25s forwards,クルッ 0.25s ease-in 0.5s forwards,クルッ 0.25s ease-in 0.75s forwards;
}
.パッフワックルッストン{
    animation:
        パッ 0.25s ease-in 0s forwards,フワッ 0.25s ease-in 0.25s forwards,クルッ 0.25s ease-in 0.5s forwards,ストン 0.25s ease-in 0.75s forwards;
}
...

誰も使わないとは思いますが、purgeCSSを通せば1mmくらいは実用になってしまう可能性があります。いろんなアプローチがあるものですね。

github.com

その他のおもしろ自作アニメーションフレームワークは下記の記事もどうぞ。自分も含め誰も使ってない。

hashrock.hatenablog.com

Deno素材集

こちらはDeno Advent Calendar ２日目の記事です。

去年は絵描き歌をやりましたが、あまり時間がなかったので小ネタです。

経緯

deno用に書かれたライブラリやBlog記事を眺めていると、たまにdeno v1のイラストとかdenoland Organizationのロゴとかをコラージュしているものを見つけることがあります。

MITなのでもちろんコラージュ自体は問題ないんですが、それなら自分の作ったものに関しては素材化してしまえば便利か？と思い、Figmaでちまちまと作りためています。

というわけで素材

f:id:hashrock:20201201124026p:plain

www.figma.com

改変やコピー自由です。

「金曜GUI」という活動をやっていた

JavaScript Deno SVG Vue.js コミュニティ

今年２月から「金曜になにかGUIを一つ作る」というフロントエンド素振り活動をしていたのだけど、最近あんまりやらなくなってしまったため、一旦成果物をまとめる。

発端

今年２月末の金曜日のこと。

ちょうど自粛ムードが広がりはじめた頃で街に活気がなく、微妙に暗い気分が広がっていた。

そういえば今日プレミアムフライデーだったなーとか思い出し、 明るいことの一つもあればいいのにと考えながら、とぼとぼ帰っていた。

「こういう時って自分から動き出すと気分が晴れたりするよなぁ。GUI作ってたら気分が晴れるんじゃないだろうか」

と考えるに至り、突発的に下記のツイートをした。

で、おもむろにGUIを制作している様子を配信し始めた。

説明もなく突然GUI制作風景を配信し始めるという意味不明な行動を始めたんだけど、 反応がなかったら静かにツイ消ししようかなーと思っていた。

miyaokaさん参戦

そこで嬉しいことに、企画意図を察したのかmiyaokaさんが乗ってきてくれた。

miyaokaさんはカオスな企画に対する理解力がすごい。混沌耐性持ちなんだと思う。

配信に使っていたpixiv Sketchでは画面共有と音声チャットが可能だったので、miyaokaさんと話しながら CodePen上でライブコーディングを進めた。

成果物

初日はチェックボックスを作った。連打してもこっそり戻るチェックボックス。

miyaokaさんはトイレットペーパーを引き出すGUIを作った。

これはインパクトすごくて爆伸びした（なおこの頃トイレットペーパーの買い占めが起きていた。GUIも世の中もクレージーだった）

この活動はやったりやらなかったりしながら半年ぐらい続いた。

以下、代表作です。

かっこよくアニメーションするカレンダー

縦型カレンダーと月間カレンダーって、7日単位で折り返してるか1日単位で折り返してるかの 違いでしかないなぁと考え、じゃあトランジションかけられるよねと思って作ったもの。

この考え方は別の日に図示したものがある。

遊べるラジオボタン

香川県のゲーム条例が話題になっていた頃に作ったもの。

ゴルフゲーム的な感じで遊べるようにした。香川の子どもがあんまりゲーム遊べなくてかわいそうだから、 GUIで遊べればいいのでは？と思って作った。

ドット絵チャット

16 x 16pxのドット絵で作った絵文字で喋れるチャット。他人の作った文字を自分も使えるのが肝。

絵文字文化ってかなり国際交流に貢献していると思っていて、絵文字しか使えないチャットがあったらどうだろうと思って作った。 あとは「文字をコミュニティ内で発明する」のは面白いのではと思った（slackの絵文字文化って結構それだなと思う）。

最終的にはこれだとコミュニケーションはつらいねというオチになった。

動くDenoくんのSVG

このブログでも度々登場してるDenoくんなんだけど、ICSのゆきさんがよくやってる関節アニメーションで動かしたら面白いんじゃないかなと思って、練習としてやってみた。

ツイートにも書いてるけど、小学生の頃工作でこういうの作ったわーというのをめっちゃ思い出した。

f:id:hashrock:20201002215347p:plain

こういう感じで、最近はちょっと難し目のSVGはFigmaで作ってエクスポートして作っている。パーツごとにCopy as SVGとかできて便利。

最終的な完成品。

これはちょっと続きがあって、当時DenoのAPIドキュメントサイトであるdeno_docを作っていた lcasdev の目に止まったらしくリプライがきた。

deno_doc のローディングが結構長いから、ローディングアニメーションに使いたいとのことだった。これは嬉しかったので、SVG + CSSアニメーションに書き換えてVue依存を外した上で取り込んでもらった。

最終的に deno_doc はDeno公式に取り込まれることになった。下記からまだアニメーションを見ることができる。

doc.deno.land

Denoと関わってると何故か熱い展開になることが多い。

CSS豆本

Meguro.CSSのNakayaさんから教わった、CSSで3Dをやるテクをやってみたいなと思って作ったもの。

これは結構スムーズに実装できたので、せっかくなのでDEV.toに怪しい英語で解説記事を書いた。

dev.to

他の作品

miyaokaさんのプルダウン小説とかも面白かった。

他の作品は「#金曜GUI」タグを眺めてもらえればと思います。

金曜以外にもやることがあり「#GUI活」というタグもあります。

あとから参加してきてくれた、nekobatoさんやyymmさんの作品もあります。

まとめ

やっぱりGUIをスクラッチで作るの楽しいなぁと思った。かなりの三日坊主なんだけど、これは割と続いてよかった。

半年やってみて別に実装力が上がったとは思わないんだけど、 意味わからん要件来てもまあ時間かければ作れるだろみたいな根拠のない自信はついたかもしれない。

「#金曜GUI」 は勝手にやっていいやつなので、皆さんもぜひGUIを作ってみてください。

2020/10/05追記

miyaokaさんがアンサーブログを書いてくれました。miyaokaさんの成果物について掘り下げた文章が読めるのでぜひ読んでみてください。

note.com

Deno 1.0リリース記念イラストを描きました

Deno TypeScript コミュニティ 絵

2020/5/14に無事 Deno 1.0 が発表となりました。

公式ブログの記事にマスコットのイラストがあるのですが…

Deno公式サイト

こちらを描かせていただきました。なんだってー

経緯

マスコットキャラの「Denoくん」（公式名称不明）が可愛いので、以前から何度となく描いてきて、 しまいには謎の絵描き歌を作ったりしていました。

その中で作者のRyanと関わりが生まれ、アニメーションロゴを採用してもらったこともありました。

hashrock.hatenablog.com

結果として今回の話につながった感じです。

依頼は今年１月に受けていました。 私のようなアマチュアではなく、プロに頼んだほうがきっと早くて質の高いものができると思うんですが、

「こちとらDenoのいちユーザでもあり技術的な側面も分かっているんじゃい」

という自負もあり引き受けました。 イラストにプロダクトの信念みたいなものが込められていれば成功ですが、どうでしょうね。

こんな感じで作っていきました

ボドゲのパッケージイラストを担当したときは、 細かくラフのパターンを作って要望を引き出しつつ進めていったのですが、今回もそのパターンを踏襲しました。

雨をドラマチックな表現にしたかったので、星の王子さま的な小さい惑星にしてみたパターン

Deno v1.0が「Ship（出荷）」されるのと「船出」をかけて船に乗ったDenoくんを描いたパターン（なおRyanには「なんでボートなの？」と言われた。こういう小舟はShipじゃなくてBoatと呼ぶことをその時認識した）

絵には「夜の雨の中に立っているDenoくん」という指定をもらっていました。これは絵的には暗くなりがちでなかなか厳しい題材です。 ただしRyanのエンジニアリングへのタフな思想が現れていて確かにこの要素を落とすわけにはいかないので、表現に苦心しました。

Procreateで描きましたが、このツールはよくできていて、自動で描画の途中経過を記録してくれます。 下記のようなタイムラプス映像も作ることができます。

公開されて

色々な反応を頂いています。

「Denoのことはよく知らないけどキャラクターがかわいいから興味が出た」

なんて方もいて、ともかくイラストの機能は果たせているのではないかなと思います（Ryanのキャラデザインの力ですが）。

プログラミング言語とかランタイムとか言った場合に、プログラマー以外に興味を持ってもらうことは難しいですが、マスコットはそういった敷居を溶かすような働きもあるんだと思います。

Denoはランタイムなので、いろんなバックグラウンドを持つ人にこそ興味を持ってほしいという気持ちがあります。 友達や家族で使う小さなWebサービスを作ってみたりだとかいった用途にDenoが選ばれるといいなと思います。

※最近denoのAPIドキュメントに取り込んでもらったローディングアニメーション

その他：DeepLは最高

今回、Ryanとメールでのやり取りをすることになったのですが、英語が苦手なのでGoogle翻訳を使いつつイラストを添えたりしてギリギリコミュニケーションを取っていました。

文面から、Ryanは本当にいい人だなと言うのは汲み取れてはいたのですが、 こっちもフレンドリーな表現で返事をしたいと思ってもできないことを歯がゆく思っていました。

そこへ来てDeepLが登場したのですが、気持ちが汲み取れる和訳をしてくれるので、 コミュニケーションの怖さがかなり軽減されました。

例えば「めっちゃすごい！お疲れ様」と思ったときに「こういうの英語でawesome workみたいに言う気がする」と思うのですが、 母語ではないのであまり自信がないわけです。

検証のためにDeepLに "awesome work" と入力すると

こうなるわけです（いいのか？という気はするけどニュアンスはあってる）。

何よりも、感情的かつポジティブな表現を文面に盛り込むことをセーブしなくて良くなったことが、とても嬉しい気持ちがあります。 私も結構な年ですが、まだこれからのインターネットに可能性を感じることができています。

「入門GUI」が発売されました

テクノロジー JavaScript Vue.js SVG

入門GUI表紙

techbookfest.org

GUIの薄い本です。「入門 監視」ばりに主語デカタイトルです。

著者は私と f_subalさん、daiizさん、miyaokaさんで、座談会パートにはKeima Kaiさんが参加しています。

内容は「ドラッグ＆ドロップを始めとする作るのがしんどいGUI」をいちから書いてみようよ、という感じです。

GUIコンポーネントの使い方についての本はよく見かけますが、コンポーネント自作についての本というのはなかなか珍しいんじゃないかと思います。

概ね下記のようなノリの、ゆかいなGUIの本として読んでもらえれば、と思います。

私はセレクトボックスを実装してみようという章を書いています。最終的になぜかリングコマンドになりました。

中でも、最後の座談会パートは好評です。STUDIOの二人が参加しているので、先にSTUDIOを触ってみるとより文脈がわかると思います。

サンプルページは下記ページにも置いてあります。

入門GUI - guiland

複雑GUIの会について

自作GUIの実装を持ち寄ってワイワイする会です。 名前からよく「Bad UI」に関するコミュニティと誤解されます。会の名前を変えればいいんですが、怪しげな雰囲気が気に入ったフシもあってそのままです。

どういうメンバーがいる会なのかは過去記事を参照してください。

hashrock.hatenablog.com

自由参加のSlackがあります。招待リンクは下記です。

Create Account | Slack

昔話

私がPCを使い始めた時期というのは、Windows95が発売されてGUIがご家庭に一気に普及したあたりでした（もちろんMacも人気がありました）。 FrontPageなどを始めとするオーサリングツールもどしどし登場し、素人でもできることがどんどん増えていくのは胸熱でした。

GUIを使うのが好きすぎて下記のような無の操作を延々とやっていたのを記憶しています。

プログラミングを始めた理由も、つまるところこういうGUIを作りたかったからです。 こういったUIを直接操作UIと呼びますが、まず実装するのが大変すぎるんですよね。 ライブラリもNPMにたくさん落ちてますが、思い通りの動きでなくて独自パッチを書いて泥沼に突入、というのも何度かやりました。

最近はタッチデバイスの普及もあってユーザ要求に直接操作UIが含まれることが増えてきていて、怯んでばかりはいられないというところです。

本書は直接操作UI実装に関しても多めに書かれていて、まず自分が一番読み返すんじゃないかなぁと思っています。

テキストでタイムラインアニメーションを作れるライブラリを作った

JavaScript

0----1----2--- みたいな形式のテキストでタイムラインアニメーションを作れるライブラリを作りました。

しゅうまいさんと「Webでタイムラインアニメーションを作るのがだるい」的な話をしていて、 AAみたいな発想で楽をできないかなと思ったのが発端になっています。

まずは下記のデモを見てください。

See the Pen TimelineDown Example by hashrock (@hashrock) on CodePen.

下記の文字列を渡すことで、４つの絵文字がそれぞれ個別のアニメーションをします。

const p1 = "--------0----1--2-------";
const p2 = "---------0----1--2------";
const p3 = "----------0----1--2-----";
const p4 = "---------------0----1--2";

上記文字列はFlashでいう「タイムラインUI」をアスキーアート的に表現したものです。

f:id:hashrock:20200104002929p:plain

（画像はAdobe Animate CC でフレームとキーフレームを使用する方法より引用。CC BY-NC-SA）

こういうタイムラインアニメーションを作るには、今どきだとAfterEffectsなどの専用ツールを使うわけですが、 テキストだけで作れるんであれば、エディタから離れずにタイミング調整ができるのでプログラマーは嬉しいわけです。

f:id:hashrock:20200104010451g:plain

中身はどうなっているかというと、定番アニメーションライブラリGSAPのTimelineMaxをラップしています。 テキストをパースしてTimelineを生成しているだけで実装はほぼすっからかんです。 できることや渡せるオプションはTimelineMaxとほぼ同じと考えてください。

使い方

下記のコードをインポートします。

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@hashrock/timelinedown@1.0.3/index.browser.js"></script>

使っているところは下記のような感じです。

// タイムラインを定義する。
// 文字一つが0.1秒を表す。「-」は休符のようなもの。
// 数字の文字に到達したら、後述のキーフレームによりアニメーションが起きる。
const str = "------------0----1--2";

// キーフレームを定義する。
// 配列の１つ目が「0」の文字にアサインされる。
// easeにはGSAPのイージング関数を指定することができる。
// （この場合はバウンドする）
const keyframes = [
  { x: 200 },
  { y: 200, ease: Bounce.easeOut },
  { opacity: 0 }
];

// セレクタ、タイムライン文字列、キーフレーム、オプションを順に渡す。
// この場合は「obj」というidの要素にアニメーションがかかる。
// オプションに `frameDuration` を渡すと、1フレームあたりの時間が設定できる（デフォルト0.1秒）。
// それ以外はTimelineMaxに準じる。
const tl = timelineDown("#obj", str, keyframes, {
  repeat: 99,
  frameDuration: 0.1
});

リポジトリ

github.com

実務で使ったわけではないので、実用になるかわかりませんが、気が向いたら自分でも使ってみます。

着想元

f:id:hashrock:20200104005406p:plain

CLIP STUDIOのアニメ機能で、各コマの対応レイヤを数字で指定するのが着想元になっています。 なんかワイルドなUIだなと最初思ったのですが、使っていくとこれが一番使いやすいし、コマの使いまわしができて効率的なんですよね。最近のイチオシUIでした。

更新（2020/01/05）

HTMLのdata属性経由でもアニメーションを設定できるようになりました。

See the Pen TimelineDown Example Attach by hashrock (@hashrock) on CodePen.

2019年に作ったDenoの絵とかアニメとか

Deno 絵 コミュニティ

今年を振り返っていたんですが、Deno関連のイラストやアニメばっかり作ってて震えました。

1月

https://cdn-ak.f.st-hatena.com/images/fotolife/h/hashrock/20190204/20190204032538.gif

これ作ってました。これが公式ロゴになるまでの経緯は下記に書いた通りです。

hashrock.hatenablog.com

kt3kさんにステッカーにしてもらったりと、色々と嬉しい出来事を呼んできてくれたロゴでした。人生、よくわからんですね。
MohoというFlash的なアニメーションエディタで作りました。

4月

https://cdn-ak.f.st-hatena.com/images/fotolife/h/hashrock/20190409/20190409010844.png

denobook01の表紙イラストを描いていました。

Denoの同人誌が出ます（2019/04/14 技術書典6） - No Regrets in Bathing

4コマも３本描きました。最終的に印刷したものがRyanの手元にあるのですが、日本語のままなので意味が伝わっているかは不明です。

https://cdn-ak.f.st-hatena.com/images/fotolife/h/hashrock/20190409/20190409012859.png

7月

夏あたりからDenoのパラパラアニメ等を作ってはTwitterにアップロードしていました。

f:id:hashrock:20191229144236g:plain

草食ってるdenoくんです。

RoughAnimatorというアプリを買ったばかりだったので、 練習として色々書いていった感じです。UIがこなれていない感はあるんですが普通に使いやすいです。

f:id:hashrock:20191229144308g:plain

ちょっとオシャレぶっているdenoくんです。

f:id:hashrock:20191229144452g:plain

タピってるdenoくん（この時期タピオカ飲み歩きというイベントがありました）

f:id:hashrock:20191229144656g:plain

denoland公式アニメロゴの更新版です。下記の要望に答えて雷が落ちるようにアップデートしています。

https://cdn-ak.f.st-hatena.com/images/fotolife/h/hashrock/20190204/20190204040103.png

今だと registry でまだ使ってもらっています。 人生で初めて Dark Mode 対応をする羽目になりました。Issue

f:id:hashrock:20191229145537g:plain

これはDoodleLensというARアニメ合成アプリを買ったので素材用に描いたやつです。下記のようになります。

iPhone用アプリなんですが、iPadで使うのはつらすぎました。使ったのはこれっきりです。

f:id:hashrock:20191229150140g:plain

これはChromeのオフライン時に出てくるゲームのキャラクターを deno に置き換えたやつです。下記URLから遊べるようにしてあります。

https://hashrock.github.io/deno-gifs/t-rex-runner/

T-Rex Runnerと言うものらしいです。Chromeのイースターエッグなので、Chromium内にコードが存在します。無論OSSですね。というわけで切り出したソースコードを改造して配ってる人が複数います。

f:id:hashrock:20191229150611p:plain

必要な部分のスプライトだけ書き換えています。

8月

f:id:hashrock:20191229150708g:plain

扇風機ですね。このとき普通に暑かったんだと思います。

f:id:hashrock:20191229150756g:plain

線香花火です。あんまり海外になさそうなものを選定して題材にしています。なにこれ？となったほうが面白いからです。

9月

https://cdn-ak.f.st-hatena.com/images/fotolife/h/hashrock/20190921/20190921155249.jpg

Denoの同人誌の２冊目が出ます（2019/09/22 技術書典7） - No Regrets in Bathing

denobook02の表紙を描きました。

この絵ですが、Bertがdotjsというイベントで使っていたみたいです。知らぬ間に海外デビュー…。 著作者としてはコアチームに使ってもらえるのは嬉しいことです。

Denoのグラレコ風説明画像を作りました。 denobook02販売を控えているタイミングで、denoにもう一度注目してもらうために執筆陣が色々試行錯誤していたんですが、その一環として作ったものです。

せっかくなので英訳版も作りました。Ryanの言っていることは動画から正確な言い回しで引用すべきだったなぁというのが心残りです。

11月

f:id:hashrock:20191229151942j:plain

ポケモンの流行に無理やり乗っかろうとしたやつです。

12月

www.youtube.com

そして、Deno絡みで最大のバズりとなってしまった「Denoくんえかきうた」です。ベジェカーブとかCSSという単語が刺さったらしく、あまりDenoやりそうにない人達に見てもらったみたいです。

Deno全く関係なくね、という罪悪感もありつつ、いろんな層にアプローチするのは良いことのような気もするし、まあいいかという感じです。

f:id:hashrock:20191229154529g:plain

鍋ですね。この絵はProcreate5が出たので試し書きという感じでした。

f:id:hashrock:20191229154601g:plain

クリスマス絵です。これはクリスタです。アニメは複雑なレイヤー管理を必要とするので、結局クリスタでやるのがいいかなぁと思っています。

まとめ

ひとえにRyanのDenoオリジナルデザインが良かったからですが、 Denoの知名度向上には多少寄与できたのではないかなと思います。

プログラマーとしての研鑽よりも、お絵かきが捗ってしまってるやんけ！とは思うのですが、 自分くらいしかやらないであろうことが出来たのは結果的に良かったのかなと。

裏側では、ポップな絵柄や描線を結構練習していました。 社会的にオッケーな絵柄を習得したため、リアルでも少しずつイラストを描くようになりました。

来年も適当にできたらと思います。