Vuetify 小ネタ。表題の件を v-select で実現できんかなー、とサーチしていて見つけたのがこれ↓。
ほぼドンピシャなソリューションだったのですが、任意入力 + Enter で初期表示状態に戻る U/I が少し不満だったので fork してアレンジしてみました↓。
See the Pen
Stackoverflow: 61211428 by まりゆどぅ (@Mariyudu)
on CodePen.
v-text-field で任意入力した後でも表示はそのままで、append-icon で付与したクローズボタンをクリック時にドロップダウンリストに戻れるよう、変更しています。
かれこれ四半世紀程続けてきたライフワーク的なウェブサイトを閉鎖し、心機一転、新サイトに移行することにしました。
'95年前後のネット時代幕開けの折、「ホームページ」というものを作ってみたくなり開設した、自分の好きな音楽を情報発信するサイトです。このサイト制作でウェブ周りの技術を身に付け、当時は未だ少なかったホスティング事業の会社に転職したという思い出付きですw
閉鎖・移行の理由はコンテンツ制作と技術面で色々あるのですが、
という感じです。新サイト開発にあたっては、データベース(旧サイト用のものを機械的に移行したもの)を Nuxt.js 製のプログラムから読み出して、静的ジェネレートした一式をデプロイ、という方針を採りました。U/I は Vuetify で行くつもりだったのですが、静的に展開できないコンポーネントがあったり、独力じゃイケてるページデザイン無理っぽい… ということで Bootstrap5 な無料テンプレベースに切り替えました。
はい、そんな訳で移行前後の記念撮影(スナップショット)を↓。
そういやこの旧サイト、始めた頃はレンタルサーバで CGI が使えなかったので、FileMaker の DB をソースに Perl でコンテンツ生成してデプロイ、という形態だったような気が。四半世紀経って元のスタイルに戻ることになるとはなぁ…(遠い目
自分プロジェクトで 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,
ここ5年ほど週末の夜は安ワイン片手にプライムビデオという、ネイティブ・ウィズコロナな Mariyudu です。おつまみはロルフのベビーチーズが美味いでし。
さて、映画は全然詳しくないのですが、音楽成分多めだと何やら一家言めいたことが書けそうなので、今年1〜6月に観た音楽モノを備忘録的に書き留めておきます。ネタバレとかを気にしない大雑把な性格なので、その辺にナイーブな方はご注意を。
青春映画としては直球じゃないけど、ミニシアター系と括るにはオープンで小難しくない。主人公がバンドメンバーじゃなくてマネージャー兼プロデューサーってヒネリがイイですね。ハッピーになれます。
「君の瞳に恋してる」のオリジネイター、フランキー・ヴァリ＆フォー・シーズンズの伝記映画。成功者の例に漏れず、米芸能界という超モンスターなスターシステムに引き裂かれていく様がやるせないです。監督はクリント・イーストウッドなのですな。
なにせ'54年作なので寝てしまうかもと思ってたけど、昨今の作品のように凝った展開がある訳でも無いのに普通に楽しめました。戦前〜戦後という時代背景の濃さ故ですかねー。プライムのラインナップには古い映画も多いのだけど、音楽モノが意外に多いという発見も。
自分には長い間、気にはなるけどのめり込むことが出来ないビミョーな位置にいるバンド、グレイトフル・デッド。そんな彼らのドキュメンタリーを観て、バンドの成り立ちや経過、デッドヘッズ達との関係等については理解が深まった気がするけど、デッドをさらに好きになる・なろうという気持ちはやっぱり起こらなかったです。やっぱりこのバンドは不思議だ…
当初、エルトンの代表作「君の歌は〜」をそれ程良い曲だとは思ってなかったのだけど、後年にデビュー作から通して聴いた後でようやく文脈が腑に落ちたことを思い出します。という訳で複雑この上ないパーソナリティとバックボーンを背負った孤高のポップスターの半生を描いた作品なのですが、ミュージカル仕立てもそれほど濃くはなく、観やすかったです。期待していたジョン・レノンとのコラボに関しては言及なし。普通なら死後に明かされるようなスキャンダラスなあれこれが、本人生存中の大放出。やっぱり凄いスターですわ。
数十程の EC2 インスタンス群をロードバランサ(ALB)経由でサービス提供しているのですが、インスタンス管理で「あれ？ このサーバってどのサービスで使ってたんだっけ…」ってなった時に、コンソールからロードバランサのターゲットグループをひとつずつ確認するのは大変なので、AWS CLI, jq, bash を組み合わせて [ <ターゲットグループ名>, <インスタンスID>, <ポート番号> ] という構造のタブ区切りデータを出力してみた、ていう小ネタでつ。(註 : AWS-CLI は JSON 形式出力設定になっている前提です)
パイプ連結が結構長いので、ひとつずつ順を追って。まず、アカウント内の ELB ターゲットグループの一覧は describe-target-groups で得られるので、jq でフィルタリングして [ <ターゲットグループ名>, ターゲットグループARN> ] という構造のタブ区切りデータに変換するにはこんな感じ。
aws elbv2 describe-target-groups | \ jq -r '.TargetGroups[] | [.TargetGroupName, .TargetGroupArn] | @tsv'
次に、指定ターゲットグループに紐付いている EC2 インスタンスを列挙するには describe-target-health というターゲット毎のヘルスステータス表示コマンドでできそう。これを jq でフィルタリングして [ <ターゲットID>, <ポート番号> ] という構造のタブ区切りデータに変換するにはこんな感じ。
aws elbv2 describe-target-health --target-group-arn <ターゲットグループARN> | \ jq -r '.TargetHealthDescriptions[] | [.Target.Id, .Target.Port] | @tsv'
以上を組み合わせて、 [ <ターゲットグループ名>, <インスタンスID>, <ポート番号> ] という構造のタブ区切りデータを出力するようにしたのが、これ↓。シェルの箇所は読みやすいように複数行化してます。
aws elbv2 describe-target-groups | \ jq -r '.TargetGroups[] | [.TargetGroupName, .TargetGroupArn] | @tsv' | \ while read NAME ARN do aws elbv2 describe-target-health --target-group-arn $ARN | \ jq -r '.TargetHealthDescriptions[] | ["'"$NAME"'", .Target.Id, .Target.Port] | @tsv' done
文字通りのワンライナーなら、こう↓(長っ
aws elbv2 describe-target-groups | jq -r '.TargetGroups[] | [.TargetGroupName, .TargetGroupArn] | @tsv' | while read NAME ARN; do aws elbv2 describe-target-health --target-group-arn $ARN | jq -r '.TargetHealthDescriptions[] | ["'"$NAME"'", .Target.Id, .Target.Port] | @tsv' ; done
最後に grep に繋げてインスタンスIDでフィルタをかければ、どのターゲットグループで使われているのか一発です。イエーイ。
ウェブ開発も最近は Node.js 一辺倒になってしまった在宅野良ブログラマ Mariyudu です。プログラム内で URL のオリジンを参照してごにょごにょしたりすることがたまにあるんですが、curl -H "Host: my-web-develop.net" http://localhost:3000/ 的なことを Chrome にさせたいと思ったら意外に情報が無かったので、今回使ってみた ModHeader の話を。
ModHeader は HTTP ヘッダの内容を操作する Chrome 拡張機能です。つまり、上記ユースケースのように http://localhost:3000/ へのリクエストの際に任意の値をセットした Host ヘッダを付与できるということです。以下、今回行った手順です。
便利です。これで Vue.js や Express でのローカル開発はもちろん、リモートホスト開発での hosts を書き換えてテストしてたような案件もラクラクだにゃー。
AWS Amplify 上でウェブアプリ(Vue.js 製)を開発しているのですが、バックエンドの Storage API を使って S3 に保存したファイルを複製しようとして、「あれ？ StorageClass にゃコピー用メソッド無いねぇ。どうするん？」ってなった時の話です。
結果、別途 aws-sdk の S3 クライアント使えってことらしいです(当たり前か)。本件ユースケースは、マルチユーザ型(Cognito で認証・認可管理)のフォトアルバムサービスのようなサービスの開発をイメージして頂ければわかり易いかと。なので、Auth API で得たクレデンシャルを S3 クライアント生成時に与えてやるのがミソですな。Vue.js の単一ファイルコンポーネント内で処理を行う場合は、こんな感じです。
<script> import aws_exports from '@/aws-exports' import { Auth } from "aws-amplify" import AWS from 'aws-sdk' export default { (中略) methods: { // S3 上のファイル src を dst にコピーする duplicateS3File: async function (src, dst) { try { const credentials = await Auth.currentUserCredentials(); const s3 = new AWS.S3({ apiVersion: '2006-03-01', region: 'ap-northeast-1', accessKeyId: credentials['accessKeyId'], secretAccessKey: credentials['secretAccessKey'], sessionToken: credentials['sessionToken'] }) const params = { CopySource: `${aws_exports.aws_user_files_s3_bucket}/public/${src}`, Bucket: aws_exports.aws_user_files_s3_bucket, Key: `public/${dst}` } await s3.copyObject(params).promise() return true } catch (error) { return false } }, (後略) } } </script>
S3.copyObject() のパラメタは何だか分かりづらいですが、これは以前 PHP プログラムで同様のことをやって経験済みだったので悩まずに済みました。
