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

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

Vue FlatPickr Component (CDN 版)を日本語化する

Vue.js なお仕事で日付入力にお馴染みの FlatPickr を使ったので、表題件を備忘録的にメモ。背景はこんな感じ。

  • モノリシックな SPA 開発というよりは、レガシィな既存サイトの一部ページについて U/I を Vue.js 化するという案件だったので、JS ライブラリは全て CDN 版を利用。
  • FlatPickr も生じゃなくて Vue コンポーネントだと嬉しいので、Vue FlatPickr Component を採用。

jQuery 時代にはよく使ってた FlatPickr ですが、Vue コンポーネントは色々と勝手が違ってちょっと手間取りました。結局は

と、これだけで良かったみたいです。Vue FlatPickr Component の jsFiddle デモを fork して日本語版にしておきましたので、どうぞ。

jsfiddle.net

2022年第2四半期 プライムビデオで観た音楽系コンテンツ

今年4〜6月にアマプラで観た音楽系コンテンツをミニレビュー。毎度恒例、ネタバレ御免につきご注意を。

GSワンダーランド

1960年代後半の国内 GS ブームを舞台にした青春コメディ。米英のようなボトムアップでなく黒船来襲によるにわか景気に群がるレコード産業のオトナ達と、スターを夢見つつ一応自分たちの「音」にも拘る若者達を対立軸にして、テンポよく進んでいくドタバタ劇が楽しいです。サリー久保田作曲の劇中歌が、いかにもなパチもん風味を押し出しつつもギターソロはキンクスみたいでカッコ良かったりと、これまた魅力的。そういやタイツ・コスチュームって実際にタイガースがやってたような記憶がw

夜も昼も(字幕版)

学生だった1982年、トレイシー・ソーン(というかギターはベン・ワットなので実質 EBTG)がカバーした「ナイト・アンド・デイ」にはかなり夢中になって、チェリーレッドを中心にネオアコにもハマったのですが、そこで初めて作曲家のコール・ポーター(1891〜1964)の魅力を意識するようになりました。彼の半生を題材にしたこの1946年公開の作品は、ショウビズの権化だったような彼の私生活については相当に美化されていて伝記としてはあまり誠実とは思えませんが、音楽はそれはもう豪華絢爛。古き良きアメリカを堪能できる、ミュージカル仕立てのエンタメとして良質。

Perfume LIVE 2021 [polygon wave]

結成から21年、コロナ禍の最中にさいたまアリーナで決行されたコンサート。歓声禁止の会場を盛り上げようと奮闘する MC 姿がいじらしいです。背面と床面全体を CG ディスプレイにしたステージは見事すぎて、もう完成し尽くされた感。

CRASS:ゼア・イズ・ノー・オーソリティ・バット・ユアセルフ(字幕版)

1977〜1984年にかけて活動したロンドンパンクバンドのクラス(Crass)の、メンバーのインタビューを中心にしたドキュメンタリー。正直全く聴いてこなかったバンドで、当時の耳で音を聴いてもあまりピンと来なかっただろうなという気はします。が、こうして背景に何があったのかを知ると興味が出るし、サウンドも後のスカブームを予感させるようにも聴こえてくるのは、やっぱり年輪を経たからですかね。バンドをやっていてもいなくても、こんなふうにしか生きられなかった彼らって、クラッシュやジャム、ましてやピストルズよりずっとリアルなパンクだったんですよねー。

バックコーラスの歌姫たち(字幕版)

フィル・スペクターとの腐れ縁に翻弄されたダーレン・ラヴや、ストーンズ「ギミー・シェルター」への参加で名を馳せたメリー・クレイトン他、比較的有名な黒人女性バックコーラス・シンガー達のドキュメンタリー。裏方から表舞台への転身を軸に、それぞれの光と影を描く訳ですが、立身出世のみを是としてコーラスに留まった女性たちへの視線がちょっと意地悪じゃないかしら。M・ジャガースプリングスティーンスティーヴィー・ワンダー、スティング等の語り部が豪華で、それだけでも観てよかったという気にw

