複雑GUIの会を主催した
「GUIの雑談を無限にしたいなぁ」と思い、会を開催しました。
上記のイベントページを立てて、Twitter上で募集をかけたところ、 この内容だけでピンと来てしまったガチ勢が9人も集まりました。 ドローツールやマインドマップ、作曲ツール等を自作するフルスクラッチマンたちです。
予約したルノアールの会議室は過密状態になってしまいました。 （もう少し広い部屋にしておけば…と後悔しました）
（ルノアールです） #複雑GUI会 pic.twitter.com/XDGWs3EwZd
— みやおか (@miyaoka) May 2, 2019
職人タイプの方が多かったので終始和やかな雰囲気でしたが、 やはり実装に深入りしていくことが多く、あまりの情報密度に 私も話についていくのが大変だったと自白しておきます。
あと、なぜか開催前に「バウンディングボックス大会」が行われる雰囲気が醸成され、
「せっかくなのでバウンディングボックスの話を…」
という、今後人生で二度と聞くことがなさそうな言葉を聞けました。 バウンディングボックスとは、これです。
画：hykwtakuminさん
全体で４時間の会でしたが、自己紹介だけで２時間使いました。
ガントチャートを３つも作るなど異常な執着を見せるhashrock
ハイパーイラストという概念を提唱し、早くもSVG芸人の片鱗を見せているhykwtakuminさん
高機能バウンディングボックスで名乗りを上げ、見るからに実装がしんどそうなマインドマップツールを作ったrobokomyさん
バウンディングボックス中央に秘密のcircle要素を置くという秘技を教えてくれたf_subalさん（なぜなのかは本人に聞いてみてください）
ネイティブもWebGLもできて、ペイントツールとドローツールと3Dモデラーを一人（or 少人数）で作り、もはや個人でAdobeやってる感じのseanchas_tさん
Deno勢としてもおなじみだけれど、Canvas勢として「本物のバウンディングボックス」の実装を紹介してくれたkeroxpさん
ノーフレームワークでシンセもGUIもフルスクラッチの大作、作成中DAWを公開してくれたjinjorさん
ファンが激増しているScrapboxのスマホ向けテキスト選択UIや、SVG活用の最前線デモをしてくれたdaiizさん
最高レベルに空気を読むドラッグアンドドロップを実装、作成途中のゲームも公開してほしすぎるmiyaokaさん
圧倒的なバウンディングボックス力、フルスクラッチ力で圧巻のプレゼンをしたkeimakaiさん
濃いメンツが集まりました。
実際に自己紹介で使った資料は下記です。もうちょっと動画とかがあります。
実際の会の流れは、Twitterで「複雑GUI会」で検索すると、雰囲気がわかるかと思います。
その他
- 「せっかくなので」というノリでバウンディングボックスが披露される
- 「VDOMなんかなくても、setInterval(cb, 16)で60fps出せば良い」というパワーワード
- みやおかさんの実況のおかげで、非参加者のコメントでTLが盛り上がる事態に
- フォントレンダリングの話題が頻出。opentype.jsなどの知見が共有される
- 「contenteditable」「Safariのバグ」などのワードに反応して会場からうめき声が上がる
- バウンディングボックスのコード鑑賞コーナー
- STUDIOのバウンディングボックスの当たり判定実装に感嘆の声
- SVGはあくまでエクスポート形式とし、モデルにはしないほうがいいという知見（daiizさんのまとめを参照）
- STUDIOの二人とpixivFACTORYのすばるさんが来ていたので、Web fontsのロード戦略など現場の濃い知見が共有される
感想
楽しかったけど、濃い話が4時間続くと流石に疲れた…
またやると思います！
参加者レポート
参加者のmiyaokaさんがレポートを書いてくれました！
Denoの同人誌が出ます（2019/04/14 技術書典6）
前回の記事でも少し触れていますが、Denoに興味本位で集まった人たちが作ったグループで同人誌を出すことになりました。 皆さんも興味本位で買ってください。
サークルチェック数を今後の参考にしたいので、技術書典アカウントをお持ちの方は、サークルチェックをぽちっとしていただけると嬉しいです。
Denoの本は世界初のはずです（ひょっとしたら同着があるかもしれませんが）。 なぜ世界初なのかというと、もちろん本を出すには時期尚早だからです。
でも、お祭りみたいなものですし、Denoに興味さえ持ってもらえればOK!という感じみたいです。 私も思いっきりファンシーに表紙を描かせていただきました。Denoに興味を持った理由が「Denoザウルスが可愛いから」でも全然いいですよね。勢い余って４コマまで書いてますが。
本の内容について
私は前菜としてDenoの簡単な紹介的なところを、漫画で水増しして 漫画を交えてふんわり解説しています。
レベル的にはNode.jsを触ったことがあるくらいの人が対象になると思いますが、もしわかんなくても漫画で楽しめる感じを目指しました。
メインディッシュはしゅーまいさん、keroxpさんの記事ですね。結構ボリューミーです。
しゅーまいさんはDenoのI/Oについて書いています。しゅーまいさんはGoに強い方で、かねてよりDenoがGoのI/Oを参考にしてる点に言及していました。 Reader / Writerの使い方についてはdeno会で本人から教えてもらいましたが、streamベースの読み書きと違っていて興味深かったです。
keroxpさんはDenoでHTTP/1.1サーバを実装する記事を書いています。keroxpさんはdeno_stdのWeb Socket APIを実装するなど、プロトコルの実装にも強い方です。 Denoの書き方のみならず、HTTP/1.1のプロトコルについても学べるという、一粒で二度美味しい記事になっているのではないでしょうか。
最近のDenoについて
最近だと下記のようなトピックがありました。
- ESMが使えるようになった
- WASMが使えるようになった
- 今まで
import * from "deno"でAPIをimportしていたのが、Denoというグローバルオブジェクトを使うようになった #1748 - Deno Coreの誕生。Rust crateとして利用可能とのこと
- Web Worker APIの実装。#1047 で出ているWeb APIの実装が着々と進んでいるようです。（Web Audio APIとかCanvas 2D Context APIとかも実装したいって書いてますね。夢が広がりすぎでは…）
Ryanの3月の発表内容もぜひ見てください。
deno typescript meetup - Google スライド
この変化を「追っかけるだけで疲弊する」と取るか「カオス的でワクワクさせてくれる変化が毎週ある」と取るか、 人によるかとは思いますが、後者の発想をしてしまう人とはなんとなく話が合いそうな気がします。
だいぶ前のめりな同人誌ですが、前のめりな話で盛り上がるのを楽しみにしています。ぜひ、会場で話しかけてください。
Deno公式にアニメロゴが採用されたことと、許容的なリーダーの話
Denoの公式homepageに、拙作のロゴアニメが採用されました！https://t.co/iQyox3QK5D
— はっしゅろっく (@hashedrock) 2019年2月2日
Ryanへの質問回答のお礼として作ったものでしたが、公式に使いたいと言ってもらって感激でした😂 pic.twitter.com/3qYho3bUaL
この件についての経緯を書く。
先週、しゅうまいさんから「技術書典でDenoの薄い本書きませんか？」という呼びかけがdeno-jaのslackにあった。
もともと技術書典楽しそうだなと指をくわえて見ていたので、即飛びついたのだった。しかし、自分はそこまで技術に自信がない。
他のメンバーはDenoの深い部分について書きそうなので、
じゃあ「マンガでわかる～」シリーズみたいな感じで、イラストを交えて初心者向けの章を書こうかな？
と考えたのだった。自分は典型的な器用貧乏タイプで、空いてそうな役割があれば滑り込む感じのニッチ戦略が身についてしまっている。
漫画を描くとなると、Denoのマスコットを使いたい。こいつである。
かわいい。かわいいんだけど、名前もわからないし、そもそもこれは何なのか？首から下がどうなってるか不明。
…ひとまず、deno-jaコミュニティでは「チンアナゴ」と呼ばれていた。
作者に聞いてみよう
Denoのgitterには、作者のRyanさんを始めコミッタが常駐している。Issue立てるのは大げさだったので、チャットに質問を投下した。
DenoコミュニティでTech Book Festっていうイベント向けに、Denoのファンブックを作ろうと思ってます。イラストレーター（自称）なので、Denoのマスコットを本に書きたいんですが、マスコット使ってもいいでしょうか？ あと、このマスコットの名前と作者、あと全体のデザインの資料があれば知りたいです。
絵をつけているのは、英語に自信がないからである。海外の人とのやり取りでニュアンスを汲み取れない事が多く、保険として絵を付けることが多い。
Ryanさんからすぐ返答が来た。
ロゴは恐竜だよ。"deno"は"dino"（恐竜）と音が似てるからね。 このロゴは、彼が「夜の雨の中に立って、ソフトウェア開発の闇の戦いにストイックに立ち向かう」様子を想像したんだ。 あと、Bertと私で作ったlibuvのロゴとも関連してるよ。
「夜の雨の中に立って、ソフトウェア開発の闇の戦いにストイックに立ち向かう様子」
えっ、そんなにシリアスな場面だったの！？背景の縦線、あれ雨！？
deno-jaの面々も、この回答を面白がって盛り上がった。 自分も、この設定ジンワリ来るな～と思った。 せっかくRyanさんが答えてくれたので、お礼として、絵を描いて贈ろうと思った。
その結果、これが生まれた。
（その時の気分でアニメーションにした）
チャットはフレンドリーな雰囲気だったので、盛り上げようと思って、作ったアニメーションをアップロードした。 下記は貼り付けたあと無限に褒められている様子。
これだけでもテンションが上がっていたのだけど、嬉しいことに、下記の提案がRyanさんからあった。
このアニメ、ホームページで使ってもいい？v0.3.0のリリースでロゴを更新したい。 あと、円形バージョン作ってくれない？
これは嬉しかった。ネタになればいいなと思っただけのものが、Denoのメインリポジトリに入る…！？
急いで週末に円形のgifアニメを作り、冒頭のツイートに至った。
思ったこと
前々から思っていたけど、Ryanさんの人柄が本当に良い。
DenoのPRを眺めると、大抵Ryanさんは「いいね！」「すごい貢献だよ！」みたいなテンションのコメントを残している。
もちろん事細かなコードレビューもあるのだけど、根本的な姿勢は「おおらか」で、コントリビューターを大事にしているなぁという印象。ほとんど褒めるし、他者の貢献に対して喜んでいるのが伝わってくる。
こういうおおらかさは、もちろんデメリットもあるとは思う。PRを取り込んだあとにRyanさんが自分で直すこともあるそうだし、Ryanさん自身Denoに大きな変更をカジュアルに入れる傾向にある。
余談になるけど、そもそもDenoのキャッチコピー自体が、もともと「A secure TypeScript runtime built on V8」だったのが「A secure JavaScript / TypeScript runtime built on V8」に代わり、つい最近「A new way to JavaScript」に変わってしまったという具合である。deno-jaの面々が「Denoとは一体…？」状態になっている。
ただ、今はおおらかさがコミュニティの雰囲気を良くする方向に作用している。
自分も、Ryanさんとコミュニティーがフレンドリーだったからこそ、お遊び的なものを贈ろうと思ったわけだし、堅苦しい雰囲気だったらマスコットについて聞けなかっただろう。こんな貢献方法があるなんて、思っても見なかった。
世の中は厳しくて、頑張りが無になったり、何なら逆に怒られたりなんてことがよくあるものだけど、のびのびと成果を残せるときには、こういう許容的なリーダーが近くにいたような気がする、と思ったのだった。
おまけ
要望があるんだけど、時々雷が落ちるようにしてくれない？
アッ、ハイ…頑張ります
完
クリスマスイブのDeno
昨日テンション上がったことを書き残しておく。
ここ数日でjinjorさんがDenoを触り始めているのを興味深く眺めていたのだけど、すごい勢いでコード書いてるから、つい自分もdenoいじりたくなってしまって、イブにエディタを開いてしまった。
で、Vueの忘年会でしゅーまいさんに「Denoにないライブラリ書いたほうがいいですよ」と言われたのを思い出して、なにか書こうと思ったのだった。Denoにはライブラリがあまりないというかほぼ無である。ネタを探してnpm rankを上から見ていって、ひとまず簡単そうなものを探した。
最終的にURLをブラウザで開いたりするだけのライブラリ、「opn」をお題に選定した。スクラッチする自信はないので移植することにした。
簡単そうに思えて大変苦戦した（クロスプラットフォームは本当に面倒だな！）のだけど、一応完成して、Githubで公開した。
で、22時に公開したのだけど、その3時間後にEGOISTさんから謎のリプライが来た。
— EGOIST (@_egoistlily) December 24, 2018
URLを開くとなんか自分のリポジトリのURLが書かれてるし、え、なにこれ、EGOISTさんわざわざ自分へのアドバイスかなにかをnow上に書いて送って来たの？と一瞬混乱したのだけど、１分くらい考えて
「あ、これ自分がライブラリ公開したのを見て、Denoのライブラリで便利に使えるWebサービスを作ったんだ、この3時間で！」
とわかった。しかもドメインまで取得して。
EGOISTさんは会ったことないし正直謎の人なんだけど、コーディングの実力と作るライブラリの多彩さは本当に人並み外れていて、尊敬しているプログラマーの一人である。図らずもクリスマスプレゼントを頂いたような気持ちになったのだった。
それにしてもEGOISTさんもDenoに興味あったのかーというのが驚きだった。（すごい賢い人だから、ざっとDeno見て一瞬で理解してimport URL冗長だなーってところだけ解決したのかもしれないけど）
jinjorさんと自分とEGOISTさんとしゅーまいさんがその日Deno絡みのコーディングしていたようだったのだけど、クリスマスイブにやることなのかどうかは完全に謎、しかし本当に楽しいんだよなー、こういうのが。
みんなクリスマスにコード書きすぎなのでは？
— しゅーまい (@__syumai) December 24, 2018
おわり。
Node.jsの次にDenoを使いたい
Node.jsの作者Ryan Dahlが作った「Deno」が面白くて、最近追っかけている。
TypeScript版Node.jsというのが雑な説明になる。yosuke-furukawaさんの下記の記事が詳しい。
yosuke-furukawa.hatenablog.com
ES Modules周りとnpmのことも考えると、まっさらから再設計したほうがスッキリしてて気持ちいいというのと、単にTypeScriptが好きというのもあるけど、今追っかけている理由は、Denoがセキュリティ的にいい感じに見えるからだったりする。
flatmap-stream事件
npmパッケージがビットコインの窃盗に利用される（未遂）という事件がつい先日発生した。
これははっきり言って防ぎようがない事件で、minifyしたコード内に埋められてもその差分に誰が気づくんだという話である。むしろこれによく気づいたな・・・という印象。見過ごされていてもおかしくない。
この件、自分は攻撃者以外の全員がかわいそうだな…と思った。作者がOSSに対して過大な責任を負うのも違うし、OSSのコミット権渡すときも他人の善意を疑いたくない。npm側ができることも限られている。
しかし、気軽に小さなライブラリに依存してしまう文化は、ライブラリの作者に大きな責任を負わせてしまう。
これは、誰かの努力じゃなく仕組みで解決したい問題だ。
信用できないコードを実行する
Denoのロードマップには下記のように書かれている。
We want to be secure by default; user should be able to run untrusted code, like the web. 「Webのように」信頼されていないコードをユーザが実行できるように、デフォルトでセキュアにしたい。
「コードを信用しないままに実行する」というのは今までブラウザがずっとやってきたことだ。サンドボックスがあり、ファイルへの書き込みのような危険な処理にはユーザへの承認を求める。
Denoは「脅威」として下記の２つを挙げている。
- ローカルファイルの変更や削除
- 情報漏えい
それを防ぐために、下記をデフォルトで禁止している。
- ネットワークアクセス
- ローカルファイルへのWrite
- JS以外の拡張
- サブプロセス
- 環境変数へのアクセス
ファイル読み込みは許可しているのは面白いところだ。ローカルファイルを読めたところで、ネットワークアクセスがなければ漏洩することはできないので、問題ないという考えだろうか。
※2018/12/04 16:30訂正
現在は --allow-read フラグを追加する方向で話が進んでいるため、ファイルの読み込みもデフォルトは禁止になる見込みだそうです。Thanks: @kt3k
Denoはまだまだ開発途上ではあるけど、すでに簡単なHTTPサーバを書くことが可能になっている。
import { serve } from "https://deno.land/x/net/http.ts"; const s = serve("0.0.0.0:8000"); async function main() { for await (const req of s) { req.respond({ body: new TextEncoder().encode("Hello World\n") }); } } main();
このコードを実行すると、下記のようなプロンプトが表示される。
面倒なようだけど、これから必要になることかもしれない。
SVG + Vueで有名なsdrasさんが日本に来るよ、という話
早いもので、Vue Fes Japanまで残すところ２週間程度となりました。
で。
何はおいてもsdrasさんですよ。来日です。
このブログの読者はSVG漬けの毎日を送っていると思うのですが、 SVGアニメーションといえば自分の中ではこの方です。
Sarah Drasner(sdras)さんは、VueConf 2017（katashinさんによるVueConf 2017 参加レポート）のトリでSVGアニメーションのプレゼンを行い、注目を浴びたことが記憶に新しいです。
この方がVue Fes Japan登壇のために来日します。SVG界震撼です。
発表では「なぜアニメーションが必要なのか。そしてどのように実装すればいいのか」が楽しく解説されています。 アニメーションの制御にはTweenMaxとVue.jsが利用されています。
私もこの発表に影響されてSVGを始めたので思い入れがあります。皆さんも未見であればぜひスライドだけでも見てください。スライド内のSVGはインタラクティブに動かせます。
スライド：slides.com
sdrasさんのCodepenは楽しいぞ
ウォーリーがマウスカーソルを追ってグリグリ動きます。
ホームボタンを押すといい感じのSVGアニメーションが展開されます。
聞くところによるともともとFlasherだったそうで、このへんの作品はFlashっぽいですね。
Vue.js Londonのトップアニメーションもsdrasさん作です。
sdrasさんのバックグラウンド
sdrasさんのバックグラウンドは「フロントエンドエンジニア」かつ「サイエンスイラストレーター」だそうです。イラストレーターとしての作品は下記サイトで見ることができます。
どのイラストも緻密で圧倒されます。
もともと数学とアート両方に興味が強かったようで、一旦はアート方面で教鞭をとっていたそうです。
- San Franciscoの漫画ミュージアムでリテラシープログラム（？）を教えていた
- ギリシャのHellenic International Studies in the Arts（HISA）で絵画・写真・芸術理論を教えていた
- フィールド自然史博物館のサイエンスイラストレーター（爬虫類と両生類）
- ビザンティン美術を教えていた
などなど、アートの人という感じですが、その後フロントエンドエンジニアとして働くようになり、現在に至ります。
デザインと実装両面をやっているという点では、Vue.jsの作者のEvanさんと似たものがありますね。（Evanさんも元々デザインを学んでいて、エンジニアとしてGoogleに入っています）
現在の肩書はMicrosoftのDeveloper Advocateです。これはEvangelistに近いものだそうで、アニメーションやサーバレスアーキテクチャ（Azure Functionsなど）を啓蒙する立場です。
Vue.js core teamメンバーとしての活動
sdrasさんはVue.js core teamメンバーでもあります。主にドキュメント周りに貢献されていて、目立ったところでは、公式ドキュメント内の「The Cookbook」をリードしました。
クックブックはExampleよりも実用的な例を提供するためのドキュメントで、今年から導入されたものです。内容は重厚かつ実用的で、一見の価値ありです。
その他の活動
- オライリーのSVG Animationsの著者です。
- CSS-Tricksの著者の一人です。記事一覧
- Array Explorer, Object ExplorerというJSの解説サイトを作っています。
- vue-directory-treeという、Vue.jsコアのディレクトリ構造を解説付きで表示してくれるサイトを作っています。これVue.jsのコアのコードを読む取っ掛かりにいいかもしれません。
- SVG Workshopというリポジトリを公開しています。中身を全部見れてませんが、D3やMo.jsなどを利用しているようです。ワークショップに使ったスライドやコードなどが含まれています。
そんなsdrasさん、Vue Fesに登壇します
発表内容はまだ公開されていませんが、近日中には公開されると思います。お楽しみに！ （ちなみに私はスタッフなんで、当日見れるとは限らないんですが…）
追記 2018-10-18
発表内容公開されました！「Next-level Vue Animations」ということで、アニメーション絡みの発表になりそうですね！
プログラマー絵茶を開催した＆リアルタイム共同開発した
絵茶というのは、お絵かきチャットの略称で、一枚の共有キャンバスにみんなで絵を描くという遊びのこと。
今回は、Twitter上で人を募って２回ほど開催してみたという話。
なぜ開催した
絵を書きたいプログラマーがTL上に増えた気がした（N=２くらい）ので、勢いで開催した。
Twitterにいる人でキャラ絵を描けるようになってみたいって人は結構いるみたいで、そういう人たちをお絵かき勢に引きずり込みたいなぁとも思っていた。
どの絵茶を使うか問題
昔ながらの絵茶はJavaやFlashで作られており、最近のブラウザでは動作しづらい。HTML5ベースの絵茶を探す必要があった。
また、人気のある絵茶サービスだった「pixiv chat」は去年終了し、セルシスが提供しているkakooyo!という絵茶サービスは最大４人までの制約があるのと、PCから描くことができないという問題があった。
まず最初に選択肢に上がったのはMagicalDrawで、これはChromeから使うのであれば一番良さそうだった。
MagicalDraw | お絵かきチャットレンタルサービス
しかし最近iPad + Apple Pencilを購入してこれで書きたかったのだが、どうもMagicalDrawはiOS環境だとかなり簡素なUIになってしまうのと、スクロールの挙動が若干怪しかった。
次に見つけたのがDraw.Chatという海外のサービス。
これはなんとビデオチャットまでできる優れもの。描いている途中にiPadで文字チャットをするのはかなりだるく、音声チャットできると楽だなと思っていたので、これは良いものだと思う。
第１回はこれで開催したのだが、問題があって、描画量が多くなるとどんどん重くなっていく。スクロールするだけでリドローが発生する。
あと多機能なせいで、初見の人がUIに戸惑う。興味持って見に来ただけの人がすぐ理解できるUIだったらいいのになぁと思った。
結局自作
第二回をやるにあたって、そもそもシンプルで安定したやつがほしいという思いが出てきてしまい、結局絵茶を自作することにした。
ゼロから作るのはつらいなと思ったので、GitHubからベースにできそうな絵茶実装を探して、下記のプロジェクトを元に作ることにした。
GitHub - romebop/whiteboard: interactive drawing & chatting
変更点
まずは、描画スペースを広げてスクロール可能にした。
前回開催して思ったのが、絵を描いたことのない訪問者は基本的に見るだけで描かなくなってしまうという点だった。
多分、上手い人がガリガリ描いているスペースに絵を描き入れるのは緊張するのでは、と思ったので、右側にピクトチャットもどきを実装することにした。その結果が下記。
第二回
自作絵茶を投入して第二回を開催したのだが、同時に試みとして「せっかく自作なんだからリアルタイムに開発する」という企画を行った。VSCode Live Shareという機能を使って、Twitterで相互フォローしてる人なら開発に参加できる体制にした。
絵茶開発をゆるゆるやってます。相互フォローの方限定で、VSCodeの共同編集に入れるリンクを公開してます！
— はっしゅろっく (@hashedrock) July 19, 2018
絵茶開発リンク（VSCode Live Share） https://t.co/sxYksukdWG
これにはkiyopikkoさんが応じてくれて、チャットしている裏でゴリゴリCSSを編集してUIを改善して頂いた。
最初こんなのだったのが
現在こうなった
この変更は開催中に本番反映された。
Live Shareでの共同開発は本当に楽しいので、みんな体験した方が良いと思う。
もう一回くらい開催したい
なかなか参加者増えないなぁという感じはあるのだけど、絵茶自体は参加してもらえれば楽しいのがわかってもらえると思うので、もう一回くらいは開催してみてもいいかなと思っている。
興味ある方は@hashedrockをフォローしてください。やるときアナウンスします。やるなら多分7/26の22:00くらいかな。
また、絵茶作成自体に興味がある方は、下記のScrapboxに参加してください。
