A Day in the Life

トルコキキョウとミニ盆栽・デューカ ディ カマストラ 高島町店・体調不良 / 2020年9月30日

昨晩軽い吐き気がして、仕事してると熱っぽかったので、早めに仕事を切り上げる。熱を測ってみると微熱があった。これは昨日サウナに行かなかったからでは(中毒的考え)?風邪薬を飲んだ後、ダルさはあるけど元気もあるという感じになって写真を取り始めたり、趣味のコードを書き始めたりする。

今は報酬を時給でもらってることもあり、パフォーマンスを出せる状態の体調がでないと悪い感じがしてしまい、(スケジュールが切羽詰まってない限りは)仕事はできる限りしないことにしてる。

妻が先日トルコキキョウとミニ盆栽を買ってきた。トルコキキョウは紫のシックな色合いで落ち着きあるかわいさ。ミニ盆栽は 330 円だった、というから破格。器が高いからねぇ。 そう言えば三脚を最近買ったのだった、と三脚を使って撮影してみる。マクロは手ブレしがちなので、三脚があると便利だなぁ。

朝食は昨日のラーメン屋の帰り道になにげに発見した、デューカ ディ カマストラ 高島町店のくるみ食パン。くるみがザクザク入っていて美味しい。このお店、Google Maps で「パン屋」で検索しても出てこなくて、損している気がする。 昼食は、グラタン、豚と白菜の餡かけ、セロリを使ったサラダ。3 品どれも美味しかった。

夕食は、きょうの料理でやっていたごぼう揚げと、ダンドリーチキン、カブの炒めもの。ごぼう揚げはこのレシピに限らず我家の定番となっている。ごぼうの味とザクザク感が好みだ。


キョーサンの お気に入りのウェブサイトにこのサイトのリンクが!やったね!OPML 懐かしい…。


おたより返信コーナー

ウェブサイト実装について読みました。2000 年代っぽい個人サイトワイワイ感が出ていて楽しいですね。 secondlife さんはサイトによく写真を載せた記事を書かれていますが、URL 取得から埋め込み用 HTML の記述は何かツールを利用されていますか? 私も最近、自分で作ったブログシステムで書こうとしているのですが、Markdown ファイルを手書きする素朴な体験に耐えられず Slate.js で WYSIWYG エディタを作りはじめてしまい、壮大な道程が始まってしまいました。 なにか便利なツールがあれば知りたいです。

aereal

id:aereal さん、お久しぶりです。仕事以外に Web プログラミングをするのは久しぶりで、かつ個人サイトなので好き勝手できるので、なんだか楽しいですね。aereal さんは S1R をメインに使ってるんですね。最近マイクロフォーサーズばかりだったので、フルサイズのカメラ欲が湧いています。

いい感じの写真貼り付け周りツール、色々調べてみたものの無くて、 写真の選択には、ブログ画像選択の Picker を作った な感じで、テンプレで選択した画像の html を markdown に貼り付けて、お茶を濁している(めちゃ便利ではないけど、とりあえずは事足る)感じです。

そう言えば私も、半年ぐらい前に Google Picker API と Slate.js, HTML5 DnD API を使って、写真が貼り付けやすくレイアウトも変えやすい WYSIWYG なエディタが欲しくなって作り始めた のですが、途中 Google Picker API から取得した画像が一切使えなくなって絶望して辞めた経験があったので、簡単なツールに落ち着いてしまった感じですね…。またやる気が出たら完成させたいですね。

M.ZUIKO DIGITAL 45mm F1.8 を買ってた

オリンパスのレンズ、M.ZUIKO DIGITAL 45mm F1.8を半年ぐらい前に買っていた。買ってから全然使っていなかったのだけど、ここ1ヶ月ぐらいテーブルフォト(主に家の料理写真)でものすごく使う頻度が増えたので感想を。

まず良いところは軽くて小さくて持ち運びに便利。フロントとリアキャップ入れて120gちょい。また焦点距離も35mm換算90mm相当という、テーブルフォトが撮りやすい画角も相まって、そのため外に出かけるときにとりあえず持っていって使ってる。PEN-F とだいたい広角単焦点とこのレンズが散歩の定番となっている。

