Translate

BTemplates.com

Powered by Blogger.

2019年11月3日日曜日

2019-11-02、03 到達点メモ


環境移行の影響で、eslintとprettierの設定が吹っ飛んでしまった

ひとまず、近い形にはなったので手順を書いておく
ローカルではなく、グローバルでやりたかったので
それに準拠する
*Windows環境の話です

- node.jsをダウンロードする
- npmが動くはずなので以下のコマンドを入力する
npm i -g eslint prettier npm eslint-plugin-prettier eslint-config-prettier prettier-eslint
- VSCodeを立ち上げて、拡張機能のESlintとPrettierをそれぞれ入れる
- Eslintの拡張機能でESlint: Auto Fix On Saveにチェックを入れる
- Ctrl+,で設定画面を開き、Format on Saveで検索し、チェックを入れる
- .eslintrc.js(eslintrcの前に「.」が付く)を作成し以下の内容にする
module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
};
.prettierrc.js(prettierrcの前に「.」が付く)を作成し、以下の内容にする
module.exports = {
  tabWidth: 2,
  singleQuote: true,
  trailingComma: 'es5',
};


多分これで動くはず


参考サイト:
ESLint 最初の一歩 - Qiita
ESLint - Prettier連携のやり方と仕組み - Qiita
VS Code の便利なショートカットキー - Qiita
VS CodeにPrettier・ESLint・Stylelintを導入してファイル保存時にコードを自動整形させる方法 | WEMO
ESLintとPrettierを併用するときの設定(eslint-plugin-prettier, eslint-config-prettier) - dackdive's blog


以前にメソッドと括弧の間にスペースが挿入される設定だったのだが
できなくなったので調べてみた。
どうやら、メソッドと括弧の間にスペースが挿入されるのは
Eslint側でspace-before-function-parenをやればできるのようなのだが
ここのページによるとPreitterにはspace-before-function-parenに
あたる機能がないらしく、実際にPrettierのOptionページを見た限りではなさそうである


参考サイト:
ESLintのエラールール。日本語ざっくり解説[スタイル編] - Qiita
space-before-function-paren - Rules - ESLint - Pluggable JavaScript linter
Options · Prettier
ESLint - Prettier連携のやり方と仕組み - Qiita



console.logで警告が出る問題は以下の内容にしたら
あっさり解決できた。
rules: { 'no-console': ['error', { allow: 'warn' }] },

参考サイト:
no-console - Rules - ESLint - Pluggable JavaScript linter



◆その他

自分は今Braveというブラウザを使っているのだが
その際に現在選択しているタブが見にくかった
そこで選択しているタブだけ変更する方法を調べたところ
テーマで選択しているタブの色を変更することができることがわかった。
Black&Whiteのほうがわかりやすいが、もうちょっと白を抑えた感じにしたかったので
現在はSerenityを試験的に使っている

今日はここまで

2019年11月2日土曜日

2019-10-19 到達点メモ


草をはやしたい

草が生えないのは、コミットしているメールアドレスと
githubのほうのメールアドレスが一致していないと
草が生えない。

手段はいろいろあるが、今回は過去のコミットを全部変更する手段をとった

git filter-branch -f --env-filter "GIT_AUTHOR_NAME='test_name'; GIT_AUTHOR_EMAIL='test@example.com'; GIT_COMMITTER_NAME='test_name'; GIT_COMMITTER_EMAIL='test@example.com';" HEAD

GIT_AUTHOR_NAMEはコード自体の作者名
GIT_COMMITTER_EMAILはコミットした人(複数人で作業すれば、コミットが違うことはあり得る)
という解釈している。
AUTHORとCOMMITTERは、一人で開発しているのであれば
同じと考えてよい。なので、どちらも同じものにしてやるとよい。

ただ、この手法でやると過去のデータまで書き換わるのでこのままでは
pushできない。そこで強制的に書き換えるforce pushが必要

git push --force-with-lease origin master

参考サイト
【草はやしてる?】意外と知らないGitHubで草を生やす条件とは | Findy Engineer Lab - ファインディエンジニアラボ
Git の Commit Author と Commiter を変更する - Qiita
GitのCommitユーザを修正する方法 - Qiita
git push -f をやめて --force-with-lease を使おう - Qiita

2019年10月24日木曜日

マルチディスプレイの際に追加したディスプレイに範囲外と表示されたので、リフレッシュレートを弄って対処した話


◆諸注意
ブログを書く際に画像を撮ろうと前の設定に戻したのですが
なぜかエラーが出ませんでした。
そのため、この通りにしても解決するとは限らないですが、参考程度にどうぞ。

◆本文
私が持っているディスプレイモニターは貰い物で、めちゃめちゃ古いやつです。
具体的に言うとVGAという今のパソコンで採用していないと思われる規格です。

なので、HDMIという規格に変換する機器を使って接続したのですが
マルチディスプレイの設定を行ったところ、範囲外とディスプレイに表示されました。

