目次
- スプレッドシート×ノーコードのツールはさまざま
- 素材となるスプレッドシートをつくってみよう
- glideでアンケートフォームを簡単に作成！
2021.03.14
プログラミングは不要！ スプレッドシート×ノーコードによるウェブサイトの作り方
ウェブサイトを作成してみたいと思いつつも、プログラミングの知識を身につける時間がないからと手をこまねいている人は意外と多いのではないでしょうか。
そういった人にとって強い味方となるのがノーコード。プログラミングなしでアプリやサイトの作成を可能にする、2021年から本格的に流行することが予期されているツールたちです。
そんなノーコードの第一人者といえるのがNoCode Ninja先生。執筆したnote記事「プログラミング不要のNoCode（ノーコード）とは？ どうやって学習するの？」は多くの方にとってノーコードの入り口となり続けています。みなさんもノーコードについて調べた際、先生の記事やSNS上での発信に行き当たったことがあるのではないでしょうか？
NoCode Ninja先生から直接「ノーコード」を使いこなすためのレッスンが受けられる授業シリーズ「明日から使える『ノーコード』で業務改善」。その第2回では、ノーコードツール「glide」を活用したウェブサイト作成の方法が解説されました。ぜひ実際にノーコードツールを開いて手を動かしながら学んでみてください！
スプレッドシート×ノーコードのツールはさまざま
素材となるスプレッドシートをつくってみよう
それではさっそくglideをアンケートフォームの作成やアンケートの集計に応用していきましょう！ スプレッドシートだけでアプリがつくれるglideはNoCodeでの業務改善に有効です。
まずはglideの本体サイトにアクセスし、右上の「Sign up」ボタンをクリックしてユーザー登録を行います。
新しいアプリを作る際にクリックしたいのが「New App」。今回作りたいのは以下のアンケートアプリです。
中央に表示された「アンケートに答える」ボタンを押すと入力画面が現れます。さらにアンケート結果の集計も行わせることが可能です。テンプレート（templates）も豊富なglideですが、今回はイチからつくる体験をお届けするため、使いません。
アプリの素材となるスプレッドシートを作るために用いるのが「Googleスプレッドシート」。自分のアカウントからGoogleドライブにアクセスし、「新規」ボタンから「無題のスプレッドシート」を呼び出します。
タイトルを「Schooアンケートアプリ」、タブの名前を「アンケート」に変更しましょう。そこから各セルにアンケートで尋ねたい内容を入力していきます。「名前」「メールアドレス」「興味があるノーコードツール」「授業の感想」「また受けたい？」と5つの項目をA～E各列1行目に入力しました。
つづけて2行目各列に「NoCode Ninja」「nocodeninja@nocodecamp.co.jp」「glide,Bubble」「聞きたい（顔文字）」「絶対見てね!」を入力していきます。「1行目に問いをつくって2行目に答えのサンプルを書くイメージです」と先生。
こうして素材となるスプレッドシートは出来上がりです。
glideでアンケートフォームを簡単に作成！
glideの画面を再び呼び出し、「New App」をクリックします。すると「Select a file」と題された画面に「Schooアンケートアプリ」という名前のスプレッドシートが表示されました。クリックして「select」ボタンを押すとしばらくの間をおいて表示されたのが以下の画面です。
「先ほど入力した内容がそのまま表示された感じですね」と先生。とはいえこれではアンケートには程遠い状態です。そこで、glide上でアプリの見た目を変更していきます。
そのために使うのが画面右の「Properties」欄に表示された「STYLE」の項目。「List」「Tiles」「Calendar」など各スタイルをクリックすればその通りにアプリ画面の構成が変更されます。この中でも先生が注目するのが「Details」。一から自由度の高いカスタマイズを行えるスタイルです。
すでに入っているものをいったん全部消した先生は、「Components」の右端に表示された＋（プラス）ボタンをクリックします。するとTEXT、LAYOUT、MEDIAなどアプリ作成に用いることができるさまざまなパーツの候補が現れました。
「Text」の中から目的にあったアイコンをクリックすると、画面上に追加されます。この内容は、スプレッドシートの内容から選ぶこともできますし、自由に文言を入力することもできます。
先生は「Schooアンケート」と手打ちで入力。さらにStyle「Headline2」を選択しました。
「この下に何を置くのも自在です」と先生。再度＋ボタンをクリックし、MEDIAカテゴリに含まれる「Image」を挿入します。今回は「From URL」を使って、Googleドライブにアップロード済みの画像を呼び出します。そのURLは「共有」ボタンを押すと表示される「リンクを取得」からコピーすることができます。ここで、リンクを閲覧できる対象者を「リンクを知っている全員」に変更することをお忘れなく。
つづいて再度＋ボタンをクリックし、画面に「Form Button」を追加。Titleを「アンケートに答える」に変更し、アイコンも設定しました。
これだけで、「アンケートを答える」ボタンをクリックすると、スプレッドシート1行目に入力した内容が解答欄とともに表示される仕組みが出来上がっています。
問題がなければ右上の「PUBLISH」ボタンをクリックしましょう。作成したアプリを実際に使える形でリリースすることができます。
このようにglideとgoogleスプレッドシートを用いれば簡単にアンケートフォームを作成可能です。今後、何かのアンケートを作成したいときはぜひglideの存在も思い出してみてください！ また、この授業の後半では「Airtable」の使い方が、次回第3回の授業ではスプレッドシートを応用した「自動化」の方法が解説されています！ より深くノーコード×スプレッドシートを学びたい人は、そちらもご覧になることをおすすめします！
文＝宮田文机
- 今回取り上げたSchooの授業はこちら！
- 『明日から使える「ノーコード」で業務改善 第2回 実践から学ぶ「ノーコード」——スプレッドシートでウェブサイト作成』
今日の生放送
スプレッドシートとして有名なのがExcel、そしてGoogleスプレッドシートです。これらをつくるだけでみんなが使うようなウェブサイトやアプリを開発できるのが、ノーコードの魅力のひとつです。そのために使えるノーコードツールには以下のようにさまざまな種類があります。
【1】glide（スプレッドシート×ノーコードの定番）
【2】Airtable
【3】AppSheet（Googleの開発したスプレッドシート×ノーコードサービス）
【4】Stacker
【5】Siteoly
【6】Magic Instructions（福岡のスタートアップ企業が開発した国産ツール）
誰もが知っていて触れるうえ、編集が簡単なスプレッドシート。さらに各ノーコードツールで同じものを展開できる再現性の高さも魅力です。だからこそスプレッドシート×ノーコードの手法を身につけることが有益だといえるのです。最新ツールに抵抗がある方もExcelを使うと思えば、とっつきやすく導入しやすい点も魅力でしょう。
それぞれに操作性や自由度の高さに違いがあるため、自分の目的にあったツールを選定することから活用をはじめてもいいかもしれません。