back
Charts Servicesによるデータテーブルとチャートの利用 (4/6)
■生成されたチャートの利用法
では、作成されたチャートをどのように利用すればいいのでしょうか。作られたものは、単なるオブジェクトであり、そのままでは何も画面に表示されるわけではありません。したがって、このオブジェクトを、何らかの形で利用者に「見える」化しないといけません。これには、大きく分けて２つのやり方があるでしょう。
1. サービスとして公開する
まず考えられるのは、サービスを用意し、これにチャートを組み込んで表示する、というやり方が考えられます。Google Apps Scriptでは、UiAppオブジェクトを使い、サービスとしてWebに表示するWebアプリケーションを作成することができます。PieChartBuilderで作成されたChartオブジェクトは、このUiAppの部品としてaddして表示させることができるのです。
下に、その簡単な利用例を挙げておきました。サービスとして利用するので、doGet関数として定義をしておき、スクリプトエディタの＜共有＞メニューから＜サービスとして公開...＞メニューで公開してください。Webブラウザから公開URLにアクセスすると、円グラフが表示されます。
ここでは、chartオブジェクトに円グラフのオブジェクトを用意した後、uiApp.add(chart);としてUIAppにチャートを組み込んでいます。これで円グラフがそのままブラウザに表示されるようになります。表示されるチャートは、グラフの各部分をクリックするとその凡例が表示されるなどインタラクティブに表示を扱えるようになっています。
2. Blobデータをメールで送信する
もう１つの方法は、Chartから「Blob」データを取り出し処理するというものです。Blobは、主にバイナリデータの利用などの際に用いられますね。Chartには、チャートをBlobデータとして取得するメソッドが用意されています。
チャートをビットマップイメージと同じようにして扱うことはできませんが、データをささっと視覚化してメールで送る、というような場合には役立ちそうです。
1. サービスとして公開する
まず考えられるのは、サービスを用意し、これにチャートを組み込んで表示する、というやり方が考えられます。Google Apps Scriptでは、UiAppオブジェクトを使い、サービスとしてWebに表示するWebアプリケーションを作成することができます。PieChartBuilderで作成されたChartオブジェクトは、このUiAppの部品としてaddして表示させることができるのです。
下に、その簡単な利用例を挙げておきました。サービスとして利用するので、doGet関数として定義をしておき、スクリプトエディタの＜共有＞メニューから＜サービスとして公開...＞メニューで公開してください。Webブラウザから公開URLにアクセスすると、円グラフが表示されます。
ここでは、chartオブジェクトに円グラフのオブジェクトを用意した後、uiApp.add(chart);としてUIAppにチャートを組み込んでいます。これで円グラフがそのままブラウザに表示されるようになります。表示されるチャートは、グラフの各部分をクリックするとその凡例が表示されるなどインタラクティブに表示を扱えるようになっています。
2. Blobデータをメールで送信する
もう１つの方法は、Chartから「Blob」データを取り出し処理するというものです。Blobは、主にバイナリデータの利用などの際に用いられますね。Chartには、チャートをBlobデータとして取得するメソッドが用意されています。
変数 =【Chart】.getBlob();作成したBlobオブジェクトは、以下のように連想配列のデータにまとめ、GmailApp.sendEmailでメールを送信する際、添付ファイルとして添付することができます。
var 変数 = {
fileName: "chart",
mimeType: blob.getContentType(),
content: blob.getBytes()
};
GmailApp.sendEmail(アドレス , タイトル, 本文, {attachments: [変数]});これでチャートを送ることができます。非常に面白いのは、マウントされるチャートは、ビットマップデータに変換されたようなものではなく、サービスとして公開されたチャートがそのままメールに埋め込まれている、という点です。したがって、添付したイメージをクリックすると、そのイメージではなくWebブラウザのサービス公開されたページにつながる、という点でしょう。チャートをビットマップイメージと同じようにして扱うことはできませんが、データをささっと視覚化してメールで送る、というような場合には役立ちそうです。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
※サービスとして公開する例
function doGet() {
var data = Charts.newDataTable()
.addColumn(Charts.ColumnType.STRING, "OS")
.addColumn(Charts.ColumnType.NUMBER, "シェア")
.addRow(["Windows", 47])
.addRow(["Android", 19])
.addRow(["iOS", 14])
.addRow(["Mac OS", 4])
.addRow(["Linux", 2])
.addRow(["その他", 4])
.build();
var chart = Charts.newPieChart()
.setDataTable(data)
.setTitle("OSのシェア")
.setDimensions(400, 350)
.build();
var uiApp = UiApp.createApplication().setTitle("サンプルチャート");
uiApp.add(chart);
return uiApp;
}
※メールにバイナリファイルとして添付する
function makeAndSendChart(){
var data = Charts.newDataTable()
.addColumn(Charts.ColumnType.STRING, "OS")
.addColumn(Charts.ColumnType.NUMBER, "シェア")
.addRow(["Windows", 47])
.addRow(["Android", 19])
.addRow(["iOS", 14])
.addRow(["Mac OS", 4])
.addRow(["Linux", 2])
.addRow(["その他", 4])
.build();
var chart = Charts.newPieChart()
.setDataTable(data)
.setTitle("OSのシェア")
.setDimensions(400, 350)
.build();
var blob = chart.getBlob();
var file = {
fileName: "chart",
mimeType: blob.getContentType(),
content: blob.getBytes()
};
var address = "your@mail"; // 送信先
var result = GmailApp.sendEmail(address, "円グラフ",
"チャートの例です。", {attachments: [file]});
}
| << 前へ | 次へ >> |