動画画像ライブラリー第３弾です。

Dropboxリンクは目立たないようにしたい。

これまで画像のURLリンクもDropboxを使えばいいと考えていて、Finderで右クリックして「Dropboxリンクをコピー」で得られたリンクを、そのリンクの末尾のdl=0をraw=1に置き換えて使えば、それだけでいい。そのように思ってきました。

Dropboxリンクの例は、下のようになります。

(A)

このDropboxリンクが安全性に優れている点は、クリックしてから実際に再生する時は更にワンタイムトークンリンクに変換されてからブラウザで再生されます。(B)のように形を変えます。ブラウザへURLをコピペするとこうなります。しかもこのURLは一定の時間が経過すると無効になります。

(B)

WordPressの画像ブロック→URLから挿入→(A)を挿入→HTMLとして編集を選ぶと、以下のコードが記述されています。

(C)

これで構わないとすれば、それまでのことですが、ブラウザからページのソースを読めば、上のコードは丸見えになります。Dropboxとすれば、(A)の情報が知れ渡るのは、あまり嬉しくないでしょう。「頭隠して尻隠さず」状態ということですからね。

そこで、以下のように、AppSheetで、動的な画像サイトを作ることにしました。

(D)

これを、画像ブロック→「URLから挿入」に入れます。こうすると、(A)の部分は、WordPressに表示されなくなります。(C)から分かるように、メディアはDropboxから読み込んでいるのですが、読者からは、どこから読み込まれているのか分かりません（そのようにしたいわけです)。

簡単に代替URLへ移行したい。

画像ライブラリ(D)を作るもう一つの目的が、 メディアのソースを、DropboxリンクからXserver、pCloudなど他のサーバーへ、簡単に、切り替えられるようにすることです。

なぜって？やはりDropboxにもトラブルは起こりうるからです。

こうした移行は、一般的には、プラグインを使って、WordPressのソースに書き込まれているURLを、直接に、置き換える方法が取られると思います。

しかし、ソースにDropboxリンクを使っている場合はそうはいきません。Dropboxリンクはファイル名やローカルパスが外から分からないようにランダム文字列に置き換えられていますので、ローカルパスだけをサクッと置き換えることは出来ないのです。

1点1点、Dropboxリンクと自宅サーバーURLを対応させた、マッピングファイルを作成する必要があります。丁寧にいうと、DropboxリンクとローカルパスとXserverサーバーURLの3つをマッピングさせたレコードを作成する、それをファイル上で右クリックしてあといくつかのクリック操作だけで済むようにしているところが、ポイント解説にて紹介するAppleScriptの特徴です。

そしてこのマッピングファイル(Google spreadsheet)をJSONファイルとして、WordPressに送り込むようにします。マッピングファイルの更新は1日一回夜中に行います。

link_mapping.csvの重複レコードの整理について📄

ここまで書いてきて、私が、動的サイトの使いやすさにこだわる理由が分かっていただけたでしょうか。

それでは次は、ポイント解説です。

ポイント解説

すみません。説明で使う素材を2024-11-28_15.50.35.pngに変更します。

1 画像ライブラリ作成AppleScript

画像ライブラリ作成 AppleScript📄

Dropboxリンクをコピーした後に、クイックアクションの中から「画像ライブラリー作成」を選びます。

ポイントは、必ず「Dropboxリンクのコピー」を行った後で、クイックアクションに入り、「画像ライブラリ作成」を選ぶことです。いきなりクイックアクションに入ると、その段階では、古いクリップボードが残ったままになっています。

そこで、一応、ポカよけとして、以下をメッセージ表示します。

ここはひとまずOKを押して終了します。

改めて、Dropboxリンクのコピーを実行した後で、クイックアクションの「画像ライブラリ作成」を選ぶと、

と表示されます。

ここでOKを押せば行追加が実行されます。

日本語のファイル名の時の注意喚起

ファイル名に日本が混じる時、Dropboxリンクは日本語は削除されます。リンクはランダム文字列で作られますので、日本語が削除されてもユニークなリンクにはなりますが、日本語だけで出来たファイル名ですと、リンクを見ても、どのファイルか、想像すら出来ません。特に、複数の日本語だけのファイルが続きますと、どこまで処理したか、分からなくなります。そこで、日本語だけのファイル名を扱う時は、必ず、Dropboxリンクの取得が済んでいるか注意喚起をします。

日本語のファイル名の時の注意喚起📷

ただ、出来れば日本語だけのファイル名は避けるのがいいです。

AppleScriptの中では、wp_photo_library.csvへ行を追加しています。更に、link_mapping.csvにも行を追加します。

2 追加したデータをWordPressで扱えるようにする

importAndBackupCSV GAS📄

createPhotoJson GAS📄

im.php JSONから画像を表示　php📄

画像ライブラリ用のデータは、クイックアクションでwp_photo_library.csvに追記されます。このデータを動画画像idのシート3に書き込みます。ファイルURLおよび画像idはユニークです。シート3へ書き込んだ後、wp_photo_library.csvにあったデータは、backup_wp_photo_library.csvへ追記した後、wp_photo_library.csvはクリアします。新たに作った画像サイトは、今作業中のブログにすぐに使いたいので、１分おきの更新にします。

少し待ちますが、新たに登録された場合は、AppSheetの動画画像ライブラリの画像メンテの先頭に、情報が表示されます。この中から、再生URLを取得して、WordPressの画像ブロック→URLから挿入するなど、利用します。

3 まとめ

このシリーズは、３回までで動画および画像を外部から読み込んで表示する方法、動的サイトの構築について説明してきました。次のシリーズでは、Dropboxリンクから複数のサーバーへ切り替える方法について、紹介します。

以上です。

