<!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>
