No Regrets in Bathing

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

GanttPadをリリースしました

スケジュール管理下手だよなーと思って自分用にスケジュール管理Webアプリを作って使っていたのですが、 割と手軽で便利だと思ったので、見た目を整えてベータリリースしました。

https://ganttpad.app/

www.youtube.com

コンセプト

「紙の次に使うひとり用プロジェクトノート」です。

今しっかりタスク管理ができている人は、そもそもGitHub ProjectだのNotionだのを愛用されているかと思います。

私はそれらのツールにことごとく挫折しています。 それらのツールでタスクを作ると、タスク完了まで面倒を見るというタスクが生まれてしまうわけで、少し放っておいたりすると現状と乖離してしまい、更新する気がなくなってしまう、ということがよく起きていました。

そういう風にタスクをトラックしていく感じのツールって、タスク管理がもともと得意な人向けに作られてるんじゃないかなと思っています。 ズボラには向いていないわけです。

そうなると結局ただの紙にタスクリストと線表を手書きするのが向いてるんですよね。 でもまあ、キーボードで書きたいかなとも思うのでアプリにしました。

バランス的には、メモ帳に毛が生えた程度の、しかし時間を扱うUIだけを乗っけたツールを目指しました。

Markdownエディタ的に二分割画面にしてます

今月を乗り切るためのタスク管理

ズボラにとって、タスク管理を急に始めるタイミングというのはすでに炎上しかかっているときなので、 その炎上さえ乗り切れればそれでいいわけです。

つまり：

  • タスク管理は書き捨てでよい
  • スコープは数週間から２ヶ月程度
  • 個人用（たいてい自分だけがピンチになっているので）
  • 線表は「この通りにやれればなんとかなるかも…」という気持ちで引く

ガントのリンクとか営業日設定機能とか一切ありません。ごめんね

極力プレーンテキストでやる

GUIでスケジュール管理するの便利なんだけど、結局メモ帳に下記のように書いたって別に管理できるよねって話はあるわけです。

6/1 - 6/8 仕様検討
6/7 - 6/18 実装
6/19 - 6/26 テスト
6/27 リリース

これはコピペでメールやSlackに添付できるという可搬性も持っているわけです。

そういうわけでGanttPadも中身はテキスト（CSVライクな何か）にしてあります。

データ構造,2024-05-20,2024-06-14
TDD,2024-05-20,2024-06-14
状態管理,2024-07-01,2024-07-05

全置換、スクリプト処理などもできますし、エクスポートはコピペで一発です。

迫真のタイムカード打刻機能

いらない機能かもしれないですが、自分は何時間作業したのかログを取りたかったので タイムカードっぽいUIを作り込みました。

押すとガシャコン！と効果音も鳴ります。

そんなのスマホとかwakatimeでも良さそうですが、自分はイラスト作業とかも多いので手作業でやるしかないなとなりました。

実際にこういう見た目のタイムカードを使っていました。割と好き

ドッグフーディング中

プログラマーとして、全然自分が作ったものを使えていないよなというのがちょっとコンプレックスになっていました。

ただ、これは今のところ結構使っていて、しかも今まで自分が作ったツールの中で一番便利じゃない？とまで思っています。このままできる限りドッグフーディングを続けたいです。

今のところこのツールでマネタイズできるビジョンが見えてないので、なるべく低コストで財布へのダメージを抑えながら運用し続ける、を目標にしています。 バックエンドはDeno Deploy, UIはVue.js + Vite, エディタ部分にMonaco editorを使っています。他のUIはおじさんの手作りとなっております。

使ってみてね

というわけで、至らない点もたくさんあるツールだと思うのですが、 よかったら使ってみて、感想をTwitterまでお寄せください。

Denoくんの描き方

Deno 絵

Deno Advent Calendar 2022の４日目です！

Calendar for Deno | Advent Calendar 2022 - Qiita