色々調べてみたのですが、リフレッシュレートが繋げているディスプレイと一致しないと
範囲外と表示されることがあるそうです。

・参考サイト


なので、以下のサイトの手順通りに59ヘルツのところを
60に変更したところ、表示されるようになった。

・参考サイト

以上。

2019年9月4日水曜日

2019-09-04 到達点メモ


今回は、珍しく何を作るかを決めてちゃんと実装してみた。
大まかな手順としては以下のとおりである。

1.何を作るか、もしくは、何を修正するかを決める
2.ブランチ名を決める
3.テスト内容を決める
4.作成する
5-P1.作業に戻りたい場合は、stashで一時保存をして、ブランチを切り替える
6.動作テストを行う
7.コミットする
8.マージする

テスト内容を決める際に、ブランチ名を名前としたファイルを作成して
以下のことを記述した。

*ブランチ名
*概要
*開発目的
*機能概要
*テスト方法
*実施した際に変更した内容

本当はもっとファイルを別けたほうがいいのかもしれないが
利便性を考えてこのような形にした。

この後にコードの方で実際に何を作業するのかをある程度細かく書いた。
上記の内容はすべて決まっていたわけでなく、ある程度変えたり
また、作業していて実際に要らないと気が付いた作業を辞めたりした。(テストをほとんど終えた状態で気が付いたので作業量は減っていない)

全部含めて2時間過ぎくらいかかったのだが、普段のやり方だったらもう少し早く終わったと思う。ただし、普段のやり方ならテストは不十分だし、考えながら作っているのでそれと比べると今回は迷いなくできたと思う。

この方法が本当にうまく行くのかはまだちょっとわからないが
もう少し続けていきたいと思う。

今日はここまで

2019年9月3日火曜日

2019-09-03 到達点メモ


◆jQuery話

今回、URLから取得したデータに以下のように単語検索をかけていた。
data.match('検索したい文字')
しかし、何故かnullで結果が返ってきていた。

dataの中身を改めてconsole.logで調べたところ、
dataはhtmlデータで、特に問題が無いと思っていたのだが実際は違った。

検索したい文字はブラウザ上だと以下のように表示されていた。

検索したい文字

しかし、HTMLだと以下のようになっている

<b><span style="color: red;">検索</span></b>したい文字

で、今回はHTMLデータを取得していたので、data.match('検索したい文字')
のやり方で出てくるわけがなかった・・・。
なので、もしやるなら、$ (data).text ()のようにしてタグを消す必要がある。


◆Gitもしくは開発方法の話

最近、Chrome拡張を開発しているのだが、ちょっとうーんと思う出来事が起きた。
現状Chrome拡張を開発しながら、作業をする際にそれを使っている。
作成中もしくは修正中にバグると作業が止まってしまう上に
修正中のデータ時に消したくない時があったりする。

developを作るとかstashを使うとか解決できるかと思ったが、
考え直したところ適切な解決策ではないように思える。
というかそもそも作業の進め方を間違っているような気がする。
何を作るかを決めてから作業をするべきで、
場当たり的に進めているのが問題の様な気がする
つまり、
問題が起こる。もしくは作りたいところができる。
→ branchを作る。
→ 作業を進める。
(→ もし、何らかの理由で一時保存したい場合にstashを使って元のブランチに戻す)
→ 統合する

こんな感じが理想なのではないだろうか?

参考サイト
Git - ブランチとマージの基本
Gitのブランチモデルについて - Qiita
Gitのdevelopでの作業について - Qiita
変更を一時的に退避!キメろgit stash - Qiita

ブランチ名を変更したり、そもそもブランチを作ったりするのに
以下のサイトを参考にさせてもらった。
git コマンド branchの作り方 - Qiita
gitのローカルのブランチ名を変更したい - Qiita


もう今日はこれでよい気がするので、ここまで。



2019年9月2日月曜日

2019-09-02 到達点メモ


以前、Windowsを立ち上げた際にbatファイルを自動起動を行う設定を行ったのだが
最近はそのbatファイルを全く使っていない。
なので、自動起動の設定を解除しようと思ったのだが、方法を忘れてしまったので
再調査した。

調べた結果、今回はタスクスケジューラの設定を使っていたことが判明しました。
やり方は以下の通りで出来ました

参考サイト:Windows > スタートアップ時に.batファイルを実行する - Qiita

ただ、最初見た時に何処にbatファイルがあるか分からなかったので探したところ
下の画像の様な左のフォルダ名をクリックしたら見覚えのあるファイル名が見つかりました。











見つからなかった時は、試してみると見つかるかもしれません。


Chrome拡張の開発の話

ポータルサイトに載ってある外部URLを開く際に、
既に開いているブラウザのタブがあれば
開かないという重複判定の処理を作っていました。

ところが、ポータルサイト内のURLはちゃんと重複があるのを判定しているのに、
外部URLだと普通に開いてしまう出来事がありました。

