HTML

aタグでSMS(ショートメッセージ)を送信する【HTML】

最終更新日：2024-08-05

公開日：2024-07-26

ページ内に広告が含まれています。

今まで使用した事は正直無いのですが、aタグのリンクからSMS(ショートメッセージ)を送信出来るようです。
SMS送信のやり方をまとめましたので紹介します。

aタグからSMS(ショートメッセージ)を送信する
本文をあらかじめ入力しておく方法
本文の文字化け対策としてエンコードする方法
スマートフォンの場合のみリンクにする
さいごに

aタグからSMS(ショートメッセージ)を送信する

aタグからSMS(ショートメッセージ)を送信させる方法は簡単です。
電話番号やメール送信と同じような感じで以下のタグとなります。

<a href="sms:090-0000-1111">090-0000-1111</a>

※ハイフンはあっても無くてもどちらでも大丈夫です。

本文をあらかじめ入力しておく方法

送信するSMSにあらかじめ本文を設定しておくにはbody=本文を記述します。
iOSとAndroidで若干違ってきますので、それぞれ紹介します。

iOSの場合

iOSの場合は、電話番号に続けて&body=本文の形式で記述します。

<a href="sms:090-0000-1111&body=ここに本文を記述">090-0000-1111</a>

Androidの場合

Androidの場合は、電話番号に続けて?body=本文の形式で記述します。

<a href="sms:090-0000-1111?body=ここに本文を記述">090-0000-1111</a>

本文の文字化け対策としてエンコードする方法

本文をそのまま日本語で入力すると、ユーザーの環境た文字種によっては文字化けする可能性があります。
文字化けを避ける為に、本文をエンコードした方が確実です。

私はエンコードをする際はURLエンコード・デコード｜Tech-Unlimited様をよく利用させてもらっています。

スマートフォンの場合のみリンクにする

上記のように、このまま記述してしまうとPCやタブレットでもリンクとして機能してしまいます。
以前aタグのhref=”tel:”のリンクで電話を発信させる方法【HTML】でも紹介した、スマートフォンの時のみリンクを有効にするやり方を紹介します。

CSSで対応する場合

CSSで対応する場合は、メディアクエリを使用しSPサイズ以外ではリンクを無効化します。

@media screen and (min-width:768px){
    a[href^="tel:"]{
        pointer-events: none;
    }
}

上記の記述で、ブラウザ幅768未満でリンクが有効になります。
厳密に言うとスマホかどうかは判別はできません。PCやiPadなどのタブレットもブラウザ幅が768未満だとリンクが有効になります。

jQueryで対応する場合

var ua = navigator.userAgent.toLowerCase();
var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua);

if (!isMobile) {
    $('a[href^="tel:"]').on('click', function(e) {
        e.preventDefault();
    });
}

上記の記述でユーザーエージェントを取得し、スマホ以外はリンククリック時のイベントを無効化しています。
クリック時以外でも、スマホ以外はクラス付与してCSSで対応するようにリンク自体を無効化してもいいと思います。

※参考記事
<a href=”tel:***”>リンクをスマートフォン端末以外では無効にする – Qiita

ユーザーエージェントについて

ユーザーエージェントは、ユーザーが使用しているデバイス・OS・ブラウザの情報の事をいいます。
これらの情報はユーザー側で変更可能となっており、100%合っているというわけではありません。
また、将来的にユーザーエージェントは廃止になるとも言われたりしています。使用する際はこれらの事も念頭においておく事が必要になります。