Skip to content

teardrop-tech/mikuban

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

177 Commits

.github/workflows

.github/workflows

ย 
ย 

.vscode

.vscode

ย 
ย 

public

public

ย 
ย 

src

src

ย 
ย 

.editorconfig

.editorconfig

ย 
ย 

.env.sample

.env.sample

ย 
ย 

.eslintignore

.eslintignore

ย 
ย 

.eslintrc.yml

.eslintrc.yml

ย 
ย 

.gitignore

.gitignore

ย 
ย 

.prettierignore

.prettierignore

ย 
ย 

README.md

README.md

ย 
ย 

index.html

index.html

ย 
ย 

package-lock.json

package-lock.json

ย 
ย 

package.json

package.json

ย 
ย 

tsconfig.json

tsconfig.json

ย 
ย 

webpack.config.js

webpack.config.js

ย 
ย 

Repository files navigation

ใฟใใฐใ‚“ - Mikuban GitHub Actions Status Netlify Status

ๅˆ้ŸณใƒŸใ‚ฏ + ใ“ใใฐใ‚“

Hatsune Miku & Kokuban (Blackboard) Application

sample

Demo

https://mikuban.netlify.app

๐Ÿ“ท QR Code 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆ
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆ
โ–ˆโ–ˆโ–ˆโ–ˆ โ–„โ–„โ–„โ–„โ–„ โ–ˆโ–€โ–ˆ โ–ˆโ–„โ–ˆโ–€โ–€โ–„โ–ˆ โ–„โ–„โ–„โ–„โ–„ โ–ˆโ–ˆโ–ˆโ–ˆ
โ–ˆโ–ˆโ–ˆโ–ˆ โ–ˆ   โ–ˆ โ–ˆโ–€โ–€โ–€โ–ˆ โ–€ โ–ˆโ–„โ–ˆ โ–ˆ   โ–ˆ โ–ˆโ–ˆโ–ˆโ–ˆ
โ–ˆโ–ˆโ–ˆโ–ˆ โ–ˆโ–„โ–„โ–„โ–ˆ โ–ˆโ–€ โ–ˆโ–€โ–€โ–ˆ โ–€โ–„โ–ˆ โ–ˆโ–„โ–„โ–„โ–ˆ โ–ˆโ–ˆโ–ˆโ–ˆ
โ–ˆโ–ˆโ–ˆโ–ˆโ–„โ–„โ–„โ–„โ–„โ–„โ–„โ–ˆโ–„โ–€ โ–€โ–„โ–ˆโ–„โ–ˆ โ–ˆโ–„โ–„โ–„โ–„โ–„โ–„โ–„โ–ˆโ–ˆโ–ˆโ–ˆ
โ–ˆโ–ˆโ–ˆโ–ˆ โ–„  โ–„โ–€โ–„  โ–„โ–€โ–„  โ–„โ–ˆโ–ˆโ–„โ–ˆ โ–ˆโ–„โ–ˆ โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆ
โ–ˆโ–ˆโ–ˆโ–ˆโ–„โ–ˆโ–ˆโ–€โ–€โ–„โ–„โ–„โ–€โ–ˆโ–„โ–ˆ โ–ˆโ–„โ–„โ–€โ–€โ–€ โ–€โ–„โ–ˆโ–„ โ–ˆโ–ˆโ–ˆโ–ˆ
โ–ˆโ–ˆโ–ˆโ–ˆ โ–„โ–€  โ–€โ–„ โ–„ โ–„โ–€โ–ˆ โ–„โ–ˆโ–€โ–„โ–„โ–€โ–„โ–€โ–„ โ–„โ–ˆโ–ˆโ–ˆโ–ˆ
โ–ˆโ–ˆโ–ˆโ–ˆ โ–ˆ  โ–„โ–€โ–„โ–„โ–„  โ–ˆ โ–ˆโ–€ โ–„โ–€โ–ˆ  โ–„โ–ˆโ–„ โ–ˆโ–ˆโ–ˆโ–ˆ
โ–ˆโ–ˆโ–ˆโ–ˆโ–„โ–ˆโ–ˆโ–ˆโ–„โ–„โ–„โ–„โ–€โ–€โ–€โ–€โ–ˆโ–„โ–„  โ–„โ–„โ–„ โ–€โ–„โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆ
โ–ˆโ–ˆโ–ˆโ–ˆ โ–„โ–„โ–„โ–„โ–„ โ–ˆโ–„โ–ˆโ–ˆโ–ˆโ–€โ–„โ–„โ–ˆ โ–ˆโ–„โ–ˆ โ–€โ–„ โ–„โ–ˆโ–ˆโ–ˆโ–ˆ
โ–ˆโ–ˆโ–ˆโ–ˆ โ–ˆ   โ–ˆ โ–ˆ โ–„โ–ˆโ–€โ–„      โ–„ โ–€ โ–€โ–€โ–ˆโ–ˆโ–ˆโ–ˆ
โ–ˆโ–ˆโ–ˆโ–ˆ โ–ˆโ–„โ–„โ–„โ–ˆ โ–ˆ โ–„ โ–€โ–„โ–ˆโ–€ โ–€ โ–€โ–€โ–€ โ–„โ–ˆ โ–ˆโ–ˆโ–ˆโ–ˆ
โ–ˆโ–ˆโ–ˆโ–ˆโ–„โ–„โ–„โ–„โ–„โ–„โ–„โ–ˆโ–„โ–„โ–ˆโ–„โ–„โ–„โ–ˆโ–ˆโ–ˆโ–„โ–„โ–„โ–„โ–„โ–„โ–„โ–„โ–ˆโ–ˆโ–ˆโ–ˆ
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆ
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆ

ๆฆ‚่ฆ

้ป’ๆฟใ‚ขใƒผใƒˆใ‚’ใ‚ณใƒณใ‚ปใƒ—ใƒˆใซใ—ใŸใ€ใƒชใƒชใƒƒใ‚ฏใƒšใ‚คใƒณใƒˆใ‚ขใƒ—ใƒชใ‚ฑใƒผใ‚ทใƒงใƒณใงใ™ใ€‚
ใƒžใ‚ธใ‚ซใƒซใƒŸใƒฉใ‚ค 2021 ใ‚’ๅฝฉใ‚‹ๆฅฝๆ›ฒใจๅ…ฑใซใ€ใ‚ชใƒชใ‚ธใƒŠใƒซใฎ้ป’ๆฟใ‚ขใƒผใƒˆใ‚’ไฝœๆˆใงใใพใ™ใ€‚
ใŠๆฐ—ใซๅ…ฅใ‚Šใฎๆฅฝๆ›ฒใฎๆญŒ่ฉžใจๅ…ฑใซใ€ใ‚ชใƒชใ‚ธใƒŠใƒซใฎใ€Œใฟใใฐใ‚“ใ‚ขใƒผใƒˆใ€ใ‚’ๅ‰ต้€ ใ—ใ€
ๅนดใซไธ€ๅบฆใฎ็ฅญๅ…ธใ‚’ไธ€็ท’ใซ็››ใ‚ŠไธŠใ’ใ‚ˆใ†๏ผ

็‰นๅพด

  • ่ฆณใ‚‹ใ ใ‘ใงใฏใชใ Web ใฎใ‚คใƒณใ‚ฟใƒฉใ‚ฏใƒ†ใ‚ฃใƒ–ใ‚’็”Ÿใ‹ใ—ใŸใ€Œไฝ“้จ“ใ€ใŒใงใใ‚‹
  • ้ป’ๆฟใ‚’ใ‚ณใƒณใ‚ปใƒ—ใƒˆใซใ—ใŸไธ–็•Œ่ฆณ
  • ๆใ‘ใ‚‹็ทšใ‚’ใƒใƒงใƒผใ‚ฏ่ชฟใซ
  • ๆฅฝๆ›ฒๆƒ…ๅ ฑใ‚’็”จใ„ใŸๆ—ฅ็›ด้ขจ่กจ็คบ
  • ๆญŒ่ฉžใฎ่‰ฒใ€็ทšใฎ่‰ฒใƒปๅคชใ•ใฎใ‚ซใ‚นใ‚ฟใƒžใ‚คใ‚บๆฉŸ่ƒฝ
  • ๆใ„ใŸไฝœๅ“ใ‚’ใ‚นใ‚ฏใƒชใƒผใƒณใ‚ทใƒงใƒƒใƒˆใจใ—ใฆไฟๅญ˜ใงใใ‚‹

ๆฉŸ่ƒฝ่ชฌๆ˜Ž

Menu > Music

image

  • Songs : ๆฅฝๆ›ฒใฎ้ธๆŠžใŒใงใใพใ™ใ€‚
  • Play : ๆฅฝๆ›ฒใฎๅ†็”ŸใŒใงใใพใ™ใ€‚
  • Pause : ๆฅฝๆ›ฒใฎไธ€ๆ™‚ๅœๆญขใŒใงใใพใ™ใ€‚
  • Stop : ๆฅฝๆ›ฒใฎๅœๆญขใŒใงใใพใ™ใ€‚
  • Volume : ๆฅฝๆ›ฒใฎ้Ÿณ้‡ใฎๅค‰ๆ›ดใŒใงใใพใ™ใ€‚
  • Time(็ง’) : ใ‚ทใƒผใ‚ฏใƒใƒผใซใชใฃใฆใŠใ‚Šใ€ๅ†็”Ÿไฝ็ฝฎใฎๅค‰ๆ›ดใŒๅฏ่ƒฝใงใ™ใ€‚

Menu > Paint

