割烹エディターの開発メモ2（縦書き割烹実装編）

縦書き割烹を作るときのJavascript実装メモ

0. 動作概要

テキストエリアに入力された文字を一定の文字数で切り出し、その範囲に改行があればそこで区切って全角スペースで切り出す文字数まで埋める。「」など横書き前提の文字があれば縦書き用の文字に変換する。最後にHTML用の装飾コードを付与してテキストエリアと簡易プレビュー用の場所に返す。

イメージはこんな感じ。以下、コード。

//変数名

const text=document.form1.textarea1.value; //テキストエリアに入力されたもの
​

1. 文字分割部

do{
           bufstr = text.substr(k, maxlen);
           
           if(RegExp('\r?\n', 'g').test(bufstr)){
               
               bufstr = bufstr.split('\n')[0];
               k = k + bufstr.length+1; 
               bufstr = bufstr +'　'.repeat(maxlen - bufstr.length);
               
           }else{
               k = k + maxlen;
           }
           
           
 }while(text.length > k);

改行コードがあったらその時点で文字を切り出す。'　'.repeatで足りない分を全角スペースで埋める。

2.文字コード変換部

function replaceStr(bufstr) {

   let tempstr = bufstr;
   const replacechar_before = ['「','」','『','』','〈','〉','（','）','【','】','、','。','ー','…'];
   const replacechar_after = ['﹁','﹂','﹃','﹄','︿','﹀','︵','︶','︻','︼','︑','︒','︱','︙'];
       
   for(let i in replacechar_after){
       tempstr = tempstr.replace(new RegExp(replacechar_before[i],'g'),replacechar_after[i]);
   }
       
   return unescapeHTML(tempstr);
}

横書き文字を縦書きになおすために横書き文字の配列とそれに応じた縦書きの文字コード配列を用意。

それをreplaceで置き換えている。

3.ポップアップ

変換ボタンなど押したときに表示されるポップアップ

const popup = document.getElementById(popname);
popup.classList.toggle("show");

popnameにshowを付与して実現。

通常はvisibility: hidden;を指定してshowの場合にvisibility: visible;が有効になる。

 animation: fadeIn 1s;

@keyframes fadeIn {
   from {opacity: 0;}
   to {opacity:1 ;}
} 

なおポップアップにはアニメーションを追加していてフェードインするようになっている。

opacity: 0;は透明→opacity:1 ;不透明へと変化、1秒間で遷移する。なおアニメーションはもう少しカスタマイズできて、

animation: fadeIn 2s ease 0s 1 normal;
// キーフレームアニメーション名
//1回のアニメーションにかかる時間を指定
//アニメーションの変化率 ease、linear、ease-out、ease-in-out
//アニメーションの開始をいくら遅らせるかを指定
//アニメーションを何回繰り返すかを指定
//繰り返し時、往復処理をするかを指定

など指定できる。これを極めると複雑なものが作れる。

4.タブ切り替え

タブはラジオボタンで実現することが多いとのことなので自分もそれにのっとってやってみる。

<input type="radio" name="cp_tab" id="tab1_1" aria-controls="first_tab01" checked>
<input type="radio" name="cp_tab" id="tab1_2" aria-controls="second_tab01">

まず、切り替えたい分だけのラジオボタンを作る。そのあと切り替え用のタブを作る。

<div class="cp_tabpanels">   
<div id="first_tab01" class="cp_tabpanel"></div>
<div id="second_tab01" class="cp_tabpanel"></div>
</div>

.cp_tabpanel {
	display: none;
}

タブは基本見えないようにしておく。チェックされたものだけ見えるようにする。

.cp_tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child,
.cp_tab > input:nth-child(2):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(2){
 display: block;
}

【CSS】CSSだけでタブ切り替えを作る方法 - bagelee（ベーグリー）

5.リアルタイムプレビュー

document.getElementById("second_tab01").innerHTML = newstr+endstr;

変換ボタンを押したときに2番目のタブに中身を書き込む。

6.コピーボタン

document.getElementById("copyTarget").select();
document.execCommand("Copy");

ターゲットとなるテキストエリアを選択してCopyする。

document.execCommandは色々とできて

cut
bold
delete
italic
paste

などある。

これらを組み合わせて実装

流れとしては、テキストエリアに文章を書き込み→設定の変更、調整→変換ボタン→文字分割、文字置換、再合成→出力エリアに書き込み→コピペボタン