短縮URL作成ツール (x.gd API版)

長いURLをSNSやブログに貼る際、「もっと短くスッキリさせたい」と思ったことはありませんか？

今回は、無料の短縮URLサービス「x.gd」のAPIとGoogle Apps Script (GAS)を連携させて、Bloggerの記事内に自分専用のURL短縮フォームを設置する方法を解説します！

1. 実際に動く「URL Shortener」ツール

まずは完成品をお試しください。URLを入力してボタンを押すと、短縮URLが発行されます。

2. Google Apps Script (GAS) のソースコード

サーバーサイド（中継役）として機能するGASのコードです。APIキーをセットして「ウェブアプリ」としてデプロイします。

function doGet(e) { var longUrl = e.parameter.url; var apiKey = "97f6d00461dae04cf0d2005292b7dcf8"; // あなたのAPIキー if (!longUrl) return ContentService.createTextOutput("URLが空です"); // x.gd API v1.0 完全準拠リクエスト var apiUrl = "https://xgd.io/V1/shorten?url=" + encodeURIComponent(longUrl.trim()) + "&key=" + apiKey.trim(); try { var response = UrlFetchApp.fetch(apiUrl, { "muteHttpExceptions": true }); var data = JSON.parse(response.getContentText()); if (data.status === 200 && data.shorturl) { return ContentService.createTextOutput(data.shorturl); } else { return ContentService.createTextOutput("APIエラー(" + data.status + "): " + (data.message || "不明なエラー")); } } catch (error) { return ContentService.createTextOutput("通信失敗: " + error.toString()); } }

3. Blogger 側の JavaScript ソースコード

上記のツールを動かしている実際のフロントエンド用コードです。Fetch APIを使ってGASへリクエストを飛ばしています。

async function generateShortUrl() { const urlInput = document.getElementById('targetUrl'); // 置き換えた最新のGASデプロイURL const gasUrl = "https://script.google.com/macros/s/AKfycbwt2b5HP3PNzD2ylPpd2wNTU2dhp6cRtpkYsZd6eRfUuMEH4ZquUdPWps-ffIGk-tN9/exec"; try { const fetchUrl = `${gasUrl}?url=${encodeURIComponent(urlInput.value.trim())}`; const response = await fetch(fetchUrl); const text = await response.text(); if (text.startsWith("http")) { document.getElementById('finalUrl').value = text; // 成功時の表示制御... } else { alert("エラー: " + text); } } catch (e) { console.error("通信失敗", e); } }

本ウェブサイト内でご提供している情報・ツールを利用いただくことによって、何らかの損害が生じた、あるいはその可能性があるとしても、当方は一切責任を負いかねます。