しかしもっと簡単に考えて、まず、”38″の部分は自分で自由に設定できる動画idです。その動画idにどのサーバーにあるメディアをくっつけるかを決めます。ただし、VimeoやYouTubeの場合は、VimeoやYouTube側でidを発行するので、私がそれと別のidをさらに付けるのも管理を複雑にするだけなので、やめます。その結果、例えば、”38″はDropbox、”alt_38″は自宅サーバー、”885196700”はVimeo、”SRpWDu7gFC4″はYouTubeと動画idを決めることができます。重要なのは、動画idはユニークなキーであることです。

以下のようにショートコードブロックに、ショートコードを埋め込むようにして、””のvideoid(動画id)=の部分を書き換えれば、動画がサクッと置き換わるようになります。

以下が実際のショートコード貼り付けによる動画です。

[videoembed videoid="40"]

自分が作成した動画、YouTubeから探し出した動画などにidをつけて、動画ライブラリに登録しておけば、あとは利用が簡単です。

ポイント解説

それでは、この動画ショートコードの作成について、手順を説明します。下に全体図を掲載します。全部で４ステップになります。

❶　サーバーごとに埋め込みコードテンプレートを作成する。

現在、用意しているのは、Dropbox、Vimeo、YouTube、自宅サーバーの４つになりますが、埋め込みコードの書き方は、それぞれ違いがあります。Dropboxと自宅サーバーは、WordPress動画プレーヤーの使用方法に従って記述し、Vimeo、YouTubeはサイトで提供される貼り付け、埋め込みコードを参考にして記述して、それらのテンプレートを作成します。

Dropbox 埋め込みテンプレートの生成📄
Vimeo 埋め込みテンプレートの生成📄
YouTube 埋め込みテンプレートの生成📄
自宅サーバー 埋め込みテンプレートの生成📄

❷　動画idごとに埋め込みコードを生成する。

動画idファイル(spreadsheet)のS列(19列)に埋め込みコードを追記します。この埋め込みコードは、そのままWordPressのカスタムhtmlブロックへコピペすれば使えます。まず、その状態を作ります。

動画idごとに埋め込みコードを生成GAS📄

❸　埋め込みコードをJSONに書き込み、WordPressサーバーへ送る。

埋め込みコードをコピペするだけでも便利ではありますが、欠点もあります。ソースコードは見る人が見れば外から丸わかりなのでURLをコピーできます。巡回ロボットを使えばもっと簡単です。それを拡散できるわけですが、やたら拡散されてしまうことは非常に迷惑なことですので避けたいです。「漠然とした拡散は迷惑である」とするこの感覚が、SNSとの決定的な違いになります。

その意味で、「動的サイト」や「動画ショートコード」には、動画のURLまでは表記しませんので、やや、安全になります。埋め込みコードの欠点のあと一つは、複数箇所に書き込んでいて、もし動画他のURLを差し替えようとした時、複数箇所の修正をする必要があること、当たり前のことではありますが、これが結構ストレスになります。この点、元となる動画webサイトをメンテナンスすれば全部変更されます。

埋め込みコードJSON生成GAS📄

videoembed.jsonファイルは、gd_wp_dataに書き出されます。gd_wp_dataフォルダはHazelによって監視されており変化した場合はTransmit5のFTPにより数分以内にXserverにあるWordPressサーバーへ更新されます。

❹　動画ショートコードphpを作成する。

WordPressサーバー側では、投稿で記述されたショートコードとマッチするvideoembed.jsonファイル内の埋め込みコードに基づき、動画を再生します。

その処理を行うphpを、Cocoon childのfunctions.phpに追記します。

動画ショートコード起動php📄

まとめ

まとめになりますが、この動画ショートコードは、以前に投稿した、動的サイトの運用とセットになります。ぜひ、そちらもご一読ください→「動画用の動的サイトを作ってみた」。

以上です。

動的サイトとは

今回は、動画用に、動的サイトなるものを作ってみました。

具体的に構造で示すと以下です。

静的サイトと呼ばれるものは、こうした動画ページを構成するための情報を、一つのhtmlの中に、直接書き込んでガチガチに固めてしまいます。動画ファイルもhtmlと同じサーバーにアップロードします。それは高速に処理ができて安定しているわけです。しかし、何度も修正したい、差し替えたい、そうなると面倒でたまらない、そういうことになるわけです。

そこで、コンテンツは、出来る限り外に置く。それを差し替えて使う。つまり、昔からみんなやっていることで、CDやDVD、カセットをプレーヤーに差し込む。そういうやり方です。こういうのをモジュール化する、と言います。

動的サイトとは、こうしたモジュール化をすることにより、WordPressのダッシュボードを開くことなく、外側からデータ、パラメータを送り込むことによって、動画サイトを生成するやり方、そういうことになります。下が全体の流れです。

この上の図表も、投稿の中の一種の動的パーツと言ってもいいかも知れません。この図表は、Google図形描画です。Google図形描画の公開埋め込みが表示されています。クリックすると、そこにGoogle図形描画の編集ページがリンクしています。読者は別画面で表示して拡大して閲覧できるわけですが、私にとっては直接に編集できるわけで、それが非常に便利です。

さて、全部を細かく説明するのは、ちょっと骨が折れるので、赤丸で示した５つのポイントの説明と、サンプルのファイル、スクリプトをリンクします。

ポイント解説

❶　GoogleSシートで、ファイルのレイアウトを決める。

こういったミニシステムを作るとき、決め手となるのは、ファイルのレイアウト、つまり、Sシートでの列の決め方、になります。今回の場合は、２つのファイルを用意します。１つのトランザクションファイル（動画idファイル)と、１つのマスターファイル（動画関係付けファイル）です。

（１）動画idファイルのレイアウト

下の表(クリックしてください)は、説明上、タテ書きにしてありますが、Sシートでは、項目名は、列の名前です。

（２）動画関係付けファイルのレイアウト

（３）リンク

GoogleSシート　参考　動画idファイル

GoogleSシート　参考　動画関係付けファイル

❷　AppSheetの設定を行う。

❶のファイルレイアウトを、今一度、お目通ししていただくとして、AppSheetの設定に入っていきます。あちこち設定する場所が移るので、動画で解説します。動画内では参考2としていますが、参考、と読み替えてください。

