2023-03-18 到達点メモ

2023-03-18 到達点メモ

  3月 18, 2023    nonoNaga

---

ひとまず、最近の関数はデフォルトで後から判定する方法（今回は配列のfindLastIndexの話）が用意されているということを忘れないようにしたい。

自力で実装すると複雑になってわかりにくくなる。というか、わかりにくかったのでfindLastIndexに変更した。

あと、解決策が載っているサイトがキャッシュ表示だったのもあったので、ちょっと雑でもいいから記録に残さねばならぬと思ったのが一つあった。

クラスのPieceのコンストラクタを呼び出す際に、以下のような画像をロードする関数を使っていたのですが、その中で使っているクラス内の関数がないというエラーがでてきた。

コード（省略しているが、drawPieceImageは宣言してある）

class Piece{

    constructor(x,y,length,index,context2D, horizontalElements, verticalElements){

        this.x = this.initPieceRandomPotion(x);

        this.y = this.initPieceRandomPotion(y);

        this.length = length;

        this.pieceNumber = index;

        this.context2D = context2D;

        this.isPieceSet = false;

        let image = new Image();

        image.src = "./images/sample_mini.png"

        image.onload = function () {

            this.image = image;

            this.drawPieceImage(horizontalElements, verticalElements);

        }

エラー内容

これがなぜそうなるのかが本当にわからなくて、onloadにマウスカーソルを移動させて表示されたポップウィンドウを見て漸くもしかしてこれってここのthisってクラスのthisじゃないんじゃねぇ？と気がつくことができた。

あーでもないこーでもないと色々パターンを試したり、調べ直したりすることで漸く下記のサイトを見つけることができた。

参考：JavaScriptのコールバックで クラスthis が参照できないの解決策 | PisukeCode - Web開発まとめ

上記のサイトによると二通りあるとのこと

１：bind関数で明示的にthisを指定する

        image.onload = function() {

            this.image = image;

            this.drawPieceImage(horizontalElements, verticalElements);

        }.bind(this);

２：アロー関数を使う

        image.onload = (e) => {

            this.image = image;

            this.drawPieceImage(horizontalElements, verticalElements);

        }

多分、最近だとアロー関数を使う人が多いから、今回のケースは見つかりにくかったんだろうなぁとはなんとなく思った。

気力があったら、これはまとめ直して独立記事としても上げてもいい気がしている。

すごく余談ではあるのだが、ここのonloadの詳細がMDNの方（近そうなのが、Windows:loadイベントのページ）では見つけられなくて、それっぽそうなのが、Unified XUL Platform MDN BackupのページにあったGlobalEventHandlers.onload - Web APIsが一番それっぽそうだった。
ただ、このサイトの立ち位置がよくわからなかったのでどこまで信用していいのかちょっとなぁという気分だったりする。
基本、困ったらMDNだよりにしていたので、別のサイトを探しておかねばなぁとは感じいている。

上記の問題以外にも描画タイミングのせいでエラーが表示されてその解決もあって疲れたので今日はここまで

Read More

2023-02-25 到達点メモ

2023-02-25 到達点メモ

  2月 25, 2023    nonoNaga

---

 今日は、クラス化の書き換えを行った。

それほど手間ではないだろうなぁとは思っていたが、結構あっさり片付いた。

クラス化するとこの処理は、Aのクラスに属するから、Aのクラスに入れたほうがいいだろう。とか、そもそも、生成時に呼び出す処理じゃねぇ？とか、余計な変数が減ってだいぶわかりやすくなったなど、思った以上に効果があった。

なんというか、概念を作るとそこに沿うように意識が向けられるように感じた。
ちゃんとやっている人には当たり前の話なのかもしれないが、まずはクラスを作ることから始めるのが良いように感じる。

あと、せっかくクラスを作ったので、そろそろファイルを分けるために、クラスごとにファイルを分けているのか？、仮にそうだとしたら、どのように名前を付けるのか？を調べてみた。

ざっくりReactのGithubを見てみたのだが、とりあえずそういうのはなさそうだった。

あと、MDNの方も調べていたのが、その際にMDNでフレームワークを使ったチュートリアルを載せているのを発見した。ざっとReactのページの部分をスクロールしただけだが、書きかけとかはなさそうだった。

検証が2020年のバージョンだったり、あんまり日本語化されていないが、ある程度参考にはなる気がする。

まじでMDNって凄いなぁと感心しつつ、今日はここまで

Read More

2023-02-22, 23 到達点メモ

2023-02-22, 23 到達点メモ

  2月 23, 2023    nonoNaga

---

 ピースごとに黒い枠線を追加し、最初にランダム配置をすることにした。

ランダムに配置をすると、いよいよジグソーパズルっぽくなってきた気がする

コードを書いていて思うのは、やはり公式サイト（もっともよく参考にしているMDNはJavaScriptの公式サイトではないが・・・）を見るのが大事だなと思った。

雑な書き方をしていても実行自体はできてしまうので、よく見るとこれっていらないんじゃ（実際にいらない）があったりする

例えば、今までずっと図形を書くときにbeginPath()とclosePath()が必要だと思っていたのだが、MDNを見る限りではこれらは線を描くときに必要なのであって、少なくともstrokeRect()やfillRect()を使うときには不要だった。
個人で書いた内容を見て終わり。はやっぱりまずいなぁこれ。
少なくとも公式（に近い）サイトを見て情報の裏取りは必要だし、検証も必要だなぁと。

■参考サイト

• CanvasRenderingContext2D.beginPath() - Web API | MDN
• CanvasRenderingContext2D.closePath() - Web API | MDN
• CanvasRenderingContext2D.strokeRect() - Web API | MDN
• CanvasRenderingContext2D.fillRect() - Web API | MDN

あと、そのうち、クラスに書き換えようと思っていたので、ちょっとクラスについてMDNで調べて以下の書き方ができることを確認した。

const Rectangle = class {

  constructor(height, width) {

    this.height = height;

    this.width = width;

  }

  aaa(value){

    return this.height = value;

  }

  area() {

    return this.height * this.width;

  }

};

console.log(new Rectangle(5, 8).area());

let test = new Rectangle(10, 5)

console.log(test.area());

console.log(test.aaa(100));

console.log(test.area());

console.log(test.area(1100));

というか、引数を設定していないところで引数を入れてもエラーを起こさないのは少しびっくりした。

■参考サイト

• クラス - JavaScript | MDN
• クラス式 - JavaScript | MDN

なんだか、疲れたので今日はここまで

Read More

2023-02-21 到達点メモ

2023-02-21 到達点メモ

  2月 21, 2023    nonoNaga

---

 今日もジグソーパズルの実装を進めた。

今回は、ドラッグ中のピースを一番前に表示する処理を作っていた。
実装自体は、ある程度検討はついていたので、苦戦せずに進めることができた。

データは配列で管理しており、配列でループして表示とやっていたので、対象のデータを一番うしろに持ってくることができれば解決できるだろうと思っていて実際その通りだった。

今回、少し覚えておいたほうがいいと感じたことは、今までsplice関数を使ったことがなかったので、MDNのサイト上で動作テストを行った。

すべてのページで動作テストが出来る訳では無いが、わざわざテスト用のファイルを作るのも少し面倒なので、MDN上で動きのテストができるなら、そちらで積極的にため下も良いかなと思った。

話は変わるが、よく言われることではあるが名前は大事だなと改めて思った。
今回で言えば、indexとnumberは違うと改めて感じた。
私の感覚の話になるが、indexは配列を指定するときに使うもので、numberは物体の番号（実体物？）で使っている。
前は全部名前をindexとか▲▲indexにしていたので、numberとindexで分けるべきところをごっちゃになっていて多分そのせいでバグが起きてしまったように感じている。
気の所為と言われてしまえば、そのなのかもしれないが、名前をちゃんとつけ直そうとしたからこそ、今回のバグはすっと発見できた気がする。

ほぼほぼ予定通りに進んだので、今日はここまで

Read More

2023-02-20 到達点メモ

2023-02-20 到達点メモ

  2月 20, 2023    nonoNaga

---

画像を分割して読み込む処理がもう少し苦戦すると思ったが、そんなことはなかった。

分割して読み込むにしても、分割データのパラメータ用の変数を新たに用意するのは嫌だったので、公式ドキュメントを見てgetImageData()の採用を一回考える
参考サイト：CanvasRenderingContext2D.getImageData() - Web APIs | MDN

狙いとしては、これ自体をdrawImage関数で使うimage代わりにできないかと考えたためだが、CORSの問題があったため、採用を断念

参考サイト：<canvas>利用時の getImageData() がエラー（The canvas has been tainted by cross-origin data.） : まだプログラマーですが何か？

色々考えたところ、すでにindexのデータは保持してあり、それを使って計算すれば求められることに気がついた。

具体的には、横の長さ×(index%横の要素数)と縦の長さ×Math.trunc((index/縦の要素数))でうまく行った。

なので、新しい変数は用意せずにdrawImageの部分を書き換えて対応できた。

計算の素晴らしさを感じつつ、今日はここまで。

Read More

2023-02-19 到達点メモ

2023-02-19 到達点メモ

  2月 19, 2023    nonoNaga

---

 昨日の続き。

ひとまず、ジグソーパズルの原型みたいなのはできた。
具体的に言うと以下のような感じ

見かけはあれだが、分割した画像と最初のピースの配置をランダムにすれば、ジグソーパズルはほぼほぼできたと思う。

ただ、もうちょっと作り込みたい感じではある。

■学んだこと、わかったこと

• 昨日の到達点メモで参考にしたネットのコードは、CSSのStyleの値を変化させて画像を移動させていた。元のタグの位置から計算しており、絶対座標の値ではなかったので、この方法は不採用にした
• canvasで描画したものをドラッグアンドロップをしている風に移動させる方法があったので、それを採用
  参考：【JavaScript】Canvas要素をドラッグ＆ドロップで動かす【ゲーム】 - TKGBlog
• for..ofやfor..inの存在を忘れていて自分の情けなさに泣く。結局使わなかったが・・・。
  いつもごっちゃになるのだが、for..inは使い方に注意が必要
  参考：for...in - JavaScript | MDN # 配列の繰り返しと for...in
• 配列で新しいキーを作るときに以下のやり方が入力支援を受けられて楽
  let test = [];//空配列の作成
  test.ptn = "___ptn____";
  
• 配列の値を取り出し、計算した結果、その配列のデータを知りたいときに、findやfindIndexを使うと面倒なforとかを使わなくて済む。
  今回は、「indexの値が知りたい」、「条件が一致すればそこで終了したい」があったのでfindIndexを採用。
  indexも知りたいし、値そのものも知りたい場合は、findIndexでindexを取得し、そのindexを配列に入れれば良い
• あと、for文を使うより、（コードが少ないせいもおそらくあるが）理解しやすい気がする

■感じたこと、思ったこと

• 一つずつ実装できそうなものを積み上げていくのが良かったと思う
• for文を使うのは最終手段じゃないんだろうかという気がしてきた。
  多分、他の構文を使ったほうがやりやすいし、見やすい気がする
• 参考にしているコードはあるが、ほぼほぼ一から書いているのでだいぶ中身がわかっているように感じている。そのせいか、昨日のコードみたいに自分のものじゃないコード感がほぼほぼない。
• うまくいかないときは一つ一つの値の確認が大事だと本当に感じた。
• 悩んだり、変に考え込むよりは作ったほうが早いし、思考が明確になる
• コードを書いていて久しぶりに達成感と楽しさを感じた。考えがうまくいくと楽しい。
• ここまで来るのに多分10時間ぐらい。一時は完成が見えなかったが、ここまでこれてよかった。
• どれくらいコードの量になるかは、想像できていなかったが、ライブラリなしで今のところ150行未満。意外とコンパクトにやれるもんだなと思った。

■参考サイト

配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA

今日はここまで

Read More

2023-02-18 到達点メモ

2023-02-18 到達点メモ

  2月 18, 2023    nonoNaga

---

すごく久しぶりにコードに触ったので、久しぶりに書く

というか、久しぶり過ぎてブログってどうやって書くんだっけ状態になってる……。

今回は、ジグソーパズルを作りたくなったので、いろいろ試したり、調べたり、ソースコードを読んだりしていた。

昔も今も全然JavaScriptに触っていないこともあり、かなり読み解くのに苦労した。

■学んだこと

• 基本ForはforEachに普通に置き換えることが出来る
• forEachでfor文のようなcontinueをやりたい場合は、returnを使えば良い
  参考：javascriptのforEach内でcontinueのように処理を飛ばす方法 | PisukeCode - Web開発まとめ
• document.getElementsByTagName()の返り値は、HTMLCollectionであり、配列ではない。具体的に言うとconcat()あたりで結合すると、[HTMLCollection(5), HTMLCollection(3)]みたいな結合になる
• array.fromを使えば、配列風オブジェクト（今回のケースではHTMLCollection）を配列に変換することが出来る
  参考：Array.from() - JavaScript | MDN
• 文字の繰り返しは、repeat()を使えば良い

■感じたこと

• 実際に手を動かしたり、試したりするのが一番勉強になる
• 名前をちゃんとつけたほうが良い。理解度がかなり変わる。今回はそれをかなり実感した。
• 必要ない変数はなるべく書かないほうが良い。変数がたくさんあると把握が大変。
• 参考にしようとしているコードの動きはなんとなく把握できた気がするが、まだコードを物にできていない気がする
• 具体的な根拠があるわけではないが、一からコードを書く力が昔より落ちた気がする。

勉強と遊びがなんとなく両立できた気がする。

それなりに満足したので今日はここまで

Read More

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

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

  11月 03, 2019    nonoNaga

---

環境移行の影響で、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を試験的に使っている

今日はここまで

Read More

2019-09-02 到達点メモ

2019-09-02　到達点メモ

  9月 02, 2019    nonoNaga

---

以前、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

今日はここまで

Read More

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

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

  8月 31, 2019    nonoNaga

---

◆事の起こり

 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.というエラーがログに表示された。


◆解決方法

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

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

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

３．修正後も拡張機能のページ(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

Read More

2019-08-24 、26、27 、30 到達点メモ

2019-08-24 、26、27 、30　到達点メモ

  8月 31, 2019    nonoNaga

---

正規表現で否定形を使いたい
(?!TEST)

上記のようにすると検索にTESTを含まないようにすることができる
なので、例えばTESは含むけどTESTは含まないとかしたい場合は

^(?!TEST)^(TES)

とすれば行けるはず

駄目だった
また今度参考サイトをちゃんと読みなおす

参考サイト：正規表現：文字列を「含まない」否定の表現まとめ | WWWクリエイターズ

条件を満たしたときにチェックボックスにチェックを入れる事に成功した。
どうやらnameとvalueを両方見なくても、条件が一致すれば操作できるようである
なぜかnameのほうで[]があり、上手く指定できなかった。
そのため、今回はvalueの方を指定して、チェックボックスにチェックを入れた

 $ ('[value="テストチェックボックス１"]').prop ('checked', true);

本来であるならば、恐らく重複を防ぐためにnameの方も指定しているのだろうが
今回でいえば、重複が起こる可能性は限りなく低いとみているのでこのままでいく。

どうも動的に作られたクリックできるボタンが上手くクリックイベントを起動させることができない。
どっかでそういう問題を見た記憶があるが、追加されたタグを削除することで対処ができたので良しとする。
今回は.remove()で対処した。同じタグをすべて消すことができる

$('.testDeleteTag').remove();

参考サイト:jQueryでDOM要素を削除する：remove(), empty(), unwrap(), detach() | UX MILK

配列の全部検索はforEachでもできるが、下のサイトによるとどうやら非推奨らしい。
コードを見た時にこれは一体何なのか？ということをわかりやすくするためらしい。

参考サイト：JavaScript で forEach を使うのは最終手段 - Qiita

実際、別にforEachに拘っているわけではないので
mapで書いてみたところ、書けたのでそれで良しとする


var categories = [
'test1',
'test_nononaga',
'testetstetst',
'Hogehoge',
'ホげほげ',
'その他',
];
categories.map (category => {
var tempValue = '[value="' + category + '"]';
$ (tempValue).prop ('checked', false);
});

参考サイト：Array.prototype.map()  by Mozilla Contributors is licensed under CC-BY-SA 2.5.

例えば、以下のタグがあるとして
hrefのデータを取得したいとする。
<a class="test_a_tag" href="https://www.nononagainfo.com/">
nononagaInfo
</a>

この場合は以下のように書けばよい
$ ('.test_a_tag').attr ('href');

参考サイト：jQueryのhref属性を取得する - コードログ

ajaxで色々やる際に参考にしたサイト
参考サイト：はじめてajaxを使うときに知りたかったこと - Qiita

新しくタブを開きたい場合は、以下のようにやればよい

window.open (urlData);

参考サイト：window.open  by Mozilla Contributors is licensed under CC-BY-SA 2.5.

たかだか、全部のタブを調べるという作業で何でこんなに迷走しているのか・・・。
問題１．background.jsでないと、 chrome.tabs.queryを使用することができない

問題２．contentsとbackgroundでデータのやり取りをするのだが
後述する問題３のこともあり、今一やり方がよくわかっていない・・・。

◆参考サイト
try catch and ...release: Chrome拡張機能のbackground.jsとpopup.jsで通信

問題３．google翻訳によるものなのでどこまで正確なのかはわからないが
どうやらチャンネルを開く前にrunetime.connect() を呼び出すとエラーになるらしい。
というか特定のバージョンからそのようなので、古い奴のコードだと普通に動かない

◆参考サイト
How to Fix: Could not establish connection. Receiving end does not exist - Bennett Notes

◆その他参考に成りそうなサイト
Chromeの拡張機能を作ってみる Vol.3 実装
僕が考えたChrome拡張機能を作るときのデザインパターン


content_script.jsでchrome.runtime.sendMessage()を使い
background.jsでchrome.runtime.onMessage.addListener()を書いているのに
ずっーーーーと、Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.というエラーがなぜ起こるのかがよくわからなかった。

調べたところ他の拡張機能が干渉して起こるケースもあるらしいのだが
今回に限って言えば、これ以外全部動かないようにしていたので
これが原因では無かった。

色々調べた結果、どうやらマニフェストファイルに、
"background": {
    "scripts": ["src/js/background.js"]
  },
という記述が無かったのが原因のようだった。

また、自分が変更の処理を行った場合、
画面更新で対処していたのだが、background.jsやマニフェストファイルは
其れでは対応できない。

なので、下の画像のように拡張機能のページ(chrome://extensions/)のエクステンションの更新ボタンをクリックしてやるのが一番確実。

◆参考サイト
Message Passing - Google Chrome

かえせよっ！おれのじかんっ！かえせよっっ！！！


他に躓いたところとして、二つあって
一つはtabの一覧のURLを取得する方法はかなり苦労した。

chrome.windows.getAllの方法で実装する方法を発見した。
例えば、getAllの時にpopulate:trueを設定しないと
必要なものが取得できなかったり、
返り値がwindowsという複数形だという事に気が付かなくて
大分悩んだりとか、本当に色々大変だった。

◆参考サイト
javascript  ー  Chromeで開いているタブを取得する - コードログ
chrome.windows - Google Chrome

ただ、全てが終わってこれを書いているときに検証してわかったのだが
chrome.tabs.queryでやったほうが簡潔だし
わかりやすかった・・・。

実装例
  chrome.tabs.query ({}, function (tabs) {
    var urls = '';
    tabs.map (tab => {
      console.log (tab.url);
    });
  });


かえせよっ(以下ry

前にやchrome.tabs.queryで出来ていたと思っていたのですが
できなかったのでchrome.windows.getAllの方法でやっていました・・・。
出来なかったのは、マニフェストファイルのpermissionsの中にtabsが
無かったのが原因だったのかもしれません。

もう一つは、何度通信ができても値が初期値しか返ってこないことがあった。
具体的には以下のように書いていた
  var urls = '';
  chrome.tabs.query ({}, function (tabs) {
    tabs.map (tab => {
      urls += tab.url + '</br>';
    });
  });
  sendResponse ({
    urls: urls,
  });

どうも、console.logで調べた感じだとchrome.tabs.queryしかり、chrome.windows.getAllは非同期で動いているらしかった。
おそらく、値が取得できていない状態でsendResponseが動いたので
空データしか受け取れない状態になっていたと思われる

それを踏まえた上で、今回は以下のように修正した。
具体的には、chrome.tabs.queryの中に、sendResponseを含めることにした。
  chrome.tabs.query ({}, function (tabs) {
    var urls = '';
    tabs.map (tab => {
      urls += tab.url + '</br>';
    });
    sendResponse ({
      urls: urls,
    });
  });

今回はこれで解決できたが、複数動かすものとか考えるとこれだと
明らかに問題が起こる。
thenについてちゃんと調べておかないと・・・。

◆参考になりそうなサイト
Promiseを使う  by Mozilla Contributors is licensed under CC-BY-SA 2.5.

今回の開いているタブのURLを取得するChrome拡張をつくったので
それをGitに上げときましたので参考にしたい方はどうぞ
https://github.com/nononaga/myExample/tree/master/getTabUrls

単独記事を作ろうと思ったが、力尽きたので今日はここまで。

Read More

2019-08-09 08-17 08-20 08-21 到達点メモ

2019-08-09 08-17 08-20 08-21 到達点メモ

  8月 21, 2019    nonoNaga

---

今回は、沢山ある<li>の中から<h3>のデータを取得し
その中でNGワードがあるものを非表示にするやり方

$ ('li').each (function (index, val) {
var tempDOM = $ (val);
var tempRegExp = new RegExp ('NGワード|禁止ワード');
var searchText = tempDOM.find ('h3').text ();
if (searchText && searchText.match (tempRegExp)) {
var searchID = tempDOM.attr ('search_id');
var hiddenElem = $ ('[search_id="' + searchID + '"]');
hiddenElem.attr ('hidden', true);
}
});

まず、$ ('li').eachで<li>のデータを取得できるようにし
これは、そのままだとhtmlデータが入ったテキストのままようなので
これを以下のようにセレクタにしてあげます。
var tempDOM = $ (val);

◆参考サイト
jQueryのeach()メソッドの基本的な使い方
jQueryのセレクタ解説 - SMART 開発者のためのウェブマガジン


matchで使うようにRegExpを作ります。そのまま書いてもいいのですが
今後、NGワードが増えていくのでこちらの方が見やすいと思ったので
こういう形にしました。
var tempRegExp = new RegExp ('NGワード|禁止ワード');

◆参考サイト
【JavaScript】～を含むかのチェック - Qiita


次にtempDOMのh3タグを見つけたいので、findで検索します。

今回は、構造上非表示にしたい<li>タグにsearchIDという属性があったので
これで対処しましたが、場合によっては他の方法を考える必要があります。
なお、searchIDのデータを取得したい場合は、以下のように指定します。
var searchID = tempDOM.attr ('search_id');

◆参考サイト
jQuery 属性値を取得/設定するサンプル(attr) | ITSakura
.attr() | jQuery API Documentation

属性の値で検索したいので以下のように設定します。
var hiddenElem = $ ('[search_id="' + searchID + '"]');

◆参考サイト
【jQuery】data属性に特定の値を持つ要素を指定する方法。


対象のliを非表示にしたいので以下のように設定します。
hiddenElem.attr ('hidden', true);

◆参考サイト
HTMLタグにhiddenを付ければ内容を非表示にできる | iwb.jp

＊jQueryで、フォームに入力された値を取得したい場合

//間違い
$ ('.hogehoge_get_form_text').text ();

// 正解
$ ('.hogehoge_get_form_text').val ();

◆参考サイト
jQuery： フォーム要素からの入力値を取得するには？（val） - Build Insider


＊jQueryで、labelの属性forを指定したい場合

$ ('label[for="hogehoge_point_label_for"]')

◆参考サイト
javascript-jQueryラベルの'for'属性セレクタ - コードログ

Ajax.getでURLからデータを取得しようとしたところ、コンソールログで以下の様なエラーが出た
jquery.min.js:2 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://HogeHoge.JP with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

今一状況は飲み込めていないのだが、意図しないアクセスを防ぐために
クロスドメインという仕様があるらしい。
ただ、MDNの方を読む限りでは、オリジン間リソース共有というのが正しい単語のように思える。うーん・・・。

◆参考サイト
オリジン間リソース共有 (CORS)  by Mozilla Contributors is licensed under CC-BY-SA 2.5.
JavaScript のクロス ドメイン (Cross-Domain) 問題の回避と諸注意 - tsmatz
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. が出る。 - ミノタケ日記。
Cross-Origin Resource Sharing(CORS)を使用したHTTPリクエスト | 69log
An In-depth Look at CORS ー SitePoint

◆リクエストを調べる際に参考にしたサイト
cURLコマンドでレスポンスヘッダのみを取得する - Qiita

色々模索してみましたが正直よくわからねぇ・・・。
ただ、今回のケースでいえば、Chromeの仕様の影響が大きい様だったので
起動オプションで無効化のコマンドを使った方が解決として早かったです。

◆参考サイト
クロスドメイン制約を回避するChromeショートカットを作る - Qiita


チェックボックスにチェックを入れたい場合は、以下のようにする
$ ('input[type=checkbox][name=test_is_checkbox]').prop (
     'checked',
      true
 );
チェックを外したい場合は、trueをfalseに変えればよい。

ラジオボタンでチェックを入れる場合は、propでやったほうが良い。
何故かというと、以下のようにvalueの値が数字でない場合があるから。

$ ('[name=test_user_status][value=nononaga]').prop ('checked', true);

◆参考サイト
【jQuery】フォーム部品の取得・設定まとめ - Qiita

正規表現で特定文字列から一番最後まで削除したい場合は以下のように書く
今回はURLのパラメータやプロパティを削除したい時に利用した

url = url.replace (/(#.*$)|(\?.*$)/, '');

◆参考サイト
<a>: アンカー要素  by Mozilla Contributors is licensed under CC-BY-SA 2.5.
正規表現：「行頭」「行末」の表現と、応用例 | WWWクリエイターズ


ボタンクリックを使いたいと思っていたが、思った以上に実装が簡単だった。
$('#buttonID').click();

◆参考サイト
【jQuery】イベント発火方法 - Qiita

お蔭で今やっている作業がかなり楽になった上に早くなった。
今までだと登録する内容が良くて頑張れば一時間に２０件登録が間に合うかどうかなのに
今だと少し気を抜いてやって５０分くらいで２０件登録できるようになった。
プログラミングで感動したのはかなり久しぶりかもしれない・・・。

今日はここまで

Read More

2019-07-29 07-31 08-05 08-06 到達点メモ

2019-07-29 07-31 08-05 08-06 到達点メモ

  8月 07, 2019    nonoNaga

---

jQuery

.html()で出力をさせていたのだが
その際にコード上だと<br />なのに
何故か.html()で出力させた場合は、<br>になっていた。
調べてみると、そもそも<br />はXHTMLで使うものであって
HTMLは＜br＞になるらしい。

これが混在しているという事は、違いを理解して使っていないという事だよなぁ・・・。

参考サイト：<br> と <br /> タグの違い　【HTML と XHTML 】
https://ameblo.jp/midorieng03/entry-10929028852.html

メソッド名を踏まえて考えると <br /> が自動的に<br>になるのは
まぁ納得かな。

class内でclickの中にclassのメソッドを呼び出すのは無理っぽい？
＊方法はあるかもしれんが、分からんかった。
一先ず、下記のようにclickと同じネストで関数を定義すれば
呼び出すことは出来る。

class RewriteTestPage {
  constructor () {}
  addTestButton () {
    function testCall () {
      console.log ('test');
    }

    var h1Html = '<button type="button" class="test_title">テスト</button>';
    $ ('div.test_add td').append (h1Html);
    $ ('.test_title').click (function (e) {
      testCall ();
    });
  }
}

例えば、長くなった且つごちゃごちゃになったjsを分割したい時などに
jsからjsを呼び出したいとする
jsでjsを呼び出すには基本的には、importで大丈夫なのだが、
エクステンションの場合はちょっと話が異なるようである

大まかに項目を上げると
・呼び出し元のクラスは、static newとexport文を宣言する必要がある
・content_main.jsとcontent_script.jsを作成し
content_scriptでcontent_mainを呼び出すようにする
・content_mainで呼び出したいクラスのファイル名を書く

参考サイト：chrome-extension-es6-import
https://github.com/otiai10/chrome-extension-es6-import/tree/81199dcf1caa25df566e5e1dd9837989f151b775


あと、良く理由が分かっていないのだが
先ほど記載した参考サイトを元に行ってみたのだが
非同期処理内でwindow.onloadのfunction内で
クラス関数を実行しようとしても何故か実行しない。
window.onloadの部分をコメントアウトすると動くことは確認できている。


ちょっと書かないと特に縁のない言語はやはりすぐに忘れてしまう・・・。
変数を含んだ置換処理を行いたい場合は、
new RegExp()を使えばよい

＊使用例
var tempHtmlString = $ ('.test_div').html ();
var tempRegExp = new RegExp (
'<div>' +
  testValue +
  '<\/div>(\n(.*?)|(.*?))<\/th>\n(.*?)<td'
);
tempHtmlString = tempHtmlString.replace (tempRegExp, 'TestReplace');

◆参考サイト
javascript:replace()で正規表現に変数を使う場合
RegExp  by Mozilla Contributors is licensed under CC-BY-SA 2.5.

他にも作業しようと思ったが、力尽きたので今日はここまで

Read More

2019-07-26 07-27 到達点メモ

2019-07-26 07-27 到達点メモ

  7月 28, 2019    nonoNaga

---

.text()を行う際にDOM操作をする際にそもそもタグの指定が間違っていないか
確かめたい時は.html()でやると
テキストデータを取得する方法としては間違っていないが
タグの指定は間違っていないかどうかが分かる。

例えば、以下の様なテーブル構造があったとする

<table class="test_tag nononaga_tag">
  <tr>
    <th>TEST</th>
    <td><a rel="nofollow" target="_blank" href="https://www.nononagainfo.com/">https://www.nononagainfo.com/</a></td>
  </tr>
</table>
この際に、欲しいデータが、tdタグのURLアドレスだった場合、
$ ('table.test_tag').text ();
もしくは、
$ ('table.nononaga_tag').text ();
では取得できない。

この場合、正しいやり方は以下のどちらかである。
$ ('table.test_tag td').text ();
$ ('table.nononaga_tag td').text ();
＊理由はよくわかっていないが、 ('table.test_tag table.nononaga_tag  td').text ();
では取得できない。何か指定方法が間違っているのかもしれない。

大体目標の作業は終わったと思う。
これで作業がグッと楽になるはず。

例えば、以下の構造があったとして
ノノナガというデータを取りたいとする。
<div class="job_type">
  <div class="programmer">
    <span class="user_name">
    ノノナガ
    </span>
  </div>
</div>

その場合は、以下のようにすればよい
$('.job_type').find('.user_name')

参考サイト：jQueryで子要素を取得する方法：children(), find()
https://uxmilk.jp/10873

jQueryとJavaScriptがごっちゃになってしまってるので気を付けないといけない
.find()はjQueryの話。

タグ内に不要な改行が入っており、且つそれがブラウザ上で反映されていないので
その表示に近づけたい場合は、以下のようにやればよい。

◆htmlでのデータ
<p>


あいうえお
</p>


◆ブラウザでの表示
あいうえお

var copyHtml = '<p>' + $ ('.aiueo').html ().replace (/\n/g, '') + '</p>';
var copyText = $ (copyHtml).text ();
console.log (copyText);

一旦HTMLデータを出力し、そこでreplaceで改行(\nのことで<br>のではない)
そのあと、タグが消えるのでhtmlに戻すためにpタグで囲んでやる

他のごみデータの削除もこれで対処できるかもしれない。

今日はここまで。

Read More

2019-07-23、07-24、07-25 到達点メモ

2019-07-23、07-24、07-25 到達点メモ

  7月 26, 2019    nonoNaga

---

DOM操作とjQueryとJavaScriptがごっちゃになっていて分かんねぇぇえええ

function内で他のDOMの値が取れないのは何でなんだ・・・。
.text()じゃなかったからだった・・・。(＊ずっと.textでやっており、後ろの括弧が無かった)

クリップボードにコピーするのは以下のサイトが役に立ったというかコピペした。

[jQuery] テキストエリアの内容をクリップボードにコピーするボタンを設置したい
https://migi.me/jquery/copy-clipboard/

思った以上に手間取った。
正直、未だに分かっていないことも多い・・・。

最終的に必要なところを全部ボタン化してコピーしたいのだが
今のところh1タグのところしか作れていない・・・。

あと、特定のURLときのみ機能するようにしないと調べ物しながらだと邪魔すぎる・・・。

2019-07-24

URLの指定は普通に楽だった。
urlを取得する構文を書き、document.URL.match で一部分の重要な箇所が一致するかを見れば普通に場合別けができた。

参考サイト：jQueryでURLを取得してページごとに条件分岐させる
https://designsupply-web.com/knowledgeside/1592/

データを取得する際に、タグとかの状態でhtmlデータを取得したい場合は
単純に.html()で取得できる。
.text()だと、<br>の改行が認識されないので、自力で変換してやる必要がある

参考サイト：【jQuery】textメソッド改行入らない
https://teratail.com/questions/36078

なお、JavaScriptで変換する場合は.replaceを使う必要がある
また、条件を満たすものを全部変換したい場合は、正規表現を使う必要がある。

参考サイト：特定の文字列を全て置換する[Javascript]
https://qiita.com/DecoratedKnight/items/103ab57431b6c448e535

参考サイト：基本的な正規表現一覧
https://murashun.jp/blog/20190215-01.html

参考サイト：エスケープ, 特殊文字
https://ja.javascript.info/regexp-escaping

また引っかかったところとしてスラッシュとバックスラッシュがごっちゃになってしまい
本来、スラッシュ(/)をやりたかったのをバックスラッシュ(\)と勘違いしてしまい
\\ と入力して袋小路に入っていた。
正しいやり方は \/ である。

DOMの指定の仕方で、仮に<h3 class="h3_hoghoge">を指定しようと思ったが、他のクラスにも同じ名前があったので、<section class="sec1234_hoghoge"><h3 class="h3_hoghoge">を指定したいとする。


その場合は、以下の様な指定をすればよい
＊正しい例
$ ('section.sec1234_hoghoge>h3.h3_hoghoge')

無論、以下の様な指定はできない
＊ダメな例
$ ('section.sec1234_hoghoge').$('h3.h3_hoghoge')

jQueryのセレクタメモ(リンク先は階層関係の指定の部分からになっている)
https://qiita.com/Thought_Nibbler/items/5d4fc40a4d4325128b24#%E9%9A%8E%E5%B1%A4%E9%96%A2%E4%BF%82%E3%81%AE%E6%8C%87%E5%AE%9A

その他
たまにクラス名で
<div class="hoge momomo">
という風にスペースで区切ってあるものがあるが
これは、クラス名が二つになっており、"hoge momomo"というクラス名のわけではない。
正しくは、"hoge"と"momomo"の二つである

参考サイト
スペースを含んだクラス名を jquery で指定できない
https://ja.stackoverflow.com/questions/22510/%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%82%92%E5%90%AB%E3%82%93%E3%81%A0%E3%82%AF%E3%83%A9%E3%82%B9%E5%90%8D%E3%82%92-jquery-%E3%81%A7%E6%8C%87%E5%AE%9A%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84

2019-07-25
本当に皆自由に書くんだなぁ・・・。
ブラウザで表示される内容と実データの中身に乖離がありすぎるのですが、それは・・・。

一番簡単なのは、一度htmlデータで出力した後に
それを再度htmlデータとして取り込みをそれを.text()で出力するのが良い
ただし、ブラウザで表示されるのと実データは違うので(CSSなどで表示に変化が出ているのだろうか・・・？)
実データがアレだと結局手直しが必要になる。

正規表現で、下のように赤字の部分だけ変えたくない場合とかがある
    /<div>テスト<\/div>\n(.*?)<\/th>\n(.*?)<td/,

その時は以下のように書けばよい
'<div>テスト<\/div>\n$1<\/th>\n$2<td class="test_class"'

参考サイト
文字列の一部だけを変更したい
https://hodade.com/seiki/page.php?r_ichibu

日付や年数の加算減算をしたい場合は、
.setDate()をすればよい。

あと、紛らわしい事として、
＊.getMonth()で取得できる数値は0~11になっている
＊年数を取得したい場合は,.getFullYear()
がある
なお、文字列から日付に変換したい場合は
var date = new Date ('2019-07-25');
でも可能

参考サイト
【JavaScript】日付処理
https://qiita.com/kazu56/items/cca24cfdca4553269cab
JavaScript の Date は罠が多すぎる
https://qiita.com/labocho/items/5fbaa0491b67221419b4
javascriptで日付（月・日）を加算（減算）してみた
http://shoprev.hatenablog.com/entry/2014/09/18/223316

X番目のthのタグを指定するには
th:nth-child(X)とやればよい
一番最初の番号は1。0ではない

jQueryでTABLE要素の操作
https://rfs.jp/sb/javascript/js-lab/jquery-table.html

末尾の文字を削除する場合は
'aaaaaf'.slice( 0, -1 ) ;
とやればよい

先頭、末尾の文字を削除する方法
https://lab.syncer.jp/Web/JavaScript/Snippet/5/

タグの指定が間違っていないはず？なのだが上手く行かない
元のHTMLの構造がおかしいのか、それとも、なんか指定が間違っているのか・・・？

目標の大体は解決できたので今日はここまで。

Read More

2019-05-11、05-24、07-18 到達点メモ

2019-05-11、05-24、07-18　到達点メモ

  7月 18, 2019    nonoNaga

---

Android App Bundleについて調べる。

端折った大雑把な解釈だが、apkだと全部の端末に対応しないといけないので
余分なデータが含まれてしまう。
そこでGooglePlay側で必要なデータだけコンパイルするようにすることで
容量が減る。という解釈だと思っている。


Android App Bundle でアプリサイズを削減
https://rakuishi.com/archives/android-app-bundle/

Android App Bundle のすゝめ
https://note.mu/numero_dev/n/n36ccca859ae5

Android アプリバンドル (Android App Bundle) について学んだ
https://vividcode.hatenablog.com/entry/android/app-bundle


というかちゃんと調べたら公式ドキュメントの方がありましたね・・・。
About Android App Bundles(Android Developers)
https://developer.android.com/guide/app-bundle/

Android App Bundle でアプリや機能をオンデマンド配信する(GooglePlayConsoleヘルプ)
https://support.google.com/googleplay/android-developer/answer/9006925


あまりに久しぶりなので色々アップデートしたのが
またなんか動作が変わってる・・・。

DeployGate関連
Gradle SyncでgetPackageApplication()の警告を解決した
https://firespeed.org/diary.php?diary=kenz-1911

コンパイルに失敗したのでjreからjdkに変更
  implementation "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
↓
  implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"

というかAndroid App Bundleの対処をする前に動作確認をして
一旦これであげようかなぁ・・・。


GIMPを使ってロゴ消しなどをやりたい場合。

Windowの場合は、以下のサイトに移動してプラグインをダウロードする
https://github.com/pixlsus/registry.gimp.org_static/blob/master/registry.gimp.org/files/Resynthesizer_v1.0-i686.zip

C:\Users\user名\.gimp-2.8\plug-insに
ReadMe以外の解答したファイルを全て移動させる。

消したい部分を少し大きめに囲んだうえで
フィルター → 強調 → Heal selectionを選択し行うと
少し時間がかかるが奇麗な感じに修正してくれる。
ギリギリの大きさで選択すると、変な線が残る場合がある。

軽くしかReadMeを読んでいないのだが、Pythonをあらかじめ入れておく必要があるらしい。
自分は既にPythonを入れているので其処の検証はしていない。


参考サイト
https://github.com/bootchk/resynthesizer
https://github.com/pixlsus/registry.gimp.org_static/blob/master/registry.gimp.org/files/Resynthesizer_v1.0-i686.zip
GIMPで画像の一部を削除する方法！Ver2.10でのスマート消去の使い方
【GIMP】画像の一部をキレイに消す方法


引っ越しとか色々あって凄くこの手のページを開くのが久しぶりすぎる・・・。

ちょっと内職の作業がクソ面倒なのでエクステンションで如何にかできそうなので
前々からやろうやろうと思っていた調査を始めることにした。

目標としては、
・開いているページURLをボタンでコピーできるようにする
・特定の情報をボタンでコピーできるようにする(のちのちは、一部の情報は加工した状態のものをコピーできるようにしたい。)

久しぶりすぎて大分色々忘れているのだが、おそらくDOMの操作をすればいけそう

以下のサイトが進める上で参考になりそう。

Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介！【サンプルあり】
https://qiita.com/guru_taka/items/37a90766f4f845e963e5
Extend the Browser(公式ドキュメント)
https://developer.chrome.com/extensions


というかDOMの書き替えは、どちらかというとJavaScriptとかJQueryの領域だわ
普通にボタンの追加とか、要素の取得とかはそっちで行けそうな気がする。

参考サイト
jQueryでDOM操作する際の基本記述を勉強し直してみたよ。
http://programmerbox.com/2013-09-26_jquery_dom_basic_description/

特定のURLのときだけ動かすみたいなことはmanifest.jsonでやるっぽいので
それを踏まえた上で如何にかできそう

何時まで経っても更新しないのはあれなので今日はここまで

Read More

2019-02-27、03-01、05-03 到達点メモ

2019-02-27、03-01、05-03 到達点メモ

  5月 03, 2019    nonoNaga

---

前に作ったプロジェクトを起動してSyncしたところ以下のエラーが出た。

Error:No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android

幾つか参考にしたサイトだと、NDKをダウンロードして
足りないファイルを入れよう。という話が出ていたのだが
その肝心のmips64el-linux-androidが無かった。

参考サイト：Android Studio 3.2 でビルドエラー「No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android」が出た時の対処方法
参考サイト：Error:No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android


下記のサイトによると、どうもバージョンが上がるとmips64自体が対応されなくなったようである。恐らくなくなってしまった可能性が高い。

参考サイト："No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android" のコメントより

で、対策に関しては、gradleのバージョンを
 classpath 'com.android.tools.build:gradle:3.3.1'
に上げた後にGradle自体？のバージョンを4.10.1?に上げたところ
エラーが出なくなった。

で、なおしてたらなんか見覚えのあるエラーを見つけた。
Failed to resolve: org.jetbrains.kotlin:kotlin-stdlib-jre7:1.3.11

案の定、以前の日記に同じ現象があった

という訳で前回と同じように以下のように修正した

implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"

久しぶりにAdMobを動かしたら、落ちたんだが？？？

一部のみを抜粋するが、こんなエラー文だった。

02-27 22:12:43.031 28083-28083/? E/AndroidRuntime: FATAL EXCEPTION: main

    Process: com.nononagainfo.www.admobtest, PID: 28083

    java.lang.RuntimeException: Unable to get provider com.google.android.gms.ads.MobileAdsInitProvider: java.lang.IllegalStateException: 

    

    ******************************************************************************

    * The Google Mobile Ads SDK was initialized incorrectly. AdMob publishers    *

    * should follow the instructions here: https://goo.gl/fQ2neu to add a valid  *

    * App ID inside the AndroidManifest. Google Ad Manager publishers should     *

    * follow instructions here: https://goo.gl/h17b6x.                           *

    ******************************************************************************

    

    

        at android.app.ActivityThread.installProvider(ActivityThread.java:5921)

        at android.app.ActivityThread.installContentProviders(ActivityThread.java:5510)

        at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5449)

        at android.app.ActivityThread.-wrap3(ActivityThread.java)

        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1587)

        at android.os.Handler.dispatchMessage(Handler.java:102)

        at android.os.Looper.loop(Looper.java:154)

        at android.app.ActivityThread.main(ActivityThread.java:6184)

        at java.lang.reflect.Method.invoke(Native Method)

        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:866)

        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:756)

     Caused by: java.lang.IllegalStateException: 

    

    ******************************************************************************

    * The Google Mobile Ads SDK was initialized incorrectly. AdMob publishers    *

    * should follow the instructions here: https://goo.gl/fQ2neu to add a valid  *

    * App ID inside the AndroidManifest. Google Ad Manager publishers should     *

    * follow instructions here: https://goo.gl/h17b6x.                           *

    ******************************************************************************

    

    

        at com.google.android.gms.internal.ads.zzze.attachInfo(Unknown Source)

        at com.google.android.gms.ads.MobileAdsInitProvider.attachInfo(Unknown Source)

        at android.app.ActivityThread.installProvider(ActivityThread.java:5918)

        ... 10 more

で、対策を簡単に述べると

AndroidManifest.xmlに以下のようにAdMobのIDを追加する必要があるようである。

<manifest>

    <application>

        <!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->

        <meta-data

            android:name="com.google.android.gms.ads.APPLICATION_ID"

            android:value="[ADMOB_APP_ID]"/>

    </application>

</manifest>

更に言うと、 Google Mobile Ads SDK バージョン 17.0.0 でこの対策をしないと

クラッシュするようである

参考サイト：スタートガイド - AndroidManifest.xml を更新する


ruby

evalは文字列をコードとして実行することができる
例:
puts eval "1+2"


javascript

puppeteerで特定のサイトを開いたらチェックボックスにチェックを入れるといった事をしたかった。
なので、以下のように書いた

const puppeteer = require ('puppeteer');
(async () => {
  const browser = await puppeteer.launch ({
    headless: false,
    defaultViewport: {
      width: 1366,
      height: 728,
    },
  });
  const page = await browser.newPage ();
  var linkAdders = 'https://www.nononagainfo.com/';
  await page.goto (linkAdders, {waitUntil: 'domcontentloaded'});
  await page.click ('#test_test_testID');
  await page.waitFor (100);

  const page2 = await browser.newPage ();
  var linkAdders2 = 'https://play.google.com/store/apps/details?id=com.aaa.nononaga.voicetimerr';
  await page2.goto (linkAdders2, {waitUntil: 'domcontentloaded'});
  await page2.waitFor (100);

  const page3 = await browser.newPage ();
  var linkAdders3 ='https://www.nononagainfo.com/p/blog-page_1.html';
  await page3.goto (linkAdders3, {waitUntil: 'domcontentloaded'});
  await page3.waitFor (100);
}) ();

・ヘッドレスモードとは、CUIのみで処理を行う事。
つまり、普通にGUIとして使いたい(ブラウザを表示したい)場合は、launchメソッドで
headless: falseを入れてあげればよい。
・デフォルトだと表示画面が小さいのでlaunchメソッドでdefaultViewport: {}の値を指定する必要がある
・executablePathで、起動するデフォルトchromeをしているすることができるが
その際の注意として、/(バックスラッシュ)は、一つではなく二つ指定する必要がある。
例：'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'
・チェックボックスに関しては、clickメソッドに対象のIDを指定すればチェックボックスにチェックが入る。
・複数のタブを作りたい場合は、browser.newPage ();を新しく作ればよい

参考サイト：Puppeteer で Headless Chromeを操ってE2Eテストする(予定) - 入力・操作編
参考サイト：Puppeteerでスクレイピング

ただ、一つ問題があってキャッシュを保持したかったのだが
(元々の目的から考えるに当たり前なのだが)保持することは出来なかった。

なんか、操作できる良いやつってなんかあったっけ・・・？


気が付いたら、二ヶ月もたってたわ・・・。

RubyのStringのdeleteの仕様について

以下のコードを書くとどういう結果になると思いますか？

puts "chochoc".delete("ch")

理想
ooc

現実
oo

deleteはどうも一文字ずつを削除する仕様の様で
二文字だけを消したい場合はこの書き方ではできない
どう実装するかというとgsubを使う

puts "chochoc".gsub(/ch/,"")

以上。

Read More

2019-01-30、02-01、02-07、02-08 到達点メモ

2019-01-30、02-01、02-07、02-08 到達点メモ

  2月 08, 2019    nonoNaga

---

AtCoderのRubyでのB - Minesweeperのネタバレあり。


何故か2019/1/30にイスラエルから700くらいアクセスがあった。
普段10くらいしかないのに、一体何があったし・・・。
ざっと調べてみたが、何か事件があった訳ではないようだ。
VoiceTimerでググってみたが、何か特別なことがあった訳でないようだし・・・。
本当に謎だ。

Android

エミュレーターで720dpの画面のテストをしたい場合
xlargeが720dp

Node.js

ワンクリックで特定のサイト群を一括起動する機能が作りたかったので作った。
運用していくと色々やりたいことが出てきそうだが、
ひとまずはnpmのライブラリにあるopenerで十分実現できる
var opener = require ('opener');

opener ('chrome');
opener ('http://yahoo.co.jp);
opener ('http://google.com');
opener ('https://www.nononagainfo.com/');

上記の通りにやるとタブが増える感じで
起動することができる。
他のブラウザを立ち上げていると特に立ち上げたいものが多い場合だと
そっちにが立ち上がる時があるので注意。
やり方がなかなか見つからなかったから
案外難しいのかと思ったが凄く簡単だった。

参考サイト：openerを使ってnpmスクリプトからブラウザを開いてみる
参考サイト：opener
参考サイト：npm script を試す (サンプル付き忘備録)

AtCoder　Ruby

B - Minesweeper
動作が上手く行かない時の検証の仕方が凄く下手だ。
今回の問題は文字列の中に含まれる"."が、0の時になることがありえるので
本来は、"#"で検索をかける前に、"."を全て0に変換する必要があるのだが
それを最初にやらなかった為、出力結果が本来加算されるべきところで加算されていなかった。

最初に変換をやっとけと言われてしまえばそれまでなのだが
そもそも変換がきちんと行われていないということに気づくのが遅すぎた。
デバッグの仕方が悪いのはわかるのだが、具体的にどう理屈をつけてやればいいんだろう？

いや、そもそもPrintデバックから卒業する時なんだと思う。
と、下のサイトを見て思いました。
printデバッグにさようなら！Ruby初心者のためのByebugチュートリアル

あと、メモとして書いておくが
事前に0の数値の配列を作っておくという手法は盲点だった。
確かにそれをやったほうが速そうではある。

rubyだと nil || "AAA"　だと　"AAA"が採用されるようである

具体例

puts nil || "BBB"
結果はBBB

puts "AAA" || "BBB"
結果はAAA

Read More

2019-01-04、07、08 、17 到達点メモ

2019-01-04、07、08 、17 到達点メモ

  1月 17, 2019    nonoNaga

---

あけおめ。ことよろ(激遅)

Kotlinの話
やってないと、基本的な操作を度忘れする
.toInt()で型変換ができる

参考サイト：kotlinの型と変換

ミリ秒の計算をしたいときはCalendarクラスを使わずに
dateクラスで計算したほうがいいらしい。
Calendarクラスの生成はコストがかかるとの事
なお、引き算をしたい場合はtime型に直す必要がある

参考サイト：DateのgetTime(公式ドキュメント)
参考サイト：時分秒の加算/減算にCalendarクラスを使うのはもったいない？


・・・というかちょっと待て。
別にdate型に直す必要すらないような・・・。
System.currentTimeMillis()でミリ秒を取得しているから
これを毎回使いまわせばよいのでは？？？

うん。必要なかった。
メモとして残しておくが
System.currentTimeMillis()はlong型

xxdpi=420dpi

文字の調整をしているのだがマジ面倒くさい！！！
正直、今度作る時があれば、中央から配置を決めていって
相対的に調整したほうがいいかも
後何でもかんでも共通化するのは考え物。
あとで個別に調整入れたときに、新たに作る必要があって面倒くさい！！！

あと、今微妙に困っているのだが、エミュレーターで動かしたら
割と結構文字が小さく見えたので大きくしたところ
Preferenceの文字だけ大きくならなかった。
何でだろうと思ったら、そこだけライブラリで管理していた。
……文字を大きくする方法を調べないと
何でもかんでもライブラリを採用するのは考え物。

めも
AlarmManagerを使う場合の注意点
Androidでアラームアプリを作る
[Android] AlarmManagerをBroadcastRecieverと使う
ALARMMANAGERで指定した時間に処理させる
AlarmManager(公式ドキュメント)

Youtubeの表示はJavaScriptによる表示のようである。
なので一度全部表示してからじゃないと正しく値が取れない。

今、node.jsを使ってクロージングができないかを調べてみる
で、今のところnpmのcrawlerとSpookyJSの候補が二つ上がっている
crawlerで試しにyahooの検索ページから情報を取得してみようと思ったが
検索結果が取得できなかった。
おそらく検索結果はJavaScriptの結果を表示している為
データが取れていないと今はそう仮説を立てている。
＊知識不足過ぎて何が正しくて間違っているのかよくわからない状態

参考サイト：SpookyJS(GitHub)

ひとまず、SpookyJSの更新日時が４年前くらいにとまっているのが凄く気になるが
どうやらJavaScriptの結果自体を取れるらしい(未検証)

コマンドメモ
npm i phantomjs casperjs spooky

参考サイト：SpookyJSでJavaScript有効状態のページをスクレイピング

というかnpm auditでやるとmoderateが10、highが1それぞれ出てくる(白目)

おかしい・・・。なんで俺は修正作業をしてるんだ・・・？

package.jsonをnpm-check-updatesで一括でやろうと思ったが
なんか指定のバージョンまで上がらないし
これもしかすると手作業で直して
対象のフォルダでnpm updateかけた方がが早い気がする・・・

参考サイト：脆弱性の警告を受けたnpmパッケージの依存関係を力技で直す
参考サイト：npm installしたパッケージの更新確認とアップデート(npm-check-updates)

エラーを出さなくする方法
１．npm auditに従ってそこのフォルダに移動してpackage.jsonのバージョンを修正をする
２．node_modelusに入ったデータを上の方でコピペする
３．package-lock.jsonを消し、npm i --package-lock-onlyで新しく生成する
npm auditを使ってエラーが減ったかを確認する

なお、まともに動くかどうかは知らん！！！

というか大本のPhantomJSの開発が終了しているらしい
参考サイト：PhantomJSの開発が終了しリポジトリがアーカイブ化された

代替としてHeadless ChromeがあるらしいがなんかもうUWSCを引っ張りなおした方がいい気がしてきた・・・。

javascript

取得系は、puppeteerがなんだかんだでようやくできた。

参考サイト：Puppeteerを使ったスクレイピング
参考サイト：Chrome操作ライブラリ chromy と puppeteer を比較
参考サイト：puppeteerでスクレイピング

凄く苦しんだところとして、タグのリンクを取る方法が分からなかった

例えば、h3タグのリンクアドレスを取りたい場合は以下のようにした。
 var h3Document =node.querySelector ('h3 a[href]');
h3Document.getAttribute ('href');
これでアドレスを取ることができる。

また、ちゃんとページ遷移を待ちたい場合は以下のように書けばよい
await page.goto (linkAdders, {waitUntil: 'domcontentloaded'});

単純にWaitをかけたい場合は以下のようにすればよい
await page.waitFor (1500);

参考サイト：puppeteerでよく使うであろう処理の書き方

awitとか使っている場合は
forEachより、for..inとかfor..ofの方がよい
forEachは関数内に処理を書くので
非同期系の処理だとエラーになる

参考サイト：for..in  by Mozilla Contributors is licensed under CC-BY-SA 2.5.
参考サイト：for...of   by Mozilla Contributors is licensed under CC-BY-SA 2.5.

関数内で関数を呼び出す方法が分からん。

あ、そういえば、Sourcetreeを立ち上げていると何度もログインを求めてくる現象について調べないとあかん。


GithubでPrivateレポジトリが使えるようになったと聞いたので
実際に使ってみた。

今のところは特に変わらない感じ。
ウミガメのスープの問題をどうやって管理しようかと悩んでいたところだったので
とてもちょうどよい。
GitGUIとか使ってみたのだが
正直、コマンド打った方が早いし確実
文字化けの対策については、.gitフォルダがある場所でマウスを右クリックをして
Git Bushを出させる。
それをクリックして起動した後に、以下のコマンドを入力する
git config --global gui.encoding utf-8

GitGUIを立ち上げなおすと文字化けが治るはず

参考サイト：Git for Windows の Git GUIで文字化けする場合
参考サイト：Git for Windows で日本語を使いたい

なお、Wordファイルだとどれくらい変化したかが分からないので
基本的にMarkDownでやることにあった。

今のところは、エディタに関してはVisual Studio Codeという凄く便利なエディターがあるので基本をそれを使っている。
というか割と真面目にEmEditorと要らんかもしれん・・・。

メモとして参考になりそうなのを張っておく
脱GitHub初心者を目指す人のREADMEマークダウン使いこなし術
Markdown記法一覧

Read More

2018-09-06、21 到達点メモ

2018-09-06、21　到達点メモ

  10月 12, 2018    nonoNaga

---

JavaScript

ループ処理でconsole.logが表示されない問題

下記のサイトのように対処してコンソール表示設定が問題ないのに
表示がされない場合の話
参考サイト：【2017お盆明け】Chromeのコンソールログが表示されない時の対処法

対処方法を先に述べますとdo whileとかではなくて
setIntervalを使うと表示されます

参考サイト：chromeのConsoleで処理を停止するほうほう

どうやらChrome DevToolsでは
console.logはファイルを全部読み込まないと表示されないようで
whileなどでループ処理が終わっていない場合、console.logでは表示されないです。

ただ、読み込んだ後ならwhile中でも表示は出来るので例えば最初に空のファイルを作り一度表示させた後にファイルの中身を更新するとconsole.logの中身が表示されます。

無論、新しくファイルを開きなおすと、console.logが表示されなくなるので
もし、前は表示されたのに今日開きなおしたら表示されない！！
ということがあったら、それが原因です。

hashについて

hashに存在しないキーを与えるとundefinedという値が返ってくる
これは、true/falseだとfalseに相当する
なので、存在しないキーを弾くという事をしたい場合は以下のようにすればよい

if (!hash[key]) {
    console.log ('不正な値です。');
  }

参考サイト：JavaScriptでfalseになるもの

良く忘れるのでメモ

gitのremoteのURLの設定を間違えたので直したい
git remote set-url origin fix_url

*別にhttpsでも問題は無い。
参考サイト：gitのremote urlを変更する(レポジトリ移行時)
参考サイト：gitでpushしようとしたら403された話
参考サイト：GitHubにPushしようとしたらCould not read from remote repository と怒られた

httpsで指定するときは以下のように指定する
＊Bitbucketの場合
https://<repo_owner>@bitbucket.org/<accountname>/<reponame>.git

repo_ownerは、アップロードする人のユーザー名。大抵はアカウント名＝アップロードする人のユーザー名のはず

accountnameは、bitbucketのアカウント名

reponameは、レポジトリの名前

参考サイト：SSHキー(Bitbuketの公式ドキュメントより)

正規表現

数字のみを使いたい
\d

数字以外
^\d もしくは \D

参考サイト：正規表現の基本

公開日と日付は気にしない事

Read More