リンクカードの実験

クリックするとウェブサイトを開けるカード画像

SVG ScreenShot Frame機能をアプリケーション用途に拡張するアイデアの検証

Scrapboxにリンクを貼るときなどに，普通にURLを貼り付けるよりもお洒落

Chrome拡張機能 DynamicGazo で作れる

カードを作りたいページで拡張機能のアイコンをクリック

https://i.gyazo.com/18541aa40c0961044063fdb16d32ee2d.mp4

収集するもの

window.location.href

$('meta[property="og:image"]').attr('content')

リンクカードのテーマ画像をいくつか選べるようにしたい

v.icon Scrapboxふう

Scrapbox (Defaultテーマ) のカードデザインそのもの画像

はてなブログふう

はてなブログカードのデザイン

Twitterふう

独自デザイン

みんなが自由に作れるようなツールを作る?

https://svgscreenshot.appspot.com/c/x/34ee0b6c374d6e171c5509325f53376c.png http://miil.me/u/daiz https://svgscreenshot.appspot.com/c/x/9e42fb2fdc2ccca035625d368c0998f8.png http://daiiz.hatenablog.com/entry/2016/11/29/235600 https://svgscreenshot.appspot.com/c/x/b4c169ba4afa0e85b1e3d2525436b698.png http://daiiz.hatenablog.com/entry/2016/04/06/235000

↑ DynamicGazo または SVG Screenshotをインストールしている人はタイトル部分をクリックできるはず (仕組み＝仮画像をホバーしたときにコンテンツを配信する)．これらの拡張機能インストールしていない人にはただの<img>として表示される．

（真ん中のカードの高さ少し低いのなぜだろう）

タイトル部のtext-heightが原因かも

通常のスクリーンショットと区別したい

v.icon リンクカードはフッターいらない

v.icon Gyazoにアップしない

v.icon /homeの一覧に含めない

外部アプリ専用の一覧でアプリ別に一覧できる

ブログ記事中でも貼り付け実験を始めた

はてなブログに貼り付けたとき，スマホで機能しない

#好きなリンクカードを作る #labs