Denoくん絵描き歌を見ながら描く手もありますが…

Denoくん えかきうた - No Regrets in Bathing

いつもどんなことを考えながらDenoくんを描いているか書きます。

まずはこんな感じで、顔を楕円、背中からしっぽに至るカーブをなるべくなめらかに描きます。 使っているツールはConcepts.appというベクター系のツールです。WindowsでもiPadでも使えるところが便利です。

変なものに見えないように注意が必要なので、割りと本気で結構悩んでいます。 最近は緑のDenoくんを描くことが多いですが、その辺の理由もあったりします…。

接地面を考えながら足を４本生やします。

投げ縄ツールで先に塗ってしまいます。

その後、スクショをFigmaに貼り込んでトレスします。

アンカーポイントの置き方はこんな感じで最低限にします。

どんな絵柄にするかはその時々の用途次第ですが、 とりあえず背景に色がつく想定で描きます。

手足や顎など、重なるところに線を足していきます。

こういう感じで全周に線を足す表現もなしではないのですが、 絵として重い感じになりがちなので、よほどパッキリ見せたかったり、 背景色が変わる想定（ダークモード対応など）以外では避けています。

完成です！

Denoくんの体型はブロントサウルスなどの草食竜と、小型の爬虫類やゾウなどを参考にデザインしています。 （ブロントサウルスそのままにしない理由は、足がゴツいからです…）

同僚のLeoに3Dフィギュアを作ってもらったことがあるのですが、その用途で一度三面図を起こしています。

最近だと、人間のように二本足で立ってるDenoくんをリクエストされることが多いのですが、 立っている恐竜は結構難しくて、どうやってバランスを取るかまだ試行錯誤中というところです。

結構長いことDenoくんを描いてきましたが、まだまだ改善したいかなあと思っています！

自動勉強会を休止した

f:id:hashrock:20211215001808p:plain

今年9月からやっていた複雑GUI会の自動勉強会を一旦終わりにしました。

※自動勉強会とはネタと開催日が勝手に決まる勉強会開催システムのこと。詳細は下記参照。

hashrock.hatenablog.com

休止の理由は、毎年12月は不思議と仕事が炎上するので、予防的に止めておいたという感じです。 で、無事に仕事が炎上しているのでよかったよかった。助けて…

２週間に一度のペースで勉強会を行っていたのもあり、地道な活動が苦手なタイプとしては、開催頻度に濃淡がほしいかなという気持ちもありました。 自動勉強会の雰囲気は部室でのダベリに近い感じなので、定期的に続けることに意義もありそうなんですが、まあちょっと何が正解とかはわかんないですね。

LookDev自動勉強会

f:id:hashrock:20211215000557p:plain

他の自動勉強会も可能な限り参加していました。bakuさんのLookDev自動勉強会 は引き続き隔週開催しています。映像・グラフィック・CGI版の勉強会なんですがbakuさんのネタの多さがすごくて、この人は制作面もすごいのにどれだけアンテナを広く張っているんだろう、と驚くばかりでした。参加者の方も映像作家の方が多いと思うんですが、数学に詳しかったりGANに詳しかったりとこの人達は一体何なんだ（プロです）という感想です。素人としてはただただ圧倒されて話も半分以上わからないんですけど、開催中は画面共有で面白い映像が流れているのでわからないなりに視覚で満足感を得ることができていました。

Glyphs自動勉強会

f:id:hashrock:20211215001305p:plain

WolphtypeさんのGlyphs自動勉強会は月イチ開催で引き続き開催中です。これはGlyphsというフォントデザインツールがあるんですがそのコミュニティがベースになっています。Wolphtypeさんはコミュニティ代表として会をガンガン引っ張りつつYouTube配信も行うなど自動勉強会を最もしっかりした仕組みで実施されていました。TypeCooker JPというツールも作られていたり多方面で行動力がすごい方です。Glyphsというツールを普及させるための活動とのことなんですが必ず実を結ぶだろうと思っています（私もインストールしました）。

