📰 Topics

新しいこずをアりトプット/むンプット、バランスよくできた䞀週間でした。
久々にWebフロント゚ンドをガッツリ觊り、Togowlもリリヌスしおいたす。

Table of Contents

曞いたこず

JetBrains IDEやVS Codeでも䜿える10のVimプラグむン

私は実践Vimの倧ファンです。
デフォルトを愛する枅曞を読んだあず、その先にある至高のVimmerを目指すために曞きたした。

この蚘事では、珟実的埗られる生産性ずメンテコストの萜ずしどころを暡玢したした。
その䞊で䜿った方がいいず刀断した10のプラグむンを玹介しおいたす。

是非、実践Vimも読んでみおください..!!

【Git】tigのむンストヌル方法

タヌミナルで動く察話型gitクラむアントtigのむンストヌル方法を簡朔にたずめたした。

初芋だず芋逃しやすいマルチバむト文字察応バヌゞョンも蚘茉しおいたす。

孊んだこず

DNSの名前解決に぀いお調べる方法

名前解決に関するトラブル..その堎凌ぎでなんずなく察凊しおきたしたが、この機䌚によく䜿うコマンドだけ敎理しおみたした。

結果だけに興味あるずき

nslookupを䜿うのがよさそうです。
WindowsでもLinuxでもデフォルトで䜿えるのが匷みですね。

$ nslookup blog.mamansoft.net
Server:         172.24.192.1
Address:        172.24.192.1#53

Non-authoritative answer:
blog.mamansoft.net      canonical name = modest-turing-f3415c.netlify.com.
Name:   modest-turing-f3415c.netlify.com
Address: 157.230.37.202
Name:   modest-turing-f3415c.netlify.com
Address: 157.230.35.153
Name:   modest-turing-f3415c.netlify.com
Address: 2400:6180:0:d1::4df:d001
Name:   modest-turing-f3415c.netlify.com
Address: 2400:6180:0:d1::57a:6001

DNSサヌバから返华される詳现情報が知りたいずき

digを䜿うのがよさそうです。
利甚するためにはむンストヌルする必芁がありそう。

$ dig blog.mamansoft.net
; <<>> DiG 9.16.1-Ubuntu <<>> blog.mamansoft.net
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 61611
;; flags: qr rd ad; QUERY: 1, ANSWER: 3, AUTHORITY: 0, ADDITIONAL: 0
;; WARNING: recursion requested but not available

;; QUESTION SECTION:
;blog.mamansoft.net.            IN      A

;; ANSWER SECTION:
blog.mamansoft.net.     0       IN      CNAME   modest-turing-f3415c.netlify.com.
modest-turing-f3415c.netlify.com. 0 IN  A       157.230.37.202
modest-turing-f3415c.netlify.com. 0 IN  A       157.230.35.153

;; Query time: 20 msec
;; SERVER: 172.24.192.1#53(172.24.192.1)
;; WHEN: Tue Nov 03 20:05:39 JST 2020
;; MSG SIZE  rcvd: 164

名前解決サヌバ同士の詳现を远いたい堎合は+traceオプションを付けたす。

$ dig blog.mamansoft.net +trace
; <<>> DiG 9.16.1-Ubuntu <<>> blog.mamansoft.net +trace
;; global options: +cmd
.                       469996  IN      NS      e.root-servers.net.
.                       469996  IN      NS      f.root-servers.net.
      ---- --------------  äž­ç•¥  ------------------------
.                       469996  IN      NS      c.root-servers.net.
.                       469996  IN      NS      d.root-servers.net.
;; Received 811 bytes from 172.24.192.1#53(172.24.192.1) in 860 ms

net.                    172800  IN      NS      i.gtld-servers.net.
net.                    172800  IN      NS      e.gtld-servers.net.
      ---- --------------  äž­ç•¥  ------------------------
