わたねこコーリング

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

petite-vue で問い合わせフォームを試作してみた

petite-vue

Vue.js のサブプロジェクトで petite-vue ってのを見つけたので、使ってみたという話です。

github.com

petite-vue は README にあるとおり、Vue.js のサブセット的な小規模実装で、プログラムサイズはわずか 6KByte 程です。小型軽量なリアクティブ系 F/W では Alpine.js が有名ですが、その 1/7 程度ということになります。当方事情として既存ウェブサイトにフォームページを追加するような小規模開発案件がよくあるので、そんな時のフロントエンド用途に向いているのではと思い、試してみることにしました。

という訳でお題は、企業や団体のウェブサイトに必ずある類型的な問い合わせフォームのフロントエンドサンプルです。以下のような、極力シンプルな仕様とします。

  • フォーム→確認表示→送信結果、という表示遷移。
  • フォームでは、「個人情報の取扱いに同意する」をチェックしないと確認表示に進めないようにする。また、全項目を必須入力項目として扱う。
  • 確認表示ではフォーム項目の入力漏れだけをチェック。入力漏れがあるとフォーム送信に進めないようにする。
  • 送信結果に遷移すると同時に、フロントエンドから API にフォーム入力内容を送信して受付チケット番号を受け取り、これをメッセージ表示する。
  • API プログラムは、受信したフォーム入力データは保存処理等は行わずに読み捨て、数秒間スリープしてからチケット番号をレスポンスするだけのダミープログラム(PHP)で OK。
  • ページデザインは Tailwind CSS を使用。

以上を実装してみたのがこれ↓。

labo.mariyudu.net

ビジネスロジックは Global State Management (@vue/reactivity)に集約し、画面やパーツもウザくならない程度にコンポーネント分割してみました。

使ってみて気になったのは、

  • コンポーネントの親子間通信が用意されていないので、ストアに直アクセスする等、どうしても密結合な実装になりがち。本例では、コンポーネントのパラメータにイベント処理のコールバック関数を指定することで、無理やり v-model っぽいインターフェースにしてますw
  • コンポーネント単位でファイル分割(所謂 SFC)が出来ないので、コードが増えると見通しが悪くなる。

くらいですかね。ただ、これが気になるようなら素直に Vue.js を使い、petite-vue は小規模かつ使い捨てなプロダクトに限定して使うと割り切れば、気にする程でも無いかもしれません。総合的には結構イケるのではないかと思いました。コード一式は Github に置いてあります。

github.com

【2024.3.1 追記】コンポーネント$template には <template> の id 以外にもバッククオート括りでテンプレートリテラルが指定できることが判ったので、JS コードとテンプレートを合体させて、SFC 的にファイルをコンポーネント単位で分割しました。

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

2024年は元旦から大変なことになってしまいましたが、いかがお過ごしでしょうか。わたねこも例年通り昨年最終四半期に観たアマプラ音楽系コンテンツのログでスタートです。ネタバレ御免と頭を下げつつ、今年も良い年になればと。

ブライアン・ウィルソン/約束の旅路 (字幕版)

元 Rolling Stone 編集者による密着インタビューが中心のドキュメンタリー。ずっと精神疾患を患っていた(る?)ブライアンですが、張り付いたような表情で誰とも目も合わせようしない年老いた彼の映像は見ていて辛いし、'80年代以降の不遇なプライベートにフォーカスした箇所は尚更。ゲスト出演スプリングスティーンの「辛い人生を送ってきた人は幸せになるべきだ」という発言に禿同。もっと'60年代の BB5 映像の割合を増やして欲しかったです。

モダンライフ・イズ・ラビッシュ〜ロンドンの泣き虫ギタリスト(字幕版)

