teto tech blog

<p>Webページのお知らせだけ更新するのに、いちいちHTMLを編集して、サーバーにアップロードするのって結構面倒ですよね。</p>
<p><strong>『Googleスプレッドシートを更新するだけでWebページが変更できたらいいのに...』</strong> と思って検索をかけてみたらGAS（Google Apps Script）を使用する方法ばかり出てきて、正直難しくありませんか？</p>
<p>今回は <strong>GASを使用せず</strong> にGoogleスプレッドシートをデータベース化して、Webページを更新する方法をご紹介します。</p>
<p>なるべくわかりやすく解説をしていきますのでぜひ試して見てください。<br>
<br></p>
<h3>この記事を読むと</h3>
<p><strong>『無料で』『簡単に』『GASよりも4倍高速な』</strong> Webサイトのお知らせパーツが完成するから...</p>
<ul>
<li>Webページの更新に追われることがなくなります！</li>
<li>あなたが作るWebページが一味違うことを顧客にアピールできます！</li>
</ul>
<br>
<h3>今回のテーマ</h3>
<h2>【GAS不要】スプレッドシートをデータベース化してWeb更新【無料】</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/9bf37f79-17c5-41ba-a83a-3f9be1bafca8%2Fbg11.jpg" alt="bg11.jpg"><br>
スプレッドシートをデータベース化するにあたって、<a href="https://sssapi.app/">SSSAPI</a>というサービスを使っていきます。2022年10月現在は無料で使用ができますが、無料プランにはもちろん制限があります。ざっくり説明すると無料プランではAPI数が3本まで、スプレッドシートの最大行数は50行まで使用可能です。今回は無料プランの範疇で問題ありません。</p>
<p>かなり便利なサービスなのでめちゃめちゃ応用が効きます。さらに活用していくならスタンダードプラン（月額300円～）以上を契約してしまうのがオススメです。</p>
<br>
その他、準備するものは以下のとおりです。
<ul>
<li>
<p>Googleアカウント</p>
</li>
<li>
<p>連携するGoogleスプレッドシート</p>
</li>
<li>
<p>Progate修了程度のHTMLの知識（CSS / JavaScriptも使用しますがコピペでOKです。）<br>
<br></p>
</li>
</ul>
<h2>【スプレッドシートのデータベース化①】SSSAPIの登録</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/ab3f56a7-4b3c-4058-bc42-87f835202b7c%2Fsssapi-1.jpg" alt="sssapi-1.jpg"><br>
SSSAPIの登録とAPI設定の方法までは、以下のページで詳しく解説をしましたので参考にしてください。</p>
<p><a href="https://teto-tech.com/article/sssapi1">【SSSAPI】スプレッドシートをヘッドレスCMSにしたいなら早めに諦めたほうがいい</a></p>
<p>ちなみに使用するスプレッドシートの内容は画像のとおりです。こちらをデータベース化していきます。</p>
<br>
<h2>【スプレッドシートのデータベース化②】HTMLの編集</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/c830cd27-a810-43dd-9e4a-2a3e3695d4ca%2Fbg10.jpg" alt="bg10.jpg"><br>
今回私はサンプルとしてBootstrapのテンプレートを使用しました。このテンプレートの中にお知らせを表示する場所を作成します。</p>
<p>使用したテンプレートは<a href="https://getbootstrap.jp/docs/5.0/examples/">こちら</a>から ※Albumを選びました。<br>
<br><br>
テンプレートの見た目がおかしい場合は以下を追加してください。CSSとJavaScriptが当たっていないため、おかしくなっています。</p>
<pre><code class="language-html">// headタグの中に貼り付け
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt;

// &lt;/body&gt;タグの手前に貼り付け
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
</code></pre>
<br>
今回は以下のようなサイトを使っていきます。
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/dcc8a904-ef7a-4e89-ad3f-4a84d66fa237%2Fsssapi-news1.jpg" alt="sssapi-news1.jpgsssapi-news1.jpg"><br>
<br><br>
お使いのエディタを開き、HTMLファイルのお好きな箇所に『お知らせコーナー』を作るためのスペースを作ります。そこに以下のHTMLを貼り付けます。</p>
<p>後でJavaScriptでデータを流し込む際に指定している <code>class</code> を使用しますので、この時点では変更しないようにしましょう。分かる方は変更してもらって結構です。</p>
<pre><code class="language-html">&lt;section class=&quot;news-container container&quot;&gt;
	&lt;h3&gt;News&lt;/h3&gt; //この行は削除しても構いません
	&lt;div class=&quot;news-contents&quot;&gt;
		&lt;a class=&quot;link&quot; href=&quot;&quot; target=&quot;_parent&quot;&gt;
			&lt;p class=&quot;title&quot;&gt;&lt;/p&gt;
		&lt;/a&gt;
	&lt;/div&gt;
