August 16, 2020
キンキン（ジョッキ、武豊みたいなもん）
１）THERMOS保冷ホルダー楽、炭酸が抜けない、保冷力だけでは夏は無理
２）CAPTAIN STAGステンレスマグを凍らす氷入れるやつはキンキンになる◎口の周りが冷たくなるので、なみなみと注ぐのも良い、質感が良く旨い
３）氷のビアジョッキキット
感覚で行くなら究極これなのだがZonamaで酷評=>買って試した＞器から氷を取り出すのに溶かすため25分ちょっと放置、水っぽいので、5分程度再度凍らせた(
前日に氷ジョッキを取り出し翌日まで冷凍するのが良い)＞これは中身ではなく外側が冷たい、器より中身が冷たいというのを感じたい、ただし
夏感や祭感や特別感は半端ない、飲む時に溶けるので辺りが水浸しになる、注ぐ>飲む>冷凍をクイックに繰り返すなら結構長く使えるし五感で旨い、氷を入れると尚冷たい
４）グラスを凍らす
体感としてはかなり冷たく感じる、炭酸が抜ける感じがある、中身と量次第で秒でぬるくなるが、まぁ水浸しになる
５）冷保ジョッキ
コツが分からないと質感から体感でぬるく感じる、少し時間が経った方が凍ったりして液体自体は冷たいが体感はキンキンな感じがしない、多分つけた口が冷える事が必要ではないかと思う、持ち手も冷たいと体感に来てる気はする、ポテンシャルは感じる→下の方で凍っていて、固体と液体は交わらないのか液体部分がぬるくなる＞かき混ぜるとシャーベット的になり最高、氷を入れると固まるので
固まらないよう時折混ぜる、ステンストローがいい、固体と液体に分離しないよう一体で流体となると極冷たい（流氷は死ぬほど冷たいが、池の氷の下の水は冷たくないはず）●結論がでた。結局飲み物が究極に冷たいのがキンキンということで、器は主役でなかった。いかに凍らさずに液体として準備するか、事前に冷凍庫に入れるが重要。注いで冷凍庫に入れたり器を冷凍を時間をかけて繰り替えすと過冷却に近い感じになる、過冷却がポイントかとは思うが、器は夏用に冷たくする力（氷）を提供するヤツということで下で123フィニッシュだ
休みは氷ジョッキ、基本は冷保ジョッキ、大量氷チューハイボールならステンレスマグ→来年はドウシシャのステン＋保冷剤＋真空のヤツ追加だな
→2021ドウシシャは
つよつよ金持ちツール、メッチャ凍りつき何割かは飲めないwww、が過冷却な感じをずっと提供する、冷保はテーブルがずぶ濡れだがドライ、捲った
Posted by funa : 09:36 PM
| Gadget
| Comment (0)
| Trackback (0)
July 19, 2020
Mafia
【1時間で分かる】P&G流マーケティングの教科書
https://note.com/141ishii/n/na578fec5ef84
マーケティング＝Jobの発見と解決に至る一連のプロセス＝経営
戦略＝目的達成の為にリソースを何に使うのか、という選択
ターゲットを戦略の秀逸さと熱意で達成可能であると心からメンバーに思わせるリーダーシップこそが、ビジネスリーダーに求められている大きな役割
売り上げ＝
①人口＊認知率＊購入率＊購入個数＊購入頻度＊購入単価
②来店者数＊来店者購入率＊購入個数＊購入単価＊購入頻度
③A店舗売り上げ＋B店舗売り上げ＋C店舗売り上げ＋D店舗売り上げ
④男性売り上げ＋女性売り上げ
⑤X商品売り上げ＋Y商品売り上げ＋Z商品売り上げ
(1)が万能
認知率・購入率・購入単価の3つしか、究極的には戦略として会社のリソースをつぎ込むテリトリーは存在しない
購入率を高めることがマーケターの至上命題
認知の質
1 Top of mind認知率 消費者が真っ先に思い浮かべるブランド認知
2 Unaided認知率 消費者がヒントなしで覚えているブランド認知
3 Aided認知率 こちらからブランド名を言うと思い出せるブランド認知
実際に売り上げとの相関が最も高いのはTop of mind認知率
価格とブランド選好はコインの表と裏の関係
結局はブランド選好を高める以外に長期的には道はない
優れたブランドは顧客の"Job (片付けるべき仕事)"を解決している
WHO(フー)ではなく”不(フ)”が大事
不とは、不経済・不便・不都合・不満・不安、など人が解消したいと感じる課題
Jobは顧客との徹底的な会話の中で発見されなければなりません
消費者が自ら語れるJob＝誰でも簡単にわかることはもはや残されていない
消費者にダイレクトにJobを聞くのではなく、実際に取った行動に関して質問をし、Jobの仮説を立てる
定性調査(Qualitative Research、1on1インタビュー調査など)を重ねることで顧客の真のJobの仮説を立てる
Jobの総量＝Jobを抱えている人の人数×Jobの深刻度 Jobの総量が高いものに優先的に
何かを売りたいと思ったときに、製品自体をダイレクトに売り込むのは下策
ブランドの売り物What＝1)Point Of Difference(自社の売りポイント、以下POD)、2)コミュニケーションの2つから構成
熱狂的なファンを持つブランドは、ファンが新たな顧客を連れてくる
謳っていること＝コミュニケーションは必ず知覚可能なレベルで消費者が納得できるものでなければなりません
5Aモデル
Aware(認知)・・・ブランドを知っている
Appeal(訴求)・・・ブランドを好きだ
Ask(調査)・・・比較・検討した結果良いと思う
Act(行動・購入)・・・使う・購入する
Advocate(推奨)・・・他者に推奨する
実行(HOW)は多岐に渡りメディア接触だけに限りません。イベントや、店頭でのプロモーション(デパ地下の試食など)なども含まれ戦略的提携、タクシーでファブリーズ提携
戦略ーWHOーWHATーHOW
消費者が唯一見ることができる戦略は実行だけだ
＝＝＝＝＝＝＝＝
ネットで実際に取った行動に関して分析
キラキラしているものを作る、商品とか店舗とかCMとか
接触回数で惰性というか慣性というかを付ける必要があるな
Amazonカス玉レビューの数は接触回数の代わりになる、皆買ってる感じなる
Posted by funa : 06:49 PM
| Column
| Comment (0)
| Trackback (0)
May 10, 2020
BANG X BOO - Mobility
■設定
ルータにMacアドレス(一時MACアドレス認証を無効でも)
英語101/102?キーボード＋MS IME
Ramdisk無料版 300MB?
調整する-> https://www.bangboo.com/cms/blog/search.php?search=insco
メモ帳をタスクバーに、使うのはメモ帳とエッジだけ
追加はImaging EdgeとRekordboxのみか
Bluetoothスピーカ：設定＞デバイス＞Bluetooth＞Bluetoothまたはその他のデバイスを追加する
※処理もWifiも遅いので、アプリ使用時はwifiを切るといいかも
■仕様
Jumper EZbook S4 8128
14インチノートブックPC FHDスクリーンラップトップインテルGemini Lake N4100 Ultrabook (8GRAM, 128G)
◎Intel Gemini lake N4100 Quad Coreプロセッサー
◎Microsoft Windows 10 Home OS
◎14インチ1920 x 1080 FHDスクリーン、Silm Bezelデザイン
◎RAM + ROM：8GB DDR4L 128GB eMMC、
◎ネットワーク：デュアルバンド2.4G / 5GHz Wifi、802.11 AC、Bluetooth 4.2
◎Intel HD Graphics 600 Core Graphics Frequency
◎4800mAhポリマーバッテリー
インターフェース:
1×DC
1×USB2.0
1×USB3.0
1×ヘッドホンジャック
1×TFカードリーダー
1×ミニHDMI
パッケージの内容
1 xJumper EZbook S4ノートPC
1 x 充電器
1 xユーザーマニュアル
1 x日本語のキーボードステッカー
カラー: オーロラシルバー
サイズ: 約328mm×215mm×15mm（最も薄い部分は約8mm）
重さ: 約1.25Kg
///ステッカー
透明のものでも、透明塩ビ、透明PETがあった。違いを知らんので曲がりそうな透明塩ビを選んだ
Sacra corona unita mobile
Posted by funa : 11:27 AM
| Gadget
| Comment (0)
| Trackback (0)
April 27, 2020
僕の考えた最強のお風呂場
4月か5月GWに実施、10月でもいいが気温が高い日は湿度も高いかも
裸で作業ができる位の温度で湿度が低い、換気扇を回しておけば半日でカラカラに
0日目：買う
防カビ仕様のシリコンシーラント（通販）
ヘラ、マスキングテープ、ブリーチ、小麦粉、ドメスト
https://www.amazon.co.jp/dp/B001HPKSNG https://www.amazon.co.jp/dp/B000TGHQU2/ https://www.monotaro.com/g/01300964/1日目：カビが見えるパッキンに塩素系漂白剤ペースト>ふき取りを何度か
塩素が漂うのでキツイ、部分的に小分けにしてて何日も掛けてやるのがいい
5日目：殺菌的掃除して乾かす（天井は半分ずつ掃除して洗い流す）
ゴーグル、キャップ、ゴム手、ブラシ、ドメストが粘度があって扱いやすい
6日目：再度カビが見えるパッキンに塩素系漂白剤ペースト>ふき取り
7日目：マスキングしてシーリング（フロ停止）
8日目：乾燥（フロ停止）
――――――――――――――――――――
ブリーチ＋小麦粉でペーストにする
タオルで拭いて水気を無くす
https://yourmystar.jp/c0_1/c1_5/articles/bath-clean-up-mold/ →白く見えるのが綺麗になってる感があっていい
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
タッチレスセンサー自動水栓化したい、2栓を1栓にできるのか？現状KVK
高さは35cmまで、蛇口は現状は＋10cm位くらい、希望は+20cm、+30cmまでOK
左右首振りも要る
2つ穴があるタイプはツーホール、台もあるので台付ツーホール、一つの水栓はワンホール
ツーホールはツーホールが良いらしいが防水キャップで防ぐ？
水の方にU字水栓と浄水器をつけて、湯の方にセンサー水栓を付ける？
https://0120656889.net/kitchen/kitchen3/
https://miraie.me/articles/339/
ツーホールなら間隔は204mmか102mmみたいだ、取付穴は33-39mmでまれに55mm
http://kvk-kitchen-suisen.seesaa.net/article/442811957.html
https://my-best.com/7788
水栓レンチが必要そう
https://www.monotaro.com/g/01448748/
https://www.monotaro.com/g/00364517/
https://www.monotaro.com/g/00370313/
https://www.monotaro.com/g/00537201/
https://www.monotaro.com/g/00442120/?t.q=KPS955
狭く効率よくした方がコスパはいいだろうな
Posted by funa : 12:40 PM
| Column
| Comment (0)
| Trackback (0)
April 21, 2020
Dexie
Indexeddbを使うならラッパーが要るやろ、とオモて、溺死やったらコレ便利やんってちゃうか、とオモて、知らんけど
■構造 DB > Table > kvs > record
(db=)schedule_db > schedule(=table) > kvs(Key=自動採番:Value=json=record)
kvsはid++が先頭に来ずでこう→ 1:"{"name":"aaa",reg_date":"20201027_11:57:24","id":1}"
var db = new Dexie("schedule_db");
db.version(1).stores({
schedule: '++id,name,reg_date'
});
■操作
var db = new Dexie("schedule_db"); schedule_dbというDBがセットされ
schedule: '++id,name,key,reg_date' テーブルscheduleにカウントアップKey：JSON{id,name,key,reg_date}が入る
もしschedule: 'name,key,reg_date'ならnameが自動で一番最初のカラムだからキーになる
キーの値が同じだとAddができない
stores()で一番最初に来るのが「主キー」
put()は追加しあれば更新、add()は追加のみで同キーがあればエラー
put()はupdateとしてDB上上書きされるように見えるがループすると全データが出てくる、謎
first()やlimit()やlast()で欲しいレコードを取得
toArray()ではobjが返るがobjは配列で引数0をつけてアクセス obj[0]
get('aaa')はkey=aaaの値を持つ最初の行、get({key: "sss", value: "ccc"})で条件付可
delete()の返り値Promiseに削除件数が入っている
■削除のレベルは行、表、DB
行削除 db.schedule.where({id: id}).delete().then (function(records){
表削除 trancateで db.schedule.clear(); コンソールには反映されていないがレコード削除済
db.table(storeName) で操作あるいはtables ->だめだった
表を複数持てる
db.version(1).stores({
genres: '++id,name',
albums: '++id,name,year,*tracks',
bands: '++id,name,*albumIds,genreId'
});
db.delete() DBを消せる（その後新たに再作成できる）
■insert
db.schedule.add({name: "aaa", key: "bbb", reg_date: getCurrentTime()}).then (function(id){
return db.schedule.get(id);
}).then(function (schedule) {
alert ("Date was set at " + schedule.reg_date);
■select
db.reserve.each(function(records){
if(records == null || records == ''){
alert ("No data found");
}else{
records.json;
toArrayは複雑になる、eachの方がよいかも、toArrayとeachの入れ替えてのselect発行が基本できるみたい
db.reserve.where({flg_del: 2}).toArray(function(records){
records.forEach(function(record){//obj.forEach直で行ける
Object.keys(record).forEach(function(key) {//直で行けずObject.keys().forEach()で
let val = this[key];
if(key == 'json'){
let v = JSON.parse(val);//直で行けずパースが必要
Object.keys(v).forEach(function(k) {
let v = this[k];
console.log(k, v);
}, v);
}
}, record);
});
複雑なものはOr句で出せる
db.reserve.where('reg_date').below(getCurrentTime()).or('flg_del').equals(2).limit(3).each(function(records){
console.log('List: ' + JSON.stringify(records));
And句はfunctionを取るが簡単な感じがする
db.reserve.where('datetime').below(display_expire_date).and(item => item.flg_del == 2).desc('datetime').limit(display_ex).each(function(records){
複数条件はwhereにオブジェクトとして記載するがbelow等のフィルターにつながらずエラー、シンプルならokだが
db.reserve.where({datetime, flg_del: 2}).below(display_expire_date).limit(display_ex).each(function(records){
複数条件にフィルターをつけるにはwhereに配列で記載するが一つはbelow、一つはequalsでフィルタが複数でうまくいかない、シンプルならokだが
db.reserve.where(["datetime", "flg_del"]).below([display_expire_date, 2]).limit(display_ex).each(function(records){
先頭行
db.schedule.where('name').equals('aaa').first().then (function(records){
x↓ダメ??
db.schedule.where('name').equals('aaa').toArray(function(records){
alert(records.reg_date);
x↓ダメ??
db.schedule.get({name: "aaa", key: "bbb"}).then (function(records){
alert (JSON.stringify(records));
for (let i in records) {
alert(i + ' item has ' + records[i].reg_date);
}
■Insert and select(キーのidを使う)
db.schedule.add({name: "ver1.0", key: document.getElementById("inputKey").value, value: document.getElementById("inputValue").value, reg_date: getCurrentTime()}).then(function(){
db.schedule.get('2').then(function(records){
alert(JSON.stringify(records));
}).catch(function(error) {
alert ("Ooops: " + error);
});
}).catch(function(error) {
alert ("Ooops2: " + error);
■Update
putは存在があれば更新、なければ挿入
db.schedule.put({key: "bbb", reg_date: set_date}).then (function(){
return db.schedule.get('bbb');
}).then(function (schedule) {
alert ("Date was set at " + schedule.reg_date);
keyが出せる場合はupdate()
db.friends.update(2, {name: "Number 2"}).then(function (updated) {
トランザクションや細かな変更はmodify()
db.friends.where("shoeSize").aboveOrEqual(47).modify({isBigfoot: 1});
modify推奨？→ https://dexie.org/docs/Collection/Collection.modify()
■Delete
db.schedule.where({name: "aaa"}).delete().then (function(){
return db.schedule.toArray();
}).then(function (records) {
if(records == null || records == ''){
alert ("No data found");
}else{
alert (JSON.stringify(records));
}
■アクセス
indexeddbは該当DBにどこからアクセスできるか＞同一ドメイン、ディレクトリでじゃない
保存場所
C:\Users\<ユーザ>\AppData\Local\Google\Chrome\User Data\Default\IndexedDB
C:\Users\<ユーザ>\AppData\Roaming\Mozilla\Firefox\Profiles\XXXXX.default\storage\default
■課題
SWで外部JSを扱うにはSW内に importScripts('dexie.js'); で埋め込む
SyntaxError: Unexpected token o in JSON at position 1 はオブジェクトが返っている
JSONはオブジェクトで扱うのが楽 JSON.stringify(records)とJSON.parse(records)で変換
console.log('json: ' + JSON.stringify(json));
for(i = 0; i < json.length; i++){
if(json[i] != null) {
console.log('id: ' + json[i].id);
下のようなロジックはあるテーブルのSELECTループ中に他のテーブルにアクセスする入れ子なのでエラー「NotFoundError: Failed to execute 'objectStore' on 'IDBTransaction': The specified object store was not found.」→配列に入れてIndeDBの問い合わせを一旦完了し、配列のループでIndedbを操作
self.addEventListener('sync', function(event){
db.que.each(function(records){
if(event.tag.startsWith('post-data:' + records.tag)){
event.waitUntil(postDataSW(db));
}
});
function postDataSW(){
db.reserve.where({flg_server: 2}).toArray(function(records){
DevTools failed to load SourceMap: Could not load content～のエラーが出た
効果あるか不明だがdexieの最終行のコレを削除した、文字コードがUTF8に変えたりも //# sourceMappingURL=include.prepload.js.map
■関連JS、Javascript
JSでAタグリンクを挿入するにはinsertAdjacentHTMLがよい
生成したタグを追加する前に掃除するにはdocument.getElementById('xx').textContent = null;
■テスト
https://www.bangboo.com/indexeddb/indexeddb_dexie_form.html
https://www.bangboo.com/indexeddb/test/indexeddb_dexie_form.html (ディレクトリ違い)
Posted by funa : 12:00 AM
| Web
| Comment (0)
| Trackback (0)
April 20, 2020
PWA
■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)
Posted by funa : 06:00 PM
| Web
| Comment (0)
| Trackback (0)
April 13, 2020
Can't touch this
https://twitter.com/ayapan94/status/1249703657639047168
純銅削りだしアシストフック（つり革触らない）
https://twitter.com/hideki0103/status/1249702599344840705
ハイジーンハンド
ボタンやノブを触りたないやろ～、つり革もスマホも～
----------
カッパ寿司食べ放題に行ってきた
回転寿司どれ位食べれるか知りたがったが30皿が精一杯だな
数皿のセットリストからのアンコール+α皿で酢飯を抑えるのがいいかと
焼肉ライクに行ってきた
一人専用だが狭い、火4で焼き火2で喰うを繰り返す感じか
17時まではご飯お代わり君だった、タレはあっさりで良いが
安いヤツだったが割高か、人気のヤツはどうなのか？
串カツ田中 17:00の食べ放題に行ってきた
これだと飲み物が安くならん、30串～40串くらいか
にんにくで気分が悪くなったかも
しゃぶ菜食べホに行ってきた
15枚+つくね3本はヤバかった、つくねは要らん、10枚以上は刻んだ方がいい
出汁はすき焼きがいい、鶏白湯は良くないかも、サッパリ香り系はいいねショウガとか
大阪王将に行ってきた
ラーメン普通、チャーハン：ラードタップリ普通、つーことで
天津飯＋餃子が一番いいな
マッチョに行ってきた
麺は少ない方がいいので並、徳島は甘すぎるな、醤油かな
にんにくはマシマシ、野菜魚粉はマシ（ちょいマシだと次郎感はないがモヤシばかり喰うもんでもないかも）
通常でチャーシュー4枚くらい、ダブルで8枚くらい
肉は喰いたいが全体的に美味しい訳でないな、若い時に汗かいて大量に喰った達成感の残り香
第一旭に行ってきた
サービスラーメン650円が安い15-18時、生中＋ぎょうざも500円になる
平時でも半ライス100円、ぎょうざ4個150円、ランチなら丼セットが得かな
スープのコクとコショウでしょうゆ旨味系では一番
らぁめん太郎に行ってきた
14-19時餃子無料、並らぁめん＋ライス、常時キムチ無料
天一ぽいので天一に行くならこっちの方が色々食えるので満足度が高いかも
もっこすに行っていない
火の国熊本っちゃー熊本やしな
Posted by funa : 11:30 PM
| Gadget
| Comment (0)
| Trackback (0)
April 1, 2020
G Suite -> Google workspace
https://www.softbank.jp/biz/cloud/google/gsuite/中途半端に移行するよりGsuite強制だと社員が勝手に使うシャドーITをなくせる
影響力のある社員の抵抗がないように、部長の関心協力→Topからのメッセージ
デモを実施する（利点、コラボレーション、使い方）
戦略・組織の把握＞パイロットユーザ（全社員の5%をGoogleガイド）＞エバンジェリスト公募＞全社
画面や機能がどんどん変わる、また簡単になっていく、カチッと決め打ちはしにくい
Gmail （アーカイブして検索で、容量無制限）
カレンダー （会議スケジューリングのお勧めがある）
Hangouts Chat （1to1かグループでチャット、共同編集、Voiceがあれば電話も、Botも）
ハングアウトMeet （ビデオ通話）
ドライブ （同時編集ができる、ここでドキュメントを作ると相互最新更新）
ドキュメント （Word/PDF/html/txt等読込書出、AIで画像やグラフやデザインをクリックだけで、無制限変更履歴）
スプレッドシート （Excelを変換して使う等
https://support.google.com/docs/answer/9331167?hl=ja ）
スライド （ブラウザでプレゼンテーション、PPT等から変換可、オフライン化も可だが問題がありそう）
Currents （Google+社内SNS、フォロー、投稿、サークル、コミュニティ）
フォーム （アンケート、クイズ/テスト、連絡先を含め申し込み欄）
Keep （メモ：音声入力や写真も、リマインダー、Gmailユーザ共有）
Jamboard （ホワイトボード、複数個所やマルチデバイスやGsuite連携）
サイト （一般公開HP、イントラ）
Apps script （aka GAS、マクロ、
https://tonari-it.com/google-apps-script-manual/ ）
Cloud Search （Gsuite以外にもコネクタでAWSやMS系、Jira、Sap、Salesforce等も検索可）
Vault （元が消されても全データ保存されている、管理者）
管理コンソール （ユーザグループ管理/SSO/MFA、監査ログ、MDM、セキュリティ系レポート、移行ツール/API/Oauth/OpenID）
https://gsuite.google.co.jp/intl/ja/features/ 無料試用14日間
///Google Admin 管理コンソール
上ナビのタスクにダウンロード等がある
"ダッシュボード" ？
"ユーザ"でリストをCSVでDLし、一括アップロードもできる
メールアドレス確認のメールが来ていた
"グループ"はグループオーナ/管理者/メンバー/組織全体/外部でアクセス管理
"組織部門"をツリー状に作成できる
"リソース管理"でビルディング/会議室/設備等々を設定
カレンダーでの会議室の自動予約キャンセル（使われていない会議室が解放）
"ディレクトリ設定"で連絡先の共有、外部ディレクトリ共有の設定
"デバイス管理"でモバイル/Chromeデバイス/ブラウザ/Googleミーティングハード/エンドポイント/Jamboard
よく分からない
"アプリ"で全ユーザONかOffか/SAMLアプリの追加
"セキュリティ"で2段階認証/アラートセンタ/ルール/PWポリシー/安全性の低いアプリへ接続/PW忘れのアカウント復元/PW強度監視/従業員IDでログイン時本人確認/3rdパーティSSO設定/Android用EMMプロバイダトークン/高度な保護機能/Context aware access/セッション時間/Cloud ConsoleとCloud SDKのセッション/OAuthのユーザーデータへのACL/API許可
"レポート" ？
"お支払い"で課金の管理、ユーザ数x費用/ドメイン登録費用/G Suite Enterprise/Voice Standard/Cloud Identity
"会社プロフィール"で管理者ID/サポート連絡先/タイムゾーン/即時か計画リリース/Googleからのお知らせ/ロゴ設定/追加ストレージ/コンプラ連絡先/データリージョン米か欧/会社自体のアカウント/カスタムURL
"管理者ロール"で特権/ヘルプデスク/サービス/ユーザ/モバイル等の権限者を設定
"ドメイン"でドメイン契約の設定/他のドメインで使用するためのドメインのホワイトリスト
"データ移行"でO365/Exchange等のメール/カレンダ/連絡先を移行できる
"サポート"でチャットできる
どうやってサポート？リモート？ファイル共有はできるのか？
ファイルが保存されているかどうか分かりにくい
保存が遅い場合も、待ってもう一度確認、全ての操作が記録されているはず
Gmailヘルプ
https://support.google.com/?
各アプリでもヘルプ？があるので確認できる、FAQみたいなのも表示される
設定ギア＞ここでほぼ設定している
Gmail
迷惑メール/削除したメールは、[ゴミ箱] に 30 日間保存され、その後完全に削除
メールはスレッドにまとめられ[削除] するとスレッド全体が削除
Gmail で使用できる検索演算子
https://support.google.com/mail/answer/7190?hl=ja 不要ラベル、Keyラベル等を付けて移動してもいいかも？
マイドライブ
組織内でもグループ内でもWeb公開もURLでも編集やコメントも細かく共有設定ができる
ファイルとしてDL、それをマイドライブにアップしG suite化できる
ドキュメント
提案モードで修正→ツール＞編集の提案の確認orチェック で承認ができる
スライド
プレゼンター（マウス↓でメニュー表示、ノートや質問）、オンラインプレゼンは不可
コレクション
+のURLのみ集められる？モバイルやPCは駄目かも
Keep
メモの共有を外部にするとメールが送信
カレンダー
デスクトップ通知は各種許可設定があり調べよ、Chromeの機能 chrome://flags/#enable-native-notifications
何をサルベージできるのか不明：メールログ、Vaultで削除ファイルは見れる？
G-suiteはオフラインでも使える
管理者側設定：許可設定
ユーザ側設定：オフライン許可設定
O365とのプロコン
G-suiteは少し安い、使用が簡単だがプア、共有や共同編集に優位、オフラインで機能が弱い
■Gmail 自動振り分け（迷惑メールのブロック）
設定ギア＞全て表示＞フィルタ関連のタブ
含むの項目使いやすい（特殊文字を省いて半角スペース区切りでキーワード網羅がいい、subject等は括弧や特殊文字で思うように行きにくい）
各項目間はAnd条件：あいうえお かきくけこ
各項目でORやAND指定ができる：あいうえお OR かきくけこ
覚えておきたいGmailの絞り込み条件指定方法｜フィルタ利用時には検索演算子を使おう (keizokuma.com) フィルタや自動化ルールで正規表現を使用する - 検索広告 360 ヘルプ (google.com) gmailのフィルタ機能は超便利 - 愚鈍人 (hustle.ne.jp)■Google spreadsheet
Googleスプシのvlookupは一番左の列のみしか検索しない仕様
■Google Form
回答で保存先スプレッドシートを指定できる https://www.infact1.co.jp/staff_blog/webmarketing/43713/
■GAS
doPostとdoGetが使えるがほとんど何もできない？
GASをWeb公開して実行(doPostとdoGet) | アンクルエンジニアの気づき (uncle-atsushi.com)■Googleデータポータル（データスタジオ）
ディメンション：未集計の値、指標を出す項目
指標(metrics)：集計、sumとか、ディメンションを計るという位置づけ
データを統合：複数の表を各種joinする
フィルタ：ディメンション等の条件で絞る
コントロール：プルダウン等の操作系を作る、適応するには適応したいものを含めて、配置＞グループ
事前にScheduledQueryでBQに表を日次で整備しておく等もあり
表の指標に先月とのdiffを計算 ROUND(costThisMonth - NARY_MAX(costMonthAgo, 0), 0)
ヌルぽなら0に変えて引く
棒グラフは期間のディメンションにperiod、ディメンションにperiod、指標にcost等でsumになる、並び替えをperiod
デカい表でもデフォルトのデータソース更新は12時間ごとで使用に耐えるかも、joinもできそうで中間テーブルを作る意味はどこにある？集計やカラム数の調整のパフォーマンス向上はどれほど？
→サマって中間テーブルを作った方が制御やパフォーマンスが良い（無いとつらい）
→固定値等の素のデータをDataStudioは扱えないと思われ、SQLで定義しバッチでDB table保存しておくこと(viewはダメぽ)
Data Studio でフィルタパラメータを URL 指定する方法 | by Masahiro Yasuda | google-cloud-jp | Medium HTML等にembedする際にURL引数で操りやすくなる
PARSE_DATE("%Y%m", period)でテキストをLookerStudio上で日付扱いにでき指標にできる
期間比較を使い前年対比のグラフを出したいのだがBQ側でDateである必要がありそう（日付形式がyyyy-mm-dd等で決まっているようだ）
期間のディメンションを設定することで日付カラムの指定ができる
デフォルトの日付範囲や比較期間が設定できるようになる
ソースの型を変更した等の小さな変更でもソースを選択しなおし再接続すること
■Zapier
IFTTTみたいなやつ、アプリ間連携が簡単にできる
ドキュメントがあるのかないのか、全然見つからないので自分で検証が必要、簡単だが手間
少し値を変えれば保存されるので弄る前にコピーをしコピーを弄る
Zap上のGoogleSpreadsheetのIDは行番号を含む行作成時のユニークID、他の行が削除され行番号がずれるとIDが取得できなくなる、RowID(他の行が削除されても参照が維持される)かRowNumber(行番号で再度他のカラムで検索すれば新たに参照可)を使いたい
■Slack
ChannelにJoin
スレッド返信（@メンションを付けた方がいい？）
リアクションでアイコン返信
メッセージ編集や削除
ブックマーク
ダイレクトメッセージ：
新規メッセージで相手を選んで送信
@メンションを付けてチャンネルに投稿するメッセージとは異なる
```で挟むと囲み線、`で囲むと囲み線で赤字
うまくいかんときは文字を選択し右クリックで</>□等で
>>>を付けると引用
検索オプション
in:channel from:userid
ナビを常時表示：サイドバーopen（？）
https://dekiru.net/category/service-software/slack/
Posted by funa : 12:01 AM
| Web
| Comment (0)
| Trackback (0)
March 28, 2020
恐慌からの脱出方法
ピケティ『21世紀の資本』たまむすび
https://miyearnzzlabo.com/archives/63853
ニューディール政策で金持ちに税金 第二次世界大戦の時には90％に
1960年ぐらいまでいろんな形でずっと再分配して「中流」というものが生まれた
フォードは共産主義が嫌いだった、一般の給料の2倍以上にし
労働者を中流にすることで、余裕を持って車を買う消費者にした
1980年ぐらいまで日本って金持ちに対する税金は最高で75％だった
大企業に対しては法人税は50％だった
だから、日本は1970年ぐらいに「1億総中流」って言われた
2006年以降長者番付は発表されてない
金持ちばかりが金持ちになって、貧乏人にはいつまでたっても貧乏のまま
強制的に国が法律でそれを平等にするように力をかけなければ絶対に中流は生まれない
富の再分配をするしかない
モノポリーって大恐慌の時に破産した人が作ったゲーム
起業家が暴走して勝手なことをやり続けると完全な独裁になってその人以外の経済活動が全部潰されてしまう
倍の差をつけたらどうなるか？っていう実験をこの映画の中ではする
最初からどんどんどんどん物件を買える人と全然買えない人に分かれる 絶対に逆転が起こらない
で、逆転が起こらない状態でゲームをしている人はどうなるかっていうと、
最初から倍のお金をもらった人が、最初からお金をもらっていなかった人をバカにするようになる
サディスティックにいろんな不動産とかを買って、最初にお金を持ってなかった人を追い詰めていくような態度を取る
3年間にダウ平均1.5倍ぐらい 1億円を持っている人はそれが1億5000万円になっている
1億円を持っている人は何もしなくても、年収が1600万円
-----------
貯蓄は善行、投資も善行とすると→金融や不労所得自体は悪ではない？
大企業も金融や投資で利益を上げる、周りがやっていると参加せざるを得ない
何が駄目か→格差が駄目である、適切に再分配 本業回帰
-----------
ニューディール政策
国家が市場を統制して人々を保護し、また公共事業を積極的に推進して雇用を創出
「金本位制」を停止 政府が通貨を発行する「管理通貨制度」
預金者を保護するための「連邦預金保険公社」の設立
銀行を安定して経営するために証券と分離させる「グラス・スティーガル法」
「農業調整法（AAA）」を制定 農業生産量を政府が管理
「ワグナー法」を制定し、労働者の「団結権」「団体交渉権」「ストライキ権」
市場原理を重視する大企業などの反発
後世の研究者たちからも、不況脱出の決め手とはならなかったという指摘がある
世界恐慌前の水準を超える決定打となったのは、アメリカの第二次世界大戦への参戦と
Posted by funa : 02:47 PM
| Column
| Comment (0)
| Trackback (0)
March 1, 2020
CSS Grid
[B! css] 2022年のモダンCSS改 (hatena.ne.jp)
中央揃え
.container{
display: flex;
justify-content: center;
align-items: center;
}
.container{
display: grid;
justify-content: center;
}
アンカーリンク移動をスムーズにする
html {
scroll-behavior: smooth;
}
スクロールで位置をずらすトップからのマージン
section {
scroll-margin-top: 60px;
}
すりガラス
.box{
backdrop-filter: blur(8px);
background-color: rgba(255, 255, 255, 0.5);
}
1行でも両端ぞろえ
th{
text-align-last: justify;
}
ナビがfixedの場合の本部のスクロール連動をなくす
.navi{
overscroll-behavior-y: contain;
}
＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
2020-03-01 wrote
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
Posted by funa : 03:03 AM
| Web
| Comment (0)
| Trackback (0)
