我が家の防災サイネージを４０分で作る方法（ライブカメラやサイトキャプチャをGoogleサイトに表示する）

#はじめに
台風の日に、ライブカメラや気象情報などをすぐに確認できたり、大規模災害時に家族と情報共有したいと思い、クラウドサービスを利用したサイネージみたいな何かを作ってみました。
気象庁や行政機関が提供するライブ映像をもとに、Googleのサービスを利用させていただきました。
気象情報については、提供サイトの仕様上、画像のURLが日時等で毎回変わるので、自動で指定サイトをスクリーンショットによりクラウドストレージに保存することにしました。
GAS（GoogleAppsScript）で気象庁のサイトを定期的にキャプチャしてGoogleドライブに保存し、Google サイトに埋め込みました。また、ライブカメラ映像はスタイルシートで調整して埋め込んでみました。

これでサーバーレスかつセキュアなクラウド型気象監視サイネージが完成しました。
クラウドなので、大規模災害時にもどこからでもアクセスできて利用できると思います。
サイネージとして利用したかったので、スクリーンショットについてはトリガーで１５分ごとに自動更新し、同時にサイト側も自動更新できる仕組みをJavaScriptで実装してみました。
<img width="746" alt="0.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/fc17bfeb-1646-a98b-5cb3-f2f03d709116.jpeg">
**気象情報やTwitter情報をGoogleサイトを利用してサイネージを構築する図**


#今回のゴール
<img width="1080" alt="1.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/b4b58584-3632-6769-8e77-3478a3a2df86.jpeg">
<img width="1066" alt="2.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/b4ad7a8b-234e-36b0-4443-93b71c2215a8.jpeg">

<img width="1071" alt="3.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/409fa324-b956-8487-631c-c49dc9fcc3fa.jpeg">
<img width="1080" alt="4.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/d3bd7061-0b83-1c32-6cdb-fe24514f6a86.jpeg">
※注　気象情報等を利用する際には、提供元の利用規約等を確認し、適切に運用してください。

#必要なもの
###  Googleアカウント
持っていない人は作成してください
https://support.google.com/accounts/answer/27441?hl=ja

##  Googleスプレッドシート作成
###  https://docs.google.com/spreadsheets/u/0/
↑URLから作成できます。
<img width="527" alt="kankyoukanshiimg30.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/7b7590b7-2707-1a68-7bf7-05e54d32423b.jpeg">

Googleスプレッドシートが開きます。
<img width="400" alt="kankyoukanshiimg31.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/9b26db2c-8e5d-1fae-b024-3769982f4831.jpeg">

