<h1>1.Googleアカウントでログイン</h1>まずは<a target="_blank" rel="noopener noreferrer nofollow" href="https://grid-cms.vercel.app/login">ログインページ</a>へ移動してサインインボタンを押してください。<img src="https://user-images.githubusercontent.com/67810971/145708352-1868417b-7bef-421f-b5a2-98442be2194d.png">その後、どのGoogleアカウントでログインするかを選び、画面が変わるのを待ちましょう。<h1>2.Grid CMSを承認する</h1>ログインが終わり画面が切り替わると「GET STARTED」のボタンが出てきますのでそちらをクリックしてください。<img src="https://user-images.githubusercontent.com/67810971/145708376-ef38de16-128a-42a8-8d29-0763114b88ff.png">すると先程と同様に、どのGoogleアカウントのスプレッドシートにアクセスするかを選ぶ画面が出てきますのでアカウントを選択してください。アカウントの選択が終わると、Grid CMSを認証する画面が出てきます。画面左下の「詳細を表示」をクリックすると、下記の画像のような詳細が出てきます。緑の下線である「grid-cms(安全ではないページ)に移動」をクリックしてください。<img src="https://user-images.githubusercontent.com/67810971/145708357-6343b52d-8ed3-4dd0-8fa9-0c91e6e5bd68.png">すると、画面が切り替わりアカウントの持つサービスの承認画面が出てきます。上から<ol><li>Grid CMSがGoogleドライブの全てのファイルへアクセスできる権限を付与する</li><li>Grid CMS上でGoogleドライブのファイルへアクセスし、データの作成や照会を行う権限を付与する</li><li>Grid CMSがスプレッドシートに対してアクセスできる権限を付与する</li></ol>この3つ全てを承認しなければGrid CMSを利用することができません。3つ共にチェックして右下の「continue」ボタンを押してください。最後に承認の解除方法も合わせて記述しますのでご安心ください。<img src="https://user-images.githubusercontent.com/67810971/145708366-b50b4e18-b751-4efb-b382-974d055558b1.png"><h1>3.コンテンツ作成</h1>Grid CMSの承認が済むと画面が切り替わります。この画面でコンテンツ作成のためのセットアップを行います。下記画像はセットアップフォームの完成形です。次のセクションで詳細を綴ります。<img src="https://user-images.githubusercontent.com/67810971/145708384-998e93b7-942c-489e-842c-5a17a4081bb1.png"><h2>3-1. Set up colms</h2>これは作成するコンテンツのカラムを作成するかどうかの是非をスイッチで切り替えます。カラムとはスプレッドシートの1行目に記入されているデータのことです。完成形は下記の画像のようになります。<img src="https://user-images.githubusercontent.com/67810971/145708375-4246b00a-3b21-4a59-95b9-60f9805643ae.png">もちろんスプレッドシートに直書きしていただいても問題ありません。しかしその場合はSet up colmsをOFFにしてください。Set up colmsをONにするとフォームの一番下にあるカラムのデータを入力するフォームが有効になり、データを入力し「Enterキー」を押すと一つずつ登録されていきます。カラムにはとある制約があります。<h4>3-1-1. エディターを適用する。</h4>ブログ記事等のコンテンツを作成する際は専用のエディターを利用することができます。エディターを利用するには、カラムに「EDITOR」の文字を含める必要があります。例えば<ul><li>bodyEDITOR</li><li>textEDITOR</li><li>articleEDITOR</li></ul>等が挙げられます。<h4>3-1-2. JSONデータを適用する。</h4>Grid CMSではJSONデータを扱うことができます。JSONデータを使用するにはカラムに「JSON」の文字を含める必要があります。例えば<ul><li>tagsJSON</li><li>writerJSON</li><li>articleJSON</li></ul>党が挙げられます。JSONデータはGrid CMSの「カスタムJSON機能」を利用することもできます。カスタムJSON機能を利用することで、好きなJSONデータをテンプレート化していつでも呼び出すことができます。機能の紹介については別の記事でご紹介します。<h2>3-2. スプレッドシートIDを登録</h2>Grid CMS上で使いたいスプレッドシートのIDを登録していただきます。しかしこのフォームに入力していただくのはスプレッドシートのURLをコピペしていただくで問題ありません。スプレッドシートのURLは実際にスプレッドシートのページに行くことでコピペすることができます。<img src="https://user-images.githubusercontent.com/67810971/145708383-fc070a50-1aa4-4198-8491-81c892f58034.png"><h2>3-3. スプレッドシートのシート名を登録</h2>こちらも実際のスプレッドシートのページに行きシート名をコピペ等して登録してください。スプレッドシートの画面の左下にそれぞれ記載されています。例えば<ul><li>sheet1</li><li>シート1</li></ul>等が挙げられます。これでセットアップフォームの入力は終了です。あとは「AUTHENTICATE」をクリックして準備は完了です。<h1>4. スプレッドシートにコンテンツを作成する</h1>セットアップが完了して画面が切り替わったらいよいよコンテンツを作成していきましょう。まずはアボガドマークのEndpointsページへ移動しましょう<img src="https://user-images.githubusercontent.com/67810971/145708368-44382672-9302-4341-9788-69d090497042.png">すると下記のような画面が出てきます。<img src="https://user-images.githubusercontent.com/67810971/145708361-7dbaa5cf-aab2-4e26-9741-276f6d5f5dd6.png">左上に「sheet2」というボタンが出てきています。これは先程セットアップで登録したシート名です。では「sheet2」ボタンを押してみましょう。するとコンテンツ作成ページが表示されます。もし表示されない場合は登録したスプレッドシートのIDかシート名が間違っている可能性があります。後ほど訂正できるのでご安心ください。<img src="https://user-images.githubusercontent.com/67810971/145708370-a1a13ec1-e7aa-49f4-bbae-296d4d0c9429.png">では早速コンテンツを作成していきましょう。画面下部にある黒いボタン群があります。黒いボタンに表示されているデータはセットアップの際に登録したカラムです。それらをクリックして実際にコンテンツを作成していきます。<h3>4-1. ID</h3>Grid CMSではidを入力する際のショートカットをご用意しています。入力補助のためのプルダウンをクリックしていただくと、「uuid」が存在します。これを選択するとuuidv4が生成され、一意性の保たれたIDが発行されます。<img src="https://user-images.githubusercontent.com/67810971/145708358-497ddb01-8398-4b9c-b55e-dfb56da8c0c5.png"><h3>4-2. TITLE</h3>Grid CMSでは自由にテキストを入力していただけます。その際はプルダウンの「free text」を選択してください。<img src="https://user-images.githubusercontent.com/67810971/145708386-51084d95-9cfa-4904-83b7-c9994d17cc48.png"><h3>4-3. BODYEDITOR</h3>Grid CMSでは記事作成に役立つエディターをご用意しています。カラム名に「EDITOR」が含まれている場合のみ利用できます。<img src="https://user-images.githubusercontent.com/67810971/145708385-30805e68-c142-47b6-aa9a-05f0842d4f8b.png"><h3>4-4. TAGSJSON</h3>Grid CMSではJSONデータを扱うことができます。カラム名に「JSON」が含まれている場合のみ利用できます。自由にJSONデータを入力できますが、面倒な時はプルダウンからショートカットデータやカスタムJSONデータを呼び出すことができます。カスタムJSON機能については追って別記事でご紹介します。<img src="https://user-images.githubusercontent.com/67810971/145708382-3ce78298-921f-4c45-955b-2ba90d705064.png"><h3>4-5. CREATEDAT</h3>Grid CMSでは日付を入力する際のショートカットをご用意しています。入力補助のためのプルダウンをクリックしていただくと、「date」が存在します。これを選択するとISO規格の時間まで含めたデータが生成されます。<img src="https://user-images.githubusercontent.com/67810971/145708371-f3bb99f9-76a7-4ddd-b333-9230f306f47b.png">これらのデータを入力し、最後に下の「RESULT DATA」ボタンを押して、最終的なコンテンツデータの内容を確認し「CREATE」を押して登録に成功すると作成完了です。コンテンツ作成が成功すると下記の画像のように表示されます。<img src="https://user-images.githubusercontent.com/67810971/145708374-9e69aba4-38fd-41c5-a25d-6e7f7fa3017d.png">スプレッドシートを確認してもちゃんとデータが更新されています。<h1>5. さいごに</h1>Grid CMSの基本的な使い方は以上です。お疲れ様でした🥳今後はまだまだ隠されているGrid CMSの機能についてご紹介していきますのでお楽しみに！また、もしGrid CMSを解約したいときはメニューの「Permission」へアクセスしていただくと、Grid CMSの承認を解くこともできますのでご安心ください。<img src="https://user-images.githubusercontent.com/67810971/145708368-44382672-9302-4341-9788-69d090497042.png">それでは良いCMSライフを！

Grid CMSはスプレッドシートを利用したHeadressCMSプラットフォームです。よりシンプルなCMS体験を始めましょう！

Get startedGrid CMS