かれこれ20年くらい運営しているちょっとしたサービスをリニューアルしました。
「うたほんくん」という、ウクレレコードフォーム付きの歌詞カードを生成するサービスなんですが、リニューアル後はこんな感じです↓。
従来版は全面的にサーバサイドで動作するウェブアプリケーションでしたが、これを SPA 志向なアーキテクチャに変更して Node.js で全部書き直しました。技術的なトピックは以下のとおりです。
- 一式を Nuxt.js(2.15)上で Static 生成。
- U/I は Vuetify(2.6)を採用。
- コードフォーム画像は SVG で提供(従来は ImageMagick でビットマップ生成)。
- サービスタイトルのフォントはヤマナカデザインワークス様のバナナスリップを利用。
- コードフォーム画像中の音楽記号には、stixfonts の STIXTwoMath-Regular.woff2 を利用。
20年前のリリース当初は Perl CGI で XBM 画像を生成するという古式ゆかしい構造だったのが CGI を Ruby で書き直し、さらに PHP + ImageMagick に… とそれなりに変遷してきたサービスですが、今回はアーキテクチャごと見直したこともあり「シーズン2」としましたw
ここ10年くらいは放置状態で忘れ去られた感がありましたが、復活の手応えがあるようならギター版や移調機能等、付け加えてみたいアイディアはあるので、ご愛顧よろしくねっ。
