にわとりプログラマーの備忘録

覚えたことをすぐ忘れてしまう、自分のための備忘録ブログです。

ブログカードを自動生成するWebAPIを作ってみた

チャットワークのメッセージにブログカードを表示するChrome拡張を作りたかったので、URLからブログカードのHTMLタグを生成してくれるWebAPIを作りました。

https://github.com/t-yng/blogcard-generator

ブログカードのCSSについては【ブログカード風】シンプルに記事をシェアするブックマークレットを作りましたCSSを利用させて頂きました。

使い方

以下のAPIエンドポイントにリクエストを送信すれば、HTMLタグを返してくれます。

https://blogcard-generator.herokuapp.com/generator.php?url=<ブログカードを取得したいページのURL>

この記事のブログカードを取得した場合は以下のようなレスポンスが返ってきます。

https://blogcard-generator.herokuapp.com/generator.php?url=http://yng.hatenablog.jp/entry/2016/06/02/230154

{"html":"<div style='width:100%;max-width:500px;margin:0 0 20px 0;background:#fff;border:1px solid#ccc;border-radius:5px;box-sizing:border-box;padding:12px;'><div style='width:100px;height:100px;float:right;margin:0 0 10px 10px;padding:0;position:relative;overflow:hidden;'><a href='http:\/\/sakueji.com\/blogcard-bookmarklet\/'style='position:absolute;width:1000%;left:50%;margin:0 0 0 -500%;text-align:center;'><img src='https:\/\/blog.st-hatena.com\/images\/theme\/og-image-1500.png'style='width:auto;height:100px;margin:0;vertical-align:middle;display:inline;'><\/a><\/div><p style='margin:0;'><a href='http:\/\/yng.hatenablog.jp\/entry\/2016\/06\/02\/230154'style='color:#333;font-weight:bold;text-decoration:none;font-size:17px;margin:0 0 10px 0;line-height:1.5;'>\u30d6\u30ed\u30b0\u30ab\u30fc\u30c9\u3092\u81ea\u52d5\u751f\u6210\u3059\u308bWebAPI\u3092\u4f5c\u3063\u3066\u307f\u305f - \u306b\u308f\u3068\u308a\u30d7\u30ed\u30b0\u30e9\u30de\u30fc\u306e\u5099\u5fd8\u9332<\/a><\/p><p style='margin:0;color:#666;font-size:11px;line-height:1.5;'>\u30c1\u30e3\u30c3\u30c8\u30ef\u30fc\u30af\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u306b\u30d6\u30ed\u30b0\u30ab\u30fc\u30c9\u3092\u8868\u793a\u3059\u308bChrome\u62e1\u5f35\u3092\u4f5c\u308a\u305f\u304b\u3063\u305f\u306e\u3067\u3001URL\u304b\u3089\u30d6\u30ed\u30b0\u30ab\u30fc\u30c9\u306eHTML\u30bf\u30b0\u3092\u751f\u6210\u3057\u3066\u304f\u308c\u308bWebAPI\u3092\u4f5c\u308a\u307e\u3057\u305f\u3002 \u4ee5\u4e0b\u306eAPI\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306b\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3059\u308c\u3070\u3001HTML\u30bf\u30b0\u3092\u8fd4\u3057\u3066\u304f\u308c\u307e\u3059\u3002 https:\/\/blogcard-generator.herokuapp.com\/generator.php?url=<\u30d6\u30ed\u30b0\u30ab\u30fc\u30c9\u3092\u53d6\u5f97\u3057\u305f\u3044\u30da\u30fc\u30b8\u306eURL><\/p><div style='border-top:1px solid#eee;clear:both;margin:10px 0 0 0;padding:0;'><p style='color:#999;margin:3px 0 0 0;font-size:11px;'><img src='http:\/\/favicon.hatena.ne.jp\/?url=http:\/\/yng.hatenablog.jp\/entry\/2016\/06\/02\/230154'style='margin:0 5px 0 0;padding:0;border:none;display:inline;vertical-align:middle;'>yng.hatenablog.jp<img src='http:\/\/b.hatena.ne.jp\/entry\/image\/http:\/\/yng.hatenablog.jp\/entry\/2016\/06\/02\/230154'style='margin:0 0 0 5px;padding:0;border:none;display:inline;vertical-align:middle;'><\/p><\/div><\/div>"}

取得したHTMLタグを埋め込んでブラウザ上で表示した場合は下のように表示されます。 f:id:t-yng:20160602231740p:plain