diff --git a/extractor/index.html b/extractor/index.html deleted file mode 100644 index 55109d5..0000000 --- a/extractor/index.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - SpreadSheetIDExtractor - - - -

スプシID抽出 & ドライブ画像リンク変換ツール

-
-

本ツールはSpreadSyncCMSを使用する際に必要なID & 画像リンクを変換するツールです。IDはGASに記載する際にURLから抽出する必要があり、画像リンクはスプシのimgの行に書き込む際に変換が必要です。

- -

スプレッドシートID抽出

-

GoogleスプレッドシートのURL内のIDを抽出します。

-

【抽出前】https://docs.google.com/spreadsheets/d/10OZa1MYV1zZVjOMZzoBglNwW0BRp55Wn2OQkjbaIGo8/edit#gid=771807520

-

【抽出後】10OZa1MYV1zZVjOMZzoBglNwW0BRp55Wn2OQkjbaIGo8

- - - -
- -

Drive画像リンク変換

-

Googleドライブの画像リンクをimgタグで利用できるURLに変換します。

-

【変換前】https://drive.google.com/file/d/1M0IIk14mg_G0eBf3yaLk1PD5JEz--6RA/view?usp=sharing

-

【変換後】https://lh3.google.com/u/o/d/1M0IIk14mg_G0eBf3yaLk1PD5JEz--6RA

- - - -
-
- - - diff --git a/extractor/script.js b/extractor/script.js deleted file mode 100644 index f5002aa..0000000 --- a/extractor/script.js +++ /dev/null @@ -1,61 +0,0 @@ -document.getElementById("spreadsheetUrlInput").addEventListener("blur", function() { - var url = this.value; - if(SpreadsheetUrl(url)) { - document.getElementById("spreadsheetIdDisplay").value = extractSpreadsheetId(url); - document.getElementById("spreadsheetWarning").textContent = ''; - } else { - document.getElementById("spreadsheetWarning").textContent = '正しいスプレッドシートのURLを入力してください。'; - } -}); - -document.getElementById("driveUrlInput").addEventListener("blur", function() { - var url = this.value; - if(DriveUrl(url)) { - document.getElementById("driveUrlDisplay").value = convertDriveUrlToImageTag(url); - document.getElementById("driveWarning").textContent = ''; - } else { - document.getElementById("driveWarning").textContent = '正しいドライブの共有リンクを入力してください。'; - } -}); - -function SpreadsheetUrl(url) { - return /\/spreadsheets\/d\/[a-zA-Z0-9-_]+/.test(url); -} - -function DriveUrl(url) { - return /\/file\/d\/[a-zA-Z0-9-_]+/.test(url); -} - -function extractSpreadsheetId(url) { - var matches = /\/spreadsheets\/d\/([a-zA-Z0-9-_]+)/.exec(url); - return matches ? matches[1] : ''; -} - -function convertDriveUrlToImageTag(url) { - var fileId = extractFileId(url); - return "https://lh3.google.com/u/o/d/" + fileId; -} - -function extractFileId(url) { - var matches = /\/file\/d\/([a-zA-Z0-9-_]+)/.exec(url); - return matches ? matches[1] : ''; -} - -document.getElementById("copySpreadsheetId").addEventListener("click", function() { - copyToClipboard("spreadsheetIdDisplay"); -}); - -document.getElementById("copyDriveUrl").addEventListener("click", function() { - copyToClipboard("driveUrlDisplay"); -}); - -function copyToClipboard(elementId) { - var copyText = document.getElementById(elementId).value; - navigator.clipboard.writeText(copyText) - .then(() => { - console.log('Text copied to clipboard'); - }) - .catch(err => { - console.error('Error in copying text: ', err); - }); -} \ No newline at end of file diff --git a/extractor/style.css b/extractor/style.css deleted file mode 100644 index 6bd8e3c..0000000 --- a/extractor/style.css +++ /dev/null @@ -1,87 +0,0 @@ -body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: #f2f2f2; - color: #333; - padding: 20px; - line-height: 1.6; -} - -h1 { - color: #2c3e50; - font-size: 1.8em; - margin-bottom: 0.7em; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); - text-align: center; -} - -h2 { - color: #34495e; - font-size: 1.4em; - padding: 0 8px; - border-left: #4d7aa8 solid 4px; -} - -p { - color :#34495e; - font-size: 0.9em; -} - -input[type="text"], button { - width: 75%; - padding: 10px; - margin: 10px 0; - border-radius: 5px; - border: 1px solid #ccc; - box-shadow: 2px 2px 5px rgba(0,0,0,0.1); -} - -input[type="text"] { - box-sizing: border-box; -} - -button { - width: auto; - background-color: #4caf50; - color: white; - border: none; - cursor: pointer; - transition: background-color 0.3s ease; -} - -button:hover { - background-color: #45a049; -} - -.warning { - color: red; - margin-top: 5px; -} - -.container { - width: 70%; - margin: auto; - overflow:scroll -} - -@media screen and (max-width: 700px) { - h1 { - font-size: 1.3em; - } - - h2 { - font-size: 1.1em;; - } - - p { - font-size: 0.7em; - } - - .container { - width: 95%; - margin: 20px auto; - } - - input[type="text"], button { - width: 100%; - } -} diff --git a/system/extractor/index.html b/system/extractor/index.html new file mode 100644 index 0000000..55109d5 --- /dev/null +++ b/system/extractor/index.html @@ -0,0 +1,33 @@ + + + + + SpreadSheetIDExtractor + + + +