###  シート作成
サイネージに埋め込む画像を、直リンクではなく、一旦Googleドライブにスクリーンショットして保存してから使用するため、まずはスクリーンショットを自動でドライブに保存する仕組みを作ります。そうすることで、画像リンクを直接埋め込まないので自動でリアルタイムの情報を反映することができ、さらに過去の画像を遡って確認することができるようになります。（[Googleドライブの版管理により、過去の画像を確認できます](https://support.google.com/drive/answer/2409045?co=GENIE.Platform%3DDesktop&hl=ja)）
<img width="697" alt="5.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/21289e8e-a74e-1daf-b65d-d0115e59dac1.jpeg">
スプレッドシート名は任意でOKです。
A1に**キャプチャ名**、B1に**名称**、C1に**urlキャプチャサイト**、D1に**FILE_ID 上書きするファイル**、E1に**w キャプチャ幅**、F1に**h キャプチャ高さ**、G1に**画像URL(サイト埋め込み)**を入力して表題部分を作成します。

### 気象情報
気象庁のホームページから、キャプチャしたい気象情報のページを開いてURLをコピーしておく。
（参考）レーダー・ナウキャスト（降水・雷・竜巻）:四国地方
https://www.jma.go.jp/jp/radnowc/index.html?areaCode=213&contentType=0

### データ入力
- A2に**screenshot01.png**
- B2に**気象庁　レーダー**
- C2に先ほどコピーした**https://www.jma.go.jp/jp/radnowc/index.html?areaCode=213&contentType=0**
- E2に**590**（キャプチャによって調整してください）
- F2に**873**（キャプチャによって調整してください）

を入力してデータを登録します。
<img width="349" alt="5.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/88f8686a-235e-c096-83cc-82c30fd74798.jpeg">
シート名を**管理**に変更しておきます。

##  GASでスクリーンショットをGoogleドライブに自動保存
GASって何？
簡単に言うと、Googleが開発した軽量アプリケーション開発用のスクリプト言語です。
[Google Apps Script 入門](https://qiita.com/t_imagawa/items/47fc130a419b9be0b447)

###  GASを作成
シートのツール、スクリプトエディタの順にクリックします。
<img width="612" alt="7.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/896e5311-f13c-d998-ad84-6fdc82daa472.jpeg">

すると、GASのスクリプトエディタが起動します。
<img width="386" alt="kankyoukanshiimg36.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/a39d05d6-ac88-c645-cb87-f73d1852cec9.jpeg">
次のソースコードを入力します。

### ソースコード
```js
var spreadsheetId = '*****************'//←スプレッドシートのIDを入れる

function screenshot() {
  var kanrisheet = SpreadsheetApp.openById(spreadsheetId).getSheetByName('管理');//管理シート指定
  var rowSheet=kanrisheet.getDataRange().getLastRow(); //管理シートの最終行を取得
  
  //Range（各データの入ったセルを順に指定していく）
  for(var i=2;i<=rowSheet;i++){
    try {
      var name = kanrisheet.getRange(i,1).getValue();//キャプチャ名を取得
      var url = kanrisheet.getRange(i,3).getValue();//キャプチャするurlを取得
      var FILE_ID = kanrisheet.getRange(i,4).getValue();//上書きするファイルIDを取得
      var w = kanrisheet.getRange(i,5).getValue();//キャプチャ幅を取得
      var h = kanrisheet.getRange(i,6).getValue();//キャプチャ高さを取得
      var data = Charts.newDataTable()//urlデータを入れる
      .addColumn(Charts.ColumnType.STRING, 'dummy')
      .addRow(['<meta http-equiv="refresh" content="0; ' + url +'">'])
      .build();

   //Class Chartsを利用
      var chart = Charts.newTableChart()
      .setDataTable(data)
      .setOption('allowHtml', true)
      .setDimensions(w, h)//
      .build();
            var file_type = {    //ファイル設定
          title: name,
          mimeType: 'image/png'
      };
      var blob = chart.getAs('image/png').setName(name);;  //スクショ画像をドライブに保存
    
      if(!FILE_ID){ 
        var idblob = DriveApp.createFile(blob).getId();//もし、FILE_IDが空白だったら新たにスクショファイル作成して、IDを取得
        Browser.msgBox(idblob);//新たに追加したファイルのIDをポップアップ
        Logger.log(idblob);//デバック用
      }
      else {
        var myVar = Drive.Files.update(file_type, FILE_ID, blob);//上書き保存
      }     
    }
    catch (e) {
      Logger.log(e);
      Logger.log(i);
      Logger.log(FILE_ID);
      //Logger.log(blob.getBytes());
    }
  }
}
```


特定のサイトを定期的にスクショするためのコードです。
よくわかんないや！ってかたは、とにかくソースコードを貼り付けます。
貼り付ける時は最初入っているコードごと上書きしてください。
<img width="652" alt="kankyoukanshiimg36.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/7c496656-d8a2-5513-feac-769750754b33.jpeg">

こんな感じになると思います
<img width="803" alt="11.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/ec06bb3b-2c0e-bf7b-0fc1-b6d5a50bc50f.jpeg">

スクリプト エディタのリソースメニューから[Google の拡張サービス…] をクリックし、Drive API を有効化します。
<img width="768" alt="12.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/7a94ff17-0cd8-e3bd-8049-b130b9722d24.jpeg">

###  Drive APIを有効にする
右のスクロールバーをスクロールし、**Drive API**の右にあるスイッチをクリックしてONにし、OKをクリックします。
<img width="668" alt="15.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/52cf124d-c6f5-3e12-38ed-2b89d1baa6d5.jpeg">

####  任意の名前を付ける
<img width="568" alt="16.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/70cef86e-16c4-56eb-2543-ef212d1395f8.jpeg">
ちなみに今回は**スクショ**にしてみました。

###  スプレッドシートのIDを指定する
続いて今回作成したスプレッドシートのIDをspreadsheetID = 'から後の***マーク部分に貼り付けます。
※スプレッドシートのIDって何よ！？って人は、一つ下を参考にしてください。
<img width="759" alt="18.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/30b1d572-e188-f585-cc77-6f2f8db49236.jpeg">


####  スプレッドシートのID確認方法
今、スクリプトエディタが開いている場合は、タブでスプレッドシートを開いてURLを確認してください。
<img width="716" alt="17.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/e16f8560-19c1-a029-791c-ff1485cfd6e3.jpeg">


###  GASを実行
ついに準備が整いました。
今、画面にスプレッドシートを開いている場合はスクリプトエディタを再度開いてください
エディタの上の方に三角の再生ボタンがありますよね。
いきなり実行してみてください
<img width="417" alt="キャプチャ.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/3f7cbb5e-59b7-d5bd-0f26-b016ce3def38.jpeg">


###  承認
すると、承認が必要です画面がポップアップされるので、許可を確認をクリックします。
<img width="371" alt="20.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/d01d2d42-b977-4aa2-94cf-2852f66bca7b.jpeg">


アカウントを選択します。
<img width="484" alt="21.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/c2665021-209d-3694-4ad2-46c30f1f96d2.jpeg">


このアプリは確認されていません
当然今作っているので確認されてたらおかしいのですが、とりあえず**詳細**を選択。
<img width="452" alt="23.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/d8a97c47-3ee3-a655-49ab-45f4fc274073.jpeg">

アカウントへのアクセスを許可
許可を選択します。
<img width="275" alt="24.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/fa4e4196-8578-8bb7-f07c-3a6859f984da.jpeg">

これで実行されたかと思います。
確認してみましょう。
ウェブブラウザのタブから、先ほど作成したスプレッドシートを選択すると、スクショしてGoogleドライブに保存されたファイルのIDがポップアップされていたら成功です。
<img width="748" alt="25.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/9e8d646b-e897-4c67-8988-bcdfcaa2b9b5.jpeg">
D列の**FILE_ID 上書きするファイル**が空白であれば、新規にキャプチャファイルをドライブに保存し、ファイルIDをポップアップしますので、それをコピーして空白のD列に貼り付けます。
<img width="773" alt="25.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/4e8af2e1-80bc-5ca2-8234-9b7a00ecd8c7.jpeg">
次回から、このファイルを上書きしていくための設定となります。
後２件分、気象庁のサイトから同様にキャプチャしたいページ情報を入力してみてください。

<img width="691" alt="27.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/069577a5-0215-4b17-0df9-2e828fff381e.jpeg">

ちなみに、私は
- 気象庁　アメダス　https://www.jma.go.jp/jp/amedas/213.html?elementCode=0
- 気象庁　衛星　　　https://www.jma.go.jp/jp/gms/index.html?area=0&element=0
を追加してみました。キャプチャ名も任意です。
w キャプチャ幅、h キャプチャ幅って何よ？ってことですが、無理やりスクショして、後でサイネージに表示したいので、幅と高さを調整して、右端と下部をトリミングします。
めんどくさい作業ですが、ここ重要です。
<img width="306" alt="40.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/b96dedb8-bdcb-5d94-12ab-e6e6c80310ec.jpeg">
そして、サイネージを作成する際に、右、下をスタイルシートで調整します。
個々の設定はもう少しおまちください。
<img width="309" alt="41.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/9685a7ae-0c11-ef89-8b35-bd4e9c7c569c.jpeg">
↑サイネージ側での調整イメージ

GASのエディタを開いて、実行します。
<img width="387" alt="40.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/f1ccf09d-cf41-7b77-ea6a-f6268ba7c903.jpeg">

再びGoogleスプレッドシートにもどると、最初に登録したキャプチャ分は上書きされ、新たに登録したデータ分のキャプチャがGoogleドライブ内に保存されています。そして、ファイルIDがポップアップします。ここでは、１件ずつポップアップされるので、一旦メモ帳などに貼り付けておいて、**FILE_ID 上書きするファイル**にデータを登録してください。
GASの実行速度の関係で、タイムラグがあるかもです。
<img width="697" alt="41.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/76828d75-5ba3-0088-34cf-20b92c930679.jpeg">

ファイルIDをD列に入力（コピー・アンド・ペースト）
<img width="536" alt="30.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/2c29ff9d-db59-fcdb-6345-e846f7a63177.jpeg">

G2に`=ARRAYFORMULA("http://drive.google.com/uc?export=view&id="&D2:D)`と入力します。
この[ARRAYFORMULA](https://www.google.com/search?q=ARRAYFORMULA&oq=ARRAYFORMULA&aqs=chrome..69i57j69i59j0l4.439j0j7&sourceid=chrome&ie=UTF-8)。数式を配列形式で表示します。Excelに無い概念でとても便利です。
<img width="707" alt="30-2.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/1d10f93e-146e-0312-1eb7-4ce84f4051af.jpeg">

G3以降に自動で数式が入ります。
<img width="673" alt="30-3.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/d3581556-4b19-5ba0-f1cf-f1c13e014978.jpeg">

つづいて、表を整理します。
少しでも不具合を回避するために、不要な部分を消します。

5行目から1000行目（最終行）までを削除しておきます。
<img width="404" alt="31.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/b5637fd6-f1a0-09b0-8d13-b6006a608056.jpeg">

5行目を選択して、最終行をShiftを押したまま選択すると5行目から1000行目（最終行）までを選択できます。
<img width="481" alt="32.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/28e0da22-5868-e3d1-cf86-2f453049efbe.jpeg">

行5-1000を削除
<img width="571" alt="33.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/cb4b926e-9044-100c-e30e-a1c8ff75c6fd.jpeg">

とてもシンプル
<img width="719" alt="34.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/d7c42f58-6509-6a60-2f08-2dbfdf5f1e84.jpeg">

追加する場合は、必要分だけ追加するようにしましょう。

###ファイルの設定
Googleドライブにアクセスします。
https://drive.google.com/drive/my-drive

キャプチャファイルができているので、右クリックします。
<img width="774" alt="42.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/6b4d9836-2907-c52e-a576-68b9b56d474c.jpeg">

共有をクリックします。
<img width="722" alt="43.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/69f19caa-d00c-189c-3afc-45634bcb25e4.jpeg">

詳細設定をクリックします。
<img width="654" alt="44.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/303e789f-1ada-09c0-45a9-803165df1fee.jpeg">

リンクを知っている全員が閲覧可能が選択されていれば、完了をクリックします。
全てのファイルに対して設定してください。
<img width="514" alt="45.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/f7149213-a738-71fc-7c5f-ad19ae99a35a.jpeg">

###  トリガー設定
続いて、キャプチャを自動で定期的に上書きしていくための設定をします。
スクリプトエディタに戻って編集、現在のプロジェクトのトリガーを選択。
トリガーって引き金っていうことだと思うんだけど、条件によってさっき作ったGASを実行しますよ！ってことができるんです。
<img width="385" alt="46.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/f5ed55ec-a512-c5cd-6329-28c35f60673d.jpeg">


トリガーの設定画面に移るので、右下の**トリガーを追加**を選択します。
<img width="774" alt="47.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/dac51621-f4f4-af59-440e-0490b283a5c5.jpeg">


イベントのソースを選択で**時間帯主導型**を選択します。
<img width="659" alt="48.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/23b4688d-5b9a-a53b-14dc-affd98483e8a.jpeg">

イベントのソースを選択で**分ベースのタイマー**を選択します。
<img width="344" alt="49.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/232660a8-e664-b13c-0945-2e6926d43ffa.jpeg">


時間の間隔を選択（分）で今回は**１５分おき**を選択し保存します。
※気象情報の更新頻度などに合わせるといいかもですね。
<img width="768" alt="50.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/e8bbebd8-89bc-69df-77be-90ce10072181.jpeg">

これでトリガーの設定は完了です。
<img width="771" alt="51.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/9776c79d-1ab6-b84f-74ef-fa45cf261aae.jpeg">

スクリプトエディタに戻って保存ボタンを押して保存してスクリプトエディタを閉じます。
<img width="394" alt="52.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/734fcd7e-9367-74a8-cfe6-34662de53cc0.jpeg">
これで、スクリーンショットの設定は一旦完了です。
続いて、大規模災害発生時を想定した家族緊急時対応マニュアルと情報共有ファームを作成します。
後でサイネージに埋め込みます。

##緊急時マニュアル
Googleスライドを利用します。
https://docs.google.com/presentation/u/0/

空白をクリックして新規作成します。
<img width="598" alt="53.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/ff018995-79a9-b92f-eb3e-5c1cfe9eb116.jpeg">

パワーポイントを使用したことがある方は直感的に使用できるとおもいます。
<img width="662" alt="54.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/8de74827-a4c2-e0e0-22a5-2cbcc7503b2f.jpeg">
使い方はこちら
https://support.google.com/docs/answer/2763168?co=GENIE.Platform%3DDesktop&hl=ja

<img width="736" alt="55.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/98367a7e-83bb-4b14-52d6-be256578dcc2.jpeg">

複数ページ作成できるので、発災時の初動パターン、安否確認、大けが時等緊急連絡先などを作成しました。

###安否確認フォーム作成
Googleフォームを利用します。
https://docs.google.com/forms/u/0/

空白をクリックして新規作成します。
<img width="466" alt="56.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/9f44cf06-9bdd-1eff-359c-d263b56bb7a2.jpeg">

画面右上の点々をクリックして設定を選択
<img width="302" alt="57.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/96f494e7-a44c-c79b-cd0b-7e09e1f8bca1.jpeg">

**メールアドレスを収集する**のチェックを外し保存をクリック
ここらは好みです。
<img width="322" alt="58.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/567266ac-af60-f402-e24f-f02f1206a649.jpeg">

フォームの名前を変更します。任意で結構です。
例では**安否確認**にしてみました。
フォームに登録するメニューを作成します。
まず名前のフィールドを作成します。
形式は**記述式**にします。
<img width="776" alt="59.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/a6fc40ea-8271-6665-ac5e-9c72d52af33f.jpeg">

続いて**家族の安否**フィールドを作成します。
形式は**ラジオボタン**で
- 無事
- けがあり
- 行方不明
などを設定しておきます。
<img width="753" alt="60.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/708b23fd-b66c-7610-5c3d-9bd84e554392.jpeg">

続いて同じ要領で避難状況フィールド、自宅被害状況のフィールド、緊急連絡先、その他連絡事項などを作成します。
必要に応じてご自由に作成してください。
<img width="449" alt="61.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/6410b25d-b9bb-14df-9338-15d03edc66f5.jpeg">

続いて、誰かがフォームに登録したときに設定したメールやグループメールに、登録内容を送信するGASを作成します。
点々をクリックし、**スクリプトエディタ**をクリックします。
<img width="299" alt="62.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/a4c21cac-8c36-b23f-daba-082b15ebc0a5.jpeg">

スクリプトエディタが開くので、名前を付けます。
例では**安否確認**にします。
<img width="563" alt="63.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/f48a1dc8-f7a3-6a0b-1d15-a87ea585be88.jpeg">


### ソースコード
```js
function submitForm(e){
  var itemResponses = e.response.getItemResponses();
  var message = '';
  for (var i = 0; i < itemResponses.length; i++) {
    var itemResponse = itemResponses[i];
    var question = itemResponse.getItem().getTitle();
    var answer = itemResponse.getResponse();
    message += (i + 1).toString() + '. ' + question + ': ' + answer + '\n';
  }
  var address = '*****************';//メールアドレス
  var title = '我が家の安否確認フォームが送信されました';
  var content = '以下の内容でフォームが送信されました。\n\n' + message;
  GmailApp.sendEmail(address, title, content);
  }
```

またまたよくわかんないや！ってかたは、とにかくソースコードを貼り付けます。
貼り付ける時はやっぱり最初入っているコードごと上書きしてください。
`var address = '*****************';//メールアドレス`
の***************部分に、フォーム入力後にお知らせメールを送りたいアドレスを入力しておきましょう。
例えば、家族のグループメールを作成して、そのアドレスを登録するなども有効です。

###  GASを実行
ここもいきなり実行してみます。
三角ボタンをクリックします。
<img width="597" alt="64.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/2b0f3596-48fe-36f0-212e-2e629ec1c883.jpeg">

承認する必要があるので、**許可を確認**をクリックします。
<img width="719" alt="65.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/0a69d0a5-2532-871d-363a-efbf73822d2c.jpeg">

続いてアカウントの選択をします。
<img width="590" alt="66.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/f13c5378-bb79-a816-4d69-cd79d1282fb6.jpeg">

詳細をクリックします。
<img width="500" alt="67.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/fbd40a77-6150-3b0e-4f47-7306cc03e630.jpeg">

**安否確認（安全ではないページ）に移動**をクリックします。
<img width="434" alt="68.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/1d965c3b-9f54-c622-0acc-58589002f79e.jpeg">

アクセスのリクエストを**許可**します。
<img width="301" alt="69.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/8dbbee42-fc76-634b-0be2-66ef6385b0bd.jpeg">

おっと！なにやらエラーっぽい！？
大丈夫です。フォームの送信ボタンを押したときにフォーム内容を格納するためのコードなので、読み取れなくて当然です。
<img width="780" alt="70.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/f10a9482-bcc1-7644-547e-8f5186d833dc.jpeg">

メニューから**編集**をクリック、続いて**現在のプロジェクトのトリガー**をクリックします。
<img width="395" alt="71.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/133ae519-e325-df7b-713a-f198a122a7f3.jpeg">

**トリガーを追加**をクリック。
<img width="795" alt="72.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/5fe88de8-e6ba-4548-07c0-d7ee23d68554.jpeg">

イベントの種類を**フォーム送信時**に変更して保存ををクリック。
<img width="468" alt="73.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/963cc9bc-1060-8f7f-57f7-f650a03e80ca.jpeg">

再度アカウントを選択します。
<img width="430" alt="74.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/aed2488f-7459-c874-fa82-9aeaa5d2805d.jpeg">

先ほどと同じ要領で詳細をクリックして許可します。
<img width="539" alt="75.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/0e5c7ec3-1129-c5c1-708e-570e2580c865.jpeg">

許可が完了すると、トリガーが追加できたのが確認できると思います。
<img width="689" alt="76.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/240f4ca5-99ca-5583-2635-dcc6521bad63.jpeg">

スクリプトエディタに戻って**保存**して閉じます。
<img width="744" alt="77.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/12a640f8-365c-af16-16e3-68faeace1a98.jpeg">

フォームに戻り、目のマークをクリックしてみてください。
<img width="304" alt="78.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/6d02d365-52a2-4a81-0982-314ec4855b10.jpeg">

URLをコピーして、メモ帳などに貼り付けておきましょう。
このURLを使ってフォーム投稿できるようになります。
[QRコード作成サービス](https://www.google.com/search?q=QR%E3%82%B3%E3%83%BC%E3%83%89%E4%BD%9C%E6%88%90&oq=QR%E3%82%B3%E3%83%BC%E3%83%89%E4%BD%9C%E6%88%90&aqs=chrome..69i57j0l5.3460j0j7&sourceid=chrome&ie=UTF-8)などを利用して、家族に渡しておいてもいいかもしれませんね。
試しに、各情報を入力及び選択して、最後に**送信**ボタンを押してみましょう。
<img width="299" alt="79.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/dd8aaaf6-2d28-7622-1c46-ed8698ff948d.jpeg">

このようなメールが届きます。
<img width="247" alt="80.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/2dedfd63-d7ab-6553-29fb-d9cae5493c07.jpeg">

フォームの編集画面で、**回答**を選択すると、回答が見えます。また、緑色のスプレッドシートのアイコンをクリックすると、データがGoogleスプレッドシートに自動で収集されます。
<img width="711" alt="81.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/497db8d3-c74a-1772-0aed-216e627077c8.jpeg">

こんな感じです。
<img width="751" alt="83.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/c416c87c-efa9-2047-9d0e-804ca4d3a195.jpeg">
これでパーツ作成はひとまず完了しました。

##サイネージ作成
Googleサイトというサービスを利用します。
###  https://sites.google.com/

右下にある＋アイコンをクリックして作成します。
↑URLから作成できます。
![84.PNG](https://qiita-image-store.s3.amazonaws.com/0/349931/441eb305-9fe5-b71e-b50a-fb0f757cb9e2.png)

新規でサイトが作成されるので、ここから作っていきます。
<img width="725" alt="キャプチャ.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/4a1ffc0e-8abd-0ad6-4f70-6ea1b0d6cbff.jpeg">

ヘッダーを削除します。
左にカーソルを移動し、ヘッダーを削除アイコンをクリックします。
<img width="503" alt="キャプチャ2.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/cc3c73fe-5fd0-d0ef-e06a-08c39b023409.jpeg">

サイトの名前を任意につけます。
例では**うちの防災サイネージ**にしました。
<img width="438" alt="キャプチャ3.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/b94dae12-69a5-4b77-cbb6-4662f2511aeb.jpeg">

右にある**埋め込む**
<img width="303" alt="キャプチャ4.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/f268ca4b-d8bb-4a06-b41e-0b0b9af7a4e4.jpeg">

ウェブからの埋め込みで**埋め込みコード**を選択し、次のコードをコピペします。
<img width="664" alt="キャプチャ5.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/96781003-fbb4-5ccb-06e8-303c608df77e.jpeg">
気象庁の台風情報の画像をもってきます。

```html

<style type="text/css">.im {
   width:100%;
   height:auto;
 }
</style>

<p><img alt="taihuu" class="im" src="https://www.jma.go.jp/jp/typh/img/no-typhoon.png" title="気象庁　台風" /></p>
```
挿入をクリックします。
<img width="436" alt="キャプチャ6.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/1b388ef9-8f98-27f8-5ea0-9bdd7023d942.jpeg">

こんな感じに画像が挿入されます。
<img width="484" alt="キャプチャ7.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/291d38a7-41aa-65a8-9251-1e3889d156ff.jpeg">

続いて、Googleの災害情報マップを埋め込みたいと思います。
次のURLをコピーします。
https://google.org/crisismap/japan?embedded=true&hl=ja&layers=4,6,10,11,21,22,23,24,25,29,30,1314427504921&llbox=55.72,15.27,-164.09,83.41&t=HYBRID

先ほどと同じように**埋め込む**からURLをコピペします。
<img width="730" alt="キャプチャ8-0.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/41c3bb17-4313-055b-fa3c-b8033fb89ea2.jpeg">

**ページ全体**の方を選択し、挿入します。
<img width="530" alt="キャプチャ8.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/f8cd6a6d-b096-3b8f-d5db-d2e675578e9e.jpeg">

続いて、サイネージで注意報等の情報を表示するために、RSSを埋め込みたいと思います。
まず、ライブドアの警報・注意報情報にアクセスします。
例は、徳島県の情報です。
http://weather.livedoor.com/warn/36

**RSS**のアイコンをクリックします。
<img width="404" alt="キャプチャ9-2.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/173eaebf-e26a-0c6b-c5fd-356ea1fede6e.jpeg">

URLをコピーします。
<img width="740" alt="キャプチャ9-4.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/8abd43dc-8111-94c2-f5fd-a590d84097f0.jpeg">

RSS記事を作成するツールを利用して、そのコードをGoogleサイトに貼り付けたいと思います。
まず、RSSフィードを次のサービスに登録します。
https://tanganrss.com/rsstxt/regist.php

特に特殊な設定はしなくても大丈夫です。
好みに合わせて設定してください。
<img width="550" alt="キャプチャ9-5.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/9c56a7cb-9758-f26e-e87c-b4f018387ef5.jpeg">

先ほどコピーしたRSSのURLを貼り付け、**貼付けコード生成**
<img width="495" alt="キャプチャ9-6.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/c205f4ee-0858-e5b9-367d-5a9212224452.jpeg">

<img width="675" alt="キャプチャ9-8.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/e8e90d4b-77af-8b31-5a09-a4d071199c94.jpeg">

貼付けコードが自動で作成されるので、これをコピーします。

```html
<script type="text/javascript" src="https://tanganrss.com/rsstxt/rsstxt.php?key=d4c3c3f5de017d1ca4405267cbaffe7a"></script>
<!--
姉妹サービス、複眼RSSを宜しくお願いします。
http://fukugan.com/
-->
<!-- 登録内容の復元URL
https://tanganrss.com/rsstxt/regist.php?key=d4c3c3f5de017d1ca4405267cbaffe7a
-->
```

Googleサイトに戻って、先ほどと同様、**埋め込む**をクリックし、**埋め込みコード**を選択します。
貼り付けて保存し、挿入します。
<img width="407" alt="キャプチャ10.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/a511a468-5779-1271-ce2d-c768b79f635f.jpeg">

デザインを整えます。
RSSを右上に持っていきたいと思いますので、選択します。
ドラッグドロップで移動できます。
<img width="561" alt="キャプチャ15.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/81d575d1-8781-e181-6ad1-54c6816b0b4e.jpeg">

台風情報の右に移動します。
<img width="670" alt="キャプチャ14.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/af99ca4c-697f-6c9a-dbd1-249ea1a4efde.jpeg">

こんな感じになります。
<img width="569" alt="キャプチャ15-2.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/8d0283d6-c53f-3855-3ad5-81c8a2b5d005.jpeg">

ちなみに大きさの変更は、対象を選択すると対象の周りに色がついて、線上に点ができるので、それをドラッグドロップで調整できます。
<img width="333" alt="キャプチャ15-3.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/719c51f7-2c22-eb3e-7243-5439fc29aeac.jpeg">

サイネージ全体の色を変更します。
私の場合は、ディスプレイの消費電力量、眼球に対する負荷、の2点（実際の影響は微小または気分だけ）からダーク色を基本としています。
※ここら辺は好みに合わせて色々いじってみてくださいね。
まず、カーソルを左に持っていくと、セクションの背景という項目が出てきますので、そこをクリックします。
<img width="240" alt="キャプチャ16.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/cb982f7b-2d6c-fdb5-b209-5deb3d2e1bfc.jpeg">

セクションのスタイル選択項目が表示されます。
<img width="321" alt="キャプチャ17.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/5092a8a1-c832-2401-c3b1-5d06b9a00a65.jpeg">

ダーク系にしたいので、強調2を選択します。
<img width="700" alt="キャプチャ18.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/f6e626e9-75d7-934b-9b8e-78258bb1f5f9.jpeg">

すると、右側に設置したRSSが見にくくなってしまいます。
こちらは、スタイルシートをで調整します。
対象を選択し、鉛筆マークをクリックします。
<img width="457" alt="キャプチャ18-2.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/4b29c9c0-cab8-4624-8e77-51aa68efbdfc.jpeg">

ウェブからの埋め込み内にあるコードを全て選択してコピーします。
<img width="401" alt="キャプチャ18-2-2.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/d8a906d8-a626-1daf-0f24-da1d52382504.jpeg">

ソースコードを編集するときは、テキストエディタかメモ帳が便利です。
例ではメモ帳に貼り付けてみます。
必要な部分は**<script>**部分ですので、この部分を次のソースコード内に貼り付けます。
<img width="744" alt="キャプチャ18-2-3.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/f29d8328-fb38-d64d-fb7c-0905e9799809.jpeg">

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <style type="text/css">
     body,div,a {
      font-size: 90%;
      color:#A5A5A5;
     }

    </style>


  </head>
    
  <body>
    <div>
     <script type="text/javascript" src="https://tanganrss.com/rsstxt/rsstxt.php?key=d4c3c3f5de017d1ca4405267cbaffe7a"></script>
    </div>  
  </body>
    
</html>
```
**style**で囲まれた部分でスタイルシートの設定を調整します。
先ほどのscript部分を上書きします。
全体のデザイン調整時にフォントサイズ等微調整しましょう。

<img width="751" alt="キャプチャ18-3.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/c0fab327-e97c-6776-373d-e4868ebb7203.jpeg">

cssの詳細ついては、参考書、または[Google先生](https://www.google.com/search?q=css&oq=css&aqs=chrome..69i57j69i65l3j69i59l2.2305j0j9&sourceid=chrome&ie=UTF-8)に聞いてみてください。

保存、挿入の順にクリックします。
<img width="413" alt="キャプチャ13.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/a8651178-1b2c-d747-1e9e-ce39986f1200.jpeg">

いい感じになりました。
Googleの災害情報部分も同じように強調2（ダークカラー）に変更しておきましょう。
<img width="781" alt="キャプチャ.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/f0d80295-1a63-5cb0-bd49-ac35fe5ab572.jpeg">

###気象監視画面
ページを追加します。
<img width="683" alt="10.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/8e580550-0da4-fa73-ce97-e3a563f09fbe.jpeg">

例では名前を**気象監視**としました。
<img width="204" alt="11.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/4acb3272-6ae5-cd47-8e38-7f4cb369fdff.jpeg">

気象監視のページができました。
<img width="532" alt="12.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/b4f341ec-29fa-0b7e-fa41-c6fc85de7221.jpeg">

Twitterニュースフィールドを追加します。
気象庁のTwitterを埋め込みたいと思います。
https://twitter.com/jma_kishou

[Twitterヘルプセンター　ウェブサイトに埋め込みタイムラインを追加するには](https://help.twitter.com/ja/using-twitter/embed-twitter-feed)を参考にしました。
https://publish.twitter.com/#
にアクセスします。
<img width="677" alt="13.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/01087d66-1a86-3153-3e87-6b040e31c46b.jpeg">
ここに、気象庁のTwitterニュースフィールドのURLをコピペして右のボタンをクリック。

表示オプションで**埋め込みタイムライン**を選択します。
<img width="387" alt="14.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/41b586fa-1776-3fe0-2592-cc600a844676.jpeg">

Google翻訳ですこし表現がおかしいですが、ソースコードをクリックするとコピーできます。
<img width="587" alt="15.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/47bc8326-f94e-164f-198d-3f7215345bb8.jpeg">

Googleサイトに戻り、**埋め込む**をクリックします。
<img width="69" alt="16.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/6bc957cf-681c-e138-ba1a-e92d3e998274.jpeg">

埋め込みコードを選択し、先ほどのソースコードを貼り付けます。
先ほど同様、次へ、保存します。
<img width="623" alt="17.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/0d613c9f-e541-7abc-78e1-b5c65a3e7e8c.jpeg">

気象庁のツイートがサイネージに入りました。
<img width="456" alt="19.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/feee7eb2-4910-8f2c-fe32-f6946d476363.jpeg">

###ライブ映像
家の近くの気象監視用のライブ映像を埋め込みます。
次のソースコードに近くのライブ映像のURLを入れて埋め込みます。
※各映像の視聴等については各管理団体へお問い合わせ下さい。

```html

<!DOCTYPE html>
<html lang="ja">

<style>
  html {
   overflow:hidden;
   margin: -65px 0px 0px -45px;//上、右、下、左
  }

iframe {
    border: 1px solid black;
    width: 100%;
    //overflow:hidden;
}

.output {
    background: #eee;
}
</style>
<body>
<iframe id="inlineFrameExample"
    title="Inline Frame Example"
    width="900"
    height="600"
    src="ここに、ライブ映像のURL">
</iframe>
</html>
```

**ここに、ライブ映像のURL**に埋め込みたいライブ映像のURLを入力します。

スタイルシートのmarginで余分な部分をカットして調整します。
上と右あたりの数値をいじって調整してみてください。

```css

<style>
  html {
   overflow:hidden;
   margin: -65px 0px 0px -45px;//上、右、下、左
  }
```

**次へ**を押すと、真っ白の場合があります。
ライブ映像提供元がssl化未対応のサイトはこのようになります。
<img width="408" alt="20.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/11d0e380-bce8-0f9a-3389-0d3c04f144a4.jpeg">

ブラウザのアドレスバーに警告マークがでているので、ここをクリックします。
<img width="67" alt="21.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/73759468-f80a-6021-cc34-dd5264a51584.jpeg">

**安全でないスクリプト**を読み込むをクリックします。
※リスクを確認の上設定してください。
<img width="351" alt="22.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/7a4b34f4-b0bd-2096-4165-a4b44456ce3e.jpeg">

無事、映像がでました。
<img width="417" alt="23.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/0764efa6-6eb4-2084-dbdd-3b5a2da3ad7a.jpeg">

ライブ映像の大きさを変えたい場合

```html

<!DOCTYPE html>
<html lang="ja">

<style>
body {
overflow:hidden;
margin: -25px 0px 0px -17px;//上、右、下、左

</style>

<body>
<div style="width:100%;-webkit-overflow-scrolling:touch;border:solid 1px;">
  <iframe height="600" name="sample" src="ここに、ライブ映像のURL" style="transform:scale(0.35);
-moz-transform:scale(0.35);
-webkit-transform:scale(0.35);
-o-transform:scale(0.35);
-ms-transform:scale(0.35);
transform-origin:0 0;
-moz-transform-origin:0 0;
-webkit-transform-origin:0 0;
-o-transform-origin:0 0;
-ms-transform-origin:0 0;
border:solid 1px;
width:230%;
">この部分はインラインフレームを使用しています。
  </iframe>
</div>
</body>

```
スタイルシートとiframe内で調整します。
cssの詳細ついては、参考書、または[Google先生](https://www.google.com/search?q=css&oq=css&aqs=chrome..69i57j69i65l3j69i59l2.2305j0j9&sourceid=chrome&ie=UTF-8)に聞いてみてください。

###キャプチャ情報埋め込み
続いて、最初に設定した気象庁の気象情報を埋め込みます。
スプレッドシートの**画像URL（サイト埋め込み）**のURLデータを次のソースコード内の**ここに気象情報のURLを入力します**に上書きします。
<img width="324" alt="24.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/88fde6f2-9a05-f686-e47c-2cd08c9af745.jpeg">

```html

<!DOCTYPE html>
<html lang="ja">
  <head>

    <style type="text/css">
     /*スクロールバーを消す*/
     body {overflow:hidden;}
     /*画像ファイルの左上調整*/
     .img-box {
      margin: -22px 0px 0px -35px;//上、右、下、左
    }
     /*画像ファイルの大きさ調整*/
     .img-box img {
      width: 330px;
      height: 280px;
      object-fit: cover;
    }
     .right-bottom {
      object-position: 100% 100%;
    }
    </style>

  </head>
    
  <body>
      
    <div class="img-box">
      <!-- ライブの画像をpngと認識させるために#dummy.pngを入れ、nameをscreenshotにする -->
      <img class="ここに気象情報のURLを入力します#dummy.png" name="screenshot">
    </div> 
    <script type="text/javascript">
     kisho = new Image();
     kisho.src = document.screenshot.src;
     screenshotTimer(); //*1

    function screenshotTimer() {
	 var now = new Date();
	 document.screenshot.src = kisho.src + "?" + now.getTime(); //*2;
	 setTimeout("screenshotTimer()",60000); //*60秒ごとに更新
    }
</script>
                              
  </body>
    
</html>
````

これを**埋め込む**から埋め込みます。
<img width="414" alt="25.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/b11d22a7-62d8-b94a-b3b3-b7aa089c41c4.jpeg">

Googleドライブにある画像をトリミングします。
キャプチャ時点で右、下部分はトリミングしてありますよね。
<img width="306" alt="40.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/b96dedb8-bdcb-5d94-12ab-e6e6c80310ec.jpeg">

埋め込みのスタイルシートで左、上を調整します。
スクロールバーを消したり、画像の大きさを調整したりしました。
好みに合わせて調整してみてください。
<img width="309" alt="41.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/9685a7ae-0c11-ef89-8b35-bd4e9c7c569c.jpeg">

javascriptで定期的に更新するようにしました。
これは、GASのトリガーで定期的にドライブに画像を上書き保存しているので、上書き保存された画像をGoogleサイト側で更新するためです。
例では60秒ごとに更新するようにしております。
実際はGASのトリガー間隔でいいと思いますが、気象庁等の更新のタイミングにGASを合わせ、その後Googleサイトで更新なので、サイネージを開いた時間からカウントした場合、タイムラグが生じるため短めにしました。
すでにお気づきの方がいるかもしれませんが、最初に作成した**ホーム**に埋め込んだ気象庁の台風進路についても、この仕組みをいれると、定期的に自動更新できます。
試してみてください。

注意が必要な部分は、Googleドライブの画像ファイルを利用する場合、
`#dummy.png`
が必要になることです。
グーグルドライブの仕様上、データサーバーとした使用方法を想定していないので、画像ファイルを共有で埋め込む場合にURLが**ID**になっているため、拡張子部分が存在しません。
そこを無理やりdummy.pngといったファイルですよ！ってことにしてます。

場所や大きさを調整して、一画面に収まるように調整します。
やはりダーク色にしてみました。
<img width="824" alt="26.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/3650b94d-ccdc-2424-f4b2-9002ae95565e.jpeg">

また、一つの埋め込み画像の位置で、複数の画像を一定時間で入れ替えていきたい場合は次のソースコードで実装可能です。
ここらへんをどんどん組み込めばサイネージらしくなってきます。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<style type="text/css">
     /*スクロールバーを消す*/
     body {overflow:hidden;}
     /*画像ファイルの左上調整*/
     .img-box {
      margin: -22px 0px 0px -35px;//上、右、下、左
    }
     /*画像ファイルの大きさ調整*/
     .img-box img {
      width: 500px;
      height: 415px;
      object-fit: cover;
      border: medium solid #ffffff;
    }
     .right-bottom {
      object-position: 100% 100%; 
      border: medium solid #ffffff;    
    }
    </style>
</head>
<body>
<div class="img-box">

<img class="right-bottom" src="1つ目のURL#dummy.png" name="gazou">
    
</div> 

<script type="text/javascript">
img = new Array("1つ目のURL#dummy.png","2つ目のURL#dummy.png","3つ目のURL#dummy.png"); //*1
count = -1; //*2
imgTimer();

function imgTimer() {
	//画像番号
	count++; //*3
	//画像の枚数確認
	if (count == img.length) count = 0; //*4
	//画像出力
	document.gazou.src = img[count]; //*5
	//次のタイマー呼びだし
	setTimeout("imgTimer()",10000); //*6
}
</script>
</body>
</html>

```

###緊急時用サイネージ
最後に、緊急時に家族と共有するページを作ります。
ページの+ボタンから追加します。
<img width="392" alt="27.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/0d779f55-b13f-73da-ab90-a4dac6971b65.jpeg">

**挿入**からフォームを選択します。
<img width="680" alt="28.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/7627713e-e838-c864-76af-6886970db28e.jpeg">

作成した**安否確認**フォームを挿入します。
<img width="375" alt="29.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/66bfdbb0-46cf-1c06-4f5a-07edb574197b.jpeg">

フォームが挿入されます。
<img width="560" alt="30.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/495e9016-cbee-9b51-ab22-eb78e07ef14c.jpeg">

同じように次は**挿入**からスライドを選択します。
先ほど作成した緊急時マニュアルを挿入します。
<img width="476" alt="32.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/241f4752-3fec-10bf-bcf1-6b3f6a30209e.jpeg">

続いて、**挿入**からスプレッドシートを選択します。
<img width="206" alt="34.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/5081ef3a-00a2-f2a5-08fd-4cc813bec56e.jpeg">

先ほどのフォームから作成したスプレッドシートを挿入します。
<img width="421" alt="35.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/610da89c-da23-48be-a861-fd08cec0e2f3.jpeg">

デザインを整えます。
<img width="842" alt="36.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/c2bea255-52e3-7d77-9677-6b58f7bde689.jpeg">

##その他パーツ
###ブログパーツなどが使えます。
例えば、[GPV 気象予報](hhttp://weather-gpv.info/)で、ブログパーツを作成できます。ここで作成したコードを埋め込むことで利用可能です。
<img width="738" alt="37.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/808392c9-d013-2c03-271b-2c57d665bf00.jpeg">

細かな設定等、自分好みに調整してみてください。
<img width="476" alt="38.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/cbd06614-2d89-8c7a-3765-8a29d6118978.jpeg">

###リンク
最もシンプルなものに、リンクの作成があります。
埋め込みコードでhtmlで作成してもいいのですが、標準機能の**テキストボックス**から作成できます。
<img width="270" alt="39.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/ab9320cc-7e9d-2151-e702-c84b00bf9e13.jpeg">

名前を入力し、リンクマークをクリックします。
<img width="551" alt="40.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/8bba3736-a4d2-619d-928e-539d8717d0a8.jpeg">

リンクを入力して適用をクリックすると作成できます。
<img width="318" alt="41.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/d5ecc011-20d0-fb34-4b76-eb1ee90ddacc.jpeg">

必要な情報にすぐにアクセスできるように設定しておくと便利です。
<img width="786" alt="42.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/85dde3e6-71db-b795-c2af-bfba26a6e397.jpeg">

##作成
ページ右上の**公開**ボタンを押します。
<img width="119" alt="43.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/df237b2f-7c7a-2af7-2dcf-646632505315.jpeg">

サイトを閲覧できるユーザーを変更します。
我が家のサイネージなので、我が家のメンバー限定のサイトにしたいと思います。
管理をクリックします。
<img width="575" alt="44.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/cf3d3caa-25e1-2f90-b6cb-26ea46b853a1.jpeg">

特定のユーザーのみが公開バージョンを閲覧できますのラジオボタンを選択し、保存します。
<img width="401" alt="46.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/0cd3842a-2671-bcf3-98ee-7dcc79800265.jpeg">

ここで、招待から家族のメールアドレス（Googleアカウント）を入れて招待して完了します。
<img width="350" alt="47.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/e3f2f8cd-ace5-d0fb-3b9c-a306cb6b3a4a.jpeg">

最後にウェブアドレスを任意に定め、公開ボタンをクリックします。
<img width="603" alt="48.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/ec2b596c-2366-51c9-9dba-eaf4b42c3d31.jpeg">

画面下に**サイトを公開しました**というメッセージがでるので、となりにある**表示**をクリックすると、完成したサイネージが表示されます。
<img width="370" alt="49.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/2a895933-5c0a-170c-5c41-f93f50bac517.jpeg">

###デザイン仕上げ
デザインが崩れていたり、文字が大きくて入り切っていない場合などは、画像の大きさや配置を調整したり、埋め込みコードからスタイルシート等を修正してみてください。
お付き合いいただき、ありがとうございました。
<img width="1060" alt="50.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/62b3da4c-0b54-b1bd-3dd0-deb28b46d56c.jpeg">

<img width="1053" alt="51.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/486b4b56-bf81-9552-c40a-eda8d777a31c.jpeg">

<img width="1063" alt="52.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/754acc4c-f52d-2cfe-7320-4f14ba8233ab.jpeg">

## 参考
- [Google Apps Scriptを使ってWebサイトのスクリーンショットを撮影する](http://blog.en-g.net/2015/11/22/)
- [一定時間で画像を切り換える](http://www.shurey.com/js/samples/3_img8.html)