LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@madaaamj

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

Last updated at Posted at 2021-01-04

つくってみよう - FireFox拡張機能でブックマークを一覧表示する 記事一覧

つくってみよう - FireFox拡張機能でブックマークを一覧表示する（１）公式サンプルを体験する
つくってみよう - FireFox拡張機能でブックマークを一覧表示する（２）動作を確認する
[つくってみよう - 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()を呼び出し本体部分を書き出します。
先に生成したdicTagsから情報を取得しながらリストを構築していきます。

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

まずタグをボタン形式で横に並べて一覧表示します。このボタンにはdicTagsのnameからアンカーリンクを生成して設定され、該当するフォルダー名／タグのブックマークリストにジャンプすることができます。
フォルダー名のボタンはbtn-outline-primaryで、タグのボタンはbtn-primaryで表示します。

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

リスト一覧では、リストスタイルに画像を表示するためにFont Awesomeを利用しています。
dicTagsのtitleとurlからリンクを生成します。

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

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

最後に

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?