&lt;/section&gt;
</code></pre>
<br>
<p>貼り付ける場所は一度データを開いて、検証ツールで探すとわかりやすいです。</p>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/034042d8-a449-48ed-9384-0f1fccf6fe4a%2Fsssapi-news2.jpg" alt="sssapi-news2.jpg"></p>
<br>
<h2>【スプレッドシートのデータベース化③】JavaScriptファイルの作成</h2>
<p>内容は少し解説を入れますが、難しければコピペでOKです。SSSAPIで取得した『API URL』を貼り付ける箇所があるのでそこだけ編集してください。ファイル名は何でも構いませんので <code>.js</code> のJavaScriptファイルを作成して以下の内容をコピペします。</p>
<pre><code class="language-javascript">// &quot;&quot;の中にAPI URLを貼り付けてください
const url = &quot;https://api.sssapi.app/XXXXXXXXXXXXXXXXXXXXXXXX&quot;;

// 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(&quot;.news-contents&quot;);
	for (let i = 0; i &lt; news.length; i++) {
		let clone = contents.firstElementChild.cloneNode(true);
		contents.appendChild(clone);
	}
}

// 上記で取得したエリアに『タイトル』と『リンク』を流し込みます
function newsInput(news) {
	console.log(news);
	const newsTitle = document.querySelectorAll(&quot;.title&quot;);
	const newsLink = document.querySelectorAll(&quot;.link&quot;);
	for (let i = 0; i &lt; news.length; i++) {
		newsTitle[i].innerHTML = news[i].title;
		newsLink[i].setAttribute(&quot;href&quot;, news[i].url);
	}
}

// 今までの関数を実行します
async function allNews() {
	const news = await resJson();
	newsClone(news);
	newsInput(news);
}

allNews();
</code></pre>
<br>
作成したJavaScriptファイルを、HTMLファイルに読み込んでおきましょう。ちなみにjsフォルダのscript.jsであれば以下のようになります。『bodyの閉じタグ』の手前に貼り付けます。
<pre><code class="language-javascript">&lt;script src=&quot;js/script.js&quot;&gt;&lt;/script&gt;
</code></pre>
<br>
<h2>【スプレッドシートのデータベース化④】CSSファイルの作成</h2>
<p>CSSを当てなくても問題はありませんが、このままだとCLS（Cumulative Layout Shift）に影響するためSEO的によくありません。CLSとは『累積レイアウト変更』のことで、簡単に言うと『ページを読み込んだ後に要素を差し込んで、コンテンツをズラすな！』ということです。<br>
CSSを当てないと以下のようにコンテンツがズレてしまいます。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/9cecc7e7-0c9b-4545-b81b-7bf201e13591%2F2022-10-14_16-43-41__video-converter_com__AdobeExpress.gif" alt="2022-10-14_16-43-41__video-converter_com__AdobeExpress.gif"><br>
<br><br>
そのために <code>min-height</code> を指定してスペースを開けておきます。 <code>min-height</code> やその他の値はお好きに変更をしていただいて構いません。</p>
<pre><code class="language-CSS">.news-container {
	text-align: center;
	padding: 20px;
	min-height: 240px;
	height: 100%;
}
</code></pre>
<br>
 headタグの中で先程のCSSを読み込みましょう。styleフォルダのstyles.cssであれば以下のようになります。
<pre><code class="language-html">&lt;link href=&quot;style/style.css&quot; rel=&quot;stylesheet&quot; /&gt;
</code></pre>
<br>
<h2>スプレッドシートをデータベース化することが出来ました！</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/4d383423-dd14-490b-a354-3e76b8d17e99%2Fsssapi-news5.jpg" alt="sssapi-news5.jpg"></p>
<br>
今回はお知らせコーナーとして使用しましたが、私のサイトではこれを応用して『おすすめ記事の紹介コーナー』として活用しています。スプレッドシートをデータベース化しているので、もちろんVLOOKUPやQUERYなどの機能も活用できます。アイディア次第でかなり応用が効きますので、是非活用してみてください。
<p>今回の内容が少し難しかったという方は一度、HTML / CSS / JavaScriptを学んでみてください。できることが広がるととても楽しいですよ。</p>
<h3>HTML / CSS / JavaScriptを独学で勉強するなら<a href="https://click.linksynergy.com/fs-bin/click?id=QWcTuz4Kb2w&amp;offerid=1138543.27&amp;type=3&amp;subid=0">Udemy</a>がオススメ</h3>
<p><a href="https://teto-tech.com/article/udemy-beginner1">【Udemy これをやればOK】初心者にオススメなプログラミングコース厳選</a></p>


【GAS不要】スプレッドシートをデータベース化してWeb更新【無料】

 【3ヶ月で実務レベル】初心者が本当に知りたかったReact入門

<p>Reactでとあるサービスを作るのに、GoogleスプレッドシートをCMSにできたらすごいな？と思い検索をかけると、<a href="https://qiita.com/sin164/items/2addcf88dda4844d5219?utm_source=pocket_mylist">こんな記事</a>が出てきました。</p>
<p>手順通りに進めるとちゃんとReactで取得ができ感動したのを覚えています。その節は本当にありがとうございました（？）</p>
<p>ちゃんと想定した挙動となって助かったのですが実務で活用する際に、以下のようなデメリットがありました…</p>
<ul>
<li>Google API の登録がめちゃくちゃ手間</li>
<li>なぜかレンダリングが遅い</li>
<li>コードが複雑になる</li>
</ul>
<p>とにかくお金をかけたくなかったので、上記の記事はありがたかったのですが、特にレンダリングが遅い件がどうやっても解決ができず、メンターサービスのMentaでも相談をさせていただきました。それでも解決に至らず、途方にくれていました。</p>
<p>レンダリングが遅いということは、サービスを使ってくれる方々の負担になってしまう…苦渋の決断で<a href="https://sssapi.app/">SSSAPI</a>を使用することにしました。</p>
<p>結果、もっと早く使っておけばよかったと後悔したほど、よいサービスでした。</p>
<h2>スプレッドシートをCMSにするなら『SSSAPI』</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/ab3f56a7-4b3c-4058-bc42-87f835202b7c%2Fsssapi-1.jpg" alt="sssapi-1.jpg"><br>
<a href="https://sssapi.app/">SSSAPI</a>：<a href="https://sssapi.app/">https://sssapi.app/</a><br>
実は『スプレッドシート CMS』等で検索すると上位に表示がされるため、存在は知っていました。すぐに飛びつかなかったのは、『自分でやる方がプログラミングの勉強になる』と思ったのと、『お金をかけたくなかった』からです。</p>
<p>今後Reactでスプレッドシートからデータを持ってきたい場合は、私は絶対SSSAPIを使います。</p>
<h2>SSSAPIの良いところ</h2>
<ul>
<li><strong>速い</strong> ... スプレッドシートのURLだけでJSON APIを作成することができ、導入に手間がかからず『早い』、またレスポンスも速く、GASの4倍高速（公式ページより）だそうです。</li>
<li><strong>安い</strong> ... 無料プランもあり、有料プランも月額300円、900円などとにかく安い。</li>
<li><strong>安心</strong> ... 最低限の権限で済むのでセキュリティも安心。</li>
</ul>
<p>データベースの専門知識が必要ないので、駆け出しのフロントエンド</p>
<p>エンジニアが開発に集中ができるようになるところが、個人的に良かったポイントです。<br>
<br></p>
<h2>SSSAPIに登録する</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/926ee03b-9685-4ac7-ab15-4482e1d030f2%2Fsssapi-2.jpg" alt="sssapi-2.jpg"><br>
スプレッドシートを使うのでGoogleアカウントで登録&amp;ログインをします。<br>
<br></p>
<h2>スプレッドシートと連携してAPIを作成する</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/01782749-c13e-4c04-afe1-4e68e4a10db1%2Fsssapi-3.jpg" alt="sssapi-3.jpg"><br>
右上の『Add API』からAPIを登録していきます。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/261bc4d4-5e71-469e-b03c-4c0a1fa963c5%2Fsssapi-4.jpg" alt="sssapi-4.jpg"></p>
<ul>
<li>API名... お好きな名前でOK</li>
<li>スプレッドシートのURL...連携したいスプレッドシートのURLをコピペします。</li>
<li>フォルダ... APIを管理しておくフォルダを選択します。あとからの移動も可能です。</li>
<li>閲覧権限... コピペしておき、スプレッドシート上で権限を追加します。<br>
<br></li>
</ul>
<h2>Googleスプレッドシートでの設定</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/cfd68ffb-cf7e-4481-9f40-bce515273f78%2Fsssapi-5.jpg" alt="sssapi-5.jpg"><br>
今回はこちらのシートをAPIとして呼び出したいと思います。右上の『共有』ボタンをクリックしましょう。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/bf7f1aba-be3b-4e7e-8289-8d06935fd073%2Fsssapi-6.jpg" alt="sssapi-6.jpg"><br>
先程コピーした閲覧権限のアカウントをここに貼り付けて『完了』をクリック。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/f1dd763b-4e8d-4d90-86d8-6516bac80e25%2Fsssapi-7.jpg" alt="sssapi-7.jpg"><br>
右側のプルダウンを閲覧書に変更して『送信』ボタンをクリック。ここまで終わったらSSSAPIに戻りましょう。<br>
<br></p>
<h2>SSSAPIで連携を確認する</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/ae00b4d9-29b9-4cae-a02e-811cb0ef5b33%2Fsssapi-8.jpg" alt="sssapi-8.jpg"><br>
API追加の画面に戻り『OK』ボタンを押すとAPIが呼び出せる状態になります。クリックして詳細設定を行いましょう。<br>
<br></p>
<h2>APIの取得と設定を行う</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/582310f0-704c-44bd-bb9d-e413682ce483%2Fsssapi-9.jpg" alt="sssapi-9.jpg"><br>
APIが取得できるのは『API URL』からコピーができます。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/3a89f4ca-cca7-4d3d-aa42-3abc73064d78%2Fsssapi-10.jpg" alt="sssapi-10.jpg"><br>
お好みで構いませんが『自動更新』『行数をIDとして追加』をオンにしておくのをオススメします。<br>
<br></p>
<h2>実際の環境で確認をしてみる</h2>
<p>それではReactで確認していきましょう。スプレッドシートの初期設定をミスって見出しを日本語にしてしまっていましたが、本来は英数字が良いです。一応このままでも動きます。</p>
<pre><code class="language-jsx">
import { useState, useEffect } from &quot;react&quot;;