【Python】Zip ファイルから特定のファイルだけパスを付けずに取り出す

沢山のファイルが詰め込まれている Zip ファイルから、特定の条件(拡張子とか)のものだけ選んで解凍保存したい。その際、パスが深いと保存場所がとっ散らかるのでディレクトリは取っ払って一箇所に集めたい、という状況で書いた Python コードです。

下記は、拡張子が .xbrl のものだけ見つけて、パスからディレクトリ部分を除去してカレントディレクトリに保存するという例です。ファイル名が重複している場合は考慮してません。

import zipfile
import re
import os

zip_file = 'my.zip'
with zipfile.ZipFile(zip_file, 'r') as zf:
    for info in zf.infolist():
        m = re.match(r'.+\.xbrl', info.filename, flags=re.IGNORECASE)
        if not m:
            continue
        info.filename = os.path.basename(info.filename)
        zf.extract(info)

info.filename への上書きでファイルパスを変更し、extract() にその info を渡すところがキモでしょうか。割とありがちなユースケースのような気がしますが、結構調べてしまったのでおすそ分けです。しかし、何をやろうとしているのかが拡張子でバレバレですなw

AWS SNS のメッセージ属性とフィルターで、配信をオプトイン・アウトする

運用中のシステムから、警報やエラーの類を AWS SNS 経由で関係者に通知するというユースケースは割とありがちだと思います。そんな時、内容の重要度等に応じて配信先を選択するにはどうしたら良いか? という件について。

結論から言うと、メッセージ送信の際に件名・本文の他に属性(この場合だと重要度)を付与してやり、当該トピックに登録されたサブスクリプションのフィルターポリシーの設定に従って通知をオン・オフする、というやり方になります。

docs.aws.amazon.com

例として、「警報(Warning)」と「エラー(Error)」の二種類を持つシステムアラートを、SNS トピック MySystemAlert から配信するものします。この配信に際して、サービス運用者 staff@abc.def にはエラーだけを、技術担当者 engineer@abc.def には両方を通知したい場合は、両者をトピックにサブスクリプション登録した後、フィルターポリシーを以下のように設定します。

サービス運用者 staff@abc.def

{
   "alert_level": ["error"]
}

技術担当者 engineer@abc.def

{
   "alert_level": ["warning", "error"]
}

あとはトピックへのメッセージ送信の際に、下記のようにメッセージ属性を付与してやれば OK。ここでは alert_level が error なので、両者のサブスクリプションに配信されることになります。

aws sns publish --topic-arn <トピック MySystemAlert の ARN> --subject 'エラーが発生しました!!' --message 'これはテストです。無視して下さい。' --message-attributes '{"alert_level":{"DataType":"String","StringValue":"error"}}'

尚、サブスクリプションが Lambda 関数の場合は、メッセージ属性はパラメタ event.Records[].Sns.MessageAttributes.<属性名>.Value からアクセスできるので、これを使ってより細かいコントロールも可能になりますね。

2022年第1四半期 プライムビデオで観た音楽系コンテンツ

今年1〜3月にアマプラで観た音楽系コンテンツの所感というかメモでつ。ネタバレ御免につきご注意を。

インサイド・ルーウィン・デイヴィス 名もなき男の歌(字幕版)

ボブ・ディランも憧れたという伝説的なフォーク SSW、デイヴ・ヴァン・ロンクの自伝をベースにした、売れないフォークシンガーのダメダメな数日を描いた疑似伝記映画。シカゴへの往復はロードムービーふう。ピーター・ポール&マリーやブラザーズ・フォーみたいな登場人物や、ラストシーンでのボブ・ディラン(のような人)登場が胸アツでつ。オスカー・アイザック歌うまい、キャリー・マリガンはビッチでキュート、猫かわいい。コーエン兄弟の「オー、ブラザー!」も観てみたくなりました。

