<h2>1. Google のサービスアカウントを作成する</h2>Grid-CMS を使うには Google Cloud Platform に登録する必要があります。下記リンクより登録できます。<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.google.com/">https://cloud.google.com/</a>登録後はサービスアカウントページへ遷移し、「+サービスアカウントを作成」をクリックしてください。 <img src="https://user-images.githubusercontent.com/67810971/144741942-e4abda69-8850-43fd-8fcb-47e142636270.png">作成するサービスアカウントの詳細を入力していきます。命名は自由に決められます。<img src="https://user-images.githubusercontent.com/67810971/144742988-a2b37e85-308e-4d37-9e9b-842cd17535ad.png">続いて対象のサービスアカウントがアクセス可能な権限を付与します。主に Google Drive と Spreadsheet にアクセスし、編集できる権限があれば困りません。今回は「編集者(全ての Google サービスに対して編集権限を持つ)」に設定します。<img src="https://user-images.githubusercontent.com/67810971/144742998-0c5e8ab3-2be7-44f0-9c66-905d0c5e0a8f.png"><h2>2. サービスアカウントのキーを追加・保存する</h2> サービスアカウントの作成ができたら、grid-cms-sdk に必要なキーである、private_key と email を取得します。作成したサービスアカウントの詳細ページにアクセスし、「キー」タブに移動し「鍵を追加」をクリックしてください。<img src="https://user-images.githubusercontent.com/67810971/144742997-0fbf4999-89ff-46bb-a207-1f636025bab1.png">「新しい鍵を作成」をクリックし、秘密鍵の作成を JSON でダウンロードします。こちらの JSON ファイルは安全な場所に保存しておいてください。<img src="https://user-images.githubusercontent.com/67810971/144742996-2ae329a5-c8aa-446c-9793-0956ec438210.png"> JSON ファイルの中身は下記のような構成になっています。<pre><code class="language-json language-json">{
 "type": "",
 "project_id": "",
 "private_key_id": "",
 "private_key": "",
 "client_email": "",
 "client_id": "",
 "auth_uri": "",
 "token_uri": "",
 "auth_provider_x509_cert_url": "",
 "client_x509_cert_url": ""
}</code></pre>grid-cms-sdk では上記のキーの中から、「private_key」と「client_email」のみ使います。そのままの値でコピーして環境変数として定義しておいてください。 <pre><code>PRIVATE_KEY="private_key"
EMAIL="client_email"</code></pre><h2>3. spreadsheet にサービスアカウントを追加する</h2>さあ、ここまで来たらゴールは目前です。あとは grid-cms-sdk で使用したい spreadsheet にサービスアカウントの登録を行います。 対象の spreadsheet のページで「共有」をクリックしてください。<img src="https://user-images.githubusercontent.com/67810971/144742994-a6d6e13a-5975-49e5-b4b2-42eec5126e69.png"> 先ほどの秘密鍵として発行された JSON ファイルの「client_email」の値を登録すれば準備完了です！ <img src="https://user-images.githubusercontent.com/67810971/144742993-1c5b5a05-d949-495d-8cf5-125c1c898814.png">お疲れ様でした 👏🥳🎉

grid-cms-sdkを始めるための準備運動を行いましょう！Googleのサービスアカウントを作成し、grid-cms-sdkのAPIを有効にする手順をご紹介します。

grid-cms-sdkの始め方

<h1>1. Next.jsのプロジェクトを立ち上げる</h1>

grid-cms-sdkをNext.jsで使う方法をご紹介します。grid-cms-sdkはSSR及びSSGといったサーバーサイドでデータを読み込むAPIを使用しています。Next.jsではSSRやSSGを対応しているため、とても相性がいいです

Get startedGrid CMS SDK