わたねこコーリング

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

うたほんくん、シーズン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年くらいは放置状態で忘れ去られた感がありましたが、復活の手応えがあるようならギター版や移調機能等、付け加えてみたいアイディアはあるので、ご愛顧よろしくねっ。

2021年下半期 プライムビデオで観た音楽系コンテンツ

上半期に続き、無事シリーズ化できそうで何よりですw 相変わらずネタバレ御免な内容なので、ご注意を。

オーケストラの少女(字幕版)

1937年作。失業中のトロンボーン奏者の娘が、父とその仲間達を救う為、オーケストラ結成のスポンサー探しを、ひいては有名指揮者に初舞台の指揮を頼み込んで成功させるまでの音楽喜劇。フィラデルフィア管弦楽団とその指揮者レオポルド・ストコフスキーが実名で登場してます。

I Am The Blues アイ・アム・ザ・ブルース(字幕版)

ミシシッピルイジアナで、今でもジュークジョイントでライブサーキットしている老ブルースミュージシャン達のドキュメンタリー。予め知っていた名前はバーバラ・リン等の数人だけだったので、それ程興奮しながら観たという感じじゃなかったけど、伝説的なミュージシャン達が生存している間にこういう記録がなされて多くの人が楽しんでいるってのは善き哉。

プラハモーツァルト 誘惑のマスカレード(字幕版)

モーツァルトプラハに滞在して「ドン・ジョヴァンニ」を書いたという史実をベースにした、制作秘話的フィクション。イケメンなモーツァルトがヒーローよろしく難事件をバババンと解決! 的な爽快エンタメかと思ったら、優男なだけで全く無力だし切れ者そうに見えた悪役男爵は只のスケベオヤジだしと、何とも盛り上がらないままエンディングという印象。

クラーク・シスターズ -First Ladies Of Gospel-

1970〜80年代に活躍した5姉妹ゴスペルグループの伝記映画。星一徹みあるスパルタ母ちゃんと娘たちの確執、グラミー賞獲得による教会と衝突、デニスとトウィンキーの相次ぐ脱退、晩年の再結成等が描かれます。芸能界を生き抜くって本当に大変…

トミー HDリマスター版 (字幕版)

ロックが未だ拡張期だった時代ならではの八方破れな意欲が眩しいでつ。一度くらいは観てると思ってたんだけど、こんな映画だったっけ? という妙な新鮮さがw 筋を深読みするよりは、全員が元気だったフーのメンバーが観られることが嬉しい。エルトン、ティナ・ターナー、クラプトンとゲストも豪華だったんだなぁ。

かげきしょうじょ!! [全13話]

天然系のギフテッド少女が宝塚ライクな歌劇団の養成学校に入学して成長していく群像青春劇。イマドキな軽妙さと小気味良いテンポ感で安心して観られる反面、記憶には残らないかなぁと言ったら意地悪でしょうか。

フレディ・マーキュリー:キング・オブ・クイーン(字幕版)

今まで観てきたフレディドキュメンタリーとさほど変わらない印象。この制作元、同じ取材ソースを元に複数コンテンツを便乗乱造してるのでは、と思いたくなる焦点感の薄さでした。

ブルーノート・レコード ジャズを超えて(字幕版)

ブルーノート・レコードの復興から現在に至るドキュメンタリー。黄金時代がどれだけ凄かったかとイキるのではなく、ヒップホップを取り込み、ノラ・ジョーンズで新市場を開拓してと、変貌して行くように見えてもファウンダー(アルフレッド・ライオンとフランシス・ウルフ)の精神性がそのまま現在でも生きているってのが主旨でしょうか。好感が持てる構成でした。

じっくりと映画を観る精神的な余裕がなかなか無くて、TV アニメばかり観てた一年だったような気がするけど、振り返ってみると音楽モノはそれなりに観てますな。そんな訳で、今年もよろしくお願いします。

Step Functions を PHP プログラムから実行する

最近、AWS Step Functions を使ってみたのですが、これが中々面白い。ステートマシンというワークフローを定義して、予め作っておいた Lambda 関数群を順に実行して出力値を次の関数に渡したり、分岐・ループ、並列実行等もできちゃう。Lambda 関数を Unix コマンドになぞらえると Step Functions はシェルスクリプトですな。単純な機能の Lambda 関数を組み合わせて複雑な処理が可能になるので、バッチ処理的なユースケースでサーバレス化が捗りそうです。

そんな便利な Step Functions ですが、ステートマシンの作り方等は他に解説がいくらでもあるので、今回は作ったステートマシンを PHP プロうグラムから実行する話。単純な要件だけど、コードサンプルが意外に見つからなかったもので。

以下、ステートマシンを非同期に実行開始して、1秒毎に状態取得・出力するという例です。AWS SDK for PHP 3 が必要なので、下記スクリプトのある場所で composer require aws/aws-sdk-php してある前提です。

