{"id":407,"date":"2026-04-11T10:14:09","date_gmt":"2026-04-11T01:14:09","guid":{"rendered":"https:\/\/tool-laboratory.com\/?p=407"},"modified":"2026-04-11T10:27:12","modified_gmt":"2026-04-11T01:27:12","slug":"url-shortener","status":"publish","type":"post","link":"https:\/\/tool-laboratory.com\/en\/url-shortener\/","title":{"rendered":"\u3010\u7121\u6599\u3011URL\u3092\u4e00\u77ac\u3067\u77ed\u304f\u3059\u308b\u30c4\u30fc\u30eb\uff5c\u30af\u30ea\u30c3\u30af\u7387\u3082\u4e0a\u304c\u308bURL\u77ed\u7e2e"},"content":{"rendered":"<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<title>URL\u77ed\u7e2e\u30c4\u30fc\u30eb\uff08\u7121\u6599\u30fb\u9ad8\u901f\u30fb\u5c65\u6b74\u4ed8\u304d\uff09<\/title>\n<meta name=\"description\" content=\"URL\u3092\u4e00\u77ac\u3067\u77ed\u7e2e\u3067\u304d\u308b\u7121\u6599\u30c4\u30fc\u30eb\u3002\u30b3\u30d4\u30fc\u30fb\u5c65\u6b74\u4fdd\u5b58\u30fb\u30b9\u30de\u30db\u5bfe\u5fdc\u3002\u767b\u9332\u4e0d\u8981\u3067\u3059\u3050\u4f7f\u3048\u308bURL\u77ed\u7e2e\u30b5\u30fc\u30d3\u30b9\u3002\">\n\n<style>\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\nbody{\n  font-family: sans-serif;\n  background:#fff;\n  color:#111;\n  padding:20px;\n}\n\n\/* \u2705 PC\u5e83\u304f\u30fb\u30b9\u30de\u30db\u6700\u9069 *\/\n.container{\n  width:100%;\n  max-width:1100px;\n  margin:auto;\n}\n\n\/* \u30bf\u30a4\u30c8\u30eb *\/\n.title{\n  font-size:22px;\n  font-weight:700;\n  margin-bottom:20px;\n}\n\n\/* PC\u306f2\u30ab\u30e9\u30e0 *\/\n.flex{\n  display:block;\n}\n\n@media(min-width:768px){\n  .flex{\n    display:flex;\n    gap:30px;\n    align-items:flex-start;\n  }\n}\n\n.left{ flex:1; }\n.right{ flex:1; }\n\n\/* \u5165\u529b *\/\n.row{\n  display:flex;\n  gap:10px;\n  margin-bottom:12px;\n}\n\n.row input{\n  flex:1;\n  height:48px;\n  padding:0 14px;\n  border-radius:10px;\n  border:1px solid #ccc;\n  font-size:15px;\n}\n\n.row button{\n  height:48px;\n  padding:0 22px;\n  border:none;\n  border-radius:10px;\n  background:#111;\n  color:#fff;\n  font-weight:600;\n  cursor:pointer;\n  transition:.2s;\n}\n\n.row button:hover{\n  background:#333;\n  transform:translateY(-1px);\n}\n\n.row button:active{\n  transform:scale(.97);\n}\n\n\/* \u30a8\u30e9\u30fc *\/\n.err{\n  color:#e74c3c;\n  font-size:13px;\n  display:none;\n  margin-bottom:10px;\n}\n\n\/* \u7d50\u679c *\/\n.result-card{\n  border:1px solid #eee;\n  border-radius:14px;\n  padding:18px;\n  margin-top:10px;\n  background:#fafafa;\n}\n\n.short-url{\n  font-size:18px;\n  color:#0073ff;\n  margin-bottom:10px;\n  word-break:break-all;\n}\n\n.original{\n  font-size:12px;\n  color:#777;\n  margin-bottom:12px;\n}\n\n.btn-row{\n  display:flex;\n  gap:10px;\n}\n\n.btn-copy,.btn-open{\n  padding:8px 14px;\n  border:none;\n  border-radius:8px;\n  background:#eee;\n  cursor:pointer;\n}\n\n.btn-copy:hover,.btn-open:hover{\n  background:#ddd;\n}\n\n\/* \u5c65\u6b74 *\/\n.history-title{\n  margin-top:30px;\n  font-size:16px;\n  font-weight:600;\n}\n\n.hist-item{\n  background:#f5f5f5;\n  padding:10px;\n  border-radius:8px;\n  margin-top:8px;\n  display:flex;\n  gap:10px;\n  align-items:center;\n}\n\n.hist-item .short{\n  color:#0073ff;\n  font-size:13px;\n  flex:1;\n}\n\n.hist-copy{\n  font-size:12px;\n  padding:5px 10px;\n  border:none;\n  border-radius:6px;\n  background:#ddd;\n  cursor:pointer;\n}\n\n\/* \u30b9\u30de\u30db\u6700\u9069 *\/\n@media(max-width:600px){\n  .row{\n    flex-direction:column;\n  }\n\n  .row button{\n    width:100%;\n  }\n}\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"container\">\n\n<h1 class=\"title\">URL\u77ed\u7e2e\u30c4\u30fc\u30eb<\/h1>\n\n<div class=\"flex\">\n\n<!-- \u5de6 -->\n<div class=\"left\">\n\n<div class=\"row\">\n<input id=\"urlInput\" type=\"url\" placeholder=\"https:\/\/example.com\">\n<button id=\"btn\" onclick=\"shorten()\">\u77ed\u7e2e\u3059\u308b<\/button>\n<\/div>\n\n<p class=\"err\" id=\"err\"><\/p>\n\n<div id=\"result\"><\/div>\n\n<\/div>\n\n<!-- \u53f3 -->\n<div class=\"right\">\n\n<p class=\"history-title\">\u5c65\u6b74<\/p>\n<div id=\"history\"><\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<script>\nconst historyList=[];\n\nfunction showErr(msg){\n  const e=document.getElementById('err');\n  e.textContent=msg;\n  e.style.display='block';\n}\n\nfunction hideErr(){\n  document.getElementById('err').style.display='none';\n}\n\nasync function shorten(){\n  const input=document.getElementById('urlInput');\n  const url=input.value.trim();\n\n  if(!url){\n    showErr(\"URL\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\");\n    return;\n  }\n\n  if(!\/^https?:\\\/\\\/\/.test(url)){\n    showErr(\"http:\/\/ \u307e\u305f\u306f https:\/\/ \u3092\u542b\u3081\u3066\u304f\u3060\u3055\u3044\");\n    return;\n  }\n\n  hideErr();\n\n  const btn=document.getElementById('btn');\n  btn.textContent=\"\u751f\u6210\u4e2d...\";\n  btn.disabled=true;\n\n  try{\n    const res=await fetch(\"https:\/\/tinyurl.com\/api-create.php?url=\"+encodeURIComponent(url));\n    const short=await res.text();\n\n    showResult(short,url);\n    addHistory(short,url);\n\n    input.value=\"\";\n\n  }catch{\n    showErr(\"\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\");\n  }\n\n  btn.textContent=\"\u77ed\u7e2e\u3059\u308b\";\n  btn.disabled=false;\n}\n\nfunction showResult(short,orig){\n  document.getElementById('result').innerHTML=`\n    <div class=\"result-card\">\n      <div class=\"short-url\">${short}<\/div>\n      <div class=\"original\">${orig}<\/div>\n      <div class=\"btn-row\">\n        <button class=\"btn-copy\" onclick=\"copy('${short}')\">\u30b3\u30d4\u30fc<\/button>\n        <button class=\"btn-open\" onclick=\"window.open('${short}')\">\u958b\u304f<\/button>\n      <\/div>\n    <\/div>\n  `;\n}\n\nfunction copy(url){\n  navigator.clipboard.writeText(url);\n}\n\nfunction addHistory(short,orig){\n  historyList.unshift({short,orig});\n  if(historyList.length>10)historyList.pop();\n  renderHistory();\n}\n\nfunction renderHistory(){\n  const el=document.getElementById('history');\n\n  el.innerHTML=historyList.map(h=>`\n    <div class=\"hist-item\">\n      <span class=\"short\">${h.short}<\/span>\n      <button class=\"hist-copy\" onclick=\"copy('${h.short}')\">\u30b3\u30d4\u30fc<\/button>\n    <\/div>\n  `).join('');\n}\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p>URL\u3092\u5165\u529b\u3059\u308b\u3060\u3051\u3067\u4e00\u77ac\u3067\u77ed\u7e2e\u3002SNS\u3084\u30d6\u30ed\u30b0\u3067\u30af\u30ea\u30c3\u30af\u3055\u308c\u3084\u3059\u3044\u30ea\u30f3\u30af\u3092\u4f5c\u6210\u3067\u304d\u308b\u7121\u6599\u30c4\u30fc\u30eb\u3002\u30b9\u30de\u30db\u5bfe\u5fdc\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">URL\u3092\u77ed\u304f\u3059\u308b\u3060\u3051\u3067\u30af\u30ea\u30c3\u30af\u7387\u306f\u4e0a\u304c\u308b<\/h2>\n\n\n\n<p>\u9577\u3044URL\u306f\u898b\u3065\u3089\u304f\u3001\u30e6\u30fc\u30b6\u30fc\u306f\u4e0d\u5b89\u306b\u306a\u308a\u307e\u3059\u3002<br>\u305d\u306e\u7d50\u679c\u3001\u305b\u3063\u304b\u304f\u4e0a\u4f4d\u8868\u793a\u3055\u308c\u3066\u3082\u30af\u30ea\u30c3\u30af\u3055\u308c\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u30c4\u30fc\u30eb\u3092\u4f7f\u3048\u3070\u3001URL\u3092\u4e00\u77ac\u3067\u77ed\u304f\u3057\u3066\u898b\u3084\u3059\u304f\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u3053\u306e\u30c4\u30fc\u30eb\u3067\u3067\u304d\u308b\u3053\u3068<\/h2>\n\n\n\n<p>\u30fbURL\u3092\u30ef\u30f3\u30af\u30ea\u30c3\u30af\u3067\u77ed\u7e2e<br>\u30fb\u30b3\u30d4\u30fc\u6a5f\u80fd\u4ed8\u304d\u3067\u3059\u3050\u4f7f\u3048\u308b<br>\u30fb\u5c65\u6b74\u4fdd\u5b58\u3067\u4f55\u5ea6\u3082\u4f7f\u3048\u308b<\/p>\n\n\n\n<p>\u300c\u3059\u3050\u4f7f\u3048\u308b\u300d\u3092\u6700\u512a\u5148\u306b\u8a2d\u8a08\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4f7f\u3044\u65b9\u306f\u3068\u3066\u3082\u7c21\u5358<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>URL\u3092\u5165\u529b<\/li>\n\n\n\n<li>\u30dc\u30bf\u30f3\u3092\u62bc\u3059<\/li>\n\n\n\n<li>\u77ed\u7e2eURL\u3092\u30b3\u30d4\u30fc<\/li>\n<\/ol>\n\n\n\n<p>\u305f\u3063\u305f\u3053\u308c\u3060\u3051\u3067\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u3053\u3093\u306a\u4eba\u306b\u304a\u3059\u3059\u3081<\/h2>\n\n\n\n<p>\u30fb\u30d6\u30ed\u30b0\u306e\u30ea\u30f3\u30af\u3092\u6574\u7406\u3057\u305f\u3044<br>\u30fbSNS\u3067\u30af\u30ea\u30c3\u30af\u3055\u308c\u3084\u3059\u304f\u3057\u305f\u3044<br>\u30fb\u30a2\u30d5\u30a3\u30ea\u30a8\u30a4\u30c8\u306eCTR\u3092\u4e0a\u3052\u305f\u3044<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u95a2\u9023\u30c4\u30fc\u30eb<\/h2>\n\n\n\n<p>\u30fb\u30ad\u30e3\u30c3\u30c1\u30b3\u30d4\u30fc\u751f\u6210\u30c4\u30fc\u30eb<br>\u30fbCTR\u8a3a\u65ad\u30c4\u30fc\u30eb<br>\u30fb\u30bf\u30a4\u30c8\u30eb\u751f\u6210\u30c4\u30fc\u30eb<\/p>\n\n\n\n<p>\u30c4\u30fc\u30eb\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u3055\u3089\u306b\u30af\u30ea\u30c3\u30af\u7387\u3092\u4e0a\u3052\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>","protected":false},"excerpt":{"rendered":"<p>URL\u77ed\u7e2e\u30c4\u30fc\u30eb\uff08\u7121\u6599\u30fb\u9ad8\u901f\u30fb\u5c65\u6b74\u4ed8\u304d\uff09 URL\u77ed\u7e2e\u30c4\u30fc\u30eb \u77ed\u7e2e\u3059\u308b \u5c65\u6b74 URL\u3092\u5165\u529b\u3059\u308b\u3060\u3051\u3067\u4e00\u77ac\u3067\u77ed\u7e2e\u3002SNS\u3084\u30d6\u30ed\u30b0\u3067\u30af\u30ea\u30c3\u30af\u3055\u308c\u3084\u3059\u3044\u30ea\u30f3\u30af\u3092\u4f5c\u6210\u3067\u304d\u308b\u7121\u6599\u30c4\u30fc\u30eb\u3002\u30b9\u30de\u30db\u5bfe\u5fdc\u3002 URL\u3092\u77ed\u304f\u3059\u308b\u3060\u3051\u3067\u30af\u30ea\u30c3\u30af\u7387 &#8230; <a title=\"\u3010\u7121\u6599\u3011URL\u3092\u4e00\u77ac\u3067\u77ed\u304f\u3059\u308b\u30c4\u30fc\u30eb\uff5c\u30af\u30ea\u30c3\u30af\u7387\u3082\u4e0a\u304c\u308bURL\u77ed\u7e2e\" class=\"read-more\" href=\"https:\/\/tool-laboratory.com\/en\/url-shortener\/\" aria-label=\"Read more about \u3010\u7121\u6599\u3011URL\u3092\u4e00\u77ac\u3067\u77ed\u304f\u3059\u308b\u30c4\u30fc\u30eb\uff5c\u30af\u30ea\u30c3\u30af\u7387\u3082\u4e0a\u304c\u308bURL\u77ed\u7e2e\">Read more<\/a><\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-407","post","type-post","status-publish","format-standard","hentry","category-house-tools"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/posts\/407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/comments?post=407"}],"version-history":[{"count":5,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/posts\/407\/revisions"}],"predecessor-version":[{"id":414,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/posts\/407\/revisions\/414"}],"wp:attachment":[{"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/media?parent=407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/categories?post=407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/tags?post=407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}