どうも、まさとらん（@0310lan）です！
今回は、Googleが提供しているスプレッドシートを表計算ではなく、Web開発の即戦力になる万能ツールへと変えてしまうサービスを厳選してご紹介しようと思います。
スプレッドシートのデータを活用して、Webコンテンツを作成したりデータベースとして活用するなどさまざまな開発手法に応用できるので、ご興味ある方はぜひ参考にしてみてください！
■スプレッドシートのデータを即座にAPIで提供する！
【 SwiftSheet 】
SwiftSheetはExcelやスプレッドシートなどで管理しているデータを、即座にRESTful APIとしてホスティングしてくれるのが大きな特徴です。
CSVで保存したファイルをアップロードするだけという簡単な操作のため、ユーザー登録や課金などは一切不要です。
たとえば、お店のリストをスプレッドシートで管理しているとします。
これをメニューからCSVファイルで保存すれば準備完了です。
SwiftSheetのサイト上でさきほどのCSVファイルをドラッグ＆ドロップします。
オプションとして、パスワードやホスティング期限などを設定しておきましょう。
すると、CSVの中身をテーブル形式で表示してくれるうえ、APIのエンドポイントも確認することができます。（GraphQL用のAPIも提供しています）
このページのURLをシェアすることも可能ですが、せっかくなのでAPIも使ってみましょう。
言語は何でもよいのですが、たとえばNode.jsのrequestモジュールを使うと次のように記述できます。
const options = { url: 'https://swiftsheet.app/api/sheet/*******', method: 'GET', headers: {'Authorization': '*******'} //パスワード設定がある場合のみ } request(options, function(error, response, body) { console.log(body); })
オプションでパスワードを設定していなければ【headers】プロパティは不要です。
ログを見ると、スプレッドシートで管理しているお店のリストがJSON形式で出力されているのが確認できます。
このようにログイン不要で即座にスプレッドシートのデータをAPI化できるうえ、閲覧期限も設定できるのでアイデアしだいで幅広い使い方ができるでしょう。
なお、paizaラーニングでは、Node.jsの利用に必要なJavaScriptの基本が学べる講座「JavaScript入門編」を公開しています。
＜参考リンク＞
■スプレッドシートをWebコンテンツの開発に利用する！
【 Sheetsu 】
Sheetsuはスプレッドシートで管理しているテキスト・リンク・画像などのデータをWebコンテンツに利用できるようにAPI化してくれるサービスです。また、データベースのようにフォームなどの入力データをスプレッドシートに保存することも可能です。
使い方は簡単で、たとえば【name】【email】【icon-url】という列を次のように作っておきます。
SheetsuのダッシュボードからスプレッドシートのURLをコピペすれば準備は完了です。
Sheetsuから以下のようなURLが生成されます。（末尾に固有のIDが割り振られます）
https://sheetsu.com/apis/v1.0su/********
このURLを使うことで、スプレッドシートのデータを自由に読み書きできるようになるわけです。（専用のJSライブラリも読み込みます）
単純にデータをテーブルで表示するだけなら次のように記述することができます。
<table sheetsu="https://sheetsu.com/apis/v1.0su/**********"> <tr> <td><img src="{{icon-url}}"></td> <td>{{name}}</td> <td>{{email}}</td> </tr> </table>
{{ }}で囲んだ中に、スプレッドシート1行目の列に書かれている【name】【email】【icon-url】をそのまま記述するとデータが出力されるようになっています。
ブラウザで確認すると以下のような感じになります！
このようにさまざまなデータをスプレッドシートから取得することで、Webページのコンテンツを制作できるようになるわけです。
また、Sheetsuはフォームにも活用することが可能で、次のように記述すれば入力した内容をスプレッドシートに保存していくことができます。
<form sheetsu="https://sheetsu.com/apis/v1.0su/**********"> <input type="text" name="name"><br> <input type="email" name="email"><br> <input type="submit"> </form>
name属性に記述した【name】【email】がスプレッドシートの列名になります。送信ボタンをクリックすれば、次のようにスプレッドシートへデータが蓄積されるようになります。
他にもテーブル表をそのままWebコンテンツとしてiframeで出力できたり、読み書きの権限設定やNode.js, Ruby, Python, PHPによる制御なども可能です。
＜参考リンク＞
■スプレッドシートをデータベースのように使う！
【 Stein 】
Steinはスプレッドシートのデータを取得するのはもちろんのこと、検索や行の追加・削除などデータベースのように自由度の高い制御をおこなうことを実現してくれるサービスです。
使い方はこれまでのサービスと同様にスプレッドシートのURLをコピペするだけです。
すると、以下のようなURLが生成されます。（末尾に固有のIDが割り振られます）
https://api.steinhq.com/v1/storages/********
このURLを使い、スプレッドシートのデータをJSONで取得するには次のように記述します。
const store = new SteinStore(【生成されたURL】); store.read("testsheet") .then(data => console.log(data));
read()の引数にある【testsheet】というのはスプレッドシートの【シート名】になります。
コンソールログを確認すると、スプレッドシートのデータがJSON形式で出力されているのが分かります。あとは、このJSONを利用してプログラミングしていくのですが、Steinはさらに便利な機能が提供されています。
read()の第2引数にオプションを設定することが可能で、たとえばスプレッドシートの3行目から5個分のデータを取得するには次のように記述できます。
store.read("testsheet", { limit: 5, offset: 3 })
検索機能も提供されているので、たとえば列名【name】にある【merry space】という行だけを取得するには次のように記述できます。
store.read("testsheet", { search: { name: "merry space" } })
この検索機能にさきほどの【limit, offset】などのオプションを組み合わせることも可能です。
また、スプレッドシートの行を追加することも可能で、任意の列名と内容を追加するにはappend()を次のように記述します。
store.append("testsheet", [ { title: "サンプルタイトル", author: "太郎", content: "サンプルコンテンツ", } ])
この機能を活用すれば、登録フォームやブログのようなコンテンツも開発可能です。
任意のデータを削除するには、delete()を次のように記述します。
store.delete("testsheet", { search: { name: "merry space" } })
このようにスプレッドシートをデータベースのように扱えるので、個人開発や学習用途には最適でしょう。Node.jsによる開発も可能なので、認証された人だけがデータを扱うような設定も記述できます。
＜参考リンク＞
■スプレッドシートをメルマガ配信サービスとして使う！
【 MergeMail 】
MergeMailはスプレッドシートで管理しているメールアドレスや名前などを利用して、複数人へ同時にメールを配信できるようにするサービスです。
Gmail用の拡張機能を使うので、基本的にはChromeブラウザを推奨している点だけ注意しましょう。
使い方ですが、たとえば名前やメールアドレスなどの情報をスプレッドシートに登録しておきます。
（※メールアドレスは必須項目になります）
次に、Gmailを開くとMergeMailのアイコンが表示されるので、クリックすると専用のダイアログが開きます。
ダイアログにはスプレッドシートで管理しているメールアドレスが一覧で取得できているのが確認できます。Gmailの宛先には、自動ですべてのメールアドレスが設定されるようになっているので、そのまま複数人へ同時に送信可能です。
さらに、スプレッドシートの列名を変数のように使うことも可能で、たとえば【name】の列を次のようにメールの文章に組み込むことが可能です。
{{ }}で列名を囲めば、一人ずつ異なる名前を添えて文章を組み立てることができるわけです。
また、オプション設定として相手がメールを開封したかどうかを確認できる機能や、予約投稿などもできるようになっています。
独自のメルマガ配信にご興味ある方は、ぜひ参考にしてみてください！
＜参考リンク＞
■スプレッドシートでPWAアプリを開発する！
【 Glide 】
Glideはスプレッドシートのデータを活用して、さまざまな種類のPWAアプリを簡単に開発できるサービスです。プログラミングは不要で、グラフィカルなWebエディタを利用して開発するので誰でも手軽に構築できるのが大きな特徴です。
たとえば、公園の検索アプリを作るなら名称・住所・連絡先・画像などのデータをスプレッドシートで管理するだけです。
これらのデータを開発エディタ上で自由に組み合わせることが可能になります。
画面レイアウトやコンテンツの追加・削除、ナビゲーション、認証機能など、さまざまな便利ツールも搭載しているので本格的なアプリ開発を手軽におこなえます。
また、最終的に完成したアプリは公開用のWebサイトとして書き出すこともできます。
あとは、スマホなどから読み込むだけですぐにでも大勢の人に使ってもらうことができるわけです。
このGlideについては、基本的な使い方や開発手法などを次の記事で詳しく解説しているので、ご興味ある方はぜひ参考にしてみてください！
＜参考リンク＞
■動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
■まとめ
今回は、スプレッドシートをWeb開発に活用できるサービスを厳選してご紹介しました。
いずれも無料もしくは無料プランが提供されているので、気になったサービスはすぐにでも試してみることをオススメします。特に、今まで表計算でしかスプレッドシートを使ってこなかった人は、新しい発見がたくさんあると思います。
Webアプリの開発に興味がある方も含めて、ぜひオリジナルのサービスを開発してみてください！
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
