はてなブックマーク

生きていると「○○の勉強会があったらいいのにな～」とかぼやいてしまうのだけど、自分で主催はしたくないので言いっぱなしになるみたいなことが多い。 alert / prompt / confirm / 自前モーダル勉強会欲しい— hashrock (@hashedrock) 2021年8月3日 ズームイン・ズームアウト・パン操作実装勉強会欲しい— hashrock (@hashedrock) 2019年11月29日 これはかなりみっともないと思っていて、それで最近「自動勉強会」というのを始めた。 自動勉強会の概要としてはこれだけ。 聞きたいネタをみんなでキューに貯めておいて、参加者が３人以上になったら勉強会が開催されるという「自動勉強会」システムをやってた事があるんだけど、それに類することをやりたい— hashrock (@hashedrock) 2021年3月25日 実際のキューは下記のよう

今年もイブがやってきました。特にやることもないので 毎年 何かしら 作っています。 今回は「シュッ、クルッ、ピョン、フワッ…」みたいに書くとアニメーションになるというアイデアを温めていたので、それを作りました。 動いているところは動画から見てください。直感的としか言いようがないと思います。 tailwindにわずかに影響を受けたCSSフレームワーク作ってた pic.twitter.com/oNUvB70Y0R— hashrock (@hashedrock) 2020年12月24日 できた、直感的なCSSアニメーションフレームワークが pic.twitter.com/QyiAvKxo7A— hashrock (@hashedrock) 2020年12月24日 「直感的イコール素晴らしい」とは限らない、ということがよくわかります。 最近CSSフレームワークのTailwindを触っていて、インス

今年２月から「金曜になにかGUIを一つ作る」というフロントエンド素振り活動をしていたのだけど、最近あんまりやらなくなってしまったため、一旦成果物をまとめる。 発端 今年２月末の金曜日のこと。 ちょうど自粛ムードが広がりはじめた頃で街に活気がなく、微妙に暗い気分が広がっていた。 そういえば今日プレミアムフライデーだったなーとか思い出し、 明るいことの一つもあればいいのにと考えながら、とぼとぼ帰っていた。 「こういう時って自分から動き出すと気分が晴れたりするよなぁ。GUI作ってたら気分が晴れるんじゃないだろうか」 と考えるに至り、突発的に下記のツイートをした。 #金曜GUI— hashrock (@hashedrock) 2020年2月28日 で、おもむろにGUIを制作している様子を配信し始めた。 スライダー作ってる #金曜GUI pic.twitter.com/f6tmHMzx67— has

2020/5/14に無事 Deno 1.0 が発表となりました。 公式ブログの記事にマスコットのイラストがあるのですが… こちらを描かせていただきました。なんだってー 経緯 マスコットキャラの「Denoくん」（公式名称不明）が可愛いので、以前から何度となく描いてきて、 しまいには謎の絵描き歌を作ったりしていました。 その中で作者のRyanと関わりが生まれ、アニメーションロゴを採用してもらったこともありました。 hashrock.hatenablog.com 結果として今回の話につながった感じです。 依頼は今年１月に受けていました。 私のようなアマチュアではなく、プロに頼んだほうがきっと早くて質の高いものができると思うんですが、 「こちとらDenoのいちユーザでもあり技術的な側面も分かっているんじゃい」 という自負もあり引き受けました。 イラストにプロダクトの信念みたいなものが込められていれ

techbookfest.org GUIの薄い本です。「入門 監視」ばりに主語デカタイトルです。 著者は私と f_subalさん、daiizさん、miyaokaさんで、座談会パートにはKeima Kaiさんが参加しています。 内容は「ドラッグ＆ドロップを始めとする作るのがしんどいGUI」をいちから書いてみようよ、という感じです。 GUIコンポーネントの使い方についての本はよく見かけますが、コンポーネント自作についての本というのはなかなか珍しいんじゃないかと思います。 概ね下記のようなノリの、ゆかいなGUIの本として読んでもらえれば、と思います。 私はセレクトボックスを実装してみようという章を書いています。最終的になぜかリングコマンドになりました。 中でも、最後の座談会パートは好評です。STUDIOの二人が参加しているので、先にSTUDIOを触ってみるとより文脈がわかると思います。 サンプル

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 = "---------

去年に引き続きクリスマスイブになんか作ったシリーズです。 下記のような感じで、ガントチャートを雑に作れるVSCodeの拡張機能を作りました。 テキストを編集してもいいし、プレビューを操作してもいいというのがこのツールの売りです。 変更内容は相互に同期します。 VSCodeなので、当然ながらコピペやマルチカーソル、置換なんかも普通に使えます。 VSCodeの編集機能で、GUI部分の貧弱さを補おうというコンセプトです。 実用性や自由度は低めですが、文法や操作方法を覚える必要も最低限になっているんじゃないかなと思います。 あと、ただのテキストなんで、Git管理もできますね。 ２週間程度の短期予定を立てる用途を想定しています（自分はその程度の予定しか立てません）。 要望に答える可能性は低いですが、プルリクを頂ければ割と軽率にマージすると思います。 かんたんな導入方法 まずVSCodeを開き、おもむ

