日記_20240310

Shock_Pan

腰痛がヤバい！という感じの週末だった。

DJイベント周りの連絡や、普段使いしている開発コンテナの整備、Nuxtのつまみ食い、FCMとの格闘などをした。

ゆるくV楽曲を楽しむイベント"ぶいっぱい"のPart.3いよいよ来週です。（宣伝）

トリ前の終わらせ過ぎない塩梅、頑張りましょう。
僕が聴いて欲しい曲をモリモリ流します。


もう一個ドデカいお知らせが。

来月も楽しくなりそう。


普段からお世話になっているVSCodeのdevcontainersの設定をｺﾈｺﾈした。
コンテナは立ち上がってるけどpostCreateCommandで走らせてるシェルの実行が終わらないと触れない、という状態が微妙に感じたので、postCreateCommandに書いていた内容のうち、ホストからのマウントを待つ必要が無い処理をDockerfile側に寄せた。
また、どうせ使うであろうaws-cliとgit-remote-codecommit(そのためのインストールのためのpip3)のインストールもこれを機に追加した。
ついでに今まで使っていなかったpostAttachCommandを利用し、コンテナの中に入った際にgitのユーザ名とメールアドレス、そのコンテナのawsのデフォルトプロファイルからawsアカウントIDの出力を行うことにした。
AWSのアカウントIDはプロファイルから直では引っ張れないので、一旦IAMのユーザ情報を取得→ARNのアカウントID部分を抽出、という形を取った。sedの練習の一環で下8桁をマスクしてみた。
gitのユーザ情報はどうせコミットログに残る都合でマスクする意味も薄いと思い、そのまま出力することにした。

#!/bin/bash
aws iam list-users --max-items=1 --query="Users[0].Arn" | \
sed -E "s/.*iam::([0-9]{4})([0-9]{8})\:user.*/AWSアカウントID: \1-****-****/"

echo git config user.name: `git config user.name`
echo git config user.email: `git config user.email`

シェルスクリプトを書いてウキウキでコンテナに入ったら実行権限を付け忘れて一敗。詰めが甘い。


Nuxtをつまみ食いしてみた結果、オートインポートとファイルシステムベースのルーティングのありがたみを強く感じた。前者に関しては依存関係が追いづらくなる点が気になっていたが、vscode / Vue拡張(旧Volar) / Language server辺りが頑張ってくれているようで、全ての参照が確認可能だった。

デフォルトでショートカットキーが割り当てられるのイイネ！

余談ですがvscodeで開発する時の推奨設定に変更がありましたね。


Nuxtを触ってみて一つ躓いたのが、デフォルトでSSRが有効になっている点だった。
これによってサービスワーカーの登録など、ブラウザ上でないと利用できないAPIに依存する処理がSSR時(＝Node上)で実行されないように制御する必要が出てきた。
今までCSRしか行っていなかったため特別意識せずにいたが、今後は気を付けていこうと思う。
他にも、SSR時とCSR時とで仮想DOMの内容の不整合(Hydration mismatch)を起こさないようにというところも意識する必要がありそう。
ちょっとコアな気もするけど、Web APIからのデータフェッチを行う場合CSRとSSRでオリジンの有無が異なる、みたいなことも考えた方がいいのかな。


FCMに関しては、思ったよりもSDKが頑張ってくれていた。
具体的にはサービスワーカーの登録とプッシュ通知の許可リクエスト、プッシュ通知の受信時のハンドラの登録もやってくれていた。大感謝。
そうとは知らずに自分で色々書いて苦戦していたことを思うと、Web APIの公開だけでなく、クライアント用のSDKも出してくれているのは本当にありがたいですね。

getToken(messaging, options)

Subscribes the Messaging instance to push notifications. Returns a Firebase Cloud Messaging registration token that can be used to send push messages to that Messaging instance.If notification permission isn't already granted, this method asks the user for permission. The returned promise rejects if the user does not allow the app to show notifications.

https://firebase.google.com/docs/reference/js/messaging_

getToken(messaging, options)

options
GetTokenOptions

Provides an optional vapid key and an optional service worker registration.

https://firebase.google.com/docs/reference/js/messaging_.md#gettoken_b538f38

ドキュメントをちゃんと読み込むと、サービスワーカーのファイル名や配置先の指定があるのはデフォルトの設定がそうなっているというだけで、オプションからいじれるとのことだった。
また一つ仲良くなれた。

GetTokenOptions interface
serviceWorkerRegistration

ServiceWorkerRegistrationThe service worker registration for receiving push messaging. If the registration is not provided explicitly, you need to have a firebase-messaging-sw.js at your root location. See Access the registration token for more details.

https://firebase.google.com/docs/reference/js/messaging_.gettokenoptions.md


ところでコードとかドキュメントの引用が多いと字数が膨れてびっくりしちゃうな。二日分まとめて書いてるせいもあるか。
にしても3000字はビビる。


私を纏う / 幸祜

タイトルに一目惚れしたら楽曲としてもめちゃくちゃ好みでウハウハに。神椿もっとしっかり追って行った方が楽しそうだ。
どうやらゲームの主題歌らしい。纏う、制服、なるほど。
音源販売はアルバム待ちかなぁ。

いやしかしかっこいいな。


この記事が気に入ったらサポートをしてみませんか？