■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以外でやりたい)

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

==========

無料でクラウドを喰らう
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://techblog.gmo-ap.jp/category/gcp/
https://tech.zeals.co.jp/entry/2019/01/08/094054
https://techblog.gmo-ap.jp/category/tensorflow/

12 か月間300 ドル分だけ無料
https://console.cloud.google.com

=================================
■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


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

安定性がない、AI系操作で画像が大きく、メモリと仮想メモリに余裕がないと落ちる
日本語フォントは魅力的だが、俺的機能的にはCreativeSuiteで充分だったかも

オブジェクト選択ツール
　人物や動物などの被写体の周りを矩形か投げ縄で囲むだけで選択、自動調節で境界削除がよいようだ
プロパティパネル
　「背景を削除」をクリックするだけで、レイヤーマスク付きで被写体を切り抜く
被写体を選択
　選択範囲＞被写体を選択
コンテンツに応じた移動ツール http://shuffle.genkosha.com/software/photoshop_navi/cs6_features/8160.html
　D&Dで移動すれば移動と同時に移動元を埋める（移動用途）
パッチ https://www.vanfu-vts.jp/blog/2014/05/photoshop
　D&Dすればドロップ先の画像でドラッグ元を埋める（消す用途）
マッチフォント
　画像からフォントを検索できる
ワープツール
　メッシュポイント変形
アートボード　https://helpx.adobe.com/jp/photoshop/how-to/creating-multiple-banners-photoshop.html
　モバイルやPC等各デバイスごとの画像を一括管理
3Dオブジェクト　https://www.pc-koubou.jp/magazine/24943
　3DCGみたいだ、3Dマテリアルスポイトもコレ用みたい
プリセットパレット/Adobe Fontsの充実
　プリセットは質向上、フォントはAdobe謹製やお気に入りやフィルタリング検索
変形時の縦横比固定
　Shiftキーが不要に（反対操作に

////Font
A-OTF 見出ゴMB31 Pr6N
A-OTF 見出ミンMA31 Pr6N
源ノ角ゴシック JP Heavy
TBカリグラゴシック Std E

TA-rb
TA-方縦M500
TA-candy
VDL ロゴJrブラック
TA-F1ブロックライン
かづらき SP2N
RoぶらっしゅStd
VDL 京千社

////人物切抜き
http://ess-graphics.com/blog/2016/11/kirinuki/
https://design-trekker.jp/design/photoshop/photoshop-clipping-hair/
http://photoshopvip.net/new-cropping
　クイック選択ツール（ブラシ系の選択、はみ出たところはAlt+で消す）等で大体選択
　選択範囲>選択とマスク
　境界線調整ブラシツールで足したり、引いたりを太さや表示透明度を調整しながら行う
　↓旧ver
https://liginc.co.jp/web/design/photoshop/37657/
https://sitebk.com/photoshop/hair-clippings/
　クイック選択ツール（ブラシ系の選択、はみ出たところはAlt+で消す）等で大体選択
　境界線を調整

////Creative Cloudでアドベと契約^{（ちぎり）}
https://www.adobe.com/jp/creativecloud/plans.html

既存の Creative Suite 製品のインストールは、Creative Cloud のデスクトップアプリケーションのインストールの影響を受けません。例えば、Photoshop CS6 永続ライセンス版を Photoshop CC と同じコンピューターにインストールして使用することもできます。
ライセンス認証は 1 ライセンスにつき 2 台のコンピューターに制限されています。これらのデバイスで同時にソフトウェアを使用することはできません。
↓
CSとCCの並行可能、PCにインスコしてHDDがクラッシュしてももう一台にインスコできる、それもクラッシュすれば一度解約？
https://helpx.adobe.com/jp/creative-cloud/faq.html

ライセンス認証解除（ログアウトするだけ）
https://helpx.adobe.com/jp/download-install/kb/activate-deactivate-products.html
体験版またはサブスクリプションを解約
https://helpx.adobe.com/jp/manage-account/using/cancel-subscription.html

