つくってみよう - FireFox拡張機能でブックマークを一覧表示する（８）ソースコードを読む - 表示について②

# つくってみよう - FireFox拡張機能でブックマークを一覧表示する 記事一覧
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（１）公式サンプルを体験する](https://qiita.com/madaaamj/items/5bf2ed67a2f68b0aa243)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（２）動作を確認する](https://qiita.com/madaaamj/items/3e33b058ad2f13167084)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（３）ソースコードを読む - 構成について]
(https://qiita.com/madaaamj/items/bef7102722da2f249515)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（４）ソースコードを読む - 画面について]
(https://qiita.com/madaaamj/items/27dd820d10fd20c51dee)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（５）ソースコードを読む - 処理の概要について]
(https://qiita.com/madaaamj/items/af88405b30820b19a114)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（６）ソースコードを読む - JSON情報の取得について]
(https://qiita.com/madaaamj/items/d9e7b1c296221218d46a)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（７）ソースコードを読む - 表示について①]
(https://qiita.com/madaaamj/items/68888b5d0fdb8f2af84f)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（８）ソースコードを読む - 表示について②]
(https://qiita.com/madaaamj/items/a7e3f764f8177139bf7d)

# ソースコードを読む
「FireFox拡張機能でブックマークを一覧表示する」機能をつくっていきましょう。
最終回となる今回は`<section>`部分の表示を見ていきます。

# ブックマークリスト（本体）を表示する
ヘッダー部分の書き出しが終了すると`showSection()`を呼び出し本体部分を書き出します。
[先に生成した](https://qiita.com/madaaamj/items/d9e7b1c296221218d46a)`dicTags`から情報を取得しながらリストを構築していきます。

```javascript:bmlist.js（readFile一部）
...
// ---------------------------------------------------------------
// 関数定義 
// ---------------------------------------------------------------
// 1.ブックマークファイルを選択して読み込み一覧表を生成する。
function readFile() { 
...
        // HTML書き出し
        showHeader(jsonObj, dicTags);
        showSection(dicTags);
...
```

まずタグを[ボタン](https://getbootstrap.com/docs/4.5/components/buttons/)形式で[横に並べて一覧表示](https://getbootstrap.com/docs/4.5/content/typography/#inline)します。このボタンには`dicTags`のnameからアンカーリンクを生成して設定され、該当するフォルダー名／タグのブックマークリストにジャンプすることができます。
フォルダー名のボタンは`btn-outline-primary`で、タグのボタンは`btn-primary`で表示します。

次にリスト本体を表示します。
各リストのトップにはタイトルバーが表示されその下にリスト一覧が表示されます。

リスト一覧では、リストスタイルに[画像を表示する](https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list)ためにFont Awesomeを利用しています。
`dicTags`のtitleとurlからリンクを生成します。

`dicTags`のレコード数分処理を繰り返し最後に生成したHTMLを表示します。

```javascript:bmlist.js（showSection）
// 6.readFileから呼び出される。セクション部分（<section>）書き出しを行う。
function showSection(dicTags) {
    let elemBookmark = document.createElement('bookmarks');
    let elemUl_Taglist = document.createElement('ul');

    // +++++++++++++++++++++++++++++++
    // 書き出す（タグ一覧）
    /* Bootstrap */
    elemUl_Taglist.setAttribute("class", "list-inline");

    let lastTag = "";
    g_arrAutocomplete = [];
    dicTags.forEach(function(item, index, array) {
        if (lastTag !== item.name) {
            lastTag = item.name;
            g_arrAutocomplete.push(lastTag); // オートコンプリートソース（フォルダー名かタグ名の配列）

            let elemLi_Tag = document.createElement('li');
            elemLi_Tag.setAttribute("class", "list-inline-item m-2");

            let elemA_ToTag = document.createElement("a");
            let tagTitle;
            if (item.folder === 1) {
                tagTitle = document.createTextNode(lastTag.slice(2));
            }
            else tagTitle = document.createTextNode(lastTag);
            elemA_ToTag.appendChild(tagTitle);
            elemA_ToTag.setAttribute("href", "#" + lastTag);

            // folder=0 なら青 folder=1ならアウトライン
            if (item.folder === 1) {
                elemA_ToTag.setAttribute("class", "btn btn-outline-primary text-decoration-none");
            }
            else elemA_ToTag.setAttribute("class", "btn btn btn-primary text-decoration-none");
            
            elemLi_Tag.appendChild(elemA_ToTag);
            elemUl_Taglist.appendChild(elemLi_Tag);
        }
    })
    elemBookmark.appendChild(elemUl_Taglist);

    // +++++++++++++++++++++++++++++++
    // 書き出す（リンク一覧）
    /* Font Awesome <ul class="fa-ul">*/
    let elemUl_Bookmarks = document.createElement('ul');
    elemUl_Bookmarks.setAttribute("class", "fa-ul");
    lastTag = "";
    dicTags.forEach(function(item, index, array) {
        // +++++++++++++++++++++++++++++++
        // タイトルバー表示
        if (lastTag !== item.name) {
            lastTag = item.name;

            // +++++++++++++++++++++++++++++++
            // タイトルバー枠
            let elemLi_Tag = document.createElement('li');
            elemLi_Tag.setAttribute("id", "tag");
            // folder=0 ならタグ folder=1ならフォルダー
            if (item.folder === 1) {
                elemLi_Tag.setAttribute("class", "mt-5 p-3 border border-warning bg-light rounded");
            }
            else elemLi_Tag.setAttribute("class", "mt-5 p-3 bg-warning rounded");

            // +++++++++++++++++++++++++++++++
            // テーブル追加
            let elemDiv_Container = document.createElement('div');
            elemDiv_Container.setAttribute("class", "container");

            let elemDiv_Row = document.createElement('div');
            elemDiv_Row.setAttribute("class", "row ");

            // +++++++++++++++++++++++++++++++
            // アイコン
            let elemDiv_Col_Img = document.createElement('div');
            elemDiv_Col_Img.setAttribute("class", "col-1");
            // Font Awesome <i class="fas fa-tags"></i>
            let elemI_ImageT = document.createElement('i');
            // folder=0 ならタグ folder=1ならフォルダー
            if (item.folder === 1) {
                elemI_ImageT.setAttribute("class", "fas fa-folder-open fa-2x");
            }
            else elemI_ImageT.setAttribute("class", "fas fa-tags fa-2x");            
            elemDiv_Col_Img.appendChild(elemI_ImageT);
            elemDiv_Row.appendChild(elemDiv_Col_Img);

            // +++++++++++++++++++++++++++++++
            // タグ／フォルダー名
            let elemDiv_Col_Tag = document.createElement('div');
            elemDiv_Col_Tag.setAttribute("class", "col pl-0");
            let elemSpan_Tag = document.createElement('span');
            // folder=0 ならタグ folder=1ならフォルダー
            if (item.folder === 1) {
                elemSpan_Tag.textContent = 'フォルダー : ' + lastTag.slice(2);
            }
            else elemSpan_Tag.textContent = 'タグ : ' + lastTag;
            elemSpan_Tag.setAttribute("id", lastTag);
            elemDiv_Col_Tag.appendChild(elemSpan_Tag);
            elemDiv_Row.appendChild(elemDiv_Col_Tag);

            elemDiv_Container.appendChild(elemDiv_Row);
            elemLi_Tag.appendChild(elemDiv_Container);
            elemUl_Bookmarks.appendChild(elemLi_Tag);
        }

        // +++++++++++++++++++++++++++++++
        // ブックマークリスト表示
        let elemLi_Bookmark = document.createElement('li');
        elemLi_Bookmark.setAttribute("id", "bookmark");
        elemLi_Bookmark.setAttribute("class", "mt-3 ml-5");

        // リストマーカー
        /* Font Awesome <span class="fa-li"><i class="fas fa-check-square"></i></span>*/
        let elemSpan_ListMark = document.createElement('span');
        elemSpan_ListMark.setAttribute("class", "fa-li");
        let elemI_ImageM = document.createElement('i');
        elemI_ImageM.setAttribute("class", "fas fa-check-square");
        elemSpan_ListMark.appendChild(elemI_ImageM);
        elemLi_Bookmark.appendChild(elemSpan_ListMark);

        // リンク
        let elemA_Url = document.createElement("a");
        let bookmarkTitle = document.createTextNode(item.title);
        elemA_Url.appendChild(bookmarkTitle);
        elemA_Url.setAttribute("href", item.url);
        elemA_Url.setAttribute("target", "_blanc" );
        elemA_Url.setAttribute("rel", "noreferrer noopener" ); // https://developer.mozilla.org/ja/docs/Web/HTML/Element/a
        elemLi_Bookmark.appendChild(elemA_Url);

        // URL
        let elemSpan_Url = document.createElement('span');
        elemSpan_Url.setAttribute("class", "ml-1");
        /* urliconを取得して表示する（すべてアクセスし時間がかかるため使用しない）
        if (item.iconurl) { // <img src="..." class="mr-3" alt="...">
            let elemImg_ImageL = document.createElement('img');
            elemImg_ImageL.setAttribute("class", "mx-1");
            elemImg_ImageL.setAttribute("src", item.iconurl);
            elemImg_ImageL.setAttribute("width", "20px");
            elemImg_ImageL.setAttribute("height", "20px");
            elemImg_ImageL.setAttribute("alt", "🔗"); // 環境依存文字
            elemSpan_Url.appendChild(elemImg_ImageL);
        }
        else {
            // <i class="fas fa-link"></i> */
            let elemI_ImageL = document.createElement('i');
            elemI_ImageL.setAttribute("class", "fas fa-link mx-1");
            elemSpan_Url.appendChild(elemI_ImageL);
        /*}*/
        let bookmarkUrl = document.createTextNode(item.url);
        elemSpan_Url.appendChild(bookmarkUrl);
        elemLi_Bookmark.appendChild(elemSpan_Url);

        elemUl_Bookmarks.appendChild(elemLi_Bookmark);
    })

    elemBookmark.appendChild(elemUl_Bookmarks);
    section.appendChild(elemBookmark);
}
```

# こんな風に動きます
![BoTagCh.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277081/8cf6fae6-4a87-af0a-77de-5a897a7ea056.gif)

# 最後に
個人的にはFireFoxのブックマークは「[ブラウジングライブラリー](https://support.mozilla.org/ja/kb/bookmarks-firefox)」を使って管理しています。
[Ctrl]-Dでブックマークをタグ付き保存して、[Ctrl][Shift]-Oでブラウジングライブラリーを開きブックマークを探します。フォルダーとタグでエクスプローラー風に探せますし、[検索]機能で探すこともでき非常に便利に使っています。

ここまでに記述した内容やコードに興味がわいて「いろいろ試してみたい」とか「もっと調べてみよう」と思っていただけたら嬉しい限りです。