JavaScript

Viteのプロジェクトを作成するBat

注意この記事は古く、Viteのプロジェクトの構成が現在と異なります。以下の記事を参照してViteのそのものの仕組みでプロジェクトを作成することをお勧めします。やりたいこと以下のページでViteのプロジェクトを作成してみましたが手動で行うことが多いので、自動化する。batによるプロジェクト作成フォルダの作成プロジェクトに使用するフォルダを作成します。今回は以下のフォルダを作成しました。F:\TS\Vite_autobatの作成作成したフォルダにCreateViteProject.batファイルを作成します。作成したCreateViteProject.batに以下の内容をペーストして保存します。c...
2024.08.09
JavaScript
git

[batあり]git がgit config –global –add safe.directoryしろと言ってきたときのbat

やりたいことgitのリポジトリをCloneした直後などにgitから以下のメッセージが表示されPullなどができないことがあります。Could not open repository.libgit2 returned: repository path 'X:\XXXX' is not owned by current userTo add an exception for this directory call:git config --global --add safe.directory 'X:\XXXX'表示されたコマンドを少し変えて実行すればいいのですが、めんどくさいしルールもすぐ忘れる...
2024.08.08
git
JavaScript

WebPackが難しいのでViteでバンドル

やりたいことVite(ヴィート)でバンドルをします。バンドルとは複数のJavaScriptファイルを一つのJavaScriptファイルにまとめることです。webpackが有名ですが、設定が難しく、また開発が終了しているためViteを使用してみます。環境node.js: v20.16.0Vite: 5.3.4プロジェクトの作成任意のプロジェクトのフォルダを作成して以下のコマンドを実行します。npm init vite@latest以下のように聞かれたらｙを入力してエンターを入力します。Need to install the following packages:create-vite@5.4.0...
2024.08.07
JavaScript
Phaser3

Phaser3のチュートリアルコードの実行と日本語コメント

やりたいこと２Dゲームの作成エンジンであるPhaser3のチュートリアルゲームを実行します。また元が英語なので可能な限り日本語のコメントを残します。チュートリアルゲームの実行ソースコードのダウンロード以下のページからソースコード(phaser3-tutorial-src.zip)をダウンロードします。少しわかりにくいですが、Requiementsの章に”Download this zip file”のリンクがあります。ソースコードの実行phaser3-tutorial-src.zipを任意の場所に展開します。ここではVisual Studio CodeのLive Serverを使用して起動しま...
2024.08.04
Phaser3
Synfig Studio

Synfig StudioでSVGを読み込む

やりたいことInkscapeなどで作成したSVGをSynfig StudioでSVGを読み込みたい。なぜ必要なのか？Synfig Studioにはメニュー　ファイル　→　インポートからSVGファイルがインポートできます。しかし以下のようにSynfig Studioでは境界線（ほかにも曲線、Z orderなど）が正しく読み込めません。Inkscape上の表示Edge上の表示Synfig Studio上の表示この記事で紹介する方法で、見た目はInkscapeとSynfig Studioで近くなります。しかし以下の情報は復元できません。-　グラデーションまたグループ化の情報は失われます。グループ情報...
2024.07.15
Synfig Studio
JavaScript

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

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

Visual Studio CodeをTypeScriptの開発環境にする手順

やりたいことVisul Studio Codeを用いてTypeScript（TS）による開発を行う。(無料でTSのGUI付きの開発環境を作成する)環境OS : Windows11Visual Studio Code：1.88.1Node.js : 20.12.2環境構築まずは開発環境を構築するためにツール類をインストールします。Visual Studio Codeのインストール以下のリンクからVisual Studio Codeを環境にあったダウンロードしてインストールします。（多くPCの場合はUser Installのx64で問題ないと思います。）Node.jsのインストール以下のリンクから...
2024.05.05
TypeScriptUncategorized
Blender

タイムラインの再生で音楽/音声と画像の同期をとる(Blender)

やりたいこと音楽/音声に合わせて３Dモデルを動かしたい場合、タイムラインの再生で音を聞きながらキーフレームを作成すると思います。しかしPCのスペックが十分でなかったりFPSが高い場合など音とプレビューの同期がとれません。同期がとれていないと正しいタイミングでキーフレームを作成できないので対応を行います。環境Blender：3.4.1シンクの設定タイムラインを開き再生メニューを開きます。一番上のシンクを”音声に同期”に変更します。（初期値は毎フレーム再生です）結果タイムラインで再生を行った際、３Dビューポートと音声が同期されるようになりました。ただし一部の３Dはレンダリングされないため、必要な場...
2024.02.11
Blender
Blender

陰をスムーズにする(Blender)

やりたいことオブジェクトの陰（シェード）をスムーズにして自然に見せます。環境Blender：3.4.1スムーズシェードの使用画面左上からオブジェクトモードに変更します。対象のオブジェクトをクリックし選択状態にします。右クリックしスムーズシェードを選択します。変更前の通常のシェードに戻すには同様に対象オブジェクトを選択状態で右クリックからフラットシェードを選択します。結果変更前変更後変更前後で比べると変更後ではエッジが目立たずに自然に見えるようになりました。補足設定の影響範囲スムーズシェード/フラットシェードはオブジェクト毎に設定できます。そのため下のようにスムーズシェード/フラットシェードの異...
2024.01.03
Blender
JavaScript

JavaScriptでサーバー上かローカルでの実行か知る

やりたいことJavascriptでサーバ上で実行されているかローカルで実行しているのか確認します。（ローカルではテストコードを動かし、サーバ上では本番のコードを動かすときなどに使用しています）プロトコルによる確認URLのプロトコルパートで確認できます。ローカルで動作するときはURLのプロトコルは”file:”、サーバ上で動作する場合は”http:”もしくは”https:"です。そのため以下のようなコードで確認することができます。 if (location.protocol == "file:") { //////ローカルで実行} else { //////サーバ上で実行}結果Javascrip...
2024.01.02
JavaScript
次のページ