年契約の分割月払いなので、解約しようとすると違約金が発生する
　違約金は残っている期間の50%を一括
　なおクーリングオフで契約から14日は無料で解約可、ということは

////LightroomとLightroom classicの違い
Lightroomはクラウド使用なので画像UPが必要、Windows7非対応、モバイル端末使用向き
クラシックはPCローカル操作、Windows7対応

多言語でシステムを作ってたつもりだが、時間について意識してなかったかも。
面倒だが時間ができれば要チェックだ。サマータイム

■国際時間
■サーバーマシン
■クライアントマシン
■ローカル時間

http://blogos.com/article/316473/
https://blogs.msdn.microsoft.com/nakama/2018/08/11/timezone/
http://novtan.hatenablog.com/entry/2018/08/10/201046

1）ブログは投稿時間が手入力の選択制になっていた
2）DBには何の時間を入れている？サーバーの時間か？DBサーバの時間？
3）cronは時間を記載しているだけだから、サーバーの時間か？
4) バッチスケジュールの破綻
　　実施タイミングは3amとかそれぞれの地域で違う
　　　日本案の2hrsは特殊、通常1hr
　　開始日は22hrsになる　バッチが走るキック時間が無くなる
　　　例：3/15 3amが5amに飛ぶ、3時4時がない
　　終了日は26hrsになる　バッチ2回走るかも
　　　例：10/25 5amなると思うと3amに戻る、3時4時が2回くる
　　　1回目はJST Daylight Time(DT),2回目はJST Standard Time(ST)と区別が必要
5）サーバ間の時間の統一、特に異業者間
6) クライアントから時間をサーバに送るアプリ（Webだとあんまりない？）
7) DBへの記録形式、アプリで生成する時間、テキスト記録系の時間は注意
8) 時系列、並び順（特に終了日は2回同じ時間が来るから）
　　UTCで全て記録して、表示時にはアプリに持たせたロケールを使う
　　　日時の手入力だが夏時間を選択できるようにする？ロケールでUIF変えるの？
　　　OSのロケールは使わず独立させたいなぁ
　　　入力者と表示者のロケールが違う可能性、何を優先させるか、選択性


//// Active Directoryメモが見つかった　AD
■ユーザ
AGDLP：アカウント（A）をグローバルグループ（G）に追加し、グローバルグループをドメインローカルグループ（DL）に追加して、ドメインローカルグループにアクセス許可（P）を下記ツールで
　 「Active Directoryユーザーとコンピューター」管理ツールADUC
　 「Active Directory管理センター」管理ツール
　 「csvde」コマンド（コマンドプロンプトから実行）
　 「ldifde」コマンド（コマンドプロンプトから実行）
　 「dsadd」コマンド（コマンドプロンプトから実行）
　 「New-ADUser」コマンドレット（Windows PowerShellから実行）

管理者グループおよびアカウント
　 Enterprise Admins (フォレスト ルート ドメインにのみ存在)
　 Domain Admins (すべてのドメインに存在)
　 Schema Admins (フォレスト ルート ドメインにのみ存在)
　 Group Policy Creator Owners (フォレスト ルート ドメインにのみ存在)
　 Administrators グループ
　 Administrator アカウント
　 DS Restore Mode Administrator (ディレクトリ サービス復元モードでのみ使用可能。 ドメイン コントローラのローカル アカウント)

管理者アカウントの種類
　 ローカルadmin=Server（ローカル コンピュータのすべての機能に無制限にアクセス
　 ドメインadmin=AD（ドメイン、保護されていない場合はフォレスト全体の全機能
　 フォレストadmin=forestRoot,AD（Enterprise Adminsグループは、フォレスト全体の全機能、証明機関のインスコでフォレスト内の任意のユーザーのふりができます）

通常ユーザとadminのユーザ名を変え切り替えてもらう

