hogashi.*

日記から何から

拡張機能「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 四方に収まるようにリサイズされる

marquee 入れ子 どうなる

<marquee scrollamount="1" direction="right">
  <div style="width: 100px; height: 100px; background-color: green;"></div>
</marquee>
<marquee scrollamount="10" direction="right">
  <marquee scrollamount="9">
    <div style="width: 100px; height: 100px; background-color: green;"></div>
  </marquee>
</marquee>
<marquee scrollamount="10" direction="right">
  <marquee scrollamount="10">
    <div style="width: 100px; height: 100px; background-color: green;"></div>
  </marquee>
</marquee>
<marquee scrollamount="10" direction="up">
  <marquee scrollamount="10" direction="down">
    <div style="width: 100px; height: 100px; background-color: green;"></div>
  </marquee>
</marquee>
<marquee scrollamount="20" direction="up">
  <marquee scrollamount="20" direction="down">
    <marquee scrollamount="20" direction="right">
      <marquee scrollamount="20">
        <div style="width: 100px; height: 100px; background-color: green;"></div>
      </marquee>
    </marquee>
  </marquee>
</marquee>
<marquee scrollamount="7" direction="up"  style="height: 300px;">
  <marquee scrollamount="19" direction="down"  style="height: 150px;">
    <marquee scrollamount="31" direction="right"  style="height: 100px;">
      <marquee scrollamount="59"  style="height: 100px;">
        <div style="width: 100px; height: 100px; background-color: green;"></div>
      </marquee>
    </marquee>
  </marquee>
</marquee>
<marquee scrollamount="7" direction="up" style="height: 300px;" behavior="alternate">
  <marquee scrollamount="19" direction="down" style="height: 150px;" behavior="alternate">
    <marquee scrollamount="31" direction="right" style="height: 100px;" behavior="alternate">
      <marquee scrollamount="59" style="height: 100px;" behavior="alternate">
        <div style="width: 100px; height: 100px; background-color: green;"></div>
      </marquee>
    </marquee>
  </marquee>
</marquee>

注釈

developer.mozilla.org

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/marquee

 分割キーボード使ったりはしてるけどトラックパッドは右手で使うので結局なんとなく体の力の入り方のバランスが取れてないな〜と思っていたけど、こと Magic Trackpad に限っていえば左右どっちの手で使っても特に困ることないことに気付いた。ここ数年で上位に入る気付き。早速左手で使い始めているけど自然と右手が出てしまっておもしろい。

Chrome113でHTTPヘッダを上書きしていろんな状態をお試しできる

 Chrome 113 で、 DevTools の Network ペインで HTTP ヘッダを好きなように編集して、いろんな状態をお試しできるようになっている。 What's New in DevTools (Chrome 113) - Chrome Developers で紹介されている。

GitHub から example.com を fetch してみる

 試しに、 CSP で外部への通信がそれなりに制限されている GitHub から、 example.com への fetch を成功させてみる (外部サイトへの通信は、認証情報や秘密の情報の漏洩などに気をつけて試してください。この記事の事例は多分安全と思って書いています)。 Chrome のバージョンは 113.0.5672.92(Official Build) (arm64)

