Vite

Android（JAVA）

【有料】NodeJsで作成したWebアプリをAndroidアプリにする。

やりたいことNodeJsで作成したWebアプリをAndroidアプリにします。（サーバサイド（バックエンド）は含みません）ここでは以下のページで作成したNodeJS + Vite + Phaser 3のテンプレートで試します。すべてのJavaScriptアプリケーションの動作保証するものではありません。実装Webアプリの準備AndroidアプリにするWebアプリを用意します。上にあるようにここではNodeJS + Vite + Phaser 3の環境を作成し、以下のコマンドを実行しWebアプリを作成しました。npm run build上記の手順でdistフォルダに以下のようなファイルが作成され...
2024.10.09
Android（JAVA）
Phaser3

Vite + Phaser 3 のテンプレートで複数のHTMLを作成する

やりたいこと以下の記事で作成したVite + Phaser 3 のテンプレートで複数のHTMLをビルドの対象にします。具体的にはProjectディレクトリにあるindex.html以外のHTMLをビルド対象にして、npm run buildでビルドした際にhtmlをビルド、distフォルダにコピーされるようにします。ここではProjectディレクトリにあるindexA.htmlを追加することを例にします。設定の変更以下のファイルを開きます。vite¥config.prod.mjs以下の内容になっていると思います。import { defineConfig } from 'vite';const...
2024.10.01
Phaser3
Phaser3

Vite + Phaser 3 + VisualStudioCodeの開発環境を作成する

やりたいことPhaser 3(Javascriptの２Dゲームエンジン)を使用するViteの環境を作成します。Viteが動作する環境(Node.jsなど)はインストール済みの前提です。テンプレートの使用ありがたいことにPhaser 3を使用するViteのテンプレートが用意されていますので使用します。テンプレートの取得テンプレートを以下のどちらかの方法で取得します。リポジトリからクローン以下のリンクからクローンします。(クローンってなに？という方は下のzipのダウンロードをお試しください)クローンが終わったらプロジェクトのフォルダに.gitフォルダ以外をコピーします。Zipでダウンロード以下のペ...
2024.08.10
Phaser3
JavaScript

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

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