要点
以前行った SiriとGASを用いて音声入力による記録自動化 の続編として、保存されたデータを基にグラフを描画し、ユーザに表示するように改良しました。グラフの描画は特にライブラリを使わずともGoogleSpreadSheetの機能を利用して行う事が可能で、その様々なグラフをHTMLに埋め込むことで手軽にユーザに表示する事が可能でした。主にGoogleSpreadSheetの内容をウェブサイトとして表示する事を行いました。
動画は以前と異なり、Siriとの対話時にショートカットアプリが起動せずにSiriとの対話画面のままとなっています。これはショートカットアプリに修正を加えたのではなく、iOSのアップデート（と無意識下でのショートカットアプリのアップデート）を行ったため、非意図的に挙動が変化しました。以前の挙動はSiriとGASを用いて音声入力による記録自動化に掲載してあります。
確かにわざわざショートカットアプリを起動してダイアログを表示しなくなったのは好印象ですが、質問文とは別にわざわざ「テキストは何ですか？」とSiriが強制的に読み上げてしまう煩わしさがあるので、まだまだアップル社は改良中のようです。
はじめに
以前、 SiriとGASを用いて音声入力による記録自動化 でインタラクティブに音声入力を促し、結果をクラウド上に保存する事を行いました。
記録をするということは、その記録を見返したくのは必然です。GoogleSpreadSheetを直接確認すれば良い訳ですが、数値データを保存している場合はグラフとして確認出来たほうが視認性が高く、推移の把握や解釈が容易です。また文字情報の保存を行っていたとしても、GoogleSpreadSheet上で直接確認しようとすると意図しない操作によってデータを変更してしまう可能性があります。
そこでGoogleSpreadSheetの内容をウェブページとして表示することで、それぞれの問題を解決することが出来ると考えました。
ウェブページというと別途サーバの用意やウェブサービスの利用を連想しますが、GASの仕組みならばそれらを用意する必要はなく、GASで完結することが可能です。
つまりiPhoneとグーグルアカウントさえあれば、インタラクティブに音声入力を促しの結果をクラウド上に保存し、その内容をウェブページのように表示することが可能な世の中になっています。そうiPhoneならね。
やり方
GASとGoogleSpreadSheetのみで完結させます。大枠としては、グラフはGoogleSpreadSheetで作成し、GASでグラフを埋め込んだHTMLを返却するURLを用意します。
以前に紹介したショートカットアプリを踏まえた流れは、下記のとおりです。
- 音声入力で記録する
- 記録内容をGASに登録する
- 登録後、ショートカットアプリでHTMLを公開しているURLにアクセスする
- ユーザのブラウザ上でグラフを閲覧する
GoogleSpreadSheet
GoogleSpreadSheet上でやることはグラフを作成後、そのグラフの公開設定を変更する事です。グラフを作成しただけでは、他の媒体からそのグラフにアクセスする事が出来ません。
GAS
GAS上ではHTMLを返却するURLを用意します。今回のケースではGoogleSpreadSheetで用意したグラフをHTMLに埋め込みます。また複数表示したい内容が存在する場合はHTMLを好みに改修します。
グラフ単体表示の場合は、わざわざHTMLを用意せずともGoogleSpreadSheetのグラフURLに直接アクセスすれば良いと思えますが、携帯端末上では表示する事が出来ない場合があります。またGoogleSpreadSheetのアプリ上でグラフを直接確認する案もありますが、少なくともTimeline chart はAndroid及びiPhoneの純正アプリ上では対応しておらず、表示することは出来ませんでした。
つらみ点
今回利用したTimeline chart(Time Series Graph)が意外とカスタマイズ性が低く機能不足で苦労しました。
最初は自身が適切にTimeline chartを使いこなせていないものと考えていましたが、おそらくTimeline chartが作り込まれていないだけだと判断しました。その判断までに時間が掛かり、青鳥探しで時間を浪費したことが苦労した点です。
作り込まれていない判断ですが、前述の機能不足以外にはGoogleの純正アプリ上でTimeline chartの描画に対応していない事や、特定の条件下ではグラフの表示がおかしい事が挙げられます。iPhoneやAndroidのGoogleSpreadSheetのアプリ上で、Timeline chartの描画はサポートされておらず、アプリ上ではTimeline chartを描画することが出来ません。
ドキュメントには「最初の列: グラフに表示する日付または日付と時刻を入力します。」と書かれていますが、併記されたサンプルのように年月日までの情報でなければ違和感のないグラフ表示にはなりません。グラフのカスタマイズで修正することも出来ないので、「日付と時刻」を正しく表示したければサードパーティを利用する方が良さそうです。勿論、少しぐらい表示が変でも個人利用目的なので構わないという割り切りも有りだとは思います。
おわりに
以前行った SiriとGASを用いて音声入力による記録自動化 の続きとして、GoogleSpreadSheetとGASを用いてウェブページのようにグラフを表示する仕組みを作り、記録内容の可視化を行いました。
GoogleSpreadSheetとGASで完結するため、自前でWebサーバを用意する必要が無い事やグラフの描画にサードパーティを利用する必要が無い事が強みでした。ただ、GoogleSpreadSheetで描画するグラフ種類、例えばTimeline chartはカスタマイズ性や機能不十分なため、早めにどのようなグラフが描画されるかを確認した方が良いです。ユースケースで耐えうる表示であれば採用、不足であれば描画用ライブラリの導入や別のソフトウェアで表示するなど代替を考えると良いと思われます。
今回、重点的に説明した部分ではなく、以前説明したSiriとショートカットアプリの部分はまだまだ発展途上のようです。前回公開した記事から今回の記事までの間に、記録する際の挙動が変化していました。今後もどんどんと使いやすく改良されていく事が予想されるので、非常に楽しみな技術だと思っています。