【LINE友だち追加】デバイスによりQRコードとリンクボタンを出し分ける方法

javascript-prograshi（プロぐらし）-kv JavaScript
記事内に広告が含まれていることがあります。

WEBページ経由でLINEの友だち追加をするときに、スマホなどのLINEアプリがあるデバイスでアクセスした場合は「LINEの友だち追加ボタン」を表示し、それ以外のPCなどでアクセスした場合はスマホで読み込んでもらうためのQRコードを表示したい場合があります。

ここではその方法を解説しています。


HTMLとCSSの準備

まずはHTMLとCSSを作成します。

スマホ用のLINE友だち追加ボタンと、PC用のQRコードを表示するためのdivタグ（こちらは空っぽ）を用意します。

<a id="line-add-btn" href="line://app/2006234711-aaabbbccc?" class="btn_line">LINE友だち登録
</a>

<div id="qrcode"></div>

<style>
div#qrcode{
    text-align: center;
}

a.btn_line {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 180px;
	margin: auto;
	padding: 10px 20px;
	font-weight: bold;
	border-radius: 0.3rem;
	border-bottom: 7px solid #49796B;
	background: #06C755;
	color: #fff;
}
a.btn_line:hover {
    background: #06C755;
	margin-top: 12px;
	border-bottom: 1px solid #49796B;
	color: #fff;
}
</style>


画面の表示は以下のようになります。



QRコード生成用のCDNの読み込み

QRコードを生成するためのCDNを読み込みます。

headタグに以下を記述します。

<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>


WordPressの場合は、functions.phpに以下を記述します。

LINE友だち追加のページ（以下ではURLスラッグがlp-line-link）でのみ必要となるため、is_page関数を使って読みこむページを限定します。

function child_enqueue_js() {
	
	//QRコード生成用のCDN
	if (is_page('lp-line-link')) {
        wp_enqueue_script(
			'qrcode-library', // スクリプトのハンドル名（任意）
            'https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js',
            array(), // 依存スクリプト（今回はなし）
            null, // バージョン番号（CDNを使う場合は null）
            true // フッターに追加
        );
    }
}

add_action( 'wp_footer', 'child_enqueue_js' );



JavaScriptの記述

処理の内容：パラメータを取得してリンク先/QRコードのURLの末尾に付与する

LINE友だち追加では、申込フォームに申し込んだ人とLINE登録した人を紐づけるため、ページにURLに?id=yyyymmddhhmmssという形で識別用のIDをパラメータとしてつけています。

例： https://example.com/lp-line-link/?id=20241210143447

このIDを取得してLINEの友だち追加ボタンとQRコードのリンク先にパラメータとして追加します。


PCでアクセスした場合
  1. PCかどうか判定する。
  2. LINE追加ボタンを非表示にする。
  3. パラメータを取得し、QRコード用のURLを生成する。
  4. QRコードを作成して、divタグ内に追加する。
スマホでアクセスした場合
  1. PCかどうか判定する。
  2. パラメータを取得し、パラメータ付きのURLを生成する。
  3. LINE追加ボタンのリンク先に生成したURLを割り当てる。


JavaScript

JavaScriptは以下のようになります。

///////LINEボタンリンク//////	
// PCデバイスの判定
function isPC() {
	const userAgent = navigator.userAgent;
	return !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
}

// URLのパラメータを取得
function getQueryParams() {
	const params = new URLSearchParams(window.location.search);
	return params.toString(); // パラメータ全体を文字列で返す
}

// QRコードを生成
function generateQRCode(url) {
	const qrCodeContainer = document.getElementById("qrcode");
	if (!qrCodeContainer) {
		console.error("QRコードのコンテナが見つかりません。");
		return;
	}

	// QRコード生成用のCanvasを作成
	const canvas = document.createElement("canvas");
	qrCodeContainer.innerHTML = ""; // 既存の内容をクリア
	qrCodeContainer.appendChild(canvas);

	// QRコードを生成
	QRCode.toCanvas(canvas, url, function (error) {
		if (error) {
			console.error("QRコードの生成中にエラーが発生しました:", error);
		} else {
			console.log("QRコードが正常に生成されました:", url);
		}
	});
}

// メイン処理
if (isPC()) {
	// PCの場合は「line-add-btn」を非表示にする
	const lineAddBtn = document.getElementById("line-add-btn");
	if (lineAddBtn) {
		lineAddBtn.style.display = "none";
	}

	// QRコード生成
	const baseURL = "line://app/2006234711-aaabbbccc";
	const queryParams = getQueryParams();
	const fullURL = queryParams ? `${baseURL}?${queryParams}` : baseURL;

	// URLをコンソールに表示（デバッグ用）
	console.log("生成するURL:", fullURL);

	// URL全体をエンコード
	const encodedURL = encodeURI(fullURL);

	generateQRCode(encodedURL);

} else {
	// URLパラメータを取得
	const params = new URLSearchParams(window.location.search);
	const paramString = window.location.search;
	console.log("paramString:", paramString);

	// ボタンリンクを取得
	const buttonLink = document.getElementById('line-add-btn');
	console.log("buttonLink:", buttonLink);

	// パラメータをリンクのURL末尾に追加
	if (buttonLink && paramString) {
		buttonLink.href = buttonLink.href.replace(/\?$/, '') + paramString;
	}
}




コード解説

PCデバイスの判定

// PCデバイスの判定
function isPC() {
	const userAgent = navigator.userAgent;
	return !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
}


「navigator.userAgent」現在使用しているブラウザのユーザーエージェントを取得します。

例えば、スマホでiPhoneでアクセスした場合は以下のようになります。

「Mozilla/5.0 (iPhone; CPU iPhone OS 14_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1」

このように、スマホであればユーザーエージェントに「iPhone」「Androind」「iPad」といった文字列が入ります。

そこで、JavaScriptのtestメソッドを使って、指定した文字列の中にその値があるかチェックし、「!」を使って存在しない場合にtrueを返します。

つまり、デバイスがPCであればtrueになります。



URLパラメータの取得

// URLのパラメータを取得
function getQueryParams() {
	const params = new URLSearchParams(window.location.search);
	return params.toString(); // パラメータ全体を文字列で返す
}

new URLSearchParams(window.location.search)では現在のページのパラメータを取得することができます。

この状態ではKeyValue形式（例： { ‘name’ => ‘taro’, ‘age’ => ’30’ }）になっているので、toStringsを使って文字列にパースします。

これで、パラメータの「id=20241210143447」が取得できます。



QRコードの生成

QRコード化するためのURLを生成します。上記で取得したパラメータをbaseURLの後ろにつけます。

	const baseURL = "line://app/2006234711-aaabbbccc";
	const queryParams = getQueryParams();
	const fullURL = queryParams ? `${baseURL}?${queryParams}` : baseURL;

	// URLをコンソールに表示（デバッグ用）
	console.log("生成するURL:", fullURL);

	// URL全体をエンコード
	const encodedURL = encodeURI(fullURL);

QRコード化したいURLを「generateQRCode関数」に渡します。

QRCode.toCanvasを使ってQRコードを生成します。

// QRコードを生成
function generateQRCode(url) {
	const qrCodeContainer = document.getElementById("qrcode");
	if (!qrCodeContainer) {
		console.error("QRコードのコンテナが見つかりません。");
		return;
	}

	// QRコード生成用のCanvasを作成
	const canvas = document.createElement("canvas");
	qrCodeContainer.innerHTML = ""; // 既存の内容をクリア
	qrCodeContainer.appendChild(canvas);

	// QRコードを生成
	QRCode.toCanvas(canvas, url, function (error) {
		if (error) {
			console.error("QRコードの生成中にエラーが発生しました:", error);
		} else {
			console.log("QRコードが正常に生成されました:", url);
		}
	});
}



タイトルとURLをコピーしました