こちらはDeno Advent Calendar ２日目の記事です。 絵描き歌を作りました。なぜ？ www.youtube.com 歌詞にある通り、Denoくんの作者のRyanは首から下のデザインはまだ出していません（多分）。 Denobook表紙では、私なりに全身を想像して描いていますが、非公式デザインということになります。 hashrock.hatenablog.com Ryanの説明からすると、地上で活動する恐竜であることは間違いなさそうなので、そう大きくズレることはないと思いますが… タイムリーな話題としては、ちょうど先日JSConf JPにてコアコミッタのkitsonkがDenoについての発表を行いました。今Denoってどうだっけ？という話が気になる方はぜひご一読を。 Really enjoyed talking about @deno_land at @jsconfjp. He

台風がVue Fesを直撃する勢いで向かってきています。 参加者の方にカンファレンスを楽しんで頂きたい気持ちはもちろんですし、スタッフも多大な労力をかけてタフな調整を続けてきた方ばかりなので、報われるような結果になることを祈るばかりです。諸々の事情は公式記事で詳しく書かれています。 私は発注したりなんだりする係の一人なので、色々と気が気ではありませんが、台風が空気を読んでくれると信じて準備を進めています。笑い話で済みそうな感じになったときに詳しく書ければいいなーと思います。 UPDATE: 2019/10/11 中止が発表されました。開催を楽しみにしてくださった皆様に多大なご迷惑、ご心配をおかけしましたことを心より深くお詫び申し上げます。 一方でDenoは明るい話題しかないわけで、癒やしになっています。 DenoでJSXが実行できるようになったよ react勢みて、denoでtsx直接実行

UIT meetup vol.7で登壇してきました。 普段はReactやVue, BFFなどのゴリゴリの内容をやっているmeetupだそうです。 ただ、最近堅い内容が続いたので「○○芸人」を集める箸休め的な回をやりたかったそうです。 ということで、SVG芸人を名乗っている私にも声がかかりました。 （自分で言うのもなんですがSVG芸人ってなんなんだ…？） スライドはこれです。 slides.com 「ワードアートの歴史」から始まって「ベジェ曲線の手書きの仕方」とか横道にそれつつ、 最後はTシャツという謎終着点に行き着くような内容なので、あんまり真面目に見なくていいです。 話下手なので終始しどろもどろになりながらの発表でしたが、 徹夜で仕込んだ「令和のワードアート」やワードアートエディタがそれなりに受けてくれたようです。 「contenteditable」の単語だけで笑いが取れる場は貴重ですね

「GUIの雑談を無限にしたいなぁ」と思い、会を開催しました。 twipla.jp 上記のイベントページを立てて、Twitter上で募集をかけたところ、 この内容だけでピンと来てしまったガチ勢が9人も集まりました。 ドローツールやマインドマップ、作曲ツール等を自作するフルスクラッチマンたちです。 予約したルノアールの会議室は過密状態になってしまいました。 （もう少し広い部屋にしておけば…と後悔しました） （ルノアールです） #複雑GUI会 pic.twitter.com/XDGWs3EwZd— みやおか (@miyaoka) May 2, 2019 職人タイプの方が多かったので終始和やかな雰囲気でしたが、 やはり実装に深入りしていくことが多く、あまりの情報密度に 私も話についていくのが大変だったと自白しておきます。 あと、なぜか開催前に「バウンディングボックス大会」が行われる雰囲気が醸成され

前回の記事でも少し触れていますが、Denoに興味本位で集まった人たちが作ったグループで同人誌を出すことになりました。 皆さんも興味本位で買ってください。 サークルチェック数を今後の参考にしたいので、技術書典アカウントをお持ちの方は、サークルチェックをぽちっとしていただけると嬉しいです。 techbookfest.org Denoの本は世界初のはずです（ひょっとしたら同着があるかもしれませんが）。 なぜ世界初なのかというと、もちろん本を出すには時期尚早だからです。 でも、お祭りみたいなものですし、Denoに興味さえ持ってもらえればOK!という感じみたいです。 私も思いっきりファンシーに表紙を描かせていただきました。Denoに興味を持った理由が「Denoザウルスが可愛いから」でも全然いいですよね。勢い余って４コマまで書いてますが。 本の内容について 私は前菜としてDenoの簡単な紹介的なところ