音楽

毎日ヒマを持て余しているヤンキー高校生トリオが思いつきでバンド「古武道」(ベース+ベース+ドラムw)結成、紆余曲折(のようなモノ)を経て地元のロックフェスに立つまでのアニメ映画。とにかく劇中の音楽が「ちゃんとして」ます。例えば実写映画版の「ベック」がコユキの凄さを無音にすることでしか表現できなかったのに対し、本作はちゃんと音を作っていて、それがまた実際素晴らしい。カンを想起させるハンマービートな古武道、批評眼的視座に優れていて演奏テクニックも備えているはっぴいえんどな「古美術」、その他ロック好きにアピールする記号が満載。以前から評判は聞こえてはいましたが、マジで傑作ッス。

ブランカとギター弾き(字幕版)

マニラのスラムで路上生活する孤児の少女と、同じく宿無し盲目路上ギター弾きじいさんが出会い、旅をしながら絆を深めていくロードムービー。ストーリーは正直ピンと来なかったけど、映像的にはフィリピンの街並みが目に美味しかったです。サイデル・ガブテロ演じる少女が歌ったのは「カリノサ」というフィリピン民謡(歌詞は現代ふうにリライトされてる)らしいけど、リズムといい節回しといいペルーのフォルクローレに通じるようであり、興味深かったです。

サンセット・ストリップ ロックンロールの生誕地 (字幕版)

LA の歓楽街、サンセット・ストリップの小史ドキュメンタリー映画(2013年米公開)。ウィスキー・ア・ゴーゴーやロキシーシアターといった有名ライブハウスの名前は知ってても、それらが密集するこの数km程のエリアがカウンターカルチャーのシンボル的な存在だったというのは初めて認識しました。元々はセレブが集う退廃色の濃い夜の社交場だったのが、'60年代からユースカルチャーにシフトして「セックス・ドラッグ・ロックンロール」タウンに変貌。そして'80年代末にオルタネイティヴの台頭でロックが過去の遺物となるとともに衰退して行った、ということですかね。当時のライブ映像が盛り込んである訳でなく、太ってシワだらけになった往年のロックスター達が未練たっぷりに懐古したりステージ(リバイバルフェスか何か?)でイケイケに振る舞う姿が痛々しい。ジョニー・デップキアヌ・リーヴスらが華を添えてなければ、結構物悲しい作品で終わったかもですねー。

という訳で、前回まで半年ペースで纏めてましたがボリューム的に大変なので、四半期毎に書くことにしました。まだまだウォッチリストはパンパンなのでネタが尽きそうにありません。

はてなブログで UA と GA4 を併用する

このブログでは開設以来 Google アナリティクスでアクセス集計してきましたが、アナリティクスのコンソールで最近こんな表示が。

f:id:mariyudu:20220402104009p:plain

従来のアナリティクス(ユニーバサルアナリティクス、以下 UA)が、次世代の「Google アナリティクス4」(以下 GA4)に代替わりするので、UA は 2023年7月からデータ収集できなくなるよ、ってことですね。UA で蓄積されたデータを GA4 に移行することは出来ないっぽいので、暫くの間は UA と同時に GA4 でもトラッキングして GA4 側にじゅうぶんデータが溜まった時点でスイッチするのが良さげです。じゃあ、それをはてなブログで設定するにはどうすんの? ってのが今日のお題。既に移行先の GA4 アカウントとプロパティは取得済み、また Google タグマネージャーは使っていない、という前提で読んで下さい。

従来はブログ設定の「詳細設定」で UA のトラッキング ID を設定して、トラッキングを行ってきました(下図)。

f:id:mariyudu:20220402104037p:plain

これにより、自分でトラッキングコードを書かなくともはてなブログがトラッキングコードを生成してくれていた訳ですね。けれど、ここで GA4 のトラッキング ID を追加するような設定には対応していないみたいです。さて、どうするか… 少し調べた結果、はてなブログのトラッキングコード生成機能を使うのを止めて、自分でトラッキングコードを書く」のが手っ取り早かったです。上記の「Google Analytics 埋め込み」にセットしたトラッキング ID を削除し、そのずっと下のほうにある「head 要素にメタデータを追加」に、トラッキングコードを書きます(下図)。

