루팡 3세의 카샤카샤라는 타이틀 콜을 좋아하는 문자열로 생성한다.
소개
루팡 3세의 애니메이션 타이틀 콜은 독특하네요.
타자기 같은 카샤 카샤 소리와 함께 멋지게 제목이 나타납니다.
<참고↓>
htps //w w. 요츠베. 이 m/와 tch? v = StZ 후 P64b
이것, 스스로 만들 수 없을까? 라고 생각해, 삼연 휴용해 여러가지 조사하고 있으면
생각 밖에 간단하게 할 수 버렸습니다.
※실제는 소리도 나옵니다(Qiita에 동영상 붙일 수 있도록 해 주었으면 한다)
※GIF이므로 조금 빨리 보입니다만, 실제로는 조금 느립니다.
무슨 일이 있었는지
이런 것입니다.
htps : // 및 l0929. 기주 b. 이오
음성은 ↓를 사용하고 있습니다.
htps //w w. 요츠베. 이 m/와 tch? v = StZ 후 P64b
운영 환경
Chrome에서는 비교적 안정적으로 움직입니다. 혹시 Chrome 이외라면 소리가 어긋나 버려 잘 작동하지 않습니다.
스마트 폰 미 대응입니다. PC에서 보시기 바랍니다.
Mac 밖에 보지 않지만 아마 Windows에서도 괜찮다고 생각합니다.
출처
전용은 Github에서.
주요 부분의 HTML과 JS만 올립니다.
htps : // 기주 b. 이 m / 및 l0929 / ぅ 핀치 t ぇ
index.html<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<link rel="stylesheet" href="./style.css">
<title>ルパン三世風タイトルコールジェネレータ</title>
</head>
<body>
<div id="show" class="showArea"></div>
<div class="inputArea">
<input type="text" id="strValue">
<input type="button" value="とっつぁ〜ん!" onclick="showString();">
</div>
<script src="./main.js"></script>
</body>
</html>
main.jslet audioElem;
const BGM = "./mp3/bgm.mp3";
const KASYA = "./mp3/kasya.mp3";
// 200ミリ秒待つ
const sleep = () => {
return new Promise((resolve) => setTimeout(resolve, 200));
}
// mp3ファイルの音声を再生
const playSound = (filename) => {
audioElem = new Audio();
audioElem.src = filename;
audioElem.play();
}
const showString = async () => {
const elm = document.getElementById("show");
const str = document.getElementById("strValue").value;
elm.style.textAlign = "center";
elm.style.fontSize = "200px";
// 音とともに一文字ずつ表示
for(let i = 0; i < str.length; i++){
elm.innerHTML = "";
elm.innerHTML = str[i];
playSound(KASYA);
// 200ミリ秒待つ
await sleep();
}
// 全文表示
elm.innerHTML = str;
elm.style.textAlign = "left";
elm.style.fontSize = "50px";
playSound(BGM)
}
조금 고생했는데
장난스러울 뿐이라면 화가 날 것 같기 때문에, 조금 기술적인 이야기를.
javascript에서 비동기 처리를 쓰지 않으면 안되는 장면이 있었지만, 지금까지 비동기 처리를 0부터 구현한 적이 없었기 때문에 조금 고전했습니다. (다른 사람이 쓴 비동기 처리를 괴롭힌 것 밖에 없었다)
「타이틀 문자열을 1문자 출력」
↓
"200밀리초 기다린다"
↓
"다음 한 문자 출력"
↓
"200밀리초 기다린다"
같은 느낌으로 하고 싶었기 때문에, 처음 아무것도 생각하지 않고 ↓의 코드 쓰고 있었습니다.
쓸모없는 쓰기 .jsconst elm = document.getElementById("show");
const str = document.getElementById("strValue").value;//出力する文字列
for(let i = 0; i < str.length; i++){
setTimeout(() => {
elm.innerHTML = "";
elm.innerHTML = str[i];
playSound(KASYA);//カシャカシャって音を再生
}, 200);
}
이것이라고 하면, 1회째의 루프로만 200밀리초 기다려 줍니다만 2회째 이후에서는 기다려 주지 않습니다.
async/await를 사용하여 ↓처럼 다시 씁니다.
제대로 가자.js
// 200ミリ秒待つ
const sleep = () => {
return new Promise((resolve) => setTimeout(resolve, 200));
}
const showString = async () => {
const elm = document.getElementById("show");
const str = document.getElementById("strValue").value;
// 音とともに一文字ずつ表示
for(let i = 0; i < str.length; i++){
elm.innerHTML = "";
elm.innerHTML = str[i];
playSound(KASYA);
// 200ミリ秒待つ
await sleep();
}
}
promise 를 얽힌 비동기 처리 함수를 async 함수 안에서 await 하는 것으로 해결할 수 있었습니다.
이름이 직관적이고 이해하기 쉬웠습니다.
추가
별해
코멘트로 지적해 주셨습니다만, 이하 코드라면 비동기 처리를 사용하지 않고 기대 동작을 구현할 수 있습니다.
비동기 처리를 사용하지 않음.jsconst elm = document.getElementById("show");
const str = document.getElementById("strValue").value;//出力する文字列
for(let i = 0; i < str.length; i++){
setTimeout(() => {
elm.innerHTML = "";
elm.innerHTML = str[i];
playSound(KASYA);//カシャカシャって音を再生
}, 200 * (i + 1));/* i+1をかける！！ */
}
첫 번째 だめな書き方.js의 끝에서 두 번째 줄을 바꿨습니다.
だめな書き方.js 의 문제점은 200 밀리 세컨드 세는 기점이 항상 i = 0 의 시점이 되어 있었던 것.
그래서 setTimeout 의 제 2 인수에 i + 1 를 걸어 200, 400, 600, ... 라고 늘려가는 것으로 200밀리초 단위로 세는 것과 동의가 됩니다.
파생판이 만들어졌다
이런 기세로 만든 만큼의 재료 앱을 파생해 주시는 사람이 나타났습니다.
・타이틀 화면의 사이즈를 가변으로 한 것
루팡 3 세의 카샤 카샤라는 타이틀 콜의 녀석을 svg로하고 싶었다.
・브라우저 사이즈 가득 가득까지 펼친 것
Lupin The Third Title Call
참고
【JS】setTimeout을 이용한 비동기 처리 입문
async/await 입문(JavaScript)
Reference
이 문제에 관하여(루팡 3세의 카샤카샤라는 타이틀 콜을 좋아하는 문자열로 생성한다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Sirloin/items/3db49c97763042e95eb5
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이런 것입니다.
htps : // 및 l0929. 기주 b. 이오
음성은 ↓를 사용하고 있습니다.
htps //w w. 요츠베. 이 m/와 tch? v = StZ 후 P64b
운영 환경
Chrome에서는 비교적 안정적으로 움직입니다. 혹시 Chrome 이외라면 소리가 어긋나 버려 잘 작동하지 않습니다.
스마트 폰 미 대응입니다. PC에서 보시기 바랍니다.
Mac 밖에 보지 않지만 아마 Windows에서도 괜찮다고 생각합니다.
출처
전용은 Github에서.
주요 부분의 HTML과 JS만 올립니다.
htps : // 기주 b. 이 m / 및 l0929 / ぅ 핀치 t ぇ
index.html<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<link rel="stylesheet" href="./style.css">
<title>ルパン三世風タイトルコールジェネレータ</title>
</head>
<body>
<div id="show" class="showArea"></div>
<div class="inputArea">
<input type="text" id="strValue">
<input type="button" value="とっつぁ〜ん!" onclick="showString();">
</div>
<script src="./main.js"></script>
</body>
</html>
main.jslet audioElem;
const BGM = "./mp3/bgm.mp3";
const KASYA = "./mp3/kasya.mp3";
// 200ミリ秒待つ
const sleep = () => {
return new Promise((resolve) => setTimeout(resolve, 200));
}
// mp3ファイルの音声を再生
const playSound = (filename) => {
audioElem = new Audio();
audioElem.src = filename;
audioElem.play();
}
const showString = async () => {
const elm = document.getElementById("show");
const str = document.getElementById("strValue").value;
elm.style.textAlign = "center";
elm.style.fontSize = "200px";
// 音とともに一文字ずつ表示
for(let i = 0; i < str.length; i++){
elm.innerHTML = "";
elm.innerHTML = str[i];
playSound(KASYA);
// 200ミリ秒待つ
await sleep();
}
// 全文表示
elm.innerHTML = str;
elm.style.textAlign = "left";
elm.style.fontSize = "50px";
playSound(BGM)
}
조금 고생했는데
장난스러울 뿐이라면 화가 날 것 같기 때문에, 조금 기술적인 이야기를.
javascript에서 비동기 처리를 쓰지 않으면 안되는 장면이 있었지만, 지금까지 비동기 처리를 0부터 구현한 적이 없었기 때문에 조금 고전했습니다. (다른 사람이 쓴 비동기 처리를 괴롭힌 것 밖에 없었다)
「타이틀 문자열을 1문자 출력」
↓
"200밀리초 기다린다"
↓
"다음 한 문자 출력"
↓
"200밀리초 기다린다"
같은 느낌으로 하고 싶었기 때문에, 처음 아무것도 생각하지 않고 ↓의 코드 쓰고 있었습니다.
쓸모없는 쓰기 .jsconst elm = document.getElementById("show");
const str = document.getElementById("strValue").value;//出力する文字列
for(let i = 0; i < str.length; i++){
setTimeout(() => {
elm.innerHTML = "";
elm.innerHTML = str[i];
playSound(KASYA);//カシャカシャって音を再生
}, 200);
}
이것이라고 하면, 1회째의 루프로만 200밀리초 기다려 줍니다만 2회째 이후에서는 기다려 주지 않습니다.
async/await를 사용하여 ↓처럼 다시 씁니다.
제대로 가자.js
// 200ミリ秒待つ
const sleep = () => {
return new Promise((resolve) => setTimeout(resolve, 200));
}
const showString = async () => {
const elm = document.getElementById("show");
const str = document.getElementById("strValue").value;
// 音とともに一文字ずつ表示
for(let i = 0; i < str.length; i++){
elm.innerHTML = "";
elm.innerHTML = str[i];
playSound(KASYA);
// 200ミリ秒待つ
await sleep();
}
}
promise 를 얽힌 비동기 처리 함수를 async 함수 안에서 await 하는 것으로 해결할 수 있었습니다.
이름이 직관적이고 이해하기 쉬웠습니다.
추가
별해
코멘트로 지적해 주셨습니다만, 이하 코드라면 비동기 처리를 사용하지 않고 기대 동작을 구현할 수 있습니다.
비동기 처리를 사용하지 않음.jsconst elm = document.getElementById("show");
const str = document.getElementById("strValue").value;//出力する文字列
for(let i = 0; i < str.length; i++){
setTimeout(() => {
elm.innerHTML = "";
elm.innerHTML = str[i];
playSound(KASYA);//カシャカシャって音を再生
}, 200 * (i + 1));/* i+1をかける！！ */
}
첫 번째 だめな書き方.js의 끝에서 두 번째 줄을 바꿨습니다.
だめな書き方.js 의 문제점은 200 밀리 세컨드 세는 기점이 항상 i = 0 의 시점이 되어 있었던 것.
그래서 setTimeout 의 제 2 인수에 i + 1 를 걸어 200, 400, 600, ... 라고 늘려가는 것으로 200밀리초 단위로 세는 것과 동의가 됩니다.
파생판이 만들어졌다
이런 기세로 만든 만큼의 재료 앱을 파생해 주시는 사람이 나타났습니다.
・타이틀 화면의 사이즈를 가변으로 한 것
루팡 3 세의 카샤 카샤라는 타이틀 콜의 녀석을 svg로하고 싶었다.
・브라우저 사이즈 가득 가득까지 펼친 것
Lupin The Third Title Call
참고
【JS】setTimeout을 이용한 비동기 처리 입문
async/await 입문(JavaScript)
Reference
이 문제에 관하여(루팡 3세의 카샤카샤라는 타이틀 콜을 좋아하는 문자열로 생성한다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Sirloin/items/3db49c97763042e95eb5
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
전용은 Github에서.
주요 부분의 HTML과 JS만 올립니다.
htps : // 기주 b. 이 m / 및 l0929 / ぅ 핀치 t ぇ
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<link rel="stylesheet" href="./style.css">
<title>ルパン三世風タイトルコールジェネレータ</title>
</head>
<body>
<div id="show" class="showArea"></div>
<div class="inputArea">
<input type="text" id="strValue">
<input type="button" value="とっつぁ〜ん!" onclick="showString();">
</div>
<script src="./main.js"></script>
</body>
</html>
main.js
let audioElem;
const BGM = "./mp3/bgm.mp3";
const KASYA = "./mp3/kasya.mp3";
// 200ミリ秒待つ
const sleep = () => {
return new Promise((resolve) => setTimeout(resolve, 200));
}
// mp3ファイルの音声を再生
const playSound = (filename) => {
audioElem = new Audio();
audioElem.src = filename;
audioElem.play();
}
const showString = async () => {
const elm = document.getElementById("show");
const str = document.getElementById("strValue").value;
elm.style.textAlign = "center";
elm.style.fontSize = "200px";
// 音とともに一文字ずつ表示
for(let i = 0; i < str.length; i++){
elm.innerHTML = "";
elm.innerHTML = str[i];
playSound(KASYA);
// 200ミリ秒待つ
await sleep();
}
// 全文表示
elm.innerHTML = str;
elm.style.textAlign = "left";
elm.style.fontSize = "50px";
playSound(BGM)
}
조금 고생했는데
장난스러울 뿐이라면 화가 날 것 같기 때문에, 조금 기술적인 이야기를.
javascript에서 비동기 처리를 쓰지 않으면 안되는 장면이 있었지만, 지금까지 비동기 처리를 0부터 구현한 적이 없었기 때문에 조금 고전했습니다. (다른 사람이 쓴 비동기 처리를 괴롭힌 것 밖에 없었다)
「타이틀 문자열을 1문자 출력」
↓
"200밀리초 기다린다"
↓
"다음 한 문자 출력"
↓
"200밀리초 기다린다"
같은 느낌으로 하고 싶었기 때문에, 처음 아무것도 생각하지 않고 ↓의 코드 쓰고 있었습니다.
쓸모없는 쓰기 .jsconst elm = document.getElementById("show");
const str = document.getElementById("strValue").value;//出力する文字列
for(let i = 0; i < str.length; i++){
setTimeout(() => {
elm.innerHTML = "";
elm.innerHTML = str[i];
playSound(KASYA);//カシャカシャって音を再生
}, 200);
}
이것이라고 하면, 1회째의 루프로만 200밀리초 기다려 줍니다만 2회째 이후에서는 기다려 주지 않습니다.
async/await를 사용하여 ↓처럼 다시 씁니다.
제대로 가자.js
// 200ミリ秒待つ
const sleep = () => {
return new Promise((resolve) => setTimeout(resolve, 200));
}
const showString = async () => {
const elm = document.getElementById("show");
const str = document.getElementById("strValue").value;
// 音とともに一文字ずつ表示
for(let i = 0; i < str.length; i++){
elm.innerHTML = "";
elm.innerHTML = str[i];
playSound(KASYA);
// 200ミリ秒待つ
await sleep();
}
}
promise 를 얽힌 비동기 처리 함수를 async 함수 안에서 await 하는 것으로 해결할 수 있었습니다.
이름이 직관적이고 이해하기 쉬웠습니다.
추가
별해
코멘트로 지적해 주셨습니다만, 이하 코드라면 비동기 처리를 사용하지 않고 기대 동작을 구현할 수 있습니다.
비동기 처리를 사용하지 않음.jsconst elm = document.getElementById("show");
const str = document.getElementById("strValue").value;//出力する文字列
for(let i = 0; i < str.length; i++){
setTimeout(() => {
elm.innerHTML = "";
elm.innerHTML = str[i];
playSound(KASYA);//カシャカシャって音を再生
}, 200 * (i + 1));/* i+1をかける！！ */
}
첫 번째 だめな書き方.js의 끝에서 두 번째 줄을 바꿨습니다.
だめな書き方.js 의 문제점은 200 밀리 세컨드 세는 기점이 항상 i = 0 의 시점이 되어 있었던 것.
그래서 setTimeout 의 제 2 인수에 i + 1 를 걸어 200, 400, 600, ... 라고 늘려가는 것으로 200밀리초 단위로 세는 것과 동의가 됩니다.
파생판이 만들어졌다
이런 기세로 만든 만큼의 재료 앱을 파생해 주시는 사람이 나타났습니다.
・타이틀 화면의 사이즈를 가변으로 한 것
루팡 3 세의 카샤 카샤라는 타이틀 콜의 녀석을 svg로하고 싶었다.
・브라우저 사이즈 가득 가득까지 펼친 것
Lupin The Third Title Call
참고
【JS】setTimeout을 이용한 비동기 처리 입문
async/await 입문(JavaScript)
Reference
이 문제에 관하여(루팡 3세의 카샤카샤라는 타이틀 콜을 좋아하는 문자열로 생성한다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Sirloin/items/3db49c97763042e95eb5
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const elm = document.getElementById("show");
const str = document.getElementById("strValue").value;//出力する文字列
for(let i = 0; i < str.length; i++){
setTimeout(() => {
elm.innerHTML = "";
elm.innerHTML = str[i];
playSound(KASYA);//カシャカシャって音を再生
}, 200);
}
// 200ミリ秒待つ
const sleep = () => {
return new Promise((resolve) => setTimeout(resolve, 200));
}
const showString = async () => {
const elm = document.getElementById("show");
const str = document.getElementById("strValue").value;
// 音とともに一文字ずつ表示
for(let i = 0; i < str.length; i++){
elm.innerHTML = "";
elm.innerHTML = str[i];
playSound(KASYA);
// 200ミリ秒待つ
await sleep();
}
}
별해
코멘트로 지적해 주셨습니다만, 이하 코드라면 비동기 처리를 사용하지 않고 기대 동작을 구현할 수 있습니다.
비동기 처리를 사용하지 않음.js
const elm = document.getElementById("show");
const str = document.getElementById("strValue").value;//出力する文字列
for(let i = 0; i < str.length; i++){
setTimeout(() => {
elm.innerHTML = "";
elm.innerHTML = str[i];
playSound(KASYA);//カシャカシャって音を再生
}, 200 * (i + 1));/* i+1をかける！！ */
}
첫 번째
だめな書き方.js의 끝에서 두 번째 줄을 바꿨습니다.だめな書き方.js 의 문제점은 200 밀리 세컨드 세는 기점이 항상 i = 0 의 시점이 되어 있었던 것.그래서
setTimeout 의 제 2 인수에 i + 1 를 걸어 200, 400, 600, ... 라고 늘려가는 것으로 200밀리초 단위로 세는 것과 동의가 됩니다.파생판이 만들어졌다
이런 기세로 만든 만큼의 재료 앱을 파생해 주시는 사람이 나타났습니다.
・타이틀 화면의 사이즈를 가변으로 한 것
루팡 3 세의 카샤 카샤라는 타이틀 콜의 녀석을 svg로하고 싶었다.
・브라우저 사이즈 가득 가득까지 펼친 것
Lupin The Third Title Call
참고
【JS】setTimeout을 이용한 비동기 처리 입문
async/await 입문(JavaScript)
Reference
이 문제에 관하여(루팡 3세의 카샤카샤라는 타이틀 콜을 좋아하는 문자열로 생성한다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Sirloin/items/3db49c97763042e95eb5
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(루팡 3세의 카샤카샤라는 타이틀 콜을 좋아하는 문자열로 생성한다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Sirloin/items/3db49c97763042e95eb5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
