私と私の猫の他は誰でも隠し事を持っている

野良プログラマ発、日々のアウトプット

うたほんくん、シーズン2突入しました

かれこれ20年くらい運営しているちょっとしたサービスをリニューアルしました。

utahon.mariyudu.net

「うたほんくん」という、ウクレレコードフォーム付きの歌詞カードを生成するサービスなんですが、リニューアル後はこんな感じです↓。

f:id:mariyudu:20220312135900p:plain
歌詞を書いてコードを埋め込みプレビューしてみると…
f:id:mariyudu:20220312135941p:plain
コードフォーム付き歌詞カードのできあがり♫

従来版は全面的にサーバサイドで動作するウェブアプリケーションでしたが、これを SPA 志向なアーキテクチャに変更して Node.js で全部書き直しました。技術的なトピックは以下のとおりです。

  • 一式を Nuxt.js(2.15)上で Static 生成。
  • U/I は Vuetify(2.6)を採用。
  • コードフォーム画像は SVG で提供(従来は ImageMagick でビットマップ生成)。
  • サービスタイトルのフォントはヤマナカデザインワークス様のバナナスリップを利用。
  • コードフォーム画像中の音楽記号には、stixfonts の STIXTwoMath-Regular.woff2 を利用。

20年前のリリース当初は Perl CGIXBM 画像を生成するという古式ゆかしい構造だったのが CGIRuby で書き直し、さらに PHP + ImageMagick に… とそれなりに変遷してきたサービスですが、今回はアーキテクチャごと見直したこともあり「シーズン2」としましたw

ここ10年くらいは放置状態で忘れ去られた感がありましたが、復活の手応えがあるようならギター版や移調機能等、付け加えてみたいアイディアはあるので、ご愛顧よろしくねっ。