動画用動的webサイトのためのAppSheetの作成 25分 (動画🎥)

「AppSheetの作成」補足〜動画所在場所refについて2分(動画🎥)

❸　GASを作成する。

GoogleSシートの列については、以下のように、GASの中で、列名を直接に指定しているため、基本的には、列の追加変更削除は行わないようにしてください。
それでは次に、GASを使って、JSONファイルを生成するプログラムを作成します。

はじめてのGAS約10分動画

（１）JSONファイルの生成条件

1) “シート1″のB列に、一つでもTRUEがある場合は、下記のJSONファイルの上書きを実行して、上書きが終了したら、B列の値を全てFALSEに置き換える。

2) JSONファイルの先頭に”[“、末尾に”]”を入れる。

3) “シート1″のA列の値が”公開”の場合、C F H J L N列のデータを書き込む。無しの場合は空欄””。

4) 全てのデータの書き込みが終わったら、”シート2″のA列に、その日時を入れた行を追加する。

5) GASは、トリガー設定、実行関数：generateJSON 　イベントのソースを選択：スプレッドシートから　イベントの種類を選択：変更時　エラー通知設定；毎日通知を受け取る。

（２）リンク

JSONファイル生成のGAS

❹　WordPressテンプレート用phpを作成する。

動的サイトを置く場所は、WordPressの固定ページにしました。今のところ、WordPressプレーヤーを組み込んだ固定ページを２パターン、vimeoのプレーヤーを組み込んだ固定ページを2パターン、dropbox利用のものを2パターン、YouTube利用のものを2パターン、計8パターンのテンプレート用phpを作りました。固定ページ自体は、ほぼ空っぽで、URLでの指示に対応するテンプレートphpに、形式の全ての情報が入っています。

YouTubeの難儀さ

YouTubeを組み込む場合は、同じようにYouTube用のphpを作ることになります。ただしYouTubeは、ピクチャーインピクチャー(PIP)といいますが画面を分離して外に表示する方法を使うのが非常に厄介です。つまり、動画の用途がブログ記事の補強である場合は、ブログを読みながら動画を見るわけです。パソコンであればウインドウ分離したりブラウザを2つ使うなど、何らかの工夫ができますが、スマホでは画面が小さくてそうはいきません。スマホでは、動画を上にPIPで表示して、下でブログをスクロールしながら読む、そういう使い方になります。そのような使い方をYouTubeでやろうと思うと、ブログを発信している側の工夫では困難で、受信者側、視聴者側に、アプリやプラグインを入れるなりの面倒をかける事になります(→方法)。したがって、私としては、それを前提とは考えたくないです。その意味で、YouTubeを選択肢に入れるかどうかはYouTube側への改善期待です。今のところ、Vimeo、Dropbox、自宅サーバーを使うつもりなので、視聴者は何も用意することなくPIPが使えるはずです。

なお、Googleドライブに入れた動画をWordPressで表示する方法は、GASやAppSheetが同じドライブ内で動作するので非常に生産性が高そうなのですが、今のところ、ユーザーの自由にさせてもらえない制約があり残念です。

Mac、iPhoneは反面教師

最近感じる事ですが、WindowsやAndroidは、AppleのOSと比べると遜色なく進歩している、と思います。しかし、セキュリティについてはAppleの方がしっかりしている、と思います。ですので、WindowsやAndroidでは動くのにAppleでは動かないことがままあります。逆に、Appleで動く場合は大抵WindowsやAndroidでも動くということです。何が言いたいのかというと、最初に、高いハードルであるAppleで動作するようにしておけば、あとがラクになる可能性が高いと思います。いやあくまで傾向としてです。

（１）リンク

一応、YouTubeも再生できるように、phpを作成しておきました。

vimeo vm5 WordPressリンク用　繰り返し再生なし　php

vimeo vm6 WordPressリンク用　繰り返し再生あり　php

dropbox dr5 動画枠内字幕　WordPressリンク用php

dropbox ds5 動画枠外字幕　WordPressリンク用php

自宅サーバー_mh2_動画枠内字幕_WordPressリンク用php

自宅サーバー_mh1_動画枠外字幕_WordPressリンク用php

youtube yt1 繰り返し再生なし php

youtube yt2 繰り返し再生あり php

❺　JSONファイルの自動FTPを組み込む。

一応、以下のように、JSONファイルの自動FTPを組み込みました。多少、ギクシャクしたりクラッシュすることもあります。まず、Transmit5でFTP更新がアプリ起動だけで動くようにAutomatorでアプリ化、次にHazelでフォルダ監視をして、フォルダが変化したらアプリが起動するようにしました。決め手は、HazelにAppleScriptが組み込み可能なところです。
Hazelに組み込んだAppleScript：

但し、Macの起動が必要なので、宅外の場合は、iPhoneのFTPアプリで手動で更新します。

Transmit5(外部サイト)

MacのAutomatorについて(外部サイト)

Hazelの説明のサイトは、丁寧な日本語でのものが見当たりませんが、ちょっと古いがこれでしょうか。(外部サイト)

Hazelの工夫：
Hazelですが、自分のフォルダ直下の変化とサブフォルダ内の変化に対して、アクションを起動させるようにするためには、先頭のルールで、「Kind is Folder」Do the following…で「Run rules on folder contents」を設定します。次のルール以降で、アクションを設定していきます。今回は、「Extensionがvttのファイルは、それをvttdataフォルダへコピーする」かつ「Transmit5(FTPアプリ)によりWordPressサーバーへ更新する」アクションになります。

上記の方法は、常にMacが起動している環境があれば、悩みは減ります。現在Mac miniを使っていますが、最近のMac miniは発熱も少なく、常時稼働用に向いているでしょう。遅かれ早かれこんな形が良さそうです。

その他

（１）ローカルパスを記録しておくことが必要：

訂正前の開始点：

