ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Webはページ同士がリンクで繋がって構成されています。その際、単にURLを付けるだけでもいいですし、内容を引用することもできます。引用を使うことで、リンク先の内容が分かりやすくなり、誘導につなげることができます。

今回紹介するQuotebacksはそんな引用をしやすくするGoogle Chrome機能拡張になります。

Quotebacksの使い方

実行したところです。HTMLで埋め込まれると、このような表示になります。

Markdown形式でコピーすると、次のような文字列がクリップボードに入ります。

> レスポンシブなWebサイトを開発する際には、様々なデバイスでの表示を一気に確認できると便利です。デバイス毎に画面幅が数多くあるので、それらをまとめて表示確認して調整していくという作業が不可欠です。

Source: [Responsively App - レスポンシブWebデザインを効率化·MOONGIFT](https://www.moongift.jp/2020/06/responsively-app-%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%92%e5%8a%b9%e7%8e%87%e5%8c%96/) by @moongift

HTMLだと次のようになります。

<blockquote class="quoteback" data-title="Responsively App - レスポンシブWebデザインを効率化·MOONGIFT" data-author="@moongift" cite="https://www.moongift.jp/2020/06/responsively-app-%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%92%e5%8a%b9%e7%8e%87%e5%8c%96/">
レスポンシブなWebサイトを開発する際には、様々なデバイスでの表示を一気に確認できると便利です。デバイス毎に画面幅が数多くあるので、それらをまとめて表示確認して調整していくという作業が不可欠です。
<footer>@moongift <cite><a href="https://www.moongift.jp/2020/06/responsively-app-%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%92%e5%8a%b9%e7%8e%87%e5%8c%96/">https://www.moongift.jp/2020/06/responsively-app-%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%92%e5%8a%b9%e7%8e%87%e5%8c%96/</a></cite></footer>
</blockquote>
<script note="" src="https://cdn.jsdelivr.net/gh/Blogger-Peer-Review/quotebacks@1/quoteback.js"></script>

面白いのはHTMLの場合、QuotebacksのJavaScriptファイルを読み込んでいることで、Webサイトのリンク先へ誘導する文字などが表示されます。JavaScriptがなかったとしても、引用として問題ない状態で表示できます。リンクが繋がっていくWebのあり方が体現される、面白いライブラリです。

QuotebacksはGoogle Chrome用JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Quotebacks

Quotebacks - quote the web - Chrome ウェブストア

Blogger-Peer-Review/quotebacks: Quote the web

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2