わたねこコーリング

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

懲りずに情報発信サービスを目論んで一週間で撤退した件

細かく説明するのもかったるいので、経緯をかいつまむとこういうことです↓。

  1. Spotify の特定ジャンルの曲を毎日ツイッターで紹介するサービスをやってみようかと思い立つ。
  2. リアルタイムに発信するのは大変なので、一定量を書き溜めながら API 経由で自動配信するスタイルとしてサービス設計。
  3. バックヤードシステムをざっくりプロトタイピングして、専用ツイッターアカウントで11月1日から配信開始。
  4. 50回ぶん程のツイートをストックしたところで、思っていたより負担の大きな作業であることに気づく。
  5. 過去の失敗をなぞっている雰囲気が濃厚なので、早々に中止を決定。

最後の「過去の失敗」とは、以前個人サイトやブログ形式で、やはり音楽に関するテキストコンテンツを配信し始めたものの、次第に負担を感じるようになって継続できずに休止状態になってしまった黒歴史です。ツイッターなら1回の発信量が短いし、普段から個人アカウントでやっている砕けたスタイルでなら負担でもないだろうと高をくくってた訳ですが、実際やってみると独立したサービスとしての情報発信は、内容のわかり易さ・訴求力・全体のバランス等をどうしても意識しながら書かねばならず、いち個人が気ままにするそれとは大きく違っていました。

ちなみにこのサービス用に作ったツイッターアカウントはこんなやつです↓。既に非公開にしてあり、そのうち削除しますが。

f:id:mariyudu:20201108145327p:plain

これが、コンテンツをストックおよび自動配信する為のバックエンド・システム↓。NuxtJS + Vuetify 製です(ここ1年で習得中の Vue.js を使ってみたいというのも本件の動機の一端ではありました)。

f:id:mariyudu:20201108145435p:plain

そんな訳で、サービスの構想は白紙に戻しますが、日常生活の延長で継続的に情報発信する欲求は消えていないので、仕切り直して別の楽しいやり方が無いか考え中です。せっかく作ったシステムももうちょっと育ててみたいし。以上、書き留めておかないとまた数年後に同じ事をやっていそうなので、備忘録としてw

Vue.js で SVG.js を使って動的に画像生成する

以前に作った SVG.js でベクタ作画する処理を、Vue.js 製のウェブアプリに組み込もうとしてるのですが、npm モジュールが少し古いようなのでひと手間加えることになったというお話です。

SVG.js はコンパクトに纏まっており、他のリッチ志向なライブラリに比べて学習コストも低く、質実剛健さが好きなプロダクトです。最新版は ver.3.0.16 ですが、npm モジュールの方は3年前の ver.2.6 系とバージョンが乖離しているので、CDN の最新バージョンを scriptjs で読み込むことにしました。作画機能を Vue プラグインにして無理やり Vue プログラミング感を出してみましたw ○△□ボタンクリックで div 要素内に svg ノードを追加、削除ボタンクリックで全部削除という簡単なサンプルです↓。

codesandbox.io

この手の処理は昔ながらに DOM を直接いじるやり方のままなんですが、他にリアクティブ志向なやり方ってあるんですかね? どなたかご存知でしたらご教示を。

【Spotify】NEMS Record Shop

去る10月9日は、ジョン・レノン生誕80年の誕生日だったのですが、それにちなんでという訳でもなくビートルズ小ネタを。公式アルバム(「プリーズ・プリーズ・ミー」〜「レット・イット・ビー」および「パスト・マスターズ」)の中でカバーしているロックンロールや R&B の数々を集めてみたらちょうど1時間程なので、Spotify でプレイリスト化してみました。

題して「NEMS Record Shop」。NEMS ってのは、ブライアン・エプスタインがビートルズのマネージャーになる以前にリバプールで経営していたレコード屋(正確には家具雑貨屋の一角にレコード・コーナーを設けていたとか)の屋号です。おそらく、ビートルズの面々もここに通っては上記プレイリストにあるようなアメリカン・ポップスに触れていたのではないかと想像できます。ちなみにそのお店、当時の面影はこんな様子だったようです↓。

