webサイトの「URLを共有する」を実現するために使ったJavaScriptライブラリをまとめた

##前提(本質的には関係ないです)

• Spring Bootを利用したwebアプリケーションです。
• テンプレートエンジンはThymeleafを使用しています。
• HTMLは必要な部分のみ記載しています。
• jQueryを使用しています。

##QRコード作成
###qrcode-generator

https://cdnjs.com/libraries/qrcode-generator
https://www.npmjs.com/package/qrcode-generator

###具体例

send_by_qr.html

<!-- ~~ -->
<div class="form-group offset-sm-3 col-sm-3" id="qrcode">
	ここにQRコードが入ります
</div>
<!-- サーバサイドから渡されたURLをいったん保持します -->
<input type="hidden" th:value="${qr}" id="qrvalue" />
<!-- ~~ -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/qrcodegenerator/x.x.x/qrcode.min.js"></script>

make_qr.js

// 画面表示時にid指定したDOM要素のvalueからQRコードを生成します。
$(function() {
	var qr = qrcode(0, 'M');
	if ($('#qrcode').length > 0) {
		var qr = qrcode(0, 'M');
		qr.addData($('#qrvalue').val());
		qr.make();
		$('#qrcode').html(qr.createImgTag(4, 16));
	}
});

##LINEで共有
###具体例

send_by_line.html

<!-- ~~ -->
<a id="icon_line" class="任意のCSS"><i class="任意のCSS"></i>LINEで共有する</a>
<!-- ~~ -->

send_by_line.js

$(function() {
	$('#icon_line').on('click', function(){
		window.open("https://social-plugins.line.me/lineit/share?url=" + encodeURIComponent($('#qrvalue').val()),
				"_blank",	"top=50,left=50,width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1");
		return false;
	});
});

##クリップボードにコピー
###clipboardjs

https://clipboardjs.com/
https://haniwaman.com/clipboard-js/#clipboardjs

####具体例

send_by_clipboard.html

<!-- ~~ -->
<p class="form_label mb32">
	<textarea id="text_area_qr" th:text="${qr}" class="form_control">https://example.com</textarea>
</p>
<p>
	<button class="任意のCSS" data-clipboard-target="#text_area_qr">クリップボードにコピー</button>
</p>
<input type="hidden" th:value="${qr}" id="qrvalue" />
<!-- ~~ -->
<!-- clipboardjsはライブラリをダウンロードしてよしなに配置しています。 -->
<script th:src="@{/js/clipboard.min.js}"></script>

send_by_clipboard.js

$(function() {
	new ClipboardJS('.btn-clipboard').on('success', function(e) {
          // ぬるっと現れてふわっと消える
	  $('.clipboard-success').fadeIn(100).fadeOut(2000);
	});
});