Windows + VS Code Remote(Container) + Docker Desktop for Windows(WSL2)の練習を兼ねて、Web日記いじりをしていた。

• コードハイライトをhighlightjs/highlight.js: から Prism にする
• Google AdSenseを削除する
• AMPページのフォントをちゃんとする
• AMPページからshareボタンを削除する

コードハイライトのライブラリであるhighlight.jsは、コードの自動判定などが便利なので使っていたが、その仕組み上読み込むだけではハイライトされなくて、document.onloadなどにくっつけないといけない。もしくは、READMEにある通りWeb Workerを使う。

一方のPrismは、自動判定が無いために<code>にclass=language-*というクラスをつけるのが必要になっている。しかし、それ利用することを前提として言語毎のJavaScriptを分離していて、結果として読み込むJavaScriptの量を減らすことができている。

なお、Markdownでは以下のようにコードブロックに言語を書くことができ、多くのMarkdownライブラリはPrism.jsが処理するclassのついたタグを出力ができる。便利。

def hello
  puts hello
end

↑のブロックは、こういうhtmlになっている。

<pre class="language-ruby">
  <code class="language-ruby">
...

そんなことよりも、試しにいれてるCSPをなんとかしたほうが良いと思うのだが、腰が重いのでまずはこのへんから。

家のマシンをSurface Proにしてから、仕事以外のことはだいたいWindows上でやっていて、このブログをいじるときもVisual Studio CodeのRemote Development(Container)でやっている。

で、今日久しぶりにいじっていたら、 エディタでファイルを編集してリロードしても変更が反映されなくなってしまっていた。ただ、サーバプロセスを再起動すると反映されたので、ファイルの変更がうまく検知されてなさそうということがわかった。

さて、ファイルの変更を検知して読み込みなおすような仕組みは inotify を使って実現されていて、Railsでは guard/listen というラッパーライブラリを使っている。まずはイベントがちゃんと起きているのかを調べる必要があるので、inotifywaitというコマンドを使ってみる。inotifywaitコマンドは、debian系ならinotify-toolsというパッケージに入っている。

コマンドが使えるようになったら、inotifywait -m .などとしてイベントをモニタリングする。案の定、VS Code上でファイルを変更してもイベントが通知されず、コンテナ内で直接ファイルを操作した場合には通知されることを確認した。

docker/for-winのissueを眺めてみると、inotify絡みの問題は度々起きているようで、最近だと File not changing inside docker container after updating from 2.1.0.5 to 2.2.0.0 · Issue #5530 · docker/for-win というissueがあった。これによると、stableの2.2.0.4だと問題がなさそうとのこと。

EdgeをアンインストールしてStableをインストールして無事解決したのであった。最初は、WSL2絡みのバグかなぁと思ったのだけど、Stableを使えばWSL2でもHyper-Vを直接使った場合もでどちらでもうまく動いた。めでたしめでたし。

2020-03-23 追記

やっぱりうまくうごいていないときがある。ただ、Dockerをrestartするとうまく行くことがあったり、原因がわからん。具体的には、inotifywaitを実行するディレクトリはうまく拾えるのだけど、-r オプションをつけて再帰的にモニタリングするとダメな感じ。悩ましい。

2020-03-23 追記2

WSL2の問題っぽいことがわかったので戻した。さすがexperimental。

Gentooのパッケージ管理システムであるportageは、野良パッケージリポジトリを使うのが容易なので、自分が必要だけどメインツリーや信頼できるoverlayに存在しないものは、以下のような自分でメンテナンス可能なリポジトリで管理していた。(この他にも、社内でしか使わないであろうものはGitHub Enterprise上にもリポジトリを作っている)

• kenchan/portage-overlay: My Personal Portage Overlay
• esminc/esm-overlay: ESM's portage overlay. It's useful for especially Ruby/Rails application development.

