動的サイトとは

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

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

静的サイトと呼ばれるものは、こうした動画ページを構成するための情報を、一つの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円/月、ということで、ちょっと高過ぎます。無料版でも、うまく質問をすれば、プログラミングもやってくれます。分からないことをザックリ理解するのに、便利です。活用をお勧めします。

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

以上

＜和暦だなんて日本人だけが使う。だからこそ。使えるなら使いたい。＞

最近は、パソコンやスマホをよく使う人は、西暦をベースに使う人が多数かと思います。しかし、お役所や自治会などの書類は和暦が中心です。自治会のデータベースなどを作るとき、和暦西暦のどちらを基本にして記録するようにするか、悩みどころです。

10年前は平成何年ですか？

こんな簡単な質問に、多くの日本人が即答できません。「えーと平成は、31年までだっけ。だから。えーと。。。変なこと聞くな！」と逆に怒られてしまうそうです。

しかしなんで和暦などという不便なものを、お役所は使っているのでしょうかね。

多分、公務員の最初の仕事は、和暦西暦対照表を暗記することなのかも知れません。まあ大正くらいまで。まあ、覚えるのは無理か、机の上に貼ってあるでしょうね。

でも介護保険証を持つような高齢者になってきた私は、日本人なのだからパソコンの中でも和暦を使いたい、そんな思いが強くなりました。

AppSheetとは、ノーコードアプリ開発用のアプリと分類される、今流行りの、というか、これから流行るだろう開発ツールの一つです。Googleが提供しています。最近私は、GoogleのGASやスプレッドシートで、複数のプッシュ通知を簡単に操る方法を自作してきましたが、その延長において、このAppSheetのデータベース機能が加わると、もうほんとに、大袈裟に言えば、自宅のパソコンで手軽に、本格的な情報処理システムが出来てしまう。そんな気がしてきます。

一番最初に作っておくこと。

　旅に出る時、必要なものを予めリュックに詰め込めたら、とても安心できます。しかし、後になってから元に戻って、新しい要素を突っ込むのは、実に困難です。その意味で、以下で解説する「年号アプリ」は、ITに旅があるとすれば、旅の必携品の一つではないかと思います。

余談ですが、このデータベースアプリAppSheetを体験すると、おそらく多くの人が、「だから経験者は強いんだ。経験者から学ぶべきなのだ。」と、このことに気付くはずです。「先輩が言っていたのはこのことだったのか。」と。ん〜、だから、AppSheetのような類は、時代に合っています。教材にはうってつけでしょう。

ポイント解説

年号アプリを作る手順を解説します。

＜1＞ Googleスプレッドシートで年号ファイルを作る。

最初に以下のように、シート名を「年号」、項目に「ID年号」「和暦」「西暦」を作ります。

＜2＞AppSheetで年号をメンテナンスするアプリを作る。

さて次に、Googleスプシへ、データを書き込んでいきます。この時、AppSheetを使うようにします。AppSheetはGoogleから無料で使えるデータベース開発アプリですが、Googleアカウントを持っていれば、誰でも無料で使えます。Googleスプシのメニューの「拡張機能」の中にあるAppSheetを使います。

肝心なことを言い忘れていました。AppSheetはまだ英語のままです。とはいえ、それほど難しい英語ではありませんので、慣れると思います。ここでは解説は割愛しますが、YouTubeを紹介します。

＜3＞和暦西暦を登録する。

上のYouTubeの例は、植物の登録ですが、今回は、和暦と西暦を画面から打ち込む、という作業になります。「UX」でformを選択すると、以下のような入力画面が作れます。

Gooogleスプシには以下のようにデータが入ります。「ID年号」には乱数が入っていますが、これは項目名の先頭にIDを入れて「IDxxxx」と名前を付けると、初期値(INITIAL VALUE)に<< UNIQUEID() >>が自動的に入って、乱数が自動的に生成されます。このようにランダム生成される「ID年号」をKEYにする理由ですが、一つの西暦の中に複数の和暦が存在するからです。例えば、2019年には平成31と令和1が存在します。古く飛鳥時代は、複数の和暦だらけです。

