No Regrets in Bathing

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

自動勉強会をやっている

コミュニティ

生きていると「○○の勉強会があったらいいのにな～」とかぼやいてしまうのだけど、自分で主催はしたくないので言いっぱなしになるみたいなことが多い。

これはかなりみっともないと思っていて、それで最近「自動勉強会」というのを始めた。

自動勉強会の概要としてはこれだけ。

実際のキューは下記のような感じでみんなで積んでいって、興味がある項目に投票する。

f:id:hashrock:20210927212014p:plain

で、月イチくらいの頻度でオンライン勉強会を開催して、積まれたネタを上から消化していくという感じ。

このシステムは人間の意思に関係なく勉強会が開催されるので「自動勉強会」という名前になっている。地獄みたいなシステムなんだけど、参加人数が少なくておじゃんになるということが起きにくいという利点がある。また準備するものも少なく主催へのプレッシャーが最小限になるような仕組みになっている。

もともとは会社の有志と一緒にやっていてネタが切れるまで半年ぐらい続けてた。基本的には何も用意せず、投票した人たちが誰も詳しくないときはみんなで入門サイトを読むか～みたいな意識が低い会なのだけど、詳しい人がいたりするとめちゃくちゃ情報が得られることがあったりする。ガッツリした線形代数講座を作り込んで来てくれた後輩とかもいて今も感謝している。

自動勉強会の進め方

で、自動勉強会は完全な雑談にならないように一応目次を作ってから話すことにしている。目次はだいたい下記のような感じ。

f:id:hashrock:20210927213707p:plain

開催中にどんどん追記していくんでこういう感じに長くなっていく。

f:id:hashrock:20210927215609p:plain

第0回の開催ログ

この方式の利点としては、音声チャットが苦手な人とか参加できない状況にある人でも、共同メモにリアルタイムに書いていけばyoutubeのチャット欄みたいに話題に混ざることができるし、人が話している最中でも遠慮なく別の話題を先のツリーで話すことが可能だったりする。

自分とかは特に、数名で話が盛り上がっているところで口をはさむタイミングが分からなくて黙ってしまったり、勇気を出して口を開いたら誰かと話すタイミングがかぶって消え去りたくなってしまったりということが多いので…。自分向きのシステムってことですね。

で、開催したのだけど、オンライン勉強会特有の静けさには不安になりつつも、話が脱線してきたりすると結構盛り上がって、割とオフライン勉強会に近い雰囲気かも？と思ったりした。結局開催後の雑談タイムが盛り上がってしまうところもリアル勉強会と似てるけど…。まあなんか両方やることが重要なような気もする。

他の自動勉強会

開催後に興味を持ってくれたbakuさんがアート＆テクノロジーの自動勉強会を立ち上げてくれたり、書体デザイナーの安藤さんがフォントエディタGlyphsの自動勉強会を立ち上げてくれた。これはかなり嬉しかった。

自動勉強会はオンラインでは開催されたばかりで、自分のやり方が全然ベストということはないと思っている。むしろ自分の変なこだわりのせいでシンプルにできるはずが複雑になっちゃってるんじゃないだろうか。他のコミュニティでカスタマイズされていくことでもっと洗練されると思う。

今の所参加者が多めのことが多いけど、３人位しか集まらなくても全然楽しくできると思う。

あんま関係ないけど、よく家まで歩いてるときにrebuild.fmを聞くのだけど、それにもネタ帳なるものがあって結構似たスタイルだと思っている。 miyagawaさんとHakさんの回とかはネタ帳の量が多すぎるのと脱線するので最後必ず破綻するのがすごい好きで、自動勉強会も終わり際に同様に破綻するけど実は楽しんでたりする。

地獄の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.