ボケ具合は35mm換算で開放F3.6相当なので大してボケないか、と思いきや、焦点距離が長いのでそれなりにボケる。オートフォーカスも静かで高速。ただボケ具合は綺麗ではないけどね。

そしてお値段。中古なら1万円台で買えるので、レンズ沼の人にとっては実質タダみたいな値段だ。値段が安い、ということはそれだけ気軽に扱える。つまり壊れてもいいやと気を使わずに持ち出しできる。色はブラックとシルバーがあって、ブラックを買ったのだけど、PEN-F にあわせてシルバーにすればよかった。シルバーのほうが中古価格安いしね。

いままでテーブルフォトには E-M1 mark II と LEICA DG SUMMILUX 25mm/F1.4 II ASPH. を使っていたのだけど、たいてい E-M1 mark II には重いレンズが付いているので付け替えも少々めんどくさいし、PEN-F は何もしなくても撮って出しが Google Photos に自動でアップロードされるようにしているしで、最近はこのレンズをめちゃ使っている。

というわけで、マイクロフォーサーズの持ち歩き用小型単焦点としてはオススメの一本である。

横濱丿貫のラーメン・Paperwhite の調子が悪い・Dropbox の復元機能 / 2020年9月29日

  • 朝食はキムチさつま揚げトースト。
  • 昼食は豚肉・卵・カブ・青菜の炒めもの。付け合せのセロリを使ったサラダも美味しい。
  • 夕方、サウナに行こうとしたのだけど、サウナ中毒(サウナに行かないと健康に悪い気がする)になってる気がしたので、こらえてサウナ近くのラーメン屋、横濱丿貫へ。
    • ASOBUILD という横浜駅前の、元郵便局を改装してオシャレな呑兵衛横丁的な場所にある。
    • 横濱丿貫(ヨコハマヘチカン)、今日まで知らなかったのだけど名店なのね。
    • 煮干し蕎麦と赤海老蕎麦をいただく。煮干しは凪のようなガツンと煮干し!という系ではなく、上品にまとまった煮干しの旨さ。赤海老蕎麦も主張しないが旨いエビ出汁がよく出ている。付け合せのチャーシューも生状態からスープで徐々に火が通り美味しい。
    • 帰り道、妻とラーメンうまかった、しか話していなかった。また以降。
  • Kindle Paperwhite 2018 モデルの調子が最近悪い。数時間読んでると、だいたい途中でタップ操作を受け付けなくなり再起動、というのを繰り返している
    • なので、端末を初期化して様子を見る。治ると良いのだけど
  • うっかりこの記事を書いている Dropbox のフォルダを削除する。マジカ…と思ったけど、Dropbox の復元機能でことなきことを得る。
    • Dropbox 無料プランでこの機能つけてるの偉いな。以前4年間ぐらいは課金したので今は無料プランでも許しておくれ。

日産パビリオン・開発OS転換期・Galaxyブラウザ / 2020年9月28日

  • 朝食はたまごサンド。玉ねぎ多めでさっぱり。
  • 昼食は蕎麦屋。お腹が空いていたので親子丼セット。
  • 午後、日産パビリオン内のカフェに行って読書。空いていて快適だ。
  • 夕方、サウナからの帰り際に写真を撮る。最近日が沈むのが早くなって夜の時間帯も撮影できるようになった。夜は夜で楽しい。
  • 晩飯は豆腐麺で冷麺風。キムチが入れば冷麺風味付けになる、キムチ偉い。
  • 今日は晴れで1日、外でもギリギリ半袖で寒くない天気。もうこの気温は今年最後かなー。
  • 3フレーズぐらいの記事タイトル、今年3月はよくつけていたなぁ。再開して見るテスト。
    • しかしこのタイトルは今日の日記を表してない気がする…。
  • 周りの人が結構 Windows 開発環境を整えてるのを見るに、OS の周期的な転換期な雰囲気を感じる。
    • デファクトになった何かが胡座をかいていると、イノベーションもしくは競合によって、その地位が失われる。適切な競合競争。
    • macOS はここ数年は「進化しないもの」という感じで、エンドユーザ視点からは目新しさがほぼ感じられない。顧客の望んでいるもの、ではなく Apple が望んでいるものが付け足されていっている、というか。iPhone も自分は使ってないので Apple 製品の覆い囲みプロダクトには興味ないしね。
    • Windows は見た目の新しさは無いものの、CEO 変わってから「なんか開発者フレンドリー」感と、実際にそれらの機能が追加されていって、使ってみたい感が出てきている。
    • あとはラップトップで MacBook を超える良いものが Windows OS のものから出ればなぁ。
  • スマートフォンのデフォルトブラウザを Chrome から Galaxy ブラウザへと変更する。
    • Galaxy ブラウザ、ちょっと使った感じ問題ないこと、また AdBlock 系の機能を簡単に導入できることから入れてみた。パスワードマネージャも 1Password 使ってるから Chrome に依存していないしね。
    • AdBlock には何がベストなのか解らなかったので、とりあえず AdGuard を使ってみている。
    • モバイル端末の限られた画面での広告は邪魔すぎることが多く、例えばゲーム情報系の Wiki、EtG の Wiki はモバイルで見ると、かなりの割合を広告が占める。が、AdGuard が適用されているとあたかも広告がないように表示される。
    • PC でも Chrome extensions + AdBlock を使っていた時期もあったのだけど、結構な Web サイトがおかしくなる(広告読み込みまでレンダリングがブロックされるのだけど、広告が読み込まれないためブロックが続くなど)ため、今は使わなくなってしまった。
    • Proxomitron を使っていた時代が一番広告ブロック率が高かった気がする。懐かし。

おたよりコーナー

こんにちはnagayamaです。 いつも楽しく読んでいます。 皆さんに影響を受けて、自分も久しぶりにWebサイトを作っています。 ところで > r7kamura さんや kzys さん に倣って、このウェブサイトの実装を紹介してみる。 のリンクが2つともおなじURLになっていましたー。 それではお体にはお気をつけてー

はっ、たしかに。リンク修正しました、ありがとうございます。nagayama さんが p5.js で作ったものが並ぶと楽しそうですね、nagayama さんのウェブサイトも楽しみにしております。

WSL 環境で、環境変数 BROWSER をセットすると便利

WSL 環境(というか Linux)では、ENV['BROWSER'] を見て開くブラウザを決定している実装が多い(たぶん)。たとえば WSL2 側の gh pr --web コマンドで Windows 側のブラウザで Pull Request 編集画面が立ち上がってほしいので、ENV['BROWSER'] をセットしておく。

export BROWSER="pwsh.exe /c start"

で、Windows 標準のブラウザが立ち上がるはず。あわせて読みたい: WSL 上で macOS の open コマンドのような挙動

これ系の WSL 依存のものは、WSL 環境かどうか判定して、その環境だったら ~/.zsh/wsl を読み込む、みたいなことを雑に行っている。

# WSL?
if [ -d "/mnt/c" ]; then
  source $HOME/.zsh/wsl
fi

まともにやるにはどんな方法があるのかなとちょっとググったら、[shell] WSL かどうかを判別する の判定方法が面白かった。/proc/sys/fs/binfmt_misc/WSLInterop なんて proc が存在するんだ。

ブラクリ釣れず・自転車に乗る・VA-11 Hall-A / 2020年9月27日

  • 昨日だいぶ寝たからか、今日は体調が良くなる。
  • 朝、散歩しつつ海辺で朝食を食べる。
    • 岸を見ているとコンクリートのスキマの穴の中に魚影があって、「あれ、これブラクリを落としたら根魚釣れるのでは!?」と思い一旦家に戻り、釣り道具を持って挑戦する。が、釣れず…。
  • 夕方は久しぶりに電動でない自転車でブラブラする。電動だったからあまり意識してなかったけど、周りは結構坂だらけで疲れるなぁ。
  • 晩飯はセロリハンバーグ。ヘルシーだけど美味しい。セロリ、昔は嫌いだったのだけど、いつの間にか問題なく食べられるようになってたなぁ。
  • ちまちま PS4 でやっていた、VA-11 Hall-A の一周目をクリア。良いゲームだった。ジャンルはサイバーパンクバーテンダーアクション。 『一日を変え、一生を変えるカクテルを!』
    • 物語選択が、出すカクテルによって変わる仕組み面白い。このカクテル作り、途中で飽きそう(作業感だけ残りそう)だな、と思ったけど、意外と最後まで楽しめた。ハゲだ!ビールだ!大ジョッキだ!
    • 制作の Sukeban Games、ベネズエラの会社なんだ。日本のオタク・萌え文化の理解すごい。

