■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
https://html5experts.jp/osamum_ms/25709/
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
　→正確にはバックグラウンド同期では無い＞periodic background syncはユーザに粘着可で無くなりそう
　Periodic Background Sync 及び Web を Install するということ | blog.jxck.io
　スコープへアクセスがあった場合にキャッシュの更新はできる、あるいは
　syncをオフ時に仕込んでおけばオンライン時にバックグラウンド同期は可能
　beacon apiを実行させると離脱時にサーバに通信も可能

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
　ここにブラウザのベンダーの提供サービスを通じてとある（モバイルはコレしか）
　サーバーからブラウザを通じてデスクトップ通知する方法（Push API を利用） – ラボラジアン (laboradian.com)

/// 結局
キャッシュを弄くってオフラインでもゴニョゴニョできる、先読みも可、プッシュ通知も可、モバイル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キャッシュ戦略＞保存日はindexedbに置き、HTMLの有効期限は1日にする
　※参考まで、なおindexeddbは永続データで大きくなりすぎたら使用に応じて自動的に削られる仕様だったかと
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

モバイルでなくPCへの通知自体はServiceWorkerが不要、下記2ステップでOK（ブラウザに許可を入れるのが必要）
　Notification.requestPermission(function(status) {　許可を取り
　var n = new Notification(theTitle,options);　通知を送る

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

https://webtan.impress.co.jp/e/2019/08/26/33636
JavaScriptを使えば、ページをリロードせずにブラウザのURLバーの内容を変更できるのでSPAでも戻るが使える
history.pushState(null, "Page 2", "/page2.html");
https://webtan.impress.co.jp/e/2019/09/02/33637
Fetch APIを使用してリクエストをハイジャックしたりレスポンスを変更または改ざん出来る
https://qiita.com/propella/items/6500f76c9c1521878a6b
https://developers.google.com/web/fundamentals/primers/service-workers?hl=ja
SWが分かりやすい
ServiceWorker, Cache API を使用して 4万件のアセット永続化を試した話 | 株式会社ノックノート (knocknote.co.jp)

キャッシュを解析してどれ位まで保持してるか、URL等々も確認もできる
　if(status ==200 && ok){ //okはtrue/falseが入るが文字にはなれずboolean
キャッシュ削除もできるが、Indexeddbで管理をするし、SW1発目ではインスコだけで動作しない等で扱いは手間

Sync(まだ非標準)
通信がオフからオンに変わった時点で発火。バックグラウンドで何かを実施する、indexeddbにデータを貯めオンでサーバに送る等を行う
https://qiita.com/horo/items/28bc624b8a26ffa09621
Periodic background syncはメールクライアントの受信ボックス更新のように、バックグラウンドで定期的にタスクを実行
ユーザのIPを定期的に確認しトラックできる安全性、バッテリやリソースやギガ消費などの問題がある
AddtoHomeやサイトエンゲージメントが高いや普段使いのネットワーク等で発火が判断される
https://blog.jxck.io/entries/2020-04-23/periodic-background-sync.html

WORKBOX(google)のsyncは仕様が違う？分からん
エクスポネンシャルバックオフ(補足: 最大再試行回数に達するまで、指数関数的に増加する待機時間で操作を再試行する手法 – 1秒、2秒、4秒、8秒、16秒...とシステムに負担をかけない)を採用
syncイベントはユーザがアプリケーションから離れた時にも送られます
テスト時はインターネットを遮断するか(オフライン)、ウェブサーバーを落としてください。Chrome DevToolのOfflineモードは使用しないでください！Devtoolのofflineチェックボックスはページからのリクエストのみに影響があります。サービスワーカーのリクエストは成功してしまいます

/// 開発上の注意
FetchAPIは404や500エラーをthenで受け取れない
　JS送り側＞サーバ側＞JS受け　と丁寧に開発を
　　SWからDOMは弄れない→sync全体描画やpostMessageやnew Responseの検討？
JSONの値はダブルコーテーションで括る必要がある
　header("Content-type: application/json; charset=UTF-8");
　echo '{ "response": "no data" }';
JSONでレコード数がある場合は[]で括る必要がある
　echo '[{ "response": "1" },{ "response": "2" }';
PHPではPOSTデータを$_POSTで受け取れるのは「application/x-www-form-urlencoded」又は「multipart/form-data」のみ
　file_get_contents('php://input')で受け取る
　$contents = json_decode(file_get_contents('php://input'), true);
モバイルだとhttp://でアクセスしているかどうか分かりにくいが、https://でしか動作しない

/// mmm
キャッシュが強い（失敗すれば手動でCookie/Serviceworker削除、くせ強でユーザに古いページを見せ続けるかも）
　どの範囲をキャッシュするか、キャッシュページの案内方法(お気に入りに入れる？)をどうするか
　SinglePageAppなら枠だけキャッシュさせて後は外部JSでいけるが
　　工夫を考える：転送、外部JS、IFRAME、AJAX、サーバサイド、Refer、new Response等々

データもキャッシュする場合は2パターンかな、Pros cons、データをIndexeddbに持つ形ならモバイルApp的SinglePageApp的
┏online
┃1)DLしたキャッシュを表示（最新情報が届かない、だが何をキャッシュしているか分かる、サブサイト化でバックアップ用途）
┃　普段使わないとキャッシュ更新を忘れる、SWがDL中のものを反映し表示するのに時間が掛かる（時々転送やIFRAME系でDL？）
┃2)最新を表示、裏でDLを実施（最新を表示しているので通常利用できる、DL頻度を下げたりProxy/キャッシュで動作が分からないところがある？）
┃　何をキャッシュしているか不明、（バックアップサイトを持たず一体で便利だが、頻繁にキャッシュ全更新しがち、動作不明なことがある）
┗offline
　キャッシュを表示

Notification API(デスクトップ通知)
デスクトップ通知スケジューラー (bangboo.com)
Cache API(スケジュールのオフライン化)
https://pimpub.jpn.org/aaaaaa/o/install.php
Service worker API - Sync(バックグラウンド同期)
オフライン予約システム (bangboo.com)

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


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

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

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

焼肉ライクに行ってきた
一人専用だが狭い、火4で焼き火2で喰うを繰り返す感じか
17時まではご飯お代わり君だった、タレはあっさりで良いが
安いヤツだったが割高か、人気のヤツはどうなのか？

ピケティ『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-fit
 画像の比率
 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

リストのマーカの位置に迷った
ulのpadding-leftが外側からマーカの右側迄の距離で15pxとかは必要
liのpadding-leftはマーカの右からから先頭文字までの距離で0px等で良い
https://maku77.github.io/web/layout/list-margin.html

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でやり、処理はサーバー側でやる
表示はメディアであり、処理はコンピューティング、そういうタイプで

==========

無料でクラウドを喰らう
AWS https://aws.amazon.com/jp/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc
GCP https://cloud.google.com/free/docs/gcp-free-tier?hl=ja
Azure https://azure.microsoft.com/ja-jp/free/
あくまでインフラだな、ソフトウェアレイヤーの人は自分でやる必要あるのか？マネジドでリソースが足りてると余計

=================================
■AWS
VPC（仮想Privateクラウド)＞ELB（ロードバランサ)＞EC2（仮想サーバ）x2＞ElastiCache（インメモリ）＞RDS（RDBZ）＞S3（ストレージ）＞Redshift（分析）
　EC2は機能毎、S3は変換前とRedshift変換後の前後、Rout53でラウンドロビン、動画配信、SageMaker/Deep learning ami