レコ屋で出会ったティーンのバンドマンと JD の、十年間の長い春ストーリー。デジタルと大資本が嫌いで拘りばかりが先行して行動力も甲斐性も乏しいという、典型的だめんずのギタリスト君が恋人に愛想を付かされて初めて自己変革に乗り出し、目出度く元の鞘に収まるというお話。最後はちゃんと別れてそれぞれ成長するほうが苦くて良い映画になったんじゃないかって気が。2000年以降の英ロックシーンは良く知らないけど、ブラーやレディオヘッドくらいなら守備範囲内なので、あちこちに散りばめられた薀蓄は何となく分かります。ヒロインがもうちょっと可愛いかったらなぁw

青のオーケストラ [全24話]

オーケストラの指揮者と演奏者が表現を創り上げていく過程には以前から興味がありました。なので、幼少期からバイオリンの英才教育を受けてきたゲゲゲの鬼太郎みたいな髪型の主人公が入学した高校のオーケストラで、「優れたソリスト≠理想の合奏者」というギャップに陥るシーンは期待どおりだったんですが… その後は音楽とはそれ程カンケー無い所で悩んだりキャッキャウフフしたりするライトな青春ドラマですたw 登場人物も皆アク抜きされたみたいな薄味善人で、放映局が NHK だからってそこまで真面目かっ。シーズン2があってもこりゃ観ないかなーという所感ですが、原作読んだらまた印象が変わるのかしら。

マーク・ボラン:名声への運命

グラムロックの雄なのにデヴィッド・ボウイと比べてあまりストーリーが語られない(気がする)マーク・ボランのドキュメンタリー。ピークが過ぎた後にパンクの若手と呼応していた事など、「へー」な情報もあったけど、いかんせん50分という短さに加えて機械翻訳が酷すぎで残念な一作ですた。

チャプター27(字幕版)

ジョン・レノン殺害犯、マーク・チャップマンがハワイからニューヨークに降り立って犯行におよぶまでの3日間を描いたドラマ。これを観たからといって動機がすっきり解明されるという訳でもなく、それなりに誠実で行動力もあるが分裂症気味で視野狭窄なチャップマンの面倒臭い人物像が示されるだけ。タイトルは犯行時に読んでいた「ライ麦でつかまえて」の最終章(26章)の続き、という意味合い? しかし、主役のジャレッド・レトは細身のイケメン俳優な筈だけど、このぽっちゃりオタク体型への役作りはすごいw

ConoHa VPS V2 と V3 のパフォーマンスを比較

ドル高圧力に耐えかねて、プライベート用のサーバを AWS EC2 から ConoHa VPS に移行したのが二ヶ月ほど前のこと。それが先日、コンパネをいじっていたらメニューの一番下に「バージョン切替」というボタンが出来ていて、「ナニコレ?」とポチってみたら「新バージョン(Ver.3.0)と旧バージョン(Ver.2.0)の管理画面を切り替えることができます」とのダイアログ。

実際に切り替えしてみたらサーバリストに契約中のものが表示されなくなったので、先だって立てたサーバは Ver.2 だったようです。調べてみたら 12/22 までのリニューアルキャンペーンが行われているので、ここ暫くの間にサービスがメジャーアップデートされたってこと? アナウンスメールも来てないし、聞いてないぞそれ。

結局 V2 と V3 の違いはよく分かりませんでしたが、サービスの基本形は従来とさほど変わらないようなので、実際にサーバを立てて両者の基本性能を比較してみることにしました。私が立てたサーバのタイプは「メモリ 1GB/CPU 2Core」(Ubuntu 20.4 LTS)なので、これと同様のものを。V3 でサーバ追加しようとしたら Ubuntu に 22.04 LTS が追加されてますね。今どき 20 系はちょっと古いんでね? と思ってたのでこれは嬉しい。折角なのでこちらを選択してポチッとして、さてリモートログイン。

まず lscpu で両者のプロセッサを確認。