風邪・ペヤング・タバコ / 2020年9月26日

  • 昨晩から微熱があり、夜中起きて薬を飲む。朝起きると気だるく、軽い風邪を引いた感じ。だいたい1日寝て過ごす。
  • 朝食は妻が焼いたパンを中心に。
  • 昼飯はペヤングソース焼きそば。なんか無性に食べたくなってしまい、妻にリクエストして買ってきてもらった。
  • おやつは試作のケーキ。
  • 夜はこれも無性に食べたくなってしまったカレーをリクエスト。
  • 今読んでいる本のシリーズが、1980年代に書かれた本で、当たり前のようにみんなタバコを吸ってるし、タバコの描写が多い。たとえば、いそいそとする様は「電話を切ると、さきほどくわえたばかりのタバコの火を消して、出かけていった」みたいな感じ。

このウェブサイトの実装 2020年版

r7kamura さんkzys さん に倣って、このウェブサイトの実装を紹介してみる。

ホスティング

Google Firebase Hosting を使って静的ファイルを配信してる。一部動的な実装に関しては、Cloud Functions for Firebase を使っている。静的ファイル配信は今は Netlify や Surge など、基本無料で超簡単に配信ができて高速なものが多々出てるのだけど、Hosting に限らず Firebase の他のサービスとの連携が楽、という理由で Firebase Hosting を使っている。

また最近の仕事でのサーバサイドはほぼ Firebase 製品ですませていることもあって、Firebase でなんかやる、というのが技術的にもやりやすいから、というのもある。

なお画像はストレージをだいぶ食うため、はてなフォトライフにアップロードして使っている。はてなフォトライフは Google Photos のようにオフィシャルツールから取得した直リンクの画像が見れなくなる、というようなことは無いと信じている(が使えなくなったらそれはそれでどうにかする)。

静的ファイルでの配信について

個人サイトを運営している人たちで、現時点でも続けている人たちは、静的ファイルでのジェネレートしていた人たちが多い気がする。古くは blosxom なんかを使ってね。

理由は多分二つあって、1つ目は少なくとも昔の静的ファイルジェネレータは、データソースがツールに依存しない形式が多く、markdown / html などの記事ファイルを読み込んでウェブサイトの構造に加工して出力するためシンプルな作り。単純なWebサーバさえあればサイト運営が簡単に継続できる。そして単純なWebサーバというのはコストが安い。これが CMS / blog のシステムを使っているとシンプルさが失われ、動的な要素を持つとなんだかのプログラムを動かすことになりコストが高く、継続して動かし続けるのが大変になり、ふとしたなにかのタイミング(久しぶりにサーバをを乗り換えたら動かなくなった、とかね)で失われることがある。

2つ目は、構造がシンプルゆえに、静的サイトジェネレータの技術理解をきちんとしていたり、ジェネレータ自体を自分で実装していたりしているので、別のものに移行するときにすんなり以降ができる、というのもあるのだろう。これが複雑な CMS なんかを使っていると、export する仕組みがあるとは言え、それを別のところで動かそうとするとホネで、結局めんどくさくなって移行せずにネットの藻屑へと消えて無くなったりもする。すごく良い記事が消えて無くなるのは悲しい。

ドメイン

Google Domains を使っている。以前はバリュードメインを使っていた気がする。この secon.dev を買ったのは 2020 からで、昔から自分のドメインをちゃんと持って継続しておくべきだった、と後悔している。

ドメインというのは自分の存在を表現する、インターネット上では重要な名前空間で、それを継続しなかった・持たなかったのは残念でならない。独自ドメインは個人サイトを運営するなら取っておくべきだ。