<?php
require_once('./vendor/autoload.php');

define('AWS_ACCESS_KEY', <あなたのアクセスキー>);
define('AWS_SECRET_ACCESS_KEY', <あなたのシークレットアクセスキー>);
define('AWS_REGION', <リージョン>);
define('STATEMACHINE_ARN', <あなたのステートマシンのARN>);

// Step Functions クライアント生成
$credentials = new Aws\Credentials\Credentials(AWS_ACCESS_KEY, AWS_SECRET_ACCESS_KEY);
$sfn = new Aws\Sfn\SfnClient([
	'region' => AWS_REGION,
	'version'  => 'latest',
	'credentials' => $credentials
]);

// ステートマシンの実行を開始
$input = [
	"var1" => "a",
	"var2" => "b",
	"var3" => "c",
];
$result = $sfn->startExecution([
	'stateMachineArn' => STATEMACHINE_ARN,
	'input' => json_encode($input)
]);
$executionArn = $result['executionArn'];

// 実行状態を監視しつつ終了まで待つ
for ($events=[],$expire=time() + 60; time() < $expire;) {
	sleep(1);
	// 実行状態を取得
	$result = $sfn->describeExecution([
		'executionArn' => $executionArn
	]);
	$status = $result['status'];
	// イベント履歴を取得
	$result = $sfn->getExecutionHistory([
		'executionArn' => $executionArn
	]);
	// 発生したイベントを表示
	$newEvents = array_slice($result['events'], count($events));
	foreach ($newEvents as $newEvent) {
		printf("[%d] %s\n", $newEvent['id'], $newEvent['type']);
	}
	$events = $result['events'];
	if ($status != 'RUNNING') {
		break;
	}
}

Lambda 関数の内部でもプログレスを DynamoDB 等に出力するようにすれば、より詳しい監視が可能になるかも。逆にそこまで詳しく状態把握する必要がなければ、startExecution() を startSyncExecution() にすると簡単に同期処理できます。

【Vuetify】ドロップダウンリストで「その他」選択時に任意テキストを入力

Vuetify 小ネタ。表題の件を v-select で実現できんかなー、とサーチしていて見つけたのがこれ↓。

stackoverflow.com

ほぼドンピシャなソリューションだったのですが、任意入力 + Enter で初期表示状態に戻る U/I が少し不満だったので fork してアレンジしてみました↓。


See the Pen
Stackoverflow: 61211428
by まりゆどぅ (@Mariyudu)
on CodePen.

v-text-field で任意入力した後でも表示はそのままで、append-icon で付与したクローズボタンをクリック時にドロップダウンリストに戻れるよう、変更しています。

やめました・はじめました

かれこれ四半世紀程続けてきたライフワーク的なウェブサイトを閉鎖し、心機一転、新サイトに移行することにしました。
'95年前後のネット時代幕開けの折、「ホームページ」というものを作ってみたくなり開設した、自分の好きな音楽を情報発信するサイトです。このサイト制作でウェブ周りの技術を身に付け、当時は未だ少なかったホスティング事業の会社に転職したという思い出付きですw

