ruby / vscode-rdbg を試す

ruby/debug と連携してデバッグを行える VSCode extension が出てるので試す。

marketplace.visualstudio.com github.com

前提

$code -v
1.57.0
b4c1bd0a9b03c749ea011b06c6d2676c8091a70c
x64
$ruby -v
ruby 3.0.1p64 (2021-04-05 revision 0fb782ee38) [x86_64-darwin19]

準備

debug はプレリリース版をインストールしてねと README にあるので従う。

gem install debug --pre

ためしに以下のようなコードを書いてブレークポイントを貼ってみる

class A
  attr_accessor :x
end

def main
  a = A.new
  a.x = 2
  puts a.x
end

main

f:id:uvb_76:20210618092649p:plain

Debug: Start Debugging and Stop on Entry をコマンドパレットから選択する。初回は .vscode/launch.json が生成される。ちなみに生成しなくても Debug command line からファイルを指定してあげるとそのファイルをデバッガ経由で実行してくれる。単一のファイルのみ確認したいとかだったらこれで十分。

{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "rdbg",
      "name": "Debug current file with rdbg",
      "request": "launch",
      "script": "${file}",
      "args": [],
      "askParameters": true
    },
    {
      "type": "rdbg",
      "name": "Attach with rdbg",
      "request": "attach"
    }
  ]
}

実行してブレークポイントで停止するとその時点のコールスタックと変数が見れて便利。

f:id:uvb_76:20210618091933p:plain

VSCode デバッガのステップイン等にもちゃんと対応してるし、ウォッチ式で停止している箇所のbindingでコードの実行結果を色々試せて捗りそう。いつも binding,pry を張って試しているので新鮮な気持ちになれた。GUIなデバッガ使うのVC++触ってた時以来かもしれない。

Tumblrのテキスト記事をVuePressで見れるMarkdownに変換するスクリプトを書いた

普段の日記を付ける場所を去年から 鳥人雑技団なんて地元にはない から ikaruga.org に移したのだけれども、過去の記事も移行したかったのでスクリプトを書いた話。

前提

GitHub - ikaruga777/ikaruga.org 移行先はこれです。

    "@vuepress/plugin-blog": "^1.9.3",
    "vuepress": "^1.7.1",

Tumblrブログのエクスポート

エクスポートはTumblr のブログ設定の一番下にある。 f:id:uvb_76:20210608051824p:plain

ここからダウンロードできるエクスポートファイルは以下のような構造を持っている

conversations.zip # メッセージのやりとり
media # 画像とか
├── 36168689520.jpg
├── 36205627811.gif
├── 37911023684.jpg
├── 190878196430_5.jpg
├── 190878196430_6.jpg
├── 190878196430_7.jpg
├── 190878196430_8.jpg
├── 190878196430_9.jpg
└── 190878196430_10.jpg
posts.zip # テキスト

posts.zip の中身は以下のとおり。

.
├── html
│  ├── 35595084788.html
│  ├── 35595101885.html
....
│  ├── 189976946900.html
│  ├── 190103049430.html
│  ├── 190292172880.html
│  ├── 190618623800.html
│  ├── 190682518265.html
│  ├── 190878196430.html
│  └── 613941876100317184.html
├── posts_index.html
└── style.css

posts_index.html にはhtmlのディレクトリにあるhtmlファイルの一覧がずらっと並んでる。

各記事のhtml構造は以下のようになっている。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="../style.css" />
  </head>
  <body>
    <h1>{{title}}</h1>
    {{body}}
    <div id="footer">
      <span id="timestamp"> March 1st, 2019 2:09am </span>
      <span class="tag">uvb76nikki</span>
    </div>
  </body>
</html>
  • h1 にタイトル
  • 記事のhtml
  • footer にタグと日付

それはそうって感じなのだけれども、TumblrのエディタでMarkdownを使用してようが、出力された後のHTMLがデータとしてエクスポートされるようになっている。

VuePressのfrontmatter付きMarkdown

出力先はVuePressのFrontmatterがついたMarkdown。自分の日記から拝借すると以下のような感じ。

---
title: 2月と3月はじめの近況
date: 2021-03-12 12:01:13+09:00
feed:
  enable: true