f:id:mariyudu:20220402104053p:plain

ラッキングコードは GA4 で発行したものの最後に、gtag() パラメータに UA のトラッキング ID を指定した行を追加するかたちになります。この設定を一週間前に行いましたが、UA と GA4 の両方でトラッキングデータが蓄積されているようです。

Heroku でシンプルな PHP サイトを作る

ここしばらく、レンタルサーバ中心で開発・提供してきた個人サイトの数々を整理統合する作業をしてます。その一環で、とある PHP 製サイトを Heroku の無料プランに移行してみることにしました。公式のチュートリアルに従って手順を学んだのですが、Silex アプリのボイラープレートを git clone して作業を進めるというのはブラックボックスっぽいというか、いまいち理解に繋がる感じがしなかったので、フレームワーク頼りではなく古典的なスクリプトレットのサイト開発を手作業でひとつずつ進めるやりかたにブレイクダウンしてみました。「Heroku アプリを作る」件だけにフォーカスしたいので、下記を前提にしています。

  • Heroku アカウントを持っている。
  • ローカル環境に Heroku CLIPHP、Composer、Git がインストールされており、使える状態になっている。またそれらについての最低限の知識を持っている。

さて、Heroku で PHP サイトを構築するには、ざっくり言って下記要件が必要なようです。

  • サイトのドキュメントルートとなるディレクトリを作り、そこのプログラムを配置する。
  • モジュールやライブラリの類は Composer で用意する。
  • Heroku のコンテナに指示をする Procfile というファイルが必要。
  • 一式は Git リポジトリ化されており、リモートリポジトリは Heroku を指している。

これらをステップ・バイ・ステップで手作業してみます。macOS 等の Unix 系 OS を対象とした記述になっていますので、Windows の方は適宜読み替えて下さい。まず、ローカル環境の適当な場所にプロジェクトディレクトリを構築。

mkdir -p heroku-php-site/web
cd heroku-php-site/

Heroku のコンテナで使われるモジュールを Composer でインストール。

composer require --dev heroku/heroku-buildpack-php

これで、composer.json, composer.lock, vendor/ が出来ていれば OK。次に PHP アプリファイルを作成。シンプルに phpinfo() を実行するだけのページ1枚だけです。

cat << EOS > web/index.php
<?php
phpinfo();
EOS

Procfile を作成します。

cat << EOS > Procfile
web: vendor/bin/heroku-php-apache2 web/
EOS

Git 管理から外すファイル・ディレクトリも明記。

cat << EOS > .gitignore
vendor/
.env
EOS

これで一式が揃ったので、ビルトインサーバで動作確認。

php -S 0.0.0.0:8080 -t web

ブラウザで http://localhost:8080/ を開き、phpinfo() 出力が表示されていれば OK。

以上でアプリ開発(笑)が完了したので、ここから Heroku にデプロイする手順に入ります。Git ローカルリポジトリを作成。ブランチはデフォルトのまま main が良いようなので、古い git を使っている方はご用心。

git init
git add .
git commit -m "最初のコミット"

事前にブラウザで Heroku ダッシュボード( https://dashboard.heroku.com/ )にログインしておいてから、下記手順でアプリをデプロイします。heroku create の際にはアプリ名を指定しないとランダムな名称が付与されるので、ここでは my-simple-php としておきます。

heroku login
heroku create my-simple-php
git push heroku main

これでデプロイが完了したので、ブラウザで動作確認してみます。

heroku open

ローカルの時と同様、https://my-simple-php.herokuapp.comphpinfo() 出力が表示されていれば OK。

以上です。あとは必要に応じてプログラムを改修し、git push heroku main でデプロイという繰り返しになります。