ブログを書いているとリンクを示す際にブログカードが欲しくなる時があります。今回はブログカードをどのように作成するかをまとめます。
作成方法の検討
ブログカードを作成する方法を調べたところ大きく分けて4つあるようでした。
- はてなブログのブログカードを使う
- ほかのプログカードを生成する外部のAPIを利用する
- localhostにブログカードのサーバーを立てる
- ブログカードを作成するためのHTML&CSSを自前で作成する
それぞれを比較します
はてなブログのブログカードを使う
はてなブログのブログカードを使うと以下のように表示されます。
1<iframe class="hatenablogcard" style="width:100%;height:155px;max-width:680px;" title="" src="https://hatenablog-parts.com/embed?url=http://apple.com" width="300" height="150" frameborder="0" scrolling="no"></iframe>
この方法は簡単にブログカードを作ることができる反面、はてなさんのAPIがいつ終了してしまうかわからないこと(そもそも公式に使ってよいと書かれているわけはない)や<iframe>を利用して強引？に埋め込んでいる点やデザインを自由に変更できないという欠点があります。また、dark modeにも対応していません。
他のプログカードを生成する外部のAPIを利用する
iframely.comなどの外部のAPIを利用することでブログカードを作成することができます。このような方法では、無料枠の制限などを考慮する必要があります。 また、自前でAPIを作成することもできますがHugoの静的なサイトの理念からは離れてしまいます。
https://enjoyall.comichi.com/aws_lambda/
【初めてのaws】aws lambdaでウェブサイトのmetaタグ取得APIを作る ｜ enjoyall
localhostにブログカードのサーバーを立てる
面白い方法ではありますが上と同様にHugoの静的なサイトの理念からは離れてしまいます。 例:
SIS Lab
https://www.meganii.com/blog/2020/02/02/blogcard-in-hugo/
HugoでAMP対応のブログカードを作る - SIS Lab
ブログカードを作成するためのHTML&CSSを自前で作成する
テンプレートを作るまでが大変ですが、デザインも自由にできるため、今回はこれを行うことにしました。方法としてはブックマークレットでOPGを利用してブログカードを作るために必要な情報を取得します。
OPGを取得するブックマークレットを作成する
javascriptで以下のようなコードを作成し、ブックマークレットに登録しました。ブックマークレットとはブラウザのブックマークにjavascriptを登録したもののことです。ブックマークレットに登録するためにコードをclouse compilerのSIMPLE_OPTIMIZATIONSで最適化しました。faviconを取得するためにGoogleのAPIを利用しています。また、サイトがhttpプロトコルの場合はnavigator.clipboardapiが利用できないため、プロンプトから手動でコピーします。
1javascript: (
2 function () {
3 console.log("v1.0.2");
4 var url = location.href;
5
6 // get title
7 try {
8 title = document.querySelector('meta[property="og:title"]').getAttribute('content');
9 } catch (e) {
10 title = document.title;
11 }
12
13 // get og image
14 try {
15 ogimage = document.querySelector('meta[property="og:image"]').getAttribute('content');
16 } catch (e) {
17 ogimage = '';
18 }
19
20 // site name
21 try {
22 sitename = document.querySelector('meta[property="og:site_name"]').getAttribute('content');
23 } catch (e) {
24 sitename = '';
25 }
26
27 // get decription
28 try {
29 description = document.querySelector('meta[property="og:description"]').getAttribute('content');
30 } catch (e) {
31 try {
32 description = document.querySelector('meta[name="description"]').getAttribute('content');
33 } catch (e) {
34 try {
35 description = document.querySelector('meta[name="Description"]').getAttribute('content');
36 } catch (e) {
37 description = '';
38 }
39 }
40 } finally {
41 description = description.replace(/\r?\n/g, "");
42 }
43
44 // get icon
45 try {
46 favicon = document.querySelector('link[rel="icon"]').getAttribute('href');
47 } catch (e) {
48 favicon = '';
49 }
50
51 var source = `<a href="${url}">
52 <div class="bcard-wrapper">
53 <span class="bcard-header withgfav">
54 <div class="bcard-favicon" style="background-image: url(https://www.google.com/s2/favicons?domain=${url})"></div>
55 <div class="bcard-site">
56 <p>${sitename}</p>
57 </div>
58 <div class="bcard-url">
59 <p>${url}</p>
60 </div>
61 </span>
62 <span class="bcard-main withogimg">
63 <div class="bcard-title">
64 <p>${title}</p>
65 </div>
66 <div class="bcard-description">${description}</div>
67 <div class="bcard-img" style="background-image: url(${ogimage})">
68 </div>
69 </span>
70 </div>
71</a>`;
72 prompt('Copy to clipboard is not supported for this page. Please copy manually', source);
73 // console.log(title);
74 // console.log(ogimage);
75 // console.log(description);
76 // console.log(favicon);
77 }
78)();
HTML,CSSは下のサイトを参考にカスタマイズしました。変更点としてはOPG画像とブログカードを角丸にしたことと、タイトルやサイト名の上だけでなくカード全体をリンクとしたこと、ダークモードに対応したこと、最大の横幅を長くしたことです。
Cottpic
http://io.cottpic.com/simple-blogcard-generator.html
リッチリンクを手軽に作成！ ブログカードジェネレーター
1.bcard-wrapper{
2 display: block;
3 width: 100%;
4 max-width: 800px;
5 margin: 10px 0px;
6 padding: 12px;
7 border: 1px solid #e0e0e0;
8 border-radius: 5px;
9}
10
11.dark .bcard-wrapper{
12 border-color: #333;
13}
14.bcard-site,.bcard-url{
15 font-size: 12px;
16 line-height: 1.3;
17 overflow: hidden;
18 max-height: 15px;
19 display: -webkit-box;
20 -webkit-box-orient: vertical;
21 -webkit-line-clamp: 1;
22}
23.bcard-header {
24 position: relative;
25 height: 30px;
26 margin-bottom: 5px;
27 display: block;
28}
29.withgfav{padding-left: 23px;}
30.bcard-favicon {position: absolute;
31 top: 0px; left:0px; width:16px; height:16px;}
32.bcard-main{
33 overflow: hidden;
34 position: relative;
35 display: block;
36}
37.withogimg{
38 padding-right: 110px;
39 height: 100px;
40}
41 .bcard-img {
42width: 100px;
43height: 100px;
44position: absolute;
45 top: 0;
46 right: 0;
47 background-size:cover;
48 background-position:center center;
49 border-radius: 5px;
50}
51 .bcard-title{
52 font-size: 17px;
53 margin: 0 0 2px;
54 line-height: 1.4;
55 max-height: 47px;
56 overflow: hidden;
57 display: -webkit-box;
58 -webkit-box-orient: vertical;
59 -webkit-line-clamp: 2;
60 font-weight: bold;
61}
62 .bcard-description {
63 line-height: 1.5;
64 font-size: 12px;
65 max-height: 72px;
66 overflow: hidden;
67 display: -webkit-box;
68 -webkit-box-orient: vertical;
69 -webkit-line-clamp: 3;
70}
71/* .bcard-title p{color:#424242;} */
72.bcard-url p{color:#9e9e9e;}
73.bcard-title p:hover,.bcard-url p:hover,.bcard-site p:hover{text-decoration:underline;}
これでブックマークレットをクリックするだけでブログカードのHTMLがコピーされます。実際の見た目はこのページのブログカードを見てください。
Youtube
Reference
上に出てきていないサイトで参考になったのは以下のサイトです。
https://vanillaice000.blog.fc2.com/blog-entry-1074.html
ブログカード作成ブックマークレットをアップデートしました