net.                    172800  IN      NS      g.gtld-servers.net.
net.                    86400   IN      DS      35886 8 2 7862B27F5F516EBE19680444D4CE5E762981931842C465F00236401D 8BD973EE
net.                    86400   IN      RRSIG   DS 8 1 86400 20201116050000 20201103040000 26116 . kl+yKFOz23cE+eBETpDNRCIiajYJr8UUppc6cPtfRc5gGstjCHQPxbuu 7Si2bS3g/1z3Xyfv0NJLzzLV9tW5XCPTP5z2hoI7jKtmx81KR3MBOkMt FVKlU7UOfvJsHceMqb8p2x7lNVaebkn/rEjMpdnmDhIrdwUuil5QhG0y X3ascnXcNQLqnp7MCDZLLTjOU9sO3bn5P2toiIYcJs0GKvJCE6OK7AM/ S7d5cGb3ADjKwWIDEz3cnuPFs8xp3XimCXHcEkhcrUW50b2Aw3jh64bF b8Qz9wNkUGmeuFjDbz2Yhd6PqtbA9pRlqfqs6iHvWc9alzLeq0kOrJTD 5xjMJg==
;; Received 1175 bytes from 202.12.27.33#53(m.root-servers.net) in 50 ms

mamansoft.net.          172800  IN      NS      dns01.muumuu-domain.com.
mamansoft.net.          172800  IN      NS      dns02.muumuu-domain.com.
      ---- --------------  äž­ç•¥  ------------------------
;; Received 653 bytes from 192.12.94.30#53(e.gtld-servers.net) in 120 ms

blog.mamansoft.net.     3600    IN      CNAME   modest-turing-f3415c.netlify.com.
;; Received 93 bytes from 202.239.23.40#53(dns01.muumuu-domain.com) in 70 ms

芋方は以䞋のサむトなどで説明されおいたす。

Brotli

gzipに倉わる圧瞮方匏であるBrotliを初めお知りたした。

きっかけはNetlifyのコンテンツがgzipされない原因を調査しおいたずきに芋぀けたペヌゞ。

これ..Brotliが䜿われおいるこずを意味するんですね。

x-content-encoding: br

Chrome Dev ToolsのNetworkタブを芋るず、圧瞮埌ず圧瞮前のサむズが確認できたす。

Web Share API

スマホやタブレットで䜿甚する共有機胜を実珟するAPIです。

ステヌタスはただドラフトなので仕様から消える可胜性はありたすが、Android ChromeずiOS Safariが察応しおいるため珟時点ではかなり有甚です。
同様の機胜を実珟するクリップボヌド呚りのAPIがモバむルだず課題山積みずなっおいるため、モバむルの共有方法ずしおは非垞に期埅しおいたす。

以䞋はcanvasのデヌタをblobに倉換し、pngずしお共有するコヌドです。

canvas.toBlob(async (blob: Blob | null) => {
  if (!blob) {
    showError("Fail to capture a daily calendar.");
    return;
  }

  const image = new File(
    [blob],
    `${state.currentDate.displayDate}.png`,
    {
      type: "image/png",
    }
  );
  try {
    await (navigator as any).share({
      files: [image],
    });
    showSuccess(`Success to capture a daily calendar.`);
  } catch (e) {
    showError(`Fail to capture a daily calendar. ${e}`);
  }
});

share関数にはfilesを指定しおいたすが、これは先のMDNに蚘茉されおいない仕様です。
これは最近査定されはじめたWeb Share API Level 2の仕様です。

Level 2ではテキストだけでなく、画像なども共有可胜になっおいたす。すごい

モバむルでは䞀通り察応しおいるように芋えたすが、バヌゞョンによっおは郚分的だず思いたす。

以䞋の環境では動䜜を確認したした。

  • Android10
    • Chrome v86
  • iPadOS
    • v14以䞊
    • Safariの実隓的機胜でWeb Share API Level 2が有効

Safari14もデフォルトでは䜿甚できなかったため、䞀般向けに実装するのは時期早々かもしれたせん。

読んだこず/聎いたこず

合理的な遞択の末に、い぀の間にか䞖の䞭に取り残される感芚

ずおも切ない..しかしこの䞊なく真理を蚀い圓おおいるなず感じる蚘事でした。

幎をずるず孊ぶ意欲が萜ちるのは、脳が劣化するからではない..。
時間に察する考え方が倉わり、時間を投資する恐れが増えるのだず。

キャッチアップしなくなったのは、自分の興味や関心の方向が定たっおきたからなんじゃないかずいう気がしおいる。有限な時間の䜿い方・振り分け方をコントロヌルしたいずいう感芚がより匷くなっおいる。ずいうより「時間は有限だ」ずいう感芚が、幎霢を重ねるず匷くなっおくるずいうか。昔は自分に合うかどうか、面癜いかどうかは知らんけどずにかくやっおみよう、それから考えようずいう態床だった。でも今はほずんど無意識に、自分にずっお必芁なこずかどうか、時間を費やす優先順䜍がどうかを考えお取捚遞択しおいる気がする。それは仕事を始めお䜙暇の時間が枛ったからかもしれないし、既に取り組んでいるこずにもっずちゃんず泚力したいず思っおいるからかもしれない。奜奇心の総量自䜓は倉わらなくおも、その方向や幅が固たっおきおいる。そのこず自䜓は党然悪いこずじゃなくおも、ただその副䜜甚ずしお取り残される。

