HTML 中のルビ文字列を乱暴に全部消したい

テストデータとかに使うための長い適当な文字列がほしいという時は、Lolem ipsum とかでググるか、Wikipedia や青空文庫から拝借するのだけど、青空文庫でルビ付きの作品はそのままコピペするとルビがくっついた文字列になるので変で困っていた。具体的には、

親譲おやゆずりの無鉄砲むてっぽうで小供の時から損ばかりしている。

夏目漱石 坊っちゃん

を (プレーンテキストに) コピペすると、たいていこうなるはず。

親譲おやゆずりの無鉄砲むてっぽうで小供の時から損ばかりしている。

いったん ruby 要素のことは考えずに、ルビの文字列だけ消滅させてしまえばコピペしたときにはわからなくなるので、そういうことをする最短の JavaScript スニペットを作った。それがこちら。

Array.from(document.querySelectorAll('rt'), el => el.parentNode.removeChild(el))

参考

blog.sushi.money

macOS の Preview.app で Slack のカスタム絵文字をいい感じに作る

この記事では、macOS に標準で付属している Preview.app だけを使い、普通の写真から対象物だけを切り出した Slack 絵文字に最適な画像を作る方法を説明する。

今回は例として、

  • 以下の写真の右上部分に写っている赤くて丸い缶バッジだけを切り出して
  • 背景を透過にした
  • サイズが 128 × 128 以下の png ファイル

を作ることを目標とする。

続きを読む

京都観光日記

伏見稲荷は普通に昼間に行ったら人が多すぎたので途中までしか登っていない。中途半端に途中まで登ったので、人にまみれてとにかく鳥居を消費しているという感じで、なかなか難しかった。次はナイスカメラを持った状態で夜に行きたい。

天下一品の総本店で食ったやつ

北大路

貴船のメチャクチャきれいな川

デルタ

たまこラブストーリー

こちらからは以上です。

Firefox や Google Chrome で、リンクになっている文字列を一発で選択する方法

alt を押しながらドラッグ するとよい.

こちら 👇 がその様子.

f:id:polamjag:20170209151724g:plain

(出典: ビザンティン建築 - Wikipedia)

macOS を使っている時にたまたま見つけたけど, 今試したら Windows の Firefox や Google Chrome でも使えた. Safari, Edge や IE はダメっぽい. 細かいところでは、Slack のように Electron ベースのアプリケーションでも使えるっぽい.

これまでは, リンクになっていない部分から選択・コピーして貼り付けた後に削除とかしていたけれど, これでそのような非人間的作業から解放されると思うと, 気持ちが晴れ渡るようだ.

追記: 一部の Linux デスクトップ環境について

一部の Linux デスクトップ環境, 自分が知っている限りだと特に Xfce では, alt + ドラッグでウィンドウを移動, のような操作に割り当てられていることがある.

Xfce では, これは “設定” > “ウィンドウマネージャー (詳細)” > “アクセシビリティ” > “ウィンドウを掴んだり移動したりするために使うキー” で設定できる. ほかの WM についてはあまり知らないので各自やっていってほしい.

Atom で各種フォントサイズを Retina ディスプレイかどうかによって変える

macOS だと基本的には devicePixelRatio は 1 か 2 のはずだけど、なんとなくこんな感じで書いたやつを使ってる:

// Retina でない
@media (max-resolution: 1.5dppx) {
  atom-text-editor {
    font-size: 14px;
  }

  .tree-view {
    font-size: 1.1em;
  }
}

// Retina
@media (min-resolution: 2dppx) {
  atom-text-editor {
    font-size: 12px;
  }
}

試してないけど Windows でも動くと思う。dppx 相当の数値はそのモニタ内で Chrome なんかのコンソールで window.devicePixelRatio などと実行するとかんたんに取得できる。