この投稿で書くと埋もれてしまうので、いずれ別の投稿にしますが、Dropboxなどクラウドサーバーで提供されるアクセストークン型リンクURLですが、何らかの理由で変更されてしまうリスクがあります。そのトラブルの修復のためには、「リンク元であるローカルファイルの場所」がすぐに特定されることが、必須です。その場所のことをローカルパスと言いますが以下では簡単にパスと称しています。

具体的には、動画web AppSheetでは、動画の構成には、初期画面、動画、字幕、字幕一覧、説明の５種類のファイルを使えるようにしていますが、それらのURLとパスの両方を登録するようにしています。パスの上で右クリックして、Finder内で表示して、内容を確認できます。

そしてこれらの、動画を構成するために使われたファイルのパスの一覧表を更新するアプリをGASで作成しています。

パス一覧表作成のGAS

（２）出来れば代替URLも登録しておく。

VimeoやYouTubeの使用には全く気にしないことですが、私の場合は、その多くがDropboxリンクです。リンク切れ他何らかのトラブルで、再生不可になる可能性は否定はできません。その時の一時的な切り替え先として自宅サーバーを考えています。従って、（１）のローカルパスに加えて代替URLも登録しておく方がいいと思っています。ここについては後日、投稿します。

訂正前の終了点：

訂正後の開始点：

パス一覧表からマッピング表への変更：

パス一覧表ですが、コンセプトがちょっと中途半端でしたので、目的を代替対策に絞って、そのためのデータとして、マッピング表を作ることにしました。以下の4つの条件を満たすことにしました。

（１）動画や画像を収めるローカルフォルダを決めておくこと。
（２）使いやすいようにライブラリーを作ること。
（３）そのフォルダ自体を、配信可能なクラウドストレージ例えばDropboxと同期させて、Dropboxリンクが取得できるようにしておくこと。
（４）Dropboxのトラブル時の代替として、別の配信可能なサーバーに、そのフォルダをバックアップしておくこと。
こちらの記事をお読みください。

訂正後の終了点：

さて、投稿の内容が多過ぎなので、いずれ別の投稿にしますが、
字幕を、スマホなど小さい画面で見る時、文字が被らないようにする方法に、2つあって、1つは、字幕を動画の枠外に表示することです。これは、上に既に紹介済みです。あと一つは細かいことですが、動画の枠内の字幕の背景を透過させることです。WordPressプレーヤーを使用する場合は、以下の方法で、デフォルトで透過率を設定することができます。

ちょっと横道に外れます。私は、ChatGPTをよく使いますが、3.5の無料版です。有料版は日本円で約2700円/月、ということで、ちょっと高過ぎます。無料版でも、うまく質問をすれば、プログラミングもやってくれます。分からないことをザックリ理解するのに、便利です。活用をお勧めします。

手元でデータをサクッと変更できることが一番嬉しいこと！
確かに、最近、自動文字起こし、翻訳と便利になってきている一方、人間側として、表記の間違い、漢字の間違い、ほか、間違いの点検が面倒になり、その修正が億劫になっていると思います。そこで、こうした手元でサクッと、ほぼリアルタイムで修正できる仕組みは、とても助かるのではと思います。
動的サイトの欠点は、探し出す時間が欲しいので、どうしても表示が遅れることでしょう。まあ、ネットはそうでなくても遅延は多いので、気にならなくなると思います。

以上

2023.7.31：TwitterがXに移行。APIへの影響が不明。
2023.2.16追記：TwitterAPIの有料化の発表がありましたが、投稿bot1500個までは無料化へ自動移行とのことで、多くの場合、問題なさそうです。
2022.5.13更新：Twitterを追加。無料使用に留める場合は、API v2を利用すること。

＜分散通知をスマホから実行する＞
別ページで表示

メールとブログを含めるとSNSよりソシアルメディア(Social Media)という方が正しいのでしょうが、単語として分かりにくいので、ここでは「情報を配信するツール」としてSNSと呼ばせてもらいます。

さて、昨年5回に亘って、「分散通知の仕組みを作る」として、電子メール、LINE、Push7、Bloggerのそれぞれへ、アプリを開かないで送信する仕組み、を説明しました。

しかし、スマホで操作すると、GoogleスプシをChromeのPCサイトから扱う、という方法は非常に扱いづらいことは分かっていました。

今回、それを、かなり実用的に改善しましたので紹介します。

実は、AppSheetとGASの連携については、Google内で開発が進んでいますので、半年先には、もっと簡単に色々できるようになっているかもしれません。

しかし今回私が改善したいこと自体が、さほど、高度な技術を要求することでもありませんので、現状の技量でアプローチしてみます。

ポイント解説

＜1＞ 人の手作業は、文を作成修正する→送りたいSNSを選び送信する、ただそれだけ。

前回の通知方式では、SNSアプリ別にGoogleSSとGASを組み合わせて、GoogleSSを立ち上げて内容を確認して、送信ボタンを押す、これをSNSアプリ毎に行う方式でしたが、今回は、GoogleSSは一つのファイルにして、その中へ、GASを各アプリ別に組み込む、という方法にしました。

その各アプリ別のGASは、前回の通知方式で作ったものを、ほぼそのまま流用しています。
作業手順は以下のようになります。

＜作業手順＞
別ページで表示

前回は、各GoogleSSを立ち上げて、投稿ボタンを押す、これを繰り返すという手間がありました。それがAppSheetの以下の２つのメニューで完結するようにしました。なお、AppSheetについては、こちらの投稿の中で、概略触れています。解説している日本語の書物は殆ど見かけませんが、唯一これくらいです。使っているうちにだんだん慣れてくるとは思います。

AppSheetアプリの実際の動きは、以下の動画をご覧ください。

このビデオは無音です。Twitterは組み込む前です。

以上のような動きになりますが、その中で、通知の作成及び修正の画面が以下です。追加または修正した行が、通知の送信の対象となります。ですから、今現在適当なテスト内容になっていますが、例えば、「避難情報通知用」などテンプレートとして用意しておくのもいい方法です。