最近、少しでも気を抜くずこれになりたす。
新しいこずを始めない最匷の蚀い蚳ずしお..。

たずえ誰からも評䟡されなかったずしおも、幅を狭めないよう生きおいきたいですね。

Why I’m switching from Vim to IntelliJ

VimからIntelliJ IDEAにメむン開発環境をシフトした話です。
私も珟圚はIntelliJ IDEAをメむンにしおおり、この蚘事にはほが完党同意でした。

Vimは動䜜が軜いものの、各皮開発をするためには銬鹿にならない準備のコストが必芁です。
しかも、それらの環境敎備によっおVimが重くなり..実はIntelliJ IDEAを䜿った方がパフォヌマンス面でも優れおいた.. なんずいう本末転倒な事態にも散々遭遇しおきたした。
Vimの䜓隓は非垞に刺激的ですが、チヌム開発であればなおのこずです。

䞀方でVimのキヌバむンドや思想はIntelliJ IDEAでも倧いに掻甚できたす。
先日、そのような萜ずし所を暡玢した蚘事を曞きたしたのでよろしければ。

What’s the deal with SvelteKit?

SvelteKitの目指すずころに぀いお説明されおいる公匏の蚘事です。

フロント゚ンドの䞖界もたたパラダむムシフトの時期を迎え、その先ではbundleがなくServerlessが䞻䜓ずなった䞖界があるであろう..。
Svelteはそれを芋据えおSvelteKitを開発し、その完成をもっおversion1.0ずしたい..
ずいう趣旚の内容でした。

ドキュメントやサポヌトもなく、開発䞭のものでよければいじるこずはできるみたいです。

npm init svelte@next

Svelteは4ヶ月前に少し觊っおみお..その時はやはりVueだなず思っおいたした。

ただ、パラダむムシフトの先たで芋据えおの戊略ずなれば話は倉わりたすね。

個人的には数幎埌、これが数幎前のReactず同じ状態になるのではず思っおいたす。
bundle地獄や環境構築から抜け出した䞖界が芋おみたいですね😁

詊したこず

【TypeScript】html2canvas

HTMLを解析しお結果をcanvasに描画するマッチョなラむブラリ。
スタヌ数は20000超えず倧人気です。

VuetifyのCalendarコンポヌネントでスクロヌルされる郚分を䞀発スクリヌンショット撮れないかな..ず思っお詊したした。

䜿い方はずおも簡単でした。
特定クラスのDOMをcanvasに倉換し、さらにバむナリにしお操䜜するコヌドです。

import html2canvas from "html2canvas";

const canvas = await html2canvas(
  document.querySelector<HTMLElement>(".v-calendar-daily__pane")!,
  {
    backgroundColor: "#1E1E1E",
  }
);

canvas.toBlob(async (blob: Blob | null) => {
    // blobを料理する
}

なお、Cross Originから取埗しおいる画像ファむルなどは衚瀺されたせん。
OptionにallowTrait: trueを指定するず衚瀺されたすが、そうするずtoBlobやtoDataUrlが䜿えなくなりたす。

サヌバサむドでCORS察策をすればいいのですが、なかなか面倒ですよね..。
他に解決策もなさそうなので、Cross Originの画像は䞀旊諊めるこずにしたした😢

調べたこず

なし

敎備したこず

【Google Chrome】Bookmark Sidebar

サむドビュヌに特化したGoogle Chromeのブックマヌク管理拡匵です。

名前こそシンプルですが私は感動したした😭
機胜は勿論のこず..チュヌトリアル、デザむン、コンテンツの内容などUXが玠晎らしいです。
今たで䜿った拡匵の䞭で1番ず蚀っおも過蚀ではないくらい。

芋た目もオシャレです。アニメヌションも心地よいですよ👍

怜玢や゜ヌト順も蚭定できたす。

蚭定画面も栌奜良くお気が利いおいたす..!!

しばらく䜿っおみお、手攟せなくなったら寄付したいず思っおたす。
それくらい感動したした😁

【Vim】CamelCaseMotionの導入

CamelCaseやlower_caseなどで単語ごずに移動できるモヌションを導入したした。
Vim、JetBrains IDE、VS Codeのそれぞれで䜿えたす。

]をで開始するようにしおいたす。

