HTML上のリストをOPMLに変換する

※プログラミング歴一年未満時点の自分用メモです。

目的

自作ツール内で作ったデータを他のアウトライナーに取り込めるようにする
データのサイズを限りなく小さくする

<body>
   <ul>
       <li>あいうえお</li>
       <li>かきくけこ</li>
       <li>さしすせそ</li>
   </ul>
</body>

こんな感じのHTMLがあったとして

const item = document.querySelectorAll('li');
const mount = document.createElement('body'); // 「台紙」の意
for(let i = 0; i < item.length; i++){
    const outline = document.createElement('outline');
    outline.setAttribute('text',item[i].innerText);
    mount.appendChild(outline);
}
console.log(mount.innerHTML);

例えばこんな感じでOPMLの中身を作れる

<outline text="あいうえお"></outline>
<outline text="かきくけこ"></outline>
<outline text="さしすせそ"></outline>

自作ツールではこの状態をlocalStorageに保存する

実際には…
- 状態をデータとしてあれこれ保存しているのでtext以外の属性がたくさん並ぶ
- 階層構造があるのでoutline要素は複雑に入れ子になる
- なのでHTMLからOPMLを作るためのコードはそれなりに複雑になる
HTMLだと表示のために必要なclassなどがたくさん付与されるので文字数がべらぼうに多くなるが、OPML形式にすれば最低限の文字数で済む
- データベースとしてはJSONもあり得るが、階層構造を保存するにはOPMLが一番楽という感じがする
ツールの起動時などにOPMLを逆の手順でHTMLにして使う

更に、OPMLファイルとして必要な要素をくっつける

const opml = '<?xml version="1.0" encoding="utf-8"?><opml version="2.0"><head></head><body>'+mount.innerHTML+'</body></opml>'; 
console.log(opml);

↓「opml」の中身（実際には1行に繋がっている）