37日目 割烹芸人の開発2
今回は変換部を作っていきます。
割烹エディターの核として利用するEditor.jsの出力はJSON形式です。
JSON形式とはJavaScript Object Notationの略で、テキストベースのデータフォーマットです。13日の金曜日のあの人とは関係ないです。
JSON形式はこんな風にデータが波括弧で括られていてキーとデータが結び付けられた構造になっています。
例えばこんなかんじ。
ちなみに小説家になろうデベロッパーが提供しているAPIもアウトパラメータをJSON形式にするとJSONで出力してくれます。
https://api.syosetu.com/novelapi/api/?out=json&ncode=N3582GC
JSON形式はプログラム上でデータを扱うのが便利なのでそのままでもいいんですが、最終出力にするためにはそれをHTMLに変換する必要があります。
活動報告に突っ込めるような形式に変換してやる必要があります。
なのでその変換部を作っていきます。といってもそこまで難しくはなくて、基本的にはblocks要素のtypeを調べて変換させればいいです。そのあとの設定項目でさらに分岐させる感じにします。
ということで実装していきます。
文章を書くところ：
<div id="editor"></div>
<button id="save-button">押すと変換される</button>
変換した後のソースコードが出力されるところ：
<textarea id="output-text"></textarea>
<button id="copy-button">押すとコピーすることができる</button>
<pre id="output"></pre>
まずはHTMLの方に出力後の置き場所としてtextareaを作成。
変換ボタン、コピーボタンを作ります。（縦書きで作ったのを再利用）
次に、ボタンを押したときの処理を追加。前回はinput buttonに処理を書いていたけど今回はイベントリスナーを利用します。アロー関数にも慣れたいので。
const saveButton = document.getElementById('save-button');
const output = document.getElementById('output');
const outputtext = document.getElementById('output-text');
saveButton.addEventListener('click', () => {
editor.save().then( savedData => {
output.innerHTML = JSON.stringify(savedData, null, 4);
outputtext.innerHTML = parsedata(savedData);
})
});
const copyButton = document.getElementById('copy-button');
copyButton.addEventListener('click', () => {
outputtext.select();
document.execCommand("Copy");
});
saveButton.addEventListener('click', () => {});でボタンを押した処理を実現してます。
outputtext.innerHTML = parsedata(savedData);でパースしたHTMLタグを返すようにします。
function parsedata(savedata){
let returndata = '';
savedata.blocks.forEach((value,index) =>{
switch (value.type){
case 'paragraph':
returndata += ('<p>' + value.data.text + '</p>');
break;
case 'p':
returndata += value.data.text + '\n';
break;
default:
break;
}
});
return returndata;
}
パースはこんな感じで、.forEach((value,index)で要素をループさせて実行してます。
value.typeで分岐させています。今は簡単な処理しか書いてないけど、カスタムブロックをついかしたら増やしていきます。
ということで暫定の出力ができたので、ここからカスタムブロックを作っていきます。
