hogashi.*

日記から何から

ワイワイ椅子2023

 ワイワイあらすじ: blog.hog.as

 以来この木の椅子だけで生活していました。特に直近で買い直すつもりはなかったけど、この間の Amazon ブラックフライデー

白だけ半額になっていたこの椅子を買いました。

ワイワイ
これは何

 ストレスレストーキョーという名前の椅子で、上にツイート(便宜上の単語)を貼った r7kamura さんの記事を読んでいいな〜と思いつつ、

r7kamura.com

ただ、 Amazon で見ると 25万円とかで、おまけに結構大きいので、今の家に置くのは流石にシュッと購入はできないなと踏みとどまりつつ、広い部屋に引っ越したりできたら買う候補かな、くらいの気持ちで暮らしていました。

激動の週末

 そんな中、 Amazon ブラックフライデーで半額の 13万円くらいで買える状態になっていたわけです。買いました。
 ブラックフライデーは期間/個数限定なので、この時点では「ちゃんとしたオフィスチェアの相場を思うと、オフィスチェアよりは自分の体への合い方がよいだろう」という予想だけで買っています。これが金曜日(黒)。

 流石に体に合うかどうか座ってみてから買いたいので、 (もし合わなかったらキャンセルできると信じて) 翌日に座りに行くことに。かねてよりちょこちょこ検索して京都にもストレスレスの椅子を置いているのは知っていたので昼過ぎに向かい、探すとトーキョーが無い。聞くと、ここには無い、大阪のショールームにある、と言われて、急ぎ電車で大阪駅に到着。馴染みのないでかい駅を歩きまくりショールームでめでたく座ってみることができました。

www.stressless.com

 座った感じ違和感はないし、むしろよく安定していて楽かもという印象で、そのままキャンセルもせず受け取ることに決めました。色々質問させてもらって、ところで革製品なんですがお手入れは……と聞くと一応公式が"相性がよい"と認めたお手入れセットがあるということで、買いたいです→ここでは買えなくてなんばの高島屋さんにあるんです、という会話をし、なんばへ。

 突然来て質問もなくお手入れセットだけ自信ありげに買っていく人が現れても、ちゃんと対応していただけて、軽く説明してもらって購入。ようやく帰路につきます。結局 Google Maps では土曜日の細長いタイムラインが爆誕

激往復

 あとショールームで「廊下 74cm とかしかないけど搬入できます……?」って聞いたら 65cm くらいはあれば大丈夫だと思うとのことだった (実際搬入できた) ので今後買う人は参考まで。 74cm くらいの場合は普通には入らないので、最大までリクライニングした状態で下の調整ネジを固定して横倒しで入れることになります。

使ってみて

 横幅が広くゆったり座れて楽です。キャスターがないし、回転も重めかつ静止摩擦がそれなりにあるのでふらふらしないので酔うような感じもしない。今のところは快適に使えています。リクライニングはレバー操作とかなく常に姿勢に応じて起きるので、は~と後ろに倒れると勝手に倒れていくけど、これも重めなのであまりつらくなく、プラスひと操作で水平まで倒れられるので、椅子で寝るのが捗ります。困った。
 あと買ったやつはオットマンなしのしかなかったので、オットマンは別途どこかで見繕おうと思っています。夏は暑いかもしれないなと思いつつ、どうなるかわくわくしています。なんとかメンテしていきたい。

 whywaita Advent Calendar 2023 - Adventar 16日目の記事でした (少し遅れてすみません!)。それでは良いお年を~🎍

拡張機能「twitter画像原寸ボタン」v5.4.0, v6.0.0公開

 拡張機能twitter画像原寸ボタン」 v5.4.0, v6.0.0 を公開しました。

変更点
  • TweetDeck の URL が pro.twitter.com に変わったので、そこでも動作するようにしました (v5.4.0)
    • Chrome であれば右上で「エラー」のような表示が出て拡張機能が止まっているはずで、 pro.twitter.com での動作を許可するとまた動きます (Edge も同じ感じだと思うけど試してないです)
  • Original ボタンのテキストを設定できるようにしました (v6.0.0)
    • 設定ポップアップに好きな文字列を入れて保存すると、ボタンのテキストとして使われます
