hogashi.*

日記から何から

拡張機能「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:任意のテンプレートの概念でもよい