layout: post
---
以下本文

変換

というわけでスクリプトを書きなぐった。

gist.github.com

  • h1タグをタイトルとしてなければスキップさせる
  • timestampは雑に Time.parse でいい感じにできた
  • タグ使ってないから無視

解凍後の posts と同じディレクトリに置けば動くはず。nokogiriでbodyの中身切り取ってhtmlのままmdに投げているので1行のhtmlがドカンとmdの本文として吐かれる。汚いけど、HTMLをMarkdownに変換したりフォーマット揃えようとするとSNSの埋め込みタグが大崩壊するので妥協した。今は見れれば良い。

実行すると dist/yyyy/mm/yyyy_mm_dd_title.md の形式で吐かれるので後はよしなに。VuePressのblogプラグインは雑においても認識してくれるので old ディレクトリを切ってそこにまとめた tumblrのコンテンツを移行したいのよね by ikaruga777 · Pull Request #58 · ikaruga777/ikaruga.org · GitHub

dist
├── 2013
│  ├── 06
│  │  ├── Macbook_Air_買った..md
│  │  ├── rvmはsudoつけない.md
...
└── 2020
   ├── 01
   │  ├── 2019_12_28_年末岩手旅行一日目.md
   │  └── 2019_12_29_年末岩手旅行二日目.md
   ├── 02
   │  ├── 2020_02_03_1月近況.md
   │  ├── 2020_02_07_年末岩手旅行三日目.md
   │  └── 2020_02_18_2泊3日で佐渡に行った.md
   └── 03
      └── 2020_3_30 _2月と3月近況.md

こう思ったっす

  • erb意外と手軽
  • SNSの埋め込みタグが厄介
    • 埋め込みタグは一回で読み込み済ませたいVSブログ独自記法が生まれて可搬性を落とす
    • 画像とか本当はリポジトリの中にあるべきだとは思う。
  • これからも何度かこういうことやるなら可搬性は大事そう

これからどうすんの

どうでもいい話

Tumblrの前は無料のレンサバ+Serene Bachでブログ作っておいてたのだけれども、レンサバの障害でデータ全部飛んだらしくインターネットから消え失せた。バックアップも取ってなかったので手元には残っていない。Internet Airchiveにはかろうじて残ってたので最古の記事を見に行ったら2005年の夏の記事が出てきた。2013年くらいまで書いてたっぽい。Tumblrの記事も2013年からあるので、合致してる。ここらへんの記録も全部拾い上げて爪痕にもならない程度の記録にしたい。

Chromeのアドレスバーでの検索の挙動が変わった

Google Chrome 88.0.4324.182 で確認した。

ChromeでRuby関連の検索を楽にする - Re: 醤油の一升瓶じゃあ戦えない のように Chrome検索エンジンを設定することによってアドレスバーから任意の検索クエリを叩くことができる。このアドレスバーを使用したカスタムサーチの仕様が変わっていた。

今までなら {キーワード}{space} でアドレスバーからカスタムサーチに移行できていたのができなくなっていた。スペースの代わりに tab を押すことでカスタムサーチに移行するように挙動が変わったようだった。もとに戻す方法がないか調べていたら以下のページに行き着いた。

www.androidpolice.com

上記ページにあるとおり、 chrome://flags/#omnibox-suggestion-button-rowchrome://flags/#omnibox-keyword-search-button を disabled にすることで今まで通りの挙動に戻すことができた。とはいえ、 github actions とかで調べようとすると勝手に github.com のサーチになるのはうっとおしかったから新しい仕様になれていこうかな〜と思ったり。

VSCode 1.53.0 便利情報

code.visualstudio.com

読んでて便利そうだったのでメモ。

Search: Mode Controls where new Search: Find in Files and Find in Folder operations occur: either in the sidebar's search view, or in a search editor

VSCode 1.53.0 で search.mode という設定が増えている。この設定を変えると、フォルダ内検索実行時にサイドバーやパネルでなく、検索エディターで検索できるようになった。検索エディターでの検索だと、場所を広く取れたり、コードの周りの行も表示できて結構便利。

