Project

General

Profile

QA #1037

Updated by 黒 猫 over 2 years ago

h3. ■現象/要望 

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

 h3. ■解決策 

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

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

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

 h3. ■対応状況 

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

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

 表示のカスタマイズ実装例: 
 <pre><code class="javascript"> 
 //---------------------------------------- 
 // 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>'); 
		 } 
	 }); 
 }) 
 </code></pre> 

 h3. ■補足 

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

Back