paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

スプレッドシートをWeb開発の万能ツールに変えるおすすめサービス厳選まとめ!

f:id:paiza:20190926131027j:plain
どうも、まさとらん(@0310lan)です!

今回は、Googleが提供しているスプレッドシートを表計算ではなく、Web開発の即戦力になる万能ツールへと変えてしまうサービスを厳選してご紹介しようと思います。

スプレッドシートのデータを活用して、Webコンテンツを作成したりデータベースとして活用するなどさまざまな開発手法に応用できるので、ご興味ある方はぜひ参考にしてみてください!

■スプレッドシートのデータを即座にAPIで提供する!

SwiftSheet

f:id:paiza:20190926131141j:plain

SwiftSheetはExcelやスプレッドシートなどで管理しているデータを、即座にRESTful APIとしてホスティングしてくれるのが大きな特徴です。

CSVで保存したファイルをアップロードするだけという簡単な操作のため、ユーザー登録や課金などは一切不要です。


たとえば、お店のリストをスプレッドシートで管理しているとします。

f:id:paiza:20190926131205j:plain

これをメニューからCSVファイルで保存すれば準備完了です。


SwiftSheetのサイト上でさきほどのCSVファイルをドラッグ&ドロップします。

f:id:paiza:20190926131219j:plain

オプションとして、パスワードやホスティング期限などを設定しておきましょう。


すると、CSVの中身をテーブル形式で表示してくれるうえ、APIのエンドポイントも確認することができます。(GraphQL用のAPIも提供しています)

f:id:paiza:20190926131231j:plain

このページの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

f:id:paiza:20190926131417j:plain

Sheetsuはスプレッドシートで管理しているテキスト・リンク・画像などのデータをWebコンテンツに利用できるようにAPI化してくれるサービスです。また、データベースのようにフォームなどの入力データをスプレッドシートに保存することも可能です。


使い方は簡単で、たとえば【name】【email】【icon-url】という列を次のように作っておきます。

f:id:paiza:20190926131435j:plain


SheetsuのダッシュボードからスプレッドシートのURLをコピペすれば準備は完了です。

f:id:paiza:20190926131447j:plain


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】をそのまま記述するとデータが出力されるようになっています。


ブラウザで確認すると以下のような感じになります!

f:id:paiza:20190926131546j:plain

このようにさまざまなデータをスプレッドシートから取得することで、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】がスプレッドシートの列名になります。送信ボタンをクリックすれば、次のようにスプレッドシートへデータが蓄積されるようになります。

f:id:paiza:20190926131629j:plain

他にもテーブル表をそのままWebコンテンツとしてiframeで出力できたり、読み書きの権限設定やNode.js, Ruby, Python, PHPによる制御なども可能です。


<参考リンク>

 

■スプレッドシートをデータベースのように使う!

Stein

f:id:paiza:20190926131714j:plain

Steinはスプレッドシートのデータを取得するのはもちろんのこと、検索や行の追加・削除などデータベースのように自由度の高い制御をおこなうことを実現してくれるサービスです。


使い方はこれまでのサービスと同様にスプレッドシートのURLをコピペするだけです。

f:id:paiza:20190926131728j:plain


すると、以下のような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

f:id:paiza:20190926132045j:plain

MergeMailはスプレッドシートで管理しているメールアドレスや名前などを利用して、複数人へ同時にメールを配信できるようにするサービスです。
Gmail用の拡張機能を使うので、基本的にはChromeブラウザを推奨している点だけ注意しましょう。


使い方ですが、たとえば名前やメールアドレスなどの情報をスプレッドシートに登録しておきます。

f:id:paiza:20190926132139j:plain

(※メールアドレスは必須項目になります)


次に、Gmailを開くとMergeMailのアイコンが表示されるので、クリックすると専用のダイアログが開きます。

f:id:paiza:20190926132152j:plain

ダイアログにはスプレッドシートで管理しているメールアドレスが一覧で取得できているのが確認できます。Gmailの宛先には、自動ですべてのメールアドレスが設定されるようになっているので、そのまま複数人へ同時に送信可能です。


さらに、スプレッドシートの列名を変数のように使うことも可能で、たとえば【name】の列を次のようにメールの文章に組み込むことが可能です。

f:id:paiza:20190926132204j:plain

{{ }}で列名を囲めば、一人ずつ異なる名前を添えて文章を組み立てることができるわけです。

また、オプション設定として相手がメールを開封したかどうかを確認できる機能や、予約投稿などもできるようになっています。
独自のメルマガ配信にご興味ある方は、ぜひ参考にしてみてください!


<参考リンク>

 

■スプレッドシートでPWAアプリを開発する!

Glide

f:id:paiza:20190926132438j:plain

Glideはスプレッドシートのデータを活用して、さまざまな種類のPWAアプリを簡単に開発できるサービスです。プログラミングは不要で、グラフィカルなWebエディタを利用して開発するので誰でも手軽に構築できるのが大きな特徴です。


たとえば、公園の検索アプリを作るなら名称・住所・連絡先・画像などのデータをスプレッドシートで管理するだけです。

f:id:paiza:20190926132451j:plain

これらのデータを開発エディタ上で自由に組み合わせることが可能になります。

画面レイアウトやコンテンツの追加・削除、ナビゲーション、認証機能など、さまざまな便利ツールも搭載しているので本格的なアプリ開発を手軽におこなえます。


また、最終的に完成したアプリは公開用のWebサイトとして書き出すこともできます。

f:id:paiza:20190926132509j:plain

あとは、スマホなどから読み込むだけですぐにでも大勢の人に使ってもらうことができるわけです。

このGlideについては、基本的な使い方や開発手法などを次の記事で詳しく解説しているので、ご興味ある方はぜひ参考にしてみてください!

paiza.hatenablog.com


<参考リンク>

 

■動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

■まとめ

今回は、スプレッドシートをWeb開発に活用できるサービスを厳選してご紹介しました。

いずれも無料もしくは無料プランが提供されているので、気になったサービスはすぐにでも試してみることをオススメします。特に、今まで表計算でしかスプレッドシートを使ってこなかった人は、新しい発見がたくさんあると思います。

Webアプリの開発に興味がある方も含めて、ぜひオリジナルのサービスを開発してみてください!





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud