ブックマークの開発 - paulbarre/RssReader GitHub Wiki

お気に入りと同様に、フィードの一覧に表示される情報をブックマークに登録します。

登録、読み込み、表示、削除はお気に入りと同じステップになるので、できればこのページを読む前に自分で開発を行ってみてください。

表示についてはページレイアウトを準備した時のものが参考になると思います。

ブックマークの登録

ブックマークを登録するため、bookmark.jsという新しいスクリプトファイルを追加します。また、index.htmlのヘッダーにも追加します。

お気に入りと同じように登録用のメソッドを実装します。

function addBookmark(bookmark) {

    var bookmarks = loadStorage('bookmarks');
    bookmarks.push(bookmark);
    saveStorage('bookmarks', bookmarks);
}

関数の流れは下記のようになります：

  1. ストレージを読み込む
  2. 既にあるブックマークに追加する
  3. 更新された配列を保存する

addBookmarkのbookmark引数の準備をします。ブックマークは、ページのURLとページのタイトルで構成されます。

registerBookmarkという関数で、タイトルとURLからブックマークオブジェクトを作り、保存します。

function registerBookmark(title, url) {

    var bookmark = {
        url: url,
        title: title
    };
    addBookmark(bookmark);
}

次はユーザーが登録ボタンを押した際のタイトルとURLの取得です。

一覧の開発に戻り、feed.jsにあるdisplayFeedResultsを編集します。

function displayFeedResults(xmlData) {

    $('#feed-articles').html('');

    var items = $(xmlData).find('item');
    items.each(function(n) {

        ...

        var html =
            '<article>' +
            '<h3>' + title + '</h3>' +
            '<p>' + description + '</p>' +
            '<a href="' + link + ' target="_blank"">See</a>' +
            '<button class="save-bookmark-btn">登録</button>' +
            '</article>';

        $('#feed-articles').append(html);
    });

    $('.save-bookmark-btn').on('click', function () {
        
    });
}

お気に入りのダウンロードと削除のケースでは、data-urlを使って、URLをボタンのデータに入れました。ブックマークの場合にもボタンのデータを使い、data-titleとdata-urlの設定をします。

これで実装は可能ですが、今回のブックマークの場合には別の方法で実装を行います。

ブックマークしたいページのタイトルは既にh3タグのテキストに存在します。ページのURLはaタグのhrefプロパティに入っています。登録ボタンをクリックする際に、この二つのタグから情報を取得します。

まずタグにクラスを付けます。

function displayFeedResults(xmlData) {

    ...
    items.each(function(n) {

        ...

        var html =
            '<article>' +
            '<h3 class="article-title">' + title + '</h3>' +
            '<p class="article-description">' + description + '</p>' +
            '<a href="' + link + '" target="_blank" class="see-article-link">See</a>' +
            '<button class="save-bookmark-btn">登録</button>' +
            '</article>';

        $('#feed-articles').append(html);
    });

    $('.save-bookmark-btn').on('click', function () {
        
    });
}

ボタンをクリックするタイミングでarticle-titleとsee-article-linkにアクセスします。

ただし、コールバックは$(this)がボタンになっています。隣のタグにアクセスするために親のタグを使います。 HTMLの構造は下記のようになります。

<article>
    <h3></h3>
    <a></a>
    <button></button>
</article>

ボタンの親はarticleになり、articleから全ての子供にアクセスができます。 処理の流れは下記の通りです。

  1. クリックコールバックで、ボタンの親のタグにアクセスする
  2. articleのタグから、article-titleにアクセスし、ページのタイトルを読み込む
  3. articleのタグから、see-article-linkにアクセスし、ページのURLを読み込む
  4. 取得したタイトルとURLをブックマークに登録する
function displayFeedResults(xmlData) {

    ...

    $('.save-bookmark-btn').on('click', function () {
        var article = $(this).parent();
        var title = article.find('.article-title').text();
        var url = article.find('.see-article-link').attr('href');

        registerBookmark(title, url);
    });
}

ブラウザーのデベロッパーツールを使って、ブックマークをストレージに保存できているか確認します。

ブックマークの表示

前回作ったページレイアウトを参考します。

bookmark.jsに新しい関数を追加し、ストレージにある全てのブックマークのHTMLを生成します。

function displayBookmarks() {

    $('#bookmarks-list').html('');

    var bookmarks = loadStorage('bookmarks');
    $.each(bookmarks, function (i, bookmark) {

        var html =
            '<li>' +
            '<a href="' + bookmark.url + '" target="_blank">' + bookmark.title + '</a>' +
            '</li>';
        $('#bookmarks-list').append(html);
    });
}

bookmarks-listは、ブックマークに入れるメニューのリストです。

<section>
    <h2>メニュー</h2>
    ...

    <article>
        <h3>ブックマーク</h3>
        
        <ul id="bookmarks-list"></ul>
    </article>
</section>

ブラウザーでページを更新すると、ブックマークが表示されるのでmain.jsでdisplayBookmarksを呼び出します。

$(document).ready(function () {
    ...
    displayBookmarks();
});

ブックマークを登録するタイミングでページの更新をせずにリストに表示させるため、registerBookmarkにも追加しておきます。

function registerBookmark(title, url) {

    ...
    
    displayBookmarks();
}

ストレージに保存したブックマークがメニューに表示されるかを確認します。

ブックマークの削除

不要になったブックマークを削除します。そのため、下の関数を実装します。

function deleteBookmark(url) {

    var bookmarks = loadStorage('bookmarks');
    bookmarks = bookmarks.filter(function (bookmark) {
        return bookmark.url != url;
    });
    saveStorage('bookmarks', bookmarks);
}

お気に入りの削除と同様になります。ストレージを読み込んで、フィルターで削除したいURLを検索し、更新された配列を保存します。

ユーザーが削除できるようにするため、メニューリストに削除ボタンを追加しましょう。

function displayBookmarks() {

    $('#bookmarks-list').html('');

    var bookmarks = loadStorage('bookmarks');
    $.each(bookmarks, function (i, bookmark) {

        var html =
            '<li>' +
            '<button class="delete-bookmark-btn" data-url="' + bookmark.url + '">削除</button>' +
            '<a href="' + bookmark.url + '" target="_blank">' + bookmark.title + '</a>' +
            '</li>';
        $('#bookmarks-list').append(html);
    });
    
    $('.delete-bookmark-btn').click(function () {
        var url = $(this).data('url');
        deleteBookmark(url);
        displayBookmarks();
    });
}

削除ボタンにクリックイベントを設定し、クリックしたら削除用の関数を呼び出します。

ブラウザーでブックマークの登録及び削除を確認してください。

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️