oe-kashi's Introduction

oe-kashi | お絵歌詞

初音ミク「マジカルミライ 2023」プログラミング・コンテスト応募作品

歌詞で一筆書きの絵を描ける。二次創作に繋げたい。

黒いマウスストーカーの位置に歌詞が表示されます。
画面の解像度がキャンバスサイズになります。
楽曲選択のセレクトボックスから選択すると表示されている歌詞はリセットされます。

main ブランチデプロイ先: https://oe-kashi.pages.dev

推奨動作環境

PC
- Google Chrome 最新版
iOS, iPad OS
- Safari 最新版
Android
- Google Chrome 最新版

開発ビルド

Volta を使用して Node.js のバージョンを管理しています。

1. クローン

git clone https://github.com/nemuki/oe-kashi.git
cd oe-kashi

2. `.env` 作成

{YOUR_TOKEN} の部分は置き換えてください

echo 'VITE_TEXT_ALIVE_APP_API_TOKEN={YOUR_TOKEN}' > .env

3. pnpm のインストール && 依存関係インストール

volta install pnpm
pnpm install

4. 開発サーバー立ち上げ

pnpm dev

本番ビルド

開発ビルドの手順 1. ~ 3. を行った後に以下を実行してください。実行後、dist/ 内にビルドファイルが生成されます。

pnpm build

TextAlive App API

TextAlive App API は、音楽に合わせてタイミングよく歌詞が動く Web アプリケーション（リリックアプリ）を開発できる JavaScript 用のライブラリです。

TextAlive App API について詳しくは Web サイト TextAlive for Developers をご覧ください。

oe-kashi's People

Contributors

oe-kashi's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

This repository currently has no open or pending branches.

Detected dependencies

github-actions

.github/actions/prepare/action.yml

pnpm/action-setup v2

actions/setup-node v3

.github/workflows/ci.yml

actions/checkout v3

actions/checkout v3

actions/checkout v3

cloudflare/pages-action v1

actions/checkout v3

cloudflare/pages-action v1

actions/github-script v6

npm

package.json

@chakra-ui/react ^2.7.1

@emotion/react ^11.11.1

@emotion/styled ^11.11.0

@tabler/icons-react ^2.25.0

framer-motion ^10.12.21

react ^18.2.0

react-dom ^18.2.0

textalive-app-api ^0.3.2

the-new-css-reset ^1.9.0

@eslint/js ^8.45.0

@types/react ^18.2.15

@types/react-dom ^18.2.7

@vitejs/plugin-react ^4.0.3

eslint ^8.45.0

eslint-config-prettier ^8.8.0

eslint-plugin-import ^2.27.5

eslint-plugin-react ^7.32.2

prettier ^3.0.0

react-device-detect ^2.2.3

vite ^4.4.4

wrangler ^3.2.0

node 18.16.1

pnpm 8.6.7