{"id":61601,"date":"2022-03-18T08:00:07","date_gmt":"2022-03-17T23:00:07","guid":{"rendered":"http:\/\/apricot-design.com\/wp2023\/?post_type=staffblog&#038;p=61601"},"modified":"2025-08-21T12:10:08","modified_gmt":"2025-08-21T03:10:08","slug":"js-tel-link","status":"publish","type":"staffblog","link":"https:\/\/apricot-design.com\/staffblog\/staffblog\/js-tel-link\/","title":{"rendered":"Javascript\u3067\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306a\u96fb\u8a71\u756a\u53f7\u30ea\u30f3\u30af\u3010Jquery\u3092\u4f7f\u308f\u306a\u3044\u3011"},"content":{"rendered":"<p>\u3055\u3084\u3055\u3093\u3067\u3059\u3002<\/p>\n<p>\u96fb\u8a71\u756a\u53f7\u304c\u63b2\u8f09\u3055\u308c\u305f\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u7b49\u3092\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u304b\u3089\u95b2\u89a7\u3057\u305f\u5834\u5408\u306b\u306f\u3001<br \/>\n\u30ea\u30f3\u30af\u30bf\u30b0\u3067\u305d\u306e\u307e\u307e\u96fb\u8a71\u3092\u304b\u3051\u3089\u308c\u308b\u3088\u3046\u306b\u3059\u308b\u306e\u304c\u3088\u308a\u89aa\u5207\u3067\u3059\u3088\u306d\u3002<br \/>\n\u4e00\u65b9\u3067PC\u304b\u3089\u95b2\u89a7\u3057\u305f\u5834\u5408\u3001\u901a\u5e38\u306f\u96fb\u8a71\u3092\u304b\u3051\u3089\u308c\u306a\u3044\u306e\u3067\u96fb\u8a71\u756a\u53f7\u306e\u30ea\u30f3\u30af\u306f\u4e0d\u8981\u3067\u3059\u3002<\/p>\n<p>\u96fb\u8a71\u756a\u53f7\u306e\u30ea\u30f3\u30af\u3092\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u306e\u6642\u3060\u3051\u6709\u52b9\u306b\u3057\u305f\u3044\u5834\u5408\u3001<br \/>\n\u305d\u306e\u5b9f\u88c5\u65b9\u6cd5\u3092\u691c\u7d22\u3057\u3066\u307f\u308b\u3068jQuery\u3092\u4f7f\u3063\u3066\u30b9\u30de\u30db\u6642\u3060\u3051a\u30bf\u30b0\u3092\u4ed8\u4e0e\u3057\u3066\u30ea\u30f3\u30af\u3055\u305b\u308b\u65b9\u6cd5\u304c\u591a\u304f\u51fa\u3066\u304d\u307e\u3059\u3002<\/p>\n<p>\u3057\u304b\u3057jQuery\u3092\u4f7f\u308f\u305a\u3001<b>\u7d14\u7c8b\u306aJavascript\uff08Vanilla JS\uff09<\/b>\u306e\u307f\u3092\u4f7f\u3063\u3066\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3057\u305f\u3044\u5834\u5408\u3082\u3042\u308a\u307e\u3059\u3088\u306d\u3002<br \/>\n\u305d\u3093\u306a\u65b9\u306e\u305f\u3081\u306bjQuery\u3092\u5229\u7528\u3057\u306a\u3044\u3067\u52d5\u304f\u3001Javascript\u306e\u307f\u306e\u8a18\u8ff0\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/apricot-design.com\/wp2023\/wp-content\/uploads\/2022\/03\/Vanilla.jpg\" alt=\"\" width=\"1000\" height=\"650\" class=\"alignnone size-full wp-image-61599\" \/><\/p>\n<div class=\"commentBox\">\u3061\u306a\u307f\u306b\u300c<b>Vanilla JS<\/b>\u300d\u3068\u306f<b>\u305f\u3060\u306e\u30cd\u30a4\u30c6\u30a3\u30d6\u306aJavascript<\/b>\u306e\u3053\u3068\u3092\u6307\u3057\u307e\u3059\u3002<br \/>\n\u300cVanilla JS\u300d\u3068\u3044\u3046\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u7d39\u4ecb\u8a18\u4e8b\u3082\u3042\u308a\u307e\u3059\u304c\u3001<br \/>\n\u6700\u8efd\u91cf\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\uff08\u4e2d\u8eab\u306f\u4f55\u3082\u306a\u3044\uff09\u3068\u3044\u3046\u30b8\u30e7\u30fc\u30af\u306e\u3088\u3046\u3067\u3059\u3002<\/div>\n<h3 class=\"add_line\"><span class=\"wrap\">\u8a18\u8ff0\u65b9\u6cd5<\/span><\/h3>\n<h4 class=\"add_line_02\">HTML<\/h4>\n<pre style=\"background-color: #f6f6f6; padding: 1.5rem 15px 0;\">\r\n&lt;span data-action=\"call\" data-tel=\"0000-000-0000\"&gt;\u96fb\u8a71\u3059\u308b&lt;\/span&gt;\r\n<\/pre>\n<h4 class=\"add_line_02\">Javascript\uff08Vanilla\uff09<\/h4>\n<pre style=\"background-color: #f6f6f6; padding: 1.5rem 15px 0;\"><code>window.addEventListener('DOMContentLoaded', function(){\r\nif (!isPhone())\r\nreturn;\r\nconst actionTarget = document.querySelectorAll('span[data-action=call]');\r\nfor (let i = 0; i < actionTarget .length; i++){\r\nactionTarget [i].outerHTML = '&lt;a href=\"tel:' + actionTarget [i].dataset.tel + '\"&gt;' + actionTarget [i].outerHTML + '&lt;\/a&gt;';\r\n  }\r\n});\r\nfunction isPhone() {\r\nreturn (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0);\r\n}\r\n<\/code><\/pre>\n<p>\u203b\u30a4\u30f3\u30c7\u30f3\u30c8\u306f\u7701\u7565\u3057\u3066\u3044\u307e\u3059<\/p>\n<h4 class=\"mainTi2\"><span>\u30dd\u30a4\u30f3\u30c8\u3000$.wrap()\u2192outerHTML\u3067\u66f8\u304d\u63db\u3048\u308b<\/span><\/h4>\n<p>jQuery\u3067\u306f\u6307\u5b9a\u3057\u305f\u8981\u7d20\u3092\u5225\u306eHTML\u30bf\u30b0\u3067\u56f2\u3046\u3053\u3068\u304c\u3067\u304d\u308b\u4fbf\u5229\u306a$.wrap()\u304c\u4f7f\u3048\u307e\u3059\u3002<br \/>\n\u3053\u308c\u3092\u4f7f\u3048\u3070\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u6642\u306b<spun>\u3092<a>\u30bf\u30b0\u3067\u56f2\u3046\u3053\u3068\u304c\u5bb9\u6613\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n\u3057\u304b\u3057Javascript\uff08Vanilla JS\uff09\u3067\u306f\u4f7f\u3048\u306a\u3044\u306e\u3067\u3001outerHTML\u3092\u4f7f\u3063\u3066\u81ea\u529b\u3067\u66f8\u304d\u63db\u3048\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u305d\u306e\u305f\u30816\u884c\u76ee\u306e\u8a18\u8ff0\u306f\u3001Javascript\uff08Vanilla JS\uff09\u3068jQuery\u3067\u306f\u3053\u3093\u306a\u306b\u3082\u5dee\u304c\u2026<\/p>\n<p><b>Javascript\uff08Vanilla JS\uff09<\/b><\/p>\n<pre style=\"background-color: #f6f6f6; padding: 1.5rem 15px 0;\"><code>actionTarget[i].outerHTML = '&lt;a href=\"tel:' + actionTarget[i].dataset.tel + '\">' + actionTarget[i].outerHTML + '&lt;\/a&gt;';\r\n<\/code><\/pre>\n<p><b>jQuery<\/b><\/p>\n<pre style=\"background-color: #f6f6f6; padding: 1.5rem 15px 0;\"><code>$.wrap('&lt;a href=\"tel:' + $.data('tel') + '\">&lt;\/a&gt;');\r\n<\/code><\/pre>\n<p>\u3053\u306e\u8a18\u8ff0\u91cf\u306e\u5dee\u304c\u3001\u300cjQuery\u304c\u4fbf\u5229\u300d\u3067\u3042\u308b\u8a3c\u62e0\u3067\u3059\u306d\u3002<\/p>\n<p><b>\u3082\u3063\u3068\u77e5\u308a\u305f\u3044jQuery\u306e\u4fbf\u5229\u306a\u6240\uff01<br \/>\nDOM\u8981\u7d20\u53d6\u5f97\u306e$(&#8216;.hoge&#8217;)<\/b><\/p>\n<div class=\"commentBox\">jQuery\u304b\u3089Javascript\uff08Vanilla JS\uff09\u3078\u306e\u66f8\u304d\u63db\u3048\u6642\u3001<br \/>\n\u79c1\u304c\u30cf\u30de\u3063\u305f\uff08\u3068\u3066\u3082\u521d\u6b69\u7684\u306a\uff09\u70b9\u3067<br \/>\n<b>\u300cdocument.querySelectorAll(selector).addEventListener()\u300d<\/b>\u304c\u5b9f\u884c\u3067\u304d\u306a\u3044\u3068\u3044\u3046\u554f\u984c\u304c\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n<p><b>\u3010\u30a4\u30d9\u30f3\u30c8\u51e6\u7406\u3092\u8a18\u8ff0\u3059\u308b\u305f\u3081\u306b\u4f7f\u308f\u308c\u308bjQuery\u306e\u30e1\u30bd\u30c3\u30c9\u300c$.on\u300d\u3011<\/b><br \/>\n$.on(&#8216;\u30a4\u30d9\u30f3\u30c8\u540d&#8217;)\uff08jQuery\uff09\u306f.addEventListener(&#8216;\u30a4\u30d9\u30f3\u30c8\u540d&#8217;)\uff08Javascript\uff08Vanilla JS\uff09\uff09\u306b\u66f8\u304d\u63db\u3048\u304c\u53ef\u80fd<\/p>\n<p>\u3057\u304b\u3057<br \/>\n$(&#8216;.hoge&#8217;).on()\u306f\u554f\u984c\u306a\u304f\u3066<br \/>\ndocument.querySelectorAll(selector).addEventListener()\u306f\u30a8\u30e9\u30fc\u306b\u306a\u3063\u3066\u3057\u307e\u3046<\/p>\n<p>\u3053\u306e\u554f\u984c\u306b\u76f4\u9762\u3057\u3066\u3001\u6539\u3081\u3066jQuery\u306e\u4fbf\u5229\u3055\u306b\u6c17\u4ed8\u3044\u3066\u3057\u307e\u3063\u305f\u306e\u3067\u3059\u2026\u3002<\/p>\n<p>HTML\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\uff08DOM\u8981\u7d20\uff09\u3092\u53d6\u5f97\u3059\u308b\u6642\u3001jQuery\u3067\u306f$(&#8216;.hoge&#8217;)\u3068\u3044\u3046\u5f62\u3067\u53d6\u5f97\u3057\u307e\u3059\u3088\u306d\u3002<br \/>\n\u3053\u306e$(&#8216;.hoge&#8217;)\u3001\u77e5\u3089\u305a\u306b\u4f7f\u3063\u3066\u3044\u308b\u3046\u3061\u306f\u308f\u304b\u3089\u306a\u3044\u306e\u3067\u3059\u304c\u3001<br \/>\nVanilla JS\u3092\u610f\u8b58\u3059\u308b\u3068\u9a5a\u304f\u307b\u3069\u4fbf\u5229\u306a\u3082\u306e\u3060\u3068\u3044\u3046\u3053\u3068\u306b\u6c17\u4ed8\u304b\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u3069\u3046\u4fbf\u5229\u304b\u3068\u3044\u3046\u3068\u3001$(&#8216;.hoge&#8217;)\u3067\u53d6\u5f97\u3057\u305fDOM\u8981\u7d20\u306b\u306f\u300c\u6697\u9ed9\u7684\u306bforEach\u306e\u3088\u3046\u306a\u30eb\u30fc\u30d7\u51e6\u7406\u304c\u5b9f\u884c\u3055\u308c\u308b\u300d\u306e\u3067\u3059\u3002<br \/>\n\u3053\u306e\u305f\u3081jQuery\u3067\u306f\u30eb\u30fc\u30d7\u51e6\u7406\u3092\u8a18\u8ff0\u3057\u306a\u304f\u3066\u3082$(&#8216;.hoge&#8217;)\u306b\u5bfe\u3057\u3066\u4f55\u304b\u3057\u3089\u51e6\u7406\u3092\u884c\u3046\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<br \/>\n\uff08\u5b9f\u969b\u306b\u306fjQuery\u3082\u5185\u90e8\u7684\u306b\u306f\u8981\u7d201\u30641\u3064\u306b\u51e6\u7406\u3092\u5b9f\u884c\u3057\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u2026\uff09<\/p>\n<p>\u3057\u304b\u3057Javascript\uff08Vanilla JS\uff09\u3067$(&#8216;.hoge&#8217;)\u306e\u4ee3\u308f\u308a\u306b.querySelectorAll\u3067\u8981\u7d20\u3092\u53d6\u5f97\u3057\u305f\u5834\u5408\u306f\u3001<br \/>\n\u30eb\u30fc\u30d7\u51e6\u7406\u7b49\u3092\u884c\u3063\u3066\u8981\u7d20\u4e00\u3064\u4e00\u3064\u306b\u5bfe\u3057\u3066\u51e6\u7406\u3092\u884c\u3046\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u3064\u307e\u308a<b>document.querySelectorAll(selector).addEventListener()\u304c\u5b9f\u884c\u3067\u304d\u306a\u3044\u554f\u984c<\/b>\u3092\u89e3\u6c7a\u3059\u308b\u306b\u306f<br \/>\n<b>\u53d6\u5f97\u3057\u305f\u8981\u7d20\u4e00\u3064\u305a\u3064\u306b.addEventListener()\u3092\u5b9f\u884c\u3059\u308c\u3070\u826f\u3044<\/b>\u306e\u3067\u3059<\/p>\n<p>\u2193\u4e0a\u8a18\u306b\u95a2\u3057\u3066\u8a73\u7d30\u3092\u77e5\u308a\u305f\u3044\u65b9\u306f\u4ee5\u4e0b\u304c\u53c2\u8003\u306b\u306a\u308a\u307e\u3059<\/p>\n<div class=\"btn_more3\"><a target=\"_blank\" href=\"https:\/\/www.mitsue.co.jp\/knowledge\/blog\/frontend\/201805\/24_0917.html\" rel=\"noopener\">\u3069\u3046\u3057\u3066\uff01\uff1fdocument.querySelectorAll(selector).addEventListener()\u304c\u52d5\u304b\u306a\u3044\u308f\u3051<\/a><\/div>\n<\/div>\n<h3 class=\"add_line\"><span class=\"wrap\">\u6700\u5f8c\u306b<\/span><\/h3>\n<p>jQuery\u306f\u3068\u3066\u3082\u4fbf\u5229\u3067\u3059\u304c\u3001\u4f7f\u308f\u306a\u3044\u3067\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u51fa\u6765\u308c\u3070\u305d\u308c\u306b\u8d8a\u3057\u305f\u3053\u3068\u306f\u306a\u3044\u3068\u6700\u8fd1\u611f\u3058\u3066\u3044\u307e\u3059\u3002<br \/>\njQuery\u3092\u4f7f\u308f\u306a\u3051\u308c\u3070JS\u306e\u8aad\u307f\u8fbc\u307f\u304c\u8efd\u304f\u306a\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3057\u3001<br \/>\n\u3042\u308b\u3044\u306fjQuery\u3092\u5229\u7528\u3067\u304d\u306a\u3044\u74b0\u5883\u3067\u306e\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3082\u3042\u308b\u306e\u3067\u3001<br \/>\n\u305d\u306e\u5834\u5408\u306bJavascript\uff08Vanilla JS\uff09\u306e\u307f\u3067\u5bfe\u5fdc\u3067\u304d\u308b\u3060\u3051\u306e\u77e5\u8b58\u304c\u3042\u308b\u3068\u5b89\u5fc3\u3067\u3059\u306d\u3002<\/p>\n<p><b>\u53c2\u8003\u30ea\u30f3\u30af<\/b><br \/>\n<\/a><a target=\"_blank\" href=\"https:\/\/wemo.tech\/2101#index_id2\" class=\"btn_more4\" rel=\"noopener\">\u3010\u8131jQuery\uff01\u3011\u30cd\u30a4\u30c6\u30a3\u30d6\u306aJavaScript\uff08Vanilla JS\uff09\u3078\u306e\u66f8\u304d\u63db\u3048\u65b9\u307e\u3068\u3081<\/a><\/spun><\/p>\n","protected":false},"featured_media":78231,"parent":0,"menu_order":0,"template":"","blog_cat":[25],"blog_tag":[],"blog_recommendation_ct":[],"writing-ct":[16],"class_list":["post-61601","staffblog","type-staffblog","status-publish","has-post-thumbnail","hentry","blog_cat-web","writing-ct-sasayama-sayaka"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/apricot-design.com\/staffblog\/wp-json\/wp\/v2\/staffblog\/61601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/apricot-design.com\/staffblog\/wp-json\/wp\/v2\/staffblog"}],"about":[{"href":"https:\/\/apricot-design.com\/staffblog\/wp-json\/wp\/v2\/types\/staffblog"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/apricot-design.com\/staffblog\/wp-json\/wp\/v2\/media\/78231"}],"wp:attachment":[{"href":"https:\/\/apricot-design.com\/staffblog\/wp-json\/wp\/v2\/media?parent=61601"}],"wp:term":[{"taxonomy":"blog_cat","embeddable":true,"href":"https:\/\/apricot-design.com\/staffblog\/wp-json\/wp\/v2\/blog_cat?post=61601"},{"taxonomy":"blog_tag","embeddable":true,"href":"https:\/\/apricot-design.com\/staffblog\/wp-json\/wp\/v2\/blog_tag?post=61601"},{"taxonomy":"blog_recommendation_ct","embeddable":true,"href":"https:\/\/apricot-design.com\/staffblog\/wp-json\/wp\/v2\/blog_recommendation_ct?post=61601"},{"taxonomy":"writing-ct","embeddable":true,"href":"https:\/\/apricot-design.com\/staffblog\/wp-json\/wp\/v2\/writing-ct?post=61601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}