上図を表示しているデータは、以下です。sheet1には順次新しい投稿が書き込まれて、それを更新日時でSORTしたものがsheet2へ入り、その最新行からsheet3をコピーしています。

「拡張機能」→「Apps Script」の中に記述したスクリプトは、全部掲載します。

複数SNSの送信GAS

＜２＞　Twitterを使えるようにする。

Twitterですが、災害発生時には最も実績のある情報発信ツールであることは、東日本大震災他大災害の時を振り返れば明らかです。ただ、利用者が多いからか、イタズラや不正利用を防止せねばならず、APIのような、外部からアクセスできるツールに対する許可は、敷居が高い印象がありました。

しかし、申し込んでみると結構すんなりいけます。最近、APIが、APIv1.1からAPI v2にバージョンアップしました。どうもAPI v2から直接使う方法が分かりにくく、色々調べて、TwitterAPI v2をEssentialからElevated(無料）へ引き上げる方法が良さそうです。

引き上げる際に、許可が必要で、用途に関する質問に英語で返答する必要がありますが、簡単な英語で書いても大丈夫かと思います。数多く解説のブログが書かれていますが、例えばこのブログは分かりやすいです。

引き上げておいて、
OAuth1.0aのみにチェック
OAUTH1.0A SETTINGS でRead and writeにチェック
CallbackURI/RedirectURL ,WebsiteURL,Terms of service,Privacy policyは、https://twitter.com
と設定します。

Twitterは、同一内容の複数投稿は拒否するようです。その辺りは、GoogleSSのカラムに前回の投稿内容をコピーして今回の投稿内容と比較して、同じ場合は、tweet.gs内でルーチンを通さないようにしました(上のGASを参照）。

＜３＞　AppSheetで作ったアプリはプロの仕上がり感

AppSheetは、各SNSのロゴをイメージとして読み込んで表示するだけのことですが、上の図のように、プロが作ったようなアプリになります。そこが素晴らしい。

課題点というか仕方ない点としては、各SNS別に送信履歴を残していない点です。これはまあ、各アプリ側では当然履歴として残っていますのでそれで十分でしょう。

現状は、各SNS側の画面から通知文の修正は出来ないようになっています。しかし、基本となる通知文を作った後で、それを各アプリ側でコピーして、各アプリ側で修正して送信する、という流れの方が素直かも知れません。
このあたりは、AppSheetとGASの連携の開発が進むと、すぐに可能になりそうです。しかしながら、今回のものでも、特に不便は感じません。

＜４＞頻繁にテスト出来ない悩み

この複数通知の仕組みを作って思う課題、課題というか悩みは、頻繁にテスト出来ないことです。なにしろ、緊急通知が目的ですから、滅多に通知なんか発信されるものではないです。テスト用にそれぞれIDやアドレスを作ったとしても、実用としては常に本番用のアドレスにしておかなければ意味がありません。そんなわけで、実際に全部テストできるのは、年に一度の「防災訓練の日」の活動の一環としてテスト送信させてもらう、ということになります。

そこがちょっと不便なところ。

でも多くの方は、そんな緊急発信のためではなく、いわゆる普通の「伝言板」「回覧板」的な使い方になると思いますので、十分、応用できると思います。

＜５＞まとめ〜中途半端な規模の人たちのために〜懸念材料

地方自治体で多いのは、「LINEに加入してアプリを入れて活用してください」型です。正直言ってLINEを嫌いな人もいるはず。しかし最近、だんだん、LINEに限定させず複数のSNSの中から、ユーザーが選択できる形式も増えてきました。

スタッフの充実した都市の役所や大規模組織なら色々そうした工夫ができるでしょう。逆に、本当に小さい規模なら電話一本、伝言でOKでしょう。しかし大多数は、そのどちらとも言えない中途半端な規模の自治会、中途半端な規模のNPO。公民館はあるが住み込みは置けない。電話もない。自治会としてインターネット契約をすることは結構面倒なので、個人に契約者になってもらおうとすると、その個人がいつまで肩代わりしてくれるか保証はない。そうなると、Googleなどのサービスも無料で使えるものが中心となります。そんな人たちのために、少しでもお役に立てば嬉しいです。

懸念材料としては、Twitter Botに有料化の動きがあること。GASやAppSheetの連携が自動化処理と見做されると停止されるか有料化されることを懸念します。つまり無料で使えるインターネットサービスは、減少していく方向にあるでしょう。

以上です。

＜分散通知の仕組みを作る　STEP5: ブログ(Blogger)への投稿＞
別ページで表示

ブログは、時系列の掲示板であり、その中には、今回取り上げている緊急通知も含めていいと考えています。記事の性格は、楽しい思い出づくりとは異なりますが、緊急かつ重要な情報は、どこにでも飛び込んでいいものと考えます。

今回、無料のブログの選択には、多少悩みました。この種のサービスは打ち切りになることが多いからです。その中から、Googleと相性がいいもの、シンプルなもの、であるBloggerを選択しました。Bloggerは他のサービスへの移動、例えばWordPressへの移動などについても、説明が数多くあることも安心です。

ポイント解説

＜1＞ GoogleSSへの取り込み

流れとしては、通知文GoogleSS→Blogger送信用GoogleSS→Blogger、です。APIは使いません。Bloggerにはメール投稿機能が備わっており、それを利用します。

Blogger送信用GoogleSSの画面は以下です。

この画面には、Googleフォームへ入力した通知文GoogleSSが取り込まれるため、内容を確認するだけです。問題がなければ、「Blogger投稿」ボタンを押します。

通知文の読み込み：

IMPORTRANGE関数を使います。
読み込みたいGoogleSSのURLが、下記のようになっていたとして、

https://docs.google.com/spreadsheets/d/【この部分】/edit#gid=0

【この部分】を以下の場所に当てはめてください。sheet1は実際のシート名、A10,A12のところも実際のセル位置を当てはめてください。

Bloggerでは、タイトル、本文と関係リンク、の２データを、通知文GoogleSS から読み込んで、このBlogger用GoogleSSへ取り込みます。

=IMPORTRANGE("【この部分】","sheet1!A10")
=IMPORTRANGE("【この部分】","sheet1!A12")

＜2＞GAS記述

GASの記述：

このままコピペください。赤字は、例示です。

STEP2の電子メールと、考え方は同じです。

・nihonnofujisan001は、google個人アカウントです。
・投稿用のメールアドレスが、Bloggerから与えられます。その時【任意の文字列】を設定します。

function sendMail(){
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getActiveSheet();
  const from = 'nihonnofujisan001@gmail.com';
  const to = 'nihonnofujisan001.【任意の文字列】@blogger.com';
  const subject = sheet.getRange(3,1).getValue();
  const body = sheet.getRange(5,2).getValue();
GmailApp.sendEmail(to, subject, body);
}

＜３＞なぜ30分以内？：

ブログ（ネット掲示板）をユーザーが見るのを30分以内、としているのは、ブログには、Push7からRSS連携：

赤字は、例示です。

https://nihonnofujisan001.blogspot.com/feeds/posts/default

を貼り付けています。こうしたRSSフィードは、様々なサービスがあるので、もっと短い巡回時間のものもあると思います。一応、Push7の巡回は30分以内となっています。30分以内は標準的かと思います。

ちなみに私は、Push7を、ブログ更新とは切り離した緊急通知用と、ブログ更新とリンクした一般通知用の２箇所に貼り付けています。

＜４＞全体のまとめ

１）配信数の制約に注意。緊急通知だけなら、会員700人以下なら無料で運用できそう。

現在、私は、全世帯が、3つから１つだけ選んで登録するとして、600〜700世帯を想定しています。トータルとしては、この３つのサービスで、お金をかけずに続けそうですが、自由に選んでもらうとLINEに集中するのでは。LINEの無料のワクは非常に小さいです。後でPush7やメールへ変更を促すことになるのでしょうかね。いずれにしても、緊急通知は一方通行、仮に事態が集中したとしても週２〜３回に収まるのではないでしょうか。

緊急通知の配信基準を設けておく必要があるでしょう。

例として、

・水害・土砂災害における避難警戒レベル３以上の発令に伴い、自治体から、当該地域あてに発出された情報。

・地域の災害対策組織の長（自治会長や町内会長など）が決定した配信情報。例えば、道路の陥没、建物の倒壊、断層など上部自治体の危険箇所情報からこぼれ落ちた地域住民向けの情報。

・事件事故の発生に伴い、警察消防から発出された、地域住民への警戒情報。

・その他、自治体から要請があり当該長が了承した緊急通知。例えば、同報無線の能力不足、故障時の支援も含む。

など。何がどう重なるか分かりませんが、不幸が重なったとしても週２〜３回で収まると、私は想像します。

しかし世帯数が1,000世帯を超えるようだと、レンタルサーバーを使うなど、有料にならざるを得ないのでは。

理想的には、500〜600世帯ごとに、このような仕組みが運営できれば、機動的でしょう。

２）異なったサービスだが、操作方法は統一する。その上で、一つ一つ、送信成功を確かめながら送るのがいい。

今回の、分散通知ですが、使用頻度が非常に低いです。防災などの緊急通知が主目的。そんな災害は頻繁にはないです。ですから、わかりやすく言えば、この仕組みの使い方を忘れた頃、突然、使うことになるのだと想像します。従って、覚える操作方法は一つだけにすること。そしてそれを、それぞれのサービスに適用して、送信出来るようにしておくのが重要だと考えます。

3) GoogleSSをアプリ毎に別ファイルにした理由

アプリ側はそれぞれ異なる会社のサーバーになります。全体が一箇所のトラブルに巻き込まれないように、GoogleSSは、シート別ではなく、ファイル別に用意しました。

4）目標：緊急通知を、スマホから、１３分以内で、７００人へ送る仕組みを、タダで作る。

今回、この目標を達成できたような気もしていますが、実用上、どうなるかはわかりません。

今回、私のブログを読んで下さった方は、私同様、開発費もタダにすることができると思います。これからも工夫改善は続きます。

STEP1へ戻る

以上

＜分散通知の仕組みを作る　STEP4: Push7のプッシュ通知＞
別ページで表示

LINEや電子メールは双方向の会話の機能があるので、「りんごちゃん」などニックネームで構わないが何らかのID情報が配信側に伝わります。しかし、利用者側には、それすら知られたくない人もいます。

Push7は、ニックネームすら入力不要、です。敷居が低いです。

Push7に似た仕組みは、既にネット上に溢れています。ふだんサイトを見ていると、ヒョコッと顔を出して、「登録しませんか」と誘いかけられ、即座に、×、拒否、NO、不要を返事する、それが条件反射になっているあれです（ブラウザの設定でポップアップを禁止に出来ると思いますが）。

今私は、緊急通知を準備しているので、ポップアップ禁止設定にしたおかげで目にも触れない、というのでは困ります。そこで、サイトの文面の中で、説明を加えて、ボタンを押してもらって申し込んでもらう手順にしています。このPush7のサイトへの設置方法の説明は、長くなるので、この記事では、割愛します。

このSTEP4における配信作業の流れでは、Push7のアプリは何も触りません。

Push7のアプリをスマホから触りたくない理由ですが、プッシュ通知を打ち込むまでの画面の操作が非常に扱いにくい点があります。アプ通知文がSTEP1で作成済みならば、STEP2、STEP3とやることはほぼ同じです。ChromeからGoogleSSを立ち上げる->PC版サイトを選ぶ->iphoneを横向きにする->閉じるをクリック->内容を一応点検したら「Push7投稿」ボタンをクリック。という手順。

Push7のいい点は、管理する側における、利用者の登録や削除については、作業は何もないです。

実に簡単です。

ポイント解説

＜1＞ GoogleSSへの取り込み

Push7で送信する内容のうち、毎回変更されるのは、タイトル、関係リンク、本文の３個です。

この画面には、Googleフォームへ入力した通知文が取り込まれるため、内容を確認するだけです。問題がなければ、「Push7投稿」ボタンを押します。

通知文の読み込み：

IMPORTRANGE関数を使います。
読み込みたいGoogleSSのURLが、下記のようになっていたとして、

https://docs.google.com/spreadsheets/d/【この部分】/edit#gid=0

【この部分】を以下の場所に当てはめてください。sheet1は実際のシート名、A10,A12,A14のところも実際のセル位置を当てはめてください。

Push7では、タイトル、関係リンク、本文の３データを、通知文GoogleSS から読み込んで、このPush7用GoogleSSへ取り込みます。

=IMPORTRANGE("【この部分】","sheet1!A10")
=IMPORTRANGE("【この部分】","sheet1!A12")
=IMPORTRANGE("【この部分】","sheet1!A14")

＜2＞APIの取得とGAS記述

APIの取得：

Push7は、親切に、API設置方法などが解説されています。

Push7 APIの利用　←この中の「Webプッシュ通知を送信するAPI」の項目が参考になります。

Push7は、メールアドレスとパスワードで登録できます。次に、プロジェクトを例えば「ABC会_通知」などとつけて設置すると、そのプロジェクトごとに、下記のように、App NumberとAPI Keyが発行されます。

GASの記述：

このままコピペください。赤字は、例示です。

・iconは、ここに指定した画像が選択されて通知に表示されます。
・urlは、表示された通知画面をクリックすると移動するサイトです。
・disappear_instantlyは、falseにすると画面の表示にタッチされるまでは表示が残ります。trueにすると数秒後には消えます。

const notifyPush7 = () => {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getActiveSheet();
  const apikey = "【上画像のAPI Key】"
  const appno = '【上画像のApp Number】'
  const url = 'https://api.push7.jp/api/v1/【上画像のApp Number】/send';
  const headers = {
    'Content-Type' : 'application/json; charset=UTF-8',
    'Authorization' : 'Bearer ' + apikey,
 };
const data = {
'title': sheet.getRange(3,1).getValue(),
'body' : sheet.getRange(7,1).getValue(),
'icon' : "https://***.com/****.jpeg",
'url' :  sheet.getRange(5,1).getValue(),
'apikey' : "【上画像のAPI Key】",
'disappear_instantly' : false,
//'transmission_time": "2021/10/10 10:10"
//'query' : true,
}
const options = {
  'method' : 'post',
  'headers': headers,
  'payload': JSON.stringify(data)
};
UrlFetchApp.fetch(url,options);
}

具体的には、以下の、アプリによる送信画面を見て、対応関係を確認ください。

この「タイトル」「URL」「内容」の部分を、STEP1で作った通知文GoogleSSから、自動的に取り込むプログラムになっています。

次回のSTEP5は、Googleが提供するブログであるBloggerへ、同じ通知文を投稿する方法を説明します。割と簡単です。

STEP5

以上

＜分散通知の仕組みを作る　STEP3: LINEのメッセージ配信＞
別ページで表示

iPhoneのLINE公式アカウントアプリには、「メッセージを配信する」機能があり、扱い易いです。しかしその扱いやすさの程度ですが、アプリを開く->「メッセージ配信する」をクリック->追加をクリック->テキストを選ぶ->テキストをコピペする->次へ->「すべての友だち」を選択して配信。という手順。

確かにほとんど悩むことなく進めますが、やはり、余分なことを神経を使いながら覚える、そんな印象。

このSTEP3における配信作業の流れでは、LINEのアプリは何も触りません。通知文がSTEP1で作成済みならば、STEP2とやることはほぼ同じです。ChromeからGoogleSSを立ち上げる->PC版サイトを選ぶ->iphoneを横向きにする->閉じるをクリック->内容を一応点検したら「LINE投稿」ボタンをクリック。という手順。

LINEのいい点は、管理する側では、友だちの登録や削除などの作業は、何もないです。

実に簡単です。

ポイント解説

＜1＞ GoogleSSへの取り込み

送信する内容はコンパクトに、LINEの吹き出し１個だけです。

この画面には、Googleフォームへ入力した通知文が取り込まれるため、内容を確認するだけです。問題がなければ、「LINE投稿」ボタンを押します。

通知文の読み込み：

IMPORTRANGE関数を使います。
読み込みたいGoogleSSのURLが、下記のようになっていたとして、

https://docs.google.com/spreadsheets/d/【この部分】/edit#gid=0

【この部分】を以下の場所に当てはめてください。sheet1は実際のシート名、A20のところも実際のセル位置を当てはめてください。

LINEでは、吹き出し枠一つの中に、タイトル〜本文〜関係リンクを一まとめにして入れています。

=IMPORTRANGE("【この部分】","sheet1!A20")

＜2＞APIの取得とGAS記述

APIの取得：

LINE公式アカウントを取得すると、そのユーザーIDで、下記のLINE Developersにログインして、LINE Messaging APIのアクセストークンを取得します。

LINE Developers

developers.line.biz

GASの記述：

このままコピペください。赤字は、例示です。

const notifyLine = () => {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getActiveSheet();
// LINE DevelopersのChannel Access Tokenを【アクセストークン】へ入れます。
const ACCESS_TOKEN = "【アクセストークン】"
// LINE Developersの自分のユーザーIDを【ユーザーID】へ入れます。
const USER_ID = '【ユーザーID】'
const url = 'https://api.line.me/v2/bot/message/broadcast';
const headers = {
  'Content-Type' : 'application/json; charset=UTF-8',
  'Authorization': 'Bearer ' + ACCESS_TOKEN,
};

const message = sheet.getRange(3,1).getValue();
const data = {
  'messages' : [
    {
      'type':'text',
      'text':message,
    }
  ]
};

const options = {
  'method':'post',
  'headers': headers,
  'payload':JSON.stringify(data)
};

UrlFetchApp.fetch(url,options);
}

「みんな」に対してメッセージ配信する場合は、上記のように、APIの最後の部分にbroadcastを使います。

iPhoneで使う時は、STEP2と同様に、上記のGoogleSSのLINE投稿ファイルを、今度はiPhoneで呼び出してから「PC版サイトを見る」を選択->iPhoneを横向きにする->上段に出る警告を「閉じる」->「LINE投稿」のボタンを押す。と、同じ手順になります。

次のSTEP4では、Push7の新規プッシュ通知を、Push7のアプリを何も触らないで実行する方法を説明します。考え方はLINEと同じです。

STEP4

以上

＜分散通知の仕組みを作る　STEP2: 電子メール配信＞
別ページで表示

STEP2として電子メール配信を説明します。実際の配信の手順は、STEP5のブログ配信を先に行い、そのリンクURLを、電子メール、LINE、Push7の関係リンクにします。

ここでは、昔からある、電子メールによる配信、グループメール配信を基本形として先に扱うことにします。

なおGoogleグループメールの配信先ですが、Googleメールでよく使うGoogle連絡先を使います。Google連絡先にまず登録（※1)→GoogleグループアプリへGoogle連絡先に登録されているメールアドレスを呼び込んで登録、という手順を行なっています。原本の共有化です。