www.britishrecordshoparchive.org

住所を調べて Google Street Map で散策してみたら、今はこんな感じ。60年の歳月は残酷ですな。

www.google.com

去年は映画「イエスタデイ」が話題になったし、今年にはブライアン・エプスタイン伝記映画制作の報も入って来ていて、相変わらず話題提供が尽きないビートルズ界隈です。という訳で、前回に続いて Spotify プレイリストづくりでした。楽しいなぁw

休日専科 〜 とろけるスライドギター

いまさらですが Spotify、イイですね。20世紀だった頃に好きな音楽のレビューサイトを作っていて、音楽を言葉で伝えることの難しさに七転八倒しながら「ページに音源を貼り付けてリアルタイムで聴きながら記事を読んでもらえたらなー」とため息をついてたものですが、いつの間にかそれが本当にできるようになってしまいました。

Spotify は日本ローンチの際にアカウントを作って、ブログ等にプレイヤーを埋め込めるのも知ってはいたのですが、良い切り口が見つからない等と言い訳しながら時間ばかりが経ってしまった今日この頃。久々に時間が空いた休日なので、えいやっと昔 iTunes Store 用に作ったプレイリストを再現してみました。題して「休日専科 〜 とろけるスライドギター」w

休日の午後に合いそうな、ゆったりしたテンポのアコースティック・スライドギターのインストゥルメンタル曲ばかり集めた1時間弱のプレイリストです。テーマ的にハワイアン率高めかも。しかし、どの曲も比較的マイナーで古めの音源なのですが、ほぼ全曲を揃えることができたのは流石 Spotify ですな。

5万曲入りの iTunes ライブラリを外付けドライブに引っ越そうとして難儀した件

自宅 MacBook Pro (15″Mid 2015 / Mojave)の内蔵ドライブ(SSD)が手狭になってきて仕事に差し支えるようになったので、250GB と半分程容量を消費している iTunes フォルダを外付けドライブに引っ越すことにしました。以前もやったことがある作業なので高をくくってたら予想以上に難儀してしまったので、備忘録として書き残します。

最初に試した方法は、ネットで調べた「iTunes フォルダを移動して、Option キーを押しながら iTunes を起動して、移動先フォルダを選択する」という方法でした。ネット記事によると、起動後の iTunes で「曲の情報」から「ファイル」タブで確認すると、格納場所が移動先に変わっているということだったのですが、自分の場合は以前の場所のままでした。原因は分からずじまい。

前述の「以前にやった」方法は、移動した先の iTunes フォルダにある「iTunes Library.xml」の音源ファイルパスを適宜書き換えるというものだったので、これも上記の失敗の後で試してみたのですが、iTunes を起動すると書き換える前の内容に戻ってしまうという現象で、失敗に終わりました。以前は iTunes のライブラリデータベース・ファイルが「iTunes Library.xml」だったのが、現在では「iTunes Library.itl」に変わっており、XML ファイルはそのシャドウになってしまったというのが原因のようです。

