hogashi.*

日記から何から

 缶をミスってつぶしたのでちょっとでも戻そうとしたところ四角く戻った。断面の面積に思いをはせて、そういえば、長方形のうち全部の辺の長さが一定のとき面積が一番大きいのは正方形、というのは習ったけど、正方形と円だとどっちが大きいのか、と思って雑に計算した。合ってるかは自信は無い。

続きを読む

いまの天気でブログの背景を変える

 ブログの背景を京都のいまの天気によって切り替えてみたくなって OpenWeather という天気 API を使って素朴に background-image を切り替えるようにした。アカウント作ったら API が使えて便利、ちょろっと js 書いて完成した。いま京都は曇りです。

openweathermap.org

 写真は過去に取ってたやつを使っている、冬が好きなので夏だけど問答無用で雪の様子が出ます。

/* 京都の天気で背景変える */
const url = 'https://api.openweathermap.org/data/2.5/weather?lat=35&lon=135.7&units=Metric&appid=xxx';
fetch(url).then(res => res.json()).then(json => {
  const weather = json.weather;
  if (!weather || !weather[0]) { return; }
  const mainWeather = weather[0].main;
  const backgroundImageSrcs = {
    Clear: 'https://cdn-ak.f.st-hatena.com/images/fotolife/h/hogashi/20210715/20210715000656_original.jpg',
    Clouds: 'https://cdn-ak.f.st-hatena.com/images/fotolife/h/hogashi/20210714/20210714235934_original.jpg',
    Rain: 'https://cdn-ak.f.st-hatena.com/images/fotolife/h/hogashi/20210714/20210714233101_original.jpg',
    Snow: 'https://cdn-ak.f.st-hatena.com/images/fotolife/h/hogashi/20210714/20210714233101_original.jpg',
  };

  const imageSrc = backgroundImageSrcs[mainWeather];
  document.querySelector('html').style.backgroundImage = `url('${imageSrc}')`;
});
html {
  background: top / contain repeat-y url('');
}

body {
  /* 写真そのままだと見づらいこともあるのでちょっと白くする */
  background-color: rgba(255, 255, 255, 0.4);
}

 天気の API 探したらこの記事を見つけたので見つつやってて、確かにアカウントつくった直後は API 使えなかったけどちょっと待ったら使えるようになるみたいな感じだった。

dev.classmethod.jp

めちゃくちゃでかい時計考えてた

  • めちゃくちゃでかい
  • 分と時を表すインジケータが 100km くらい離れてて、遠くから見ると隣に見えるので合わせて時間がわかる
  • 長針は遠いけど短針はさらに遠くてうまく重なるところに立つと普通の時計みたいに見える
  • 高さが違うビル 2つの屋上に長針と短針がそれぞれあって、直線で結んだところがそれを作って楽しんでる人の部屋の窓みたいな
  • トゥームレイダーの序盤の遺跡の目のモビールみたいなやつみたいな
  • 目盛りも置くなら針の間にするとピント的によさそう
  • ピントを気にするなら長針のほうが目盛りで細かく見たい、短針はぼやけてても大体何時と何時の間かわかれば十分
  • 長針の指す先が目盛りのどこなのか重なっても見れるように長針が目盛りより手前だとよさそう、短針は目盛りの後ろ
  • 秒針が欲しかったら長針より気にしたいかはちょっとわからない
  • ピント問題を無視する手法としては太陽の光の影で時計をつくるとかがありそう
  • 太陽の光の角度に合わせてうまく影が重なるように針の軌道を設計できるのか気になる
  • 曇りだとわかんない

アウトプットしようとすると自ずときめ細かな情報収集ができて便利

 アウトプットなぜ良いのかは世間で無限に話されているけど、自分にとってはやはりこれが一番大きいと思う。

 昨日書いた JavaScriptでは変数名に三点リーダが使えない/識別子におすすめUnicode文字セット - hogashi.* も、最初は JavaScript が変数名に使える文字の範囲を決めているんだろうな (それはそうか) くらいにしか思っていなかったし、どういう範囲なのか気になって見て Unicode にそういう文字セットがあるのかというのと三点リーダは入ってないんですねというのを確かめて満足しかけていた。
 ただ、意外と Unicode にそういうのがあるというのはいかにも忘れそう && せっかくなので、という気持ちでブログ記事にまとめた。そうすると、「どこを見たのか」「何と書いてあるのか」というようなぼんやりとやっていたことを、文字に起こしてはっきりさせる必要が出てくる。個人のまとめなのでもし間違っていても仕方ないが、できれば間違えたくないし、根拠も納得できるものにしたい。なのでドキュメントをちゃんと見るし、英語も読む (不安なので機械翻訳にかけたりもする) し、実際に実行してどういうエラーが出るのかもちゃんと見る。
 結果的には最初に比べて格段に細かい情報収集をするので、もし間違っていたらそれに気づけるし、より納得できる。あと少なからず推敲するので知識が記憶に定着して便利 (忘れることもあるけど記事見返したときの思い出し方が変わってきそう) 。

 ちなみにこれはアウトプットということはなくて単なる日記です。日記をインターネットに書くことにどういう嬉しさがあるかは言語化むずい気がするけど、少なくとも文章をそれなりにちゃんと書く練習にはなっていそう。てにをはとか……。

