Google Apps Script と Google スプレッドシートで新しいGoolge Site のガジェットを作ってみました。
作ったものの説明と、ガジェットの制約事項について記載します。

新しいGoogle Site とは

新しいGoogle Site は、2017年にリリースされた。 Google Site です。
旧Google Site に比べると、Markdown でコンテンツの記述ができなくなった、Google App Script でのアクセスが出来ないなど、使い勝手が悪いなった部分もありますが、UIがモダンになり、個人的な感覚だと、エンジニア以外のユーザにとっては使いやすくなったのではないかと思います。

旧Google サイトからの移行期限が元々は2018年あたりだったかと思いますが、G Suite アップデート ブログ: 従来の Google サイトと新しい Google サイトのロードマップを更新 を見る限り現状は、2021年末になったようです。

Google Site の最新情報は、G Suite アップデート ブログ で定期的に投稿されるのでそれをウォッチするのが良いように思いました。
Google SIte site:https://gsuiteupdates-ja.googleblog.com - Google 検索

ガジェットとは

旧Google Site には、ガジェットというアプリケーションをサイト上に組み込んで動かせる機能があります。
以下、参考記事へのリンクです。

XMLを書いてモジュールを作ったり、中々プログラマブルだなと思ったのですが、Gadgets API  |  Google Developers というのがあり、この仕様に則り作成するアプリケーションのようです。

新しいGoogle Site には、Gadgets API を使ったガジェットを組み込む機能はなく、ウェブからの埋め込み機能を使用する形式になります。
ウェブからの埋め込み機能の説明は以下の記事が参考になりました。
* 新しいGoogle Sitesを使い倒してみた 🌴 officeの杜

作成したガジェットの説明

指定した Qiita の RSS を取得し、スプレッドシートに保存、HTMLで表示するガジェットを作成してみました。

Githubリポジトリ

以下に、ガジェットのHTMLファイル、Google Apps Script をUPしました。

コンテナバインドスクリプト

Google スプレッドシートに組み込んだスクリプトの説明をします。
コンテナバインドスクリプトは、以下のディレクトリ配下に配置しました。
gas-GSiteRSSWidgets/gas at master · kemsakurai/gas-GSiteRSSWidgets

  • main.gs
    スプレッドシートの操作をするJavaScript関数を定義しています。

    • init
      スプレッドシートの初期化をします。rssシートを作成します。

    • inputRSSURL
      取得対象のRSS URLをスクリプトプロパティに記録します。

    • parse
      スクリプトプロパティに記録したRSS URL からRSS Feed を取得し、取得結果をrssシートに記録します。

  • doGet.gs
    Web公開時に、リクエストを受け付けるdoGet関数を定義しています。
    callbackクエリストリング指定時は、JSONP形式でレスポンスを返し、それ以外の場合は、HTMLでリクエストを返します。

組み込みHTML

HTMLは、以下のディレクトリ配下に配置しました。
gas-GSiteRSSWidgets/embeddedHTML at master · kemsakurai/gas-GSiteRSSWidgets
組み込みHTMLは、Google Apps Script のURLへJSONP形式でのリクエストを行い、取得結果を元にHTMLエレメントを追加します。
Google Apps Script の公開URLを指定した場合も、HTMLが表示されます。

Google Apps Script の HTML をガジェットとして組み込む場合の注意点

headタグ内の、baseタグの指定は、_blank にする。

Google Apps Script の リンク遷移先は、baseタグを指定してコントロールできますが、_top を指定すると、以下のエラーになります。 

Unsafe JavaScript attempt to initiate navigation for frame with origin 'https://sites.google.com' from frame with URL 'https://n-v2ed4jydgl4r6zlpgb7swjjzlwha1c123cd3yma-0lu-script.googleusercontent.com/userCodeAppPanel'. The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set.
_blank 指定だとリンク先が別タブですが、表示できます。未指定だと、Iframe 自身が遷移しますがこのユースケースで使う人はあまりいなそうに思います。

組み込みHTML内での外部API呼び出しはJSONP形式で行う

JSON形式の外部API呼び出しは以下のようなエラーとなります。 これは、Google Site が 外部APIへのリクエストを許可していないためで、現状、設定の変更ができません。APIはJSONP形式で戻り値を戻す必要があります。 

Access to fetch at 'https://tetsudo.rti-giken.jp/free/delay.json' from origin 'https://996619499-atari-embeds.googleusercontent.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

使い方のイメージ

個人的には、2時間に1回程度fetch をスケジュール実行して、社内のポータルサイトに設置しようかと思います。
Qiita の RSS ではなくても動作するので、Google キーワードのRSS 等を配信しても良いかもしれません。

参考

以下、記事作成中に参考にしました。

以上です。

コメント

カテゴリー

最近の投稿