■PWA
https://digital-marketing.jp/seo/what-is-progressive-web-apps/
https://developers.google.com/web/fundamentals/architecture/app-shell?hl=ja
https://qiita.com/kimamula/items/4e25b8d2caca314f9dd2
Service Worker, App Shell Model, PRPL Petternなどを駆使したGoogleが提唱するProgressive Web Apps
HTML / JS / CSS だけでほぼ構成、モバイルApp的なWebが提供できる
SW(JS)がブラウザとサーバの間に位置し、データを取ったり渡したりブラウザの影/裏側で動く、サーバと考えてしまうと分かり易い？
App Shell Modelで側（画面テンプレート）をプッシュしておくと早い（JSレスポンス悪すぎるからコレってな)

PRPLは以下の略
　Push: 最初のURLルートに不可欠なリソースを Pushする。
　Render: 最初のルートを Renderする。
　Pre-cache: 残りのルートをPre-cache（事前キャッシュ）する。
　Lazy-load: オンデマンドで残りのルートをLazy-load（遅延読み込み）する。
/// Service Worker
訪問がない状態でのバックグラウンド同期、プッシュメッセージ
データの更新を集中的に受信して複数ページがデータの一部を利用
https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API
https://qiita.com/kei4eva4/items/fa5f99211e45b7ca6f6e

Webページとは別にバックグランドで実行するスクリプト
ブラウザでキャッシュ操作ができる、容量もあり強力、データ期限や破棄に注意
　DOMに直接アクセスできない
　ブラウザを開いていなくても動作可能
　プログラム可能なネットワークプロキシとして動作可能
　HTTPS必須（またはlocalhost）
ネットワークに依存しない、早い（阿部寛はもっと早い）、プッシュ通信、ホームに追加
　
/// プッシュ配信
https://liskul.com/push-notification-25520
https://www.fenrir-inc.com/jp/boltzengine/
https://pushnate.com/labs/pushnate/webpush-case-guide

事前のコンセントがなくいきなり「プッシュ通知を有効にしますか」と出てくるのは駄目
ユーザーに何の通知をするかを知らせたい
通知から訪れたときの表示と挙動を決めておく
セグメントを分けて送りたい場合はセグメントの情報をどうやってブラウザからたどってくるか
スマホではアプリのインストールが必要だが、Webプッシュはブラウザさえあれば通知ができる
https://webtan.impress.co.jp/e/2018/12/06/31214
通知の許可のダイアログを出す前にダイアログで説明
https://push.appirits.com/webpush/

過去評価の高かったボケが、1日1つプッシュ通知で配信
１日１回、時間帯としては「20時前後」に4回に分けて（通常19:50、20:00、20:10、20:20）配信
年末年始やGWだけは、昼と夜に（1日2回）
DAUに15〜20％くらい影響がでます。「プッシュしないとアプリを開かない人」が一定数いる
アクティブ度、アプリのバージョン、端末のOS、属性（男女）などで、セグメント配信
休眠ユーザーだけにプッシュ1万人に1人くらい（0.01％）しか起動せず難しい
https://appmarketinglabo.net/bokete-push/

配信方法は現在ではChromはGCMを、FirefoxはSimplePushサーバを利用←他の方法も調査中
　受信する端末ごとに異なるメッセージを送るにはGoogle Firebaseが使われる様である
　https://android.googleapis.com/gcm/send　https://updates.push.services.mozilla.com/push/
その許可を得たプッシュのエンドポイントを使用し配信
GCMの場合1度の送信で1000デバイスまで同時に指定できる、FirefoxのSimplePushでは1デバイスでの送信
デスクトップ/Webの場合はデスクトップに通知される（Win10の場合？Win7でも通知が来る）
https://qiita.com/zaru/items/f6e821052abb1b18bb0b
https://techblog.asahi-net.co.jp/entry/2018/09/28/173705

