プロジェクト

全般

プロフィール

QA #1037

未完了

URL貼り付けだけでリンク先のタイトル・要約を表示する

黒 猫 さんが4年以上前に追加. 4年以上前に更新.

ステータス:
回答済
優先度:
通常
担当者:
カテゴリ:
-
対象バージョン:
開始日:
2019/10/26
期日:
進捗率:

0%

予定工数:

説明

■現象/要望

RedmineでURLを貼り付けたとき、SNSやメッセンジャーアプリのように
カード形式のプレビュー表示ができると良い。
(タイトル付きでリンクを書くのが面倒くさい)

■解決策

「はてなブログカード」サービスを利用する。
https://help.hatenablog.com/entry/blogcards

はてなブログ以外での利用について、はてなさんに問い合わせたところ
「使用に特に制限はない。ただしサーバ負荷が著しく高いなどの場合、使用をお断りすることがある」とのこと。
一般的なHPレベルの規模であれば問題なさそうである。

(類似したものにembed.flyというサービスがあるが、こちらは有料)

■対応状況

ViewCustomizeプラグイン導入で実現可能。
URLリンクを探して、すぐ下にブログカードを挿入する。

表示例: スクリーンショット 2019-10-26 13.04.07.png

表示のカスタマイズ実装例:

//----------------------------------------
// URLリンクのサムネイル表示(はてなブログカード).
// @pattern .*
//----------------------------------------
$(function () {

    // Wikiエリア内のURLリンクを全て調査.
    $('div.wiki a[href^=http]').each(function (index, element) {

        // リンク先と文字列が同じ=URLリンクと判定.
        if ($(element).text() == $(element).attr('href')) {

            var url = $(element).attr('href');
            var iframe = $('<iframe>')
                .prop('class', 'hatenablogcard')
                .prop('frameborder', '0')
                .prop('scrolling', 'no')
                .prop('src', 'https://hatenablog-parts.com/embed?url=' + url);
            $(element).after(iframe);
            $(element).after('<br>');
        }
    });
})

■補足

「はてなブログカード」は外部サービスであるため、
一般公開されていないサイト(認証が必要なRedmineの内部リンクも含む)のタイトル・要約の取得はできない。


ファイル

黒 猫 さんが4年以上前に更新

  • 担当者黒 猫 にセット

黒 猫 さんが4年以上前に更新

  • 対象バージョンPlugin対応済 にセット

奈良 裕記 さんが4年以上前に更新

確かに、今ではURLリンクでプレビュー表示するサービスが多いですね。

ただ、下記の様にリンク集的なページの場合、プレビューは必要部分だけ表示したい場合もありそうです。

https://redmine.tokyo/issues/699
https://redmine.tokyo/projects/shinared/wiki/%E9%81%8E%E5%8E%BB%E8%AC%9B%E6%BC%94%E4%B8%80%E8%A6%A7-%E3%83%81%E3%82%B1%E3%83%83%E3%83%88%E9%81%8B%E7%94%A8%E3%83%BB%E5%88%A9%E7%94%A8%E4%BA%8B%E4%BE%8B

対象ページを限定すれば済む話ではありますが。。

他の形式にエクスポート: Atom PDF