Vimの堎合

Vundle利甚時。

Plugin 'bkad/CamelCaseMotion'
let g:camelcasemotion_key = ']'

JetBrains IDEの堎合

デフォルトで]に割り圓おられおいたす。

VS Codeの堎合

蚭定でONにしたす。

  "vim.camelCaseMotion.enable": true,

キヌバむンドも。

    {
      "before": ["]"],
      "after": ["<leader>"]
    },

【Vim】Fernの導入

NerdTreeのようなファむラヌです。
プラグむン圢匏を採甚しおおり、必芁な機胜のみを導入する思想です。

非同期に凊理が行われるため、別の動䜜を劚げるこずはないのがポむント。
ただ描画に関しおは別なので、jk抌しっぱなし時の描画速床は萜ちたす。

.vimrcの蚭定はこんな感じです。

Plugin 'lambdalisue/fern.vim'
nnoremap <C-j>w :Fern %:h -drawer -width=50<cr>
Plugin 'lambdalisue/nerdfont.vim'
Plugin 'lambdalisue/glyph-palette.vim'
augroup my-glyph-palette
  autocmd! *
  autocmd FileType fern call glyph_palette#apply()
  autocmd FileType nerdtree,startify call glyph_palette#apply()
augroup END
Plugin 'lambdalisue/fern-renderer-nerdfont.vim'
let g:fern#renderer = "nerdfont"
Plugin 'lambdalisue/fern-git-status.vim'

実珟しおいる付加機胜は以䞋。

  • <C-j>wでカレントバッファに察するツリヌを衚瀺
  • Nerdfontによるカラヌアむコン衚瀺
  • Gitステヌタスの衚瀺

なぜかWindowsだずGitステヌタスは衚瀺されたせんが、Vimにそこたで求めおいないので個人的には問題ないです。

芪ディレクトリに移動する゚むリアスの蚭定

普段よく䜿うこの移動コマンド。

cd ..

入力数は少ないですが、チリも積もるず銬鹿になりたせんよね。
こちらを゚むリアスに登録したした。

PowerShell

function ..() { cd ../ }
function ...() { cd ../../ }
function ....() { cd ../../../ }

Bash

alias ..='cd ..'
alias ...='cd ../..'
alias ....='cd ../../..'

【Git】Git LFS管理をやめる

本ブログずMimizou RoomのGit LFS管理をやめたした。
理由は以䞋。䞀蚀で蚀うずLFSのナヌスケヌスに適さなかっただけです。

  • 10Mを超えるような倧きなファむルはない
    • 必芁なら倖郚参照にする
  • GitHubのLFS Storage容量を䜿いたくない
    • 1GB制限があるので気を遣う
  • 䞀床コミットしたリ゜ヌスを倉曎する機䌚はほがない
  • NetlifyなどでデプロむするずきLFS起因で倱敗するこずがしばしばある

察象リポゞトリに぀いおは以䞋の流れを実斜したした。

git lfs uninstall
rm .gitattributes
git lfs ls-files
# begin
git rm --cached **/*.png
# end これを拡匵子分繰り返す
git add --all
git commit -m "Git LFSをやめる"
git push
# 䞀床Localをキレむにする(.git/lfs削陀が䞻な目的)
rm -rf リポゞトリ
# cloneしなおし
git clone リポゞトリ

今週のリリヌス

Togowl v2.15.0

DailyカレンダヌのShare機胜

CalendarのDaily衚瀺時のみ、共有ボタンから衚瀺日のカレンダヌ画像を共有できたす。

以䞋の環境における動䜜を確認しおいたす。

  • Android10
    • Chrome v86
  • iPadOS
    • v14以䞊
    • Safariの実隓的機胜でWeb Share API Level 2が有効

たた、以䞋の環境で動䜜しないこずも確認枈みです。

  • PC/iPadOSのChrome

共有するカレンダヌ画像はpngです。
プロゞェクトアむコンは衚瀺されたせんが1日の予定が党お入りたす。

やや匷匕な実装をしおいるため、どこかのバヌゞョンで非察応になる可胜性がありたす🙇‍♂

共有できる画像むメヌゞです。

瞊に長いですねw

その他

Quizletの単語数

本日時点での単語数は83(+15)です。