SVG\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u306b\u52d5\u304d\u3068\u9b45\u529b\u3092\u52a0\u3048\u308b\u7d20\u6674\u3089\u3057\u3044\u65b9\u6cd5\u3067\u3059\u3002\u3057\u304b\u3057\u3001\u7570\u306a\u308b\u753b\u9762\u30b5\u30a4\u30ba\u306b\u5bfe\u5fdc\u3059\u308b\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u3067\u306f\u3001SVG\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u88c5\u304c\u96e3\u3057\u304f\u306a\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\u4eca\u56de\u306f\u3001\u300csuffix\uff08\u30b5\u30d5\u30a3\u30c3\u30af\u30b9\uff09\u300d\u3092\u4f7f\u3063\u3066\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306aSVG\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u7c21\u5358\u306b\u5b9f\u73fe\u3059\u308b\u65b9\u6cd5\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\r\n
suffix\u3068\u306f\u3001\u5358\u8a9e\u3084\u6587\u5b57\u5217\u306e\u672b\u5c3e\u306b\u4ed8\u3051\u52a0\u3048\u308b\u90e8\u5206\u306e\u3053\u3068\u3067\u3059\u3002\u4eca\u56de\u306e\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3067\u306f\u3001\u30e2\u30d0\u30a4\u30eb\u7528\u306eSVG\u8981\u7d20\u306eID\u306b\u4ed8\u3051\u308b\u300c_sp\u300d\u3068\u3044\u3046\u6587\u5b57\u5217\u304csuffix\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\r\n
\u307e\u305a\u3001HTML\u306e\u69cb\u9020\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\uff1a<\/p>\r\n
<figure id="frnt4efA-pcov1" class="pagecov-wrapper framePA is-animating">\r\n <figcaption class="pagecov-caption" style="background:#1a1311;">\r\n <object style="width:100%;" id="object-svg4EFA"\r\n data-svg_sp='<svg viewBox="0 0 750 1231">...(\u30e2\u30d0\u30a4\u30eb\u7528SVG)...<\/svg>'\r\n data-svg='<svg viewBox="0 0 1440 1466">...(\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u7528SVG)...<\/svg>'>\r\n <\/object>\r\n <\/figcaption>\r\n<\/figure>\r\n<\/code><\/pre>\r\n\u6b21\u306b\u3001JavaScript\u306e\u5b9f\u88c5\u3092\u898b\u3066\u3044\u304d\u307e\u3059\uff1a<\/p>\r\n
(function() {\r\n \/\/SVG\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u52d5\u7684\u306b\u8a2d\u5b9a\u3059\u308b\u95a2\u6570\r\n function setSVGContent() {\r\n const object = document.getElementById('object-svg4EFA');\r\n const isMobile = window.matchMedia('(max-width: 743.9px)').matches;\r\n object.innerHTML = isMobile ? object.getAttribute('data-svg_sp') : object.getAttribute('data-svg');\r\n }\r\n\r\n \/\/\u753b\u9762\u30b5\u30a4\u30ba\u5909\u66f4\u6642\u306bSVG\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u66f4\u65b0\r\n window.addEventListener('resize', setSVGContent);\r\n\r\n \/\/\u521d\u671f\u8a2d\u5b9a\r\n setSVGContent();\r\n\r\n \/\/\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u95a2\u6570\r\n function runAnimation(isFull) {\r\n const suffix = window.matchMedia('(max-width: 743.9px)').matches ? '_sp' : '';\r\n let tl = anime.timeline({\r\n direction: 'normal',\r\n loop: false,\r\n });\r\n\r\n if (isFull) {\r\n \/\/\u30d5\u30eb\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\uff08\u521d\u56de\u306e\u307f\uff09\r\n tl.add({\r\n targets: `#frnt4efA-pcov_ttl1${suffix} [data-fill]`,\r\n stroke: '#fff'\r\n })\r\n \/\/... \u4ed6\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30b9\u30c6\u30c3\u30d7 ...\r\n }\r\n\r\n \/\/\u30b7\u30e7\u30fc\u30c8\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\uff08\u5171\u901a\uff09\r\n tl.add({\r\n targets: `#frnt4efA-pcov_ttl1${suffix} [data-fill], #frnt4efA-pcov_sub2${suffix} [data-fill]`,\r\n fill: function(el) {\r\n return el.getAttribute('data-fill');\r\n },\r\n easing: 'easeInOutSine',\r\n duration: 500\r\n })\r\n \/\/... \u4ed6\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30b9\u30c6\u30c3\u30d7 ...\r\n }\r\n\r\n \/\/\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5b9f\u884c\u306e\u5236\u5fa1\r\n const animationSeen = sessionStorage.getItem('svgAnimationSeen');\r\n if (!animationSeen) {\r\n runAnimation(true);\r\n sessionStorage.setItem('svgAnimationSeen', 'true');\r\n } else {\r\n runAnimation(false);\r\n }\r\n})();\r\n<\/code><\/pre>\r\n\u30b3\u30fc\u30c9\u306e\u89e3\u8aac<\/h2>\r\n\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30ea\u30c6\u30e9\u30eb<\/h3>\r\n
\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30ea\u30c6\u30e9\u30eb\u306f\u3001\u30d0\u30c3\u30af\u30af\u30a9\u30fc\u30c8 () \u3067\u56f2\u307e\u308c\u305f\u6587\u5b57\u5217\u3067\u3059\u3002<\/code>${}` \u3092\u4f7f\u7528\u3057\u3066\u5909\u6570\u3084\u5f0f\u3092\u57cb\u3081\u8fbc\u3080\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\r\n\u4f8b\uff1a<\/p>\r\n
const suffix = '_sp';\r\nconst selector = `#frnt4efA-pcov_ttl1${suffix}`;\r\n\/\/selector \u306f "#frnt4efA-pcov_ttl1_sp" \u306b\u306a\u308a\u307e\u3059\r\n<\/code><\/pre>\r\n\u4e09\u9805\u6f14\u7b97\u5b50\uff08if-else\u306e\u30b7\u30e7\u30fc\u30c8\u30cf\u30f3\u30c9\uff09<\/h3>\r\n
\u6761\u4ef6 ? \u771f\u306e\u5834\u5408\u306e\u5024 : \u507d\u306e\u5834\u5408\u306e\u5024<\/code> \u306e\u5f62\u5f0f\u3067\u66f8\u304b\u308c\u308b\u77ed\u7e2e\u5f62\u306eif-else\u6587\u3067\u3059\u3002<\/p>\r\n\u4f8b\uff1a<\/p>\r\n
const isMobile = window.matchMedia('(max-width: 743.9px)').matches;\r\nconst suffix = isMobile ? '_sp' : '';\r\n\/\/\u30e2\u30d0\u30a4\u30eb\u306e\u5834\u5408 suffix \u306f '_sp'\u3001\u305d\u3046\u3067\u306a\u3044\u5834\u5408\u306f '' \u306b\u306a\u308a\u307e\u3059\r\n<\/code><\/pre>\r\nsuffix\u306e\u6d3b\u7528<\/h3>\r\n
suffix\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u30011\u3064\u306eJavaScript\u30b3\u30fc\u30c9\u3067\u4e21\u65b9\u306eSVG\uff08\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u7528\u3068\u30e2\u30d0\u30a4\u30eb\u7528\uff09\u3092\u5236\u5fa1\u3067\u304d\u307e\u3059\uff1a<\/p>\r\n
targets: `#frnt4efA-pcov_ttl1${suffix} [data-fill]`\r\n<\/code><\/pre>\r\n\u3053\u306e\u884c\u306f\u3001\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u3067\u306f #frnt4efA-pcov_ttl1 [data-fill]<\/code> \u3092\u3001\u30e2\u30d0\u30a4\u30eb\u3067\u306f #frnt4efA-pcov_ttl1_sp [data-fill]<\/code> \u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\r\n\u307e\u3068\u3081<\/h2>\r\n
suffix\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u3067\u30011\u3064\u306eJavaScript\u30b3\u30fc\u30c9\u3067\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u3068\u30e2\u30d0\u30a4\u30eb\u4e21\u65b9\u306eSVG\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5236\u5fa1\u3067\u304d\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u30b3\u30fc\u30c9\u306e\u91cd\u8907\u3092\u907f\u3051\u3001\u4fdd\u5b88\u6027\u306e\u9ad8\u3044\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306aSVG\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\r\n","protected":false},"excerpt":{"rendered":"SVG\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u306b\u52d5\u304d\u3068\u9b45\u529b\u3092\u52a0\u3048\u308b\u7d20\u6674\u3089\u3057\u3044\u65b9\u6cd5\u3067\u3059\u3002\u3057\u304b\u3057\u3001\u7570\u306a\u308b\u753b\u9762\u30b5\u30a4\u30ba\u306b\u5bfe\u5fdc\u3059\u308b\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u3067\u306f\u3001SVG\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u88c5\u304c\u96e3\u3057\u304f\u306a\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\u4eca\u56de\u306f\u3001\u300csuffix\uff08\u30b5\u30d5\u30a3[...]","protected":false},"author":1,"featured_media":7315,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","footnotes":"","vk-ltc-link":"","vk-ltc-target":"0"},"categories":[12],"tags":[],"group":[],"pg":[],"class_list":["post-6400","post","type-post","status-publish","format-standard","has-post-thumbnail","category-javascript"],"acf":[],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/6400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/comments?post=6400"}],"version-history":[{"count":0,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/6400\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media\/7315"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=6400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=6400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=6400"},{"taxonomy":"group","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/group?post=6400"},{"taxonomy":"pg","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pg?post=6400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}