v2:~$ lscpu
Architecture:                       x86_64
CPU op-mode(s):                     32-bit, 64-bit
Byte Order:                         Little Endian
Address sizes:                      46 bits physical, 48 bits virtual
CPU(s):                             2
On-line CPU(s) list:                0,1
Thread(s) per core:                 1
Core(s) per socket:                 1
Socket(s):                          2
NUMA node(s):                       1
Vendor ID:                          GenuineIntel
CPU family:                         6
Model:                              85
Model name:                         Intel(R) Xeon(R) Gold 6230 CPU @ 2.10GHz
Stepping:                           7
CPU MHz:                            2095.078
BogoMIPS:                           4190.15
Hypervisor vendor:                  KVM
Virtualization type:                full
L1d cache:                          64 KiB
L1i cache:                          64 KiB
L2 cache:                           8 MiB
L3 cache:                           32 MiB
NUMA node0 CPU(s):                  0,1
(後略)
v3:~$ lscpu
Architecture:            x86_64
  CPU op-mode(s):        32-bit, 64-bit
  Address sizes:         40 bits physical, 57 bits virtual
  Byte Order:            Little Endian
CPU(s):                  2
  On-line CPU(s) list:   0,1
Vendor ID:               GenuineIntel
  Model name:            Intel Xeon Processor (Icelake)
    CPU family:          6
    Model:               134
    Thread(s) per core:  1
    Core(s) per socket:  1
    Socket(s):           2
    Stepping:            0
    BogoMIPS:            4000.00
(中略)
Virtualization features: 
  Virtualization:        VT-x
  Hypervisor vendor:     KVM
  Virtualization type:   full
Caches (sum of all):     
  L1d:                   64 KiB (2 instances)
  L1i:                   64 KiB (2 instances)
  L2:                    8 MiB (2 instances)
  L3:                    32 MiB (2 instances)
(後略)

なるほど、プロセッサは Xeon Gold 6230 から Icelake に変わったと。最近のプロセッサ事情には疎いので、性能的にどう違うのかはよく分かりません。なので、sysbench でベンチマーキング。

v2:~$ sysbench cpu run
sysbench 1.0.18 (using system LuaJIT 2.1.0-beta3)

Running the test with following options:
Number of threads: 1
Initializing random number generator from current time


Prime numbers limit: 10000

Initializing worker threads...

Threads started!

CPU speed:
    events per second:   681.13

General statistics:
    total time:                          10.0012s
    total number of events:              6814

Latency (ms):
         min:                                    1.32
         avg:                                    1.47
         max:                                    7.86
         95th percentile:                        1.58
         sum:                                 9991.04

Threads fairness:
    events (avg/stddev):           6814.0000/0.00
    execution time (avg/stddev):   9.9910/0.00
v3:~$ sysbench cpu run
sysbench 1.0.20 (using system LuaJIT 2.1.0-beta3)

Running the test with following options:
Number of threads: 1
Initializing random number generator from current time


Prime numbers limit: 10000

Initializing worker threads...

Threads started!

CPU speed:
    events per second:  2500.00

General statistics:
    total time:                          10.0010s
    total number of events:              25007

Latency (ms):
         min:                                    0.40
         avg:                                    0.40
         max:                                    1.73
         95th percentile:                        0.41
         sum:                                 9995.00

Threads fairness:
    events (avg/stddev):           25007.0000/0.00
    execution time (avg/stddev):   9.9950/0.00

すごいです。「CPU speed」は約3.7倍の数値。ではメモリ操作は?

v2:~$ sysbench memory run
sysbench 1.0.18 (using system LuaJIT 2.1.0-beta3)

Running the test with following options:
Number of threads: 1
Initializing random number generator from current time


Running memory speed test with the following options:
  block size: 1KiB
  total size: 102400MiB
  operation: write
  scope: global

Initializing worker threads...

Threads started!

Total operations: 32082406 (3207346.87 per second)

31330.47 MiB transferred (3132.17 MiB/sec)


General statistics:
    total time:                          10.0002s
    total number of events:              32082406

Latency (ms):
         min:                                    0.00
         avg:                                    0.00
         max:                                    6.21
         95th percentile:                        0.00
         sum:                                 4801.21

Threads fairness:
    events (avg/stddev):           32082406.0000/0.00
    execution time (avg/stddev):   4.8012/0.00
v3:~$ sysbench memory run
sysbench 1.0.20 (using system LuaJIT 2.1.0-beta3)

