December 25, 2020
Promise
https://rightcode.co.jp/blog/information-technology/javascript-promise
https://rightcode.co.jp/blog/information-technology/javascript-async-await
http://www.tohoho-web.com/ex/promise.html
https://sbfl.net/blog/2016/07/13/simplifying-async-code-with-promise-and-async-await/
https://qiita.com/niusounds/items/37c1f9b021b62194e077
https://qiita.com/soarflat/items/1a9613e023200bbebcb3
非同期関数は処理の順序を制御できない問題があった、そこでPromise
↓
Promise オブジェクトは then(ok_callback, ng_callback) というメソッドを持ちます。
then() はPromise が成功または失敗になるまで処理を受け流し、
処理を.then()で繋げ順番を確保することが可能
成功時に ok_callback を、失敗時に ng_callback をコールバック関数として呼び出します
.then() は第一引数に成功時のコールバック関数、第二引数に失敗時のコールバック関数
.catch(ng_callback) は、.then(undefined, ng_callback) と同じ意味
.catch() は処理中に発生した throw をキャッチできる
ES2018(ES9) では、.finally() がサポートされました
function aFunc3(data) {
return new Promise(function(okCallback, ngCallback) {
setTimeout(function() {
if (Math.random() < 0.30) {
ngCallback(new Error('ERROR!'));
} else {
okCallback(data * 2);
}
}, Math.random() * 1000);
});
}
function sample_finally2() {
aFunc3(100).then((data) => {
console.log(data);
return aFunc3(data);
})
.then((data) => {
console.log(data);
return aFunc3(data);
})
.then((data) => {
console.log(data);
throw new Error('ERROR!!!');
})
.catch((e) => {
console.log("catch");
console.log(e);
})
.finally(() => {
console.log('*** Finally ***');
});
}
//200 400 800 catch Error:ERRROR!!! *** Finally ***
Promise.all() は配列で指定された全てのPromiseタスクを待ち全てが完了した時点で .then()を呼ぶ
Promise.race()ならいずれかのPromise
function sample_all() {
p1 = taskA();
p2 = taskB();
Promise.all([p1, p2]).then(() => {
console.log("taskA and taskB are finished.");
});
}
↓
ES2017 では、async/await がサポートされました
async と await を用いることで、Promise に対応した非同期関数を、同期関数の様にシンプルに呼び出すことが可能となります
同期関数の様に呼び出したい非同期関数を呼び出す際に await をつけます。await を呼び出す関数に async をつけます
async function sample_async_await_with_catch() {
var val = 100;
try {
val = await aFunc3(val);
console.log(val);
val = await aFunc3(val);
console.log(val);
val = await aFunc3(val);
console.log(val);
} catch (e) {
console.log(e);
}
}
■コールバック関数
広い定義でいうと「高階関数に渡すための関数」
「関数を受け取る関数」は「高階関数」、つまりhello()がコールバック関数
// 関数を2回実行する関数！！
function doTwice(func) {
func(); // 1回目Hello！
func(); // 2回目Hello！
}
// あいさつするだけの関数
function hello() {
console.log('Hello!');
}
// あいさつを2回実行する
doTwice(hello);
========================================
もっと詳しく、もっと分かり易く、どう使うか↓
https://knowledge.sakura.ad.jp/24890/
https://jsprimer.net/basic/async/
https://dev.classmethod.jp/articles/javascript-asynchronous-processing/
■処理の繋がり
１）コールバック関数
ある関数の処理が終われば次のコールバック関数を呼ぶという指定がそれ
歴史的にはエラーファーストコールバック（のルール）
処理が失敗した場合は、コールバック関数の1番目の引数にエラーオブジェクトを渡して呼び出す
処理が成功した場合は、コールバック関数の1番目の引数にはnullを渡し、2番目以降の引数に成功時の結果を渡して呼び出す
fs.readFile("./example.txt", (error, data) => {
２）Promise（非同期処理に対するPromise→順番を合わせる意味では同期処理ではと思う？JSはシングルスレッドかつ非同期という糞？仕様）
ある関数の処理が終わればPromiseオブジェクトを返す
JSがシングルスレッドだが 処理を一定の単位ごとに分け処理を切り替えながら実行する並行処理（concurrent）の仕様のため 順序を考慮する必要がある
非同期処理の実行中にとても重たい処理があると非同期処理の切り替えが遅れる
Promiseオブジェクトは3つの内部状態を持ちます。
pending（保留）: まだ非同期処理は終わっていない（成功も失敗もしていない）
fulfilled（成功）: 非同期処理が正常に終了した
rejected（拒否）: 非同期処理が失敗した
初期状態はpendingで、一度fulfilledまたはrejectedになったらそれ以降は状態は変わらず、非同期処理の終了時に返す値もそれ以降は変わらない
Promiseのコンストラクターは関数を引数に取って、その関数がさらに2つの関数を引数に取る
1番目の関数（resolve）に引数を渡して実行すると状態がfulfilledになり、引数の値はPromiseオブジェクトが保持する値になる
2番目の関数（reject）に引数を渡して実行すると状態がrejectedになり、引数の値はPromiseオブジェクトが保持する値になる
関数が例外を投げた場合も状態がrejectedになり、投げた値がPromiseオブジェクトが保持する値になる、throwする値をrejectedに渡して実行した時と同じ
then()は2つの関数を引数に取り、Promiseの状態がfulfilledになったら1番目の関数が、rejectedになったら2番目の関数が実行されます。
then()の1番目の引数が関数でなければidentity function（入力値をそのまま返す関数）が代わりに使われます
2番目の引数が関数でなければthrower function（入力値を例外として投げる関数）が代わりに使われます
catch()は1番目の引数にidentity functionを指定したthen()と同じ
上の挙動をオレオレPromiseをYakusokuで作っているので分かり易い https://knowledge.sakura.ad.jp/24890/
なお、本質としてはコレ、下記ソースが決まりの流れ、ひな形としてヤリ慣れるしか
１）時間が掛かる処理をPromise化して順序立てよう
２）成功と失敗のコールバックを指定しよう
//処理にコールバック関数を入れて成功と失敗時の型で終える
function dummyFetch(cmt, callBack) {
setTimeout(() => {
if (cmt.startsWith("/success")) {
callBack(null, { body: `Response body of ${cmt}` });
} else {
callBack(new Error("Bad"));
}
}, 1000 * Math.random());
}
//プロミスを入れるためラッパーを関数にかます
function aaaFilePromise(cmt) {
return new Promise((resolve, reject) => {
dummyFetch(cmt, (err, data) => {
if (err) {
reject(err); // 失敗: 内部状態をrejectedにする
}
else {
resolve(data); // 成功: 内部状態をfulfilledにする
}
});
});
}
//プロミスチェーンでのフロー
aaaFilePromise("/success/passwd")
.then((data) => { // 読み出しに成功したらresolve()に渡した値が引数として渡される
console.log("1", data);
//return 'next';//テキストがあってもなくても次のthenに行く、省略でもテキストでも第一引数関数に行く成功側
return aaaFilePromise("/etc/text");//エラーで次のthenの失敗側の第二引数関数にきっちり行く
})
.then((data) => {
console.log("2", data);
return aaaFilePromise("/success/shadow1");
}, (data) => {
console.log("2e", data);
return aaaFilePromise("/success/shadow2");
})
.then((data) => {
console.log("3", data);
return aaaFilePromise("/etc/shadow");
})
.catch((err) => { // reject()に渡した値が引数として渡される
console.log("error", err);
});
then()/ catch()は、引数で渡された関数の戻り値から新たにPromiseオブェクトを作り、そのオブジェクトを返します。そのためメソッドチェーンが可能
引数に渡した関数の戻り値がPromiseオブジェクトの場合はそのオブジェクトをそのまま返す、そうでなければ戻り値をPromiseで包んで返す
エラーでキャッチに飛ぶ訳ではなく次のthen第2引数関数に飛んでいる、省略でcatchに行っているように見えるだけ
dexieやPWAでの提供があり使う（処理を順序立てて使うようプログラムを組む時に
dexie: db.schedule.where('site').equals('sche').first().then(function(records) {
pwa: caches.keys().then(function(keyList){
return Promise.all(keyList.map(function(key){
３）async / await
promiseは順番決めができたがasync/awaitは順番を扱う処理もできるsetTimeout/setIntevalがプロミスチェーンだけでは時間を止められない
シングルスレッドから似非スレッドで分離し非同期になるから、awaitを入れると同期する↓
const wait = (sec) => {
return new Promise((resolve, reject) => { setTimeout(resolve, sec*1000); });
};
async function arrKick_async(arr) {
for(let i=1; i<=num_arr; i++){
arr = await kickPromise(arr);
await wait(2);
}
}
arrKick_async(arr);
========================================
JSネイティブとPromiseとasyncが混ざった場合は同期しない、then()すら超えてくる↓
４）コールバック地獄
結局コールバック地獄が扱いやすい（スレッドの切り替えがなければ同期ができる）、最近のJSフレームワークは全部Promise化しているらしいが
例）キャッシュを保存し、そのステータスを取るようにAsyncやPromiseで保存待ちの順番をにしても、待たない
//隙間がないと1度エラーだとエラーになりっぱなし
let num_cache;
num_cache = getCacheStatus();
if(num_cache == 0 || !num_cache){
num_cache = getCacheStatus();
if(num_cache == 0 || !num_cache){
num_cache = getCacheStatus();
if(num_cache == 0 || !num_cache){
num_cache = getCacheStatus();
if(num_cache == 0 || !num_cache){
//setTimeoutで隙間があっても関数スレッドの返り値を代入するスレッド切替時に、返り値を待つスレッドの方は次の処理に進んでしまいIF判定ができない
let s = setTimeout(function(){
let num_cache1 = getCacheStatus();
if(num_cache1 == 0 || !num_cache1){
s = setTimeout(function(){
let num_cache2 = getCacheStatus();
if(num_cache2 == 0 || !num_cache2){
s = setTimeout(function(){
let num_cache3 = getCacheStatus();
if(num_cache3 == 0 || !num_cache3){
s = setTimeout(function(){
let num_cache4 = getCacheStatus();
if(num_cache4 == 0 || !num_cache4){
//Func返り値やPromiseやAsyncでのスレッドの切り替えがないDOMの判定であれば上手くいく
let s = setTimeout(function(){
getCacheStatus();
if(document.getElementById('mes_filenames').innerHTML == 'none'){
s = setTimeout(function(){
getCacheStatus();
if(document.getElementById('mes_filenames').innerHTML == 'none'){
s = setTimeout(function(){
getCacheStatus();
if(document.getElementById('mes_filenames').innerHTML == 'none'){
s = setTimeout(function(){
getCacheStatus();
if(document.getElementById('mes_filenames').innerHTML == 'none'){
s = setTimeout(function(){
getCacheStatus();
if(document.getElementById('mes_filenames').innerHTML == '<?php echo $lang_page->install_none; ?>'){
function getCacheStatus(){
let num_caches = 0;
let num_success = 0;
caches.keys().then(function(keyList){
return Promise.all(keyList.map(function(key){
caches.open(key).then(function(cache) {
cache.matchAll().then(function(response) {
document.getElementById('mes_filenames').innerHTML = '';
let s;
let o;
for(const value of response){
s = value.status;
o = value.ok;
document.getElementById('mes_filenames').insertAdjacentHTML('afterbegin', value.url + '<br>');
if(s == '200' && o){
num_success++;
}
num_caches++;
}
if(num_caches > 0){
document.getElementById('mes_progress_rate').innerHTML = 'Progress: ' + num_success / num_caches * 100 + '%';
}else{
document.getElementById('mes_filenames').innerHTML = 'None';
}
});
});
}));
});
return num_caches;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
thenの入れ子だと親の部分だけ先に進んでしまう、入れ子ダメで親子を作れば親→子の一方方向で子で終わるトーナメント構造で(上がらない)
test1().then((result) => {
test2().then((result) => { //fuok });
})then(function() これは入れ子
↓
test1().then((result) => {
test2().then((result) => {
//fuok
})then(function(){ //fuok2 }); これでトーナメント構造
})catch(function(e)
promiseチェーンでthen毎にに欲しい引数を出すが、複数であればそれらの引数をthenに渡せない、下記1は駄目
１）thenで一つの引数になるようにロジックを組む（thenのトーナメント構造、一階層上で変数に入れる等）
}).then(function(response){
return [response.json(), arr_del];
}).then(function(v) {
json = v[0]; arr = v[1];
２）callbackとresolveに配列を使うとOK、オブジェクトでもいいかも
function dummyFetch(cmt, callBack) {
if(Array.isArray(cmt){
var p = cmt[0];
var s = cmt[1];
}else{
var p = cmt;
var s = 1;
}
setTimeout(() => {
if (p.startsWith("/success")) {
var r = [p, ++s];//これ不可[p, s++]
callBack(null, r);
} else {
callBack(new Error("Bad"));
}
}, 1000 * Math.random());
}
function aaaFilePromise(cmt) {
return new Promise((resolve, reject) => {
dummyFetch(cmt, (err, data) => {
if (err) {
reject(err);
}
else {
if(Array.isArray(data){
var p = data[0];
var s = data[1];
}else{
var p = data;
var s = 1;
}
resolve([p, s]); // 成功: 内部状態をfulfilledにする
}
});
});
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Promise化していない関数を使いたいが、そのまま使うかthen化できるようにするか？
１）次thenに進みたい元Funcの処理としてresolveの返り値に入れる、ダメなら省略可だがreject()に渡しcatchする
２）次thenには適当でもいいのでreturnで進む
function test1 () {
return new Promise((resolve, reject) => {
const a = 1;
const b = 2;
resolve([a, b]);
})
}
test1().then((result) => {
console.log(result[0]); // 1
console.log(result[1]); // 2
return 'go next';
}).then(function(){
エラーハンドリングしたい、よくわからんが下記で動作に違いがでた、rejectはJSがエラーを吐いた
１）catchさせるにはthrow new Errorし、alertを出す
２）catchはしないが次のthenには移動させないためreturn false
}).then(function(json){
if(json.init == 'Not appropriate access'){
throw new Error('Server warning');
}else if(json.init == 'No data'){
//reject("initiate!");
return false;
}else{
resolve(json);
}
}).catch(function(error){
alert('Ooops: ' + error);
});
Promise.allを使って、3つのpromiseを同時に実行、allはすべての非同期処理がresolveされたタイミングで結果を返
Promise.all([test1, test2, test3]).then(function() {
console.log("Fourth");
もっと簡単に async, await, Promise - Qiita■Javascript
https://www.bangboo.com/cms/blog/page_325.html
Posted by funa : 01:06 AM
| Web
| 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 1, 2020
G Suite -> Google workspace - GWS
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は少し安い、使用が簡単だがプア、共有や共同編集に優位、オフラインで機能が弱い
■アカウント
GWSアカウント
GWSグループメール
GWSメーリングリスト(ML間のみで連絡できる)
個人gmailアカウント(Googleアカウント)
GWS以外のメール（メールボックス）※独自ドメインでのGoogleアカウントを作成すればいい
独自ドメインでGoogleアカウントを取得する方法 (infact1.co.jp)Gmailアカウントの作成方法と注意点：Tech TIPS - ＠IT (itmedia.co.jp)■Gmail 自動振り分け（迷惑メールのブロック）
設定ギア＞全て表示＞フィルタ関連のタブ
含むの項目使いやすい（特殊文字を省いて半角スペース区切りでキーワード網羅がいい、subject等は括弧や特殊文字で思うように行きにくい）
各項目間はAnd条件：あいうえお かきくけこ
各項目でORやAND指定ができる：あいうえお OR かきくけこ
覚えておきたいGmailの絞り込み条件指定方法｜フィルタ利用時には検索演算子を使おう (keizokuma.com) フィルタや自動化ルールで正規表現を使用する - 検索広告 360 ヘルプ (google.com) gmailのフィルタ機能は超便利 - 愚鈍人 (hustle.ne.jp)■Google spreadsheet
Googleスプシのvlookupは一番左の列のみしか検索しない仕様
アプリでシートを読み込むなら名前付き範囲が便利、文字列を変えず範囲を扱えメンテフリーになるから
/// Connected sheetsのデータ漏洩問題、というかスプシ自体ザル
Connected sheetsを閲覧するだけならBQ権限不要でスプシへの閲覧共有だけで良い
BQ権限保持者でデータロードが必要だが、誰かが一度ロード済みでキャッシュがあれば他人はBQ権限不要ということ
抽出シートに保存しておいた場合のみでなくBQ連携画面だけでも見れてしまう
時間制限設定ができるか、GWS制御設定があるかは分らんがリスクは大きい
スプシに参照権限だけだとConnected sheetsのBQリロード更新はできない
抽出シートの別のセルに転記するにはスプシへの編集権限が必要
スプシの編集権限があればBQのクエリが編集できる
↓
●BQ権限で管理ができず、スプシデータ削除やスプシ権限の厳格な管理が必要
/// 特定のデータだけ共有
スプシ設定のIMPORTRANGE関数で共有したいデータだけ別のシートに反映させ、別シートのみ共有できる
＞スプシの参照権限だけでBQ権限がなくても閲覧可能、関数からのアクセス許可は必要（両方オーナならポチるのみ）
＞閲覧共有のないスプシでさえ、URLとシート名があれば、importrangeを仕込めば見れそうなところまで行けるのが危険
■Google Form
回答で保存先スプレッドシートを指定できる https://www.infact1.co.jp/staff_blog/webmarketing/43713/
■GAS
doPostとdoGetが使えるがほとんど何もできない？
GASをWeb公開して実行(doPostとdoGet) | アンクルエンジニアの気づき (uncle-atsushi.com)■Googleデータポータル（データスタジオ > Looker studio）
ディメンション：未集計の値、指標を出す項目
指標(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引数で操りやすくなる
レポートを埋め込む - Looker Studioのヘルプ (google.com) [ファイル] > [レポートを埋め込む] > [埋め込みを有効にする] 設定
PARSE_DATE("%Y%m", period)でテキストをLookerStudio上で日付扱いにでき指標にできる
期間比較を使い前年対比のグラフを出したいのだがBQ側でDateである必要がありそう（日付形式がyyyy-mm-dd等で決まっているようだ）
期間のディメンションを設定することで日付カラムの指定ができる
デフォルトの日付範囲や比較期間が設定できるようになる
ソースの型を変更した等の小さな変更でもソースを選択しなおし再接続すること
BQのデータ取得はページの作成者：オーナでの認証、サービスアカウントでの認証、閲覧者での認証の3種類から選択できる
オーナにBQ権限があればいいか、SAか、各閲覧者か、決められる。ページの共有も要るが
■サービスアカウントでのGWSドライブやGAS利用
GWSのテナント設定で許可ドメインは一つだけ設定できる
それ以外のドメインはGWSテナントに入れない
テナント内にサブ組織を作成し、そのサブで共有ドライブを外部共有可にする
全ての外部共有を許可するのでセキュリティ問題が残る
GWSのドメイン委任設定をSAのクライアントIDに対して設定
テナント全体のアカウントでGWSアクセス可になってしまう
SAのグループがアクセス可能なOUを作りOU内で共有ドライブを作成
これは良さそう
■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 1, 2020
CSS Grid
Grid、Flex、旧(Float、position) は混在する
位置の調整はposition
親要素にposition:relative
該当要素にposition: absolute;
top: 100;
right: 20;
z-index: 10; 必要なら大きいのが上
CSSのpositionを総まとめ！absoluteやfixedの使い方は？ (saruwakakun.com)中央寄せ
文字を中央寄せしたいなら外のブロック要素に「text-align:center」
ブロック要素自体をしたいなら 「margin-left:auto; margin-right:auto;」
paddingにautoは指定不可、margin: autoの中央寄せの微調整はpaddingで
widthプロパティの初期値はauto (横いっぱいに広がっているのでwidthを入れる)
inlineの要素では、widthとheightの指定不可
.center_area {
min-width: 450px;
max-width: calc(61% - 20px);
margin-top: 40px;
margin-left: auto;
margin-right: auto;
padding: 0px; 50px; 0px; 0px;
}
CSSの余白（margin/padding）と中央配置にする方法【CSSの書き方入門】 | Skillhub[スキルハブ]テーブルの幅指定
複数テーブルのレイアウト整合はtr width%指定とtd/tr nowrapを細かくすればなんとかなる
AJAX
JS fetchで
【CSS】colorが効かない/文字色が変わらない原因と修正方法 (csshtml.work)点数制、同点なら後述が勝つらしい
■CSSアニメーション
transition に時間を入れておき、JSでclassをremoveしたりaddする
変化にその時間分を掛ける動作となる
now_classからfuture_classの2つをCSSで作り、JSでremoveやaddをする
[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
CSSレイアウト再入門:完全に理解してCSSを記述するために - Speaker Deck
実例で学ぶFlexboxとCSS Gridの使い分け – TAKLOG (tak-dcxi.com)
2024年、Web制作者がチェックしておきたいCSSの新機能のまとめ | コリス
Posted by funa : 03:03 AM
| Web
| Comment (0)
| Trackback (0)
January 21, 2020
Update your home page
そもそも下手糞魂、
BRF BANGBOO
のトレーナを思い出したわSince 1992
■Web系通信系
/// WebRTC
リアルタイムにブラウザ間P2Pで送受信
ウェブブラウザ間のボイスチャット、ビデオチャット、ファイル共有が可能
/// 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でやり、処理はサーバー側でやる
表示はメディアであり、処理はコンピューティング、そういうタイプで
==========
https://twitter.com/ken1kuroyama/status/1220258901850869760トライアルは乗ったことがないが、コレは分かりやすいな
ヒザを緩めてから足ピンしながらチンコをハンドルに擦り上体反るんやな
MXとは逆やからこういうムーブは普通体が反応せえへん、
Posted by funa : 12:20 AM
| Web
| Comment (0)
| Trackback (0)
November 22, 2019
Cloud 9
無料でクラウドを喰らう
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
大体の設計をして設定を詰めていく流れでいいのかね、使いたいサービス重点で
きちんと動けば気持ちいいかな、箱庭的な雰囲気もある
Posted by funa : 09:42 PM
| Web
| Comment (0)
| Trackback (0)
January 1, 2019
Adobe Sensei
安定性がない、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対応
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■ILLUSTRATOR CS2 がWINDOWS10でフリーズする件
https://p2bco.net/26122020-10490.html
Window左下のスタートボタン ⇒ 「設定」
「設定」 ⇒ 「時刻と言語」 ⇒ 左側にある「言語」 ⇒ 右の「優先する言語」の「日本語」
右の「優先する言語」の「日本語」 ⇒ 「オプション」 ⇒ 左の「Microsoft IME」入力方式エディター
左の「Microsoft IME」入力方式エディター ⇒ 「オプション」 ⇒ 「全般」
「全般」 ⇒ 「以前のバージョンの Microsoft IME を使う」をオンにする
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■Flash廃止
基本はHTML5、WebGL、WebAssemblyで作り直すがIEモードでFlashが使えるようにできる
●MS
https://blogs.windows.com/japan/2020/09/14/update-adobe-flash-end-support/
Microsoft Edge では Internet Explorer モードで実行する場合に、Adobe Flash Player をラグインとして読み込みできるようにいたします。本質的に、Internet Explorer 11 でもプラグインを使用できるようになります。マイクロソフトが提供する Adobe Flash Player からの移行後は、サードパーティ製プラグインの扱いとなるため、マイクロソフトのカスタマー サポートの対象外
2021 年 1 月より、Adobe Flash Player は既定で無効化され、2020 年 6 月にリリースされた KB4561600 よりも古いバージョンはすべてブロック、「Update for Removal of Adobe Flash Player」という更新プログラムが提供される予定、サポート終了前にお使いのシステムから Adobe Flash Player を削除したい場合は、2020 年秋の Microsoft Update カタログにて公開されるこの更新プログラムをご利用ください。この更新プログラムは永久的で、アンインストールできませんのでご注意ください。
●IM
https://product.intra-mart.support/hc/ja/articles/360030883894-2021-1-11%E4%BB%A5%E9%99%8D-Adobe-Flash-Player-%E3%81%8C%E5%88%A9%E7%94%A8%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%8F%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99-%E5%90%8C%E3%83%84%E3%83%BC%E3%83%AB%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%9F%E5%BC%8A%E7%A4%BE%E8%A3%BD%E5%93%81%E3%81%AE%E4%B8%80%E9%83%A8%E7%94%BB%E9%9D%A2%E3%82%82%E5%88%A9%E7%94%A8%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%8F%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99
Adobe Flash Playerの実行をブロックされないようにホワイトリストに記載することで動作するものと考えられます（1,2の対応が必要です）。
1. Adobe Flash Player の入手が可能である2020年内中に Adobe Flash Player インストーラを入手してください。
上記のSandbox環境に入手した Adobe Flash Player をセットアップします。
2. 以下の回避方法を Adobe社 の法人サポートご加入のもと対応してください。
・管理者がエンタープライズ向け機能を有効化し利用のブロックを停止してください。
・エンタープライズ向けの機能として、Adobe Flash Player 有効サイトのホワイトリストの指定可能としてください。
・ホワイトリストは Adobe Flash Player の設定ファイル(mms.cfg) に記載してください。
参考：https://www.adobe.com/content/dam/acom/en/devnet/flashplayer/articles/flash_player_admin_guide/pdf/latest/flash_player_32_0_admin_guide.pdf
インストールされてるバージョンはここで分かる
https://get.adobe.com/jp/flashplayer/about/
インストール場所
C:\\Windows\\System32\\Macromed\\Flash
mms.cfg（なければ~テキストで作成可）
C:\\Windows\\System32\\Macromed\\Flash あるいは C:\\Windows\\SysWOW64\\Macromed\\Flash
●Adobe
https://www.adobe.com/content/dam/acom/en/devnet/flashplayer/articles/flash_player_admin_guide/pdf/latest/flash_player_32_0_admin_guide.pdf
Insterllerの確保できない（WinではFlashプリセットされており、WinUpdateで更新をする）
C:\\Windows\\SysWOW64\\Macromed\\Flash
どれか不明 GetFlash.exe, FlashUtilnn‐n_ActiveX.exe, FlashUtilnnn_Plugin.exe, FlashUtilnnn_Pepper.exe, or FlashPlayerUpdateService.exe, install_flash_player_active_x.msi, install_flash_player_11_activeX.msi
●IEでFlashを一時停止して問題なく使用ができるか確認
メニューバーの[ツール]→[アドオンの管理]を選択します。
[アドオンの管理]画面が表示されます。
[Shockwave Flash Object]を選択し、[無効にする]をクリックします。
●JavascriptがFlash Flashを実行できるJavaScriptライブラリ
JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換。 - Qiita
HTML5でFlashを実行できるJavaScriptライブラリまとめ | hifive開発者ブログ (htmlhifive.com)
等々
Posted by funa : 11:11 AM
| Web
| Comment (0)
| Trackback (0)
August 11, 2018
Summer time blues
多言語でシステムを作ってたつもりだが、時間について意識してなかったかも。
面倒だが時間ができれば要チェックだ。サマータイム
■国際時間
■サーバーマシン
■クライアントマシン
■ローカル時間
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に置く等の物理的に設計する？
※忘れかけ、セキュリティグループとディストリビューショングループ
SGはフォルダへの権限等用、グループメール付SGやメール無しの種類がある
DLはグループメール用
OUはグループポリシー用
Active Directoryオブジェクトの種類と効果的な活用方法：基礎から分かるActive Directory再入門（9） - ＠IT (atmarkit.co.jp)
Windowsのグループアカウントの種類を知る：Tech TIPS - ＠IT (atmarkit.co.jp)
=========================
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
Posted by funa : 06:42 PM
| Web
| Comment (0)
| Trackback (0)
January 1, 2018
Web font test
コンパネでWebFontをONにしておく必要があるヨ さくらは、また当CMSはJSもCSSもインラインで宵
リュウミン M-KL Ryumin Medium KL
リュウミン R-KL Ryumin Regular KL
見出ミンMA31 Midashi Min MA31
A1明朝 A1 Mincho
新ゴ R Shin Go Regular
新ゴ M Shin Go Medium
ゴシックMB101 B Gothic MB101 Bold
見出ゴMB31 Midashi Go MB31
じゅん 201 Jun 201
じゅん 501 Jun 501
新丸ゴ R Shin Maru Go Regular
フォーク R Folk Regular
フォーク M Folk Medium
丸フォーク R Maru Folk Regular
丸フォーク M Maru Folk Medium
カクミン R Kakumin Regular
解ミン 宙 B Kaimin Sora Bold
シネマレター Cinema Letter
トーキング Talking
はるひ学園 Haruhi Gakuen
すずむし Suzumushi
新丸ゴ 太ライン Shin Maru Go Futoline
正楷書CB1 Sei Kaisho CB1
隷書101 Reisho 101
UD新ゴ R UD Shin Go Regular
UD新ゴ M UD Shin Go Medium
UD新ゴ コンデンス90 L UD Shin Go Conde90 L
UD新ゴ コンデンス90 M UD Shin Go Conde90 M
ナウ-GM NOW-GM
G2サンセリフ-B GSanSerif-B
リュウミン M-KL Ryumin Medium KL
リュウミン R-KL Ryumin Regular KL
見出ミンMA31 Midashi Min MA31
A1明朝 A1 Mincho
新ゴ R Shin Go Regular
新ゴ M Shin Go Medium
ゴシックMB101 B Gothic MB101 Bold
見出ゴMB31 Midashi Go MB31
じゅん 201 Jun 201
じゅん 501 Jun 501
新丸ゴ R Shin Maru Go Regular
フォーク R Folk Regular
フォーク M Folk Medium
丸フォーク R Maru Folk Regular
丸フォーク M Maru Folk Medium
カクミン R Kakumin Regular
解ミン 宙 B Kaimin Sora Bold
シネマレター Cinema Letter
トーキング Talking
はるひ学園 Haruhi Gakuen
すずむし Suzumushi
新丸ゴ 太ライン Shin Maru Go Futoline
正楷書CB1 Sei Kaisho CB1
隷書101 Reisho 101
UD新ゴ R UD Shin Go Regular
UD新ゴ M UD Shin Go Medium
UD新ゴ コンデンス90 L UD Shin Go Conde90 L
UD新ゴ コンデンス90 M UD Shin Go Conde90 M
ナウ-GM NOW-GM
G2サンセリフ-B GSanSerif-B
----------
■リファクタリングは難しい
すでに存在するという煩悩を排除するのに、時間が余計に掛かる
IFの入れ子、どっちが親か、見極める（閃きで書いて行くのが面白かったりするが）
ロジック、アルゴリズムの検討が入ると時間が異常にかかる(図解して考えたい)
テストケースを作っておきたい（テストケースの量でアルゴリズムの難しさが分かる）
デバッグが面倒、コーダーとテスターは分けるべき（兼ねると思考が複雑化し脳が拒否る）
Posted by funa : 11:13 PM
| Web
| Comment (0)
| Trackback (0)
