カテゴリー: Developments

https://learn.microsoft.com/ja-jp/azure/spring-apps/quickstart-deploy-restful-api-app

テスト

実際にデプロイしたURLがこれ。
https://deploy-test-simple-todo-api.azuremicroservices.io/swagger-ui/index.html （※削除済）

便利なようで便利じゃないやつ多すぎて草。

Raspberry Pi がいいね。

https://learn.microsoft.com/ja-jp/azure/spring-apps/quickstart-deploy-web-app

テスト

実際にデプロイしたURLがこれ。
https://deploy-test-simple-todo-web.azuremicroservices.io/ （※削除済）

サンプルアプリひどい。リロードすると画面がw

Azure Spring Apps と Azure Database for PostgreSQL が高すぎて草。期間限定の無料クレジット200ドルがなければやってみることもしないだろうなぁ…

Raspberry Pi がいいね。

Azure Static Web Apps

ひげおやじ物語
https://static-web.kozawa.tokyo/ ※削除済

無料枠でAzure DevOpsのパイプラインからAzure Static Web Appsにデプロイしようとすると以下のエラーとなる。

[error]No hosted parallelism has been purchased or granted. To request a free parallelism grant, please fill out the following form https://aka.ms/azpipelines-parallelism-request

エラーメッセージのURLからリクエストを投げても音沙汰なし。

「Please consider that it could take 2-3 business days to proceed the request. We are working on improving this process at the moment. Sorry for the inconvenience.」

と書かれているけれど1週間経過しても権限付与してもらえない。

Azure DevOpsは諦めてGitHubのリポジトリからデプロイした。SSHキーの生成や設定が必要になった。

Azure Blob Storage

ひげおやじ物語
https://blob-storage.kozawa.tokyo/ ※削除済

Azure Blob Storageの静的Webサイトでカスタムドメインを使用する場合は、「Front Door と CDN」でドメインを認証してプライベートエンドポイント接続してやらないとhttpsでアクセスができない。めんどくさい作業が発生した。

カスタム ドメインを Azure Blob Storage エンドポイントにマップする
https://learn.microsoft.com/ja-jp/azure/storage/blobs/storage-custom-domain-name

ホスティング環境

Static Web Apps、Blob Storage、どちらも画面ポチポチでサーバ証明書を生成してくれるのは便利だけど、初めてやってみると何かしら引っかかるやん。しかも、Front Door、Storage、Networkで課金が発生している。Front Door高いな。結局、無料枠だけでは難しい気がする。

Raspberry Pi がいいね。

備忘：

SVGファイルでテキスト1文字を綺麗に回転させることはできない。Androidで描画が欠落することを確認した。Windowsは知らん。テキストだけで完結したいけど無理そう…

<svg version="1.1"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	height="50px"
	width="50px"
	viewBox="0 0 50 50">
	<style>
		#typhoon {
			dominant-baseline: text-before-edge;
			font-size: xxx-large;
		}
	</style>
	<animateTransform
		xlink:href="#typhoon"
		attributeName="transform"
		type="rotate"
		from="0 25 25"
		to="360 25 25"
		dur="5s"
		repeatCount="indefinite"
	/>
	<text id="typhoon">🌀</text>
</svg>

「🌀」という1文字の回転中心座標を正確に指定することは、環境やフォントによって異なるため、困難です。JSを使用するとSVGファイルをimgタグで埋め込むことができなくなります。さらに、SVGファイル内ではCSS／@keyframesが正常に動作しないことがあります。

この問題に対する直接的な解決策は限られているようですが、一般的なアプローチとしては、素直に画像を回転させる方法が考えられます。回転したいテキストやシンボルを画像として作成し、必要な角度で回転させることで、一貫した表示が可能です。

また、回転が必要なテキストやシンボルを固定された角度で使用する場合、事前に回転済みの画像を用意しておくことも考えられます。

状況によって最適な方法が異なるかもしれませんが、回転の正確さやクロスブラウザの互換性を考慮しながら、適切な方法を選択することが重要です。

	<text
		id="typhoon"
		x="50%"
		y="50%"
		text-anchor="middle"
		dominant-baseline="central"
	>🌀</text>

テキストの中心座標を求めるのではなく、テキストを上下左右中央に揃えても、結局固定値のハードコーディングが残存してしまい、フォントサイズが変わると描画が欠落する可能性が考えられます。

むずかしいなあ…

常識の範囲内で、自由につかってください（2回目）

備忘：

常識の範囲内で、自由につかってください①
https://twitter.com/JP_GHIBLI/status/1685606160580198400
常識の範囲内で、自由につかってください②
https://twitter.com/JP_GHIBLI/status/1685606411752108033
常識の範囲内で、自由につかってください③
https://twitter.com/JP_GHIBLI/status/1685606915164749824

Aは、「常識の範囲内で、自由につかってください③」ツイートに添付されていたオリジナルファイル。Bは、Aをファイル変換サイトで変換したファイル。Cは、「常識の範囲内で、自由につかってください①②」に添付されている画像ファイルから作成したファイル。背景透過済み。クリックイベントを実装済み。マウスポインターが矢印のままだ今気づいた。軽微な不備1。

SVGファイルにはCSS/JSを内包できる。ページ内に同じSVGファイルを複数配置してもidの重複などは発生しない。JSのグローバル領域が汚染されることもない。画像として表示する場合は、普通に<img>タグが使えるが、JSを実行する場合は、<object>タグで埋め込む必要がある。