1文字ずつスペース区切り機

歌詞の入力を効率化

文字列に1文字ずつスペースを足したいときに使ってください。

  • JavaScriptをONにして使う
  • 左が入力用、右が出力用

↓普通に漢字混じりの文章は事前にこれでひらがなに変換すると楽かも。アルファベットは手入力でひらがな、カタカナにしておいてください。

文字数カウントのJIKAZOOさん – ひらがな変換ツール
https://www.moji-count.com/index.cgi/hiragana

1文字ずつスペース区切り機

入力用

出力用

クリップボードにコピーされました

使い方

  • 入力すればKeyUp検知でリアルタイムでコピペ用のスペース区切りになるはず
  • ならないとき用に手動ボタンも一応配置
  • MuseScoreでひらがなの歌詞を連続ペーストする用に作ったので、「きゃ」など拗音はくっつく。
  • 出力用の方をコピーして、MuseScoreで歌詞入力モードにしてCtrl(cmd)+Vを連打

私の制作方法は現在、

  1. dominoで打ち込み
  2. Waveformで演奏
  3. dominoでmidiエクスポート
  4. midiファイルをMuseScoreで開き、歌詞打ち込み
  5. musicxmlでエクスポート
  6. musicxmlをNeutrinoで歌唱
  7. Waveformに追加しミックス
  8. After EffectsでMV制作

というのが常態化しており、この内4番目の歌詞打ち込みにてMuseScoreで歌詞入力モード(Ctrl+L)にした際、スペース区切りのテキストをペーストすると1音符に1文字ずつ連続入力できるのですが、作った歌詞を毎回テキストエディタでひらがなカタカナに打ち直してからスペースを間に挟むためにキーボードの右とスペースを交互に連打しています。

そして拗音のところはスペースを打たない反射神経が求められ、結局全部にスペースを入れてあとから目視でスペースを削除しているがために効率化しようとこのツールを作りました。

ちょっとの手間だし、そんなに歌曲作らないし…と思っていたところ、そこそこ曲作るんかいということで便利ではあるし公開しとこうと。

(JavaScript学んでいてよかった)

免責

あくまで「自分用」で作った簡易ツールのため、おそらくメンテナンス、アップデートは期待できない可能性があります。

簡単なJavaScriptで書いているので、私にデータが送信される動作は含んでいません。怖い方は利用しないか、ページ自体を保存してオフラインのローカルで動かしてみるという手はどうでしょうか。

ねこでもわかる!初心者向けJavaScriptでフォーム内の文字ごとにスペースを追加して出力するのとクリップボードにコピーするボタンを作る方法解説!

怪しいことしてない証明に公開。

HTML部分

<div class="yoko">
	<div class="ttl">
		入力用
	</div>
	<div>
		<textarea id="in" type="text"></textarea>
	</div>
	<div>
		<button onclick="f_export()">手動実行</button>
	</div>
</div>

<div id="arrow" class="yoko">
	<p>
		→
	</p>
</div>

<div class="yoko">
	<div class="ttl">
		出力用
	</div>
	<div>
		<textarea id="out" readonly></textarea>
	</div>
	<div>
		<button onclick="f_copy()">クリップボードにコピー</button>
	</div>
	<p id="msg">
		クリップボードにコピーされました
	</p>
</div>

divお化けでフォームを用意して、

CSS部分

input,
textarea,
button {
	width: 370px;
	height: 600px;
	padding: 0;
	margin: 5px;
	box-sizing: border-box;
}
button {
	height:2em;
}
#out {
	background-color:#eee;
}
body {
	overflow: hidden;
}
.yoko {
	float:left;
}
#arrow p {
  display: flex;
  align-items: center;
  height: 600px;
}
#msg {
	color:#f00;
	visibility:hidden;
}
.ttl {
	text-align: center;
}

CSSでデザイン。

先に作っておいた「クリップボードにコピーされました」の文字をvisibility:hidden;で一旦非表示に。

JavaScript部分

<script>
document.getElementById('in').addEventListener('keyup', () => {
	f_export();
});

function f_export(){
	var ar_komoji=["ぁ","ぃ","ぅ","ぇ","ぉ","ゃ","ゅ","ょ","ァ","ィ","ゥ","ェ","ォ","ャ","ュ","ョ"];
	var text = document.getElementById('in').value;
	var exptxt="";
	var flag=0;

	//text=text.replace(/\n/g,"");

	for(var i=0;i<text.length;i++){
		for(var j=0;j<ar_komoji.length;j++){
			if(text[i]==ar_komoji[j]){
				flag=1;
			}
		}

		if(flag==1){
			exptxt=exptxt.slice(0,exptxt.length-1);
		}

	exptxt+=text[i]+" ";
	flag=0;

	}
	document.getElementById('out').innerHTML = exptxt;
}

function f_copy(){
	var txt = document.getElementById("out");
	txt.select();
	document.execCommand("Copy");
	document.getElementById("msg").style.visibility='visible';
	setTimeout(() => {
		document.getElementById("msg").style.visibility='hidden';
	}, "2000");

}

</script>

f_export()がメインの関数で、for文で文字数分処理を回しながら1文字ずつスペースを追加。小文字だったら直前に入れた末尾のスペースをsliceで削除。

addEventListenerのkeyupで入力テキストエリアでキーボードが離されたらf_export()を呼び出しています。

f_copy()で出力用テキストエリアを選択状態にしてexecCommand(“Copy”)でクリップボードにコピー。

「クリップボードにコピーされました」の文字はsetTimeout()で2秒だけ表示してまた非表示にしています。