Running the test with following options:
Number of threads: 1
Initializing random number generator from current time


Running memory speed test with the following options:
  block size: 1KiB
  total size: 102400MiB
  operation: write
  scope: global

Initializing worker threads...

Threads started!

Total operations: 51360071 (5135146.49 per second)

50156.32 MiB transferred (5014.79 MiB/sec)


General statistics:
    total time:                          10.0001s
    total number of events:              51360071

Latency (ms):
         min:                                    0.00
         avg:                                    0.00
         max:                                    0.84
         95th percentile:                        0.00
         sum:                                 3884.90

Threads fairness:
    events (avg/stddev):           51360071.0000/0.00
    execution time (avg/stddev):   3.8849/0.00

プロセッサの能力向上のせいでしょうか。転送速度が1.6倍に向上してます。次にファイル入出力を。

v2:~$ sysbench fileio --file-test-mode=seqwr run
sysbench 1.0.18 (using system LuaJIT 2.1.0-beta3)

Running the test with following options:
Number of threads: 1
Initializing random number generator from current time


Extra file open flags: (none)
128 files, 16MiB each
2GiB total file size
Block size 16KiB
Periodic FSYNC enabled, calling fsync() each 100 requests.
Calling fsync() at the end of test, Enabled.
Using synchronous I/O mode
Doing sequential write (creation) test
Initializing worker threads...

Threads started!


File operations:
    reads/s:                      0.00
    writes/s:                     8030.15
    fsyncs/s:                     10278.69

Throughput:
    read, MiB/s:                  0.00
    written, MiB/s:               125.47

General statistics:
    total time:                          10.0098s
    total number of events:              183185

Latency (ms):
         min:                                    0.01
         avg:                                    0.05
         max:                                   11.42
         95th percentile:                        0.08
         sum:                                 9887.20

Threads fairness:
    events (avg/stddev):           183185.0000/0.00
    execution time (avg/stddev):   9.8872/0.00
v3:~$ sysbench fileio --file-test-mode=seqwr run
sysbench 1.0.20 (using system LuaJIT 2.1.0-beta3)

Running the test with following options:
Number of threads: 1
Initializing random number generator from current time


Extra file open flags: (none)
128 files, 16MiB each
2GiB total file size
Block size 16KiB
Periodic FSYNC enabled, calling fsync() each 100 requests.
Calling fsync() at the end of test, Enabled.
Using synchronous I/O mode
Doing sequential write (creation) test
Initializing worker threads...

Threads started!


File operations:
    reads/s:                      0.00
    writes/s:                     10705.59
    fsyncs/s:                     13712.75

Throughput:
    read, MiB/s:                  0.00
    written, MiB/s:               167.27

General statistics:
    total time:                          10.0051s
    total number of events:              244213

Latency (ms):
         min:                                    0.01
         avg:                                    0.04
         max:                                   35.71
         95th percentile:                        0.03
         sum:                                 9918.30

Threads fairness:
    events (avg/stddev):           244213.0000/0.00
    execution time (avg/stddev):   9.9183/0.00

総合的に1.3倍程向上してるようです。最後に MySQL での入出力を。事前の準備(CREATE DATABASE や GRANT 等)については省略します。

v2:~$ sysbench --db-driver=mysql --mysql-user=sysbench --mysql-password=******** --mysql-host=localhost --mysql-db=sysbench oltp_read_write run
sysbench 1.0.18 (using system LuaJIT 2.1.0-beta3)

Running the test with following options:
Number of threads: 1
Initializing random number generator from current time


Initializing worker threads...

Threads started!

SQL statistics:
    queries performed:
        read:                            35378
        write:                           10108
        other:                           5054
        total:                           50540
    transactions:                        2527   (252.57 per sec.)
    queries:                             50540  (5051.32 per sec.)
    ignored errors:                      0      (0.00 per sec.)
    reconnects:                          0      (0.00 per sec.)

General statistics:
    total time:                          10.0026s
    total number of events:              2527

Latency (ms):
         min:                                    2.44
         avg:                                    3.95
         max:                                   24.78
         95th percentile:                        5.28
         sum:                                 9992.98

