画像のモザイク処理をブラウザ上で実現する方法 (JavaScript + Canvas API)
生きていると、モザイクをかけたい写真がたまに出現します。
なので、個人開発しているサイトに画像のモザイク処理ができるページを作りました。
この記事では、上記ページ実装のため、画像のモザイク処理をブラウザで実現するために色々調べたものをまとめています。
ブラウザ上で画像をいじるにはCanvas APIが便利
Canvasとそこに描いた画像のピクセル操作 についてはMDNにまとめられています。
サンプルコードも充実しており、ここに書いてあることを組み合わせればモザイク処理も可能です。
おおよそ上記MDNに書いてあるのですが、 Canvas APIで画像のピクセルデータを取得/書込することで画像の編集が実現できます。
Canvasに描画した画像データは、Canavs contextのgetImageData関数によってImageData形式で取得ができ、
書込みはCanvas contextのputImageData(myImageData, dx, dy)で、ImageDataとその描画始点座標を指定するだけです。
ImageDataとは
ImageDataには ImageData.data,ImageData.width,ImageData.heightプロパティが存在します。（詳しく知りたい人はMDN読んで！）
ImageData.dataは、左上から順にピクセルデータのrgba値が並んでいるUint8ClampedArrayという型つき配列です。
例えば、以下のような2*2ピクセルの画像の場合、
ImageData.dataは以下のデータになります。
[66,133,244,1,0,151,167,1,255,171,64,1,84,65,74,1]
このImageData.dataの値を変えて、前述したputImageDataでcanvasに画像を描画すれば、変更したピクセルデータに基づいた画像を作成する事ができます。
ただ、前述した通りこのImageData.dataはただの配列ではなく、Uint8ClampedArrayです。
各要素には0から255の整数しか入れる事ができず、あらかじめ配列の長さも決まっているので、この形式のデータを1から作りたい場合はcanvasContext.createImageData(width, height)という具体にデータの作る必要があるので注意が必要です。
CanvasRenderingContext2D.createImageData() - Web APIs | MDN
ImageDataを軽く理解すれば、モザイク処理を実現するロジックを自前で用意すれだけで、任意の画像についてモザイク処理を行う事ができるぜ！
モザイク処理のロジック
前提として、日常的に使う「モザイク」という単語は、英語で言う「Pixalate」で、画像の粒度を単純に荒くすることでなりたっている（「mosaic」って単語だと意味が違ってくるっぽい）。
このモザイク処理( = Pixalate)をするには、
- モザイク粒度の大きさを定義して
- その大きさごとに同じ色を描画する
と言う感じ。
粒度ごとに描画する色は対象とする画像に基づいて選択すれば良さそうです。
ざっと調べた感じ、この時の色をどうするか、明確な定義はないっぽくて、 正方形におさまる部分のどこか1pxの色でも、正方形内の色の平均をでも、それらしいモザイク処理になってました。
処理的にはどこか1pxの色を選択するのが楽だったので、今回は前者の方法で色を決めています。
また、実際にImageData.dataの操作で正方形の描画をするときは、
- dataはただの1次元配列形式なので、横幅と高さの考慮は自前で行う必要がある
- 色の変更は画像の横幅を考えて端数処理を行わないと、画像右端の色が左端に来てしまう
などの点に注意が必要です。
実際のロジック
そんなこんなで実際に自分が書いたコードはこんな感じ。
const mosaicPixelSize = getMocaicSize(); // ユーザーの入力によってモザイクの大きさを数値で指定 const ctx = canvas.getContext("2d"); const cWidth = canvas.width; const cHeight = canvas.height; const imageData = ctx.getImageData(0, 0, cWidth, cHeight); // 元画像のImageData if (!imageData) { return; } const dst = ctx.createImageData(canvas.width, canvas.height); // 新しく作るモザイク画像のImageData for (let y = 0; y < cHeight; y += mosaicPixelSize) { for (let x = 0; x < cWidth; x += mosaicPixelSize) { // 左端から漏れなく対象に含める if (x % cWidth < mosaicPixelSize) { x -= x % cWidth; } const base = (y * cWidth + x) * 4; const rIndex = base; const gIndex = base + 1; const bIndex = base + 2; const aIndex = base + 3; const r = imageData.data[rIndex]; const g = imageData.data[gIndex]; const b = imageData.data[bIndex]; const a = imageData.data[aIndex]; [...new Array(mosaicPixelSize)].forEach((v, yi) => { [...new Array(mosaicPixelSize)].forEach((v2, xi) => { // 画像の反対側のピクセルは処理しない if ( x % cWidth !== 0 && (y * cWidth + x + xi) % cWidth < mosaicPixelSize ) { return; } dst.data[base + yi * cWidth * 4 + xi * 4] = r; dst.data[base + yi * cWidth * 4 + xi * 4 + 1] = g; dst.data[base + yi * cWidth * 4 + xi * 4 + 2] = b; dst.data[base + yi * cWidth * 4 + xi * 4 + 3] = a; }); }); } } ctx.putImageData(dst, 0, 0);
このような具合でモザイク処理を施した画像のデータを作る事ができます。
あとはここで作ったImageDataを描画するCanvasを用意して、前述したputImageDataでデータを入れれば画像ができあがります。
画像をダウンロードなどしたい場合は、CanvasのtoDataURLメソッドを使うなどしてみましょう。
以上の諸々をいい感じに行っているのが
です。
このページでは、ユーザーの入力でモザイクの粒度も選べるようになっているので、よかったら試してみてね。
モザイク処理、意外と実装できるんですな〜。
ブログをかいて人生に納得する技術
何かと「時間を無駄にしてしまった」と感じやすい問題
自分は何をするにしても、達成感がないと時間を無駄にしたように感じてテンションが下がりがち。
本当に時間を無駄にしたわけではなくてもそう思っちゃうことがしばしば。
GWなどの長期休暇も何かを達成した感じがないと、自分の時間の使い方に納得ができず、最終日にとてもテンションが下がってしまう。
「こんなに時間があったのに自分は何をしていたんだ・・・。うう・・・。」
と、考えたくなくても考えてしまう。
テンション下がるのが不快で嫌いなので、できればそれを避けたい。
達成感は主観なので、コントロールできる
「達成感」はあくまで感情なので、自分で「何かを達成した」と思える事が大事。 逆にいうと、客観的に何かを達成している必要はなくて、主観的に達成したと「思えれば」よい。
ブログを書くと達成感、味わいやすい
自分がやったことをブログにまとめると、うまく達成感を味わえるということに最近気づいた。
- ブログを書くと最近の振り返りになるので、忘れていた色々な物事を思い出す事ができる
- 文章にすると、なんとなく考えていることも形になり「やった」感がでるので、達成感4割増しくらいになる
- 「ブログを書いた」こと自体も1つの達成感になる
という感じで、一石二鳥以上にvery good。
文章にまとめる、という意味では日記も同じかも知れないが、
- 他人に読まれた事実が発生しやすい
- 他人の目を意識してちゃんと文章を書きやすい
といった事情で、他人がアクセス可能な場所に何かを書く方がより多くの達成感を味わえそう。
自分の物事に対する考え方・感じ方をすぐに変えることは難しいが、自分がどう感じるか分かっていれば、対策はいくらでも用意する事ができる。
試験勉強と同じように、自分の性格に対する「傾向と対策」をして、人生に納得しながら生きてゆきたい所存である。
「強いエンジニアは結局休日に勉強してるじゃん」って思うけど
これまで何人も強いエンジニアと出会って、
「なんで自分はあの人と比べて何もできないんだ・・・。」と何度落ち込んだことか。
ただ、最近強いエンジニアの仕組みを理解してから落ち込むことは無くなった。
それについて書いていく。
（強いエンジニア達本人に聞いたわけではなく、観察してえられた個人の見解です）
気づき：強いエンジニアを見て落ち込む要因は2つありそう
- 1つは今の知識や技術力の差。
書くコードの違いだったり、成果物ができるまでの時間に差がありすぎたり、PRレビューで自分が思いもしなかったウルトラ解決策を何度も提示されて、自分の実力の無さを感じて落ち込む。
- もう1つは新しいことを学ぶときの時間の差。
お互い知らない技術だったはずが、いつの間にか強いエンジニアはその技術に習熟(しているように見える)して、自分は理解不足で取り残されているという状況が発生しがち。
この時、自分には才能がないのかと感じて落ち込む
気づき：勉強すればするほど効率があがるので、短時間で多くのキャッチアップが可能になる
勉強時間と学習効率は比例する（収穫逓減の法則はありそうだけど）
勉強時間と学習成果は指数関数的
なので知らないことを勉強するとき、強いエンジニアが1時間で済むことでも、自分は10時間かかったりする。
つまり、新しいことを学ぶ時にかかる時間の差は、才能ではなく、それまでに勉強した時間の差から生まれる。
気づき：強いエンジニアは結局、休日に技術のキャッチアップをしている
自分が頑張ってない間、強いエンジニアは頑張ってることが多い。（休日に限らず平日の業務後とかも）
学習効率が良い人が自分より勉強しているから、差が開くのは当然。
気づき：しかし強いエンジニアは「(苦しんで)頑張っている」というわけではなさそう
強いエンジニアとお話ししてみると、勉強自体をわりと楽しんで(?)やっている雰囲気がする。
つまり、周りが想像するほど「頑張っている」とは思ってなさそう。
なので、「強いエンジニアに追いつくために自分も(苦しんで)頑張らなきゃ！」はちょっと違いそう。
苦しくない方法を探さなければいけない気がする。
持論：自分にとっての「他人からは頑張っているように見えるが、その実感はない」行動を探すとよい
強いエンジニアを真似ようとして「(苦しんで)頑張って」も上手くいかないのは、人によって「苦しく感じない」領域が違うから。 同じ行動をしようとしても、苦しさを感じる行動が違うんだから真似はできない。特にその行動の継続は難しい。
なので自分にとっての「苦しくない領域/方法」を見つけて、それで頑張るのが良さそう（エンジニアに限る話ではない）
エンジニアに限っても、勉強の方法はたくさんある
- 読みもの
- 技術本を読む
- 公式ドキュメントを読む
- ソースコードを読む
- 技術ブログを読む
- 手を動かす系
ということで、自分は休日に勉強なんて無理だ〜〜！と思っていても、実は自分に合う勉強方法を知らないだけかもしれない。
それが見つかれば同じように勉強に時間をかけられる可能性が高い。
（自分は 技術本を読むのと個人開発がそれほど苦しくないし、むしろ楽しい。それ以外はわりと継続するのが苦しめ。）
持論：人生はそれ以外にもやるべきことがたくさんあるから、自分にとって納得のいく時間の使い方をしていれば、それでよし！
強いエンジニアとの実力差は過去の勉強時間から生まれるもの。それが見えにくいから落ち込むだけ。
「勉強せずに東大受けたら落ちた！」と言って落ち込んでるのと同じ感じ。どうしても落ち込むなら物の見方を変えるのがよさそう。
また、人生は勉強以外にもやるべきことがたくさんある。
突き詰めると、限られた人生の時間で何をするべきかは個人の好みによりけりで、勉強に時間をかければ、それ以外のことをする時間はなくなる。
自分が納得のいく時間の使い方をするのが一番だから、色々工夫して勉強できなかったとしても、自分を追い込む必要はない。
それでも強いエンジニアに追いつきたい場合、自分の続けられる勉強方法を見つけてコツコツ積み上げていくしかない。
個人的に、自尊心≠自己肯定感を持って生きることは心の健康的に大事。
そして努力を定期的にしていると自尊心を保ちやすいから、結局人生を楽しんで過ごすにはコツコツ勉強を継続するのがいいと思う。
自分に合えば努力は楽しいものになる(「勉強≠苦しい」)ので、いい塩梅でバランスをとって生きていこう。
PRを小さく保つための、commit管理3TIPS
Summary
- 何となくでも良いのでconventional commitの仕様にしたがってcommitを作る
- 変更はPR作る直前までcommitしない 3.レビュー以前の変更はfixupとforce pushで既存のcommitに入れる。追加のcommitは作成しない
解説
1. 「何となくでも良いのでconventional commitの仕様にしたがってcommitを作る」について
conventional commitとは、「人間と機械が読みやすく、意味のあるコミットメッセージにするための仕様」です。（公式から引用https://www.conventionalcommits.org/ja/v1.0.0/ )
この仕様(の特にコミットメッセージのタイトル部分)に従ってコミットを作るようにします。 タイトル部分の仕様はこんな感じです。
<type>[optional scope]: <description>
feat(api): メッセージ取得APIの実装 fix(app): コメント数がおかしかったのを修正 test(web): 爆発テストを作成 docs: コンポーネントについてのコード規約を作成
typeにどんな値が推奨されているかは公式ドキュメントを参照してください。 https://www.conventionalcommits.org/ja/v1.0.0/
このconventional commitの仕様を意識すると、commitのメッセージが分かりやすくなるだけではなく、 commitに含まれる差分が整理され、commitの内容自体が疎結合になっていく気がします。
「タイトルが綺麗につけられる=commit内容の意図がはっきりしている」 なので、1つのcommitに複数の意図を持つ差分を含めることがなくなります。 また、そうして作成したcommitは単独で切り出してcherry-pickにより別ブランチに移すことも容易なので、意図せず差分が大きくなったときにPRを分割するのがとても簡単です。
conventional commit自体は、レビュワーや将来commitを見る人がcommitの内容を理解しやすくすることが1番の目的なようですが、 これを意識することでcommit自体を綺麗に整理するクセを自然と身につけられるのが素晴らしいと思っています。
2. 「変更はPR作る直前までcommitしない」について
これはTIPS1を実現するために有用です。
PRにしたい差分が大体揃ってから、ファイルや行ごとにcommitを作ると、タイトルのつけやすいcommitを作成しやすくなります。
ファイルや行ごとのcommitが手間になりそう、と思う方がいるかもしれませんが、VSCodeだとGUIでカンタンにできるので、余計な工数がかかる心配もないです（intelliJでも同じようにできた気がしますが、使ってないエディタなので覚えてない）。
もちろんgit add -pなどを使ってCUIでも行えます。
逆に、PRをレビューに出すまでは適当にcommitしておいて、レビューに出すまえにgit reset --soft hashhashで差分をすべてローカルに戻して綺麗なcommitに整理する、ということ方法でも同じことができます。
個人的にはめんどくさいので、最後までcommitしない方法が好みです。
3.「レビュー以前の変更はfixupとforce pushで既存のcommitに入れる。追加のcommitは作成しない」について
綺麗なcommitを作ってPRを作成してレビューに出す前、 「typo見つけた・・！」 「やっぱり変数名変えたい・・・！」 「テストケースが不十分なので追加しよう・・・！」 といった具合に、変更を追加したいことはよくあります。 そんな時は、追加のcommitを作成するのではなく、既存のcommitに変更を加えて内容を修正することで、 中途半端な内容のcommit作成を防ぐことができます。 余計なcommitを作らないことで、後から一部の変更だけ別PRにしようと思った場合に複数のcommitを頑張ってcherry-pickする必要もなくなります。
自分は
git commit --fixup ${変更を加えたいcommit hash}
git rebase -i --autosquash ${変更を加えたいcommitの1つ前のcommit hash}
で行うことが多いです。
すでにGitHubなどにcommitをpushしている場合は、
git push --force-with-lease
でremote-branchをローカルで書き換えます。
2021年振り返り
仕事💼
転職した(eureka → stand.fm)🎸
「色々やりてぇ！」と思って6月に転職しました（理由はざっくりまとめました）。
今日から https://t.co/1ILwMEjxiv で働きます！
— spice (@rabspice) 2021年6月1日
よろしくオネシャス！！！🔥🔥 pic.twitter.com/dLALk83rpv
eurekaではフロントエンドエンジニアとしてReact、Vueを触っていたのですが、 stand.fmではReact/React Nativeで書かれたwebとアプリ、JSで書かれたバックエンドとかGCPなど、諸々触るフルスタックエンジニアとして入りました。
業務で担当したことない範囲が多く不安だったのでしたが、まあなんとかなっています。 分からないことに出会ったら、分からない要素を分解して、勉強する。 この繰り返し。
最近はフロントエンドよりバックエンドに興味が傾いている気がします。 勉強がんばろう。
副業した💻
初めて副業をしました。 役割はReactを書くフロントエンドエンジニアでした。
業務内容というより、初めての副業で得た学びとしては
- 本業が忙しいときに副業すると、休める時間がなくなってつらくなるので、本業が落ち着いている時がよさそう。
- 副業していると個人開発とかOSS活動する時間と精神的余裕がなくなる。
- 今の時代のエンジニアなら、稼ぎたいと思ったときにすぐお金を手に入れる手段がある。
ということです。 よく言われてることではありますが、これを自分の体験として学ぶことができたのは結構大きいと思います。今後のキャリアを考える時などに役立てることができそう。
2022年はあまり副業せず、個人開発やOSS活動の比重を上げようと思ってます。 副業やるとしても短めになりそう。
プライベート😎
引越した🏡
狭い部屋のリモートワークに耐えられず引っ越しました。 広ければリモートワークは全然苦しくないと知りました。
港区の人もお店も少ない地域から、商店街が多く活気のある中野区に引越したので、生生活リズムとか休日の過ごし方も大きく変わりました。
心豊かに生きていこうぜぇ〜！
スノボ始めた🏂
「ウィンタースポーツしたことない」という会話から、前職の方に誘われてデビューしました。 初日に多少滑れるようになってたので才能がありましたね。 よい景色が心地よいし、よい運動になるし、まあ色々楽しい。 今シーズンはまだ行ってないのですが、板を買って本格デビューする予定です。
ちなみにマリオカートとスノボはなんか似てると思いました。
実家のうさぎが死んじゃった😢
初めて飼ってたペットのうさぎが死んじゃった。めちゃくちゃ悲しかった。
「悲しいってこういう感情なのか、涙がとまらん・・・。」
という感じで、25歳にして初めて本当の「悲しさ」を味わった気がして、やっと人間になれた気がします(?)。 今でも思い出すと泣いちゃうので、写真とか動画は見れません。
将来(5年後とかに)ペット飼いたいけど、 複数飼いしないと死んだときに悲しさから立ち直れなさそうと思いました。
ジャルジャルにハマった👯♀️
毎日見てます。 12月、オンラインサロン会員にもなりました。
今年登場した奴ではないのですが、涙腺コルクって奴が好きです。
ちなみに年越しはジャルジャルのコント見て過ごす予定。
映画をたくさんみた🎞
正確に数えてないですが、月に3~4本見てました。 印象に残っているのは、「ラストナイト・イン・ソーホー」です。 ストーリーも好きですが、特に演出が印象的でした。 60年代を彷彿とさせる音楽がよかったなぁ。
来年のこと🤔
まず文章のアウトプットを増やしたい
これに関しては毎年同じこと思って達成していないのですが、ScrapBoxと出会ってから行動がかなり変わったので、この流れで軽く達成できると思ってます。
思ってることを文章にするまでに抵抗があるので、息をするようにアウトプットできる習慣ができたら大成功です。
技術的な勉強や個人開発、OSS
バックエンド系の知識と経験を増やしたいです。 技術書で知識を身に着けつつ、個人開発とOSS活動を実践の場と捉えた両輪でバランス良く学習を回していきたい。
あと最近GraphQLにお熱なので、GraphQL系のOSSには必ずcommitしたい。
まあやればできるでしょう。やりなさい。
海外に住む計画と準備
一旦海外に住んでおきたい気持ちがあるので、計画を立てます。 転職はあまり考えていないから、時差の少ない英語圏の国に行ってリモートで働くのがいいかもしれない。 軽く考えるとリモートワーカー向けのビザを使うか、ワーホリビザの利用が現実味高そう。
早く海外に住まないと、他のやりたいこと(中古リノベマンション買うとか)がスタックするので、サクッと実行しておきたい。 これは目標とか夢じゃなくて、単なるタスクです。
計画を建てると同時に英語の勉強するかぁ〜、といった気持ち。
その他細々
- 最近イラストを描き始めたので、人に見せれるほど上手くなりたい。 まあ趣味の範囲なので気楽に続けようと思います。継続は力なり。
- たくさん美術館に行きたい。
- 肌を綺麗にしたい。ニキビができにくくなっているけど、まだちょくちょくできるし跡が残る。色々試して改善していきたい。
- ジャルジャルのコントに出演したい。オンラインサロン会員は応募権があるので、応募しようと思ってます。
2021年に買ってよかったもの
2021年にお金を使ってよかったものを紹介します。 (厳密には買っていないもが含まれますが、大目に見てください)
1. 食洗機
4万円くらいのをAmazonで購入しました。
洗い物のめんどくささを無くしたくて買ったけど、思った以上の価値がありました。
洗い物が多くなるから使うのやめとこうかな…」と思って使わなかった食器(調理中に迷う大さじ小さじ測るやつ、一回の食事で同時に使うか迷うフォークとスプーンなど)を躊躇なく使えるようになりました。 これが思った以上に良いです。
2. ロボット掃除機
Amazon ブラックフライデーセールで30%OFFで買いました。 1台で吸引と拭き掃除ができるやつで、ゴミ自動回収機能付きのやつです。
ちょっと外に出るときに起動することが多いけど、家にいるときに起動しても騒音はそれほど気になりません。
掃除の手間が減ったのはもちろん、「そろそろ掃除しなきゃな…」と感じることが無くなったので、精神的にかなり楽。
掃除の頻度が高くなるので、自分で掃除していた頃よりかなり綺麗な部屋が保ててQOL爆上がりです。
1台で拭き掃除対応しているので、余計なスペースも取らなくてGOOD。
また、ロボット掃除機を動かすため、床に物を放置することがなくなりました。 これもロボット掃除機購入の大きなメリットです。
3. 広めの家へお引越し
新型コロナが流行ってからリモートワークが多くなったので、1k→2kに引越しました(賃貸です)。
引越し前に住んでいたのは新卒上京時に契約した狭小6畳1kで、寝るためだけの部屋でした。 リモートワークが始まってからデスクや椅子を購入したけど、狭い部屋に家具を置くと窮屈で仕方がなく、作業に集中できない&リラックスもできないので、リモートワークが大嫌いになっていました。
引越した2kの部屋は、収納やキッチンも含めた広さで言うと2.5倍くらいで、この広さならば家の中で仕事/プライベートを分けることもでき、リモートワークがむしり好きになりました。
部屋の広さでリモートワークに対する苦痛がこんなに違うとは想像ができませんでした。一人暮らしで狭めの部屋に住んでリモートワークに苦しんでいる方には、ぜほ引越しをおすすめしたいです。
4. FP(ファイナンシャルプランナー)3級
去年から勉強して1月に取得しました。 「お金に関する知識が無いな…」という思いから勉強を始めました。結果的に大正解です。
(↑勉強に使った本)
普段よく聞くけど詳しく知らなかった知識(ふるさと納税とは？NISAとは？保険入ったほうがいい？など)を詳しく理解できましたし、自分に関係のある税金の知識(給与と収入の間にどんな税金があるのか、副業したらどんな税金がかかるのかなど)やその節税方法も理解できました。
また、将来起きうるライブイベントに関する知識(住宅購入、相続、贈与などなど…)も全般的に獲得できました。
人生に関わってくる税金について理解したい方や、社会人経験が浅くお金についでの知事が無いと感じている方(自分はこのケース)など、幅広くおすすめできます！
ちなみに、用事があって銀行に行ったとき、面倒くさそうな営業を「FP3級持っているので一応知ってますね」でスキップできたのは思わぬメリットでした。
5. 美術館のチケット
3月頃、超久しぶりに美術館へ行きました。
印象派の展示だったのですが、軽く雑誌などで印象派について勉強してから鑑賞しました。すると、単純に観る100倍は面白かった！
絵の描かれた時代背景や作家の人生、当時流行っていた画風など、知れば知るほど興味深い世界が広がっていました。知識を得てから絵を鑑賞すると、自然と色んなことを考えられます。
その後、興味のある展示やギャラリーをたまに訪れるようになりました。新しい趣味の獲得です。
久々の美術館がきっかけで、今後の人生を豊かにしてくれる趣味に出会うことができました。誘ってくれた友人には感謝しかない。
(↑印象派を初めて知るならこれが見やすくておすすめ)
6. バーミキュラのフライパン
2万円弱の一品。フライパン変えるだけでこんなに味が違うのか！と感動しました。
以前は適当に買ったテフロン加工のフライパンを使っていましたが、だめになってきた&料理(自炊)をよくするので良い物を探して購入しました。 「こんなに高いフライパン、ほんとに値段に見合った価値があるのだろうか…」と半信半疑で購入したけど、その価値はありました。同じ食品でもフライパンが違うと美味しさが段違いです！ いつものスーパーで買う豚肉も、食感が変わって超美味しくなったし、野菜も余計な水分が出てこなくてシャキシャキで美味しく調理できます（美味しさをあらわす語彙力がない・・・）。
ただ、調理前にフライパンの温度を十分上げないと必ず焦げ付いてしまうので、料理の手間がちょっとだけ増えるのが注意点です。 普段料理をよくする人ならぜひ買ってみてほしい一品。
7. 電動コーヒーミル(いただきもの)
退職の送別品で頂きました。
それまでは手動ミル使っていて、一杯分の豆を挽くのに5分以上かけていました。電動になるとコーヒー淹れるのに躊躇がなくなり、お家で美味しいコーヒーが沢山楽しめるようになりました。 ありがとうございます！
8. 近くのコーヒースタンドのコーヒーn杯
プロの入れるコーヒーが美味しいのもあるけど、「常連のお店ができた」ことが心の健康に良いし、人生を豊かにしてくれています。
リモートワークが多くて一人暮らしだと、人と直接話すことが少なくなってしまいます。 常連になったことでお店の人と仲良くなり、コーヒーを淹れてもらう間に色んな話ができています。
何も気にせず気軽に話せる時間は、リモートワークが多い生活感の中で癒やしの時間です。
良いお店に巡り会えてヨカッタナ〜！
9. iPad mini 6
初めてタブレット買いました。
休日に技術的なインプットをしたい時、カフェにわざわざmacを持っていて開くのが嫌だなと感じていました。そんな時にちょうど良いサイズの新型iPad miniが出たので買いました。 技術系の記事やGithubを見るのがとても楽になりました。スマホに比べてもやはり、断然見やすい。おかげでインプットが増えました(気がします)。
また、iPad miniのおかげで絵を描くことも始めました。紙だとそんなに続かなかった趣味ですが、今はそれなりに続けられています。人生が豊かになりそうで嬉しい。
10. 好きな人の絵
好きなイラストレータさんの絵を買いました。デジタルで描いた絵なので原画はなく、ジークレープリントなる方法で印刷されたもの。かなり質の良いプリントです。
5枚限定のジークレープリント、1番左の「water blue」が完売いたしました！
— あおのこ (@aonocom) 2021年12月4日
ご購入くださった方々ありがとうございました…！
真ん中と右のジークレーはまだお在庫ありますのでぜひ🕊 pic.twitter.com/m10QRIOyT1
(あおのこさんの「water blue」という作品を購入しました)
絵を買うのは人生で初めてでした。
好きな絵が部屋にあるとそれだけで気分があがります。好きなだけ鑑賞できるのもがめちゃくちゃ良い。ミニ美術館が部屋にある感じです。
将来は好きな絵をたくさん集めて部屋に飾りたいな〜、という願望も生まれました。
その他
- バランスボール:仕事中たまに座って腰痛対策
- ジョイ W除菌ミラクル泡スプレー:シンクを使ったらスプレーしておくと綺麗な状態が保てるので最高
- スクラビングバブル超強力トイレクリーナー:これがあればトイレブラシいらないので最高
- CO2濃度計:CO2濃度を気にしてから作業や睡眠の質が良くなった気がする
使いこなしたいVSCodeのキーボードショートカット達
VScodeのキーボードショートカットは大量にあってカスタマイズもできる。
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
しかしそれゆえ、使いこなしたいキーボードショートカットを調べるのに時間がかかって結局使わないことも多い。
ということで、使いこなしたいキーボードショートカットをリストにしておく。 新規ファイル作成やコピーなど、色んなアプリで共通してるやつは省きます。
使いこなしてるやつ
ファイル履歴からファイル移動
Command (⌘ コマンド) + p
コマンドパレット開く
⌘ + Shift (⇧ シフト) + p
ターミナルタブ閉開
⌘ + j (タブを開くときにターミナルタブにカーソルがフォーカスされるので、ターミナルタブにカーソル移動したいときにも使える)
サイドバー閉開
⌘ + b
単語選択
⌘ + d
単語複数選択してマルチカーソル
⌘ + d 連打
上下にマルチカーソル展開
⌘ + Option (⌥ オプション) + 矢印上下
入力候補表示
⌘ + i
クイックフィックス候補表示
⌘ + .
行削除
⌘ + ⇧ + k
選択行を行ごと移動
Option (⌥ オプション) + 矢印上下
使いこなしたいやつ
ウィンドウ分割
⌘ + \
ウィンドウ移動
⌘ + ${ウィンドウ番号} (e.g. ⌘ + 1)
ファイルエクスプローラーにフォーカス
⌘ + ⇧ + e
定義ジャンプ
F12
シンボルをリネーム
F2
カーソルを行飛ばしで移動
なさそう。欲しい。