その後、あれこれ試行錯誤して何とか移動に成功したので、下記に手順を記します。その前に注記しておくと、当方環境ではリッピングや購入した音源を iTunes/アーティスト名/アルバム名/ に格納する昔ながらの設定になっており、「iTunes Media」フォルダに統合することはしていません。この辺が違うと、下記方法ではダメだと思います。

  1. 移動前の状態の iTunes にて、「環境設定」を開き、設定内容を控えておく。
  2. iTunes フォルダを丸ごと、移動先にコピーする。
  3. コピーした iTunes フォルダ内にある設定ファイルの類(自分の環境では iTunes Library.itl, iTunes Library.xml, iTunes Library.itl, iTunes Library Extras.itdb, iTunes Library Genius.itdb)を削除する。
  4. Option キーを押しながら iTunes を起動して、ダイアログの「ライブラリを選択」ボタンをクリックし、移動先フォルダを選択する。起動後の iTunes は左ペインライブラリの「曲」で何も表示されないまっさらな状態になっていれば OK。
  5. 「環境設定」で、控えておいた設定内容に設定する。その際、「詳細」タブの設定で「ライブラリの追加時にファイルを"iTunes Media"フォルダにコピー」のチェックは外しておくこと。
  6. コピー元の iTunes フォルダ内にある「iTunes Library.xml」のファイルパスを移動先に合わせて書き換えたものを複製する。ファイルパスは、<key>Location</key> で始まる行の <string> タグの中に URI 書式で記述されています。例えば、/Users/mariyudu/Music/iTunes から /Volumes/Music-Drive/iTunes に移動するように書き換えるなら、「/Users/mariyudu/Music/」という文字列を「/Volumes/Music-Drive/」に置換すればイイですね。テキストエディタでやってもいいですが、当方ではデータ量が多いので ターミナルから sed で一発書き換えしました。
  7. iTunes の「ファイル」メニューから「ライブラリ」>「プレイリストを読み込む」を選択して、上で作成したファイルを読み込ませます。当方の5万曲弱の場合では、30分程かかりました。
  8. これで移動場所にコピーした音源ファイルが取り込まれ、これまでに作成したプレイリストや再生回数等の情報も全て、新しい環境に反映されました。ポッドキャストの購読情報等はきれいさっぱり無くなっていましたが、それはまぁ良しとします。

以上です。XML データ書き換えが必要なので、その辺を理解できて個別的なトラブルに対処できる方以外にはお勧めできませんが、ひとつの情報として。あと、この種の作業の前にはとにかくバックアップを忘れずに! 当方も直前にタイムマシンバックアップで丸ごと状態保全したのは言うまでもありません。

DNS ゾーンレコード変更を監視して音声でお知らせ

最近ブログ書いてないので小ネタも山の賑わい的な。

当方では自分のドメインバリュードメインさんで管理しているのですが、コンパネからゾーン情報を編集しても DNS サーバに反映されるまで5〜30分程(公称)かかるんですよね。「変わったかな?」と数分毎に dig を叩くのも面倒なので、10秒おきにチェックして音声で知らせるワンライナーを書きました(Mac 限定)。

以下は、TXT レコードの一部を hogehoge を含む内容に書き換えた際、プライマリネームサーバをチェックして変更が反映されたらお知らせする例です。ご利用にあたっては <> 内を書き換えて下さい。

while :; do date ; dig @<プライマリネームサーバ> -t TXT <当該レコードのドメイン> | grep hogehoge && say "やったー、変わりましたよ!" ; sleep 10 ; done

これでお知らせが来たら、あとは設定してある TTL だけ待てば第三者からの名前解決にも「浸透」を期待できるという訳ですな。

※音声出力がマクの say コマンドなので、他プラットフォームの場合はその辺を適宜アレンジして下さい。

手元の phpMyAdmin からリモートホストのデータベースを SSH トンネル経由で操作する

ウェブ開発では、かつては MySQL サーバを立てたら次は同サーバ内か同一 LAN 内に phpMyAdmin のセットアップをというのが定石でしたが、コンテナ時代の今では phpMyAdmin もデスクトップアプリと同様の手軽さで利用できるようになりますた。という訳で、手元の開発用マシンで phpMyAdmin を Docker コンテナで起動して、リモートホストMySQL サーバに SSH ポートフォワード経由で繋いでしまおうという小ネタです。

まず、DB を立ててあるリモートホスト foo@bar.net との間にトンネルを掘ります。トンネルの入り口は localhost じゃなくて Docker コンテナ内から接続できるようにホストマシンのローカル IP (例では 192.168.12.34)にしておくのがミソ。

ssh foo@bar.net -N -L 192.168.12.34:3306:localhost:3306

phpMyAdmin純正イメージを使って、コンテナを起動します。環境変数 PMA_HOST で DB サーバアドレスを指定できます。

docker run --rm --name pma -d -e PMA_HOST=192.168.12.34 -p 8080:80 phpmyadmin/phpmyadmin

あとは http://localhost:8080/ から phpMyAdmin 使い放題、と。

受注開発で DB は用意されていても必ずしも phpMyAdmin が使えるとは限らない等、割とよくあるユースケースじゃないかと思うのですが、不思議にネットでソリューションが見つからなかったので書いてみました。