余談ですが、履歴書を書く場合は、令和1年ではなく令和元年と書く方が正式だそうです。今回のデータベースはどちらにしましょうか。後から変えることができますので、とりあえず<< 令和1>>と数字で書くことにしておきます。

６行目が空欄になっていますが、これはformからデータを「削除」しています。

さて、こうして、和暦西暦データを登録していきますが、たまたま私は、令和4年から遡るように入れたので、先頭に令和4が来ています。というか逆に、古い方から入れたら「大化1=645」から入れることになります（ま、いずれやってみます)。ともかく、この後、令和5以降を入れた場合、一番下の行に追加されることになります。つまり、もし、このままのデータ順で年号を選ぶと、選択肢の一番下に令和5が来ることになり、とても面倒です。

＜4＞Googleスプレッドシート２番目のシート、例えば「西暦SORT年号」シートを作る。

そこで私の考えた簡単な方法です。まず、適当な名前をつけた、例えば「西暦SORT年号」シートを追加します。

＜5＞「西暦SORT年号」シートにquery関数を埋め込む。

以下の関数をA1カラムに書き込みます。空白行を飛ばしてC列の降順（大きいものが先頭に来る)に並び替える関数です。ちなみに、昇順にするには<< asc >>にします。

=query('年号'!A:C,"select * where C is not null order by C desc")

すると、一番下の行にある「令和5」は一番大きい西暦なので、先頭に来ます。

＜６＞AppSheetで利用する〜参照はRead-Onlyで。

年号のメンテナンスは、「年号」シートへ　<< Updates Adds Deletes >>で行い、利用する時は、「西暦SORT年号」シートから<< Read-Only >>で利用します。AppSheetの「Columns」設定でKEYを「ID年号」、LABELを「和暦」にします。そうすることにより、以下のように、令和5が先頭に来た選択リストを表示することができます。

また、和暦の生年月から現在の年齢を計算する時、和暦間の年数を計算する時、対応する西暦がすぐ参照できるので、非常に便利です。

今回の方法を元にSORTカラムを設定してメンテすれば、様々な選択リストにおいて、任意に並び替えができますので応用ください。

＜7＞スムーズに使うちょっとしたコツ。

２つほど紹介します。

１つ目は、上記の例ですが、選択リスト表示をした時、変な順番で表示される時は、GoogleSSを開いて、シートの内容を確認して、また閉じる、あるいはブラウザの閲覧履歴を削除する、すると大抵は直るのではないでしょうか。