設定値として選択できるのは以下のとおり

  • view
    • 今まで通りパネルやサイドバーでの検索
  • reuseEditor
    • 検索用のタブが一つ開く。このタブは使い回される。
  • newEditor
    • 検索用のタブが毎度新規に開かれる。

Transform to Snake Case

コマンドが増えている 。読んだ通り選択したcamelCaseな文字列をsnake_caseにしてくれるくん。OpenAPIの定義からRubyに落とし込むときとかクラス名をファイル名に落とし込むときとかに使えそうかな。逆はまだないみたい。

Apdex の復習

仕事で運用しているアプリケーションの監視に New Relic を使っている。 以前監視NRQLとか書いたりしてたけどそこそこ抜けてしまっているのと、真面目にApdexに対して向き合うときがきたので自分のためにまとめる。

Apdex てなに

Apdex:ユーザー満足度の測定 | New Relicのドキュメント ドキュメントがあるのでこれを見ると良い。

Application Performance Index の略で、レスポンスに対する満足度を示す割合のこと。New Relic 独自の用語ではなく、 The Apdex Users Group という団体があってそこが大本。

あらかじめ許容できるレスポンスタイムの閾値Tを設定しておいて以下の3つにレスポンスタイムの評価を分類する

  • 満足
    • レスポンスタイム >= T
  • 許容
    • T < レスポンスタイム <= 4T
  • 不満
    • 4T < レスポンスタイム

そしてある期間の間にやってきたリクエストに対して以下の式を適用してある期間に対するApdexを設定する

Apdex = (満足の件数 + 許容の件数/2) / リクエスト総数

すべて満足なら最高の1, すべて不満なら0となる。

どのようにして値を決めるとよいか

しきい値TについてはApdex T: How to Set the Right Value New Relic が出しているブログの「What should I set T to?」にそのまま書いてあるので参考にすると良さそう。最初は24時間のリクエストのdurationの90%タイルをNRQLで取ると良いと書かれている。また、実際の監視では特定の期間内のApdexがnを下回ったらアラートを上げるといった使い方をする。特定の期間(n分)についてはサービスのリクエスト数によって調整する必要はある。リクエスト数が少ないと、不満と判断されたリクエストを外れ値としてうまく弾くことができない。


なんとなく眺めていた値だったので、式を理解できたこと、Apdex が New Relic 独自の値ではないことを知ったのが学びであった。

参考

iLoud micro monitor を買った + 2020年買ってよかったもの

みんなやってるので。だいたい机周り。

iLoud micro monitor

iLoud Micro Monitor - IK Multimedia | Hookup, Inc.

PC用のスピーカー。実は買ってた。まだ書いてなかったのでついでに色々書いちゃう。 PCで使うスピーカーとして、 Bose の Companion 2 Series III を使っていたのだけれども、もうちょっといいものに変えて良さそう〜というのを考えていた。

変える前の構成

[PC(Mac,Windows)] ----- [USBDAC(GameDac)] -TRS- [BOSE Companion 2 Series III]
[Raspi(Volumio)] ------- [DAC] ┘

Volumio は Raspberry Pi 4 + DAC + Volumio で音楽を聴けるようになるまで - Re: 醤油の一升瓶じゃあ戦えない で組んだやつ。PCがWin,Mac両方あるのはKVMがついているディスプレイにUSBDACをつないでどちらからも使えるようにしているから。

課題

  • もうちょっと音いいものにしたいー
  • USBDACがPCの電源依存なのでraspiから音出すためにPC起動していないといけないのが面倒ー

考えた案

  • 2入力持ってるスピーカーかシンプルなアンプを使う
  • ミキサー買っちゃう

相談

社のSlackに #kaden というチャンネルがあって、スピーカーも広義の家電でしょう〜という気持ちで相談してみたら、社のCDOである @kotarok さんに iLoud micro monitor を激アツ丁寧な文章とともにおすすめしてもらえた。その節はありがとうございました。

今の構成

f:id:uvb_76:20201231122920j:plain

[PC(Mac,Windows)] ----- [USBDAC(GameDac)] -TRS- [iLoud micro monitor]
[Raspi(Volumio)] ------- [DAC] ---------------------RCA-┘         │
[iPad Air]---------------------------------------------Bluetooth--┘

