Webデスクトップの制作 #28 SpreadSheetの表示-MYNT Blog

Googleスプレッドシートをデータとして利用できたら、便利ですよね。シートで手軽に設定データを変更して、Webデスクトップで自動的に表示できたら、管理も運用もかなり楽になるはず。なんなら、今回のWebデスクトップで多様している、setting.jsonを、スプレッドシートで管理する・・・なんてことも可能になるかもしれません。 Googleスプレッドシートには、API機能とGAS機能を組み合わせると、Webデスクトップでも簡単にアクセスできるようになる事がわかったので、対応するサンプルアプリを作っておきたいと思います。

デモ

うまく表示されていない場合は、「メニュー」-「データ初期化」をしてください。 ※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。

ソースコード

https://github.com/yugeta/web_desktop/ 今回の最終Commitは"#28"です。

解説

アプリの追加は、前回までの最終仕様で手軽に登録できるようになったので、asset/setting.jsonに以下を追記。

{
  "id"   : "spreadsheet",
  "name" : "Spread Sheet",
  "type" : "app"
}

※desktop_icons内に追記適当なアイコンをsvgフリーサイトでダウンロードして、雛形作成の完了です。

スプレッドシート側作業

単純にスプレッドシートのURLを読み込めばいいというだけではなく、事前に面倒くさい設定をいくつかしておかなければいけません。

1. データの作成

何かのデータを使ってもいいですが、今回のようなデータ利用の場合のルールとして、１行目は、ヘッダ項目として利用するようにしたいと思います。この行を使って、項目数を計測するのと、データのkey値としての役割を担ってもらうためです。

2. AppsScriptにアクセス

上部メニューの"Apps Script"を選択して、GASエディタを起動します。

3. コードの入力

function doGet() {
  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  const sheet1 = spreadsheet.getSheetByName('@シート名')
  const data_range = sheet1.getRange('A2:C7') // データの範囲
  const data = data_range.getValues()
  
  const response = ContentService.createTextOutput()
  response.setMimeType(MimeType.JSON)
  const json = JSON.stringify(data)
  response.setContent(json)
  return response; 
}

上記をそのままコピーしてください。 GASをAPIとして使う場合、function名がdoGet()として登録されている必要があり、この関数が起動関数になるようです。適当な名前を起動関数名にしていたら、ずっとエラーになるので、要注意です。とりあえず、今回は、サンプルデータのシート名と範囲を特定してデモを作ったのですが、実用データにしたい場合は、シート一覧を、Webデスクトップのアプリ側から指定して、データはヘッダを元に、自動的に全て取得したり、最終◯件、任意の条件にマッチするデータのように、SQLみたいな使い方ができるように、GASを組み立てて行こうと思います。でも、今回はかなり簡易な状態です。 GASを触ったことがない人は、このレベルからスタートして覚えていくのもいいでしょうね。

4. デプロイの登録

画面右上の方にある、「デプロイ」ボタンを押してデプロイの登録をします。

最初に「ウェブアプリ」を選択しておきます。

セキュリティ認証をする必要があります。

認証するアカウントを選びます。

必ず、エラー画面になりますが、見出したの方に、強制的に許可するリンクがあるので、そのまま進めます。

デプロイ登録が完了したら、URLをコピーしておきます。 ※念の為そのURLでJSONを表示して確認しておきましょう。

Webデスクトップのアプリ側作業

アプリのファイル階層は以下のようにしています。

app/spreadsheet ├ css │ └ style.css │ ├ js │ ├ main.hs │ └ setting.js │ ├ index.html ├ setting.json └ icon.svg

setting.json内のURL部分を上記GASでコピーしたURLを入力します。これで、それぞれのソースを実行すれば、以下のようにスプレッドシートがウィンドウ内にテーブルで表示されるようになります。

あとがき

スプレッドシートの読み込みができるようになったので、setting.jsonの管理ができるかと思ったんですが、読み込みが、おっそ遅なんですよね。本当に遅い。なので、初期設定での読み込みに数秒かかるので、ローカルにsetting.jsonとして設置しておいたほうがはるかに便利だと気が付きました。ただ、少しぐらい遅延してもいい、データアクセスの保管場所として使う分には問題ないでしょう。また、スプレッドシートの書き込みも可能なようなので、読み書きできるエクセル的な機能にするのも悪くないかもしれませんね。ただし、複数人が同時に使用する同期更新などは少し厳しいかもしれませんが、Webデスクトップ内に、エクセル機能が持てるのは、悪くない構想です。

Webデスクトップの制作 #28 SpreadSheetの表示

デモ

ソースコード