Threads fairness:
    events (avg/stddev):           2527.0000/0.00
    execution time (avg/stddev):   9.9930/0.00
v3:~$ sysbench --db-driver=mysql --mysql-user=sysbench --mysql-password=******** --mysql-host=localhost --mysql-db=sysbench oltp_read_write run
sysbench 1.0.20 (using system LuaJIT 2.1.0-beta3)

Running the test with following options:
Number of threads: 1
Initializing random number generator from current time


Initializing worker threads...

Threads started!

SQL statistics:
    queries performed:
        read:                            91098
        write:                           26028
        other:                           13014
        total:                           130140
    transactions:                        6507   (650.48 per sec.)
    queries:                             130140 (13009.58 per sec.)
    ignored errors:                      0      (0.00 per sec.)
    reconnects:                          0      (0.00 per sec.)

General statistics:
    total time:                          10.0016s
    total number of events:              6507

Latency (ms):
         min:                                    1.20
         avg:                                    1.54
         max:                                   10.59
         95th percentile:                        2.00
         sum:                                 9989.15

Threads fairness:
    events (avg/stddev):           6507.0000/0.00
    execution time (avg/stddev):   9.9891/0.00

こちらも2.6倍の向上というご機嫌な結果に。

まぁ単純なベンチマーキングなので、アプリケーションの体感等にどの程度現れてくるかは分かりませんが、これなら V2 ユーザは V3 に移行して損はないようです。ConoHa さんももうちょっと積極的にプッシュしたらエエのでは。

地理院地図の時系列表示で遊んでみたら面白かった

ツイッターか何かで「地理院地図の時系列表示が面白いよ」というのを見かけたので、実際やってみたら本当に楽しめたという話です。

地理院地図とは、国土地理院が運営しているウェブ地図サービスです。ただ地図を表示するだけじゃなく、様々な統計データをオーバーラップさせたり多彩なテーマに沿った表示形態を備えていて、これが無料で使えるなんて凄すぎる多機能ぶりです。ここ↓にその楽しみ方の一端が紹介されています。

www.gsi.go.jp

これを知ってまず思いついたのは、自分が生まれ育ったホームタウンの昔の様子を見てみることでした。とある地方都市にあるその町は、高度成長期に造成された新興住宅地で、道路や施設・店舗が小学校を中心にいかにも計画的に配置されていたことから造成以前は町らしい町が無かったことが窺えます。漠然と原野でも切り開いて作ったのかなーと思っていたので、地理院地図で造成前の様子を確認してみました。

地理院地図のトップページはこんな感じ。

ここで左上「地図」アイコンをクリックして、表示を「写真」にして種類から「時系列表示」を選択します。

最上段にある検索窓から地名等を入力して、マイホームタウンへ。

地図の上にスライダーがあるので、ここから表示させたい年代をクリックします。グレーアウト表示はその年代のデータが無いってことですね。この地点では過去の写真は1961〜1978年の2枚しか無いんですが、まぁ田舎なのでそんなものかも。まず古い1961〜1969年から表示させてみます。

思いっきり低解像度な白黒写真ですが、上下で団地造成前後に撮影時期が分かれているのが面白いです。上側の造成前は人家も疎らでひたすら農地が広がってますね。道すらも造成時に新しく作ったようで、東西を貫く現バス通りさえ無かったのは「へぇー」でした。さて次の年代(1974〜1978)へ。

多分この頃が町にいちばん活気があった時代でしょうか。現在のほうが逆に空き地が目立つのが物悲しいです。ちなみに後から少し調べたところではこの辺、農地以前は名産馬の放牧地だったのだとか。

そんな訳で、ウェブで楽しむタイムトラベルといった趣で楽しい時間でした。皆さんもぜひ。

AWS Parameters and Secrets Lambda Extension の日本語文字化けに対応した話

