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 - 補習ほぼ確 です。

VS Codeでパネルの最大化をするショートカット

前提

macOS

$ code -v
1.51.0

VS Codeのターミナルを表示するまではいいんだけど、エディタのことは忘れて広い画面でターミナルを操作したい、というときのショートカット。

workbench.action.toggleMaximizedPanel がそれ。既存だとバインドされていないので別途設定が必要。

自分は統合ターミナルの表示を Ctrl Shift @ に割り当てているので、隣の Ctrl Shift [ に割り当ててみた。ドラッグして大きさを調整せずに済むのでそこそこ楽。

Swarmのチェックインをふりかえりやすくするためにやってること

ikaruga.org鳥人雑技団なんて地元にはない に月1で日常の出来事を書いてるんだけど、意外とこれに依存しているという気付きが合ったので記録する。大したことではなく、IFTTTのアプレットで楽しているという話。

チェックインをカレンダーに記録する

4sq check-ins (now Swarm) to Google Calendar - IFTTT を使っている。どこにいた、という記録がカレンダーの予定と一致するので便利。

チェックインをスプレッドシートに記録する

If Any new check-in on Foursquare, then Add row to Google Drive spreadsheet - IFTTT を使っている。今年Swarmのチェックインで何回「はい」といったか雑なスクレイピングで数えて2019年をふりかえる。 - Re: 醤油の一升瓶じゃあ戦えない で去年集計したのを楽にしたい思いがあったので。チェックインしたときにすでにスプレッドシートに記録されていればいい話。

近況を書くときは前月のカレンダーを見て予定とチェックインを確認する、休みのtwilogをみる、出来事を見出しにして適当に書き連ねる、といった感じで書いている。そうやってできた今月の近況はこちらです。

ikaruga.org

1stシーズンと2ndシーズンのリザルト

1stシーズンのリザルト、という下書きが残ってた。多分ペパボで1年仕事してたことについてのふりかえりを書こうとしてたのだろう。実は既にに2ndシーズンも過ぎていたので、やったこととかギャッと並べてみる。

1st

やった

  • フィヨルドブートキャンプでRailsの修行した
  • 情報安全確保支援士の登録した
  • builderscon 2018 tokyoに参加した
  • RubyKaigi 2019に参加した
  • Rails Developpers Meetup 2019 に参加した
  • 仕事では決済のAPIを使ってあれこれしたり、一括処理について思いを馳せていた
  • 社のイベントやブログの写真を撮るなどしてた

  • キーボード2台作った

  • キーボード作ってわかったことを未来大で話した
  • M5Stack触って作ったもの解説を書いたら同人誌になった

わかった

  • モデリングは異様にむずかしい
  • すべてを理解する必要はない
  • ふりかえり続けるとつかれるので、ある程度は捨てて前を向くほうがよい

2nd

やった

  • 税率に思いを馳せていたり、1からなにか作るということをしていた
    • 平成Ruby会議で税率について少し話した
    • Rails+Vue+TypeScriptのモノレポリポジトリの扱い方
    • 1から環境を作る、ということはしていないけどそれに乗っかってAPI、フロントエンドを書いたり
  • 社のイベントやブログの写真を撮るなどしてた
  • 仕事がフルリモートになった
  • 新卒の研修をみてすげーじゃん!とか言ったりした
  • 面倒見ているサービスの運用
    • herokuで動いているサービスの面倒見たり

わかった

  • TypeScriptは書くこと増えるけど、自分の間違いには気づきやすくなるので楽…
  • OpenAPIGeneratorでTypeScriptのAPIクライアントが生成できるのがかなり便利
  • 価格は外税で保存すると税率変更対応時に楽
  • 仕様を決めるのは大変
  • minikubeを使ったk8sの環境の作り方
  • Rackのアプリケーション構造
  • Zeitwerkでファイル読み込み方法がどう変わったか
  • リモート楽だけど、たまには出社して他職種のひとと話したくなる
    • 偶発的な会話を求めているのかもしれない
  • 人を撮るに当たり、光とレタッチを学びたくなった
  • 運動しないと体重が落ちる
  • まだ必殺する力が足りていない
    • 一時的な修正でなく、機能として落とし込む力

つぎやること

  • TypeScriptを身につくくらいには書きたい
    • テストをさっと書けるようになるといいなあ
  • ハードは一旦やらない
  • GCPAWSかどっちかで盆栽を作る

やったことわかったこと並べれば少なくとも何か学んではいる、ということなのでポジティブにいこう。

Request Idについて調べた

Request id について

herokuで動いているRailsアプリケーションのログを眺めていたときに出てくる、uuidって何?となったのでメモる。わからないところがわかったら、あとで加筆する。

つまり

  • RailsアプリケーションにはX-Request-Id というHTTPヘッダーを見てログに出す仕組みがある。
  • herokuのWebサーバーが X-Request-Id を付与してRailsアプリケーションにリクエストを流している
  • X-Request-Id の仕組みはherokuに限らず、Webサーバー全体で使われてそう。
sequenceDiagram
    participant ブラウザ
    participant heroku/router
    participant app/web(Rails)
    
    ブラウザ->>heroku/router: APIリクエスト
    heroku/router->>heroku/router: X-Request-IDヘッダーをログ出力
    heroku/router->>app/web(Rails): X-Request-IDヘッダーを付加してリクエスト
    activate app/web(Rails)
    app/web(Rails)->>app/web(Rails): 処理
    app/web(Rails)->>app/web(Rails): X-Request-IDの内容を含めてアプリケーショのログ出力
    deactivate app/web(Rails)
    app/web(Rails)->>heroku/router: レスポンスを返す
    heroku/router->>ブラウザ: レスポンスを返す

Railsのロギング

先にRailsアプリケーションがどうやってログ出しているの?というところから。

Railsアプリケーションでログ出力の設定としてRails::Application::Configuration クラスの log_tags プロパティが存在する。 Rails アプリケーションを設定する - Railsガイドには以下の記述がある。

config.log_tags: 次のリストを引数に取ります(requestオブジェクトが応答するメソッド、requestオブジェクトを受け取るProc、またはto_sに応答できるオブジェクト)。これは、ログの行にデバッグ情報をタグ付けする場合に便利です。たとえばサブドメインやリクエストidを指定することができ、これらはマルチユーザーのproductionアプリケーションをデバッグするのに便利です。

色々付加してログに出せるっぽいですね。

Rails 6.0.3.2でrails new した時点で、config/environments/production.rb にはconfig.log_tags = [ :request_id ]が設定されている。この :request_idrequestオブジェクトが応答するメソッド に合致する。この先はRackかと思ったのだけども迷子になってしまったのでまた別の機会の追う。

production.rb にある設定を config/environments/development.rb で同じように設定したうえでリクエストをすると、以下のような結果になる。

X-Request-Id ヘッダーなし

$ curl -I http://localhost:3000
HTTP/1.1 200 OK
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
X-Download-Options: noopen
X-Permitted-Cross-Domain-Policies: none
Referrer-Policy: strict-origin-when-cross-origin
Content-Type: text/html; charset=utf-8
ETag: W/"6e6be3ab17e553298ac68f8a42a50540"
Cache-Control: max-age=0, private, must-revalidate
Content-Security-Policy: script-src 'unsafe-inline'; style-src 'unsafe-inline'
X-Request-Id: d662620f-f16e-4b0f-b0df-34a45247f195
X-Runtime: 0.005475
# $ curl -I http://localhost:3000 の結果
[d6e516d6-8a13-4bb4-be3a-c0a0636b4b0e] Started GET "/" for ::1 at 2020-07-24 19:41:13 +0900
[d6e516d6-8a13-4bb4-be3a-c0a0636b4b0e]    (1.6ms)  SELECT sqlite_version(*)
[d6e516d6-8a13-4bb4-be3a-c0a0636b4b0e] Processing by Rails::WelcomeController#index as HTML
[d6e516d6-8a13-4bb4-be3a-c0a0636b4b0e]   Rendering /Users/ikaruga/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/railties-6.0.3.2/lib/rails/templates/rails/welcome/index.html.erb
[d6e516d6-8a13-4bb4-be3a-c0a0636b4b0e]   Rendered /Users/ikaruga/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/railties-6.0.3.2/lib/rails/templates/rails/welcome/index.html.erb (Duration: 10.1ms | Allocations: 295)
[d6e516d6-8a13-4bb4-be3a-c0a0636b4b0e] Completed 200 OK in 22ms (Views: 15.4ms | ActiveRecord: 0.0ms | Allocations: 1643)

X-Request-Id ヘッダーあり

$ curl -I -H "X-Request-Id: 1" http://localhost:3000
HTTP/1.1 200 OK
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
X-Download-Options: noopen
X-Permitted-Cross-Domain-Policies: none
Referrer-Policy: strict-origin-when-cross-origin
Content-Type: text/html; charset=utf-8
ETag: W/"6e6be3ab17e553298ac68f8a42a50540"
Cache-Control: max-age=0, private, must-revalidate
Content-Security-Policy: script-src 'unsafe-inline'; style-src 'unsafe-inline'
X-Request-Id: 1
X-Runtime: 0.018485
[1] Started HEAD "/" for ::1 at 2020-07-24 19:52:49 +0900
[1] Processing by Rails::WelcomeController#index as */*
[1]   Rendering /Users/ikaruga/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/railties-6.0.3.2/lib/rails/templates/rails/welcome/index.html.erb
[1]   Rendered /Users/ikaruga/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/railties-6.0.3.2/lib/rails/templates/rails/welcome/index.html.erb (Duration: 3.3ms | Allocations: 8)
[1] Completed 200 OK in 12ms (Views: 5.6ms | ActiveRecord: 0.0ms | Allocations: 303)

レスポンスヘッダーに付加して返すのはActionDispatch::RequestIdのしごとかな。 rails/request_id.rb at v6.0.3.2 · rails/rails

herokuのRequest id

では、herokuではどうしているかというと、 HTTP Request IDs | Heroku Dev Center に大体の事が書いてあるのでそれを読む。

リクエストを受けると、herokuのrouterがリクエストID(UUID)を自動生成し、X-Request-Id ヘッダーに付加してアプリケーションに流すっぽい。外から X-Request-Id を受けるときは、20~200文字の/[a-zA-Z0-9+=/-]/ が使えるみたい。これを満たさないヘッダーが来たときは、herokuがRequest idを自動生成して、アプリケーションに流すと。

各Webサーバーの Request Id の対応

Nginxは1.11.0から $request_id 変数が実装されて、HTTPリクエストが来るごとに16進16桁の文字列を生成するみたい。 これをnginx.conf X-Request-Id ヘッダーに付与してアプリケーションにリクエストを流すと良さそう。 Application Performance Management with NGINX Variables

Apacheにも mod_unique_id というモジュールがあって、 UNIQUE_ID 環境変数を取得することでリクエストごとのユニークなIDを取れそう。 mod_unique_id - Apache HTTP サーバ バージョン 2.4

UNIQUE_ID 環境変数は 112 ビット (32 ビット IP アドレス、32 ビット pid, 32 ビットタイムスタンプ、16 ビットカウンタの四つの組) をアルファベット [A-Za-z0-9@-] を用いて MIMEbase64 符号化と同様の方法により符号化し、19 の文字を生成することにより作成されます。MIMEbase64 のアルファベットは実際は [A-Za-z0-9+/] ですが、 + と / とは URL では特別な符号化が必要なので、あまり望ましくありません。 全ての値はネットワークバイトオーダで符号化されますので、 符号は違ったバイトオーダのアーキテクチャ間で比較可能です。 実際の符号化の順番は: タイムスタンプ、IP アドレス、pid, カウンタです。この順には目的がありますが、 アプリケーションは符号を解析するべきではないことを強調しておきます。 アプリケーションは符号化された UNIQUE_ID 全体を透過的なトークンとして扱うべきです。 UNIQUE_ID は他の UNIQUE_ID との等価性を調べるためだけにのみ使用できます。


Reqeust Idがうまく渡せると、色々なアプリケーションを経由するリクエストで横断的にログを見ることができてよいですね。

tigで1行だけStage / Unstage する

help には全部書いてある。 stage viewで 1 を押すんだ。

いつもgitのコミットや差分確認にtigを使っているんだけど、この行だけStageに上げたいなーとかその逆をやりたいというときが出てくる。VSCodeのGit管理ではDiffを見ながら右クリックメニューから「選択した範囲をステージ」みたいなことができるので、tigでもできるでしょう。と探したら見つけた。デフォルトのキーバインディングで設定されているはず。

[-] stage bindings
View-specific actions
                           u status-update       Stage/unstage chunk or file changes
                           ! status-revert       Revert chunk or file changes
                           1 stage-update-line   Stage/unstage single line
                           \ stage-split-chunk   Split current diff chunk

stage-update-line というのがそれ。 これで stage-split-chunk で切り分けられなかった差分も拾ってStageにあげれて便利〜。