Denoの公式homepageに、拙作のロゴアニメが採用されました！https://t.co/iQyox3QK5D Ryanへの質問回答のお礼として作ったものでしたが、公式に使いたいと言ってもらって感激でした😂 pic.twitter.com/3qYho3bUaL— はっしゅろっく (@hashedrock) 2019年2月2日 この件についての経緯を書く。 先週、しゅうまいさんから「技術書典でDenoの薄い本書きませんか？」という呼びかけがdeno-jaのslackにあった。 もともと技術書典楽しそうだなと指をくわえて見ていたので、即飛びついたのだった。しかし、自分はそこまで技術に自信がない。 他のメンバーはDenoの深い部分について書きそうなので、 じゃあ「マンガでわかる～」シリーズみたいな感じで、イラストを交えて初心者向けの章を書こうかな？ と考えたのだった。自分は典型的な器用貧乏

昨日テンション上がったことを書き残しておく。 ここ数日でjinjorさんがDenoを触り始めているのを興味深く眺めていたのだけど、すごい勢いでコード書いてるから、つい自分もdenoいじりたくなってしまって、イブにエディタを開いてしまった。 で、Vueの忘年会でしゅーまいさんに「Denoにないライブラリ書いたほうがいいですよ」と言われたのを思い出して、なにか書こうと思ったのだった。Denoにはライブラリがあまりないというかほぼ無である。ネタを探してnpm rankを上から見ていって、ひとまず簡単そうなものを探した。 最終的にURLをブラウザで開いたりするだけのライブラリ、「opn」をお題に選定した。スクラッチする自信はないので移植することにした。 簡単そうに思えて大変苦戦した（クロスプラットフォームは本当に面倒だな！）のだけど、一応完成して、Githubで公開した。 github.com で

早いもので、Vue Fes Japanまで残すところ２週間程度となりました。 で。 何はおいてもsdrasさんですよ。来日です。 このブログの読者はSVG漬けの毎日を送っていると思うのですが、 SVGアニメーションといえば自分の中ではこの方です。 Sarah Drasner(sdras)さんは、VueConf 2017（katashinさんによるVueConf 2017 参加レポート）のトリでSVGアニメーションのプレゼンを行い、注目を浴びたことが記憶に新しいです。 この方がVue Fes Japan登壇のために来日します。SVG界震撼です。 www.youtube.com 発表では「なぜアニメーションが必要なのか。そしてどのように実装すればいいのか」が楽しく解説されています。 アニメーションの制御にはTweenMaxとVue.jsが利用されています。 私もこの発表に影響されてSVGを始め

