Google Apps Scriptでは、HTML Serviceを利用して様々なウェブアプリを作成でき、新しいGoogle Sitesに貼り付けるだけでなく、XFrameOptionsModeを使う事で、外部のWordpressのサイトにも貼り付けが可能です。当サイトでもRSSリーダーを作成し、貼り付けて情報収集の一助に役立てています。

但し、この貼り付け実は注意が必要です。というのも、同じ組織内で使う分には問題がないのですが、外部貼り付けや外部向け公開の場合、アプリの上部に「このアプリケーションはGoogleではなく、別のユーザによって作成されたものです」というメッセージが出てしまう。しかし、作った当人には表示されないので、気が付かずに貼り付けてしまうケースが多いです。実用上問題はないのですが、いかんせん格好悪い。

そこで今回はこれを解消しつつ、新しいGoogle Sitesにネイティブで使えるRSSリーダーを作ってみました。外部向けサイトではこの手法で作成することをオススメします。

図:GASのみだと上記のようなメッセージが出てしまい具合が悪い

今回使用するスプレッドシート他

今回はスプレッドシート側はJSONデータの配信だけで、実際にリーダーを作るのは、Google Site上で直接記述します。今回はサンプルとして、teratailのRSSを取得しJSONで配信してるものを、Site上に記述したアプリで整形しています。

更新履歴

  • 2019/11/29 – FC2 BlogのRSSフィードに対応, トリガー用の関数を用意
  • 2019/11/28 – 最初のバージョンを公開

事前準備

RSSの準備と設定

RSSはいろいろなバージョンがあります。またバージョンは同じであっても、格納されてるデータのelement名が異なっていたりする事がままあったりして、実の所統一されていたりするわけではないケースがあります。そのため、対象のRSSによってはソースコードの修正が必要な事があります。

今回はteratailのRSSフィードを利用しています。このフィードはRSS1.0のフィードであるため、非常に単純なものです。本アプリはRSS2.0Atom(と、各サイト独自仕様のscheme)、Google News、FC2 Blogの5種類に対応しています。

設定の手順は以下の通りです。

  1. スプレッドシートを開き、メニューよりセットアップ⇒スタートを実行(スプレッドシートのURLがスクリプトプロパティにセットされます)。
  2. 同じく、管理設定を実行。ここでは、URLの入力RSSタイプの選択、Atomの場合はAtom2.0設定を選び、設定保存をクリック。
  3. 同じく、トリガー設置を実行した場合は、毎日夜中の1時〜2時にRSSから自動でデータを取得してスプレッドシートに反映するトリガーが設置されます。もう一回実行すると再設置もしくはトリガーの除去が可能です。
  4. 手動で取得を実施するとその場でRSSからデータを受信してスプレッドシートに展開してくれます。

図:初期設定は必ず実行が必要です。

ウェブアプリケーションとして公開

このままでは、データを公開する事ができません。必ず以下のウェブアプリケーションとして公開する手順を踏んで、JSONデータが出力できている事を確認しましょう。

  1. スクリプトエディタのメニューより、「公開」⇒「ウェブアプリケーションとして公開
  2. 次のユーザとしてアプリケーションを実行で誰の権限で動かすかを指定する。自分かアクセスしてるユーザの二択。後者の場合、ユーザはGoogleアカウントを持ってる必要があります。外部向けは自分の権限にしておきましょう(アカウント持っていない人でも実行出来る)
  3. アプリケーションにアクセスできるユーザを指定する。自分のみ、全員、全員(匿名含む)の三択。但し、全員の場合はGoogleアカウントが必要で、匿名含むの場合は、Googleアカウントなしでアクセス可能ですので、外部向けは匿名ユーザにしておきましょう。。
  4. 最後に導入すると、ウェブアプリケーションのURLが取得できます。このURLでアクセスをします。URLの最後がexecが本番用、devがテスト用で、テスト用は最新のコードをテストのリンクを踏むと表示されますが、変更したコードがそのまますぐに反映されてしまうので、テスト用のURLで運用しないように。

このように公開したURLにアクセスすると、スプレッドシートのデータがJSON形式で出力されているはずです。このJSONデータをSite側コードで受け取って整形する事になります。

ソースコード

GAS側コード

今回は、JSON出力するコード、RSSデータを取得してスプレッドシートに展開するコードの2つに絞って掲載しています。

RSSデータをパースして展開する

  • このコードそのものは、RSSリーダーのそれとほとんど変わりません。

JSONデータとして出力する

  • HTML ServiceではなくContentServiceでテキストデータを出力します。
  • このコードそのものは、スプレッドシートのデータをJSON出力するコードと変わりません。

Site側コード

コードを埋め込む手順

新しいGoogle SiteはGoogle Apps Scriptのガジェットだけでなく、直接JavaScriptで記述が出来るようになっています。外部のファイルのロードも可能で、ここで直接アプリを書くことが可能ですが、エディタ画面がしょぼすぎるので、Atomなどのテキストエディタ上で開発をするようにしましょう。コードを埋め込む手順は以下の通り。

  1. Google Siteの編集画面の右サイドパネルの「埋め込む」をクリック
  2. 埋め込みコードをクリックし、開発したコードをコピペ、挿入ボタンをクリック
  3. 公開ボタンをクリックして公開する。
  4. 公開URLを開いてみる
  5. 画面が出てくるようならば成功。

画面が出てこない場合、コードが間違っているか、Google Apps Scriptの出力側が組織内ユーザに限定してるケースがあります。この場合、匿名ユーザがアクセスできない状態なので、設定変更が必要です。

図:今回はURLじゃないよ

コード

  • デザインは社内で使っていた連絡掲示板のCSSを使っています。
  • callmanという関数がJSONを取得して整形するメインルーチンです。
  • データは一番最後のものから整形しないと、最新場一番下になってしまうので、逆順から整形しています。

関連リンク

共有してみる: