セトリを見ながら感想を書けるサービスを作りたかった話

この記事はアイドルマスター Advent Calendar 2019の21日目の記事です。思いっきり締め切りをぶっちしました……

それもこれも、シャニマス2ndのチケットをくれないイープラスってやつの陰謀なんです……

pic.twitter.com/Fwb8onkI5W

— 黒曜@デレ7thナゴド両日現地 (@kokuyouwind) December 21, 2019

嘘です、普通に間に合いませんでした。

📝 ライブの感想をピンポイントに共感したい問題

突然ですが、みなさんライブに行くと「この曲の感想を知りたい」みたいな気持ちになりませんか？

例えば、プロデューサー感謝祭で突如特殊イントロから始まった「NEO THEORY FANTASY」とか……

例えば、演出なしでたった一人、センターステージでほたるちゃんが歌い上げた「谷の底で咲く花は」とか……

ライブの中でも、特にその曲についての感想を知りたい！ 語り合いたい！ 「よかった……」「それな……」って共感したい！ ってなると思うんですよ。というかなった。

とはいえ、こういった感想をピンポイントで探すのは結構困難です。

ライブが終わるとTwitterでは「自分のエモ」をみんなが好き好きに語りだしますし、ツイートに曲名をしっかり入れているとは限りません。また時間が立つとTwitterでは探せなくなってしまいます。

一方、いわゆるライブレポ記事は公演ごとになっており、そのなかから特定の曲の感想を探してまわるというのは大変ですし、「わかる、それな！」したいという軽い気持ちがどんどん失われていきます。

🎵 曲ごとに感想をつけるサービス

そもそも、ライブの感想は「頭から順」に思い出すより、セトリを眺めて「この曲はここがよかった」「あ、この曲はエモの塊だった」みたいに順不同で考えることが多い気がしますよね。

ということは、「セトリを見ながら感想を曲ごとにつける」サービスがあれば、公演通したレポートも書きやすいし、曲ごとの感想を横串で見ることもできるのでは？

と思って試しに作ってみたのがshiny-liveというアプリです。

先に謝っておくと、とりあえず作ってみましたが穴が多いのであんまり実用的ではないです。 あと、データを入れるのが大変だったのでシャニマスのライブしか入ってません。

というわけで、今回はこのアプリの話をします。

Rubyパターンマッチを闇の力でアクティブにする

この記事はMisoca+弥生 Advent Calendar 2019の1日目です。

もう12月ですよ、12月！

記事の内容とはなんの関係もありませんが、デレステにM@GICが実装されましたね。

アニメを思い起こさせる最高のMVでした……

💎 Rubyのパターンマッチ

Ruby 2.7で、ついにパターンマッチが導入されますね。

今はRuby 2.7.0-preview3で試すことができます。正式にリリースされるのは、おそらく例年通り12月25日でしょうか。

パターンマッチ機能の使い方をざっくり書くと、case ... in ...のような形でパターンマッチを行える機能です。

case { key: :value}
in { key: x }
  p x # => :value
end

詳しい話はRubyKaigiでの発表スライドのほか、メドピアさんの「Ruby2.7の(実験的)新機能「パターンマッチ」で遊ぶ」がよくまとまっておりわかりやすいです。

🐫 F#のアクティブパターン

ところで、F#ではアクティブパターンという機能を使うことができます。

これは、パターンへの分解を、マッチ対象とは別に定義できるものです。

let (|Even|Odd|) input = if input % 2 = 0 then Even else Odd

let TestNumber input =
   match input with
   | Even -> printfn "%d is even" input
   | Odd  -> printfn "%d is odd" input

TestNumber 11 (* 11 is odd *)
TestNumber 32 (* 32 is even *)

上記のように、マッチ対象となる数値とは独立してEvenとOddというパターンを定義することができます。

さらに、パターンへの分解方法を変えることも可能です。

let (|RGB|) (col : System.Drawing.Color) =
     ( col.R, col.G, col.B )

let (|HSB|) (col : System.Drawing.Color) =
   ( col.GetHue(), col.GetSaturation(), col.GetBrightness() )

let printRGB (col: System.Drawing.Color) =
   match col with
   | RGB(r, g, b) -> printfn " Red: %d Green: %d Blue: %d" r g b

let printHSB (col: System.Drawing.Color) =
   match col with
   | HSB(h, s, b) -> printfn " Hue: %f Saturation: %f Brightness: %f" h s b

上記のように、Color型に対してRGB値で取り出したりHSB値で取り出したりすることができます。

Rubyのパターンマッチでは、パターンへの分解はマッチ対象のdeconstructやdeconstruct_keysを使うため、分解方法を切り替えるにはRefinementを使うのが現実的な落とし所です。

一般的な回答としてはRefinements使ってくださいですかね。その場合RGBかHSVかの使い分けはRefinementsのスコープが最小範囲になりますが。