こうなった。んだけど、あろうことか Volumio が起動しなくなったので今はお休み中…

かんそう

素人でも明らかに低音の響きが良くなったのがわかった。もこもこせずにズバっと飛んでくる感じ。そして、全入力入れても排他にならずに全部Mixされて鳴ってくれる。自分の理想的な環境ができたので満足満足。


以下買ってよかったのものを並べるコーナー。

MiniMetro TOKYO Custom

www.instagram.com

www.instagram.com

CHROME MINI METRO を カスタムオーダー | ikaruga.org 詳しくはこちら。 他人とぜっっったい被らないものというものはいいものです。Mini BURUN と比べて底が広くなったので、カメラのインナーケースも入れやすくなって最高。

リープチェア

いい椅子はいい。ヘッドレストをつけると、ハンガーつけなくてもサコッシュとか掛けることができて便利(最悪)。リープに特筆したこと書くと、可動域が異様に広い実用的なアームレストが付いてるのはかなり良い。

ViewSonic VP2785-4K

VP2785-4Kを買った + 在宅状況近況 - Re: 醤油の一升瓶じゃあ戦えない

快適〜。仕事Mac, 趣味Winの状況でKVMがめちゃくちゃハマってくれている。

Blue Snowball Ice

4月近況 | ikaruga.org に書いた。かわいい。

Krisp

Krisp | ノイズキャンセリングアプリケーション | Beyond テレワーク | Web会議・テレビ会議(TV会議)ブイキューブ

買ったというか契約だけど、ノイズキャンセルのアプリケーションを使っている。Snowballがめちゃくちゃ音拾うのだけれども、こいつのおかげで声以外をバッサリ落としてくれて助かってる。これについては自分で評価できないので、自分と喋ってる他の人達がどう感じているかだけど…

iPad Air

あると便利でしょ、って雑な理由で買ったけど、最近増えたライブ配信を食卓でさっと観たり、オンライン飲みのチャットアプリケーションのリソースをiPadに回せるのがかなり良い。最近PDFをたくさん受領してあれこれ〜ということが増えて、それに書き込んだり横になって眺めたりというのができるのも良い。あとこれ買ったのでグルミクを真面目にやれてるところはある。

HD60 S

HD60 S | elgato.com

キャプチャーカード。4K録画なんて使わんしょ。という気持ちで捨てた結果がこちら。Switchの画面とかDiscordに流したり。ラズパイの画面とかディスプレイに移すまでもないけど画面みたい〜とか言うときに使える。配信周りの需要は確実にあるはずなので、来年以降は軽く嗜んで行こうかというところ。

D4DJ GroovyMix のリザルトを Scrapbox のページにまとめやすくする iOS ショートカットを作った

この記事は GMOペパボエンジニア Advent Calendar 2020 - Adventar 21日目の記事です。 昨日20日目は Tatsumi0000 くんの App Store Connect APIからアプリのダウンロード数を取得する時にハマったポイントとその解決法 でした。


動機

D4DJ Groovy Mixとかいうスマホ音ゲーをちょっと真面目に触ってる。スコアモチベを上げるためにグルミク1日1PFCアドベントカレンダー を作りたくなった。Twitter以外のストックできる場所にまとめたいと考え、Scrapbox を採用したが、都度都度iOSでページを作るのが面倒だった。

作ったもの

グルミクスコアをスクラップ

D4DJ GroovyMix のエキスパートスコアのクリアリザルトに対して

  • スコアキャプチャを保存する
  • リザルトテキストを本文、曲名をタイトルにしてScrapboxのページを作成する
    • 追加するScrapboxのアカウントは簡単に設定できる

という要件を満たすiOSのショートカットを作った。

ScrapboxのページにしたいEXPERTのリザルトが出たときにショートカットを実行すると、曲名をタイトルにしたページを作ってくれる。画像アップロードまでは自動でできないので、そこは手動で。iOSで上記リンクに飛ぶことで実際に端末のショートカットとして使用することができる。

手法

Scrapboxにページを追加する

ページを作る - Scrapbox ヘルプ にあるように、ページタイトルとURLエンコードされた本文があれば、ページを作ることができる。

iOSショートカット