Glyphs自動勉強会はWolphtypeさんを含めプロの書体デザイナーさんが参加されていて、普段は接点がないようなプロフェッショナルの話を聞くことができました。特に大曲さんという方の話がめちゃくちゃおもしろかったですね。ベジェのハンドルはこの位置にするとうまく行くはずみたいに言ってて、職人だ…！って感じでした。あとツールに付随したコミュニティだから専門的な内容になるかと思いきや、不思議とGUIやLookDevにつながってくるような話がなされてるんですよね。全部ベクターグラフィックスを扱うという点が大きそうですが。

bakuさん、wolphtypeさんと主催者間で情報共有通話をすることが２回ほどありました。思ったよりファシリテーションしんどいよね…とか、準備が大変だとか、聞き専っぽい人に話を振っていいのか迷う、とかそんな話をしていました。自動勉強会は主催者がめちゃくちゃ楽で何もせずとも会が開催されるというのが理想なんですが、現実はまあまあしんどいじゃんみたいなのはありましたね…。この辺は会へのスタンスで結構変わってきそうだなあと思ってました（bakuさんは開催5分前まで風呂入ってましたとか言ってたのでいい感じにラフな開催をしてたと思います）。

複雑GUI会の生い立ち

複雑GUI会はもともと、プログラマーの勉強会の懇親会とかでなかなかGUIの話ができないというフラストレーションがモチベーションになっていました。設計の話とか環境構築とかチームビルディングの話とかは頻出なんですがGUIの話ってあんまりされなくないですか？ReactやVueはGUIを作るためのライブラリだと思うんですがなぜ…。いずれにせよ私は懇親会で輪に入る勇気がなくピザを片手にウロウロする人間なので話題のせいにするのもおかしいんですけど。GUIの話は実装に終始しちゃうからかなあ。ピザの件は今後解決したいと思っているのでピンと来た方はお声がけください。

話がそれましたが、そうして立ち上がった複雑GUI会は、GUIの話だけが語られるレアな場になりました。ペイントツールを作る技術オンリーの回、アンドゥの話だけをする回、共同編集の回など、そういうトピックだけで語られることって多分なかったと思います。

例えばペイントツール回では1bitpaintのminordaimyoさんの話が面白かったですね。例えばお絵かきツールを作るのにA3の600dpiのキャンバスを作ってて～とか普通に言ってるのが衝撃的でした。Webの常識だとそんなサイズのcanvasは作れるわけないんですよね。他にもいろんな話がありましたが全部Scrapboxにログとして残っています。こうやって書いてると最高の会じゃんとはなりますね。

自分のために会を開く

ここ数年で思ったことは「なんでこの話題が語られてないんだろう」と思ったら、自ら会を開くしかないんだなということです。会の開催…完全にしんどいことの一つなんですが、そのしんどさゆえに、誰も話そうよ、と言い出してないことも結構あるんだろうと思います。自動勉強会とかDiscordとか、そのしんどさを低減するシステムが育つ余地がまだありそうだなと思っています。

自動勉強会は合計7回開催しました。自分は正直実装力が高くないので、全編に渡って参加者に頼りっぱなしだったなあという気持ちです。とはいえ実装を理解している人って、何のことを話せばいいかわからないけど質問があれば答えますというスタンスの人が多い気がします。本人にとっては自明なんですね。なので自動勉強会スタイルの場合は、何もわからない人が引っ張っていく形もアリなんだなあという気づきがありました。

ただ、開催中はマジで手応え的なものが全くわからないです。終わったあとにやっぱ最高だったなという気持ちになってくるんですよね。まあまた来年あたり勉強会欲に火がついて開催していることでしょう。その時は、また皆さんに参加してもらえたら嬉しいなと思っています。

自動勉強会をやっている

コミュニティ

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

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

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

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

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