— k_tsj (@k_tsj) November 19, 2019

deconstructなどをパターン側ではなくマッチ対象側に持たせた理由は、辻本さんがn月刊ラムダノート Vol.1, No.3に書かれていました。設計判断の話や他言語との比較もいろいろ言及されていて興味深かったです。

……が、それでもF#っぽい書き方をしたい！ と思ったのでそれっぽい実装を考えてみよう、というのが今回のテーマです。

ちなみに「闇の力」とタイトルに入っていますが、実装してみたらTracePointとかISeqとかを使わない形に落ち着いたので若干釣りタイトルになっています。

esa.ioからの記事更新でカード画像を設定する

以前の記事で紹介したとおり、このブログはesa.io内の特定カテゴリに書いた記事が、Hugo+Netlifyによって自動で反映されるようになっています。

この際、記事のFrontmatterはesa.ioのGitHub WebHookによって自動で設定されるため、記事ごとの画像を設定することができずサイトアイコンを表示するだけにしていました。

しかしながら今どきTwitterCard画像に非対応というのも寂しいので、少し頑張ってみた結果、以下のように記事ごとの画像をTwitterCardに入れられるようになりました。

先日書いたデレステの記事も、スクショをいい感じに設定できて楽しいです。

ブログをちょっと弄ってSummary Card with Large Imageを使えるようにした。だいぶ見栄えが良くなったので満足。 https://t.co/WSResAOUHM

— 黒曜 (@kokuyouwind) July 14, 2019

ものすごく簡単なアイディアではあるのですが、どうやったのかをまとめておきます。

ポートフォリオサイトをGatsbyJSでリニューアルしました

元号が変わり令和を迎えた昨今、皆様いかがお過ごしでしょうか。

自分は「ゴールデンウィークもう半分過ぎたの？ 早すぎるのでは？？？」という気持ちでいっぱいです。

連休始まってから、まだ3日くらいしか経ってない気がする……

📋 ポートフォリオサイト

ゴールデンウィークに目標としていたことのひとつに「ポートフォリオサイトをリニューアルする」というのがありました。

実はブログの他にポートフォリオサイトも作ってあったんですが、こいつも以前のブログと同じくWordPressで作っていたので、いい加減なんとかしようと思ったわけです。

ブログと比べてコンテンツが少なく移行が簡単そうだったのと、タイルデザインでSPAっぽかったのでGatsbyJSを使って作り直すことにしました。

そんなわけでこんな見た目のサイトになりました。

記事の管理はNetlify CMSからできるようにしています。

こんな感じで記事が一覧できるし、

こんな感じで記事を作ったり手直ししたりできます。便利！

実際に手を動かしたのは昨日と今日の2日間くらいなので、割とさっくり作れたんじゃないかなーと思います。

ブログをHugo+Netlifyに載せ替えました

このブログはConoHa VPS上に載せたWordPressで動かしていたんですが、こまめにバージョン上げるのも大変だし、書くためにダッシュボードにいくのもめんどいし…… ということで、静的サイトジェネレータに載せ替えることにしました。

移行した構成は以下のような感じです。

• WordPressの過去記事をwordpress-to-hugo-exporterで変換して archives 以下に配置
• esa.ioから書いた記事をGitHub Webhookでposts以下に配置
• Hugoでまとめてビルドし、Netlifyから配信

という感じにしました。

これにより、過去記事は同じURLに残したまま、今後はesa.ioの特定カテゴリ以下に記事を作るだけでブログが更新できます。

便利ー。

まぁ例によって色々引っかかったり諦めたこともあるので、そのへんをぼちぼちと書いていきます。

Google Homeからつらいときに挙げる札を挙げる

この記事はMisoca Advent Calendar 2017の10日目です。
昨日の記事は@toyoshiの開発以外の仕事でやってるちょっとした自動化の紹介でした。

今日はもともと時報ボットについて書くつもりだったんですが、急にGoogle Home半額セールが来た結果、いろいろ遊んだのでそっちに変えました。

先に結論から話すと、このツイートが全てです。

Google Homeに「厳しい」って話しかけると、「つらいよねー、わかるー」って言いながらSlackで札を挙げてくれるようになりました。いつ使うんだこれ pic.twitter.com/nazdm0E16x

— 黒曜 (@kokuyouwind) December 9, 2017

tipmonaで投げ銭するボタンを作った

@hyukiさんが@tipmonaで簡単に投げ銭するためのブックマークレットを作っていたので、試しに使って遊んでみました。

「tipmonaで手軽に投げ銭できるブックマークレット」を作りました。モナーコインをtipmona経由で贈りたい相手のツイートを表示した状態でTipmonaTipBookmarkletを起動します。詳細は以下に。https://t.co/uCkgMxIlQd

— 結城浩 (@hyuki) June 10, 2017