pythonでブックマークをファビコンのみで多段表示するHTMLページ生成するジェネレーターを作りました！

とにかくデフォルトのブックマークバーが使えなさすぎて困る！

前はfirefoxやchromeブラウザでブックマークの多段表示というのがプラグインを使用することにより可能だったんですが、ブラウザがアップデートである日プラグインが使えなくなり多段表示が出来なくなってしまいました。

ファビコンのみで多段表示が出来ないと普段色々なサイトを使用しているので、非常に目的のサイトにアクセスするのに時間がかかってしまいます。ブックマーク多い人は普段どうしているんでしょうかね。

そういうイライラをずっと我慢してきましたが、もう我慢出来ない思い、ついに重い腰を上げてツールをもう自分で作ろうと頑張りました。

流行りのpythonに挑戦

ちょうどpythonを勉強中であったためそれで作成することにしました。

多段表示ページ作成の流れ

firefoxのブックマークをブラウザからエクスポート(pythonの実行ファイルと同じ階層に置く)
python を実行
多段表示ページの作成（python実行ファイルと同じ階層に出来ます）

ブックマークのエクスポート方法

ブラウザを開いた状態でCTRL +SHIFT+B
”インポートとバックアップ”から”HTMLとしてエクスポート”をクリック
pythonの実行ファイルと同じ階層に保存

▼実際のコードはこんな感じです。

# -*- coding: utf-8 -*-
import requests, bs4
from bs4 import BeautifulSoup
from tld import get_fld
wdhtml = """
<!DOCTYPE html>
    <html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>ブックマーク一覧</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {

  // button要素をクリックしたら発動
  $('a').hover(function() {
    var newText=$(this).text();
    $("div>span").text(newText);
  });
});
</script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>"<span></span>"</div>
<ul>
</ul>
</body>
    </html>
"""
filepath = 'bookmarks2.html'
with open(filepath , encoding='utf-8') as f:
    html = f.read()
    soup = BeautifulSoup(html, "html.parser")
    soupwd = BeautifulSoup(wdhtml, "html.parser")
    for atag in soup.find_all('a'):
        icon=atag.get('icon')
        atag.string.wrap(soup.new_tag('span'))
        atag.insert(0,soup.new_tag('img'))
        atag.img["src"]=icon
        if icon==None:
            href=atag.get('href')
            try:
                favi="https://www.google.com/s2/favicons?domain="+ get_fld(href)
                atag.img["src"]=favi
            except:
        atag.wrap(soup.new_tag('li'))
    links=soup.find_all("a")
    filepath = 'book.html'
    with open(filepath, 'w', encoding='UTF-8') as f02:
        def dellist(x,y,z,w):
            lists=[x,y,z,w]
            for dellist in lists:
                del link[dellist]
        for link in links:
            dellist("add_date","icon_uri","icon","last_modified")
        lis=soup.find_all("li")
        for li in lis:
            soupwd.ul.append(li)
        souppre=soupwd.prettify()
        soupwdstr=str(souppre)
        f02.write(soupwdstr)

# -*- coding: utf-8 -*-

import requests, bs4

from bs4 import BeautifulSoup

from tld import get_fld

wdhtml = """

<!DOCTYPE html>

<head>

<title>ブックマーク一覧</title>

$(function() {

// button要素をクリックしたら発動

$('a').hover(function() {

var newText=$(this).text();

$("div>span").text(newText);

});

</script>

</head>

<body>

<ul>

</ul>

</body>

</html>

"""

filepath = 'bookmarks2.html'

with open(filepath , encoding='utf-8') as f:

html = f.read()

soup = BeautifulSoup(html, "html.parser")

soupwd = BeautifulSoup(wdhtml, "html.parser")

for atag in soup.find_all('a'):

icon=atag.get('icon')

atag.string.wrap(soup.new_tag('span'))

atag.insert(0,soup.new_tag('img'))

atag.img["src"]=icon

if icon==None:

href=atag.get('href')

try:

favi="https://www.google.com/s2/favicons?domain="+ get_fld(href)

atag.img["src"]=favi

except:

atag.wrap(soup.new_tag('li'))

links=soup.find_all("a")

filepath = 'book.html'

with open(filepath, 'w', encoding='UTF-8') as f02:

def dellist(x,y,z,w):

lists=[x,y,z,w]

for dellist in lists:

del link[dellist]

for link in links:

dellist("add_date","icon_uri","icon","last_modified")

lis=soup.find_all("li")

for li in lis:

soupwd.ul.append(li)

souppre=soupwd.prettify()

soupwdstr=str(souppre)

f02.write(soupwdstr)

▼CSSファイル

*{
	box-sizing: border-box;
}
html,body{
margin:0;
padding: 0;
}
body{
	padding: 0 1em;
}
div{
background: #ccc;
height: 4em;
overflow: scroll;
position: fixed;
top:1em;
left:1em;
overflow-x: hidden;
width: calc(100% - 2em);
background: #000000BA;
color: #fff;
}
ul{
	display: grid;
grid-template-columns: repeat(auto-fill,50px);
grid-template-rows: auto;
	list-style: none;
	margin: auto;
	margin-top: 6em;
	padding: 0;
}
img{
	width: 2em;
}
a{
	width: 100%;
    display: block;
    height: 100%;
}
a span{
	display: none;
}

box-sizing: border-box;

}

html,body{

margin:0;

padding: 0;

}

body{

padding: 0 1em;

}

div{

background: #ccc;

height: 4em;

overflow: scroll;

position: fixed;

top:1em;

left:1em;

overflow-x: hidden;

width: calc(100% - 2em);

background: #000000BA;

color: #fff;

}

ul{

display: grid;

grid-template-columns: repeat(auto-fill,50px);

grid-template-rows: auto;

list-style: none;

margin: auto;

margin-top: 6em;

padding: 0;

}

img{

width: 2em;

}

width: 100%;

display: block;

height: 100%;

}

a span{

display: none;

}

▼必要なライブリーをインストール

import requests, bs4
from bs4 import BeautifulSoup
from tld import get_fld

import requests, bs4

from bs4 import BeautifulSoup

from tld import get_fld

▼雛形となるHMTLソースを用意

jquery でリンクhover時にページ上部にリンク先のtitleを表示

wdhtml = """
<!DOCTYPE html>
    <html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>ブックマーク一覧</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {

  $('a').hover(function() {
    var newText=$(this).text();
    $("div>span").text(newText);
  });
});
</script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>"<span></span>"</div>
<ul>
</ul>
</body>
    </html>
"""

wdhtml = """

<!DOCTYPE html>

<head>

<title>ブックマーク一覧</title>

$(function() {

$('a').hover(function() {

var newText=$(this).text();

$("div>span").text(newText);

});

</script>

</head>

<body>

<ul>

</ul>

</body>

</html>

"""

▼エクスポートしたブックマークファイルを読み込みます。読み込んだファイルは加工用にBeautifulSoupを使ってパースします。

filepath = 'bookmarks.html'
with open(filepath , encoding='utf-8') as f:
    html = f.read()
    soup = BeautifulSoup(html, "html.parser")
    soupwd = BeautifulSoup(wdhtml, "html.parser")

filepath = 'bookmarks.html'

with open(filepath , encoding='utf-8') as f:

html = f.read()

soup = BeautifulSoup(html, "html.parser")

soupwd = BeautifulSoup(wdhtml, "html.parser")

▼aタグをfind_all()メソッドを使って取得します。

aタグの中にspanタグを子要素して入れていきます。
aタグをliタグで囲います。
find_all()で取得したデータはlist形式のため、for文で１つずつaタグを処理していきます。
get_fld()でドメインを取得します。

    for atag in soup.find_all('a'):
        icon=atag.get('icon')#base64形式で既にあるファビコン画像を取得します。
        atag.string.wrap(soup.new_tag('span'))#aタグの中にspanタグを子要素して入れていきます。
        atag.insert(0,soup.new_tag('img'))#aタグの中spanの前にimgタグを挿入します。
        atag.img["src"]=icon #base64画像をimgタグ挿入します。
        if icon==None: #ファビコン画像が無い場合にgoogleのAPIを使ってファビコンを取得します。
            href=atag.get('href')
            try:　#try exceptで例外処理をします。（アクセス出来ないページがあるとエラーで止まってしまうため）
                favi="https://www.google.com/s2/favicons?domain="+ get_fld(href)
                atag.img["src"]=favi
            except:
        atag.wrap(soup.new_tag('li'))
    links=soup.find_all("a")
    filepath = 'book.html'

for atag in soup.find_all('a'):

icon=atag.get('icon')#base64形式で既にあるファビコン画像を取得します。

atag.string.wrap(soup.new_tag('span'))#aタグの中にspanタグを子要素して入れていきます。

atag.insert(0,soup.new_tag('img'))#aタグの中spanの前にimgタグを挿入します。

atag.img["src"]=icon #base64画像をimgタグ挿入します。

if icon==None: #ファビコン画像が無い場合にgoogleのAPIを使ってファビコンを取得します。

href=atag.get('href')

try:　#try exceptで例外処理をします。（アクセス出来ないページがあるとエラーで止まってしまうため）

favi="https://www.google.com/s2/favicons?domain="+ get_fld(href)

atag.img["src"]=favi

except:

atag.wrap(soup.new_tag('li'))

links=soup.find_all("a")

filepath = 'book.html'

▼ブックマーク多段表示用のhtmlファイルを作成します。aタグからいらない属性を削除していきます。

dellistで属性削除用の関数を定義し、for文で削除していきます。（因数は削除する属性の数分用意）

    with open(filepath, 'w', encoding='UTF-8') as f02:
        def dellist(x,y,z,w):
            lists=[x,y,z,w]
            for dellist in lists:
                del link[dellist]
        for link in links:
            dellist("add_date","icon_uri","icon","last_modified")
        lis=soup.find_all("li")
        for li in lis:
            soupwd.ul.append(li) #格納したliをulに挿入していく。
        souppre=soupwd.prettify() #htmlを整形する
        soupwdstr=str(souppre)　#書き込み用にstr形式に変換
        f02.write(soupwdstr)　#書き込み、保存

with open(filepath, 'w', encoding='UTF-8') as f02:

def dellist(x,y,z,w):

lists=[x,y,z,w]

for dellist in lists:

del link[dellist]

for link in links:

dellist("add_date","icon_uri","icon","last_modified")

lis=soup.find_all("li")

for li in lis:

soupwd.ul.append(li) #格納したliをulに挿入していく。

souppre=soupwd.prettify() #htmlを整形する

soupwdstr=str(souppre)　#書き込み用にstr形式に変換

f02.write(soupwdstr)　#書き込み、保存

とにかくデフォルトのブックマークバーが使えなさすぎて困る！

流行りのpythonに挑戦

多段表示ページ作成の流れ

ブックマークのエクスポート方法

共有:

関連