■オブジェクト
　 グループ
　 コンピューター（自動作成）
　 OU
　 グループポリシー（ユーザーやコンピューターへの設定を一元的に管理）
　 プリンタ（プロパティのセキュリティタブでディレクトリに登録チェックをつけるとADへ登録される）
　 共有フォルダ（フォルダ共有後にADUCで登録）
　 サイト（ドメインコントローラー同士で複製が15s後に起こる範囲、外は3hr後）

■シェアポイント
AD
├ADグループ
│└ADユーザ
│　└AD社外ユーザ
＝
└──SharePointグループ（SharePoint内でのみ使用可）

SPのアクセス管理はADユーザでもADグループでもSPグループでも良い
社外ユーザもAD(orLDAP/DB etc.)に入れれば使える
社外管理にはブラウザに証明書をインストールしたり、モバイルはVPNで社内からアクセスしたり

AD社外ユーザの注意点
　アクセス範囲を決め特定のフォルダやイントラサイトしか無理にする
　ほぼSharePoint用？
　SPをDMZに置く等の物理的に設計する？

=========================
Win10 ゲーミング設定
https://chimolog.co/bto-gaming-pc-settings/

ChromeにはServiceWorkersの無効化を
https://qiita.com/rana_kualu/items/52d8cb7b200d6fefddc8
https://www.google.com/search?q=chrome+flags+service+worker

■画面キャプチャ
Win＋S

■ServiceNow
★がお気に入り、ドラッグ＆ドロップで入れられる
リストで項目を右クリックしFilterOutを選ぶことで除外できる。State=resolvedを外す等

■CスクリプトでVBSをキック
CMDを管理者で起動
cscript test.vbs

■BBC
送信者の送信メールにはBBCが誰か記載されている、Fromの人は分かる
Toの人には記載されておらず分からない
BBCの人はなぜ受け取ったか普通分からない、ヘッダーにはBBCであるほのめかしがある場合がある■IPアドレス
nslookup ドメイン
　で対象DNSとレコード一覧がでる？、nslookup -type=mx domainでMXレコードだけ出る？

■完全なパス
Shiftを押しながら、ドライブをクリックすることでパスを取得できる

■WebページのWord化
Chromeからはコピペが可能、一部画像はWin＋Sで

■グループポリシーの強制適用
gpupdate /force

■全ドライブ割り当てのフルパス取得
net use

■スタートアップ　プログラム
msconfig 　（win7もwin10でもOK）

win10 Ctrl+alt+del / コンパネ＞アプリ＞スタートアップ
https://pc-karuma.net/windows-10-app-startup-disable/

■RUNコマンド
RUNはWinキー＋R

■cmd パイプ
 ipconfig /displaydns | more
 リターンで1行、スペースで1ページ

■cmd network
コマンドプロンプト：ネットワーク系コマンドまとめ
https://qiita.com/toyokky/items/0bf0c5672b4b7cc27be0
tracert
https://www.atmarkit.co.jp/ait/articles/0305/03/news002.html
nslookup
https://www.atmarkit.co.jp/ait/articles/0203/21/news003.html
https://beginners-network.com/nslookup.html
ipconfig /flushdns
https://milestone-of-se.nesuke.com/sv-basic/windows-basic/nslookup/

■Outlook
送信取り消し、削除済みアイテムの復元、かく

■用語
MirrorID（設定を他の方と同じにしたいという意味で参考ID）
NDR (non delivery receipt)
CUCM (Cisco Unified Communication Manager) メールやSMS,ビデオ会議、IP電話
LM (line manager)

■OneNote
１）コピー等で持ってきた元々の実体のローカルファイル　（下記に移動し通常使わない？）
２）ノートブックのプロパティの場所　（開くときに改めてココに作る、通常ココを使う）
　C:\Users\userid\Documents\OneNote ノートブック
３）パッケージファイルとしてデスクトップ等に保存（これから開くが実体もあるがミラーなだけ？）
４）バックアップ　（オプションからバックアップ設定、即時も可）
　C:\Users\usesrid\AppData\Local\Microsoft\OneNote\14.0\バックアップ\