GitHub の CSP ヘッダを上書き

 https://github.com/git/git を開き*1、まず素朴に DevTools の Console から fetch する ( fetch('https://example.com/') )と失敗。 CSP のルールで弾かれている。

 Network ペインで編集したい通信 (今回は https://github.com/git/git) をクリックして Headers を開き、 Response Headers のどれでもよいのでホバーして鉛筆マークを押せば、編集モードに入ろうとする。

 ここで、「Select a folder to store override files in.」と言われて、「Select folder」を押すとファイルエクスプローラが開く。今回は適当にデスクトップにフォルダをつくった。

 すると「デベロッパーツールでは 〜(選んだパス) へのフルアクセスがリクエストされます。機密情報の漏えいにご注意ください。」と案内されて、許可と拒否を選べる。ミスって秘密のファイルが入ったフォルダなどを選んでもやり直せるようになっていて丁寧。今回は新しくつくったフォルダなので許可する。

 これでようやく編集モードに入る。わかりづらいけど、等幅フォントになり、ホバーすると textarea の枠が薄く表示されて、編集できそうな感じになる。 Content-Security-Policy ヘッダの 2〜3行目にある connect-srcexample.com を追加した (CSP: connect-src - HTTP | MDN を許可すると fetch できるようになる)。編集したヘッダはわかりやすく緑になっている。


 右上の Header Overrides をクリックすると、 Sources ペインの Overrides タブで .headers ファイルが開かれ、編集したヘッダの一覧が見られる。 GitHub の CSP ヘッダの内容が長くて見づらいけど、パス github.com/git の git というファイル (つまり github.com/git/git) への通信の際に、 CSP ヘッダが上書きされるよ、というのがわかる。ちなみにここでもヘッダの値を編集できる。

 これだけでは、まだ今のページには反映されていないので、 fetch すると失敗する。適用するには再読み込みが必要。
 再読み込みすると、 github.com/git/git への通信の Status の 200 の左にマークがついていて、 Header Overrides が適用されていることがわかる。

 Headers を見ると、さっき編集された状態のままになっている (画面を大きくしてしまって行がずれてるけど、 1行目の最後のほうに example.com が入っている)。

 これでいけるかと思って fetch すると、こんどは CORS で失敗する。 example.com 側で、 github.com からのアクセスを許可していない。


example.com の CORS のヘッダを上書き

 つまり example.com のヘッダも書き換えたらよい。今度は編集モードに入った後に登場する「Add header」ボタンで Access-Control-Allow-Origin - HTTP | MDN ヘッダ (値は https://github.com) を追加する。


 Sources ペインで見ても、 example.com の index.html に対してヘッダが増えている。

 この場合は、現在見ているページではなくて fetch してくるページなので、再読み込みとかはなく、新しく fetch し直したら成功する。めでたく HTML が console.log された。

fetch('https://example.com/').then(res => res.text()).then(t => console.log(t))


途中で指定したフォルダの中身は何?

 ヘッダの編集モードに入るときにフォルダを指定した。 Sources ペインで雰囲気はわかるかもしれないが、パスごとのフォルダができ、その中の .headers ファイルに JSON で上書きヘッダが書かれている。

$ tree -a ~/Desktop/chrome-http-header-override/
/Users/hogashi/Desktop/chrome-http-header-override/
├── example.com
│   └── .headers
└── github.com
    └── git
        └── .headers

4 directories, 2 files
$ cat ~/Desktop/chrome-http-header-override/example.com/.headers 
[
  {
    "applyTo": "index.html",
    "headers": [
      {
        "name": "access-control-allow-origin",
        "value": "https://github.com"
      }
    ]
  }
]

 このファイルを直接編集しても反映される。試しに example.com の .headers ファイルで、 hoge ヘッダを書き込んでみた。

$ cat ~/Desktop/chrome-http-header-override/example.com/.headers 
[
  {
    "applyTo": "index.html",
    "headers": [
      {
        "name": "access-control-allow-origin",
        "value": "https://github.com"
      },
      {
        "name": "hoge",
        "value": "hogashi"
      }
    ]
  }
]

 fetch すると Hoge ヘッダがちゃんとついている。自然とcamelcase にされるのですね。


上書きをやめるには?

 内容を残したまま一旦オフにしたいときは、「Enable Local Overrides」のチェックを外せばよさそう。

 あるいは、 .headers ファイルを消せば、上書きされなくなる。全部吹き飛ばすには、「Clear configuration」を押せばよい。



感想

 機能は便利そう。気をつけるポイントはありつつ、今までサーバ側を変更しないといけなかった部分をクライアントのみで試行錯誤できるので、開発しやすさがあがっていきそう。
 権限を要求してまでローカルのファイルに保存する仕組みにした理由はちょっと気になる。直接エディタなどで編集できるのは便利なので、そこを優先したのかな……? とか考えているけどわからない。

*1:一応シークレットウィンドウで開いた

イヤホン / 考え過ぎる

 外出すると、たいていイヤホンをつけている。これは高校か大学のころに身につけ始めた技で、周りの音を小さくしたり、単に"ながら"にできる時間で曲やポッドキャストを聞いたりすることが積極的な動機。近年気付きつつある消極的な動機に、頭が自由に思考を進めることを抑制するような効果がある。
 見知った道で人通りも車通りもなくただ歩く、乗り慣れた電車で座って駅を待つ、というときには、頭が手持ち無沙汰(手?)になり、記憶から様々なことをひっぱり出しては後悔したり、悩むものの踏み切れないことを再認識して堂々巡りになったり、など、傾向として沈んでいくような思考が繰り広げられる。あるいはさらにそれ自体の原因とか解決とかを考えて、想像力とか自己肯定感とかに思い至るけど、どうしたらいいか途方に暮れて、振り出しに戻る。これは子供の頃から考え過ぎだと言われ続けて、未だに克服できていない。イヤホンで何かを流すことは、内容を聞こうが聞くまいが、思考の発展は鈍くなるので、結果的に考え過ぎを防いでいる。
 ところでこれは、思考が鈍くなるので、思考の量は減り、記憶も曖昧になる。天気を気にしたり、この後の予定を組み立てたり、買うものを思い出したりが鈍くなり、何を食べてどうだったか、どこを歩いたのか、見えたものは何かを覚えていないことがある(覚えるどころか感じていない可能性もある) *1。特に自分は記憶が下手でよく忘れるのに、これによって輪をかけて覚えていないので、あとで人に聞かれても頭が真っ白になるばかりで何も答えられない。
 考え過ぎは良くない、といっても、こんなに考えていない/覚えていないとなると、それはそれで不安になる(イヤホンを外した後に)。過ぎることがよくないのであって、よく考えることは大切なはずなのだけど、その塩梅がうまくいっていない。依然として何か聞いていない時間で考え過ぎている(沈んでいる)自覚もあるし、考えられていないことを思ってさらに自己肯定感が弱くなっていくこともある。
 どうするといいかはまとまっていない。根本的には沈むような考え方を変えられるとよいはずだけど、天邪鬼も邪魔をして、一筋縄ではいかない(と思いこんでいる)。自分をよく評価してくれる他人を尊重したいが、傲慢にはなりたくない。
 単に自己鍛錬が足りないせいで裏付けを感じられないだけかもしれないので、様々な興味に対してなぜか動かしていない手を動かすのが第一歩かもしれない。もともと変化に対して恐怖と怠惰がある自覚はあって、ここ数年はそれが顕著になっている。なまじ築き上げたものが少しながらあるせいで、守りに徹しているのなら、失敗することでそれらをすぐ失うわけではないと認識する必要があるのかも。あるいは単に実力の無さを自覚したくなくて避けているのなら、せっかく自己肯定感が低い(つまり実態と認識が大体合っている)うちに強い気持ちで認めるとか。そもそも自分のできることを改めて書き出してみるとか。この記事のような思考はできる、からスタートしていることになる。

*1:曲がり角や後方確認はするようにしている。よく考えるとこれはなぜかやれていて、癖なのか致命的だからなのか気になる(確認の精度が落ちている可能性はある)