Original ボタンが門松になっている様子
公開状態

 Chrome 版は v6.0.0 まで公開済みで、 Edge 版はどちらもまだ公開待ちです。

 インストールはこちらから:

日記

 なんか動かないなと思ったらドメインが変わっていたのでなるほど感があった。ドメインの追加自体はすぐできたので出したら数分で通ってすごい (差分で確認されている?)。
 Original ボタンのテキストを変えられるようにしたい、という要望はずいぶん前にもらっていて、なかなか手をつけられなかったものの、少し勢いが出たのでやったらできた。おまたせしてしまったものの、昨今の画像下の要素は混雑していて、需要はまだあるものと思うので、使ってもらえたら嬉しい (混雑しているので本当はもうちょっと違う場所に出せたりするといいのかもしれないけど、しっくりくる場所を考えるのが大変)。

 ついでに Material UI が v5 になってよくわからなくなってしまったので、 Tailwind CSS を試すことにした。最近の潮流を追えていないので、最初は導入が全くわからなかった (
Framework Guides - Tailwind CSS に Webpack がなくて困った*1 ) ものの、 npm scripts で tailwindcss -i ... -o ... する形に落ち着いた。素朴に CLI が用意されていてビルドできて、 html ファイルで普通に link タグを書いたらよい、というのは便利。 CSS プロパティと値に対応する class 名があって、書くと勝手にスタイルが当たる、という感じで、見てほしい tsx ファイルとかを tailwind.config.js に指定しておくと勝手にビルド結果の css ファイルに含めてくれるのが賢い。あとサイズが小さくて、 zip が半分くらいになった (React コンポーネントとかもないし……)。
 当然 class 名がわからないので、スタイルを微調整ドキュメントを margin とか font-size とかで検索しまくって class 名に入れていく作業だった。よく使うものは覚えられそうな命名規則だけど、ミスってないかは結構気をつかうし、細かい (px 単位とか) 指定はあまりないので、フレームワークにしっかり乗るか、 style 属性を当てていく気力は必要 (カスタマイズとかもできるっぽいけど今回はそこまでやっていない)。典型的なもののテンプレート集があって、そこからコピペで作れるというのは面白い (Tailwind CSS Components - Tailwind UI とか)。
 class 名をいろんな場所で再利用する、とかはできないけど、逆に、いい class 名たちがすでに書かれている React コンポーネント*2のほうを再利用する、という書き方に勝手に寄っていく?と思うと、変に class 名を予定外のところで使われてしまうおそれが減ったりして便利なのかも。でも微妙に違う用途のために、微妙に違うコンポーネントがたくさんできたり、コンポーネント内で条件分岐が生まれまくったりすると、それはそれで大変そう。

Tailwind CSSを使ってスタイルをあてた設定ポップアップ

*1:今思うと html ファイルも含めてまとめて扱うようなものでしか嬉しくない?ならそれはそうか

*2:任意のテンプレートの概念でもよい

GitHubのissueやpull reqのラベルはキーボード操作でも付けられる

 GitHub の issue とか pull request では、 L キーを押すとラベルのモーダルを開ける。検索語を入れたりしつつ、十字キー上下でラベルを選んで、 Enter キーかスペースキーでチェックをつけたり外したりしてから、 Escape キーでモーダルを閉じると、チェックをつけたラベルが付く。

操作の様子

 GitHub のショートカット一覧を見るとめちゃくちゃ色々ある。

docs.github.com

 余談だけど、日本語でこのドキュメントを見ると、ショートカット一覧の表が (GitHub のドキュメントの独自のテンプレートの記述のせい?で) 崩れている箇所があって、何かして直せないのかな〜と思ったけど、すでに issue が立って閉じられていた (内部でやってる処理だから報告しとくねと書かれているけど、その後まだそのままになっていそう)。 Keyboard shortcuts : broken table in translations · Issue #24021 · github/docs · GitHub

 CSS だけでダークモードとそうじゃないモード(ライトモード?)を切り替えられるような仕組みはできないのかな〜と考えていて、 details タグをボタンと見なして open 属性の有無で切り替えるというのは :has で書けるな、と思ったのだけど、自分のブログに置こうとすると、ページ遷移ごとにもとに戻ってしまうので、あんまり便利ではなさそうだった。ページ遷移をまたいで何かするなら localStorage とかを使うことになりそうだし、それだったら details タグとか使わずに最初から JavaScript を書いたらよさそう、となってしまった。何かうまい方法があったりするんだろうか……。