問題があれば2か4のデータをどこかにコピーしパッケージとして別名保存、そのときプロパティの場所に新たにデータが作られる、またできれば手動でバックアップを取っておく

■Outlookキャッシュ（名前解決）のクリア
Outlook>ファイル＞オプション＞メール＞メッセージの送信＞オートコンプリートのリストを空にする

■Outlookキャッシュのクリア
1. Outlookを閉じます
2. Windows key + Rを押す
3. ウィンドウに次を入力しEnter%localappdata%\Microsoft\Outlook
4. RoamCacheフォルダを開く
5. 全選択しSiftキー＋Delキーで完全削除します
6. Outlookを再度開きますとキャッシュが自動的に作成され直しされます

■SharepointのUpload ceter cache / Officeドキュメントキャッシュをクリアする、下記URLステップ２
　https://support.office.com/en-gb/article/delete-your-office-document-cache-b1d3765e-d71b-4bb8-99ca-acd22c42995d
（翻訳）https://translate.google.co.jp/translate?hl=ja&tab=rT1&sl=en&tl=ja&u=https%3A%2F%2Fsupport.office.com%2Fen-gb%2Farticle%2Fdelete-your-office-document-cache-b1d3765e-d71b-4bb8-99ca-acd22c42995d

■Winネットワーク設計の調査（Firewall、サービスが主か）
Firewallでポートを止めたりしたいがはGPOでおおよそ管理されるので、主にサービスを止める等をしたい
http://www.atmarkit.co.jp/ait/articles/0207/30/news002.html
プロセスやサービスを1つずつ停止させながら、netstat -anコマンドでリッスンしているポートを調査する
 リッスンしているプロトコルとそのポート番号、プロセスID
  netstat -oan
 通信を行っているプログラムが分かる
  netstat -anbv
 タスクリスト、プロセスIDが分かる
  tasklist
 タスクを出している親のサービスが分かる
  tasklist /svc
 Wellknowはこのテキストに書かれている
  %windir%\system32\drivers\etc\services
ALMon(Shophos関連), Alsvc(Shophos関連), CcmExec(SMS:バッチ管理), csrss(クラサバランタイム), IAstorIcon(インテルラピッドストレージ), igfx(インテルグラフィックドライバ), lsass(ローカルセキュリティオーソリティ), svchost(サービス), spoolsv(印刷スプーラ), wmiprvse(OS管理), BrcmMgmt, services(Broadcom社ネットワーク系/モニタリング), OSE(オフィス更新)

===
■サポートは謝り方と悟れ、あと情報の整理
ITは結局情報の管理、記録を取って残す、過不足無くアップデート/メンテをする事
　→結局、網羅が必要で情報量が多くなる　→情報の整理をして重複を無くす、見やすく、探しやすく

■見切り発車、現場を知らない
システムは整合性が鍵、見切り発車はコントロールできる範囲でないと収拾がつかなくなる
　（スピードが重要だが、それ以上に知見がある人が決定することが大事）
現場を知らないマネージャが決定すると、現場の業務や負担ばかり増える
　（メリットは？現場の人間が会議にでなくてよく業務に集中できる）

■共有フォルダ構成
階層はできるだけ浅いほうが良い　→　アイテムをベタでたくさん置く
ベタで置くと優先順をつけたくなる　→　頭数字を入れがちだが、、、アンダースコアの数で階層を作る（一覧的階層）
 べた並び　→　重要なものは階層を上げるため_を付与　→　もっと重要なものは__を接頭
ファイル名は判り易くつける

■マニュアル
サマリが主要になるように作る、一覧性重視（詳細を見る時間がない、基本は知ってる人に聞いて覚える）
詳細の説明をサマリの後に付ける、時間浪費は良くないので見にくくてもよい。
 サマリは抜けなくしっかり作ること、詳細説明は細かな記録/言質を重視
チーム用備考欄とすればユーザが見れる資料でも記載可として一元化できる、派生はさせない（資料のパスなど）