何でかなと思って調査したところ、ポータルサイトに載ってあるURLは、http://~に対してそのページに遷移してみると、https://~となってました。
同じメソッドを使っているのだから、早くその点は気が付けばよかったですね・・・。
このケースはたまたま対応できたが、全く違うアドレスに自動遷移するタイプはどうやって対応すればいいんだろうか・・・。


Chrome拡張のCross-Origin Requests問題が解決できねぇ・・・
一番簡単な立ち上げる際に
--force-empty-corb-allowlist --enable-features=NetworkService
は出来たんだけど、流石にとりあえず動かすならそれでよいが
長期的にはちゃんと解決したいなぁと思ってました。

なので、二番目以降のbackgroundで通信をするとかの方法をやっているのだけど
上手く行かない・・・。
まぁ、今開発しているChrome拡張にそのまま組み込もうとしているから
失敗しているのだろうけど・・・。

というか、やっぱ、ちゃんと公式ドキュメントを読み解いて理解する力を
身に付けないとダメだわ。
少なくともChrome拡張はちゃんと説明してあるし・・・。

参考サイト:Changes to Cross-Origin Requests in Chrome Extension Content Scripts - The Chromium Projects

今日はここまで

2019年8月31日土曜日

Chrome拡張のUnchecked runtime.lastError: Could not establish connection. Receiving end does not exist.というエラーを解決する


◆事の起こり

 Chrome拡張を作成している際に、ボタンをクリックしたときに
ブラウザの開いている全てのタブのURLが欲しい場面があった。

それ自体は、chrome.tabs.queryで取得できるのだが、
chrome.tabs.queryは、background.jsでないと動かないので
content_script.jsとbackground.jsで通信する必要があった。

しかし、content_script.jsでchrome.runtime.sendMessageを使って
background.jsに送信し、background.jsでchrome.runtime.onMessage.addListener
を使って受診し、sendResponseで送り返しているはずなのだが、
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.というエラーがログに表示された。


◆解決方法

私の場合だと、以下の三つを行うことで解決できた。

1.manifest.jsonに以下の内容が記述していなかった。
  "background": {
    "scripts": [
      "src/js/background.js"
    ]
  },

2.chrome.runtime.onMessage.addListener()のfunctionの中の一番最後に
return trueを記述していない

3.修正後も拡張機能のページ(chrome://extensions/)のエクステンションの更新ボタンをクリックして更新していなかった為である。




◆実際に試したこと

調べたところ、ネットに出ているのは試したのは以下の二つである。
・ほかの拡張機能が悪さをしているので、他の拡張機能を全部オフにしよう。
・エラー名の通り接続できていないので、接続できるまでsetTimeout()で呼び出せばいいんじゃないのか?

結論から言えば、今回のケースだと全部駄目だった。

なお、最初に記述した忙しい人の為の解決方法の内容を全て行った上で
仮にsetTimeoutのやり方で実装する場合は
以下のように実装すれば動くことは確認できた。

var getTabUrlsButton =
  '<button type="button" class="get_tab_urls_button">ブラウザのタブのURL取得</button>';
$ ('.getTabsUrlsButton').append (getTabUrlsButton);
$ ('.get_tab_urls_button').click (function (e) {
  ping ();
});
function ping () {
  chrome.runtime.sendMessage ({}, function (response) {
    if (chrome.runtime.lastError) {
      setTimeout (ping, 1000);
    } else {
      if (response) {
        $ ('.getTabUrlText').html (response.urls);
      }
    }
  });
}


*参考サイト

・特定のChrome拡張機能をOFFにするとエラーが消える事を検証している動画
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.(YouTube)
・上と同じく特定のChrome拡張機能をOFFにするとエラーが消えるという話をしている
node.js - How to fix 'Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.' - Stack Overflow

・回答の一例でのsetTimeoutの話を参考にさせてもらった
Chrome Extension message passing: Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist - Stack Overflow


◆その他

・調べてもpop.jsとbackground.jsの通信による結果のケースが多く
content_script.jsは特別なケースなのかと思っていたが、単にcontent_script.jsで書く人がいなかっただけのようだった。

・background.jsから、content_script.jsにデータを渡す際にタブのIDの指定が必要だという情報をネットで見かけたが、今回の件に限って言えば必要なかった。

・これとは直接は関係ないが、chrome.tabs.query()を使った際にsendResponse()を
chrome.tabs.query()のfunction外で宣言すると、chrome.tabs.query()が非同期なので
値を取得できずに初期値しか返さない。その為、きちんと動いているように見えるのに初期値しか返さなくて凄く混乱したことがあった。
これは、細かくconsole.logを使う事で明らかに呼び出しの順番がおかしい事に気が付くことで、なんとか判明することができた。


◆サンプル

content_script.jsとbackground.js間で通信をして
タブのURLを取得するChrome拡張を作りました。
gitを上げたので良ければ参考にしてください。
https://github.com/nononaga/myExample/tree/master/getTabUrls