■ユーザ管理、セキュリティ
https://www.tdi.co.jp/miso/aws-day1-security-1
https://qiita.com/14kw/items/07d693a072ae0e99cf34
https://www.ashisuto.co.jp/security_blog/article/201902-aws.html

///ログイン
https://aws.amazon.com/jp/
チュート　https://aws.amazon.com/jp/getting-started/tutorials/

///MFAの設定
Google 認証システムをモバイルにインスコ
モバイルに出た6桁を入力、30s後にでる6桁を入力（エラーなら削除しQR読み直してやりおなす）

///EC2
キーunco.pemでインスタンスを作成
ロードバランサーyarichinの設定

///その他
RDSのDBインスタンスyoshiwaraを作成 （ID:chinco/kintama）
ElastiCacheのインスタンスformsof48を作成
S3のインスタンスomekoを作成

■無料でやりたいが足がでるのでは
https://www.ryotaku.com/entry/2019/03/12/172937
https://dev.classmethod.jp/cloud/aws/overall-summary-about-aws-free-tier/
↓
各サービスで有料等があるので要注意、1ヶ月750時間、複数インスタンス、ElasticIP割り当て、ビリング確認、予算、アラート通知

■AI Tensorflow は？
https://aws.amazon.com/jp/tensorflow/
https://aws.amazon.com/jp/machine-learning/
https://aws.amazon.com/jp/machine-learning/amis/
SageMaker/Deep learning ami？無料じゃむりそう

=================================
■GCP
https://www.bangboo.com/cms/blog/page_347.html

=================================
■Azure
12 か月間 最初の30日間¥22,500分
https://portal.azure.com
ホーム＞無料使用版＞取り消し


ロードバランサの自動セッション維持（クッキー、URL、HTTPヘッダー）の具合を見たかったが、
https://www.fujitsu.com/jp/products/network/security-bandwidth-control-load-balancer/ipcom/material/data/1/2.html


大体の設計をして設定を詰めていく流れでいいのかね、使いたいサービス重点で
きちんと動けば気持ちいいかな、箱庭的な雰囲気もある

■ラズパイ入手
http://akizukidenshi.com/catalog/c/craspi/
https://www.switch-science.com/

Raspberry Pi 3B+（ネッがト実用になっている）元々$35だが日本では6000円弱位でしか買えない
Raspberry Pi Zero WH（ピンヘッダー有、有線LAN無）
Raspberry Pi 4B（3B+がもう手に入らない、1G/2G/4Gメモリの種類有り）

3B+と3Bとの違いはネットワーク系が早い/PoE
3B+では2.5A以上が必須、4Bは3A以上、通常スマホの充電器は1A/タブレットは2Aのモノがほとんど
ファン欲しい　CPU60℃位にはなる様、ヒートシンクは-2℃位の寄与
4Bのメモリは1Gでも十分だがモニタを使うとメモリ喰う、VNCだが。2000円位高いが1台目は4Gだと潰しが利く
　miniHDMI、USB-C電源に変わった

ACアダプタ 3A　1000円
microSD（相性あり、8-32GB、Class10、PanaのフォーマッタでFAT32） transcend32G 800円
ヒートシンク銅製　PCCOOLER RHS-03-BRK 13x13を2個で250円
ケース（4と3B+の互換はない）、ファン

キットで買うと安い
　GPIOケーブル、T型GPIO拡張ボード
　ブレッドボード
　ジャンパーワイヤー
　ワニ口クリップ
　モジュールセンサー
　ブザー、簡易ディスプレイ

パイソンのサンプルコード、チュートリアル付きキットがいい
RABホルダーも欲しい、ブレッドボード複数持ちで機能毎に保存すると良い

別で買う必要がありそう
　赤外線カメラ、人感、振動、ジャイロ、加速度、距離、GNSS（GPS）、ドップラー

■先人の足跡を調べよう（センサー/モジュール次第か）
ドライブレコーダ、車防犯カメラ（録画8hrs）、自動録画/消去
360度録画、画像を解析しエラー検出
進入警報（ログ、写真、メール）
WifiやBTで遠隔ラジコン
温度制御（一定の温度で扇風機をOn等）
赤外線でリモコンをハック
IOを音声で
生体ハック（眠気防止等）
　サーバ型：テキスト解析気分解析、メディアサーバ

■セットアップ
https://www.fabshop.jp/raspberrypi/pisettings-2/
https://raspida.com/rpi-setupwizard2019
https://pcmanabu.com/raspberry-pi-debut/
↓

SDメモリカードフォーマッター （Windows/Mac用）でフォーマット、FAT32
https://www.sdcard.org/jp/downloads/formatter/index.html

Raspbian Buster with desktop and recommended software をDL
https://www.raspberrypi.org/downloads/raspbian/

Etcherはでラズパイで使うOSのイメージをSDカードに焼く、ポータブル版でOK
https://www.balena.io/etcher/