Google Chromeのサイト内検索(検索のショートカット)機能を便利に使う

三行

  • Google Chrome には、「サイト内検索」という機能があり、好きなキーワード + 検索語で、好きな検索 URL をつくれる
    • 検索のショートカットのような機能
  • 特定のサイト内検索 URL をつくるだけじゃなくて、規定の検索エンジンの検索 URL をつくっても良い
  • 検索 URL だけじゃなくて、自由な URL をつくっても良い
    • 使い方には注意

目次

サイト内検索という機能がある

 Google Chrome には「サイト内検索」という機能がある*1。ユーザが好きに決めたキーワード + 検索語をアドレスバー (omnibox) に入力することで、規定の検索エンジンに限らない、好きな検索 URL をつくることができる。
 設定項目は「設定 > 検索エンジン」以下 (chrome://settings/searchEngines) にある。

 たとえば、キーワード amaz で URL https://www.amazon.co.jp/s?k=%s と設定した場合、アドレスバーにamaz[Tabキー]ディスコ CDと入力すると、 Amazon を「ディスコ CD」で検索したページに遷移できる (%s のところに検索語が入る)。キーワードを入れてショートカットを発動させてから、検索語を入れる感じ。
 これを使うと、一旦 amazon.co.jp にアクセスしてから検索バーに入力、という手間が減って便利。


規定の検索エンジンの URL でも良い

 好きな URL をつくれるので、あえて普段使っている検索エンジンの URL をつくっても良い。
 たとえば、 MySQL の公式ドキュメントで HAVING 句に関するページを探したいことがある。公式ドキュメントは https://dev.mysql.com/doc/ で、サイトの検索機能も使えるが、多分本文にもマッチしていて色んなページが出まくってしまい、目当てのページを見つけるのはちょっと難しいことが多い。

2614ページ出ていて難しい

 一方、 mysql having とだけアドレスバーに入れて (僕が普段規定の検索エンジンにしている) Google で検索すると、世界中のサイトが登場してしまい、公式ドキュメントを一覧しづらい。テクニックとして、 MySQL の公式ドキュメントの URL を使って site:https://dev.mysql.com/doc/ と絞り込むことができるのだけど、これを毎回手で打つのも大変。 developers.google.com

 そこで検索ショートカットを使う。キーワード my で URL https://www.google.com/search?q=site%3Ahttps%3A%2F%2Fdev.mysql.com+%s と設定すれば、アドレスバーにmy[Tabキー]havingと入力するだけで、 MySQL 公式ドキュメントで HAVING 句に関するページを Google で一覧できる。人々の関心が集まるページがほどよく上に表示されていて便利。


検索 URL じゃなくても良い

 キーワードに対応した特定の URL で、 %s を入れた場所に好きな文字列を入れられる機能、と捉えると、もっと使い方が広がる。
 たとえば、 URL http://hidic.u-aizu.ac.jp/result.php?tableName=tango&word=%s に設定すると、ハイパー英語語源辞書で入力した英単語についてのページ (パーマリンク) を開くことができる。普通はサイトにある検索機能を使って単語を検索して、出てきたリンクを踏んでパーマリンクにたどり着くけど、調べるときは単語はわかっていることが多いので、一発で開けるのが便利。
 URL のどこにでも %s を入れられるので、 https://%s.hog.as/ のようにドメインに入れることもできる。サイトで色んなサブドメインを切っている (Deploy Previews | Netlify Docs みたいな) ときなどに便利。同じ発想で、実は URL スキームに入れて %s://hog.as/ などということもできるけど、これは使い所があんまりなさそう……?
 ちなみに、少なくとも URL である必要はありそうだった (適当な文字列を入れて追加すると、勝手に http:// 始まりにされる)。

意図しない URL にしてしまわないよう注意

 意図しない URL をつくりあげてしまうと、悪意のあるサイトにアクセスしてしまう可能性があるので注意したい。 URL を設定する際に 1文字打ち間違えると違うサイトになってしまったりする。また単に文字列なので、ドメイン%s を入れた上で google.com/ と入れてしまうと、ドメイン部分が終わって以降は URL パスになってしまう。
 不安な場合は、少なくともドメイン部分まではよく確認した上で決め打ちにして、 %s を入れるのはパス以降にするのが安心そう。

developer.mozilla.org

追記

Firefox にもある

 Firefox では、ブックマークにキーワードを設定するという方法で同じことができる、と教えてもらった。便利。


%s も入れずに使う

 %s を入れるのは必須ではないので、単に短いキーワードでよく使うページを訪れるのにも使える、と指摘してもらった。たしかに便利。

*1:Firefox Safari でも検索ショートカット機能はあるけど、ユーザが好きに設定することはできないように見えた(2023/10/3 時点) → Firefox にはあると教えてもらった

拡張機能「twitter画像原寸ボタン」v5.3.0公開

 拡張機能twitter画像原寸ボタン」 v5.3.0 を公開しました。画像ページで Ctrl-s/Cmd-s を押したときの保存されるファイル名を修正する機能を削除しています。

 機能削除はあまり歓迎されないものと認識しています。そのために今まで残していましたが、メンテナンスしていくにあたって考えることを減らすためにやはり削除しました。削除するに至った理由は以下です。

 まず少し前に、 URL パスが hogehoge.jpg:orig から hogehoge?format=jpg&name=orig のような書式に変わり、この場合はファイル名を修正しなくても (hogehoge.jpg-orig とかにならずに) hogehoge.jpg として保存されるようになりました (つまり想定された拡張子で保存できるようになった)。ブラウザの仕様に乗れるなら、それが最も良い状態と考えます。
 また、もともとダウンロードを主な機能としていない拡張機能なので、ダウンロードに関わる機能の部分を強化していく方針はありませんでした。この機能を実装した当時の記事でもそう書いていますが、少なくとも拡張子が変なものになるのはおかしい、という動機で実装していました。上述の通りやらずに済むようになったということもあり、機能を削除することにしました。

あまり保存を主目的としないつもりでいるので、直感的に正しい挙動になるくらいを目指しています。

GoogleChrome拡張機能「twitter画像原寸ボタン」ver.2.1 - hogashi.*

 このバージョンから「twitter画像原寸ボタン」ではダウンロードについての機能が薄くなることになります。ダウンロード機能が必要な方は、そういった機能がある他の拡張機能をお使いいただけると幸いです。

 「twitter画像原寸ボタン」のインストールはこちら:

Google Chrome
chrome.google.com

Microsoft Edge 版 (公開まで 1週間くらいかかるようで、前のバージョンの公開待ちです)
microsoftedge.microsoft.com

拡張機能「twitter画像原寸ボタン」v5.2.1公開

 拡張機能twitter画像原寸ボタン」 v5.2.1 を公開しました (数日のうちに更新されるはず) 。

 公式 Web でたまに画像が webp で表示されることがあり、その場合は name=orig での表示ができないようなので、 webp のときに限ってかわりに name=4096x4096 を使うようにしました *1 。手元で確認した限り、同じ仕様 *2 で表示できるようなので、拡張機能としての挙動の変化は URL やファイル名が変わるくらいのもので、基本的な体験は変わりません。

 ついでに、ダークモードのとき Original ボタンが見えないことがあったので修正しました。表示はされているけど色が黒く、背景と同じ色になってしまっていたので、見える色になるように調整しています。

 インストールはこちらから:

Google Chrome
chrome.google.com

Microsoft Edge
microsoftedge.microsoft.com

 追記: この拡張機能が webp で画像を開くのは、 Twitter 側が表示している画像のサムネイルが webp になっているときです。基本的に Twitter が表示しようとしている画像をそのまま開くのが素直な実装であり、また webp で表示されている画像がもともと jpg だったのか png だったのかが html などからは判断できないので、 webp の場合は webp のまま表示することにしました。

*1:orig で作ったときと同じく偶然知った仕様なので綱渡りな感じですが、元来アドオンとはそういうものだと思います

*2:基本的に原寸表示で、長辺が 4096px 以上のときは 4096px 四方に収まるようにリサイズされる