<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>SpreadSheetIDExtractor</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>スプシID抽出 & ドライブ画像リンク変換ツール</h1> <div class="container"> <p>本ツールはSpreadSyncCMSを使用する際に必要なID & 画像リンクを変換するツールです。IDはGASに記載する際にURLから抽出する必要があり、画像リンクはスプシのimgの行に書き込む際に変換が必要です。</p> <h2>スプレッドシートID抽出</h2> <p>GoogleスプレッドシートのURL内のIDを抽出します。</p> <p>【抽出前】https://docs.google.com/spreadsheets/d/10OZa1MYV1zZVjOMZzoBglNwW0BRp55Wn2OQkjbaIGo8/edit#gid=771807520</p> <p>【抽出後】10OZa1MYV1zZVjOMZzoBglNwW0BRp55Wn2OQkjbaIGo8</p> <input type="text" id="spreadsheetUrlInput" placeholder="GoogleスプレッドシートのURLを入力"> <input type="text" id="spreadsheetIdDisplay" readonly placeholder="抽出されたID"> <button id="copySpreadsheetId">コピー</button> <div id="spreadsheetWarning" class="warning"></div> <h2>Drive画像リンク変換</h2> <p>Googleドライブの画像リンクをimgタグで利用できるURLに変換します。</p> <p>【変換前】https://drive.google.com/file/d/1M0IIk14mg_G0eBf3yaLk1PD5JEz--6RA/view?usp=sharing</p> <p>【変換後】https://lh3.google.com/u/o/d/1M0IIk14mg_G0eBf3yaLk1PD5JEz--6RA</p> <input type="text" id="driveUrlInput" placeholder="GoogleDrive画像共有リンクを入力"> <input type="text" id="driveUrlDisplay" readonly placeholder="変換されたURL"> <button id="copyDriveUrl">コピー</button> <div id="driveWarning" class="warning"></div> </div> <script src="script.js"></script> </body> </html>