日記です。
まとめ
- 1月 Clock
- 2月 Quick Note
- 4月 ginpei/stop-sns: Chrome, Edge, Firefox extension that helps you to spend less time on SNS.
- 6月 ginpei/omae-wo-kesu-houhou-for-github
- 6月 ブラウザー拡張(アドオン、エクステンション)の作り方
- 6月 DevToolsでz-index一覧できるやつ作ったよ。 | Ginpen.com
- 7月 Pretty Letters
- 8月 Potoshop
- 8月 ginpei/rails-resize-image-uploader-demo: Rails demo app that resizes image files smaller before uploading.
- 8月 Ruby on RailsをDockerで始めるサンプルとチュートリアルを書いたよ。 | Ginpen.com
- 11月 CSS transformのmatrix()を一瞬で 完 全 理 解 できるやつ作ったよ。 | Ginpen.com
- 12月 配列とかおれおれAdvent Calendar2018やります。ひとりで。 | Ginpen.com
ぼちぼち作ったなー。
GitHub
自分のGitHubプロフィールページで2018年を開いて、これする。
(() => { const year = 2018; const days = [...document.querySelectorAll('rect.day')] .filter(e=>e.getAttribute('data-date').startsWith(year)); const counts = days.map(e=>e.getAttribute('data-count')|0); const sum = counts.reduce((s,c)=>s+c); console.log(`${year}年${days.length}日中活動したのが${counts.filter(v=>v!=0).length}日、合計${sum}回、平均${(sum/days.length).toFixed(2)}回毎日。`); })();
2018年365日中活動したのが196日、合計1466回、平均4.02回毎日。
作ったもの
Clock
時計をPWA化してブラウザとは別枠で動くようにできた。でもなーまだなーよくわかんないんだなー。特にキャッシュ制御。https://t.co/dWLNNAwa5N
— 高梨ギンペイ (@ginpei_jp) February 12, 2018
1月。アナログ時計 + ポモドーロタイマー。
手頃に使えるアナログ時計が欲しいなと思って、PCの脇にスマホを立ててそっちに映す用に。
どうせならブラウザーじゃなくても動くようにしようかなと思って、後述のQuick NoteでPWAを試して、その後導入した。結果的にNuxt.jsがよしなにやってくれるのであまり気にする必要はなかったけど。
そう、Nuxt.js使ったけどあんまり便利機能使ってなかった。History APIを使うSPAもGitHub Pagesだと使えないし。
Quick Note
文字入力して記憶できるだけのPWA動いた!https://t.co/GKpknaCOs4 pic.twitter.com/iD3Z4SXtjN
— 高梨ギンペイ (@ginpei_jp) February 11, 2018
2月。オフラインでも動く簡単ノート。入力内容はLocalStoragに保存される。
PWAを作ってみたい!と思って作ったやつです。依存パッケージも一切なし。( devDependencies
はあります。ESLintとか。)
なんならもうちょっとこうノートにタイトルを付けて保存とかするようにしても良かったかもしれない。でもまあそういう目的ではないし、作っても使わないだろうからよし。
Stop SNS
- ginpei/stop-sns: Chrome, Edge, Firefox extension that helps you to spend less time on SNS.
- Stop SNS – Chrome Web Store
- Stop SNS – Get this Extension for Firefox (en-US)
4月。Twitterとかの閲覧を阻害するChrome拡張、Firefoxアドオン。
ちょっと思うところあってブラウザー拡張作ってみよう、と思って。簡単に作れて良いね。自分で使ってません。
本編とは関係ないんだけど、SVGの図形に影を付けるってのを学んだ。これおもしろいな。
SVGで吹き出しhttps://t.co/EEVXg3VlYA pic.twitter.com/NQrKHlrCmr
— 高梨ギンペイ (@ginpei_jp) May 7, 2018
お前を消す方法 for GitHub
- ginpei/omae-wo-kesu-houhou-for-github
- お前を消す方法 for GitHub – Chrome Web Store
- お前を消す方法 for GitHub – Get this Extension for Firefox (en-US)
6月。どこか懐かしいマスコットを表示するChrome拡張、Firefoxアドオン。ジョークアプリ。
MicrosoftがGitHubを買収という報道を受けて。
まさかの窓の杜、やじうまの杜に掲載。
やったぜ / Microsoftに買収された“GitHub”はこう変わる? あり得ない未来を見せてくれるネタ拡張 – やじうまの杜 – 窓の杜 https://t.co/NkLLYzegsN
— 高梨ギンペイ (@ginpei_jp) June 9, 2018
最近☆1評価付けられてるのに気付いた。何を求めてたってんだ……。
DevTools z-index
- DevToolsでz-index一覧できるやつ作ったよ。 | Ginpen.com
- ginpei/devtools-z-index: Stop
z-index: 999999
!! - DevTools z-index – Chrome Web Store
- DevTools z-index – Get this Extension for Firefox (en-US)
【作って書いた】こないだのを拡張にしました。 / DevToolsでz-index一覧できるやつ作ったよ。 https://t.co/scZAopNK3O pic.twitter.com/HsouwGXyew
— 高梨ギンペイ (@ginpei_jp) June 21, 2018
6月。 z-index
を利用している要素とその値を開発者ツールから一覧できるChrome拡張、Firefoxアドオン。
仕事中の息抜きで書いたコードスニペットをもうちょっとこねてブラウザー拡張へ転用したもの。気軽に作ったんだけど、「便利だ」と割とウケが良かく嬉しかった。ただ実は自分で使ってないので、何がそんなに便利なのかよくわかってない……。
Pretty Letters
ᵗʰᵃᵗ . ' ! (I'm waiting for your design update as PR.)https://t.co/KySMTIsa56 pic.twitter.com/JlwertLBe6
— Ginpei (@ginpei_en) July 21, 2018
7月。 。Unicodeで定義されている特殊な見た目の文字を表示する。
変わった見た目の文字を使ってる人をたまにTwitterで見かけて、それを調べてたのが始まり。あー逆さ文字とかもやりたいな。
デザインがひどい。
Potoshop (v0-1)
眠れないので作った。画像をリサイズして枠付けるやつ。WindowsでWin+Sで画面撮影したのをTwitterに貼り付けるのに便利。https://t.co/SAOfZktczc pic.twitter.com/U7TCRfNqzv
— 高梨ギンペイ (@ginpei_jp) August 7, 2018
8月。クリップボードから画像を貼り付け、サイズ変更や枠の付加を行うだけ。Photoshopではない。
ある晩眠れずにいて、諦めて起きてぽちぽちしてるうちにできあがったもの。これくらいの編集ができるやつが欲しかった。
その後もっとあれこれしたいなと思って一から作り直していて、当時の面影は残っていない。今でもだらだらいじってる……。一度終わらせた方が良いんだろな。
画像アップロード前に小さくして転送量を減らすRailsアプリの例
8月。Canvasを使って画像を小さくし、転送量ひいては転送時間を減らす例。Railsの体だが主となるのはもちろんJavaScript。
知人から相談されて「アップロードを早くする」コードを書いたついでにまとめたもの。
その後Exifのorientation情報(回転、反転)に対応してないことに気付いた。他のところで対応したけど、こいつに反映してないや。
RailsをDockerで動かす例
8月。Dockerを使い、開発環境自体にRubyをインストールしないで始めるやり方。
前述の例を作った、さらにそのついで。
書いてみたは良いけどどうなんだこれ。
Understanding transform:matrix()
- CSS transformのmatrix()を一瞬で 完 全 理 解 できるやつ作ったよ。 | Ginpen.com
- Understanding transform:matrix()
- ginpei/understanding-transform-matrix
【作った】CSSの `transform: matrix()` を一瞬で理解できるやーつ。スマホでも動くよ。https://t.co/iebDKtrRdV
— 高梨ギンペイ (@ginpei_jp) November 13, 2018
11月。CSSの transform
で使える関数 matrix()
の動きを視覚的に試せるもの。
行列式を分かりやすく解説する記事を読んで感動したのがきっかけ。読みながら「あーそうか matrix()
のやつはこういうことだったのか!」となって、「あれそうだっけ? 動かしてみるかー」みたいな流れから。
Code Chat Cat
未完成。リアルタイムにMarkdown文書を共有する。ワークショップでの利用を想定。
電子黒板みたいな感じで、講師が書いて生徒がそれを見るってのが欲しかった。HTMLとして出力された結果が生徒の手元にあるような状態になる。パワポ的なやつと比べた利点は、視力とかに依らない点、任意に(5分前とか)過去のものを見られる点、サンプルコードをコピペできる点、リンクが活きる点、そして生徒の反応(質問)をすぐ反映して全員に届け、残せる点。
他にも画像他のファイル添付だ控えめなコミュニケーションだ何だとかんだと考えていたら、UIどうしようと悩んで手が止まってしまった。欲しい機能を出して再設計して出直そう。
名前が気に入ってる。なお犬派。
やったこと
JavaScript勉強ついでにブラウザー拡張(アドオン)を作ってみようぜ会
- JavaScript勉強ついでにブラウザー拡張(アドオン)を作ってみようぜ会
- ginpei/webextension-pomodoro: Example extension (add-on) of Pomodoro Timer
- ブラウザー拡張(アドオン、エクステンション)の作り方
6月。JavaScript自体の初級者向けのワークショップ。
やり方わかってきたので近くの人にお裾分けしたやつ。ちゃんと初級者の人も来てくれて、やった甲斐があった。メッセージとかで通信して「境界をまたぐ」というのは、やっぱり難しい概念なのだと再確認。どうやったらうまく伝えられるだろうか。
資料作成は、せっかくなのでVuePressに挑戦。
配列とかおれおれAdvent Calendar2018
【書いた】こちらの日付が変わったので公開。今年もやるよ。 / 配列のコンストラクターを改めて見てみる(配列とかおれおれAdvent Calendar2018 – 01日目) https://t.co/1v6uqjmxf4
— 高梨ギンペイ (@ginpei_jp) December 1, 2018
12月。JavaScriptの配列と繰り返しにまつわる記事を1日から24日まで毎日投稿。
毎年恒例のひとりアドベントカレンダー。今年は始まる前に完成原稿を15日分程用意できたので、毎日締め切りに追われることはなかった……と言いたかったんだけど、結局毎日見直して大幅に加筆修正していたので、忙しかった。新規に書きたくなってしまったものもあり、実はいくつか記事が余った。
最初は毎日メソッドをひとつずつ紹介する程度のつもりだったんだけど、気が付いたら仕様書を読み漁っていた……。楽しかったからいいけど。
読者の想定レベルも謎な感じになってしまった。いやおれは楽しかったからいいけど!
来年は12月に入る前に完成原稿を24日分用意したい。
Lightning Talks
いろんな人の話を聞きたいなと思って、ここ数年個人的にLT会を主催している。
気が向いたときにやる感じなんだけど、2018年は5回開催できた。月1くらいを目指したい。参加人数が全然読めないんだよなー。3人だったり13人だったり……。
仕事
改善してこ。
おしまい
全体的に気持ちが向上してきた一年だった。やっぱり何か作るのは良いなあ。
Vue.jsとReactのアプリをいくつか作ってみて、ようやくわかってきた気がする。あとTypeScriptにもようやく手を出せて、こいつはなかなかのgame changerじゃねえかと。
本当は「毎月ひとつ何か作って出す」が目標だったんだけど、あんまり達成できなかった。結果的にそれくらいの数はやれたからヨシとするか。
2019年
作りかけのものは完成させたいし、他にも作りたいものはまだまだあるので、どんどん作ってゆく所存。
あともっとワークショップやりたいでござる。