JavaScriptでは変数名に三点リーダが使えない/識別子におすすめUnicode文字セット

TL;DR

本編

 JavaScript では、変数名に日本語を使ったりできる (使える言語は他にもあると思う) が、三点リーダは使えない (syntax error になる*1 )。

const いろは = 123;
const い… = 123;  // Uncaught SyntaxError: Missing initializer in const declaration
let ろ… = 123;  // Uncaught SyntaxError: Invalid or unexpected token
const= 123;  // Uncaught SyntaxError: Invalid or unexpected token

 MDN を見ると、ブログ記事に詳しいとのこと。

åü などの ISO 8859-1 や Unicode 文字 (詳しくはこのブログ記事を参照) も識別子に使用することができます。

文法とデータ型 - JavaScript | MDN

 ブログ記事を見ると、 ES2015*2での識別子はこう:

  • $_UnicodeID_Start の文字から始める
  • その後は $_ かゼロ幅非接合子*3かゼロ幅接合子*4UnicodeID_Continue の文字
Acceptable Unicode symbols

In ES2015, identifiers must start with $, _, or any symbol with the Unicode derived core property ID_Start.

The rest of the identifier can contain $, _, U+200C zero width non-joiner, U+200D zero width joiner, or any symbol with the Unicode derived core property ID_Continue.

Valid JavaScript variable names in ES2015 · Mathias Bynens

 Unicode を見ると、 ID_StartID_Continue というのは Unicode が用意している識別子用の文字セット詰め合わせみたいなもので、プログラミング言語の変数名などはこれを使うのがおすすめというようなことが書かれている。

These guidelines follow the typical pattern of identifier syntax rules in common programming languages, by defining an ID_Start class and an ID_Continue class and using a simple BNF rule for identifiers based on those classes; however, the composition of those classes is more complex and contains additional types of characters, due to the universal scope of the Unicode Standard.

UAX #31: Unicode Identifier and Pattern Syntax

 三点リーダUnicode でどうなっているか見ると、確かに ID_StartID_Continue には入っていない。というわけで、 JavaScript では変数名に三点リーダは使えないのであった。

 普段の暮らしで妙な変数名にすることはまずないので困らないけど、もし困ったら https://codepoints.net/ で見るとよい、ということがわかった (エラーで気付きそうではある)。
 あと Unicode が識別子用におすすめ文字セットを用意してくれてるのは便利、 Unicode のドキュメントにも書いてあるけどハッシュタグみたいなことをするときにどういう範囲の文字を使うかさっと決められそう。

*1:const の例では書式がおかしいので? 初期化してないよというエラーになっている

*2:https://262.ecma-international.org/6.0/

*3:ゼロ幅非接合子 - Wikipedia

*4:ゼロ幅接合子 - Wikipedia

text-shadowで文字の影だけ見せる

 CSS の text-shadow は、ぼかしは無しでずらすだけというのもできる。なので、めちゃくちゃずらすと文字が複製されたように見える。 MDN で書かれている例だとこう。

text-shadow: 5px 10px;

f:id:hogashi:20210619063151p:plain

https://developer.mozilla.org/ja/docs/Web/CSS/text-shadow

 つまりこういうことができる。画面外とかに文字を隠して、影だけを見せる。影の色も指定できるので好きな色にもできる。 https://atom-copper-cement.glitch.me/

お試し iframe コーナー

f:id:hogashi:20210619064649p:plain
Cmd-A の様子

 影の部分は、カーソルをホバーしても I 形のカーソルにならないし、文字選択もできないように見える。あと、影の後ろに他の文字をこっそり置くと、全然違う文字を選択させることもできる (例では HELLO, WORLD は影で、 SECRET STRING を白色で後ろに置いている)。

 実は元の文字も HTML 文書的には存在するので、カーソルをうまくドラッグしたり、 Cmd-A とかしたりすると、実は選択できる。何に使えるかはわからない。

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

 拡張機能twitter画像原寸ボタン」の v3.2.0 を公開しました。 https://twitter.com/ と同じ見た目(?)の https://mobile.twitter.com/ を開いているときでも動作します。

 インストール済みなら待っているうちに更新されるはず。どうぞご利用ください。
 (追記 2021/6/12) そういえば動作するドメインを増やしたので権限の許可とかがまた必要かも?

chrome.google.com

 MSEdge 版もあります。 twitter画像原寸ボタン - Microsoft Edge Addons