２つ目は、作ったAppSheetアプリですが、私は個人または数人の利用の範囲ですのでデプロイしません。View表示した時のURLをそのまま、ブラウザのお気に入りにブックマークします。コピーしたURLの中に、SORTほかいくつかの命令が含まれたままになっていると、(モバイル、タブレットは問題ないですが）、PC表示にした際、古い動作がそのまま残ってしまいます。

例えばURLが以下の場合は、

https://www.appsheet.com/start/aaaaaaaaaaa#appName=bbbbbbbbbbbbb
&group=~~&sort=~~~&~~~&~~~&view=cccccc

以下のように&view=のみにする。

https://www.appsheet.com/start/aaaaaaaaaaa#appName=bbbbbbbbbbbbb
&view=cccccc

こうすると、PC(WinMac)、モバイル、タブレット、の動作が同じになります。

＜８＞余談

そんなことしなくても、EXCELの「セルの書式設定」の中に、西暦を和暦に変換してくれる機能があるじゃないですか。

とおっしゃる方がいると思います。

しかしそれは近視眼ではありませんか？

EXCELは明治33年=1900年以降しか変換できません。試しに645年を入れても「大化」とは出てきません。

それでは困りますよね？

え！困らない。。。

まあ。。正直言って、和暦は。

無くても困りません。

無くても、世界どこにいても、日本の中でも、困るということはありません。

ただ言わば、日本の長い歴史を証する日本語の文字列、ある種DNA配列のようなものです。困らないけど大事なんですね。

だから、明治33年以降しか出ません。というのでは、この投稿の目的から外れます。

えっちらおっちら、表にしてみましょうか。。。

以上

＜通知の仕組みを作る　STEP1: 通知文作成＞
別ページで表示

はじめに

緊急通知を、迅速に自治会会員、地元住民、住民へ送りたい。というニーズがあります。

通知手段は、何らかの障害により遮断されるリスクを分散させる意味から、会員が選べるように、理想的には会員が望む方法に合わせて送れるように、複数のルートを確保しておくこと、すぐに新しいルートを設置できること、が望ましいです。

中小規模の自治会は、予算も小さく、役員も数年以内には交替します。滅多に使われない緊急通知、そう、滅多に使わないのは平和の証拠でとてもいいこと。そうしたことに、お金を掛けることは、なかなか承認してもらえないでしょう。

取り掛かりは、無料の形で始めることにします。あったほうがいい、あるべきだ、という声が高まったら、次は、予算を出してもらえるかも知れません。

それでは、STEP1は、通知文を作成するところから始めます。

ポイント解説

<1> 緊急通知を、スマホから送りたい。

もし自分が家にいてパソコンに触れる環境なら、メール、LINE、Push7、ブログ投稿はすべて、それぞれのアプリを開いて、基本の文をどこかに書いて、それをコピペしながら、送信することは、それほど大変なことではないと私は感じます。しかし、ITに興味のないふつうの人でしたら、怒り出すかも知れません。もっと簡単にしてくれと。

しかも、突然来るのが、緊急通知たる所以。これを会員に通知してくれ、という指示がきた時、私は外出しているかも知れません。

あるいは、停電するかも知れません。

だから基本的に、スマホで操作できる状態にしておきたいです。

しかしスマホから、この４つの通知手段の画面に打ち込む、それぞれバラバラの画面に、コピペしてあれこれ操作、これは、眼も疲れるし、指の動きも細かくて間違えるし、焦るし、曲芸といっていいです。私もお手上げです。

そこで選んだのがGoogleフォーム。これならなんとか、スマホから、文字入力が出来ます。（文字入力はiPhoneだと「メモ」アプリが一番書きやすい。ここからGoogleフォームへコピペするのが扱い易い。）

Googleフォームは、取得データをGoogleSSへ格納するという画期的な仕組みにより瞬時にグラフや分析が行われる優れものです。しかし、今回、最も単純な、通知文のタイトルと中身を記入する、それをそのまま発信に結びつける。ただそれだけ。なんでこんな簡単なことができないのか。と悩んでしまった。。

Googleフォームの作り方の紹介は省略します。

とにかくGoogleフォームで送信すると、最新データが次々と、下の行に転記されていくわけです。この一番下の行をどうやって引出したらいいのか。テーブルのA列から最新の日付時刻つまり最大値の行番号を見つけて、B、C、Dの列番2,3,4を与えて、表引きを行おう。

と最初考えたが実に面倒。

そのうち閃いた！

<2>欲しい行を取り出すのは、あまりにも簡単だった！！

「なんだ。すぐここに転がっているじゃないか。」という感じでした。

sheet1のこの表を、sheet2にコピーする。そのとき、A列の降順で全体を並び替えで、表を書き込む。そうすれば、一番上の行、つまりGoogleSSの関数に従うと、2行目。

常に２行目に来るわけです。

やったことは、sheet2を作りそのA列１行目へ

=query(sheet1!A:D,"select * where A is not null order by A desc")

を入れるだけです。

ちなみに、< where A is not null >は、降順(desc)の時は不要ですが、昇順(asc)の時は、空白の行が最上行に来るために必要です。どちらでも問題ないように常に入れておけばいいです。* は、掛け算の意味ではなく、全ての列、の意味です。

<3> 入力フォームは、AppSheetのアドオンを使った

実はGoogleフォームの入力は、GoogleSSのデータを、追加、修正、削除するのには向いていない、スマホの表示が不格好、といった問題点がありましたが、AppSheetをGoogleフォームにアドオンすることにより、非常に使いやすくなりました。

さて、STEP2以降では、ここで作られた通知文を、電子メール、LINE、Push7、ブログ投稿、といった４つの方法で配信する仕組みを作ります。ポイントは、これらの４つのアプリを直接に手を触れることなく、一つの標準化した方法で行います。それではSTEP2では、Googleグループメール配信する方法について説明します。

STEP2

以上。