Webページのお知らせだけ更新するのに、いちいちHTMLを編集して、サーバーにアップロードするのって結構面倒ですよね。
『Googleスプレッドシートを更新するだけでWebページが変更できたらいいのに...』 と思って検索をかけてみたらGAS（Google Apps Script）を使用する方法ばかり出てきて、正直難しくありませんか？
今回は GASを使用せず にGoogleスプレッドシートをデータベース化して、Webページを更新する方法をご紹介します。
なるべくわかりやすく解説をしていきますのでぜひ試して見てください。
この記事を読むと
『無料で』『簡単に』『GASよりも4倍高速な』 Webサイトのお知らせパーツが完成するから...
- Webページの更新に追われることがなくなります！
- あなたが作るWebページが一味違うことを顧客にアピールできます！
今回のテーマ
【GAS不要】スプレッドシートをデータベース化してWeb更新【無料】
スプレッドシートをデータベース化するにあたって、SSSAPIというサービスを使っていきます。2022年10月現在は無料で使用ができますが、無料プランにはもちろん制限があります。ざっくり説明すると無料プランではAPI数が3本まで、スプレッドシートの最大行数は50行まで使用可能です。今回は無料プランの範疇で問題ありません。
かなり便利なサービスなのでめちゃめちゃ応用が効きます。さらに活用していくならスタンダードプラン（月額300円～）以上を契約してしまうのがオススメです。
その他、準備するものは以下のとおりです。
-
Googleアカウント
-
連携するGoogleスプレッドシート
-
Progate修了程度のHTMLの知識（CSS / JavaScriptも使用しますがコピペでOKです。）
【スプレッドシートのデータベース化①】SSSAPIの登録
SSSAPIの登録とAPI設定の方法までは、以下のページで詳しく解説をしましたので参考にしてください。
【SSSAPI】スプレッドシートをヘッドレスCMSにしたいなら早めに諦めたほうがいい
ちなみに使用するスプレッドシートの内容は画像のとおりです。こちらをデータベース化していきます。
【スプレッドシートのデータベース化②】HTMLの編集
今回私はサンプルとしてBootstrapのテンプレートを使用しました。このテンプレートの中にお知らせを表示する場所を作成します。
使用したテンプレートはこちらから ※Albumを選びました。
テンプレートの見た目がおかしい場合は以下を追加してください。CSSとJavaScriptが当たっていないため、おかしくなっています。
// headタグの中に貼り付け
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
// </body>タグの手前に貼り付け
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
今回は以下のようなサイトを使っていきます。
お使いのエディタを開き、HTMLファイルのお好きな箇所に『お知らせコーナー』を作るためのスペースを作ります。そこに以下のHTMLを貼り付けます。
後でJavaScriptでデータを流し込む際に指定している class を使用しますので、この時点では変更しないようにしましょう。分かる方は変更してもらって結構です。
<section class="news-container container">
<h3>News</h3> //この行は削除しても構いません
<div class="news-contents">
<a class="link" href="" target="_parent">
<p class="title"></p>
</a>
</div>
</section>
貼り付ける場所は一度データを開いて、検証ツールで探すとわかりやすいです。
【スプレッドシートのデータベース化③】JavaScriptファイルの作成
内容は少し解説を入れますが、難しければコピペでOKです。SSSAPIで取得した『API URL』を貼り付ける箇所があるのでそこだけ編集してください。ファイル名は何でも構いませんので .js のJavaScriptファイルを作成して以下の内容をコピペします。
// ""の中にAPI URLを貼り付けてください
const url = "https://api.sssapi.app/XXXXXXXXXXXXXXXXXXXXXXXX";
// jsonデータ（スプレッドシートの内容をWebで読み込めるように変更したデータ）を読み込みます
async function resJson() {
const res = await fetch(url);
const news = await res.json();
return news;
}
// スプレッドシートのお知らせの行数を取得し、お知らせを差し込むためのエリアを増やします
function newsClone(news) {
console.log(news);
const contents = document.querySelector(".news-contents");
for (let i = 0; i < news.length; i++) {
let clone = contents.firstElementChild.cloneNode(true);
contents.appendChild(clone);
}
}
// 上記で取得したエリアに『タイトル』と『リンク』を流し込みます
function newsInput(news) {
console.log(news);
const newsTitle = document.querySelectorAll(".title");
const newsLink = document.querySelectorAll(".link");
for (let i = 0; i < news.length; i++) {
newsTitle[i].innerHTML = news[i].title;
newsLink[i].setAttribute("href", news[i].url);
}
}
// 今までの関数を実行します
async function allNews() {
const news = await resJson();
newsClone(news);
newsInput(news);
}
allNews();
作成したJavaScriptファイルを、HTMLファイルに読み込んでおきましょう。ちなみにjsフォルダのscript.jsであれば以下のようになります。『bodyの閉じタグ』の手前に貼り付けます。
<script src="js/script.js"></script>
【スプレッドシートのデータベース化④】CSSファイルの作成
CSSを当てなくても問題はありませんが、このままだとCLS（Cumulative Layout Shift）に影響するためSEO的によくありません。CLSとは『累積レイアウト変更』のことで、簡単に言うと『ページを読み込んだ後に要素を差し込んで、コンテンツをズラすな！』ということです。
CSSを当てないと以下のようにコンテンツがズレてしまいます。
そのために min-height を指定してスペースを開けておきます。 min-height やその他の値はお好きに変更をしていただいて構いません。
.news-container {
text-align: center;
padding: 20px;
min-height: 240px;
height: 100%;
}
headタグの中で先程のCSSを読み込みましょう。styleフォルダのstyles.cssであれば以下のようになります。
<link href="style/style.css" rel="stylesheet" />
スプレッドシートをデータベース化することが出来ました！
今回はお知らせコーナーとして使用しましたが、私のサイトではこれを応用して『おすすめ記事の紹介コーナー』として活用しています。スプレッドシートをデータベース化しているので、もちろんVLOOKUPやQUERYなどの機能も活用できます。アイディア次第でかなり応用が効きますので、是非活用してみてください。
今回の内容が少し難しかったという方は一度、HTML / CSS / JavaScriptを学んでみてください。できることが広がるととても楽しいですよ。
HTML / CSS / JavaScriptを独学で勉強するならUdemyがオススメ
Share this post