JavaScript

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

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

importしたSifのオブジェクトを編集できない。【Synfig Studio】

やりたいことSynfig Studioで別のsifファイルをインポートし、インポートしたファイルの中のオブジェクトを編集しようとしたときに以下のエラーが表示され編集できないことがあります。The value you are trying to edit is in a compositionwhich doesn't seem to be open. Open that composition and youshould be able to edit this value as normal.この記事ではこの問題が起きた際の対処方を紹介します。レイヤーの埋め込みsifファイルをSynfig ...
2024.11.21
Synfig Studio
Synfig Studio

Synfig StudioでInkscapeのグループ情報を引き継ぐ

やりたいこと下の記事にあるようにInkscapeでsifファイルを保存して、Synfig Studioで開くとグループの情報が失われます。しかしグループの情報がないと必要なオブジェクトを探したり操作することが難しいです。そのためこの記事ではグループ情報をSynfig Studioに引き継ぐ方法を紹介します。レイヤーの保存結論から言ってしまうとグループではなくレイヤーにすることで、Synfig Studioでレイヤーはグループとして扱われます。グループからレイヤーに変換”レイヤーとオブジェクト”タブから変換するグループを右クリックします。表示されるメニューから”グループをレイヤーに”を選択します...
2024.11.19
Synfig Studio
Inkscape

Inkscapeで円が弧（扇形）になったときの対処

やりたいことInkscapeで円を描いた後に右側のハンドルをドラッグすると下のように円（楕円）が弧（扇形）になります。厄介なことに再度ドラッグして、元に戻そうとしても横線が残ってしまいます。さらに厄介なことに円（弧）を削除し、新しい円を書いても前回の同じ弧が描かれます。そのため弧で描かれたオブジェクトを円に戻す必要があります。完全な円にする円ツールを選択した状態で、円に戻したい弧を選択します。画面上部に以下のGUIが表示されるので右端の赤い丸アイコン（シェイプを弧や扇形でなく完全な円に）をクリックします。結果弧（扇形）を切れ目のない楕円に戻すことができました。気が付くと簡単なのですが、結構な時...
2024.11.18
Inkscape
JavaScript

Teachable Machineを使って画像の判別Webアプリを作る

やりたいことgoogleのAI Modelを作成するサービスであるTeachable Machineを使ってWebアプリを作成します。この記事ではPCのカメラ撮影した画像でトレーニングを行い、PCのカメラの入力に応じて動作が変わるWebアプリを作成します。Teachable MachineでできることTeachable Machineは無料でAIのトレーニングを行いモデルを作成することができます。AIの入力になるのは画像（細かく言うと通常の画像とポーズに分かれています。）もしくは音声データで、出力は分類の確率です。（分類は２種類である必要はありません）単純な例を挙げると猫の画像100枚と犬の画...
2024.11.13
JavaScript
Phaser3

上下スペースキーの押下時にページスクロールしないようにする(Phaser3)

やりたいことPhaser3でゲームを作成した際に、上下スペースキーをキーを押下したときにページが意図せずにスクロールしてしまうことがあります。（ローカル環境でフィットするようにスケールするように設定していると気が付きにくいのですが、サーバ上にアップロードした際に広告などの影響で顕在化することがあります。）ここでは意図したスクロールを止めます。実装以下のコードを上下スペースキーを押下する必要のあるシーンに追加します。create()で呼べば問題ありません。this.input.keyboard.on('keydown-DOWN', event => { event.preventDefault(...
2024.11.09
Phaser3
nodejs

JSONデータをClientからNode.jsのサーバに渡す

やりたいことClient側のJavaScriptのJsonデータをNode.jsのサーバに渡します。実装Client側の実装Client側の実装は以下のようになります。urlは送信先のURLです。必要に応じて変更してください。objは送信するJSON（Object）です。const Http = new XMLHttpRequest();const url='送信先Http.open("POST", url);////////POSTでオープン。GETではContentsを送信できません。let obj = {number:20, aaa:"ああああ"};////送信するJSONHttp.se...
2024.11.01
nodejs
nodejs

VisualStudioCodeでNode.jsのサーバコードをデバッグする

やりたいことNode.jsでHTTPサーバを実装した際にVisualStudioCodeでデバッグします。環境Node.js　v20.16.0VisualStudioCode　1.94.2デバッグFileメニューから”Open Folder...”を選択して、プロジェクトのあるフォルダを開きます。画面左の"Run and Debug"をクリックして"Create a Launch.json file"をクリックします。画面上部に以下のプルダウンが表示されるのでNode.jsを選択します。しばらく待つと以下の内容でLaunch.jsonがプロジェクトフォルダ/.vscodeに作成されます。pro...
2024.10.31
nodejs
nodejs

Windows上のNode.jsで80ポートを使用する

やりたいこと下の記事ではNode.jsを使用してHTTPサーバを起動しました。作業するに当たりUnix系のOS上でNode.jsを使用すると８０ポートで起動できない。という記事を見かけました。しかしWindows上で80ポートが使えるかどうかは明記されていません。気になったので試してみました。環境Node.js　v20.16.0使用したコード使用したのは以下のコードです。上記の記事のポートのみを変更しています。import http from 'node:http';const server = http.createServer((req, res) => { res.writeHead(2...
2024.10.31
nodejs
nodejs

Node.jsでサーバーを立てる(module)

やりたいことNode.jsを使用してHTTPサーバーを立てます。CJS(require)ではなくESM(import)を使用した方法で実装します。環境準備Node.jsのインストール以下のリンクからNode.jsを環境にあったダウンロードしてインストールします。実装任意のフォルダを作成してserver.mjsファイルを作成します。中身は以下のようにします。import http from 'node:http';/////Serverを起動　リクエストに対してJsonを返却するconst server = http.createServer((req, res) => { res.writeH...
2024.10.31
nodejs
次のページ