イメージ画像
イメージ画像

外部サイトのタイトルを1クリックで取得できるChrome拡張機能【Copy Title and Url as Markdown Style】

2022/8/29

(最終更新: 2022/8/29

この記事で説明すること

はてなブログから Gatsby.js に移行するにあたり、困ったことの一つが、「外部サイトのリンクを張るときに自動で情報を取得してくれる機能」の構築だった。

はてなブログでは、記事編集画面にリンクを貼り付けると、このような形で、

はてなブログ

ブログカード形式やタイトル形式で表現することができる。 (WordPress でもサーバ側の PHP でうまいこと変換してくる拡張機能があるらしい。)

やっぱり、記事内リンクは、このような ↓   URL べた貼りだと寂しいので、せめてタイトルだけでも取得したい!

https://bunsugi.com/gatsby-google-analytics

そこで今回は、外部サイトのタイトルを簡単に取得する方法を紹介する。

Google 拡張機能「Copy Title and Url as Markdown Style」

最も使いやすいと思った機能が、Copy Title and Url as Markdown Styleである。

Copy Title and Url as Markdown Style

他にも似たような拡張機能はたくさんあるのだが、さまざまな権限を要求されるものが多く二の足を踏んでしまった。

Copy Title and Url as Markdown Style は、権限の要求も納得できる感じだったのでインストールを実行した。 権限確認

URL 欄の横に実行ボタンを固定する

Chrome 上部の URL 欄の横にある「拡張機能」をクリックして、 拡張機能

拡張機能を「固定」をクリックする。 拡張機能

するとアイコンが表示されるので、あとはコピーしたいときにクリックするだけ! アイコンが表示される

以下のようにコピーすることができる。

[Home | エンジニアを目指す日常ブログ](https://bunsugi.com/)

カスタマイズも可能

オプション機能もあったので、マークダウンのリンク形式以外で使いたい場合は、自分で変更してもよさそう。

  • タイトルを入れたい部分に${title}
  • URL を入れたい部分に${url}

を設定するだけ。

オプション機能

マークダウン記法(デフォルト)

設定

[${title}](${url})

結果

[Home | エンジニアを目指す日常ブログ](https://bunsugi.com/)

タイトルだけ取りたい場合

設定

${title}

結果

Home | エンジニアを目指す日常ブログ

textile 記法

設定

"${title}": ${url}

結果

"Home | エンジニアを目指す日常ブログ": https://bunsugi.com/

自分でコンポーネントを作ってみたが、拡張機能のほうが良い

自分でコンポーネントを作ってみたのだが、外部の API を利用するので、たくさん利用する場合は料金がかかってしまう。

Gatsbyブログにブログカード・ブログタイトルを挿入する(2022/9/3追記あり)

Gatsbyブログにブログカード・ブログタイトルを挿入する(2022/9/3追記あり)

Gatsbyブログに、はてなブログのようなブログカードやブログタイトルを挿入する方法を解説。

https://bunsugi.com/gatsby-blog-card

また、API 方式では、読者がブログを閲覧するたびに情報を取りに行くことになるが、そこまでする必要はないと判断した。

筆者が記事にリンクを貼り付けた時点のタイトルがわかれば十分ではないだろうか。

おわりに

便利な小ワザ(Copy Title and Url as Markdown Style)の紹介でした。



個別連絡はこちらへ→Twitterお問い合わせ

プロフィール

プロフィールイメージ

はち子

事業会社のシステム部門に異動して4年目の会社員。システム企画/要件定義/システムアーキテクチャ等。

Twitter→@bun_sugi

過去の記事について

はてなブログに掲載の記事(主にプログラミングメモ)についてはこちらに掲載しております。(本ブログに移行中)

タグ一覧

関連記事

Copyright© 2022, エンジニアを目指す日常ブログ

お問い合わせ|プライバシーポリシー