■ナレッジ管理に関しては、
レイヤーやピアが低いところではエスカレーションすればよい
個人の管理に頼る方が仕組み上すっきりし、コストが掛からず良い
ですが、大事なところを定義し、そこのみマニュアル等の更新をきっちりすべき

また、
KBの情報共有は、連絡が頻繁にあり効率化すべき
理解に掛ける時間が人数分になりますので、メールのシェアより情報の一元化がよい

■BYOD vs Fortify
 1. プライベートのPCをVPNで企業のWebアプリに繋げる、自由/高効率、ウィルス/情報漏えいなど危険が危ない
 2. ウィルススキャン、スパム、情報漏洩、フィッシング、Webアクセス制限、マルウェアインスコから完全に守る

■HTML5
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charSet="utf-8"/>
<title>Title</title>
<meta name="description" content=""xxx/>
<link rel="stylesheet" href="xxx.css"/>
<script src="js.php"></script>

/// Resource Hintsによる表示高速化
https://blog.members.co.jp/article/33474
dns-prefetch、preconnect、prefetch、prerenderの4つの要素、やりすぎよくないが
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//example.com">
<link rel="preconnect" href="//example.com">
 <link rel="preconnect" href="//cdn.example.com" crossorigin>
<link rel="prefetch" href="//example.com/next-page.html" as="html" crossorigin="use-credentials">
 <link rel="prefetch" href="/library.js" as="script">
<link rel="prerender" href="//example.com/next-page.html">

/// 他
 大きめな画像でもRetina端末で見るとぼやけてしまうというのでSVG、大きい画像だと容量も食う
 IMGタグやCSSだとSVG形式ファイルに対してJavaScript等で一切操作ができない、objectならマウスオーバ等データにイベントを含めておける
 <img src="logomark.svg" width="32" height="32">
 <object type="image/svg+xml" data="logomark.svg" width="256" height="256"></object>
 <svg id="logomark" x="0px" y="0px" width="155px" height="155px" viewBox="0 0 155 155" enable-background="new 0 0 155 155">
  <polygon id="logomark-polyline" fill-rule="evenodd" clip-rule="evenodd" fill="#0CB9C7" points="128.25,26 147.19,96.69 95.44,148.44 24.75,129.5 5.81,58.81 57.56,7.06 "/>
 </svg>

■OGP
<head prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
　TOPページであれば上の「website」、TOP以外のページでは下の「article」を使う、fbはFacebook用

<meta property="og:url" content=" ページの URL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページの タイトル" />
<meta property="og:description" content=" ページのディスクリプション" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像の URL" />

<meta property="fb:app_id" content="App-ID（15文字の半角数字）" />

<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@ツイッターユーザー名" />

他にも細かい要素がある
https://ferret-plus.com/610

OGP画像確認
http://ogimage.tsmallfield.com/
ツイッターカード確認
https://cards-dev.twitter.com/validator

■CSS
CSSレイアウト（Grid、Float）
https://www.bangboo.com/cms/blog/page_327.html
https://www.bangboo.com/cms/blog/page_18.html
CSSセレクター
https://www.bangboo.com/cms/blog/page_152.html
ブラウザ間の問題
https://www.bangboo.com/cms/blog/page_184.html
https://www.bangboo.com/cms/blog/page_19.html

/// calc は計算ができるのでレイアウトもできる
.foo {
    width: calc(100% - 50px);
}
他にもいろんな計算が、単位は要調査
.foo {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}

/// @supports は機能クエリ、機能があるかないかでCSS適応を変えられる
https://coliss.com/articles/build-websites/operation/css/css-supports-how-to-works.html