image

  • LineColor : ็ทšใฎ่‰ฒใ‚’ๅค‰ๆ›ดใงใใพใ™ใ€‚ใ‚ฏใƒชใƒƒใ‚ฏใ™ใ‚‹ใจใ‚ซใƒฉใƒผใƒ”ใƒƒใ‚ซใƒผใŒ่กจ็คบใ•ใ‚Œใพใ™ใ€‚
  • LyricsColor : ๆญŒ่ฉžใฎ่‰ฒใ‚’ๅค‰ๆ›ดใงใใพใ™ใ€‚ใ‚ฏใƒชใƒƒใ‚ฏใ™ใ‚‹ใจใ‚ซใƒฉใƒผใƒ”ใƒƒใ‚ซใƒผใŒ่กจ็คบใ•ใ‚Œใพใ™ใ€‚ๆ—ขใซๆญŒ่ฉžใŒ่กจ็คบใ•ใ‚Œใฆใ„ใ‚‹ๅ ดๅˆใฏใ€ๆฌกใฎๆญŒ่ฉžใ‹ใ‚‰ๅๆ˜ ใ•ใ‚Œใพใ™ใ€‚
  • EraserMode : ใ‚ฏใƒชใƒƒใ‚ฏใ™ใ‚‹ใจๆถˆใ—ใ‚ดใƒ ใƒขใƒผใƒ‰ใซๅค‰ๆ›ดใงใใพใ™ใ€‚ใ‚‚ใ†ไธ€ๅบฆใ‚ฏใƒชใƒƒใ‚ฏใ™ใ‚‹ใจๆถˆใ—ใ‚ดใƒ ใƒขใƒผใƒ‰ใ‚’่งฃ้™คใงใใพใ™ใ€‚
  • LineWidth : ็ทšใฎๅคชใ•ใ‚’ๅค‰ๆ›ดใงใใพใ™ใ€‚
  • ClearPaint : ๆใ„ใŸ็ทšใ‚’ๅ…จใฆใ‚ฏใƒชใ‚ขใ—ใพใ™ใ€‚
  • ScreenShot : ๆใ„ใŸไฝœๅ“ใ‚’็”ปๅƒใƒ‡ใƒผใ‚ฟใจใ—ใฆไฟๅญ˜ใงใใพใ™(โ€ปMenu ใฏใ‚นใ‚ฏใƒชใƒผใƒณใ‚ทใƒงใƒƒใƒˆใซใฏๅ†™ใ‚Šใพใ›ใ‚“ใ€‚)
  • Tweet : Twitter ใฎใƒ„ใ‚คใƒผใƒˆใซ้ท็งปใ—ใพใ™ใ€‚ไฟๅญ˜ใ—ใŸใ‚นใ‚ฏใƒชใƒผใƒณใ‚ทใƒงใƒƒใƒˆใ‚’ใƒ„ใ‚คใƒผใƒˆใ™ใ‚‹ใ“ใจใŒใงใใพใ™ใ€‚

ใใฎไป–

image

  • ้ป’ๆฟๆถˆใ—ใ‚’ใ‚ฏใƒชใƒƒใ‚ฏใ™ใ‚‹ใจๆถˆใ—ใ‚ดใƒ ใƒขใƒผใƒ‰ใฎ On/Off ใŒใงใใพใ™ใ€‚ๆถˆใ—ใ‚ดใƒ ใƒขใƒผใƒ‰ไธญใฏ่ตคๆž ใงๅผท่ชฟ่กจ็คบใ•ใ‚Œใพใ™ใ€‚
  • ๅ„็จฎใƒใƒงใƒผใ‚ฏใ‚’ใ‚ฏใƒชใƒƒใ‚ฏใ™ใ‚‹ใจใ€ใใฎใƒใƒงใƒผใ‚ฏใฎ่‰ฒใซ็ทšใฎ่‰ฒใŒๅค‰ๆ›ดใ•ใ‚Œใพใ™ใ€‚

ๅ‹•ไฝœ็ขบ่ชๆธˆใฟ็’ฐๅขƒ

โ€ปใ‚นใƒžใƒผใƒˆใƒ•ใ‚ฉใƒณใงใ‚‚ๅ‹•ไฝœใ—ใพใ™ใŒใ€็ซฏๆœซใ‚„ OSใ€็ซฏๆœซใฎใ‚ตใ‚คใ‚บ ใซใ‚ˆใฃใฆใฏๆญฃใ—ใๅ‹•ไฝœใ—ใชใ„ๅ ดๅˆใŒใ‚ใ‚Šใพใ™ใ€‚

  • Windows : Edgeใ€Google Chromeใ€Firefox
  • Mac : Safariใ€Google Chrome
  • Android : Google Chrome
  • iOS : Safariใ€Google Chrome

้–‹็™บ่€…ๅ‘ใ‘

Setup

npm ci

Copy .env.sample to .env

Replace <your_token> to your development token via https://developer.textalive.jp/profile

Development

npm run start

Open http://localhost:8080

With debug mode

npm run start:debug

With TextAlive App Debugger

npm run start
ngrok http --host-header=rewrite 8080

Open https://developer.textalive.jp/app/run/ and input TextAlive App URL to https url in ngrok

Build and check

npm run build
npx -y serve dist

Open http://localhost:5000

Licence

About

๐Ÿ“ Web application for Magical Mirai 2021 programing contest(https://magicalmirai.com/2021/procon/)

mikuban.netlify.app/

Topics

webapp

Resources

Readme
Activity
Custom properties

Stars

1 star

Watchers

0 watching

Forks

1 fork
Report repository

Releases 1

v1.0 Latest
Oct 2, 2021

Contributors 2

  •  
  •  

Languages