コンテンツの中身を確認する

ショートカットの入力を「コンテンツグラフを表示」にわたすと、入力内容の詳細を確認できる。例えばグルミクのリザルトをショートカットの入力にしてコンテンツグラフを表示にわたすと、 [イメージ, テキスト, テキスト] という複数のコンテンツタイプのリストになってる事がわかる。最後のテキストは空っぽなので、よくわからないけど。

なにか決まった入力に対してショートカットを作りたいと考えたのならば、まずは入力を解析するのにコンテンツグラフを表示させると良さそうと思った。

f:id:uvb_76:20201221065030j:plain
スコアリザルトの入力リスト

コンテンツグラフ

「ショートカット」のコンテンツ・グラフ・エンジン - Apple サポート

「ショートカット」の能力の多くは、コンテンツ・グラフ・エンジンによるものであり、iOSおよびiPadOSの機能やAppからショートカットアクションへのデータをその場でインテリジェントに変換します。アクションがある種類のコンテンツを想定しているのに別の種類のコンテンツが渡された場合、コンテンツグラフがそのコンテンツを適切な種類へ自動的に変換します。

この仕組のおかげで、ある程度のコンテンツの種類の違いを許容して色々と変換してくれる。たとえばテキストに対して「写真に保存」をすると、テキストを画像に変換して保存する。逆に画像をテキストとして表示すると [イメージ] というテキストになって表示される。ショートカットの入力を確認するには「コンテンツグラフの表示」を使う。ショートカットの入力に対して変換できるコンテンツの種類をグラフにして表示してれる。

f:id:uvb_76:20201221064141j:plain
イメージのコンテンツグラフ

リストから項目を取得

ショートカットの入力はリストの形で入ってくる。「スクリプティング/リストから項目を取得」で、イメージ、テキストそれぞれ個別に指定して処理を行うことができる。

f:id:uvb_76:20201221064132j:plain
リストからイメージを取得するところ

本文のURLエンコード

Scrapboxでページを作る際、本文はURLエンコードされている必要がある。これも「スクリプティング/ URLエンコード」で実現できる。エンコードの他にもオプションでデコードもできるので有能。

f:id:uvb_76:20201221064128j:plain
ページの本文を作るところ

曲名を抽出してURLを組み立てる

スコアリザルトから正規表現で抽出する。 [EXPERT]{曲名}をクリア のようなフォーマットのテキストを拾ってグループをタイトルにすると良い。これは「一致するテキスト」と「一致したテキストからグループを取得」で実現できる。

HTTPリクエス

curlも使えるけど、ブラウザでひらいて画像アップロードしたかったのでそうした。

曲名抽出からHTTPリクエストまでをつなげると以下の処理になった。

f:id:uvb_76:20201221064123j:plain
ページタイトルを作ってリクエストするまで

Scrapboxアカウントの設定

ショートカットはiCloudへエクスポートできる。エクスポートされたショートカットのURLにアクセスすると誰でもショートカットを使うことができる。

アカウント名の設定などショートカットを使用する前に設定しないといけない項目があるときは「ショートカット詳細」の「質問を読み込む」を使うことで、URLからショートカットを追加する際にウィザート形式で値を設定することができる。今回はページを追加するScrapboxのアカウントを設定できるようにした。

f:id:uvb_76:20201221064137j:plain
ショートカット時にユーザーに対して尋ねる質問

学び

  • 意外とショートカットでできることは多いことに気がついた
  • iCloudiOSショートカットをエクスポートできること
  • 複数のコンテンツが含まれる入力をショートカットで個別に処理する方法

これから

  • アドベントカレンダーのネタはもう揃ったので、これを直すモチベはあまりない…
  • 自分用にエキスパ限定にしてたけど、難易度不問にして良さそうとは思う
  • 本文と画像をrequest body にしてAPIリクエストすると、なにか記録をストックしてくれるAPI側を作ってそこに溜め込めるようにしてみる
  • リザルト画像のOCRかけたくなったので、Cloud Vision API とか使ってテキストに落とし込めないか考える

とかぱっと出てきたので気が向いたらやろうと思う。


明日はひかりさんの レビューを分析してみる2020 - 補習ほぼ確 です。