March 11, 2016
Posted by funa : 11:56 PM | Column | Comment (0) | Trackback (0)
March 9, 2016
パートナーの組合せは、愛着-愛着が良いわけではない
型は変わる、産後うつで型が変わり不安定型になる場合も
不安型は賞賛、理想化、合体をしてしまい人の言う事を信じすぎ騙される
不安型は敏感に人に合わせる(演技ができる)、距離感が近すぎる←愛情不足
記憶を巡るというのは向き合うということ、回避型は弱い
■愛着障害
反撃、内面攻撃(うつ、不安)→被害妄想
水に流せない
共感性の不足(相手の立場になること)
意地っ張り
依存 → 母なる
失感情、道化、虚言、盗癖、ホモ
ネガティブに相手を評価
性倒錯(S:支配、M:献身、幼児:両方)
↓
カウンターアイデンティティ(歪んだ正義)⇔立派
↓
マイノリティ活動、創造(破壊)
統制:攻撃や罰、機嫌取りで秩序を取り戻そうとする、支配したがる←賞賛不足
非機能的怒り:関係破壊(精神や肉体的攻撃に囚われる)
全か無の2分法で評価をしてしまう
発達障害や能力開発、キャリアが落ち着いて伸ばせない傾向
青年期に迷う(愛情や恋人の存在で乗り越えられる)
子の親の見方は、親の子への見方の裏返し
反抗:依存から自立のときに見られるが、周りは受け入れなければならない
■有名人の例
クリントン:人に合わせる演技、社交的で幸福という演技、気づき、アダルトチルドレン(片親、祖父母育児、家庭問題)
ジョブズ:自己誇大(自己愛→万能感)、反抗、多動、傍若無人、養子→幻の親を理想化→実妹→養夫婦を本当の親→認め乗り越える→カリスマ
■対処
パートナーと子供をやり直す
親を乗り越える(経済、社会的)←人の為に役割を全うすることで
清濁を併せ呑む→否定認知から脱却できる
理想の親を演じ後人を育てる→アイデンティティの確立→これでいいのだ納得→克服
優しさ → 愛着を定義=乳児期と生殖時期(異物反応を抑える)
性悪説: 人を憎むようにできている→礼や儀が必要
生まれた時点では平等 → 不平等>嫉妬、ルサンチマン → 嫌いと転嫁
人との違い>異物 → 過敏 ⇔ 本質的価値観
人との違い>同一化、理想化、愛情 → 愛着 ← 安全基地
過保護(無菌、ストレス) → 異物に過反応
ADHDやんちゃな自由人、ドパミン、愛着が薄い
合理的な養育スタッフ、Reward/Punishmentの教育 → 偽りの自己を抱え苦悩
育児には母子の愛着(アタッチメント)+応答性が必要
サルと孤児院: 発育が悪い、多動/不注意/知能/自閉
感情は伝染する、過敏を抑えると伝染する
異物ではない → 安全基地
言語化: 乗り越える手段
愛着が何であるか観察することで、アレルギーの原因を特定できるか?
愛着がアレルギーを生むし、抑止することもできる?
■人との関係であり他人は変えられない、最適解を見つけること
相性の良い人を見つける
上手く立ち回る、共感、水に流す、清濁を呑み良い点を見る
役割を全うし乗り越える
安全基地であるという主張
タバコは空想リラックス、フィルタを強く咥える
リラックスは回復に貢献しないがmindfulness meditationではストレスや慢性炎症が減る
#この世は汚れすぎた、浄化できるかどうか
Posted by funa : 11:29 AM | Column | Comment (0) | Trackback (0)
March 8, 2016
■画像のキャッシュ
ページは新しいが、画像は古いキャッシュを参照している理由
影響因子:ブラウザキャッシュ>プロキシ>ファイアウォール>ロードバランサ>htaccessのようなサーバ設定
基本的な考え方:キャッシュはPHPページ等でのディレクティブで制御されるが、特に画像等はプロキシではキャッシュ期間が優先される場合がある(ブラウザ更新ボタンでスキップできるが、、)
1)ページ遷移時は、キャッシュがありExpire等が効いている場合は、完全にローカルキャッシュだけを使ってそもそもリクエストを送っていません。
(ちなみに、ページを進んで(ブラウザの戻る機能で)戻ったときは大元のHTMLを含めてキャッシュが使われたりします。)
2)リロードは大元のHTMLを受け取ったら、そのページ内のリソースについてレスポンスヘッダを確認しに行っています。その結果304 Not Modifiedが帰ってきて、実際にはキャッシュを使います。
3)スーパーリロードCtrl+F5(Ctrl+更新ボタン)はキャッシュに関係なく、すべてのリソースを取得しなおしています。
リロードをしても表示されない時ブラウザのキャッシュ削除するといいのは、この辺りが上手く行っていないからだと言える
どういうリクエスト/レスポンスの流れ?(304はトラフィックは減るが比較でサーバリソースを食う場合もある)
1)ブラウザのキャッシュ :Expire/max-ageのあるとき?、あるいはブラウザキャッシュ削除
2)ブラウザ→プロキシのキャッシュ :Cache refreshでの間隔で処理、あるいはブラウザ更新ボタン
3)ブラウザ→プロキシ→サーバで304 not modefied(ブラウザ/プロキシのキャッシュが使用される)
http://www.atmarkit.co.jp/ait/articles/0305/10/news002.html
http://blog.redbox.ne.jp/http-header-tuning.html
HTTPヘッダ(htttpヘッダはプログラムで制御できる)
Pragma
•Cache-Control(汎用)-no-cache, max_ageディレクティブなど
•Age(レスポンス)
•Date(汎用)
•Expires(エンティティ)
•Last-Modified(エンティティ)
•If-Modified-Since(リクエスト)
•If-Unmodified-Since(リクエスト)
•ETag(レスポンス)
•If-Match(リクエスト)
•If-None-Match(リクエスト)
•Range(リクエスト)
•If-Range(リクエスト)
ブラウザに一切キャッシュさせたくない場合Cache-Control "no-cache" この辺りの動作は環境に依存する
ブラウザにキャッシュさせるが変更ないか都度確認Cache-Control "max-age=0" or Expires "Mon, 26 Jul 1997 05:00:00 GMT"
ブラウザにキャッシュさせ都度確認はそれほど必要ないCache-Control "max-age=秒数" or Expires "Mon, 26 Jul 2020 05:00:00 GMT"
Cache-Control: private webサーバから返されるコンテンツがただ一人のユーザのためのもので複数のユーザが共有されるキャッシュに記録されるべきではない
Cache-Control: must-revalidate キャッシュに記録されているコンテンツが現在も有効であるか否かをWebサーバに必ず問い合わせよ
metaタグ
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">キャッシュの有効期限,0=キャッシュさせない
no-store:キャッシュするな→ Webサーバから返却されるコンテンツをキャッシュするな
no-cache:キャッシュしても良いが、確認してから使え→ キャッシュは使用しても良いが現在でも有効か否か確認した上で使用しろ
no-cacheがキャッシュを使用しない設定に思えるが実際には、no-storeがキャッシュをさせない設定。大体の場合ではno-cacheでOK
シリアルの変数を付ける
<img src="http://aaa/v.gif?27" />
<link type="text/css" rel="stylesheet" href="styles.css?20130420-1100">
.htaccess
<Files ~ ".(gif|jpe?g|png|ico|js|gz|otf|ttf|eot|woff)$">
Header set Cache-Control "max-age=2592000"
</Files>
プロキシサーバ
基本はどれだけの期間キャッシュを保つかのCache refresh設定、他はhttpヘッダのディレクティブで制御されると考える
Cache Refresh 設定 HTTPドキュメントの場合(4-8時間、5min、20%等複合)の更新間隔を保つ、ブラウザ更新ボタンで取得も可能だし
20%の意味は、1週間前の10080前にできた場合これを1440/10080=14.2%となってまだ新しいとみなす
Last-Modified 要素を 0.1 に設定した場合、最後の変更が 10 日前に行われたドキュメントのケースだとプロキシはこの要素の意味を、ドキュメントが 1 日 (10 * 0.1 = 1) の間変更されない、と解釈します。その場合、ドキュメントのチェックが 1 日以内に実行されている場合、プロキシはキャッシュからドキュメントを返します
使用されたキャッシュの回数
キャッシュの容量
Internet Cache Protocol (ICP) はキャッシュ(プロキシ)間の対話を可能で履歴を共有
(Sun Java System Web Proxy Server) https://docs.oracle.com/cd/E19636-01/819-3160/agcache.html
http://trafficserver.readthedocs.io/ja/latest/admin-guide/configuration/cache-basics.en.html
(Squid) http://d.hatena.ne.jp/takami_hiroki/20101006/p1
(Vanish) http://www.kumoyanet.com/420/
Posted by funa : 08:06 PM | Web | Comment (0) | Trackback (0)
March 8, 2016
アクセスが遮断される場合ダメサイトとして登録されている可能性がある
Nortonでの確認:
https://safeweb.norton.com/report/show?url=bangboo.com
トレンドマイクロで確認:
http://global.sitesafety.trendmicro.com/
McAfeeでの確認:
http://www.siteadvisor.com/
Nortonに異議を申し立てるには
1. Nortonのアカウントを作成
2. 該当Webサイトを登録
3. Webサイトのオーナーを証明する作業を行う
(ページにNorton用タグを埋め込む、またはNorton専用HTMLファイルをRootに配置)
4. 異議申請
https://safeweb.norton.com/help/site_owners
Posted by funa : 01:07 AM | Web | Comment (0) | Trackback (0)
February 27, 2016
■The art of
Innovation, Ideo Hot Teamを作る 顧客になって学ぶ(理解 > 観察 > 視覚化 >レビュー/評価) ブレインストーミング 焦点を明確に 遊び心、身体を使う、基礎スキルをやらせる テーマを外向きのアイデアを募りイノベーション (Xシェアを上げるには→○外出先でネット接続を時短するには) プロトタイプ 製品をS字改良、製品は成長する(macマウス、トラックボール、ワイン蓋) 白紙から考える、No They:自身でやる、イノベーションは目的志向 アフォーダンス、全然違うものを作る、そしてマーケで売る(イリュージョン) 旅に出てリサーチ、アイデアが重要 よく観察する |
Posted by funa : 09:25 PM | Column | Comment (0) | Trackback (0)
February 14, 2016
Google Analyticsを使った機能が動いていない。APIの使い方が変わったのか新しい方法があるようだ。なおGoogleMapも部分カットされていたし、互換性も糞もない、Holy moly、Holy crap、Holy shit。
1)Google Developer Console https://console.developers.google.com/start
アカウントを取得、APIの許可、サービスアカウント作成、OAuthのキーを生成
2)Google Anal https://www.google.com/analytics/
閲覧権限(サービスアカウントのメールをユーザ管理で付与)
3)Google APIs Client Library https://developers.google.com/api-client-library/
ダウンロード https://github.com/google/google-api-php-client
https://developers.google.com/youtube/v3/guides/moving_to_oauth?hl=ja
http://log.noiretaya.com/141
https://remotestance.com/blog/2592/
Posted by funa : 01:03 AM | Web | Comment (0) | Trackback (0)
January 8, 2016
https://thinkit.co.jp/story/2014/02/03/4804
https://qiita.com/0xfffffff7/items/efbb65521d7708f2db7d
http://webnonotes.com/web/license/
/// GNU General Public License(GPL)ライセンス
https://emgr.jp/to-use-gpl/
https://www.mirucon.com/2018/04/10/all-about-gpl/
伝搬性が強く、ソフトウェアAにおいて一部でもGPLソフトウェアBを使用した場合にはAはBの二次的著作物でありAもGPLにしなければなりません
Linuxカーネル利用はGPLが伝播しない等あるが複雑で危険、商用使用可だが組み込まない方が良い
/// BSDライセンス
http://easylabo.com/2015/04/rapid-prototyping/9050/
http://neareal.net/index.php?IT%2FLicense%2FBSDLicense
https://www.wdic.org/w/TECH/4%E6%9D%A1%E9%A0%85BSD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9
もともと4条項の条件、一つずつ削られて4つ、3つ、2つとなり現在3種類
BSD-2-ClauseはMITライセンスと内容がほぼ同じと言える
/// MITライセンス
https://wisdommingle.com/mit-license/
無料で自由につかうことができる(制限がほんのすこししかない)
条件は、「著作権表示」と「MITライセンスの全文 or そのURL」を記載
https://www.catch.jp/oss-license/2018/11/14/use_mit_license/
サンプルコードを元に、複製して変更して結合して、頒布/サブライセンス/販売したり等もOK
「ライセンス文書に記載の著作権表示」と「本許諾表示」をソフトウェアのすべての複製または重要な部分に記載する
作者または著作権者はソフトウェアに関してなんら責任を負わない
https://www.catch.jp/oss-license/2013/09/27/mit_license/
組み込む場合はライブラリとして、著作権表示とMITランセンス項をそのままで、が良い
/// CC License(クリエイティブ・コモンズ・ライセンス)
http://webnonotes.com/web/flickr/#cc
非営利のみ、改変禁止、クレジットを表示、該当作もCCLに
ライセンスのタイプ | 主なOSSライセンス | 特徴 |
---|---|---|
コピーレフト型 | GNU General Public License(GPL) Affero General Public License Version 3(AGPL) Sleepycat License The TMate Open Source License | ライセンステキストの添付が必要 改変した(コピー&ペーストも含む)ソースコードの開示 組み合わせて利用した場合、対応する部分のソースコードの開示 |
準コピーレフト型 | GNU Lesser General Public License(LGPL) Mozilla Public Licens(MPL) | ライセンステキストの添付が必要 改変した(コピー&ペーストも含む)ソースコードの開示 |
非コピーレフト型 | BSD 2-clause License BSD 3-clause License BSD 4-clause License Apache License 1.1 Apache License 2.0 MIT License | ライセンステキストの添付が必要 ソースコードを変更したとしても、ソースコードを開示する必要はない |
Posted by funa : 12:00 AM | Web | Comment (0) | Trackback (0)
January 7, 2016
https://qiita.com/Ping/items/57fd75465dfada76e633
https://qiita.com/Riliumph/items/97d9f0ae2eb2d7aae587
bash xxx.sh で実行、拡張子.sh(cmdと拡張子だがあっているのか?)
代入する際は頭に$を付けず=を用いる、参照時には頭に$をつける
文字列連結は演算子不要でつなげて書くだけ
ダブルクォートで囲った中で変数があれば展開される
シングルクォートで囲った内容はただの文字列
バッククォートで囲った内容はコマンドとして認識、$()も可、入れ子も可
エスケープは\、改行の前にも入れるとバッチファイルで改行ができる
RMFILE=mysql.`date -v -"$KEEPDAY"d +%y%m%d`.gz
rm -f $RMFILE
/dev/nullはぬるぽ空ファイル、コメントアウトは#
myscript.sh >/dev/null 2>&1 # 標準出力と標準エラー出力を破棄する
somecommand 2>/dev/null # エラー出力だけ破棄する
cat /dev/null > myfile.txt # サイズ0のファイルを作る
cp /dev/null > myfile.log # 既存のファイルのサイズを0にする
出力のリダイレクト(0: 標準入力)
1>(上書き)と 1>>(追記)、1 は標準出力を意味するファイル記述子、1はデフォルトで省略可能
コマンドのエラー(標準エラー出力)は、同様に 2> と 2>>
2>&1 は標準エラー出力を標準出力にマージ、あるいはコマンド後に流す
1>&2 は標準出力を標準エラー出力にマージ、あるいはコマンド後に流す
< file 標準入力先をfileに変更
> file 標準出力先をfileに変更する。fileがすでに存在していた場合上書き
>> file 標準出力先をfileに変更する。fileがすでに存在していた場合追加
command 1>log.txt 2>errlog.txt 別々のファイルに保存する
command 2>&1 >a.log コマンドラインから実行していれば標準出力はファイルに、標準エラー出力は画面に出力
command >a.log 2>&1 標準出力と標準エラー出力の両方をファイルに出力
特殊変数$? 直前のコマンドの終了コードが$?に代入される。0(ゼロ)の場合は正常終了
if [ $? != 0 -o ! -e $DBDUMP_FILE ]; then
ifの条件式内でのオプション、というか演算子らしい
-oはORをあらわす
-d ディレクトリなら真
-f 普通のファイルなら真
-e 存在するなら真
-w 書き込み可能なら真
! 否定
https://qiita.com/egawa_kun/items/196cd354c0d8e4e0fefc
何のコマンドに対するオプションかで意味が変わるので個別に要調査
dateコマンドに+をつけてフォーマット指定 date "+%Y%m%d-%H%M%S"
MySQLダンプのスクリプト例の記事
https://www.bangboo.com/cms/blog/page_153.html
Posted by funa : 10:41 PM | Web | Comment (0) | Trackback (0)
January 6, 2016
■正規表現
最長一致
一番長いものにマッチするので意図しないものが置換されがち
ABC (c) & DEF (c)でABC (c)にマッチさせたいとき、
ABC.*)の代わりにABC[^)]*がベターとかそういうこと
.* 繰り返し
.+ 1文字以上
[a-zA-ZO-9][a-zA-ZO-9] 英数2文字 → A1等
[a-zA-ZO-9]+\.jpg JPGファイル
\$100 \でエスケープ → $100
\\100 エスケープをエスケープ → \100
^ 行頭 ^# → #から始まる
[^] 否定 [^a-z] → aからz以外
$ 行末 jpg$ → jpgで終わる行
. 任意の1文字 ... → 3文字
* 直前文字の0回以上の繰り返し a* → aとか とかaaaaとか
シェル)0文字以上の任意の文字 *.pdf → pdfファイル
? 直前文字の1文字か0文字 all? → allかal
シェル)任意の1文字 ??? → 3文字
+ 直前文字1回以上の繰り返し a+ → aとかaaaaとか
- 範囲(文字コード上の) [0-2] → 0か1か2
[] いずれか1文字 [012] → 0か1か2
| いずれかの文字 slee|ap → sleeかap(前後文字をまとめて判断)
() まとまり sle(e|a)p → sleepかsleap
\< 単語の先頭境界 \<no → nothingやnobody等
\> 単語の末尾境界 \<no\> → noのみ
{min, max} 繰り返し回数の範囲 e{2,5} → eeやeeeeeやbeepやdeep等
シェル)リスト展開 e{2,5} → e2とe5
\b 空文字
\d 数字1文字 [0-9]
\D 数字1文字以外 [^0-9]
\s 空白文字(改ページ、改行、タブを含む)[ \f\n\r\t]
\S \s以外
\w アルファベット数字 [a-zA-ZO-9]
\W アルファベット数字以外 [^a-zA-ZO-9]
■-の範囲は文字コード上
なのでEBCDICコード(IBMEBCDICカナ)の[A-Z]は$}を含む、[A-IJ-RS-Z]が正しい
なのでposixのブラケットが安全[[:alnum:]]
■サンプルは検索すると早いが
https://murashun.jp/blog/20190215-01.html#chapter-3
■デバッガー
https://www.debuggex.com/
■Winのワイルドカード
? 1文
* 1文字以上
■オラクルSQL
% NULLを除く0文字以上の任意の文字列にマッチ
_ 任意の1文字にマッチ
■本(正規表現の達人)を見よ
シェルのメタキャラクタを使う(リストを見やすく)
シェルのメタキャラクタを使う(ファイル名を補完)
コマンドの検索パターンとして使う(条件検索)
メールアドレスを抽出する
メールアドレスを抽出する(もっと厳密に)
メールアドレスを抽出する(Perlで)
コメン卜行・空行を削除する
マッチした文字列を抽出する(Perlで)
コメント行・空行を削除する(厳密に)
コメント行・空行を削除する(Perlで)
コメン卜行・空行を削除する(Cのソースコードから)
改行コードを変燥する(Win⇔UNIX⇔Mac)
電話番号をチェックする(簡易版)
時刻を条件にロクファイルをチェックする
HTMLファイルから見出しを抽出する
HTMLファイルから見出しを抽出する(さらに加工)
HTMLファイルの記述を修正する
郵便番号のチェック(Webフォームで)
英小文字からなる文字列にマッチする正規表現は?
西暦の年月日を「年/月/日」の形式で表す正規表現は?
‘daemon'と‘demon'の両方にマッチする正規表現は?
タブで区切られた2つの項目を入れ替え、カンマ区切りにするには?
メールボックスファイルからメールアドレスを抽出するには?
メールアドレスのユーザ名を厳密にチェックするには?
メールアドレスのドメイン名を厳密にチェックするには?
Perlで変数に格納されている文字列と正規表現がマッチするかとごうかテストするには?
JavaScriptで、変数に格納されている文字列と正規表現がマッチするかどうかテストするには?
シェルスクリプトからコメント行空行を削除するには?
正規表現にマッチした文字列から必要な部分だけ抽出するには?
余分なスペスを取り除くには
Cのソースコードからコメント行空行を削除するには?
複数行にまたがったコメントを取り除くには?
正規表現を使って改行コードを変換するには?
電話番号をチェックするには?
時刻をチェックするには?
郵便番号をチェックするには?
HTMLの見出しタグに困まれたデータを取り出すには?
HTMLファイルの記述をまとめて修正するには?
sedで前方参照を使うには?
大文字小文字の区別を無視するには?
sedでパタンの区切り文字「/」を変更するには?
Perlでパタンの区切り文字「/」を変更するには?
ファイル名がある範囲の文字で、終わっているファイルを表示するには?
長いファイル名を入力する手聞を省くには?
「.」「..」を含み、「.」からはじまるファイル名のファイルを表示するには?
「.」「..」は含まずに、「.」からはじまるファイル名のファイルを表示するには
多量の画面出力に対して、ページ単位でスクロールを止めるには?
画面出力をファイルに保存するには?
編集前と編集後のデータを比較するには?
元のファイルからどれくらいデータが抽出されたか調べるには?
データをソー卜するには?
重複するデータをlつにまとめるには?
findコマンドの検索条件にメタキャラクタを使うには?
入力行の指定した文字位置から指定したフィルドを切り出すには?
egrepコマンドで、検索条件にマッチした行円以外"を表示するには?
viで複数ファイルを編集するには?
viの検索パタンに正規表現を使うには?
trコマンドで空行を削除するには?
viで、改行コードを変換するには?
trコマンドで改行コードを変換するには?
■改行コード
\n(LF):Unix系OS全般、Mac OS X
\r\n(CR+LF):Windows系OS
\r(CR):古いMac OS(9以前)
Posted by funa : 01:27 AM | Web | Comment (0) | Trackback (0)
January 5, 2016
varを省略した場合は関数内での宣言であってもグローバル変数(window.と同じ)
関数外のvarはグローバル変数
関数内のvarのみローカル変数(だが、関数の中に関数を作るとスコープチェーンによって、内側のローカル変数から順に探していくので、関数の外からは見えないが関数の内からはアクセスされる恐れはある)
関数を変数の様に書ける(無名関数)、スコープチェーンやレンダリングが関係している(後述)
//関数式による定義、JSは全てobjでありobjを受け取ってその中のメソッドを使う、New不要のケース
create_row = function(){
var tbody = document.getElementById("input_tbody");
var new_row = tbody.insertRow(num_row+1);
var cell1 = new_row.insertCell(0);
var copy = function(cell,tb,arg){
cell.innerHTML = tb.rows[num_row].cells[arg].innerHTML;
}
return {tbody: tbody, cell1: cell1, copy: copy};
};
copy_cell = function(obj_create_row){
obj_create_row.copy(obj_create_row.cell1, obj_create_row.tbody, 0);
};
//ここからフロー
num_row = 1;
setTimeout(function(){
console.log('setTimeOut');
obj_cr = create_row();
copy_cell(obj_cr);
num_row++;
}, 2000);
//ここからHTML
<table border=1>
<thead><tr><th>Items</th><th>Expenditure</th></tr></thead>
<tbody id="input_tbody"><tr><th>Pen</th><td>3,000</td></tr>
<tr><th>Eraser</th><td>1,000</td></tr></tbody>
</table>
ココから改めて追記する形でJavascriptの学び直し
///基礎文法
http://gifnksm.hatenablog.jp/entry/20100131/1264934942
一番下にリンク集がある、コメントも仕様が分かり参考になる
https://language-and-engineering.hatenablog.jp/entry/20100111/p1
///オブジェクト
https://www.wakuwakubank.com/posts/464-javascript-array-object-pattern/
オブジェクトは連想配列ようである、なおJSには配列[]/オブジェクト{}/JSON[{"":""},{"":""}]を使う
var obj = {a: 1, b: 2};
for - in は連想配列に使う(for in は配列にはダメ)
for - of は列挙可能なオブジェクト(配列等)に使う
for (var i in obj) {
alert(obj[i]);
}
for each (var v in obj) {
alert(v);
}
オブジェクトにはメソッドも付与しカプセル化可
var man = {
time: 0,
gettime: function() { this.time = new Date(); },
hello: function() { alert(this.time + 'hello!'); },
};
man.gettime();
man.hello();
///インスタンス化
ファンクションでクラスを宣言(←古い。Classが実装される前の話)
https://so-zou.jp/web-app/tech/programming/javascript/grammar/function/class/
function Image() {
this.width = 0;
this.height = 0;
this.src = '';
}
実はそれにはプロトタイプもあるので足せる(蛇足になるのでリンク等を参照)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain
Image.prototype.type = 'image object';
Image.prototype.width = null;
Image.prototype.height = null;
Image.prototype.src = null;
Image.prototype.resizeTo = function(aNewWidth, aNewHeight) {
this.width = aNewWidth;
this.height = aNewHeight;
};
まとめて下記の書き方もできる
Image.prototype = {
type : 'image object',
width : null,
height : null,
src : null,
resizeTo : function(aNewWidth, aNewHeight) { alert(aNewWidth + aNewHeight); }
};
newでコンストラクタでのインスタンス化する
var img = new Image();
img.resizeTo(30, 40);
///無名関数、匿名関数、クロージャ、関数式
https://www.sejuku.net/blog/25026
クロージャとは関数とその関数が定義された状態をセットにした特殊なオブジェクト
var メソッド名的変数 = function(引数) { /*処理*/ } あるいは他メソッド(function(引数) { /*処理*/ });等で直使用
メリットとして
極力グローバルの変数や関数を使わなくて済む
余計な関数名や変数名を考えなくても済む
無名関数は式が実行されるときにFunctionオブジェクトが生成される
無名関数は定義より前では呼び出せない(定義した所で呼び出すので混同がなく安全と考えられる)
Javascriptは同名をオーバーライドする
旧来の関数宣言は定義より前に実行が書かれていても呼べる
どの関数が使われるか注意が必要(便利だが大規模では危険と考える場合も)
手続き型ではこうだが、
<html>
<head>
<script type="text/javascript">
function button1Click(){
alert(1);
}
function windowOnload(){
var button1 = document.getElementById("button1");
button1.onclick = button1Click;
}
</script>
</head>
<body onload="windowOnload()">
<form name="foo">
<input type="button" id="button1" value="1">
</form>
</body>
↓無名関数ではこう
<script type="text/javascript">
window.onload = function(){
document.getElementById("button1").onclick = function(){
alert(1);
};
};
</script>
//下記は無名関数を変数に入れているので実行自体はされない
実行結果を入れている分けではない、なお実際は変数名が関数名だが
var hello = function(){alert("Hello");};
//これなら実行される、ほかにも即時関数の書き方がある
setTimeout(function(){ alert("Aloha"); },1000);
///即時関数
functionから始まる関数定義そのものを()でくくって(arg)を付けて即実行できる
普通()だが関数式と評価されればいいので、!でも同じ、+-でもOK
(function(){ /*処理*/ })();
<script>
var sum = (function(a,b){
var result = a + b;
return result;
})(1,2);
alert(sum);
!function(a,b){
let result = a + b;
alert(result);
}(3,4);
+function(a,b){
let result = a + b;
alert(result);
}(5,6);
</script>
///上記重複だがclassが導入されたES6より前の書き方(Classがないver)
https://www.yunabe.jp/docs/javascript_class_in_google.html
関数には関数式(無名関数)と関数宣言の2通り
関数宣言は旧来のfunction name(){}の方法
下記例が関数式
//関数式でのクラス、これはnewが必要だった
var Person = function(name, age) {
this.name = name;
this.age = age;
};
var alice = new Person("Alice", 7);
console.log(alice.name); // Alice
//これならnewは不要
var Person = function() {
return { name: "alice", age: 7 };
};
var alice = Person();
console.log(alice.name); // Alice
//オブジェクトでの継承、オブジェクトではnewが不要
var sayHelloShared = function() {
console.log("Hello, I'm " + this.name);
};
var alice = {
sayHello: sayHelloShared,
name: "Alice"
};
var bob = {
sayHello: sayHelloShared,
name: "Bob",
child: alice
};
alice.sayHello(); // Hello, I'm Alice
bob.sayHello(); // Hello, I'm Bob
bob.child.sayHello(); // Hello, I'm Alice
//new必要?
エラーがでなければ不要といえるのでは、、、
newするとコンストラクタで明示的初期化がされインスタンスも作られるが、、、
Javascriptは全てがオブジェクトであり、newを要不要は仕様でなく使い方の範疇のようで、それゆえ、functionでクラス化したり、メソッドを定義したり、無名関数だったりできる、、、newもエラーがでなければ不要かと
//扱い注意
thisが指す対象が、objが参照で別実態だったり、タグ要素であったりで注意が必要
console.logに出して確認するといいかも
メソッド内で使われている this が指すものは呼び出され方によって変わる
obj.hoge(); の形で呼び出された場合thisはobjになり
hoge();の形で呼び出された場合はthisは window (グローバルオブジェクト) になります
https://so-zou.jp/web-app/tech/programming/javascript/grammar/function/class/
別実態
var Person = function(a, b) {
return { name: a, age: b };
};
var alice = new Person('Alice', 7);
var takahashi = new Person('Takahashi', 6);
takahashi = alice;
console.log(takahashi.name); //Alice
///ECMAScript 6 (ES6) でクラスの構文が追加
クラス構文にはクラス宣言とクラス式という 2 つの定義方法
クラス宣言の方法
class Teki{
constructor(name, hp){
this.name = name;
this.hp = hp;
}
attack(){
console.log(`${this.name}の攻撃!`);
}
}
class Dragon extends Teki{
hello(){
console.log(`${this.name}のHPは${this.hp}です。`)
}
}
var boss = new Dragon('どらごん', 3000);
boss.attack(); // どらごんの攻撃!
boss.hello(); // どらごんのHPは3000で
こちらがクラス式
var Foo = class {
hello(){
console.log("Hi!");
}
};
var obj = new Foo();
obj.hello();
///可変変数(変数名に変数を使いたいとき)はevalで変数を含んで実行する
var new_div = eval('document.querySelector(\'#item' + settings.num_item + '\')');
eval('window.item' + settings.num_item + ' = new classItem;');
エスケープは円マーク
indow.a とwindow.を付けるとグローバルになる(関数の中からグローバル変数を作る等)
//タグ要素を取得、cssセレクタで指定
document.querySelector('#main .posts h1'); //最初の一つを取得
document.querySelectorAll('a'); //すべて取得
///実行の順番
https://kde.hateblo.jp/entry/2017/05/20/212928
https://www.javadrive.jp/javascript/ini/index2.html
ブラウザはスクリプトが記述されたHTMLファイルを順に解析しながらブラウザに表示。その途中に<script>要素が現れるとHTMLの解析を一時中断し、そのスクリプトが実行されるのを待ちます。そしてスクリプトの実行が終了すると続きからHTMLを実行していきます
Javascriptは同名をオーバーライドします
そのためwindow.onload = function(){は、複数あってもオーバーライドで一番下だけ実行する
外部ソースにwindow.onload = function(){ があってもトータルでどれか一つしか実行されない
window.onload = function(){
alert('1');
}
window.onload = function(){
alert('2');
}
テストしました
<html>
<head>
<script type="text/javascript" src="/js/js1.js"></script>
<script type="text/javascript">
alert('at header 1');
window.onload = function(){
alert('at window.onload');
}
alert('at header 2 after window.online');
</script>
<script type="text/javascript" src="/js/js2.js"></script>
</head>
<body onload="alert('at body tag onload');">
<script type="text/javascript">alert('at body');</script>
</body>
</html>
↓
下記順番に実行される
↓
1)js 1
2)header1
3)header2 after window.online
4)js2
5)body
6)window.onloadの中で最後のもの一つだけ実行(最下行が強い)
js1 window.onload(後ろのwindow.onloadあると本項目は実行されない)
window.onload(後ろのbody tag onloadがあると本項目は実行されない)
body tag onload(これがあると'at window.onload'は実行されない)
js2 window.onload(これがあると'body tag onload'は実行されない)
onloadは実行の順番を遅くする方法、他のテクとして
window.addEventListener('DOMContentLoaded', function() {
これはDOMのツリー構造が完了した時点で実行されるのでonloadより早い
bodyの閉じタグ直前にJSを入れる
//JavaScriptはシングルスレッド、非同期でも待ちが発生する場合もあり遅い、WebWorkersならマルチ可
setTimeoutは 「指定秒数後に実行」ではなく「指定秒数後に実行キューに登録」
https://language-and-engineering.hatenablog.jp/entry/20090614/p1
JavaScriptの非同期処理は並列処理でない
非同期処理では処理が実行できるようになるのを待ち実行できるようになってから実行する
タイマー系はシングルスレッド問題がある、書き方ではない、()必要、""不要、無名関数でもだめ
setInterval(set(),10) setInterval("set",10) setInterval(function(){set();},10);
setTimeout(function(){ }, 0)と書くと擬似的に並列処理ができるらしい
非同期処理の考慮はpromise/async/awaitで行うことが多いが癖が強い、こちらに移行
https://www.bangboo.com/cms/blog/page_341.html
マルチスレッドで実行するにはWebWorkersというAPIを使うと実装可
Web Workerとメインスレッドでのデータのやり取りにはpostMessageというメソッドを利用する必要がある
https://qiita.com/klme_u6/items/ea155f82cbe44d6f5d88
オブジェクト的な方が早い
手続き型の上から下への書き方は、実行スレッドが通信中に解放されないことである。
UIスレッドからこんなプログラムを実行すればユーザーインターフェイスが無反応になる。
https://satoshi.blogs.com/life/2010/01/sync_vs_async.html
//Web worker 並行処理 postMessage
https://www.html5rocks.com/ja/tutorials/workers/basics/
https://www.atmarkit.co.jp/ait/articles/1201/13/news138_2.html
別ファイルにしてキックするだけで簡単
///引数
https://wp-p.info/tpl_rep.php?cat=js-application&fl=r12
数が多くても少なくても実行される、可変長引数argumentsオブジェクトを使っているから
var f = function(x, y, z){
console.log(x);
console.log(y);
console.log(z);
console.log(arguments[0]);
if(arguments.length == 4){ console.log('4'); }
};
f(1, 2, 3); //1,2,3,1
f(1, 2, 3, 4); //1,2,3,1,4
f(1, 2); //1,2,undefined,1
■ES6での変更
https://qiita.com/soarflat/items/b251caf9cb59b72beb9b
///letは再宣言が不可能な宣言、constは再宣言と再代入が不可能な宣言
varは利用する理由がない?varは関数スコープで関数内ならどこでもOK、またグローバル化も可
letとconstはカーリーブラケット{}によるブロックスコープが有効で、For等ブラケット外からアクセスできない
letとconstは安全、varに単純置き換えはアルゴが変わるのでできない
if (true) {
var a = 1;
let b = 'aaa';
b = 'bbb'; // 再代入する
let b = 'ccc'; // 再宣言はエラー
const C = 'ddd';
C = 'eee'; // 再代入はエラー
}
console.log(a); // => 1
console.log(b); // => undefined
console.log(C); // => undefined
///アロー関数(無名関数の省略形、なおthisの扱いが違う)
アロー関数は、関数が定義されたスコープ内のthisを参照する
従来の無名関数は関数の呼び方によってthisの参照先が異なる
const fn = (a, b) => {
return a + b;
};
// 単一式の場合はブラケットやreturnを省略できる
const fn = (a, b) => a + b;
// ブラケットやreturnを省略してオブジェクトを返したい場合は`()`で囲む
const fn = (a, b) => ({ sum: a + b });
// アロー変数はargumentsがなく可変長引数を使う必要がある
const arrow = (...arguments) => { console.log(arguments); }
arrow(1, 2, 3) //=> [ 1, 2, 3 ]
///関数にデフォルト引数を指定できる
function multiply (a = 5) {
///分割代入
const [a, b, c, d] = [1, 2, {d: 3}, 3];
const object = {a: 1, b: 2, c: {d: 3}};
const {a, b, c, c: {d}} = object;
///テンプレート文字列(プレースホルダ)
``(バッククオート)で文字列を囲むと${}で文字列内に変数展開ができる
const name = 'soarflat';
const name = 'aaa';
console.log(`AAA is ${name}`);
///スプレッド構文
...で可変長の複数要素を表す、下記のように柔軟に
function func1 (a, ...r) { alert(a + r + r[0]); }
func1(1, 2, 3, 4, 5);//でa=1、r[0]=2が入る
console.log(Math.max(r)); // => NaN
console.log(Math.max(...r)); // => 5 上手くいかないケースでも使える
function func2 (a, b, c){
func2(...array_arg);//argumentsオブジェクトのようにできる
const [a, b, ...c] = ['a', 'b', 'c', 'C'];
console.log(c); // => ["c", "C"]
const array2 = [...c, 4, 5, 6];
for in/for ofで配列やオブジェクトの扱い
const array = [65, 55, 80, 100];
const obj = {name: 'aaa', country: 'Japan'}
for(const index in array) {
console.log(array[index]);
}//65 55 80 100
for(const key in obj) {
console.log(key);
}//name country
for(const value of array) {
console.log(value);
}//65 55 80 100
///try catch
syntaxエラーはtry catchする必要がある、エラーハンドリングはこれ以外に色々ある
try{
let obj = JSON.parse(input);
}catch(e){
console.log(e instanceof SyntaxError);
console.error(e.message);
console.error(e.name);
console.error(e.stack);
flg_e = 'ERROR'
}
///文字置換 正規表現replace
output = input.replace(/\,/g, ",\n"); gを付けなければ最初の一つだけ
■promise/async/await はこちらに移行
https://www.bangboo.com/cms/blog/page_341.html
■FetchはAjax変わりになる
https://qiita.com/tomoyukilabs/items/9b464c53450acc0b9574
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch
fetchでget post
https://qiita.com/okashi/items/b5d5635b399396294af3
■ショートハンド
糖衣構文(シンタックスシュガー)とも:同じ意味の処理を元の構文よりシンプルに書ける別の書き方のこと
https://www.webprofessional.jp/shorthand-javascript-techniques/
https://qiita.com/kozzzz/items/b4cd57ead41fc6355afd
短縮記法が色々あって読みにくい↑を参考
他にもあるが、下記は参考になったので↓
「!==」(厳密不等価)は「&&」(論理AND)よりも強く結びつく
つまりnull!==e&&(e.innerHTML=t,e.style.display="block")は
(null!==e)&&(e.innerHTML=t,e.style.display="block") という意味
「&&」は 論理AND は、下記の動作をする
前から評価する
評価値「偽」が出たならば、「偽」を返して残りの部分は評価しない
カンマ演算子は、単純にカンマで区切られた式を順番に評価し、最後の式の値を返す
演算子であるのでカンマで区切られるものはすべて値・関数・式である必要
最終的にその演算子で繋がった式全体で真または偽となります
<script type="text/javascript">
let aaa={
displayResult:function(t){
let e=document.getElementById("result");
//該当DIVがあれば&&()の処理をする、IFの省略
null!==e&&(e.innerHTML=t,e.style.display="block")
}
};
window.onload = function(){
(function(t){
let e=document.getElementById("result");
if(e){
e.innerHTML=t;
e.style.display="block";
}
})('bbb');
setTimeout(aaa.displayResult('bbb'),5000);
};
</script>
<div id="result" style="display:none">aaa</div>
■ゲーム
https://qiita.com/doxas/items/9debec7e1f0c19bc8daa チュート8迄でOKか、9でボス10で処理高速化
http://www.west-mira.jp/javascript/list/4/16/ の打打打
どちらもsetTimeoutで自己関数を呼び出すループをしている
var run = true;
var fps = 1000 / 30;
window.onload = function(){
// ループ処理
(function(){
// HTMLを更新
info.innerHTML = message + ' at ' + mouse.x + ' : ' + mouse.y;
if(p.length() < chara.size){
// 衝突があったのでパラメータを変更してループを抜ける
run = false;
message = 'GAME OVER !!';
break;
}
// フラグにより再帰呼び出し
if(run){setTimeout(arguments.callee, fps);}
})();
};
function Games(){
//判定処理やら得点処理やら描画処理
clearTimeout(my_time);//setTimeoutをキャンセル
if(tokutenn<0){
game_end=1;
alert("GAME OVER...");
}
if(game_end!=1)my_time=setTimeout('Games();',hayasa);
}
■ネイティブで実現させるフロントエンド
https://blog.kannart.co.jp/coding/1199/
カルーセル addEventListenerでクリックされると要素分移動する
ハンバーガ 画面サイズでハンバーガDivの表示切替、クリックでナビDiv表示
グローバルナビ マウスオーバでナビDiv表示
フッター固定 スクロール300でposition:fixedを表示
スムーズスクロール scrollTop分をsettimeoutでループし段々移動
無限スクロール ローディング画像を非表示>最下部に行けば>ローディングを表示>要素を追加していくが
ページネーションのURL page.php?p=3から指定の要素を取り込んでいる(サーバサイド処理不要)
///解説系
https://www.nishi2002.com/14962.html フッター表示
https://beginners.atompro.net/smpdhtm_divhide1.html ナビ
https://popo-design.net/template/ シンプルRWD
http://cly7796.net/wp/javascript/implement-infinite-scrolling/ 無限スクロール
///例
カルーセル、ヒーロー、グローバルナビ
https://www.rakuten-card.co.jp/e-navi/members/index.xhtml
スクロール系(タイトルとナビとサブナビとフッターが各スクロールポイントが違う、広告追従、トップ戻るボタン)
フッターに広告、トップにスクロールで戻るボタン
https://ferret-plus.com/6385
https://www.sejuku.net/blog/52998
https://liginc.co.jp/392786 (グローバルナビも)
広告がスクロールに追従
https://dekiru.net/article/19272/
sticky-state 2.4.1 - (http://soenkekluth.com/) - https://github.com/soenkekluth/sticky-state#readme
スクロールの進み具合を表示、最後に広告?
https://blog.hubspot.jp/google-forms
無限スクロール ローディングbyスクロール
https://shopping.yahoo.co.jp/search?p=Oakley+holbrook
ハンバーガ拡大アニメ
https://rfs.jp/sb/javascript/js-lab/resize-header-scroll.html
Wijimo Grapecity 感じのいいレスポンシブ
https://demo.grapecity.com/wijmo/demos/Input/ListBox/InfiniteScroll
ドラッグ&ドロップでHTML要素を移動
https://q-az.net/elements-drag-and-drop/
https://web-designer.cman.jp/javascript_ref/mouse/move/
https://qiita.com/kaikusakari/items/ca45910a35712daca68c
ドラッグ&ドロップでファイルをアップロード
https://platycerium.sakura.ne.jp/node/812
https://www.okushin.co.jp/kodanuki_note/2018/02/%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%E3%82%A2%E3%83%B3%E3%83%89%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC.html
↓使用されるJS
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/DataTransfer/dropEffect/
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/DataTransfer/effectAllowed/
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/Event/preventDefault/
https://app.codegrid.net/entry/dnd-api-1
https://qiita.com/tochiji/items/4e9e64cabc0a1cd7a1ae
https://chaika.hatenablog.com/entry/2019/02/15/090000
DataTransferは、ドラッグ操作やクリップボード操作で転送されるデータ扱うインターフェイス
コンストラクタ
DataTransfer() 新しいDataTransferのオブジェクトを作成します。
メソッド
clearData() 転送中のデータを削除します。
getData() 転送中のデータの内容を取得します。
setData() 転送中のデータの内容を変更します。
setDragImage() ドラッグ操作中に表示するイメージを設定します。
プロパティ
dropEffect 転送データを取り扱う時のドロップ側の操作を返します。
種類:copy, move, link, none
effectAllowed 転送データを取り扱う時のドラッグ側の操作を返します。
種類:copy, move, link, copyLink, copyMove, linkMove, all, none, uninitialized
files 転送中のファイルの一覧をFileListで返します。
items 転送中のデータの一覧をDataTransferItemListで返します。
types 転送中のデータの種類の一覧を配列で返します。
addEventListener()でリッスンするドラッグイベント
dragstart, drag, dragenter, dragleave, dragover, drop, dragend
preventDefault() 規定の動作をキャンセルし文字入力やクリックや画面の遷移を行わない等
stopPropagation() イベント伝播を行わないようにする
classList クラス属性でDOM操作できるオブジェクト、クラスの追加/削除/切替/含むか判定等ができる
■ indexedDB
https://dev.classmethod.jp/articles/html5-indexed-database-api/
キーバリューを保存できる
このサイトのバックアップもアップロードフォルダーに一応取ってある
/// BANGBOO BLOG /// - Dexie がラッパーとして良き
IndexedDB のインターフェースは非同期でイベントベース
indexedDB.openのonsuccessで実行が必要だったり、UX上は良いかもしれんが扱いは面倒(毎回Openのonsuccessで良いが)
色んな形式で保存できるらしい、インデックス化は便利か
https://qiita.com/butakoma/items/2c1c956b63fcf956a137
https://ikkyu.hateblo.jp/entry/2019/11/23/180259
https://blog.htmlhifive.com/2018/06/06/indexed-db/
https://qiita.com/sachiko-kame/items/aebd618ef39de982ed7b
/// 他のクライアントへのデータ保存
1)localStorage/sessionStorageは同期型でgetItem/setItemを実行できる、5MBでStringのみ
扱いは簡単だが、引っこ抜き安全でない
https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851
https://www.granfairs.com/blog/staff/local-storage-01
https://qiita.com/masamitsu-konya/items/c69515604570150d3ab9
2)Cookieはサーバでヘッダーで生成される、4KBまで、JSで生成し書込/読込できる、サーバ送信される?
通常ページ表示でCookieがブラウザ保存され、再度そのページにアクセスの際ブラウザからCookieがサーバーに送信
https://qiita.com/dokkoisho/items/b415f1c9852c8fd12ec8
https://www.sejuku.net/blog/28696
Secure属性 httpsの通信の時のみCookieを送信、のぞかれないように、ONに
HHTPOnly属性 JSでの参照を防ぐ、ONに
SameSite属性 上の2つをした上でサイト構成を見てLAX以上にできればする
Strict: 同一サイト/ドメインリクエスト間のリクエストでのみCookieを送信
Lax: 他サイト/ドメインの遷移で、GETであればCookieセット
None: 以前通りリクエスト先がCookieをセットしたドメインであればCookieをセット
https://laboradian.com/same-site-cookies/
https://www.future-shop.jp/magazine/info-samesite
https://www.softel.co.jp/blogs/tech/archives/4942
■知りたい実装
/// e = pow(10)=10の累乗=0の数
31536e3 は 31536 * pow(10,3) = 31536000 であり秒数換算で1年
/// 引数にアルファベット1文字 function(a,b,c,x,y,z,e,t,n,s,o){
a,b,cとかx,y,zとかの順番とか、後は大体頭文字
eはイベント、エラー、エレメント、Tはタイプ、テンポラリ、ターゲット、テキスト、Nはナンバー、Sはストリング、Oはオブジェクト、Iはインクリメント等
/// エンコード系
btoa バイナリデータの文字列から base64 エンコードされた文字列を作成、文字列変換なので入力はアスキー化かURIエンコードの事前処理が必要
atob base64 形式でエンコードされたデータの文字列をデコード
escape 文字列をASCII形式でエンコード、ブラウザによってはLatin1ではなくUnicodeになる?
unescape ASCII形式の文字列をデコード
encodeURIComponent スペースが%20になったりURL用エンコード
decodeURIComponent URL用にエンコードされた文字列をデコード
base64はa-Z0-9と幾つかの記号の64種で画像や音声等バイナリを文字化しメール送信等の用途、普通はURIエンコードだけ使う感じか
==============================
■Chrome DevTools デバッガー
JSをソースタブで開く
{} でMinifyを解除
ブレイクポイントで止めて変数の状態を調べステップ(イン)で実行
console.log()でロギング
エラー発生時の自動一時停止の有効化
https://qiita.com/d-dai/items/0b580b26bb1d1622eb46
https://ja.javascript.info/debugging-chrome
スタックトレースするにはdebuggerとかconsole.trace()
JavaScriptのデバッグにはdebugger文を使おう - Qiita
リバースエンジニアリング
エレメントタブで影響のあるエレメントのソースを抜き出す
classやidの名前から機能を類推、CSSやJSで使われているか検索する
[Ctrl] + [Shift] + [F] を押すとページが読み込んだソース全体から検索可
https://www.doe.co.jp/hp-tips/browser/chrome-devtools-techniques/
Posted by funa : 07:27 AM | Web | Comment (0) | Trackback (0)
< March 2024 > | ||||||
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 | 29 | 30 |
31 |