しかし、少し前に Project:GURU - Gentoo Wiki というものを知ったので、これからはなるべくこちらに入れるようにしようと思っている。GURUはArchでいうAUR、つまりユーザによるコミュニティ公式のパッケージリポジトリである。

ここにebuildファイルを追加する方法はプロジェクトページに書いてあるので割愛するが、私がghqのebuildファイルをdevブランチにpushしたところ、若干の手直しがあって翌日にはmasterブランチで公開されていた。

さて、実際にgentooにghqをインストールしたい場合は、おそらくみなさんlaymanをお使いだと思うので以下の2コマンドでOK。

# layman -a guru

# emerge ghq

レビュー込みでこれだけの早さで公開されるのはとてもよい体験だったので、細かい修正をしてくれるTrusted Contributorsの方々に感謝するばかり。これからも足りないソフトウェアはどんどんebuildを書いていれていくぞ〜。

ペパボのパートナーの自宅作業デスクまとめ - ペパボテックブログ には残念ながら採用されなかったので、こちらで晒しておく。

間取り的に固定席を作るが難しいので、キャスター付きの昇降机になっている。この机はキーボードスライダーがあることによってKinesisをおいても圧迫感がないし、自然な感じで打てるので気に入ってる。普段はスライダーを出さずに、写真のままの状態で使っている。

ディスプレイは、今回の在宅勤務期間で購入したもので、机を移動させる都合上モニターアームで取り付けている。ただ、そのせいで昇降時の耐荷重(5kg)を超えてしまったようで、スムーズな昇降ができなくなってしまった。無念。

詳細は Scrapboxの 津田沼オフィス - kenchan にアサマシリンクと一緒に載せているので、これはなんじゃ？というがあったら見てもらえれば。

2020年のテーマは計測。計測すれば改善できる!

現代人は水不足と言われているらしい。自分自身の生活をふりかえっても、水分をとるのはごはんのときだけということも少なくないので、水分摂取量を記録して改善しようと試みている。

iOSのヘルスケアアプリには水分摂取量を記録する機能があり、それを利用するアプリもいくつかある。また、アプリを使わなくても、iOSのショートカットのサンプルにも水分量を記録するものがあるので、それを使えば簡単に記録することができる。ただ、やっぱりインターネットで見たい！

というわけで、ヘルスケアアプリと同時にPixelaにも記録するようにした。

ヘルスケアアプリに記録する部分は、ショートカットのサンプルと同様。

選択肢については、普段使っているマグカップやタンブラーの容量を量っておいた。目安としては、マグカップや小さいペットボトルが300ml、多めのタンブラーが400ml、大きいペットボトルが500mlという感じ。たまに小さいカップを使うことがあるので、それ用に200mlを追加しておいた。登録する部分はそのまま、単位を間違えなければ大丈夫。

ちょっと難しいのはPixelaに送る部分。というのも、Pixelaの数字を更新する方法はincrement(decrement)とupdateの2つがあるが、たとえばincrementでは+200のようなことができないし(200回叩けばいいけど……)、updateではその日の合計をどうにかして計算しないといけない。

これは、ショートカットの中でヘルスケアアプリの情報を集計する機能を利用して、当日の摂取量を計算することにした。ここがこの仕組みで一番苦労した部分。

あとは、URLを叩く機能をうまく使えばできあがり。

出来上がった草がこちら。

kenchan/水分 | Pixela

Pixelaは、本家(?)GitHubと同様に相対的な大きさで色が変わるようなので、よく飲んだ日とあまり飲まなかった日が視覚的にもわかりやすくてとてもよい！

iOSのショートカットは、広く共有できるような仕組みがたぶんないし、トークンをハードコードしちゃってるので、同じようにやってみたい人はスクショを参考にしてください。

まだ1週間くらいだけど、若干体調もよくなったような気がしてる。特にお通じ面はだいぶよくなったように感じるので、今後も続けて経過観察していこうと思う。