とにかくデフォルトのブックマークバーが使えなさすぎて困る!
前はfirefoxやchromeブラウザでブックマークの多段表示というのがプラグインを使用することにより可能だったんですが、ブラウザがアップデートである日プラグインが使えなくなり多段表示が出来なくなってしまいました。
ファビコンのみで多段表示が出来ないと普段色々なサイトを使用しているので、非常に目的のサイトにアクセスするのに時間がかかってしまいます。ブックマーク多い人は普段どうしているんでしょうかね。
そういうイライラをずっと我慢してきましたが、もう我慢出来ない思い、ついに重い腰を上げてツールをもう自分で作ろうと頑張りました。
流行りのpythonに挑戦
ちょうどpythonを勉強中であったためそれで作成することにしました。
多段表示ページ作成の流れ
- firefoxのブックマークをブラウザからエクスポート(pythonの実行ファイルと同じ階層に置く)
- python を実行
- 多段表示ページの作成(python実行ファイルと同じ階層に出来ます)
ブックマークのエクスポート方法
- ブラウザを開いた状態でCTRL +SHIFT+B
- ”インポートとバックアップ”から”HTMLとしてエクスポート”をクリック
- pythonの実行ファイルと同じ階層に保存
▼実際のコードはこんな感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
# -*- 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) |
▼CSSファイル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
*{ 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; } |
▼必要なライブリーをインストール
1 2 3 |
import requests, bs4 from bs4 import BeautifulSoup from tld import get_fld |
▼雛形となるHMTLソースを用意
jquery でリンクhover時にページ上部にリンク先のtitleを表示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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> """ |
▼エクスポートしたブックマークファイルを読み込みます。読み込んだファイルは加工用にBeautifulSoupを使ってパースします。
1 2 3 4 5 |
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文で1つずつaタグを処理していきます。
- get_fld()でドメインを取得します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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文で削除していきます。(因数は削除する属性の数分用意)
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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) #書き込み、保存 |