Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

fzf でファイル名を先頭、ディレクトリパスを後ろに表示する

telescope の filename_first にインスパイアされて作ったもの

これがスクリプト↓

rg --files --hidden --follow --glob '!.git/*'|\
awk -F/ 'OFS="/"{file=$NF; $NF=""; dir=$0; print file "  \033[90m" $0 "\033[0m"}' | fzf --with-nth=1.. --ansi --preview "bat --color=always --style=header,grid --line-range :100 {2..}{1}" |\
awk -F"  " 'OFS=" "{file=$1; $1=""; print $0 file}' | sed 's/^ //'

あとはよしなにwidgetとしてやれば完成。

memoized関数を??=で簡潔に書く

引数が1つもない関数のメモ化をするとき、??=を使うと簡潔に書くことができます。

let cache = null
const memoizedFun = () => {
  return cache ??= fun();
};

initializeSdk とかそういう全体で1回だけ呼び出せば良くて、初回呼び出しのPromiseを使い回したいときなどに使いやすいパターンです。

(前に同じ記事書いた気もする)

仕事の日報を暗号化してgitリポジトリとして管理する (EC2サーバーへのアップロードも)

仕事で日報を6年ほど書いてるんですが、ずっとある悩みがありました。それが 「クラウドにバックアップできない」 というものです。githubへアップロードするのは、社外秘情報などを含んでいるため、たとえプライベートリポジトリであっても気が引けます。

しかし git-remote-gcrypt というツールを見つけて、この問題が一気に解決しました。今回は 安全にgitリポジトリをサーバーへアップロードする方法 を紹介します。

git-remote-gcryptを使えばgitリポを暗号化してアップロードできる

git-remote-gcrypt は、push/pull する際に暗号化/復号を行うようにしてくれるツール です。 git remote add origin gcrypt://ssh/host/path/to/repo.git のようにして、gcrypt経由でリモートリポジトリとやり取りするよう設定するだけで、そのリモートへpushする時には暗号化、pullする時には復号するようにしてくれます。

git-remote-gcryptはgitリモートとのやり取りの時に暗号化/復号するだけなので、 それ以外のgit操作は普通にすることができます。

gitリポジトリを暗号化してpushするまでの流れ

サーバーの準備

GitHubもリモートとして使えます。いつも通り空のリポジトリを作ればOKです。

クライアントの準備

  1. git-remote-gcrypt をインストール brew install git-remote-gcrypt
  2. GPGのセットアップ
  3. user.signingkeyのセットと、gpg.program=/opt/homebrew/bin/gpg の準備
  4. gitリモートを設定 git remote origin gcrypt::git@github.com:{username}/{repository}.git
  5. あとはいつもどおりgit操作をする

これで、暗号化されてからサーバーへpushされるようになります。

暗号化されたgitリポジトリのクローン方法

クローン方法はめっちゃ簡単です。

  1. GPGのセットアップ/sshのセットアップを済ませる
  2. git clone gcrypt::git@github.com:{username}/{repository}.git

これだけです。

はてなブログにブックマークレットリンクを貼るやり方

はてなブログでブックマークレットを紹介するとき、ドラッグ&ドロップですぐ設置できるようにリンクを置いておきたくなります。そんな時にどうやれば良いのかについて悪戦苦闘したのでメモしておきます (完全なやり方はまだ分かってない)

比較的単純な場合はaタグで書く

ブックマークレットリンクは、基本的にaタグを使って書きます。単純な場合はそのまま書くだけで大丈夫です。

<a href="javascript:alert('hello')">単純なブックマークレット</a>

実物: 単純なブックマークレット

(( )) を含む場合は違う書き方に直す

はてなブログにおいて (( )) で囲むと注釈扱いになります。そのため、これを含んでいるとうまくリンクにできません

<a href="javascript:(()=>console.log('yes'))()">動かないブックマークレット</a>

アロー関数を使うと (( が出てきやすいです。そのため、functionで関数を定義しましょう。

<a href="javascript:(function(){console.log('yes')})()">動くブックマークレット</a>

動くブックマークレット

mapなどの高階関数も同じくfunctionで書けばOKです。

<a href="javascript:console.log([1,2,3].map(function(n){return n*2}))">mapを使ったブックマークレット</a>

mapを使ったブックマークレット

番外編: aタグを使わずに書く

aタグを使わないやり方も一応はできます。

[ブックマークレット]
[ブックマークレット]: javascript:console.log([1,2,3])

ただし、URLに空白を入れられないなどの制約があるため、基本的にはaタグを使って書いたほうが無難です。

zennの記事をlikes数でソートする

like数でzennの特例ユーザーの記事をソートするためのブックマークレット↓

javascript:(function(){
  const articles = [...document.querySelectorAll('article')].sort((a,b)=>
    Number(b.querySelector('.ArticleCard_likes__I1qs3')?.textContent ?? 0) 
    - Number(a.querySelector('.ArticleCard_likes__I1qs3')?.textContent ?? 0)
  );
  const container = articles[0].parentNode;
  articles.forEach(article=>container.appendChild(article));
})();

like数順でソート ← この保存用リンクをブックマークバーにドラッグ&ドロップするとすぐ保存できます。

実際に実行してみるとちゃんとソートされてる↓

仕組みとしては単純。

  1. article要素を全部取得
  2. article内のlike数をもとにソート
  3. その順番になるよう並べ替えてる