html

Phaser3

Domオブジェクトを使うまとめ(Phaser3)

やりたいことPhaser3上にHTMLのタグ(DOM)を配置するDomオブジェクトを使用すると、他のGameObjectとは使用方法が異なったため使用方法と注意点をまとめます。使用方法準備DOMオブジェクトを使用するには以下のコンフィグをセットする必要があります。 dom :{ createContainer: true },例えば以下のようにConfigを作成してセットします。const config = { type: Phaser.AUTO, width: 300, height: 200, parent: 'game-container', backgroundColor: '#000...
2024.12.25
Phaser3
JavaScript

【対策コードあり】ローカルファイルをCanvasに表示する

やりたいことローカルの画像ファイルをHTMLのCanvasに表示します。検索するといくつか引っかかるのですが、試してみたところ動作しませんでした。（エラーなどは出力されずCanvasになにも表示されませんでした。）環境Chrome：131.0.6778.86試したコードHTML<input type="file" id="file" accept="image/png, image/jpeg"></div><canvas id="canvas"></canvas>JavaScriptdocument.getElementById("file").onchange = (event) => { ...
2024.11.27
JavaScript
JavaScript

Xにポストするボタンをウェブサイトに載せる

やりたいことウェブサイトにX（旧ツイッター）にハッシュタグ付きのポスト（ツイート）するためのボタンを配置します。コードの取得以下のサイトにアクセスします。”A Hashtag, like #whatsHappeing”を選択します。選択を行うと、ページ下にスクロールしますがいったんページ上部にスクロールして戻ります。上で”A Hashtag, like #whatsHappeing”を選択したエディットボックスが以下のようになっているので、ポストしたいハッシュタグに変更します。入力後に忘れずにリターンをしてください。コードが更新されません。ページ下にスクロールします。必要に応じて”set cu...
2024.11.26
JavaScript
electron

Electronを使ってWebページからWindowsの実行ファイルを作る

やりたいこと下のElectronを使ってWindows向けのアプリケーションを作成します。electronとはelectronはJavaScript/HTML/CSSで作成したWebページから実行ファイルを作成します。Windows/MAC/Linux向けの実行ファイルが作成できますが、ここではWindows向けの実行ファイルを作成します。詳細は以下の公式ページ。プロジェクトの作成事前準備Node.jsが必要です。以下のリンクから環境にあったNode.jsをインストールします。プロジェクトの作成任意の作業フォルダを作成して以下のコマンドを実行します。npm init -yElectronでの実...
2024.08.24
electron
JavaScript

Visual studio codeからローカルサーバーを起動する

やりたいことVisual studio codeからローカルサーバーを起動、HTMLの確認を行いたい。なぜ必要なのか？ローカルで作成したHTMLファイルをchromeなどのブラウザで表示することで、動作確認を行うことができます。しかし一部の機能はローカルファイルからは実行することはできません。そのためローカルにHTTPサーバーを起動し作成したHTMLファイルをサーバー上のファイルとしてブラウザから読広必要があります。例えばmoduleのjava scriptをローカルのHTMLから読み込もうとした場合、以下のようなエラーが表示され、動作しません。（Chromeの起動パラメータで動作するようにで...
2024.05.06
JavaScript
WEB

Youtubeの動画をwebページに埋め込む２つの方法

やりたいことYoutubeの動画をwebページに埋め込む２つの方法を紹介します。iframeにSrcで動画を指定する方法一つ目の方法はiframeにSrcで動画を指定することです。通常Youtubeの動画埋め込みはこちらを指します。埋め込み方法コードの動画から取得Youtubeの動画を右クリックして表示されるメニューから”埋め込みコードをコピー”を選択することでHTMLのコードを取得することができます。以下のようなコードが得られます。<iframe width="1033" height="581" src="" title="不居実まるの初動画" frameborder="0" allow=...
2023.07.08
WEB
JavaScript

canvasタグのサイズ設定方法と動作の違い(JavaScript)

やりたいことcanvasタグは2つの方法でサイズを指定でき見た目は同じが、JavaScriptで扱う際に動作が異なるので確認します。環境Chrome：　113.0.5672.127Canvasのサイズ設定方法CanvasのサイズはattributeとStyleで設定できます。下のように表示の結果は同様です。attribute(canvasタグ内)での設定<canvas width=200 height=200></canvas>上記のhtmlで200x200のCanvasが下のように描画できます。(領域がわかりやすいように背景を灰色にしています。)Styleでの設定<canvas style=...
2023.05.20
JavaScript
ツール

htmlタグをブラウザに表示させるための文字変換を行うツール

やりたいことwebサイトにhtmlタグを表示させるためには、<と>を別の文字列に置換する必要があります。（文中にあるとタグと判断されるため）htmlの書き方などを説明する際には、何度も作業をする必要があり手間なので自動化のツールを作成しました。ツール上のテキストボックスに変換する文字列を入力しCONVERTボタンをクリックします。変換された文字列は下のテキストボックスに表示されます。 function convertStr() { let input_str = document.getElementById('input_text').value; let output_str =input...
2023.05.20
ツール