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

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

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


■ユーザーエージェント（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(オフィス更新)

===
■サポートは謝り方と悟れ、あと情報の整理

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

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

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

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

また、
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/　シンプル

http://goo.gl/xeQkcR

ターニングポイントなのは明らかだ。過去の価値観を全て破棄して一から知識を構築する。というように見せかける。で結局フォロワーが得をするのか、あるいはコミュニズムか

想定モデル→実証モデル、事前に想像したマーケから実証をしつつ進めるマーケ
反応した人がターゲットである
SNS反響→マスor他チャネル　実証しながら変更を随時行う
CRMと広告が融合
1to1マーケの実現
　プロモーションを変える（購買履歴、行動履歴、つながり）

対策の検討（問題の原因調査と解決策がKKD：経験、勘、読経から変わる）

今まで分析されていなかったデータを使う
医療、小売、製造、公共で価値を生む（効率化、）
リアルタイム化（リアルタイムで入力、リアルタイムで出力）

---------------------------------------------

問題 > 仮説 > 解決策
　コンピュータが仮説を立てる、文脈も発見する
欲しいデータはサイトかセンサーで取れる
Webでニーズ取りをやって結局何が分かったか？
　→行動履歴を取ってセグメント
　→習慣化（メルマガ、訪問
　→ブレーンウォッシュ（トップダウン、ボトムアップ）
　→楽天エコシステム：　安売と囲い込み
　→リターゲット（ストーカ、つきまとい、ガスライティング
俺がアルゴを開発
業界の保身より、ベーシックインカムにして進化、効率化を選ぶ方が

http://goo.gl/kz1Uvf

ソーシャルリスク ビジネスで失敗しない31のルール
なぜSNSを使うのか？露出？競合つぶし？マイニング？

社員の自覚が重要 -> SNSに接する、意識が低いままSNSを使うのは危険
　誠実さ、議論は建設的に
　批判は非推奨
　立場を明らかに、但し免責文（所属団体ではなく個人の意見である旨）
　著作権、肖像権、守秘義務尊重
　SNS上の自社情報は社内共有
ミスはバレる（内からも、外からも：情報流出、怠惰等）
営業資料などは絶対流出させない

BtoCでつながる重要な窓口になりうる
直接的にPR、やらせ、連投よりもブランド価値向上
でも、つまらない事の方が問題
正式に抗議すれば停止になるものはやらない
　政治、宗教、団体、嘘、ヤケ、社長不用意発言、競合の貶め等の投稿
委託先ツイートは現場任せ、しかし監視
炎上マーケ：問題発言←ツッコミ→いい感じで謝る（やらせ）
期間限定→キャンペーンをPR→SNS常設
デマ等の否定を直ぐに→SNSで
おわび、分単位の経緯、対応策、再発防止策→理解するのが面倒でつっ込めない

Q&Aサイトでの仕込みは楽だが、発覚しやすく不可視を含むダメージが大きい
できればスポンサーの関係性明示

---------------------------------------------
CRMやMarketing automation等の適切なタイミングで適切な情報をユーザに届けるという手法/コンセプトがあるが、良い商品を作り出したい/商品を心から買ってもらいたい/工夫を凝らして宣伝をする方が人に響く、カッコ悪いかもしれんが、例SSW

---------------------------------------------
クリスタルKとコロ助ともう一人誰？、AKB？、鮭？、誰？