ビジネス用途であるGoogle workspaceというサービスがあり、これの方が本格的ですが、あくまで無料の小規模な利用から始めますので、普通のGoogle個人アカウントを使います。これであっても、配信件数限度は少なくなりますが、Googleグループメール は使うことができます。

Google個人アカウント@gmail.comを持っていれば、
Google個人アカウント@googlegroups.com というグループメールアドレスが取得出来ます。

例えば、適当ですが、nihonnofujisan001@gmail.com、を持っていれば
nihonnofujisan001@googlegroups.com というグループメールアドレスが取得出来ます。

使い方は簡単、メールをたった1個、以下のように打てば、グループ全員に届くことです。

TO:nihonnofujisan001@googlegroups.com
FROM:nihonnofujisan001@gmail.com
ーーーーーーーーーーーーーーーーーーーーー
＊＊＊の件
＊＊＊＊
＊＊＊＊＊＊＊＊

※1: 当面、手作業で配信依頼先のメールアドレスを登録します。別のWebサイトで配信の申し込みができるようにしておりGoogleフォームを通じてGoogleSSへ記録しています。従って同じGoogleアカウントのGoogleアプリ同士なので、APIか関数で割と簡単にGoogle連絡先へ自動登録が可能でしょう。しかしメールアドレスについては、一応、イタズラの有無など人間がチェックした方がいいと捉えています。

