A-AUTO 50 開発者ブログ: GoogleAppsScriptをさわってみた ~WebサイトにGASを連携させてみる編~

～みなさま、こんにちは！～

渡辺です。

前回はSitesを使って簡単にWebサイトを作ってみました。
とはいうものの、ハリボテサイトを作った程度ですが、、、

今回は「WebサイトにGASを連携させてみる」です。
前回投稿からの連載ということで、Sitesは前回作ったものを使用したいと思います。

-前回作成したサイト-

では、この続きからサイトを構築したいと思います。
今回は、GASと連携させるということで、以下をサイト上にアップしてみたいと思います。

・スプレッドシート
・maps

まずはスプレッドシート掲載用のページを追加します。
(ページの追加方法については前回のブログで掲載しているため、今回は省きます。)

追加したページを、編集モードにします。

ここで、左上の”挿入タブ”→”ドライブ”→”スプレッドシート”の順にクリックしましょう。
なんと！ここまでの作業でスプレッドシートの挿入は8割が完了したといっても良いでしょう。

"スプレッドシート"をクリックすると、このような画面が表示されます。

この画面で、ページに挿入したいスプレッドシートをクリックして「選択」ボタンをクリックすると・・・

”Googleスプレッドシート”というものが挿入されたら「保存」ボタンをクリックしてみましょう。

無事に表示されました！
これでスプレッドシートとの連携は完了しました。
主要なGASとの連携は今回とほぼ同様の手順で連携することが可能なようです。
※プレゼンテーション、ドキュメント、フォームなど・・・

最後に、幾つか制限があるのでそちらについて触れておきます。

サイトからスプレッドシートへの入力は出来ません。あくまで表示のみです。

スプレッドシート本体とは非同期なので、本体側に更新が合った場合はサイト側を更新する必要があります。

次はmapsとの連携です。

皆さんも日頃からお世話になっているのではないでしょうか？「Google maps」です。
こちらも連携ができるようなので、そちらも試してみたいと思います。

まずは、新しいページを追加して・・・

スプレッドシートを追加したときと同じ様に”挿入”タブをクリックします。
その後、右下にある”地図”をクリックします。

すると、このような感じで世界地図が表示されます。

上部の検索バーに地名などを入力して検索をすることが可能です。
(ここは、Google mapsの機能ですね！)
私は品川勤務なので、"品川駅"で検索をしてみました。

無事に検索が完了した所で、選択を押します。
その後、出てきたダイアログで”保存”ボタンをクリックして、ページに先ほどの地図を挿入します。

ここからは、先ほどのスプレッドシートと同じです。
画面右上部にある”保存”ボタンをクリックして挿入したMapをページに反映させましょう。

無事、反映が完了したようですね。

ここで、一つポイントです。もうお気づきかもしれないですが、
ページに反映されるMapはデフォルトで、検索をかけた状態が保存されています。

私としては、かなり簡単にWeｂサイトの構築ができたと感じているのですが、いかがでしたか？

だた、テンプレートを挿入しているだけにはなるので、いかんせんカスタマイズ性には劣ってしまいますが・・・

個人的な感想としては、htmlやｃｓｓを実際に書くより数段簡単にサイトの構築が出来るので簡単なサイトを作るときはSitesを採用してみるのもありかなと思います。

今回までのブログでは触れることは出来ませんでしたが、Sitesにスクリプトを埋め込んだり、ｈｔｍｌのソースを埋め込むことも出来るようです。

そちらについての学習が進んだら、ブログのネタにしてみようかなと思います。