AWS CloudFrontでS3データを配信しているときに、S3のデータを更新してもすぐに適応されないときが合った
起こったこと
S3バケットとCloudFrontを連携し、静的なコンテンツを特定のドメインから提供するパターンがある。
このS3バケットのコンテンツの更新をしても、CloudFrontから見るデータが更新されていないときがあった
CloudFrontのキャッシュを削除する
CloudFrontのページに飛び以下の設定を行う
- ディストリビューションを選択
- キャッシュ削除を作成
- 対応するファイルのパスを指定
- キャッシュ削除を作成
- ステータスが完了になったら完了
百分は一見に如かず
今のマンションにはオートロックをそのまま開けた状態にしている人がいる。しかもこのマンションではそういう人は多いみたいだ。
このマンションは防犯によい物件かとおもったのだが、結局のところ、一部の住民によってそれがなされていない。僕と同じように、防犯性を理由に借りようと思った人がいたとしたら、納得行かなかったことだろう。
こういうのは事前に知れると良いのだけど、どうやってそれを知れるのだろうか。
僕が今住んでいる このマンションの地域は治安が悪いというネットの口コミはなかったし 、むしろ平和と書かれていることが多かった。
ただ住んでみていろんなマナー違反や不法行為 など を目にすることが多かった。
自分に関することについてはさすがに 管理会社に報告をした。ただ、報告するたびに新しい事象が出てきて私と妻ともども疲れ切ってしまった。
思うに、この町の住民にはそういったことが普通のことのようなのだ。
だから オートロックを開けっぱなしにしても、特に気にも留めないようだ。
おそらく、多様性の観点から、この価値観は決して誤りではない。
僕が言いたいことは、口コミだけを信じて町の治安を測ろうと思ってはいけない、ということだ。
playwrightで複数newPageを開く試験において、newPageをcloseしたら動作が早くなった
起こったこと
playwrightの速度を早くしたい。
表題の通りだが、newPageをclose
したら早くなった
コード
test("test", async ({ page, context }) => { const list = ["ここをクリック", "ここもクリック", "あそこもクリック"] for (let text of list ) { const [newPage] = await Promise.all([ page.waitForEvent("popup"), page.getByText(text).click() ]); await expect(newPage).toHaveUrl("/test"); await newPage.close(); } });
新規ページを開きまくるというテストというのがそもそも微妙なのかもしれない・・・
phaser3でSpriteに自前のサブクラスのSceneを渡したい
version
"phaser": "^3.60.0"
起こったこと
Phaser.Sceneを継承したサブクラスのGameScene
がある。
これをSpriteのコンストラクタで渡したいときに行った方法は以下の通り
export class GameScene extends Phaser.Scene { // 省略 } export class BaseEnemy extends Phaser.Physics.Arcade.Sprite { public declare scene: GameScene; // ここを追加 constructor(scene: GameScene, x: number, y: number, textureId: string) { super(scene, x, y, textureId); this.scene = scene; // ここを追加 } }
mermaidでフローチャート図を触る
mermaidとは
マークダウンっぽい言語で図表を表示できる。
シーケンス図やクラス図などを作れる。今回はフローチャート図を作ってみる。
このように書く
sequenceDiagram actor player as プレイヤー participant main as ゲーム画面 participant game as ゲーム制御プログラム participant enemyData as 敵パラメータ player ->> main: ゲーム開始ボタンを押す main ->> game: ゲームプログラムロード game --) enemyData: AJAXでデータロード game ->> main: ゲームロード終了通知 main ->> player: ゲーム画面提供
このように書くと以下のような表が生成される。
mermaidは人やオブジェクトを宣言するフェーズと人とオブジェクトを矢印で結ぶフェーズで別れる。
最初の部分が人、オブジェクトを宣言するフェーズ
actor player as プレイヤー participant main as ゲーム画面 participant game as ゲーム制御プログラム participant enemyData as 敵パラメータ
これがオブジェクトを結ぶフェーズ
player ->> main: ゲーム開始ボタンを押す main ->> game: ゲームプログラムロード game --) enemyData: AJAXでデータロード game ->> main: ゲームロード終了通知 main ->> player: ゲーム画面提供
詳しい書き方はドキュメントを参考にしてください。
vscordで書く場合
PlayWrightのDEBUGモード
PlayWrightにisMobileがあった
Version情報
"@playwright/test": "^1.34.0" "parcel-bundler": "^1.12.5", "typescript": "^5.0.4"
起こったこと
PCとスマホで要素が異なるサイトをE2Eテストしたい。
PlayWrightでスマホ版を動かさないといけない。
そんな中、PlayWrightのテスト内パラメータに「isMobile」があるということがわかった。
ドキュメント
こんな感じ
ページはスマホビューだとお知らせ(スマホ)
、PCビューだとお知らせ(PC)
と表示されるとする。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .element { display: none; } @media (max-width: 767px) { .element-sp { display: block; } } @media (min-width: 768px) { .element-pc { display: block; } } </style> <title>Document</title> </head> <body> <div class="element element-pc">お知らせ(PC)</div> <div class="element element-sp">お知らせ(スマホ)</div> </body> </html>
Playwrightコンフィグでモバイルのエミュレータの設定を行う
... projects: [ { name: "chromium", use: { ...devices["Desktop Chrome"], }, }, { name: "Mobile Chrome", // この辺り use: { ...devices["Pixel 5"], }, }, ], ...
テストコードはこのような感じ
import { test, expect, Page } from "@playwright/test"; test.beforeEach(async ({ page }) => { await page.goto("/sp.html"); }); test("お知らせのテスト", async ({ page, isMobile }) => { // isMobileを使用する if (isMobile) { const notice = page.locator(".element-sp"); await expect(notice).toHaveText("お知らせ(スマホ)"); } else { const notice = page.locator(".element-pc"); await expect(notice).toHaveText("お知らせ(PC)"); } });
ページオブジェクトモデルの場合、コンストラクタにisMobileのパラメータを渡すとよいのかもしれない