/// グラデーション
http://www.htmq.com/css3/linear-gradient.shtml
http://www.css-lecture.com/log/css3/css3-gradient.html
https://qiita.com/yasumodev/items/9ccac31860c31ce24a13
　webkit系:Safari/Chrome, Moz系:Firefox
#gMenu .menu > li > a{
 background-color:#006600;
 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#006600), to(#003300));
 background: -moz-linear-gradient(#006600, #003300);
 background: linear-gradient(#006600, #003300);
}

■RWD
ビューポート　<meta name="viewport" content="width=device-width, initial-scale=1">
メディアクエリ CSS側に@media screen and (max-width:767px){
相対サイズ指定
　max-width: 100%;　ではみ出るのを押さえる
　　→　https://www.homepage-tukurikata.com/css/max-width.html
　　maxとminの一般的な使い方→　https://saruwakakun.com/html-css/basic/max-min-width

liを使ってナビやパンくずを表現し、サイズでスタイルを変える
Divを使ってパーツを表現し、サイズでスタイルを変える、レイアウトを変える（Floatの流れ、Grid等）

/// srcset と sizes による画像切り替え
https://www.tagindex.com/html5/embed/img_srcset_sizes.html
https://laboradian.com/img-srcset-sizes/
https://terkel.github.io/srcset-sizes/
https://qiita.com/taichi0514/items/7ffc93b8b4d0f349e9b6

<img src="image/small.jpg" srcset="image/small.jpg 320w,
 image/medium.jpg 640w,
 image/large.jpg 1280w"
 sizes="(max-width: 1280px) 100vw, 1280px" alt="a">
ビューポートの幅が1280pxまでは100%の幅で、それ以上の場合は1280pxの幅で画像を表示します

<img src="image/small.jpg" srcset="image/small.jpg 320w,
 image/medium.jpg 640w,
 image/large.jpg 1280w"
 sizes="(max-width: 420px) 100vw,
 (max-width: 800px) 70vw, 50vw" alt="a">
2つのブレイクポイントを設定し、画像の表示幅が3段階で変化するようにしています

<img src="image/small.jpg" srcset="image/small.jpg 1x,
 image/medium.jpg 2x" alt="a">
一般的なディスプレイでは small.jpg、高画素密度のディスプレイでは medium.jpg が使用されます

<img src="image/small.jpg" srcset="image/small.jpg 320w,
 image/medium.jpg 640w,
 image/large.jpg 1280w"
 sizes="(min-width: 600px) calc(100vw - 300px),
 100vw" alt="a">
表示領域の幅が600px以上ある場合はサイドバー用の余白（300px）が入り、それ以外の場合は幅100%で画像が表示されます

ブラウザは上から見ていって最初に合致したものを採用
メディアクエリーで場合分けする場合はwidth属性を指定しない事、指定すると場合分けされない
指定するサイズの単位は、px, em, vw など、但し% は使えない
em は親要素のfont-sizeプロパティの値を1としたときの大きさ、rem はルート/htmlに対する
ピクセル密度記述子は (1x や 2x など)により指定
実際のピクセルでのサイズ単位は w で指定、スマホやRetinaは物理ピクセル数が違い3pxを1pxで扱う等で
vw ビューポートの幅に対する割合
vh ビューポートの高さに対する割合
vmin ビューポートの幅と高さのうち、値が小さい方に対する割合
vmax ビューポートの幅と高さのうち、値が大きい方に対する割合

相対単位「px」「ex」「em」「rem」
絶対単位「ch」「cm」「mm」「q」「in」「pt」「pc」「mozmm」「vw」「vh」「vmin」「vmax」

↓使うならこんな感じ？ブラウザサイズで読み直しがなかったり、preloadが必要だったり、%でいいんじゃ？
<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="100vw"
     alt="A rad wolf" />

<img srcset="img-320w.jpg 320w,
             img-480w.jpg 480w,
             img-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="img-800w.jpg" alt="a">

POLY シンプル
 http://treehouse-code-samples.s3.amazonaws.com/poly/index.html
normalize.css
　ブラウザごとの要素の相違を吸収

レスポンシブウェブデザイン？テンプレートを使えば？(有料でも無料でも商用可でも）
https://ferret-plus.com/3312
http://photoshopvip.net/109116
https://www.site-convert.com/archives/1310
https://free-hp.net/
https://liskul.com/homepage-template-27631
https://popo-design.net/template/　シンプル