起動はUSB-C電源をぶち込むだけ、モニタ側はHDMI1に切り替え（miniHDMI変換が硬いが奥まで挿す）
　USBキーボード／マウス／LANケーブルも初期設定には必要、セットアップが済めば電源USB-Cのみ
PW／ロケール設定、Wifiを聞いてくる（PiのMacアドレスを言ってもらいたいが、、
　ターミナルで ifconfig　→Piに右上メニュでWifi pw(share key)、ルータにPi Macアドレス　を設定
日本語にしてアップデートを掛けるとメニュー等が日本語になる
ラズパイ設定でSSHとVNCを有効にする（SSHのセキュリティ設定が面倒な場合はSSHは使わない）
　IPアドレス（右上のVNCアイコンをクリックで分かる）、あるいは　raspberrypi.local
　SSHコマンド　ssh pi@IPアドレス　あるいは　ssh pi@raspberrypi.local
VNCはReal VNCのスタンドアローン64ビューワーでいいのでは　https://www.realvnc.com/en/connect/download/viewer/

HDMIを繋げているとリモートできるが繋がないとできない？
　電源投入後LEDの点滅が消えたあたりでデスクトップは起動しているが
　　解像度が設定されていない為、モニタが検出されておらずGUIが起動していない為
　sudo raspi-config　で設定をする その1
　　3 Boot Options Configure options for start-up を選択
　　B1 Desktop /CLI Choose whether to boot into a desktop enviroment or the command line を選択
　　B3 Desktop Autologin Desktop GUI, requiring user to login を選択
　sudo raspi-config　で設定をする その2
　　7 Advanced Operations を選択
　　A5 Resolution を選択
　　DMT Mode 51 1600x1200 60Mhz 4:3 を選択

■セキュリティ設定
https://qrunch.net/@nokonoko1203/entries/DIek2g0AhGRDkGDZ
https://qiita.com/mochifuture/items/00ca8cdf74c170e3e6c6
https://makezine.jp/blog/2017/09/secure-your-raspberry-pi-against-attackers.html
↓

平時繋ぐLANは一般の人は入れないが、それ以外のLANに繋げた時に危険？
VNCのウィンドウではだれが何人ログインしているか分かる、見とく
運用時はSSHとVNCを無効にすればいい？

host名を変えた方がいい？
ラズパイ設定で raspberrydekapi 等に変更

ラズパイを最新版
$ sudo rpi-update
root pwを設定、初期なしf
$ sudo passwd root

piユーザの代わりのユーザを追加(f1/b)
sudo adduser xxx
groups pi でグループの確認
 -> pi : pi adm dialout cdrom sudo audio video plugdev games users input netdev spi i2c gpio
