HTML

【代替あり】-webkit-text-strokeの動作があやしい（テキストに境界線を描く）

やりたいことHTMLで文字に縁取りを行うには-webkit-text-strokeというStyleが用意されています。（-webkitとついていますが、FireFoxやSafariでも動作するそうです。FireFoxでは動作確認済み。）しかし、実際に使ってみると動作が怪しいので実際の動きの確認と代替案を紹介します。簡単な使用方法基本的な使用方法は以下の通りです。-webkit-text-stroke: 幅 色;例：-webkit-text-stroke: 1px red;動作確認以下のHTMLの動作を見ます。<p style="font-family: system-ui;font-size:...
2025.05.07
HTML
WEB

各種SNSなどのリンク用アイコンのダウンロード元

やりたいことWebページを作成時などにXなどのリンクを張ることが多いです。その際に使用するアイコンや規約の場所をまとめました。リンクXYoutubeFacebookLINEPatreon
2025.04.30
WEB
JavaScript

【有料】Canvasタグに表示されている画像をPHPでサーバに保存する。

やりたいことHTMLのCanvasタグに表示されている画像をPHPでサーバに送信してサーバに保存します。懐かしのお絵描き掲示板の実装などにどうぞ。実装クライアント（Javascript）側Javascript側では以下のように実装します。HTMLにはIDが”test_canvas”のcanvasタグがある前提です。送信先はupload.phpです。const canvas = document.getElementById("test_canvas")let msg_body = { acceptImage: canvas.toDataURL("image/png")}fetch('uploa...
2025.04.29
JavaScript
AI

CUDAなし環境（CPU）でローカルのStable Diffusion ForgeでFlux.1を動作させる

やりたいこと通常Stable Diffusion ForgeはNvidiaのGPU（GeForceなど）が必要です。下の記事ではAMDのGPU（direct-ml）を使用してStable Diffusion Forgeを使用する方法を紹介しました。しかし記事にも書いた通り上の記事の環境ではFlux.1は動作しません。この記事ではGPUを使用せずにCPUで実行することでCUDAのない環境でFlux.1を動作する方法を紹介します。CPUで実行するため、実行はかなり遅いです。（私の環境で１枚20分ぐらい）Flux.1は作成した画像も含めて商用利用不可です。環境構築ダウンロード以下のページを開きます。...
2025.04.29
AI
JavaScript

JavaScriptでユニークな文字列（UUID）を作成する。

やりたいことJavaScriptでユニークな文字列（UUID）を作成します。具体例Classのにユニークな文字列を持たせてポインタの代わりにインスタンスの確認に用います。実装ユニークな文字列（UUID）は以下の１行で作成できます。（呼び出し毎に異なる文字列を返します）const uuid = self.crypto.randomUUID();返り値は'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'のフォーマットです。（例：'d6436922-c138-4ef3-bab6-5de2546f847e'）資料を読んだのですが、どのようにユニークを保っているのかわかりません...
2025.04.23
JavaScript
Windows

【回避策】Windowsでプリントスクリーンができない

やりたいこと以前はできたと思うのですが、現在Windows11でプリントスクリーンが行えないことがあります。一時的な不具合の可能性もありますが、回避策が分かったので残しておきます。現象限定的な状況下でWindowsのプリントスクリーンが動作しないPrintScreen、　Alt+PrintScreen、　Win+Shit+S、　Snipping Toolすべてでうまくいかない。通常（デスクトップのみ表示やアプリを起動した直後など）では問題なくプリントスクリーンが行える。問題の発生条件エクスプローラで右クリックしてメニューを表示した状態でプリントスクリーン。クロームで右クリックメニューを表示した...
2025.04.17
Windows
git

TortoiseGitでファイル名変更と履歴の確認

やりたいことTortoiseGitで管理しているファイルを単純にファイル名を変更（元ファイルを削除→変更後のファイルを作成）すると変更前後の関係が失われて管理しにくくなります。この記事ではTortoiseGitではファイル名を変更する方法と、ファイル名変更前のファイルの履歴の確認方法を紹介します。ファイル名の変更ファイル名を変更したいファイルを右クリックします。”その他のオプションを確認”をクリックします。OSや設定により上のメニューではなく下のメニューが表示されることがあります。メニューが再表示されるので”TortoiseGit”→”Rename...”以下のダイアログが表示されるので変更後...
2025.04.17
git
Uncategorized

寄付用ページ

このページはMaruno Games(寄付用のページです。This is page to donate for Maruno Games(良ければご支援をお願いします。If you can, please support us.Patreonもやっております。こちらからのサポートもご検討ください。（β版へのアクセス、広告なしゲームへのアクセス、クレジットへのお名前の記載などの特典があります。）　We also have a Patreon account. Please consider supporting us through Patreon. (You will receive bene...
2025.04.15
Uncategorized
JavaScript

【有料】SVGをJavaScriptでインラインにする

やりたいことSVGファイルをJavaScriptで操作するにはSVGファイルをHTMLに埋め込む（インラインにする）必要があります。しかしSVGファイルを更新した際に毎回、HTMLを更新するのは手間であり、ミスを誘発します。ここではJavaScriptでSVGファイルを読み込み、HTMLに埋め込む方法を紹介します。具体例以下のHTMLファイルにSVGをインラインで埋め込みます。<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wid...
2025.04.15
JavaScript
JavaScript

【有料】ViteでGeminiの画像生成

やりたいことGoogleの生成AIであるGeminiをNodeJSで使用して、画像生成を行います。実装はフロントエンドのみでバックエンドはGoogleにあるGeminiを使用します。GoogleのAPIキーを発行する必要があります。注意：この記事を書いて時点でGeminiの画像生成はプレビュー機能です。今後仕様等変更になる可能性があります。この記事ではNodeJSを用いてクライアントサイドでの実装を行っています。しかしこの方法はAPI KEYが使用者に漏れる可能性がありますのでGoogleから推奨されていません。個人的な使用や、実験にとどめてください。環境Vite：6.2.0@google/g...
2025.04.15
JavaScript
次のページ