別の方法として、姓名、メールアドレスをGoogleSSに登録しておいて、for文でループしながら送信するやり方もあります。もし、送信手段がメールだけなら気長に待てるかも知れませんが、今回、私は、複数のSNSから次々と送ろうとしていますので、手離れよくするために、グループメールアドレスを使うようにしました。

ポイント解説

＜１＞Googleグループアプリの設定〜オーナーの配信のみに制限。

このグループメールは、グループメンバー間での議論に利用することが多いと思われますが、今回、私がこれを使う目的は、緊急通知の配信、です。一方通行です。従って、投稿者は私のみ、メンバーからは投稿不可、の制約を加えています。

グループ設定の中の「投稿ポリシー」の設定：

以上のように、グループのオーナーからの一方的な通知に限定しています。

送信テストをするために、少なくとも２個、自分で確認できるメールアドレスを連絡先→グループメール連絡先選択、を済ませておきます。

どのメーラーでもいいですので、例えば私は、Macの純正アプリである「メール」アプリを使って以下のように送ってみます。Gmailの送信を使う必要はありません。

その結果、以下のようなメールが複数箇所へ届けばOKです（赤塗りが多くてすみません。）ーー以下の部分は、グループ設定の中で、規定できます。但しーーー以下の内容は、無料のアカウントでは変更できません。やむを得ず、「下の段落は無視してください。」と注釈しました。