なお日本ではメジャーな、お名前.comやバリュードメインなんかは、1年目のドメイン代だけ表示して、2年目以降の値段は表示されず、1年目の値段提示だけで安価に買わせようとしていて、それに気づくのは次のドメイン更新時、みたいな悪徳業者な感じで、本当に良くないと思っている。住宅の例えをするなら、賃貸物件に住みだしたら一年目より二年目のほうが何倍も高い請求が来て、かつそこに住みだしてしまったので引っ越しが大変(レジストラ移管は面倒なのだ)、みたいなことになるので、ドメインを購入する人は二年目以降の価格もきちんと調べたほうが良い。

ビルド

静的サイトジェネレータには Next.js を使って実装した。この選定としては、一つは TypeScript で書きたかったこと、一つはフロントエンドの実装に React を使いたかったことが挙げられる。

Gatsby JS

同じように TypeScript で書け、React が使える静的サイトジェネレータとしては GatsbyJS もある。Gatsby はよく出来ていて、すべてのソースを一度 GraphQL に集約し、それを元に出力するファイルを作る。つまり GraphQL を使う、以外は自由で、そのためデータソースを GraphQL に入れるためのプラグインも山ほどあるし、そのデータをどう加工して出力するか、というプラグインも山ほどある。

他にも、例えば画像を自動でリサイズしてくれる、サイトマップを出力する、Google Analytics もいれる、などもプラグインを使うだけのプラガブルな仕組みが提供されている。

そのため、入力ソースはファイル形式でもSQLでもリモートソースでも何でもよくて、出力形式も markdown だろうが MDX だろうがプレーンな HTML だろうが何にでも加工がしやすい(ふんだんにプラグインがある)。もちろん例えば Algolia で検索したい場合も、アウトプット先の一つを Algolia にしてしまえばそれだけで簡単に全文検索ができるようになる。

なんで Next.js を使ってるのか

これだけ見ると、GatsbyJS はとても良く出来ていて、選定理由として選ばない理由はない感じがするのだけど、実際のところ WordPress のようなかおりがするのだ。山程プラグインはあれど、TypeScript で書かれているものも少ないし、なによりプラグインにテストが書かれているものが少ない。

UI に関するテストが書きにくい、というのはさておき、ユニットテストが書きやすそうなものや、データソース関連はテストが書かれていてほしいものだけど、そのへんもあまり書かれていないのを見ると、技術的な危うささを感じる。

もちろん、その分簡単にプラグイン作成に参入ができ、エコシステムとコミュニティが広がった、というのもあるのだろうけどね。

Next.js は Gatsby に比べるとだいぶ質実剛健な作りになっていて、Gatsby にはある「超簡単にいろんな機能を持ったサイトが作れる、すげー!」という華やかさは無いのだけど、安心して実装を進めることができる。長い目で見ると、その安心感があったほうが良い、と判断した。

記事の書き方

記事は、はてなブログで書いていたものは、はてなブログの export 形式である Movable Type 形式のファイルを mt-parserで読み込み、静的ファイルを出力しているいる。はてなブログの記事は、blogsync でファイル + 記事ごとの markdown として取得できるのだけど、その場合は markdown 上にかかれているはてな独自記法、たとえば [f:id:secondlife:xxxx] などが展開されないため、それらすべてが HTML に展開されている Movable Type 形式にしている。

新しく書いている記事は、VSCode + vscode-memo-life-for-you で書いて、Markdown Preview Enhanced でざっくりと確認している。書かれた記事の markdown ファイルは Dropbox 上で同期している。

ビルドするタイミングは、Dropbox で同期された記事ファイルの中から、Draft では無い記事の mtime を見て、以前のビルド時よりも新しいものがあればそれをトリガーにビルド、というのを Vultr 上の VPS にやらせている。

git に commit して push する仕組みだと、能動的な動作を必要としてしまい、もうちょっと雑にやりたかったので、Dropbox でのファイル同期にしている。

記事のフォーマットについて

また、記事のフォーマットは markdown + HTML で書いている。markdown は markup ではなく markdown という名前からも、HTML のようになにかテキストにマークアップ情報をもたせることを極力避けているため、よくも悪くも表現の幅が狭い。

とりわけこのサイトで問題になるのは、写真を貼り付けたときに意図したレイアウトにしにくいことがあって、その部分は HTML で書いている。

それを解消するために、markdown の中に JSX を書ける mdx などのアプローチや、markdown の記述順序によって HTML の出力を変えたり、独自の記法(はてなブログとか)を用いる方法あるが、今の所 HTML を貼り付ける形式にしている。