const ApiFetch = () =&gt; {
   const [data, setData] = useState([]);

   useEffect(() =&gt; {
      fetch(&quot;https://api.sssapi.app/XXXXXXXXXXXXXXXXXXXX&quot;)
         .then((response) =&gt; response.json())
         .then((json) =&gt; setData(json));
   }, []);

   return (
      &lt;&gt;
         {data.map((data) =&gt; (
            &lt;div&gt;
               &lt;h2&gt;{data.タイトル}&lt;/h2&gt;
               &lt;h3&gt;{data.著者}&lt;/h3&gt;
               &lt;p&gt;{data.本文}&lt;/p&gt;
            &lt;/div&gt;
         ))}
      &lt;/&gt;
   );
};

export default ApiFetch;

</code></pre>
<br>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/66a4f1fa-a839-483c-80be-657c9209d8be%2Fsssapi-11.jpg" alt="sssapi-11.jpg"><br>
実際の環境でも取得することでがきました！とても簡単でしたね。</p>
<p><a href="https://sssapi.app/help/api_call/">公式のドキュメント</a>には、フィルタリング機能など更に便利な使い方が載っていますので、参考にしてみてください。</p>
<h2>まとめ</h2>
<p>無料プランでも1APIにつき50行までは取得できますので、ブログのちょっとしたお知らせなどに今日からでも使えると思います。</p>
<p>データを管理するヘッドレスCMSとしてスプレッドシートを使いたいときは、ぜひ使ってみてください。<br>
<br></p>
<h3>JavaScriptでAPIを取得し、より実用的なパーツの作り方を以下の記事で説明しています。</h3>
<p><a href="https://teto-tech.com/article/sssapi2">【GAS不要】スプレッドシートをデータベース化してWeb更新【無料】</a></p>
<p><a href="https://teto-tech.com/article/sssapi2"><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/515a4f9b-04f4-405c-9924-e9a7f208ecef%2FSSSAPI2-eyecatch.jpg" alt="SSSAPI2-eyecatch.jpg"></a></p>


【SSSAPI】スプレッドシートをヘッドレスCMSにしたいなら早めに諦めたほうがいい

<p><a href="https://teto-tech.com/article/newt-blog2">前回（【Newt】スターターを活用したツラくないJamstackブログ開設）</a>はNewtでAPIの設定を行いました。今回はいよいよネット上にブログを公開していきたいと思います。<br>
ここからフロントエンド開発の前提知識が必要となってきます。この内容が難しいという方はNode.jsとGitHubが最低限分かる状態で再度挑戦してみてください。</p>
<p>それでは以下が準備するものです。フロントエンドを学んでいる方であればおなじみのものばかりです。</p>
<ul>
<li>推奨版のNode.js</li>
<li>お使いのエディタ</li>
<li>GitHubアカウント</li>
<li>Vercelアカウント（デプロイ先として使用します。）<br>
<br></li>
</ul>
<h2>Newtのスターターを自分の環境にクローンする</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/fca498ae-6c30-4026-881c-324022f8e77a%2Fnewt2-12.jpg" alt="newt2-12.jpg"><br>
スターターはこちらから（BLOGのNEXT.js用です）<a href="https://github.com/Newt-Inc/newt-blog-starter-nextjs">https://github.com/Newt-Inc/newt-blog-starter-nextjs</a><br>
緑の『Code』ボタンからお好きなクローン方法を選びましょう。<br>
<br></p>
<h2>お使いのエディタでスターターテンプレートを開く</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/f0c8df22-50f1-413c-b631-f20c7bbc6734%2Fnewt3-1.jpg" alt="newt3-1.jpg"><br>
私はVSCodeを使用しています。左カラムの『.env』ファイルを開きます。<br>
<br></p>
<h2>環境変数を設定する</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/68065cfa-1b79-474d-a6d9-1b0031e85cbe%2Fnewt3-2.jpg" alt="newt3-2.jpg"><br>
環境変数とは今回の件でいうと、ブログとNewtを繋ぐためのキーで、このファイルは開発環境でのみ使用します。編集するのは以下の3項目です。対応するキーを取りに行きます。</p>
<pre><code>NEXT_PUBLIC_NEWT_SPACE_UID=スペースUID
NEXT_PUBLIC_NEWT_APP_UID=AppUID
NEXT_PUBLIC_NEWT_API_TOKEN=CDN APIトークン
</code></pre>
<br>
<h2>スペースUID / AppUID /  CDN APIトークンの取得</h2>
<h3>スペースUID / AppUID</h3>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/2ced078b-e86c-4e50-9327-9234c0157c6e%2Fnewt2-16.jpg" alt="newt2-16.jpg"><br>
スペースUIDは、常にメイン画面に表示がされているのでわかりやすいと思います。<br>
AppUIDは左カラムの『Blog』 &gt; 『App設定』と進みます。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/44ef406b-61e5-4d8d-8007-b5b50313d89e%2Fnewt2-17.jpg" alt="newt2-17.jpg"><br>
『一般』の AppUIDに表示されているものとなります。<br>
<br></p>
<h3>CDN APIトークン</h3>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/8716fdb3-8b9e-4ddd-8899-cc853efbead3%2Fnewt2-9.jpg" alt="newt2-9.jpg"><br>
メイン画面に戻り左カラムから『スペース設定』をクリックします。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/5d31c874-0c76-40f1-aa48-2e856aaab274%2Fnewt2-13.jpg" alt="newt2-13.jpg"><br>
上の『Newt CDN API Token』の青いボタン『作成』を押します。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/2bb722fc-fc4c-4b50-bc64-af8c3756c015%2Fnewt2-14.jpg" alt="newt2-14.jpg"><br>
好きな名前を入力して、右下の『作成』ボタンクリックで完了です。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/1de35029-d19a-4547-8272-138ec00fe102%2Fnewt2-15.jpg" alt="newt2-15.jpg"><br>
作成したAPIトークンは右側のコピー用紙のマークからコピーができます。<br>
<br><br>
したがって.envファイル内の記述は以下のようになります。</p>
<pre><code>NEXT_PUBLIC_NEWT_SPACE_UID=blog
NEXT_PUBLIC_NEWT_APP_UID=blog
NEXT_PUBLIC_NEWT_API_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXX
</code></pre>
<br>
<h2>Githubにアップロード</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/fbc94455-e474-40a3-b69a-9903b536a9a8%2Fnewt3-3.jpg" alt="newt3-3.jpg"><br>
私はGithub Desktopを使用していますが、いかなる方法でも構いませんので自分のGithubにアップロードしましょう。※画像は先程のスペースUID等の反映前の画像です。ご了承ください。<br>
<br></p>
<h2>Vercelにデプロイ</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/465a7fda-90f2-4866-8433-8027d5d986d5%2Fnewt3-4.jpg" alt="newt3-4.jpg"><br>
今回はVercelにデプロイをします。Next.jsをアップロードするにはVercelが一番手間がかかりません。連携さえ終われば、GitHubにアップロードするだけで、自動でビルドを行ってくれるようになります。<br>
使い方がわかる方は飛ばしてもらって結構です。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/6380d031-8b10-49fb-86fe-b6fe62d7945b%2Fnewt3-5.jpg" alt="newt3-5.jpg"><br>
初めての方はGitHubでの登録・ログインがおすすめです。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/99c437b6-e661-4644-8bc7-a16709250504%2Fnewt3-6.jpg" alt="newt3-6.jpg"><br>
画面右側の『Add New...』から『Project』を選択します。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/8db2a050-450e-4cba-b58e-768b4e3dabb3%2Fnewt3-7.jpg" alt="newt3-7.jpg"><br>
VercelとGitHubをつなげます。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/b7b57c97-3645-4b0f-a7fb-2fe44ab4e25b%2Fnewt3-8.jpg" alt="newt3-8.jpg"><br>
ログインができたら、GitHubのリポジトリが表示されます。Newtのスターターを選んで『import』<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/7ff16022-c2e6-4813-9696-4412a270bc8f%2Fnewt3-9.jpg" alt="newt3-9.jpg"><br>
importが完了すると、デプロイの画面になります。フレームワークプリセット等は自動的に最適なものが選ばれていますが、環境変数だけは自分で入力をしないといけません。『Environment Variables』をクリックして入力項目を開きます。下記のように入力して『Add』。すべての環境変数を入力します。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/c59cd51e-c5f7-4859-b799-8683e676af5e%2Fnewt3-11.jpg" alt="newt3-11.jpg"></p>
<pre><code>//.env

NEXT_PUBLIC_NEWT_SPACE_UID=blog
//NAME = VALUE
</code></pre>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/1f424bba-4467-4476-8562-82a7a2b1f0ee%2Fnewt3-12.jpg" alt="newt3-12.jpg"><br>
すべての環境変数を入力し『Deploy』を押すことで、デプロイが始まります。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/6a009efd-ecbd-4e14-8e80-d14a5a65f56a%2Fnewt3-13.jpg" alt="newt3-13.jpg"><br>
<br></p>
<h2>これでネットへの公開が完了しました！</h2>
<p>デプロイが完了すると、URLが発行されます。アクセスしてみるとブログが表示されます。お疲れさまでした。<br>
<br></p>
<h2>記事が自動反映されるよう設定にする</h2>
<p>ネット上にブログが表示されているとは思いますが、いくら記事を更新しても再度デプロイをしない限り、ブログに記事は反映されません。<br>
これは、いわゆるSSG（Static Site Generation）、静的サイトジェネレーターというもので、以下のような流れになっています。</p>
<ol>
<li>事前にサーバー上でビルドとレンダリングを行う</li>
<li>APIの情報を受け取る</li>
<li>クライアント側でリクエストをする</li>
<li>必要な情報がビルドされ、レスポンスが返ってくる</li>
</ol>
<p>事前にある程度作られたサイトに情報を流し込んでいくだけなので、とにかくスピードが速いことがメリットに挙げられます。ブログにアクセスがあるたびに、その場で記事を出力するのですが、最後にデプロイしてビルドされたものが基準となってしまいます（上のリストでいう①）。記事を書くたびにいちいちビルドを行うのは面倒ですよね。<br>
そこでWebhookというものを利用し『記事が作成/更新されるたびに自動でビルドを行う』といった設定をしていきます。</p>
<h2>VercelでHookを作成</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/4f9cf626-4375-4b68-b47e-78c1e181407c%2Fnewt3-18.jpg" alt="newt3-18.jpg"><br>
Vercelでプロジェクトを開き、<br>
①settings → ②Git → ③Deploy Hooksで入力画面を開きます。Create Hookで『hooksの名前』と『Gitのブランチ名』を入力し、④『Create Hook』ボタンを押ましょう。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/124d983b-eb5a-40d9-b992-9f84ec6bb493%2Fnewt3-19.jpg" alt="newt3-19.jpg"><br>
Hookが作成されましたので、⑤『Copy』でコピーしておきましょう。こちらをNewtに貼り付けに行きます。<br>
<br></p>
<h2>NewtにHookを貼り付け</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/1092a8ae-e4b0-46b0-a361-c67261b7b6c9%2Fnewt3-15.jpg" alt="newt3-15.jpg"><br>
Newtメイン画面の左カラムから『Webhook』を選択し、右上の『Webhook』を作成ボタンをクリック。メニューが開きますので『Webhookテンプレート』を選択。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/7bb373aa-0af4-4eec-927d-562384154fd9%2Fnewt3-16.jpg" alt="newt3-16.jpg"><br>
Webhookテンプレートの中から、Vercelを選択し、先程コピーしたHookを入力箇所に貼り付け。右下の『Webhookを作成』ボタンを押したら完了です。これで、Newt上で記事を更新すると、ブログ上にも自動反映されるようになりました。お疲れさまでした。<br>
<br></p>
<h2>Jamstackブログの完成！...やりたいこと全部できる？</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/7a763cbc-00b0-4339-85a1-3292dbe507a7%2Fnewt3-20.jpg" alt="newt3-20.jpg"><br>
テンプレートを使用することで簡単にブログを立ち上げることができました。応用すればポートフォリオや自分の作品の展示に活用できると思います。</p>
<p>一つ注意事項がありまして、いわゆるブロガーが使う『ブログ』には使えないということです。簡単にブログを立ち上げるためにVercelを使用しましたが、VercelのHobbyプラン（無料プラン）では個人的かつ非営利な目的でのみの利用に限定されています。つまり、収益化ができません。収益化をした場合はProプランに移行するか、Vercel以外のホスティングサービスを使用するかの2択です。</p>
<p>駆け出しエンジニアでも開発の過程をすっ飛ばして、実際に使えるサービスをデプロイできるとモチベーションが上がりますし、このテンプレートを改造していくうちにどんどんスキルが上がっていくと思います。</p>
<p>今回はスターターテンプレートを使用しましたが、もっと自由にカスタマイズも可能です。国産のヘッドレスCMSはmicroCMSなどがありますが、使用感やプラン内容はどちらが抜きん出ているということはないので、ケースバイケースで使い分けていきたいですね。</p>
<p>それでは今回はこのあたりで締めたいと思います。ありがとうございました。<br>
<br></p>
<h3>ヘッドレスCMSとしてGoogleスプレッドシートを活用したい方はこちらの記事がオススメです。</h3>
<p><a href="https://teto-tech.com/article/sssapi1">【SSSAPI】スプレッドシートをヘッドレスCMSにしたいなら早めに諦めたほうがいい</a><br>
<a href="https://teto-tech.com/article/sssapi1"><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/a725d43f-93b1-429a-bab8-60b89dabbd2a%2FSSSAPI-eyecatch.jpg" alt="SSSAPI-eyecatch.jpg"></a><br>
<br></p>
<h3>ブログの公開後に必要になってくるキーワード選定ツールは『ラッコキーワード』一択です。</h3>
<p><a href="https://teto-tech.com/article/racco-keyword1">【実費レビュー】ラッコキーワードの有料版は使える！【エントリーで十分】</a><br>
<a href="https://teto-tech.com/article/racco-keyword1"><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/9e7f5390-44cf-4b88-a7ad-7e5ee11683be%2Fracco-keyword1-eyecatch.jpg" alt="racco-keyword1-eyecatch.jpg"></a></p>


【Newt】できるだけ簡単にJamstackブログをネットに公開

<p>それでは<a href="https://teto-tech.com/article/newt-blog1">前回（【Newt】たった1日で書き初め！実質無料でJamstackブログ開設）</a>から引き続き、国産のヘッドレスCMSである『Newt』を使って爆速でブログを立ち上げていきたいと思います。</p>
<p>今回も長くなってしまったため、APIの準備までになってしまいましたが、参考になれば幸いです。<br>
<br></p>
<h2>NewtでAPIを取得する</h2>
<h3>1. Newtへ登録／ログインする</h3>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/1620bef5-c25d-4e98-aaad-1089708396bf%2Fnewt2-1.jpg" alt="newt2-1.jpg"><br>
登録はお好きなメールアドレスで登録もできますが、私はGoogleアカウントで登録をしました。<br>
<br></p>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/147d304b-2e47-4153-8bf3-67ce139997a5%2Fnewt2-2.jpg" alt="newt2-2.jpg"><br>
登録後はこちらの画面からログインをしていきます。<br>
<br></p>
<h3>2. スペースの作成</h3>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/0e415448-17f0-4184-b796-5f02ac679103%2Fnewt2-3.jpg" alt="newt2-3.jpg"><br>
まずはスペースを作成しましょう。<br>
スペースとは各コンテンツを管理するもので、スペース内のAppがこれから作っていくブログのメインコンテンツとなります。<br>
<img src="https://storage.googleapis.com/newt-files/3dddb71d-2374-47d4-9097-638df2827c0d/space.png" alt="space"><br>
出典：<a href="https://www.newt.so/docs/space">Newtドキュメント / スペース</a><br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/25ee62cd-8688-4146-a489-5a8716cc2b53%2Fnewt2-4.jpg" alt="newt2-4.jpg"><br>
新規スペース作成をクリックすると2項目の入力を求められます。</p>
<p>スペースUIDはあとから変更ができませんので慎重に決めましょう。</p>
<p>後ほど使用しますが、画面に常に表示されているので覚える必要はありません。<br>
<br></p>
<h3>3. Appの追加</h3>
<p>Appはコンテンツ管理の骨組みの『モデル』、記事投稿をする管理画面のUIである『ビュー』、モデルの内容を元に作成されたAPIの要素である『コンテンツ』から成り立ちます。<br>
<img src="https://storage.googleapis.com/newt-files/ac34dcef-2b25-4985-b157-d8017049a930/app.png" alt="app"><br>
出典：<a href="https://www.newt.so/docs/app">Newtドキュメント / App</a><br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/8efa9213-1a38-45ca-b005-d858e17b25dd%2Fnewt2-6.jpg" alt="newt2-6.jpg"><br>
画面中央付近の青いボタンか左上の『Appを追加』より追加します。今回はより簡単に実装できるように『Appテンプレート』を選択してください。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/d6918aad-d79a-4c97-b204-f5698d726bed%2Fnewt2-7.jpg" alt="newt2-7.jpg"><br>
左カラムより、使いたいAppテンプレートを選択し、右側の『このテンプレートを追加』をクリックすることでAppを追加できますが...<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/06431c28-1735-40cd-b30d-f6815b11e3e3%2Fnewt2-8.jpg" alt="newt2-8.jpg"><br>
今回目玉のスターターテンプレートは、この画面の最下部にGithubのソースコードで紹介されていますので見逃さないようにしましょう。2022年9月現在は『VUE系のNUXT.js』と『React系のNEXT.js』の２つから選べます。<br>
<br><br>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/8716fdb3-8b9e-4ddd-8899-cc853efbead3%2Fnewt2-9.jpg" alt="newt2-9.jpg"><br>
App追加後は画面が変化します。記事の投稿はこちらから行います。デフォルトで記事が3つ投稿されていますので参考に覗いてみてください。<br>
<br></p>
<h3>4. 投稿画面について（AppテンプレートのBLOG、BLOG2）</h3>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/209bcfa0-9fad-46f3-9406-d6b8988606e1%2Fnewt2-10.jpg" alt="newt2-10.jpg"></p>
<ul>
<li>タイトル... 表示される記事のタイトルです。</li>
<li>スラッグ... 記事のURLとなります。</li>
<li>メタ情報... headタグ内のメタ情報を入力できます。Title、Description、OG画像の設定が可能です。</li>
<li>本文... ブログの内容</li>
<li>カバー画像... アイキャッチの画像です。</li>
<li>著者... 著者を選択します。</li>
<li>カテゴリ（タグ）... 記事に属性を付与できます。<br>
<br></li>
</ul>
<h2>Newt側の初期設定は完了です。</h2>
<p>ここまででとりあえずNewt側の設定は以上です。早い方は10分もかからなかったと思います。</p>
<p>これから各自の環境にスターターテンプレートをクローンして、NewtのAPIを叩くことでコンテンツを取得していきます。</p>
<p>次回はいよいよネットへの公開まで進みます。ここまでご覧いただきありがとうございました。<br>
<br><br>
<a href="https://teto-tech.com/article/newt-blog3">次回 &gt;&gt; 【Newt】できるだけ簡単にJamstackブログをネットに公開</a><br>
<a href="https://teto-tech.com/article/newt-blog3"><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/6297fba8-04f4-408b-ac6d-ff4ac1ce4591%2Fnewt-eyecatch3.jpg" alt="newt-eyecatch3.jpg"></a></p>


【Newt】スターターを活用したツラくないJamstackブログ開設

<p>ある程度フロントエンドの勉強をすると、ブログを始めてみたくなると思います。</p>
<p>話題のJamstackなブログをつくってみたいけど...</p>
<ul>
<li>1から作ると時間がかかる🤔</li>
<li>今更Wordpressでブログを始めるのはちょっと🤔</li>
<li>続くかわからないのにお金をかけたくない🤔</li>
</ul>
<p>とにかく早く記事を書き始めたい...という方は『Newt』というサービスを活用してみてはいかがでしょうか。フロントエンドを勉強している方なら、すぐに始められると思います。</p>
<p>実はこのブログもNewtを活用し、実質1日もかからずに初回の記事まで投稿し、ウェブに公開することができました！<br>
<br></p>
<h2>Newtは国産のヘッドレスCMSサービスです。</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/112c2781-0566-4ba5-ab50-a9e674a40a9b%2Fnewt1.jpg" alt="newt1.jpg"></p>
<p>簡単にまとめるとヘッドレスCMSはブラウザ上で記事を書き、APIとして吐き出させるシステムです。</p>
<p>今回オススメしたいNewtは国産ということもあり、誰でも直感的にが可能です。しかも無料プランで十分なところもポイントです。</p>
<p><a href="https://www.newt.so/">新しいコンテンツ管理の体験 ヘッドレスCMS「Newt」</a></p>
<br>
<h2>Newtがおすすめな理由</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/1d417c7b-7f75-44a2-9642-acbffa412375%2Fnewt2.jpg" alt="newt2.jpg"></p>
<p>他のヘッドレスCMSとは違い、NewtにはAppテンプレートとスターターが用意されており、爆速でWebサイトの立ち上げが可能です。スターターはMITライセンスの範囲であれば自由に改変が可能ですので、技術さえあれば好きなようにカスタマイズできます。</p>
<p>先程から述べているJamstackなWebサイトとは下記を満たすものです。</p>
<ul>
<li>JavaScriptベースでブログを作る</li>
<li>APIを叩いて情報を取得する</li>
<li>Markアップ言語で記事を書く</li>
<li>Statc（static-静的）なホームページ</li>
</ul>
<p>Newtのスターターを利用することで、上記の上から3つまでを満たすことができます。</p>
<p>4つめはNetlifyやVercelなどの静的コンテンツのホスティングサービスにデプロイするだけです。</p>
<p>webの公開までなんと無料です。1円もお金がかかっていません。</p>
<p>私の場合はgoogleアドセンス申請やその他のメリットのためドメインを追加で契約していますが、それでも年間数百円程度です。<br>
<br></p>
<h2>立ち上げの速さならWordPressでもいいのでは？</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/6249fd85-c65a-44d2-93f7-40f99955981c%2Fwordpress.jpg" alt="wordpress.jpg"><br>
はい。ブログを始めるだけならWordPressでも構わないと思います。しかしJamstackなWebサイトに興味を持っている方であれば、JavaScriptに興味がある・勉強してる方やすでにフロントエンドエンジニアの方だと思います。</p>
<p>ネットに情報が溢れているとはいえ、WordPressに拒否反応が出る方も多いかと思います。そのような方ならJamstackなサイトでブログを運営するのはピッタリです。</p>
<p>もちろん、WordPressにもメリットがあり以下のような理由から、利用が減ることはないと断言ができます。</p>
<ul>
<li>圧倒的な使用シェア率で、ネットや書籍の情報の成熟度が段違い。</li>
<li>プログラミング等の専門知識がないライト層でも扱うことができる。</li>
<li>そもそもWordPressをJamstackサイトに組み込める。<br>
<br></li>
</ul>
<h2>WordPressと比べたJamstackのメリット・デメリット</h2>
<p><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/e497088e-d444-4fde-b2fb-89cd591d4213%2FJamstack.jpg" alt="Jamstack.jpg"></p>
<p>正確にはWordPressとJamstackを純粋に比べることはできませんので『ブログを立ち上げて、記事を書き、運営する。』という点に絞り、メリットとデメリットを挙げたいと思います。</p>
<p><strong>◎ メリット</strong></p>
<ul>
<li>サイト自体のパフォーマンスが高く、スピードが速いため、Googleの評価が上がる=SEOに有効</li>
<li>自由なデザインでサイトを構築することができる。</li>
<li>WordPressよりセキュリティが高い（WordPressのサイトはURLの末に/wp-adminを足すと管理のログイン画面に行けてしまう・WordPressほど攻撃の標的にならない など）</li>
<li>コンテンツ（記事）を残したまま、ブログの移管やアップグレード・機能追加が簡単にできる ⇒ 規模を小さく始めることができる。</li>
<li>別途サーバーを契約する必要がないため、コストがかからない。</li>
<li>WordPress独自のお作法に時間を取られない。</li>
</ul>
<p><strong>✕ デメリット</strong></p>
<ul>
<li>プログラミング（JavaScript）の知識が必須。⇒ Newtのスターターを使うことで本当に最低限でOK</li>
<li>WordPressと比べ情報が少ない。<br>
<br></li>
</ul>
<h2>Newt + スターターを使用したJAMstackなサイトの立ち上げ</h2>
<p>想定より長くなってしまいましたので、具体的なNewtのスターターを使用したブログの立ち上げについては、次回に持ち越します。ここまでご覧いただきありがとうございました。<br>
<br></p>
<p><a href="https://teto-tech.com/article/newt-blog2">次回 &gt;&gt; 【Newt】スターターを活用したツラくないJamstackブログ開設</a><br>
<a href="https://teto-tech.com/article/newt-blog2"><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/7d877e38-0a05-45b6-ab51-e315041e3de5%2Fnewt-eyecatch2.jpg" alt="newt-eyecatch2.jpg"></a></p>


#開発

【GAS不要】スプレッドシートをデータベース化してWeb更新【無料】

【3ヶ月で実務レベル】初心者が本当に知りたかったReact入門

【SSSAPI】スプレッドシートをヘッドレスCMSにしたいなら早めに諦めたほうがいい

【Newt】できるだけ簡単にJamstackブログをネットに公開

【Newt】スターターを活用したツラくないJamstackブログ開設

【Newt】たった1日で書き初め！実質無料でJamstackブログ開設