AWS Lambda 関数に DB 接続アカウント等の秘匿情報を注入したい場合は、やっぱり環境変数とかじゃなく Secrets Manager を使いたいですよね。最近では Parameters and Secrets Lambda Extension という拡張機能が用意されていて、アプリケーションプログラム内で直にシークレットを取得するより低コストに処理できるようになっています。

docs.aws.amazon.com

dev.classmethod.jp

てな訳で、上記を参考に自分もやってみた(ランタイムは Python)のですが、シークレットに日本語を格納していると所謂文字化けが発生してしまいました。例えば nihongo-test というシークレットの値が {"value": "日本語です。文字化けしてませんか?"} だと、

secretId = 'nihongo-test'
headers = {"X-Aws-Parameters-Secrets-Token": os.environ.get('AWS_SESSION_TOKEN')}
url = f"http://localhost:2773/secretsmanager/get?secretId=" + urllib.parse.quote(secretId, safe='')
resp = requests.get(url, headers=headers)
print(resp.text)

というプログラムでの print() の出力は

{"ARN":"arn:aws:secretsmanager:ap-northeast-1:xxxxxxxxxxxx:secret:nihongo-test-PJyzkt","CreatedDate":"2023-10-13T01:06:42.784Z","Name":"nihongo-test","SecretBinary":null,"SecretString":"{\"value\": \"æ¥æ¬èªã§ããæå­åããã¦ã¾ããã?\"}","VersionId":"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx","VersionStages":["AWSCURRENT"],"ResultMetadata":{}}

のような有様に。キャッシュサーバからのレスポンスの Content-Type を確認したら 'text/plain' のみで charset 明示が無かったので、そのへんが原因みたいです。なので、

print(resp.content.decode(encoding='utf-8'))

のように resp.text ではなく、resp.content から body を取得してバイト列→文字列と変換してやれば OK ですた。

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

いやー、長くて暑い夏でしたな。ようやくパソコンの冷却ファンも静かになりますた。四半期恒例、ネタバレ御免のアマプラビデオ音楽系コンテンツの寸評です。

リンゴ・スター:そのうちの1つ

40分ちょっとのリンゴ・スター・ドキュメンタリー。原題の「One of Them」が「そのうちの1つ」と邦訳されるあたりで既に予感プンプンですが、最近のアマプラでよくある機械翻訳で字幕生成したコンテンツな訳です。作品によっては誤訳を楽しめたりしますが、記録映像でこれはダメでしょう。誤訳の時に原文をいちいち考えながら観てしまうのでさっぱり頭に入ってこないし、それを差し引いても既出の映像・トピックばかり。まぁ観る価値ゼロでしょう(時間返せ)。

サウンドブレイキング レコーディングの神秘

ポップスのレコーディングの歴史を様々な角度から捉えた、全8話のドキュメンタリーシリーズ。必ずしもスタジオワークの現場に限ってはおらず、録音に至るまでの創造の過程にも切り込んでいるので、「レコーディング」というよりは「制作」全般という表現が正しいかも。とにかく出演者が超豪華だし、洋楽好きにはタマりませんな。

パリに見出されたピアニスト(字幕版)

人並み外れた音感と記憶力を持ちながら、貧しい母子家庭の生まれ故に音楽を諦めてヤサグレていた青年が、ふとした出会いでピアニストに大成していくお話。オープンピアノに興じる姿を見初められる出だしはスピード感があって良かったのだけど、誰の指図も受けないとツッパってたのが女の子の一声でやる気になったりとか、だんだん鼻に付いてくるチャラくて薄っぺらいテイストは今どき? 音楽描写にもあまり深みを感じられず、ライトな青春ドラマ以上のものでは無かった感。

アメリカ交響楽(字幕版)

ジョージ・ガーシュウィンの伝記映画。没年の8年後である1945年に公開されており、実際に知人だった音楽家が多数実名で出演してます。ブロードウェイの売れっ子から、本格的な作曲家を目指して創り上げた「ラプソディ・イン・ブルー」の初演シーンが、ノーカットの長丁場を感じさせない圧巻。天才は得てして不遇な人生を送るものですが、十代から才能を開花させて順風満帆に富と名声を獲得した彼の人生は、早世したとは言えかなり幸福だったのではないでしょうか。生き急ぎ感がよく出ている作品です。

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


