hogashi.*

日記から何から

blog.hog.as

 人工知能の盛り上がりがなんかなって思ってるという話を書いたけど、今日はついにすべてが無力だなと思って、仕事を中断して散歩に行った。人工知能自体は技術であって、人間とは被るところはありつつ違う能力を持ったもので、そこに勝ち負けとか考えるのはどうでもいいなと思うのだけど、何にこんなに無力を感じるのかとよく考えると、人間の人間に対する敬意が薄れていることだと思う*1。 AI でできるよ、お前の仕事はどうでもいい、みたいなことを言われると (別にまだ言われてませんが) 、それはそうなので、単にそうだねとなるだけで、じゃあ AI が全部やれや、もう知らん、となる。こうなると、当然今は発展途上の技術なので全部はやってくれず、仕方ないので場繋ぎの仕事をやる、という消極的な暮らしになってしまう。人間楽な方に流れがちなのは仕方ないけど、人間同士の尊厳を忘れずにいたい (人工知能のみの社会にしたい人については、僕はそうではないのでわかりません)。

*1:人工知能をつくっている人間に対しても敬意を持つべきだと思う

GitHubのコード表示部分はtextareaとbefore疑似要素でできている

 ここのことです*1

真ん中のカラムがコードの表示 (開発者ツールで見ると textarea にコードが入っている
目次

 たしかこないだまでは普通に div ? で、テキストをマウスカーソルでドラッグアンドドロップで選択したりするような感じだったはずだけど、最近?になって、選択できる部分は textarea になっていて、点滅するカーソルが出るので、キーボードでエディタのように移動・選択することができる (もちろん編集はできない *2 )。

選択範囲の一番右に白く点滅するカーソルが登場している
シンタックスハイライトはどうしているのか?

 textarea は部分的に色を変えるとかはできないはずだし、スタイルの様子を見ると textarea の color は背景色と同じ色に指定されていて見えなくされている (color: var(--color-canvas-default)) ので textarea でやっているわけではない。
 行番号あたりから HTML を見ていくと、 textarea の下にもう一個、コードを表示する用の div があって、なんと position: absolutetransform: translateY(20px) とかで位置をあわせて頑張って表示していることがわかる……。

textarea の下に行番号とコード本文を表示する div がある
上に表示されている div ならその文字もマウスカーソルで選択できるはずでは?
コードは data-code-text 属性に入っていて、 ::before 疑似要素 に attr を使って表示している

 部分ごとに span の data-code-text 属性にコードが入っていて、 ::before - CSS: Cascading Style Sheets | MDNattr() - CSS: カスケーディングスタイルシート | MDN を使って content: attr(data-code-text) して表示している (color も適用されるのでシンタックスハイライトができる)。 ::before 疑似要素なので、カーソルで選択もされないようになっている。
 以前書いたブログ記事では、 ::before の content の中にブログを書くという全く意味のない用途しか思いつかなかったけど、こういう用途があるのか……(余談)。

今日の落書き - hogashi.*
なぜこうしたのか?

 真意はわからない (公式ブログとかでも特に説明は出てないと思う) ものの、個人的な推察では素朴にコード選択をしやすいようにしているのかなと思った。最近は GitHub 上でコード内の識別子をクリックするとハイライトされたり定義元が出たりするようになっているので、コード選択のためのクリック (ドラッグの最初) がそれに吸われてしまうと困る。今は選択は普通にできて、識別子のハイライトもされる (コードのどの文字をクリックしたかをクリック位置から計算しているのか……?) 。

困ることはないのか?

 シンタックスハイライトのスタイルをそのまま使ってリッチテキスト (Google Documents とか) のエディタに貼り付けるようなことはできなくなった。ただの textarea からのコピペなので、ただのテキストとして貼り付けられる (個人的には嬉しい)。やるなら、一旦手元の VSCode で表示してシンタックスハイライトさせてからコピーすることになりそう (github.dev でもできる)。
 あとコード部分をクリックした状態で . (ピリオド) キーを押すと、 https://github.dev/github/dev に行ってしまう。本来そのファイルを開いた状態の github.dev (VSCode for the Web) が開かれるはずで、これは単にバグだと思うので feedback に書いた pressing `.` key while the cursor is on code textarea navigates to github.dev with no files are opened · community · Discussion #52435 · GitHub

*1:例として renovate/config-validator.ts at b23700d749e0f483ed7afc1afcca9a328902a9ef · renovatebot/renovate · GitHub をあげています

*2:readonly 属性がついているわけではないので、 keydown イベントとかで (ショートカットキーを発動するついでに) 握りつぶしているのかも

 土日にでかけたところ年度の始めという感じの人の多さだった。日曜なのにスーツ着てる人がたくさんいたけど何かあったのか……?というのは気になった。あと京都の土日は確かにこういう感じだった気がするというくらい外国人の方々がいて、回転寿司で隣の夫婦に甘だれをつけて食べるネタはどれか聞かれたりしていた。あなごとかうなぎとかなんだけど英語で言うとなんだっけとか会話した (最終的に思い出して eel だわおいしいよって伝えた)。イオンで買い物した後ビール飲んでてもどんどん外国の方が店に来るみたいな状態で賑わっていた。積極的に話しかけるようなことはしてないけど、たまに英語話すと肝心な単語が出てこなかったりしてやっぱり全然話せないな〜と思う。

スマホのブラウザでinput type="date"で年を選ぶ

 あるサイトで、誕生日の入力に input type="date" が使われていて、こういう画面が出る (画像は MDN で見てるけどそれには特に意味はない)。

 今ここでおためしできます:

 前後の月に移る矢印しかなさそうで、みんな自分の生まれ年まで頑張って遡ってるのか? いやそんなはずはないが……?? と思って色々押しまくっていくと、なんと実は左上の年が押せる。

 押すと、年を選ぶドラムが表れて、年を楽に選べる。これで矢印を年齢x12回押さずに済む。

試しに2000を選んだので2000年になった

 ここにのせた画像は AndroidGoogle Chrome だけど、 Firefox も同じような感じだった (iOS Safari の様子は見れてない)。これどれくらいの人々が認識できているのだろうか? わかりづらいからといって年だけ分けるのはちょっと面倒なはず (うるう年とか) なので、画面の見え方がもう少しわかりやすくなってくれると嬉しそう。

 (追記) iOS Safari の様子を id:a666666 さんに見ていただいていた、ありがとうございます。比べるとちょっとわかりやすそうだった。
blog.kyanny.me


 ちなみにデスクトップの Google Chrome などではカレンダーの左上 (下向き三角形がある部分) を押すと月単位の選択画面になるので、年も楽に選べる (あと数字を直接入力もできる)。スマホはこれに比べてボタン感がないのが難しかった。

年月が一覧できる

 人工知能の盛り上がりになんかなって思っていて、天邪鬼だからとか同じものができあがればできるのはそれはそうでしょうとか自分のやってることがしょぼすぎてもうやる意味がないといわれているようだからとかというのはあると思うけど、もう少しよく考えると、返答から思考をトレースするのが好きだからかもしれなくて、こう考えたからこう応えてくれているのかなとか思いを馳せるのを多分無意識にも意識にもやっているんだけど、今のところは何を聞いてもはぐらかされるような感じで根拠も薄くてまったくトレースする意味がないように感じられて嫌なんだと思う、今盛り上がれている人は別にそれでよくて、そういう人たちのおかげで進化していってちゃんと根拠を持っているようなものになったら好きになるかもしれない。食いっぱぐれたらそれだけです。