以上でGoogleグループメール側の準備が出来ました。

<２> GoogleSSへの取り込み、及び GAS記述

緊急通知なので、送信する内容はコンパクトに、subject とbodyだけです。

この画面には、Googleフォームへ入力した通知文が取り込まれるため、内容を確認するだけです。問題がなければ、「グループメール 投稿」ボタンを押します。

通知文の読み込み：

IMPORTRANGE関数を使います。
読み込みたいGoogleSSのURLが、

https://docs.google.com/spreadsheets/d/【この部分】/edit#gid=0

【この部分】を以下の部分に当てはめてください。sheet1は実際のシート名、A20のところも実際のセル位置を当てはめてください。

タイトル、本文、関係リンクそれぞれ、当てはめてください。

=IMPORTRANGE("【この部分】","sheet1!A20")
=IMPORTRANGE("【この部分】","sheet1!A22")
=IMPORTRANGE("【この部分】","sheet1!A24")

GASの記述：

赤字は、例示。

function sendMail(){
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getActiveSheet();
  const from = 'nihonnofujisan001@gmail.com';
  const to = 'nihonnofujisan001@googlegroups.com';
  const subject = sheet.getRange(3,1).getValue();
  const body = sheet.getRange(9,1).getValue();
GmailApp.sendEmail(to, subject, body);
}

わずか９行です。

＜３＞GoogleSSのGASをiPhoneで使う裏技。PC版サイトで扱う。

iPhoneでの操作方法は、以下の動画をご覧ください。

PC版にした後、iPhoneを横向きにするのがポイントです。

　　字幕の翻訳はトップ左の言語をお選びください。

STEP3以降、GoogleSSの操作は、これと同じやり方になります。
つまり、「作業の標準化」です。アプリは違っても操作方法は同じ。作業方法を一つを覚えれば、電子メールも、LINEも、Push7も、ブログ投稿も、それで済んでしまう。

それでは次回STEP3は、LINEを使ったメッセージ配信をLINEアプリを触らずに外側から実行する方法を説明します。

STEP3

以上。