長かった「新しい日常」も世間では区切りがついたことになったようで、社会に活気が戻ってきたのは歓迎したいです。まぁ当方は諸事情で相変わらず引き篭もりなネット生活を絶賛続行中ですが。さて高齢じゃない恒例のアマプラビデオ音楽系コンテンツの寸評を。

ザ・バンド かつて僕らは兄弟だった(字幕版)

ロビー・ロバートソンが語り部となりマーティン・スコセッシが総指揮を取った、ザ・バンドのドキュメンタリー伝記映画(2020年作)。クラプトンやジョージ・ハリスンスプリングスティーンタジ・マハール等の豪華インタビューも。思えば映画「ラスト・ワルツ」公開の頃、ビートルズを入り口に主に英ロックで洋楽入門してハードロックからプログレフュージョンに進もうとしていた当時の自分には、ザ・バンドの音は地味で退屈にさえ聴こえ、ディランのバックバンドが何でこんなに盛り上がってるの? という程度の認識でした。解散後のロバートソン vs 他3人の確執の印象が強かったので、元々は結束の固いバンドだったのが意外でもあり嬉しくもあり。リヴォン、リック、リチャードの3人が既に故人なので、余計に物悲しさが募りますな。
[asin:B093KK1D88:detail]

ノーザン・ソウル(字幕版)

1974年の英ヨークシャー小都市を舞台に、ドロップアウトした高校生が音楽に希望を見出して人生を切り開いていく青春モノ(2015年)。この映画を観るまで「ノーザン・ソウル」ってのは1990年代に作られた懐古的なクラブカルチャーだと思ってました(恥)。ミュージシャンじゃなく DJ を目指すあたりが新機軸かも。ダンスやファッション、風俗がどれだけ当時を再現できてるのかまでは判りませんでしたが。とまれ劇中でかかる音楽がどれもサイコーだったので、エンドロールで曲目を確認してプレイリスト作っちゃいました。記事末尾を参照下さい。

ノーザン・ソウル(字幕版)

ノーザン・ソウル(字幕版)

  • エリオット・ジェームズ・ラングリッジ
Amazon

Ladies & Gentlemen The Rolling Stones

ストーンズの1972年北米ツアー記録。2017年にリリースされた同名 CD の映像版? カメラワークにいまいちメリハリが無く、チャーリーやビルの大写しがほぼ無いし、ニッキー・ホプキンスの姿も見えなかったのが残念。黙々とギターに専念するミック・テイラーが印象的ですた。

菅井君と家族石 THE MOVIE

秘密結社鷹の爪」の Frogman がブレイク前に習作として創った Flash アニメの映画化。音楽と映画とアニメのネタが渾然一体になった不条理おバカ短編の繋ぎ合わせで、ニヤニヤしながら見てるうちに時間が溶けて後には何も残らないという潔いまでに吹っ切れた怪作。登場キャラが全部分かればもっと楽しめたかもだけど。(調べたら、菅井くん=スライ・ストーン、兄ちゃん=ジョン・コルトレーン、父ちゃん=ジョン・リー・フッカー、母ちゃん=ジェームス・ブラウン、爺ちゃん=レイ・チャールズ、らしいですw)

ブルースの誕生(字幕版)

1890年代のニューオーリンズを舞台に、ビング・クロスビー演じる白人クラリネット奏者が黒人音楽に身を投じて社会的認知を得ていくまでを描く1941年作品。ジャズ・ブルーズへのリスペクトは表明されているけど、主人公達が遭遇する困難も予定調和的で、黒人達も何の蟠り無く接してくれたりと、何ともあっけらかんとしたテイスト。どれだけ音楽的な時代考証もされているか疑問が残りますが、劇中音楽は流石のクオリティ。

【付録】「ノーザン・ソウル」でかかった曲を集めた Spotify プレイリストです。一番重要な曲であるサルヴァドールズの「スティック・バイ・ミー・ベイビー」が無かったのは残念。