デザイン

デザイン、というか CSS フレームワークには Bluma を使って SCSS で書いている。flexbox が使える今、あえて CSS フレームワークを使う必要はないのかもしれないけど、昔使ったことがあって書き方をざっくり覚えていたこと、ちょっとしたデザイン(input や textarea とかね)をいい感じに当てれること、spaceing-heleprs が便利だったり、記事本文をだいたいいい感じにレイアウトする content が便利だったりで使っている。

2020年9月25日

  • Galaxy S20 の標準ブラウザ、OS のアピアランスをダークモードに変えると、色んなウェブサイトの配色が変わりびっくりする。google.com も黒いし、このウェブサイトも黒い。
    • けっこうよく出来ていて、フォントの色やコントラストももしこのサイトがダークモード対応するとするとこんな感じなんだろうな、という違和感の無さ。
    • もちろん完璧ではなく、例えばグラフをレンダリングしているサイト例: チャートで見る世界の感染状況 だと、グラフ上の色と説明での色が少々異なり、視認性がだいぶ悪くなっている。
    • Galaxy じゃなくても、Samsung Internet Browser を入れてダークモードをオンにする(OSとは連動していない?少なくとも Pixel 3 + Android 11 だと連動無かった)とウェブサイトでダークモードが味わえる。
    • Samsung Internet Browser、"it had a market share of around 4.98% (among 53.26% for all Chrome variants) around May 2018." が本当だとすると、すごいシェアだったんだなぁ。
  • 朝食はフレンチトーストハムサンド。甘じょっぱい。
  • 昼はラム肉・豚肉の炒めものジンギスカン風。
    • おやつは貰い物のフランセのミルフィーユ。ガツンとした甘さかと思いきや、あまり甘くなかった。
  • 夕方、横浜美術館で開かれているトリエンナーレへ。プロット48も会場なのね。
  • 夕食は久しぶりにつけ麺 TETSU へ。記憶では六厘舎系のどろり濃厚豚骨だと思っていたのだけど、結構スッキリ目のとんこつだった。美味しいけど。
    • 一緒に頼んだ鶏白湯のつけ麺は、スープがいまいち。どろりしてるんだけど、鶏のうまさがあまり出ていない気がする。
  • ちょっと疲れたのか、体調が悪いのか、19時過ぎに就寝する。

2020年9月24日

  • 朝食は、釣ったアジの開きを中心とした和食。アラ汁も美味しい。
  • VSCodeVim のカーソル(hjkl)が遅くなる問題が解決しない。カーソルキーだと発生しない。徐々になんだかが溜まっていってカーソルの動きがほんの僅かづつ遅くなる。
    • VSCode を終了して、rm -rf ~/AppData/Roaming/Code/*Cache* して起ち上げ直してもダメで、解決方法は OS 再起動のみ(Windows も macOS も)しか今の処分っていない。
    • そろそろ vim 離れにチャレンジすべきなのかなー。cui の vim も最近は最低限の plugin しか入れてないし、vim はもう指が慣れているから、という理由でのみ使っている感じだ。
    • → VSCodeVim を無効にしたら10分で挫折して再有効化した。ぐぬぬ。
  • ウェブサイトなのかサイトなのか。
    • ここは個人のサイトです。ここは個人のウェブサイトです。
    • 省略すると個人のサイトがしっくり来るけど、「個人の」を入れないとウェブサイトがしっくり来る。つまり自分はこだわりはないのだなぁ。
  • 昼食は麻婆豆腐と豚バラ大根煮・きんぴらごぼう。この麻婆豆腐は中村屋の辛さ、ほとばしる麻婆豆腐なのだけど、実際ぴりりと辛くて美味しい。
  • おやつにラムボールを食べる。もっと有名になっても良い味なのだけどなぁ。
  • 夕食はカサゴの姿揚げとからあげ。カサゴの皮うまし。
  • デザートはシャインマスカット。今季5房目で、ほぼ毎日少しづつ食べてる。8月下旬は1280円(税抜)だったのが、今は980円まで下がってきた。そろそろ旬も終わっちゃう悲しさ。