/// 結局
キャッシュを弄くってオフラインでもゴニョゴニョできる、先読みも可、プッシュ通知も可、モバイルAppぽく
　→G suiteのOfficeアプリがオフラインでもサクサク、メール受信通知もできるGoogleのG suite用みたいなもんか
　→PCよりスマホを売りたい、通信量でも儲けたいｆｂｇｃｐ、個人情報を取りたいので、モバイル優先、モバイルっぽくWeb、これはi-modeやね

UR evil.

■どのようにPWA化するのか
https://techblog.asahi-net.co.jp/entry/2018/07/06/145931
https://techblog.asahi-net.co.jp/entry/2018/08/10/175407
　1)Service Worker(PWAで必要な処理を記述するJavaScriptファイル)
　2)Manifest(PWAの仕様について記述するJSONファイル)
　3)アイコン…ショートカットアイコン、プッシュ通知時のアイコンや起動画面で配置する画像

navigator.serviceWorker.register('/servicew.js').then　JSファイルを登録（中に下記を入れ込む）
　//キャッシュ動作部分
　├addEventListener('install'　キャッシュのインストール
　├addEventListener('activate' アクティベート
　└addEventListener('fetch'　オフラインでもアクセスの際にクライアントが呼んでキャッシュ取得
　//通知部分
　├addEventListener('push で通知を受ける
　└addEventListener("notificationclick　で通知クリック時の挙動
Notification.requestPermission(function(status) {　通知許可は登録JS外でOK

キャッシュはリンク先も保持するようであるが、、、？
ブラウザのURLの鍵アイコンをクリックすると通知許可を含めて設定ができる（デフォルトの確認、許可、ブロック）
　デフォルトとブロックの時は「Push通知On」のボタンを表示　→　ボタンを押すとダイアログで何が通知されるか表示しOKボタンを押せる
　許可状態のときは「Push通知Off」のアイコンを表示
　キャッシュ優先のsw.jsだと更新ボタンでもキャッシュのまま、Cookieの中のサービスワーカーを削除

Service Workerキャッシュ戦略＞保存日はLocalstrageに置き、HTMLの有効期限は1日にする
https://qiita.com/tiwu_official/items/47e8a7c3e6f2d57816d7

https://techblog.asahi-net.co.jp/entry/2018/09/28/173705
受信する端末ごとに異なるメッセージを送るにはGoogle Firebaseが使われる様である

　トークンを発行し端末とトークンを紐付け配信サーバに記録
　配信サーバでメッセージを作り、個別トークンに対しメッセージ通知
　　JSONを送るがトークンを持っているもののみ通知が発火？

Notifications APIを見てみよう
https://developer.mozilla.org/ja/docs/WebAPI/Using_Web_Notifications
https://developer.mozilla.org/ja/docs/Web/API/Push_API
https://developer.mozilla.org/ja/docs/Web/API/ServiceWorkerRegistration/pushManager

通知自体はServiceWorkerが不要、下記2ステップでOK
　Notification.requestPermission(function(status) {　許可を取り
　var n = new Notification(theTitle,options);　通知を送る

カレンダーをサブカレンダー(o)化しPWAでオフライン対応（機内モード）
　キャッシュするよう指定しても全部一気にはオフライン化はしないようだ
　　一度オフライン時にアクセスしエラーが出た上、ネットワークが回復すると自動にキャッシュされる
　　　エラーを出さずに一度通常表示をするだけではキャッシュされなかった
　　　アンドオイドでは通知も来る(1:準備ができるとChromeでページが読み込まれます→2:ページを表示できます)
　　→スマホではDLに時間が掛かっていただけかも
　ServiceWorker内ではLocalStorageはセキュリティを理由らしいが使えない
　　IndexedDBは使えるらしいが、、、→使えんかった、よく分らん
　SWをインスコしたディレクトリへのアクセスでSWが動く？、SWJSへのアクセスではないか
　PHPでJSを吐いてもOK　js_serviceworker.phpとかでheaderをJavascriptとして

/// mmm
キャッシュが強い（指定以外もキャッシュ、手動でCookie/Serviceworker削除）
　どの範囲をキャッシュするか、キャッシュページの案内方法(お気に入りに入れる？)
サイトページを開いてなくても通知を出すのはServiceworkerいるので要調査(Firebase以外でやりたい)

https://twitter.com/ayapan94/status/1249703657639047168
純銅削りだしアシストフック（つり革触らない）


https://twitter.com/hideki0103/status/1249702599344840705
ハイジーンハンド

ボタンやノブを触りたないやろ～、つり革もスマホも～

----------
カッパ寿司食べ放題に行ってきた
回転寿司どれ位食べれるか知りたがったが30皿が精一杯だな
数皿のセットリストからのアンコール+α皿で酢飯を抑えるんだなも

ピケティ『21世紀の資本』たまむすび
https://miyearnzzlabo.com/archives/63853

ニューディール政策で金持ちに税金　第二次世界大戦の時には90％に
1960年ぐらいまでいろんな形でずっと再分配して「中流」というものが生まれた

フォードは共産主義が嫌いだった、一般の給料の2倍以上にし
労働者を中流にすることで、余裕を持って車を買う消費者にした

1980年ぐらいまで日本って金持ちに対する税金は最高で75％だった
大企業に対しては法人税は50％だった
だから、日本は1970年ぐらいに「1億総中流」って言われた
2006年以降長者番付は発表されてない

金持ちばかりが金持ちになって、貧乏人にはいつまでたっても貧乏のまま
強制的に国が法律でそれを平等にするように力をかけなければ絶対に中流は生まれない
富の再分配をするしかない

モノポリーって大恐慌の時に破産した人が作ったゲーム
起業家が暴走して勝手なことをやり続けると完全な独裁になってその人以外の経済活動が全部潰されてしまう

倍の差をつけたらどうなるか？っていう実験をこの映画の中ではする
最初からどんどんどんどん物件を買える人と全然買えない人に分かれる　絶対に逆転が起こらない
で、逆転が起こらない状態でゲームをしている人はどうなるかっていうと、
最初から倍のお金をもらった人が、最初からお金をもらっていなかった人をバカにするようになる
サディスティックにいろんな不動産とかを買って、最初にお金を持ってなかった人を追い詰めていくような態度を取る

3年間にダウ平均1.5倍ぐらい　1億円を持っている人はそれが1億5000万円になっている
1億円を持っている人は何もしなくても、年収が1600万円
-----------
貯蓄は善行、投資も善行とすると→金融や不労所得自体は悪ではない？
大企業も金融や投資で利益を上げる、周りがやっていると参加せざるを得ない
何が駄目か→格差が駄目である、適切に再分配　本業回帰

-----------
ニューディール政策
国家が市場を統制して人々を保護し、また公共事業を積極的に推進して雇用を創出
「金本位制」を停止　政府が通貨を発行する「管理通貨制度」
預金者を保護するための「連邦預金保険公社」の設立
銀行を安定して経営するために証券と分離させる「グラス・スティーガル法」
「農業調整法（AAA）」を制定　農業生産量を政府が管理
「ワグナー法」を制定し、労働者の「団結権」「団体交渉権」「ストライキ権」
市場原理を重視する大企業などの反発
後世の研究者たちからも、不況脱出の決め手とはならなかったという指摘がある
世界恐慌前の水準を超える決定打となったのは、アメリカの第二次世界大戦への参戦と

Gridは悪名高いテーブルレイアウトと考え方がまるで同じ
CSSの方が糞であったであろう、テーブルこそが発明でしょうに、セマンティック？
containerにdisplay: grid か flex か table を指定するので直接の要素には混在不可、入れ子なら可
https://ics.media/entry/15921/

■CSS grid
https://qiita.com/kura07/items/e633b35e33e43240d363
https://qiita.com/kura07/items/486c19045aab8090d6d9
 ページ全体のレイアウト、グリッドレイアウト
 コンテナを作り、グリッドに名前を付けて、割り当てる
 <section class="container">
  <div class="visual">（メインビジュアル）</div>
  <div class="number">（数字）</div>
  <div class="expression">（テキスト）</div>
  <div class="other">（３枚の写真）</div>
 </section>

 .container {
  display: grid;

  grid-template:
   "visual number expression" 1fr
   "visual other other" 220px /
   40% 120px 1fr;
 }

 .visual {
  grid-area: visual;
 }

 @media (max-width: 800px) {
  .container {
   grid-template:
   "visual visual" 100vw
   "number expression" 1fr
   "other other" auto /
   120px 1fr
  }
 }

■Flexbox
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
https://qiita.com/junya/items/7762da8052d86462f232
 縦横揃え、可変サイズ、でも複数配置が駄目、1行の並び
  justify-content
  align-items
  flex-grow
  flex-shrink

 .container {
  display: flex;
  justify-content: center;
  align-items: center;
 }

■display: table / display: table-cell
https://techacademy.jp/magazine/19415
https://app.codegrid.net/entry/css-table-1
https://www.yoheim.net/blog.php?q=20150102
https://nxpg.net/blog/tech/?p=10764
CSSのvertical-alignが効かない縦並び（display:gridの中にdisplay:tableの中にdisplay:table-cell）
#container{
 display: grid;
 grid-template-rows: 25px 1fr;
 grid-template-columns: 300px 1fr 200px;
}
#column_right{
   grid-row: 2;
 grid-column: 3 / 4;
 display: table;
}
#area{
 background-color: #eee;
 width: 150px;
 height: 150px;
 text-align: center;
 display: table-cell;
 vertical-align: middle;
}
<div id="container">
  <div id="navi_left">...</div><div id="navi_right">...</div>
  <div id="contents">...</div><div id="area">...</div>
</div>

■Float
 テキストの回りこみ
 .leftBox {
     width: 45%;
     float: left;
 }

Floatレイアウト
https://www.bangboo.com/cms/blog/page_18.html
Padding/Float/Height100%の問題
https://www.bangboo.com/cms/blog/page_184.html

■object-fi
 画像の比率
 img {
  object-fit: cover;
 }
 .image1 {
  object-position: 30% 40%;
 }

■その他
spanタグにline-heightを設定しても行間は設定できない、display:block;を追加するか親で設定する
ボックス要素のセンタリング（中のテキストは左寄せ）
　<div style="width:500px"><div style="text-align:left; display:inline-block;">
　https://qiita.com/KAMEch/items/b52c5e23212b8fef81a7
　https://www.granfairs.com/blog/staff/centering-by-css


2019見直したいCSS,Javascript
https://speakerdeck.com/tonkotsuboy_com/2019nian-madenijian-zhi-siteokitai-cssjavascriptfalseshou-fa

BRF BANGBOO

/// Service Worker
訪問がない状態でのバックグラウンド同期、プッシュメッセージ
データの更新を集中的に受信して複数ページがデータの一部を利用
https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API
　→下記PWAで詳しく

/// Fetch API
jsのXMLHttpRequestに変わる非同期通信の手段、ServiceWorkerで使われる

/// Beacon API
window.onunload/window閉じる際に非同期HTTP通信を確実実行するAPI
統計情報等

■PWA
Progressive Web Apps
https://www.bangboo.com/cms/blog/page_333.html


■ユーザーエージェント（UA）凍結・非推奨
https://forest.watch.impress.co.jp/docs/serial/yajiuma/1229968.html
https://anond.hatelabo.jp/20200120125002

■文化を屠殺する
https://b.hatena.ne.jp/entry/s/anond.hatelabo.jp/20200311165317

■堕落したウェブはまだ直せる
https://japan.cnet.com/article/35133798/

表示はHTMLでやり、処理はサーバー側でやる
表示はメディアであり、処理はコンピューティング、そういうタイプで

==========