続きを読む我々は香りを忘れつつある
— シャッカ (@hogextend) 2022年5月14日
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>
注釈
非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/marquee
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-src に example.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:曲がり角や後方確認はするようにしている。よく考えるとこれはなぜかやれていて、癖なのか致命的だからなのか気になる(確認の精度が落ちている可能性はある)
二条城で畳の質問に答えてもらった
二条城に散歩にいって、二の丸を見ていてふと畳の向きが揃っていることに気づいた。なんとなくの知識しかないけど、和室のイメージでは、互い違いというか角が 4つ合わないように並べるのがよい、みたいなのを聞いた覚えがあるので、これは意図してやっているんだろうか、と思った。
国宝・二の丸御殿 | 二条城 世界遺産・元離宮二条城
黒書院二の間から一の間を見る
二の丸の受付の人に、事務所に学芸員さんがいたら聞けます、と教えてもらったので、事務所に行って聞いてみると、
- 当時のことがよくわかっていない
- 大政奉還からの近代化で、いったん畳を全部剥がして絨毯を敷いて、テーブルを置いていた時期があった
- 床も畳の厚さ分だけ上げられている
- 今は展示目的で畳の上部分だけ敷いている
- 大政奉還からの近代化で、いったん畳を全部剥がして絨毯を敷いて、テーブルを置いていた時期があった
- 建築的な面では、今の家における和室などはある程度パターンが決まっているが、スケールが違うので、同じ考え方が適用できない
- 家における床の間などは、部屋の中で上座が決まっていたりする
- 二条城では、一の間二の間三の間など、部屋ごと上座のようなものが分けられており、部屋の中でどうするかは定かではない
というようなわけで、今こう敷いているのが正しいとも間違いともわからない、という結論で面白かった。学芸員さんありがとうございます。
■
人工知能の盛り上がりがなんかなって思ってるという話を書いたけど、今日はついにすべてが無力だなと思って、仕事を中断して散歩に行った。人工知能自体は技術であって、人間とは被るところはありつつ違う能力を持ったもので、そこに勝ち負けとか考えるのはどうでもいいなと思うのだけど、何にこんなに無力を感じるのかとよく考えると、人間の人間に対する敬意が薄れていることだと思う*1。 AI でできるよ、お前の仕事はどうでもいい、みたいなことを言われると (別にまだ言われてませんが) 、それはそうなので、単にそうだねとなるだけで、じゃあ AI が全部やれや、もう知らん、となる。こうなると、当然今は発展途上の技術なので全部はやってくれず、仕方ないので場繋ぎの仕事をやる、という消極的な暮らしになってしまう。人間楽な方に流れがちなのは仕方ないけど、人間同士の尊厳を忘れずにいたい (人工知能のみの社会にしたい人については、僕はそうではないのでわかりません)。