ふつーのドラッグ出来たりリサイズ出来たりする付箋。 SVGで作る必要があったのかは謎。 DEMO コードはこちら。 github.com ポイント SVGで複数行のテキストを表示するには、foreignObject + divを使うのが定番らしい。 ただしその場合、IE11は見捨てなければならない。 cacooなんかもIEは非対応にしている。 エディタに関してはSVG外でやっている。cacooをみると、absoluteでiframeとcontenteditableを乗っけている。 iframeを介す理由は謎だけど、IE対応のためかも？という話を教えてもらった 今回はプレーンテキストでいいので、textareaをabsoluteで単に乗っける形とした。 詰まったとこ 下記のエラーが出てしまう。computedにしたselectedItemが、参照するときに関数として取れてきてしまう。 (30

Excelシートが憎い。 Excelシートでの書類作業の辛さは言わずもがな。 データベースもどき アプリもどき 帳票出力 Excelシート上でのコーディング エビデンス作成 UMLなど 以上のものについて、すべてExcelでの作成経験がある。あの世にもExcelシートを作らされる地獄がきっと存在するだろう。 Excelシートが憎い。Excelの万能性ゆえ、落とし込まなくていいものまで落とし込まれ、地獄を生み出す。みんなExcelなら慣れてるので、その他の選択肢は選ばれない。何度かMarkdownからExcelにコンバートするようなツールを書いたけれど、書式が変われば捨てざるを得ない。結局今もExcelを書き続けている。辛い。 でも待って欲しい。あれほど一括編集をエレガントにこなせるUIが他にあるだろうか（２大エディタに習熟した場合を除く）。図も書ける。式は素人でも使えるが、プログラミングの

これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i

動いてるところは下記ツイートから見れる（gifがでかくなりすぎてはてなにアップロードできなかった） 文字をアニメーションさせて遊ぶやつができた https://t.co/mTYNrkBLxi pic.twitter.com/UT4inhu0My— はっしゅろっく (@hashedrock) 2017年11月18日 デモサイトは下記。文字を入力したり、文字サイズや太さを変えて遊べる。 https://hashrock.github.io/canvas-lff/ ソースは下記。 github.com リポジトリについて もともとは昔に作ったリポジトリで、LFFというラインフォントフォーマットの存在を知って作ったやつ canvas上に描くようにして、光らせたりアニメーションさせたりはしていた 今回はVue + SVGに移植した ついでにES5 -> ES2015 -> TypeScriptに段階

Deno Advent Calendar 2022の４日目です！ Calendar for Deno | Advent Calendar 2022 - Qiita Denoくん絵描き歌を見ながら描く手もありますが… Denoくん えかきうた - No Regrets in Bathing いつもどんなことを考えながらDenoくんを描いているか書きます。 まずはこんな感じで、顔を楕円、背中からしっぽに至るカーブをなるべくなめらかに描きます。 使っているツールはConcepts.appというベクター系のツールです。WindowsでもiPadでも使えるところが便利です。 変なものに見えないように注意が必要なので、割りと本気で結構悩んでいます。 最近は緑のDenoくんを描くことが多いですが、その辺の理由もあったりします…。 接地面を考えながら足を４本生やします。 投げ縄ツールで先に塗ってしまいます

TypeScriptを使いたい、型に守られたいという気持ちが定期的に生まれるのだけど、 ただwebpack.config.jsとtsconfig.jsonが上手く書けなくてしんどいみたいなことがままある。 お仕事的に、TypeScript + Vueでやっていくぞというのは下記のダーシノさんのスライドが良い。 とにかく楽してVue.jsでTypeScriptを使いたい from さくらインターネット株式会社 www.slideshare.net 上記の内容と、webpack-simpleという自分が愛用しているテンプレートと、vue-class-componentのexampleを見ながら書いた雛形が下記に置いてある。 github.com それはそれとして、今日はpoiを調べた。 poi + TypeScript poiは設定より規約感のあるツールで、書捨てのプロジェクトにはwebpac

３作目。こっそり戻るスライダーを実装しよう。 素のSVG手書きするのちょっと辛すぎたんでInkscapeを使うことにした。 Inkscapeも辛くないということはまったくないけど…、うーん。Sketchの方が楽かな。Mac版は持ってるんだけど。 こんな感じ。 で、動かしたい単位でグループ化し、地道に名前を付けていく。 groupの移動はx, yではなくtranslateでやることになる（めんどくさい！）ので、 この時、translateの値は、変位する値でメモしておく。 始点：translate(-0.28348214,0.09449405) 終点：translate(89.296875,0.09449405) なるほど、この範囲を動かせばいいわけだ。 inkscapeの安定版はいつでもこんな感じ。 まぁ使えるのでいいとする。 で、そのままSVGで出力すると、inkscape独自属性とかが

白ハゲ４コマメーカー リリースしました！ テキストを入力してポンポンスタンプを押すだけで４コマ漫画を作れます。 ※Twitterに直接画像をアップロードする機能はないので、ローカルに一旦保存してくださいhttps://t.co/RCX183cdW8#白ハゲ４コマメーカー pic.twitter.com/qbvRHqO5R3— hashrock (@hashedrock) 2017年6月27日 作りました。 https://mangadown.netlify.app/ ここの所、Markdownからすべてを生成することを目指した「anydownプロジェクト」というのをやってます。 その流れで４コマもテキストから生成できそうだな、と思いついたので作りました。別にMarkdownじゃないんですが、それなりに書きやすいんじゃないかと思います。 大層なことにそれらしいWebフォントを使っていたり、縦

Markdown -> 日本企業メールコンバータできた https://t.co/kw67jEpi0Z pic.twitter.com/9qOTW5uQQV— はっしゅろっく (@hashedrock) 2017年5月1日 DEMO Source かなりバグが残っている（ひどいのは、インライン要素は全部消えてしまう）ので、胸をはれるような代物ではないけど（※追記：直しました）、Markdownから業務メール書式への変換ツールを書いた。 自分の考える業務メール書式とは、以下のようなもの： 長文は適度に折り返される（半角76文字ぐらいで折り返されることが望ましいらしい） 行を開けることでセクションが表現されている 全角記号で飾られている 経緯としては、書類をなんでもかんでもMarkdownで書いているので、メールに貼り付けるときに手で整形する必要があってつらかったために作成した。 自分の作業の

自分のスタックはあまり変わっていない。ほとんど10年のツケを払っていない。学習能力が低いせいでもあり、選んだスタックがバージョンを重ねている成果でもある。 毎回使う フレームワーク：Vue.js 消耗、などの意見が散見されたが、べつに今でも便利に使えている。 browserifyやwebpackがあれば便利だけど、なくてもいい、ってバランスが好き データフローは特に考えない。状態がそこにあるので書き換えれば良い。 あまり頭を使わなくていいのが助かる Reactの考え方は好きなのだけど、よっしゃFluxやるぞって気持ちにはならず、Reactのみでよしなにやるソリューションが広まったらいいなと思う。 ビルドシステム： browserify / watchify substackの作るものはどれも品質が高いので、もうsubstack製品だけ使っていればいいやという気持ちになりがち。余計な処理が全