![](https://rios-studio.com/wp-content/uploads/2020/07/2469dd20be5585b51c53a90aef7b281c-1024x474.png)
GoogleSpreadSheetから簡単にWebサイトが作れるSheetUIなるものを知った。新しい物好きの僕はすぐ触ってみたけど、なるほど便利そう!まだ実用化案は出ていないけど!
とりあえずどんなもんなのか見たい人ように作ったサイトと、手順を記しておく。
SpreadSheet作りから始めてWebサイトになるまでの手順
とりあえず元になるSpread Sheetを手打ち
全ての大元になるSpreadSheetを手打ちする。今回はこのサイトの記事の情報をシートに詰め込んでいく。
![](https://rios-studio.com/wp-content/uploads/2020/07/d33fbd3e9648ce47bf617087aa526e86-1024x298.png)
重要なのが、1行目は列の識別子として後々使うことになるということ。
Spread SheetのリンクをコピーしてSheetUIのLet’s Tryのページにペーストする
![](https://rios-studio.com/wp-content/uploads/2020/07/b58b200c7a2f22276213fbecad354a7b-1024x903.png)
これが一癖あった。
ブラウザーのURLだと、うまくいかないことが何度かあった。
あと、ウェブに公開をしていないとうまくいかない。
Unable to retrieve the specified spreadsheet.
って言われる。
僕がうまくいった手順は、
- ファイルメニューからウェブに公開を選択して、公開する
ファイルメニューから、共有を選択して、そこからリンクを取得してブラウザのURLコピペでいけました。多分、ウェブに公開を押していなかったから?- SheetUiにペーストする
![](https://rios-studio.com/wp-content/uploads/2020/07/7d246d143eee2087588051881335c3dd-1-1024x797.png)
![](https://rios-studio.com/wp-content/uploads/2020/07/e4f480732dcbe435693591961dcc5d9a-1024x1018.png)
このリンクだと、なんかうまくいかなかったから、
![](https://rios-studio.com/wp-content/uploads/2020/07/4ba768000aa0da28c4eeafb97393360d-1024x235.png)
共有設定の、リンクをコピーして対応した。
![](https://rios-studio.com/wp-content/uploads/2020/07/2ea23bf992b34d27fe2752137d34c56a-1024x545.png)
SheetURLにペーストしたら、Sheet IDの方は自動入力される。そしたらNEXT!!!!!!
ウェブサイトの見せ方を選ぶ
![](https://rios-studio.com/wp-content/uploads/2020/07/a450be100de7b02b2c19b7ee8163a2d4-1-1024x477.png)
基本的にSpread Sheetのデータをメディアカード形式で並べてくれます。その大枠に関してほんの少しカスタマイズさせてくれます。
コンテンツの並べ方の違いList・Grid・GridResponsive
List
![](https://rios-studio.com/wp-content/uploads/2020/07/2ba73081439b91e869a350b91a14c533-1024x875.png)
Listは縦並びにずらっと。
Grid
![](https://rios-studio.com/wp-content/uploads/2020/07/552e4a3f801427a8959bc53d075a51a5-1024x661.png)
Gridは横並びにずらっと。
でもスマホになっても段落ちさせないでカラム幅を小さくし続けてしまう↓↓
![](https://rios-studio.com/wp-content/uploads/2020/07/a4a40e2b54b1e170c4251224ce02ea80-609x1024.png)
GridResponsive
![](https://rios-studio.com/wp-content/uploads/2020/07/274adf383475a979d154ba04e4c6a521-596x1024.png)
Grid Responsiveはスマホサイズで、カラムを段落ちさせてくれるので、モバイル端末でもみやすい。
コンテンツの見た目の違いSimpleCard・Media・Media2・ImageTile
SimpleCard
![](https://rios-studio.com/wp-content/uploads/2020/07/67833ca3c957f50d29a9413e86252898-1.png)
Simple Cardは画像がつかない
Media Card
![](https://rios-studio.com/wp-content/uploads/2020/07/dd3d8b6fbc0fd7187b23a676f341615b.png)
![](https://rios-studio.com/wp-content/uploads/2020/07/07b1485a1cb7745ba5a88092cb9b0f4c.png)
MediaとMedia2は画像の位置が違うくらいの差
ImageTile
![](https://rios-studio.com/wp-content/uploads/2020/07/04ee6ef6e67c026a068bf5ce67d07b4c.png)
Image Tileはイメージ推し。
スプレッドシート のデータをどこに表示させるか選ぶ
![](https://rios-studio.com/wp-content/uploads/2020/07/ba7cdf524794e6457cb9a96971f5b805-1024x547.png)
Sourceの+ボタンをクリックすると、Spread Sheetの1行目のセルに記入した文字列が一覧されます。対応する列のセルを選ぶと・・・
![](https://rios-studio.com/wp-content/uploads/2020/07/0b08841c845143bb979a982668db8723-1024x524.png)
バッツリ画像を取ってきました。
同じようにTitleやDescriptionも設定していきます。
![](https://rios-studio.com/wp-content/uploads/2020/07/fc4f3e6b1fcd4f2cec0ca7d0b8d3c639-1-1024x539.png)
![](https://rios-studio.com/wp-content/uploads/2020/07/376f1cb0e8bafcc9467039a5dc9de8ba-1024x683.png)
![](https://rios-studio.com/wp-content/uploads/2020/07/1bfaface6d96ae1286623a4bcfdde20b-1024x808.png)
SNSボタンには選択肢がたくさん。ここで何も選択をしなければ、ボタンは消えます。横のBUTTONも同じく、何も設定しなければWEBサイト上ではボタン文字の表示はされません。
そして最後にFINISHを押せばWEBサイトが出来上がってしまいます。
SheetUIのデメリット
出てきたばっかりのサービスにデメリットも何も無いと思いますが、これ、Webサイト作った後にせって変更しようと思ったら、どこで変えられるんでしょうか。
今のところ編集ボタンみたいなのは見つけられておりません。SpreadSheetにデータを追加したらどんどんWebサイトも更新されていくのはすごいです!
後、カードをホバーしたらポインターカーソルになるけど、別にそのクリックアクションの設定方法もなかったし、、今後に期待です!
Sheet UIはCMSキラーになりうるのか、、、目が離せない!
SpreadSheetをバリバリ使いこなしてデータとってる人からしたら、それを簡単にフロント側作って公開できるのは大きなポテンシャルを秘めていると思う。
使い方次第で面白いことができそうだなとは思う。
今後、より詳細な設定ができるようになったり、インタラクティブにSpreadSheetとデータ通信ができたら、
本格的なWebサイトも作れるし、、もしかしたらNoSQLの新たなる刺客にもなりうるかも…?
目が離せない!!!