BigQuery on Feb 21, 2021 1:00 AM
Python on Feb 10, 2021 7:30 PM
Promise on Dec 25, 2020 1:06 AM
Dexie on Apr 21, 2020 12:00 AM
PWA on Apr 20, 2020 6:00 PM
G Suite on Apr 01, 2020 12:01 AM
CSS Grid on Mar 01, 2020 3:03 AM
Update your home page on Jan 21, 2020 12:20 AM
Cloud 9 on Nov 22, 2019 9:42 PM
Adobe Sensei on Jan 01, 2019 11:11 AM
Summer time blues on Aug 11, 2018 6:42 PM
Web font test on Jan 01, 2018 11:13 PM
Help desk on Jun 01, 2017 12:00 AM
RWD by HTML5 on Jun 07, 2016 8:28 PM
Big D on Jun 05, 2016 6:45 PM
SN on May 22, 2016 2:09 AM
Ant on Apr 03, 2016 10:01 PM
Windows env tips on Mar 31, 2016 1:44 AM
Cache on Mar 08, 2016 8:06 PM
Detected as bad site by virus company on Mar 08, 2016 1:07 AM
Google API on Feb 14, 2016 1:03 AM
OSS License on Jan 08, 2016 12:00 AM
Bash on Jan 07, 2016 10:41 PM
Regular expression on Jan 06, 2016 1:27 AM
Javascript on Jan 05, 2016 7:27 AM
Laravel on Jan 04, 2016 12:00 AM
XSS, CSRF, JSOP, SSO on Jan 03, 2016 10:53 PM
Git on Jan 03, 2016 12:00 AM
Agile on Jan 02, 2016 12:00 AM
PHP Developer on Jan 01, 2016 10:47 PM
Web List
February 21, 2021
BigQuery
■GCP(Google Cloud Platform)
https://console.developers.google.com/
GCPを活用するスキルを問われる「Associate Cloud Engineer」
インフラストラクチャの知識を問われる「Professional Cloud Architect」
データと機械学習の知識を問われる「Professional Data Engineer」
マシーンラーニング：教師ありをベースにパターンを線形として認識し相似のパターンを見つける
ディープラーニング：人間が把握できる次元のデータ構造ではない多次元でパターンを見つける
線形検索みたいなもんか
線形検索みたいなもんか
■Big queryリファレンス
標準SQLとレガシーSQLがある、違いは？
標準 SQL のクエリ構文 | BigQuery | Google Cloud
標準 SQL への移行 | BigQuery | Google Cloud
標準 SQL のデータ型 | BigQuery | Google Cloud
レガシー SQL 関数と演算子 | BigQuery | Google Cloud
レガシー SQL のデータ型 | BigQuery | Google Cloud
標準 SQL のクエリ構文 | BigQuery | Google Cloud
標準 SQL への移行 | BigQuery | Google Cloud
標準 SQL のデータ型 | BigQuery | Google Cloud
レガシー SQL 関数と演算子 | BigQuery | Google Cloud
レガシー SQL のデータ型 | BigQuery | Google Cloud
BigQuery解説：https://beyondjapan.com/blog/2016/03/what-is-bigquery/
クエリ処理のツリーアーキテクチャによる分散並列処理
複数のサーバーに対してツリー状に拡がっていき、並列にサーバー上で同時に分散処理
ルートサーバ＞intermediateサーバ＞leafサーバ
BigQuery MLという機能を利用すると、機械学習モデルをCloud AI PlatformのTensorFlowなどに連携させ、クエリ結果を素早くAIと連携
Lookerというデータ分析プラットフォームとの連携よりクエリ結果を、データ統合、変換、分析、可視化、レポーティングすることができ、非常に強力なBI
列指向型・カラム型データベース・カラムナストレージ（一般的なRDBMSでは行単位でデータが保存）
必要なカラムのデータを取得するだけでよく、またデータは圧縮できる
https://dev.classmethod.jp/articles/google-bigquery-debut/
GCPプロジェクト＞データセット＞テーブル（行row列columnで普通のテーブル、ネイティブbigqueryテーブル/Googleドライブのような外部テーブル、SQLクエリによるビュー）
ジョブは非同期で実行され、ステータスをポーリング（データの読み込み、データのエクスポート、データのクエリ、データのコピーなど）
クエリ（ウェブ UI、bq コマンド、BigQuery REST APIの方法がある、SQLと同じ？
SELECT title, answer_count, view_count
FROM `bigquery-public-data.stackoverflow.posts_questions`
ORDER BY view_count DESC LIMIT 10
BigQueryはSELECT tag, time FROM [dataset_name.table_name_20151206]のように必要な列だけを選択した場合にはスキャンの幅を狭めることは可能ですが、LIMITやWHERE句には何を書いてもテーブルをフルスキャンしてしまう
節約 Amaのs3に入れRedshift内でテーブルを分割した後にBigQuery
Hadoopでも使われていたGoogle開発のエンジンであるMapReduceは、非構造化データをプログラミングモデルを通して扱うが、巨大なテーブルの結合や巨大な出力結果のエクスポートも可能である半面、処理時間は数分間から数日に及んだ、だが、BigQueryは、あらかじめデータを構造化してBigQueryのテーブルに格納しておかねばならないが、ほとんどのクエリは数秒で完了する
サードパーティ ツール（データの読み込みや視覚化を行うツールなど）を使用して BigQuery のデータにアクセス可
パブリックデータに直でアクセスできる
SELECT * FROM `bigquery-public-data.usa_names.usa_1910_2013`
BigQuery の一般公開データセット | Google CloudGoogle Cloud SDKをインストールすればコマンドラインが使える
■標準SQL
先頭行でレガシーか宣言 #standardSQL あるいは #legacySQL
バッククォートでエスケープ、プロジェクト区切りも.(ドット)、From句のカンマはCross joinで全組合せかと思われ通常通りjoinやunionを使う事
配列が使える、カラム一つに配列を入れて多元的に扱える
withで一時テーブルを作れる
exceptでカラムを除外、replaceでカラムの置き換え
functionを作って使える 標準 SQL ユーザー定義関数 | BigQuery | Google Cloud
分析関数over()とwindowで計算ができる
rank() over (order by x)は下記moreのRFMに使用している
rank() over (order by x)は下記moreのRFMに使用している
地理関数とかJSON関数とか色々関数もありそう
■レガシーSQL（標準SQLを使うのが由）予約語は角かっこを使ってエスケープ、プロジェクト区切りは:
集計関数で WITHIN キーワードを使用すると、レコード内の繰り返しの値が集計?
FROM句のカンマは標準SQLのCross joinとは異なりUNION ALL 演算子
通常のSQL処理システムとは異なり、BigQueryは繰り返しデータの処理を前提として設計。繰り返しレコードの構造を操作するクエリを記述。その方法の1つが、FLATTEN 演算子?
JOINは、INNER、[FULL|RIGHT|LEFT] OUTER、および CROSS JOIN 演算子をサポート、デフォルトINNER
除外できる select + from A OMIT RECORD IF COUNT(payload.pages.page_name) <= 80;
TOP を使用するには、SELECT 句に COUNT(*) を含める
分析関数over()とwindowで計算ができる？(標準SQLと同様？)
functionを作って使える(標準SQLと同様？)JSON等のネストをフラット化
■DDL データ定義言語ステートメントの使用 | BigQuery | Google Cloud
https://www.isoroot.jp/blog/1651/
auto_incrementもdefaultもprimary keyもindexもshow create tableないのでは？
CREATE TABLE IF NOT EXISTS bangboo_data.x_xxx (
`no` INT64 NOT NULL,
`user_no` INT64 NOT NULL,
`name` STRING,
`date` DATETIME,
)
■データアップロード時のスキーマ指定
自動検出はFirestore、Datastore、Avro、Parquet、ORCだけ？ほぼ手動のutf-8のcsvかjsonlかを使う形
自動検出はFirestore、Datastore、Avro、Parquet、ORCだけ？ほぼ手動のutf-8のcsvかjsonlかを使う形
コンソールで手動スキーマ指定可(jsonスキーマを張付ける)、modeは省略可でデフォはnullable、
JSONスキーマファイルupはaqコマンドのみ可、ローカルからup時のコマンドとスキーマ例↓
bq load --source_format=CSV mydataset.mytable ./myfile.csv ./myschema.json
[
{
"description": "quarter",
"mode": "REQUIRED",
"name": "qtr",
"type": "STRING"
},
{
"description": "total sales",
"mode": "NULLABLE",
"name": "sales",
"type": "FLOAT"
}
]
なお一旦Google Cloud Storageに放り込んでからやると高速 BigQueryにデータをバッチでインポートする - Qiita
COUNT DISTINCTだが、BigQueryでは概算値が返ってくる??。正確な値が必要な場合は、GROUP EACH BYとCOUNT(*)を組み合わせる
https://www.buildinsider.net/web/bigquery/01
■IAM(Identity and Access Management)
https://cloud.google.com/iam/docs/overview?hl=ja
https://cloud.google.com/iam?hl=ja
IAMベストプラクティス https://cloud.google.com/iam/docs/using-iam-securely
操作方法 https://cloud.google.com/iam/docs/how-to?hl=ja
ロール https://cloud.google.com/iam/docs/understanding-roles?hl=ja
IAMベストプラクティス https://cloud.google.com/iam/docs/using-iam-securely
操作方法 https://cloud.google.com/iam/docs/how-to?hl=ja
ロール https://cloud.google.com/iam/docs/understanding-roles?hl=ja
https://www.isoroot.jp/blog/1244/
https://medium.com/google-cloud-jp/gcp-iam-beginner-b2e1ef7ad9c2
ロールは作成ができ●●世話役みたいな感じか
permissionsは権限で「resourcemanager.projects.get」とかで付与する
個人や無料アカだと組織がない？→フォルダが作成できない？
組織がないとグループが作成できない→グループがないとIDにRoleを付与するしか
フォルダは組織ツリー状でリソース管理、グループはその人の集まりで部課で権限管理？
ポリシーはMSのGPOみたいものも組み込みで存在する
//リソース
階層：Organization > Folders > Project > Resource(Google Cloud services)
割り当て：日や分に対してのデータ量の上限等を設定
//IAMの機能
機械学習を使ったスマート アクセス制御の最適化
デバイスのセキュリティ、IP アドレス、リソースタイプ、日時などの属性に基づいて、リソースに対するきめ細かいアクセス制御ポリシー
権限の認可、解除、委任に関するすべての監査証跡の履歴
ユーザーとグループのプロビジョニングや管理、シングル サインオンの設定、2 要素認証プロセス（2FA）
//IAMポリシー
IDをGroup（●●部）にアサイン
IDをGroup（●●部）にアサイン
Members(Group等)にRoles（●●役）をアサイン
MembersとはグループやドメインやID(Googleユーザアカウント、サービスアカウント)
Roles（●●役）にPermissions（権限）を付与
ロールは作成ができ●●世話役みたいな感じか
permissionsは権限で「resourcemanager.projects.get」とかで付与する
個人や無料アカだと組織がない？→フォルダが作成できない？
組織がないとグループが作成できない→グループがないとIDにRoleを付与するしか
フォルダは組織ツリー状でリソース管理、グループはその人の集まりで部課で権限管理？
ポリシーはMSのGPOみたいものも組み込みで存在する
//リソース
階層：Organization > Folders > Project > Resource(Google Cloud services)
割り当て：日や分に対してのデータ量の上限等を設定
必要以上に権限を付与しない
組み込みロールが多い、改変してロールを作るか
権限はサービス名.リソース.動詞という命名規則
検証：該当ユーザがproject-idにアクセスできるか？
https://console.cloud.google.com/logs?project=project-id
Posted by funa : 01:00 AM | Web | Comment (0) | Trackback (0)
February 10, 2021
Python
おッPythonやるのか？
ファイル拡張子oppython.py デフォUTF-8、全部オブジェクト(list,dict,set等のミュータブルなら参照になる点に注意、必要ならcopy())
#コメント
変数型不要：p = 500 * num、定数はない
文字繰り返し、キャスト："文字列" * 4 + str(p) + "Hi\nお元気ですか？\nSee u"
ドキュメントストリング(三連引用符)："""そのまま表示""" print mymod.__doc__で見れる
raw文字列でescしない：print(r"インストール先は c:\\code\python\bin です")
文字数：len("東京都")→3
Welcome to Python.org
HTMLの中に少し埋め込めず、基本的にプログラムの中にHTMLを埋め込む：CGI(Perl然)
さくらインターネットでPython CGI (mwsoft.jp)
WSGI Python で WSGI (Web Server Gateway Interface) に従ったシンプルな Web サーバで Hello World - Qiita
Python用Webサイト用途フレームワーク：Flask(軽量)、Django
WSGI について — Webアプリケーションフレームワークの作り方 in Python (c-bata.link)
GCPでどう使うかは不明だがホスティングは↓
ウェブ ホスティング | Google Cloud 静的ウェブサイトのホスティング | Cloud Storage | Google Cloud
ケチって分厚い本1冊にしたが全然進まぬ、薄い奴星e、？チッPython、誰がJSONじゃ～い
文字列[開始:終了]→→ str = "Flower" print(str[1:4]) → low
文字列 % (値1, 値2, ...)→→ num= "10進数では %d 、16進数では %x " % (num, num)
"xxxx{index:書式指定子}xxxx".format(値)→→ "名は{:<8s}で年は{:>3d}で".format(name, age)
"xxxx{index:書式指定子}xxxx".format(値)→→ "名は{:<8s}で年は{:>3d}で".format(name, age)
f"xxxx{値:書式指定子}xxxx"→→ f"名は{name:<8s}で年は{age:>3d}で"
0／空の文字列''／値なしはfalse、Noneは？ x = None x is None→→true？
//→除算切り捨てし整数、**→べき乗
関数宣言はdef kansu():だが、その中からglobal henでグローバル変数henにアクセスできる
try／exceptを関数内で設定することも、逆に関数呼び出し時にも使用ができる、else, finally, raiseも使う
リストa=[1,2,3]はmap(), filter(), reduce()等が使える、set()は重複の無いリストを扱いセット同士の減算、OR、AND、XOR 操作が可能
tuple→タプルは定数リスト、更新無しならリストより速い a = 1,2,3 a = (1, 2, 3)
辞書{a:1,b:2}はitems(), keys(), valus(), iteritems()を使える
関数宣言はdef kansu():だが、その中からglobal henでグローバル変数henにアクセスできる
try／exceptを関数内で設定することも、逆に関数呼び出し時にも使用ができる、else, finally, raiseも使う
リストa=[1,2,3]はmap(), filter(), reduce()等が使える、set()は重複の無いリストを扱いセット同士の減算、OR、AND、XOR 操作が可能
tuple→タプルは定数リスト、更新無しならリストより速い a = 1,2,3 a = (1, 2, 3)
辞書{a:1,b:2}はitems(), keys(), valus(), iteritems()を使える
lambdaは無名関数？
__iter__()はnext()を持つオブジェクトを返し、next()は次の要素を返し、最後に達するとStopIteration例外を返す？
yield はイテレータを返すジェネレータを定義？
@デコレータは関数を実行する前後に特殊な処理を実行したい場合？
withで終了処理を指定できる、ファイル読込とその後の処理とか
assertや__debug__はテストで機体通りかを確認する？
passは中身の無い関数やクラスを作成しkara.p=1で粋なり属性追加等ができる
execは引数の文字列をPythonとして実行 exec "print 'Hello'"
delはオブジェクトを削除 del x, y, z
【基礎一覧】Pythonの基本文法を全て解説してみた！【初心者】 (suwaru.tokyo)
Python基本文法まとめ - Qiita
とほほのPython入門 - とほほのWWW入門 (tohoho-web.com)
Python入門 ～Pythonのインストール方法やPythonを使ったプログラミングの方法について解説します～ | Let'sプログラミング (javadrive.jp)assertや__debug__はテストで機体通りかを確認する？
passは中身の無い関数やクラスを作成しkara.p=1で粋なり属性追加等ができる
execは引数の文字列をPythonとして実行 exec "print 'Hello'"
delはオブジェクトを削除 del x, y, z
継承やオーバーライド class MyClass2(MyClass):
多重継承class MyClassC(MyClassA, MyClassB): で纏めて使えるようになる
class MyClass:
多重継承class MyClassC(MyClassA, MyClassB): で纏めて使えるようになる
class MyClass:
"""A simple example class""" # 三重クォートによるコメント
def __init__(self): # コンストラクタ
self.name = ""
def __del__(self): #インスタンスが消滅する際に呼出でコンストラクタ
print "DEL!"
def __str__(self): #文字列化
return "My name is " + self.name
def getName(self): # getName()メソッド
return self.name
def setName(self, name): # setName()メソッド
self.name = name
class MyClass2(MyClass):
def world(self):
print "World"
class MyClass3(MyClass):
def hello(self): # 親クラスのhello()メソッドをオーバーライド
print "HELLO"
a = MyClass() # クラスのインスタンスを生成
a.setName("Tanaka") # setName()メソッドをコール
print a.getName() # getName()メソッドをコール
print a #=> My name is Tanaka 文字列化
b = MyClass2() #継承
b.hello() #=> Hello
b.world() #=> World
c = MyClass3() #オーバーライド
c.hello() #=> HELLO
Python基本文法まとめ - Qiita
とほほのPython入門 - とほほのWWW入門 (tohoho-web.com)
Welcome to Python.org
HTMLの中に少し埋め込めず、基本的にプログラムの中にHTMLを埋め込む：CGI(Perl然)
さくらインターネットでPython CGI (mwsoft.jp)
WSGI Python で WSGI (Web Server Gateway Interface) に従ったシンプルな Web サーバで Hello World - Qiita
Python用Webサイト用途フレームワーク：Flask(軽量)、Django
WSGI について — Webアプリケーションフレームワークの作り方 in Python (c-bata.link)
GCPでどう使うかは不明だがホスティングは↓
ウェブ ホスティング | Google Cloud 静的ウェブサイトのホスティング | Cloud Storage | Google Cloud
ケチって分厚い本1冊にしたが全然進まぬ、薄い奴星e、？チッPython、誰がJSONじゃ～い
Posted by funa : 07:30 PM | Web | Comment (0) | Trackback (0)
December 25, 2020
Promise
仕事は炎上芸なり~と勤しむ炎上芸人にも分かるように解説をさせて頂きたく候
（勤しむところはソコではない）
///promise/async/await 非同期関数
（勤しむところはソコではない）
///promise/async/await 非同期関数
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は順番を扱う処理もできる
３）async / await
promiseは順番決めができたがasync/awaitは順番を扱う処理もできる
setTimeout/setIntevalがプロミスチェーンだけでは時間を止められない
シングルスレッドから似非スレッドで分離し非同期になるから、awaitを入れると同期する↓
const wait = (sec) => {
シングルスレッドから似非スレッドで分離し非同期になるから、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化しているらしいが
■Javascript
https://www.bangboo.com/cms/blog/page_325.html
========================================
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の入れ子だと親の部分だけ先に進んでしまう、入れ子ダメで親子を作れば親→子の一方方向で子で終わるトーナメント構造で(上がらない)
test1().then((result) => {
test2().then((result) => { //fuok });
})then(function() これは入れ子
↓
test1().then((result) => {
test2().then((result) => {
↓
test1().then((result) => {
test2().then((result) => {
//fuok
})then(function(){ //fuok2 }); これでトーナメント構造
})catch(function(e)
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝})then(function(){ //fuok2 }); これでトーナメント構造
})catch(function(e)
promiseチェーンでthen毎にに欲しい引数を出すが、複数であればそれらの引数をthenに渡せない、下記駄目
１）thenで一つの引数になるようにロジックを組む（thenのトーナメント構造、一階層上で変数に入れる等）
１）thenで一つの引数になるようにロジックを組む（thenのトーナメント構造、一階層上で変数に入れる等）
}).then(function(response){
return [response.json(), arr_del];
}).then(function(v) {
json = v[0]; arr = v[1];
Promise化していない関数を使いたいが、そのまま使うかthen化できるようにするか？
１）次thenに進みたい元Funcの処理としてresolveの返り値に入れる、ダメなら省略可だがreject()に渡しcatchする
２）次thenには適当でもいいのでreturnで進む
２）次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';
return 'go next';
}).then(function(){
エラーハンドリングしたい、よくわからんが下記で動作に違いがでた、rejectはJSがエラーを吐いた
１）catchさせるにはthrow new Errorし、alertを出す
２）catchはしないが次のthenには移動させないためreturn false
１）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);
}
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上上書きされるように見えるがループすると全データが出てくる、謎
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を消せる（その後新たに再作成できる）
toArrayは複雑になる、eachの方がよいかも、toArrayとeachの入れ替えてのselect発行が基本できるみたい
複雑なものはOr句で出せる
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↓ダメ??
x↓ダメ??
■Update
putは存在があれば更新、なければ挿入
■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){
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);
});
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);
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));
}
■Where句
db.friends.where("shoeSize").between(40, 45).count(function(count) {
[HTML5] IndexedDBでデータの保存や読み込みを行う - Dexie.js編 (katsubemakito.net)
Dexie.jsとTypeScriptでIndexedDBを操作する - noxi雑記 (hateblo.jp)
■アクセス
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)で変換
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
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
マイドライブ
組織内でもグループ内でもWeb公開もURLでも編集やコメントも細かく共有設定ができる
ファイルとしてDL、それをマイドライブにアップしG suite化できる
ドキュメント
提案モードで修正→ツール＞編集の提案の確認orチェック で承認ができる
スライド
プレゼンター（マウス↓でメニュー表示、ノートや質問）、オンラインプレゼンは不可
コレクション
+のURLのみ集められる？モバイルやPCは駄目かも
Keep
メモの共有を外部にするとメールが送信
カレンダー
デスクトップ通知は各種許可設定があり調べよ、Chromeの機能 chrome://flags/#enable-native-notifications
何をサルベージできるのか不明：メールログ、Vaultで削除ファイルは見れる？
G-suiteはオフラインでも使える
管理者側設定：許可設定
ユーザ側設定：オフライン許可設定
O365とのプロコン
G-suiteは少し安い、使用が簡単だがプア、共有や共同編集に優位、オフラインで機能が弱い
中途半端に移行するより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
マイドライブ
組織内でもグループ内でもWeb公開もURLでも編集やコメントも細かく共有設定ができる
ファイルとしてDL、それをマイドライブにアップしG suite化できる
ドキュメント
提案モードで修正→ツール＞編集の提案の確認orチェック で承認ができる
スライド
プレゼンター（マウス↓でメニュー表示、ノートや質問）、オンラインプレゼンは不可
コレクション
+のURLのみ集められる？モバイルやPCは駄目かも
Keep
メモの共有を外部にするとメールが送信
カレンダー
デスクトップ通知は各種許可設定があり調べよ、Chromeの機能 chrome://flags/#enable-native-notifications
何をサルベージできるのか不明：メールログ、Vaultで削除ファイルは見れる？
G-suiteはオフラインでも使える
管理者側設定：許可設定
ユーザ側設定：オフライン許可設定
O365とのプロコン
G-suiteは少し安い、使用が簡単だがプア、共有や共同編集に優位、オフラインで機能が弱い
Posted by funa : 12:01 AM | Web | Comment (0) | Trackback (0)
March 1, 2020
CSS Grid
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)
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://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
無料だとBigQueryのDML(insert)ができないらしい
予算とアラートを1円で設定（通知チャネルにSMSとメール設定）
辞めるときはプロジェクトをシャットダウン＆請求先アカウントの閉鎖
１）プロジェクトの閉鎖
Google Cloud Console ＞ IAMと管理 ＞ 設定 ＞ シャットダウン
２）請求先アカウントの閉鎖（原因不明だが下記画面が出るときと出ないときがった）
Google Cloud Console ＞ お支払い ＞ (左ナビ)アカウント管理 ＞ 請求先アカウントの閉鎖
※お支払い＞マイプロジェクト＞アクション＞無効や請求先変更ができる
セキュリティは使用GoogleアカウントのSMSによる２段階認証、信用するデバイスの設定があるようだ
=================================
■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対応
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■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)
- BigQuery on Feb 21
- Python on Feb 10
- Framework on Jan 27
- Who watches on Jan 21
- I ain't update nothing yet on Jan 11
| < February 2021 > | ||||||
| Sun | Mon | Tue | Wed | Thi | Fri | Sat |
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | ||||||
- February 2021
- January 2021
- December 2020
- October 2020
- August 2020
- July 2020
- May 2020
- April 2020
- March 2020
- January 2020
- November 2019
- September 2019
- July 2019
- January 2019
- December 2018
- September 2018
- August 2018
- June 2018
- May 2018
- January 2018
- December 2017
- September 2017
- August 2017
- June 2017
- April 2017
- February 2017
- September 2016
- July 2016
- June 2016
- May 2016
- April 2016
- March 2016
- February 2016
- January 2016
- December 2015
- August 2015
- Photo Boo
- デスクトップ通知スケジューラー
- オフライン予約システム
- オフライン予約システム(trancate)
- マラソンペース計算アプリ
- 時給計算アプリ
- ホワイトボード
- Tool(Winパス生成)
- AMAモトクロスマニアッX
- BANGBOOマップ
- えいごたん.jp
- Is This English???
- 無料でセキュリティカメラを設置する
- TOKIO Shock Exchange
- ICTIL (ITIL)
- DISCO (シスコCCNA)
- Java Lot (Java)
- Jクエネー(jQuery)
- メディアトレーニング
- Hiphop From TV
- BANGBOOナレッジマネジメント
- BANGBOOビジネスカード