スプシID抽出 & ドライブ画像リンク変換ツール

+
+

本ツールはSpreadSyncCMSを使用する際に必要なID & 画像リンクを変換するツールです。IDはGASに記載する際にURLから抽出する必要があり、画像リンクはスプシのimgの行に書き込む際に変換が必要です。

+ +

スプレッドシートID抽出

+

GoogleスプレッドシートのURL内のIDを抽出します。

+

【抽出前】https://docs.google.com/spreadsheets/d/10OZa1MYV1zZVjOMZzoBglNwW0BRp55Wn2OQkjbaIGo8/edit#gid=771807520

+

【抽出後】10OZa1MYV1zZVjOMZzoBglNwW0BRp55Wn2OQkjbaIGo8

+ + + +
+ +

Drive画像リンク変換

+

Googleドライブの画像リンクをimgタグで利用できるURLに変換します。

+

【変換前】https://drive.google.com/file/d/1M0IIk14mg_G0eBf3yaLk1PD5JEz--6RA/view?usp=sharing

+

【変換後】https://lh3.google.com/u/o/d/1M0IIk14mg_G0eBf3yaLk1PD5JEz--6RA

+ + + +
+
+ + + diff --git a/system/extractor/script.js b/system/extractor/script.js new file mode 100644 index 0000000..f5002aa --- /dev/null +++ b/system/extractor/script.js @@ -0,0 +1,61 @@ +document.getElementById("spreadsheetUrlInput").addEventListener("blur", function() { + var url = this.value; + if(SpreadsheetUrl(url)) { + document.getElementById("spreadsheetIdDisplay").value = extractSpreadsheetId(url); + document.getElementById("spreadsheetWarning").textContent = ''; + } else { + document.getElementById("spreadsheetWarning").textContent = '正しいスプレッドシートのURLを入力してください。'; + } +}); + +document.getElementById("driveUrlInput").addEventListener("blur", function() { + var url = this.value; + if(DriveUrl(url)) { + document.getElementById("driveUrlDisplay").value = convertDriveUrlToImageTag(url); + document.getElementById("driveWarning").textContent = ''; + } else { + document.getElementById("driveWarning").textContent = '正しいドライブの共有リンクを入力してください。'; + } +}); + +function SpreadsheetUrl(url) { + return /\/spreadsheets\/d\/[a-zA-Z0-9-_]+/.test(url); +} + +function DriveUrl(url) { + return /\/file\/d\/[a-zA-Z0-9-_]+/.test(url); +} + +function extractSpreadsheetId(url) { + var matches = /\/spreadsheets\/d\/([a-zA-Z0-9-_]+)/.exec(url); + return matches ? matches[1] : ''; +} + +function convertDriveUrlToImageTag(url) { + var fileId = extractFileId(url); + return "https://lh3.google.com/u/o/d/" + fileId; +} + +function extractFileId(url) { + var matches = /\/file\/d\/([a-zA-Z0-9-_]+)/.exec(url); + return matches ? matches[1] : ''; +} + +document.getElementById("copySpreadsheetId").addEventListener("click", function() { + copyToClipboard("spreadsheetIdDisplay"); +}); + +document.getElementById("copyDriveUrl").addEventListener("click", function() { + copyToClipboard("driveUrlDisplay"); +}); + +function copyToClipboard(elementId) { + var copyText = document.getElementById(elementId).value; + navigator.clipboard.writeText(copyText) + .then(() => { + console.log('Text copied to clipboard'); + }) + .catch(err => { + console.error('Error in copying text: ', err); + }); +} \ No newline at end of file diff --git a/system/extractor/style.css b/system/extractor/style.css new file mode 100644 index 0000000..6bd8e3c --- /dev/null +++ b/system/extractor/style.css @@ -0,0 +1,87 @@ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #f2f2f2; + color: #333; + padding: 20px; + line-height: 1.6; +} + +h1 { + color: #2c3e50; + font-size: 1.8em; + margin-bottom: 0.7em; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + text-align: center; +} + +h2 { + color: #34495e; + font-size: 1.4em; + padding: 0 8px; + border-left: #4d7aa8 solid 4px; +} + +p { + color :#34495e; + font-size: 0.9em; +} + +input[type="text"], button { + width: 75%; + padding: 10px; + margin: 10px 0; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 2px 2px 5px rgba(0,0,0,0.1); +} + +input[type="text"] { + box-sizing: border-box; +} + +button { + width: auto; + background-color: #4caf50; + color: white; + border: none; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #45a049; +} + +.warning { + color: red; + margin-top: 5px; +} + +.container { + width: 70%; + margin: auto; + overflow:scroll +} + +@media screen and (max-width: 700px) { + h1 { + font-size: 1.3em; + } + + h2 { + font-size: 1.1em;; + } + + p { + font-size: 0.7em; + } + + .container { + width: 95%; + margin: 20px auto; + } + + input[type="text"], button { + width: 100%; + } +}