閉鎖・移行の理由はコンテンツ制作と技術面で色々あるのですが、

  • サイトのテーマ(アコースティックギター音楽)には興味を持ち続けているが、表現の場としてコンテンツ構成が窮屈になってきた。もっと「素」な感じで自分の表現欲求を満たせるものでありたい。
  • 少々気負った感じの文章も継続して書くのは負担が大きい。体裁に拘らず、持続可能であることを旨としたい。
  • CakePHP 製なんだけど、PHP や F/W のバージョンアップ対応をサボってたらサーバ移転などで大変な目にあうこと度々(´・ω・`)
  • XHTML/CSS2 というプレゼンスも流石にもう許されんだろうゴルァ。今どきスマホファーストは必須だし、もう新しく作り変えるしか無いよぬ…

という感じです。新サイト開発にあたっては、データベース(旧サイト用のものを機械的に移行したもの)を Nuxt.js 製のプログラムから読み出して、静的ジェネレートした一式をデプロイ、という方針を採りました。U/I は Vuetify で行くつもりだったのですが、静的に展開できないコンポーネントがあったり、独力じゃイケてるページデザイン無理っぽい… ということで Bootstrap5 な無料テンプレベースに切り替えました。

はい、そんな訳で移行前後の記念撮影(スナップショット)を↓。

f:id:mariyudu:20210923113633p:plain
移行前
f:id:mariyudu:20210923113737p:plain
移行後

そういやこの旧サイト、始めた頃はレンタルサーバCGI が使えなかったので、FileMaker の DB をソースに Perl でコンテンツ生成してデプロイ、という形態だったような気が。四半世紀経って元のスタイルに戻ることになるとはなぁ…(遠い目

Nuxt で Vuetify のロケールを設定する

自分プロジェクトで Nuxt いじりするのが楽しい連休二日目です。という訳で表題どおり、Nuxt.js プロジェクトで U/I に Vuetify を選択した時、ロケールを指定して日本語化する設定という小ネタです。nuxt.config.js に言語ファイルの import とロケール設定を追記すれば良さげ。以下、追記後の git diff です。

$ git diff nuxt.config.js 
diff --git a/nuxt.config.js b/nuxt.config.js
index e21aabd..f74933b 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,4 +1,5 @@
 import colors from 'vuetify/es5/util/colors'
+import ja from 'vuetify/es5/locale/ja'
 
 export default {
   srcDir: "./client/",
@@ -54,6 +55,10 @@ export default {
 
   // Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)
   vuetify: {
+    lang: {
+      locales: { ja },
+      current: 'ja',
+    },
     customVariables: ['~/assets/variables.scss'],
     theme: {
       dark: true,

2021年上半期 プライムビデオで観た音楽系コンテンツ

ここ5年ほど週末の夜は安ワイン片手にプライムビデオという、ネイティブ・ウィズコロナな Mariyudu です。おつまみはロルフのベビーチーズが美味いでし。

さて、映画は全然詳しくないのですが、音楽成分多めだと何やら一家言めいたことが書けそうなので、今年1〜6月に観た音楽モノを備忘録的に書き留めておきます。ネタバレとかを気にしない大雑把な性格なので、その辺にナイーブな方はご注意を。

バンドスラム

青春映画としては直球じゃないけど、ミニシアター系と括るにはオープンで小難しくない。主人公がバンドメンバーじゃなくてマネージャー兼プロデューサーってヒネリがイイですね。ハッピーになれます。

ジャージー・ボーイズ(字幕版)

「君の瞳に恋してる」のオリジネイター、フランキー・ヴァリフォー・シーズンズの伝記映画。成功者の例に漏れず、米芸能界という超モンスターなスターシステムに引き裂かれていく様がやるせないです。監督はクリント・イーストウッドなのですな。

ジャージー・ボーイズ(字幕版)

ジャージー・ボーイズ(字幕版)

  • ジョン・ロイド・ヤング
Amazon

グレン・ミラー物語(字幕版)

なにせ'54年作なので寝てしまうかもと思ってたけど、昨今の作品のように凝った展開がある訳でも無いのに普通に楽しめました。戦前〜戦後という時代背景の濃さ故ですかねー。プライムのラインナップには古い映画も多いのだけど、音楽モノが意外に多いという発見も。

グレイトフル・デッドの長く奇妙な旅 [全6話]

自分には長い間、気にはなるけどのめり込むことが出来ないビミョーな位置にいるバンド、グレイトフル・デッド。そんな彼らのドキュメンタリーを観て、バンドの成り立ちや経過、デッドヘッズ達との関係等については理解が深まった気がするけど、デッドをさらに好きになる・なろうという気持ちはやっぱり起こらなかったです。やっぱりこのバンドは不思議だ…

ロケットマン (字幕版)

当初、エルトンの代表作「君の歌は〜」をそれ程良い曲だとは思ってなかったのだけど、後年にデビュー作から通して聴いた後でようやく文脈が腑に落ちたことを思い出します。という訳で複雑この上ないパーソナリティとバックボーンを背負った孤高のポップスターの半生を描いた作品なのですが、ミュージカル仕立てもそれほど濃くはなく、観やすかったです。期待していたジョン・レノンとのコラボに関しては言及なし。普通なら死後に明かされるようなスキャンダラスなあれこれが、本人生存中の大放出。やっぱり凄いスターですわ。

ニューオリンズ(字幕版)

WWI 真っ盛りな1917年、ニューオーリンズを舞台にしたジャズと恋のお話。サッチモビリー・ホリデイの出演で有名な'47年の作品ですが、今回初めて観ますた。この年はジャズのレコードが初めてリリースされた年だそうで、劇中には「ジャズ」の語源誕生のシーンも。奏でられる音は原初のディキシーランドジャズにしては洗練されすぎな気もしますが、ヤボは言いっこ無しと自分に言い聞かせながら楽しんだ90分でした。

ニューオリンズ(字幕版)

ニューオリンズ(字幕版)

  • ルイ・ア-ムストロング
Amazon

ましろのおと [全12話]

二十歳過ぎの頃に初代高橋竹山のレコを買って以来、津軽三味線は好きなジャンルです(郷里が青森県だし)。なので、わりと期待して観始めたけど、けど、けど、うーむ… 要するにこういうノリというかリズムを楽しむには老いすぎたってことでしょうな。太棹の歴史や薀蓄がもっとたくさん盛り込んであったらおっさんでもイケたかも。ちなみに原作漫画は読んでません。