sudo usermod -G pi,adm,dialout,cdrom,sudo,audio,video,plugdev,games,users,netdev,input,spi,i2c,gpio xxx
groupが追加されたことを確認
groups xxx
piユーザー内のファイルを、新規ユーザーにコピー(空フォルダとmagi pdfだけだが)
sudo cp -r /home/pi/* /home/xxx

piユーザーのオートログインを無効化
sudo nano /etc/lightdm/lightdm.conf`
autologin-user=pi　をコメントアウトし
 #autologin-user=pi　にする
新しいユーザー名を指定
sudo nano /etc/systemd/system/autologin@.service
ExecStart=-/sbin/agetty --autologin pi --noclear %I $TERM　の下に
ExecStart=-/sbin/agetty --autologin xxx --noclear %I $TERM　を追記

新規ユーザーがパスワードなしでsudo可に
sudo visudo
上記コマンドで/etc/sudoersファイルをエディタで開き#includedir /etc/sudoers.dの項目を編集
pi ALL=(ALL) NOPASSWD: ALL　を削除
xxx ALL=(ALL) NOPASSWD: ALL　を追記
オートログインの確認　piユーザーがいなければok
who

デフォルトのpiユーザーをsudoersから除外
sudo gpasswd -d pi sudo

新ユーザxxxでSSH/VNCできるか、ログインできるか、sudoできるか確認

piユーザーを削除する（piのユーザー名を変更する、pi ユーザをロックする、という方法も）
sudo userdel -r pi
削除できたか確認
id -a pi
次のようにでればOK　id: pi: no such user

SSH証明書設定：面倒だとSSHを有効にしないこと
SSHのポート番号を変更する　49152〜65535
sudo nano /etc/ssh/sshd_config
#Port 22 を
Port 65535 に変更
rootユーザーで直接SSHログイン出来なくする
sudo nano /etc/ssh/sshd_config
#PermitRootLogin prohibit-password を
PermitRootLogin no に変更

■エディタ操作
^Oはctl+O

■開発環境
Python interpreter/GPIOライブラリのインスコ
  sudo apt-get install python-dev
  sudo apt-get install python-pip
  sudo pip install rpi.gpio

Git/WiringPIのインスコ（GPIO操作を行うC言語ライブラリ）
sudo apt-get install git-core
git clone https://github.com/WiringPi/WiringPi
cd WiringPi
./build
gpio -v 実行してバージョン情報が表示されれば完了

I2C通信ライブラリのインスコ
複数のI2Cデバイスを同時に制御できる、温度を測りモータを動かす等
sudo apt-get install libi2c-dev

（参考）
Apache+PHPのインスコ
https://bit.ly/355p4LX
WiringPi-PHPでWiringPiをPHPで使う
http://www.feijoa.jp/laboratory/programming/gpioWithPhp/

■PG
　ログ取る系なので一定期間でバックアップを取る
　リモコンでLEDを光らせる＞リモコンでPGスタート＞リモコンでカメラやログ
　ボタンを押すとブザーを鳴らしてカウントしその回数をディスプレイ
　　ドライブレコーダ/車防犯カメラ（録画8hrs）、自動録画/消去
　　進入警報（ログ、写真、360度録画、メール）
　　バイクセッティング記録系ツール（気温、GPS、加速度、サスやキャプ設定メモ）

LED　抵抗　ボタン　button
パッシブブザー　Passive Buzzer
リモコン　IRremote
ディスプレイ　LCD1602

///プログラム解説
使用するチャンネルはモードを設定する必要がある
GPIO.setup([チャンネル], [GPIO.IN または GPIO.OUT])
　例：
　channel_list = [11,19]
　GPIO.setup(channel_list, GPIO.OUT)

デジタル出力では電圧をHIGH(3.3V)、またはLOW(0V)に設定できる
GPIO.output([チャンネル], [GPIO.LOW または GPIO.HIGH])
　例：
　GPIO.output(14, GPIO.HIGH)

GPIOからの入力をポーリングで読み取る場合の例
戻り値にはGPIO.HIGH(または1、True)かGPIO.LOW(または0、False)が返る
if GPIO.input(27):
    # ピン27がHIGHの場合
else:
    # ピン27がLOWの場合

GPIO.input/setup()に pull_up_down パラメータで、プルアップ抵抗(GPIO.PUD_UP)またはプルダウン抵抗(GPIO.PUD_DOWN)を有効にでき、その場合回路がつながっていない状態でもGPIO.HIGHまたはGPIO.LOWが読み出される
　例：
　GPIO.setup(27, GPIO.IN, pull_up_down=GPIO.PUD_UP)

　　不定状態だとGPIOの入力インピーダンスが高く高周波ノイズを拾い誤作動が考えられる／サージ
　　　GND側に引っ張ってLowに安定させるプルダウン抵抗だが、慣例的にHighにするプルアップの方が使用頻度が高い
　　　　プルアップ回路： タクトスイッチONでLow、タクトスイッチOFFでHigh（平常時ON）
　　　　プルダウン回路： タクトスイッチONでHigh、タクトスイッチOFFでLow（平常時OFF）
　　　　　ラズベリーパイでは内部プルアップ（ダウン）が使え、外付けプルアップ（ダウン）抵抗を省略できる
　　　http://raspi-studio.hatenablog.com/entry/2016/06/06/204053
　　　https://qiita.com/nishiwakki/items/e921d44a00a37c72979c
　　　　プルアップ抵抗とマイコンの入力抵抗ではマイコン入力抵抗の方が遥かに大きいく電圧は全てマイコン側に加わる
　　　　プルダウン抵抗は無くてもと思えるがスイッチを押した時には5Vが抵抗なしでGNDに直接流されショートする
　　　　　https://voltechno.com/blog/pullup-pulldown/

イベント(エッジ)の検出
GPIO.add_event_detect([チャンネル],  GPIO.FALLING, callback=func)
　GPIO.FALLING → 立ち下がりエッジ：(High→Low)
　GPIO.RISING → 立ち上エッジ：(Low→High)
　GPIO.BOTH → 両エッジ

//// プログラムの起動と停止
パイソンを実行するcmd（ファイルの位置までcdで移動しtest.pyを実行）
　python test.py
Ctrl+Cでプログラムを止める

//// コツ
GPIOの状態を見るcmd
　gpio readall
ブレッドボードが悪いのか、結線が悪いのか、パーツが壊れているのか、プログラムが悪いのか、何が悪いか分からん
　テスターが要る

■電子回路
ラズパイは1つのGPIOピンにつき電流量が16mAまで、合計は50mAまで、電圧は3.3V
　その半分を超える電流を流すと寿命を縮めるおそれがあるそう→3mAにしとく、3.3v= 3mA*1kΩ
GPIOピンは汎用入出力(General Purpose Input/Output)ポート、入力と出力ができる、40ピンある
　GPIO 2-27の26ピン、GNDx8、3.3Vx2、5Vx2、ID_SDとID_SCの2ピン
　　ID_SD/ID_SCは外部にEEPROMというデータを保存するための部品を接続するピンだがあまり使わない

GPIOピンには＋－どっちを入れてもいいの？→IOなので良いが注意点がある
https://robot-workshop.net/raspberry-pi-gpio
https://tool-lab.com/make/raspberrypi-startup-22/

　//// GPIOを使うときの注意点
　ショート：電源の＋と－を直結すると過剰な電流が流れる
　　3.3v/5vピンをGNDピンに直結しない事
　　GPIOピンを出力モードでGNDピンに繋げない事（入力モードはOK）
　　　GPIOピンは基本は入力モードにして、必要なものだけ出力モード、あるいはショートするケースには抵抗を入れておく

　GPIOピンの中でもGPIO2とGPIO3は他のピンと電気的特性が異なり注意が必要
　　I2Cにも使われ1.8kΩの抵抗が接続されている（1.74Vとなる？）
　SPI通信ではGPIO番号GPIO7-GPIO11の5ピンが専用に割り当てられます(MOSI, MISO, SCLK, CE0/CE1で通信)
　アナログ出力ができるピンはどのモデルでも固定でGPIO18のみ
　　アナログ出力では周波数とデューティ比でモータ制御などに使うPWM制御が可

ラズパイの電圧読み取り
　0V〜0.8V: 0Vとして読み取る
　0.8V〜1.3V: 不定
　1.3V〜3.3V: 3.3Vとして読み取る

計算と実地：　結局計算しても正確ではないし、そもそもどれくらいの電流を流すと、どのくらいの明るさで光るのかもよくわからない→抵抗は大きめから
http://robocad.blog.jp/archives/662656.html

LED明るさ：1cd ろうそく、400cd 40W蛍光灯、100cd 100W蛍光灯
VF 1.85Vは順方向電圧(VF)を表す。LEDには極性がありアノード（プラス、端子長い、下側、足曲がり）からカソード（マイナス、端子短い、上側、足真っ直ぐ）に正電圧を加え使用。電圧が低いと電流が流れても発光せず、ある電圧を超えると電流が流る
 │(-)
 ―
 ▲
 │(+)

アクティブブザー：発振回路が入っており決まった音程でブザー音が鳴る
パッシブブザー:スピーカと同じで与えた音声信号で発生、音程を変えられる

I2Cで16本あるIOエキスパンダ（MCP23017）のポートを制御できる。8個使用すれば16x8の128ポートが使用可
http://kzhishu.hatenablog.jp/entry/2016/07/19/090000

■電流は＋から－に流れる、電子は－から＋に流れるが
　電荷の移動である電流と電子は直接は関係ない
　　電気のスイッチを入れると、電荷は直ちに移動しますが、電子がその速さで移動しているわけではありません
　　電子はカタツムリの歩みより遅い速度でのらりくらりと動いているだけ
　　　GNDから電子を集めるわけではない
　電気の仕組みは、正負があるのではなく、電荷の多い少ないで電圧が現れる、電荷の多いほうから少ないほうに電気が流れる
　　電荷の移動の犯人のひとつに電子、他にはイオンであったりプラズマであったり
https://oshiete.goo.ne.jp/qa/8305340.html