tag:blogger.com,1999:blog-57602462510042981922024-03-13T12:01:45.605+09:00nonoNagaInfo
nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.comBlogger154125tag:blogger.com,1999:blog-5760246251004298192.post-4124828001403313082023-03-18T15:42:00.010+09:002023-03-18T15:59:56.994+09:002023-03-18 到達点メモ<p>ひとまず、最近の関数はデフォルトで後から判定する方法(今回は<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex">配列のfindLastIndex</a>の話)が用意されているということを忘れないようにしたい。</p><p>自力で実装すると複雑になってわかりにくくなる。というか、わかりにくかったのでfindLastIndexに変更した。</p><p>あと、解決策が載っているサイトがキャッシュ表示だったのもあったので、ちょっと雑でもいいから記録に残さねばならぬと思ったのが一つあった。</p><p>クラスのPieceのコンストラクタを呼び出す際に、以下のような画像をロードする関数を使っていたのですが、その中で使っているクラス内の関数がないというエラーがでてきた。</p><p>コード(省略しているが、drawPieceImageは宣言してある)</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">Piece</span>{</div><div> <span style="color: #569cd6;">constructor</span>(<span style="color: #9cdcfe;">x</span>,<span style="color: #9cdcfe;">y</span>,<span style="color: #9cdcfe;">length</span>,<span style="color: #9cdcfe;">index</span>,<span style="color: #9cdcfe;">context2D</span>, <span style="color: #9cdcfe;">horizontalElements</span>, <span style="color: #9cdcfe;">verticalElements</span>){</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">x</span> = <span style="color: #569cd6;">this</span>.<span style="color: #dcdcaa;">initPieceRandomPotion</span>(<span style="color: #9cdcfe;">x</span>);</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">y</span> = <span style="color: #569cd6;">this</span>.<span style="color: #dcdcaa;">initPieceRandomPotion</span>(<span style="color: #9cdcfe;">y</span>);</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">length</span> = <span style="color: #9cdcfe;">length</span>;</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">pieceNumber</span> = <span style="color: #9cdcfe;">index</span>;</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">context2D</span> = <span style="color: #9cdcfe;">context2D</span>;</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">isPieceSet</span> = <span style="color: #569cd6;">false</span>;</div><div> <span style="color: #569cd6;">let</span> <span style="color: #9cdcfe;">image</span> = <span style="color: #569cd6;">new</span> <span style="color: #4ec9b0;">Image</span>();</div><div> <span style="color: #9cdcfe;">image</span>.<span style="color: #9cdcfe;">src</span> = <span style="color: #ce9178;">"./images/sample_mini.png"</span></div><div> <span style="color: #9cdcfe;">image</span>.<span style="color: #dcdcaa;">onload</span> = <span style="color: #569cd6;">function</span> () {</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">image</span> = <span style="color: #9cdcfe;">image</span>;</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #dcdcaa;">drawPieceImage</span>(<span style="color: #9cdcfe;">horizontalElements</span>, <span style="color: #9cdcfe;">verticalElements</span>); </div><div> }</div></div><p>エラー内容</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx9u4D34Xv-JEoQDI10btM__INaAJywgpsZPztTPAMm-Wy_giYtC38U4u0-gzqvLVZtwvyOBCyPdpbJNLu7sk5quJeHsP6H1jTmVbzy0bvslP0lqs7X_bWoLCMvCTms4rO75CTJQvNtY7n2mvSz5CppW6nxEQaD-iLo61l0TslaAIsDwBMZWiXqwYkHA/s743/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-18%20150841.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="45" data-original-width="743" height="42" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx9u4D34Xv-JEoQDI10btM__INaAJywgpsZPztTPAMm-Wy_giYtC38U4u0-gzqvLVZtwvyOBCyPdpbJNLu7sk5quJeHsP6H1jTmVbzy0bvslP0lqs7X_bWoLCMvCTms4rO75CTJQvNtY7n2mvSz5CppW6nxEQaD-iLo61l0TslaAIsDwBMZWiXqwYkHA/w695-h42/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-18%20150841.png" width="695" /></a></div><p><br /></p><p>これがなぜそうなるのかが本当にわからなくて、onloadにマウスカーソルを移動させて表示されたポップウィンドウを見て漸くもしかしてこれってここのthisってクラスのthisじゃないんじゃねぇ?と気がつくことができた。</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMIycPc6rrKA-IZVGjoSxBUIW1NVx3eGYdgjRlmsucod0ziU4vZ4_DnHULvpkqB744XL_Gk2QpspEEzOFkuLlw5HI9IN4i6p09X_TNXV5NM5hzmC1aji43A5aYv77UJXQTOcb13lscqgQJpwaK98yZSD3e9sg6REgFS3w-eMsYPO81YAfGcdaN6BKPOw/s795/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-18%20152045.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="142" data-original-width="795" height="92" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMIycPc6rrKA-IZVGjoSxBUIW1NVx3eGYdgjRlmsucod0ziU4vZ4_DnHULvpkqB744XL_Gk2QpspEEzOFkuLlw5HI9IN4i6p09X_TNXV5NM5hzmC1aji43A5aYv77UJXQTOcb13lscqgQJpwaK98yZSD3e9sg6REgFS3w-eMsYPO81YAfGcdaN6BKPOw/w516-h92/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-18%20152045.png" width="516" /></a></div><br /><p>あーでもないこーでもないと色々パターンを試したり、調べ直したりすることで漸く下記のサイトを見つけることができた。</p><p>参考:<a href="https://webcache.googleusercontent.com/search?q=cache:8m4biwjjIowJ:https://pisuke-code.com/javascript-class-this-in-callback/&cd=3&hl=ja&ct=clnk&gl=jp">JavaScriptのコールバックで クラスthis が参照できないの解決策 | PisukeCode - Web開発まとめ</a></p><p>上記のサイトによると二通りあるとのこと</p><p>1:bind関数で明示的にthisを指定する</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div> <span style="color: #9cdcfe;">image</span>.<span style="color: #dcdcaa;">onload</span> = <span style="color: #569cd6;">function</span>() {</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">image</span> = <span style="color: #9cdcfe;">image</span>;</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #dcdcaa;">drawPieceImage</span>(<span style="color: #9cdcfe;">horizontalElements</span>, <span style="color: #9cdcfe;">verticalElements</span>);</div><div> }.<span style="color: #dcdcaa;">bind</span>(<span style="color: #569cd6;">this</span>);</div></div><p>2:アロー関数を使う</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div> <span style="color: #9cdcfe;">image</span>.<span style="color: #dcdcaa;">onload</span> = (<span style="color: #9cdcfe;">e</span>) <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">image</span> = <span style="color: #9cdcfe;">image</span>;</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #dcdcaa;">drawPieceImage</span>(<span style="color: #9cdcfe;">horizontalElements</span>, <span style="color: #9cdcfe;">verticalElements</span>);</div><div> }</div><div></div></div><p>多分、最近だとアロー関数を使う人が多いから、今回のケースは見つかりにくかったんだろうなぁとはなんとなく思った。</p><p>気力があったら、これはまとめ直して独立記事としても上げてもいい気がしている。</p><p>すごく余談ではあるのだが、ここのonloadの詳細がMDNの方(近そうなのが、<a href="https://developer.mozilla.org/ja/docs/Web/API/Window/load_event">Windows:loadイベント</a>のページ)では見つけられなくて、それっぽそうなのが、<a href="https://udn.realityripple.com/">Unified XUL Platform MDN Backup</a>のページにあった<a href="https://udn.realityripple.com/docs/Web/API/GlobalEventHandlers/onload">GlobalEventHandlers.onload - Web APIs</a>が一番それっぽそうだった。<br />ただ、このサイトの立ち位置がよくわからなかったのでどこまで信用していいのかちょっとなぁという気分だったりする。<br />基本、困ったらMDNだよりにしていたので、別のサイトを探しておかねばなぁとは感じいている。</p><p>上記の問題以外にも描画タイミングのせいでエラーが表示されてその解決もあって疲れたので今日はここまで</p>nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-56429051144551727872023-02-25T18:53:00.002+09:002023-02-25T18:53:14.396+09:002023-02-25 到達点メモ<p> 今日は、クラス化の書き換えを行った。</p><p>それほど手間ではないだろうなぁとは思っていたが、結構あっさり片付いた。</p><p>クラス化するとこの処理は、Aのクラスに属するから、Aのクラスに入れたほうがいいだろう。とか、そもそも、生成時に呼び出す処理じゃねぇ?とか、余計な変数が減ってだいぶわかりやすくなったなど、思った以上に効果があった。</p><p>なんというか、概念を作るとそこに沿うように意識が向けられるように感じた。<br />ちゃんとやっている人には当たり前の話なのかもしれないが、まずはクラスを作ることから始めるのが良いように感じる。</p><p>あと、せっかくクラスを作ったので、そろそろファイルを分けるために、クラスごとにファイルを分けているのか?、仮にそうだとしたら、どのように名前を付けるのか?を調べてみた。</p><p>ざっくり<a href="https://github.com/facebook/react">ReactのGithub</a>を見てみたのだが、とりあえずそういうのはなさそうだった。</p><p>あと、MDNの方も調べていたのが、その際に<a href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">MDNでフレームワークを使ったチュートリアルを載せている</a>のを発見した。ざっとReactのページの部分をスクロールしただけだが、書きかけとかはなさそうだった。</p><p>検証が2020年のバージョンだったり、あんまり日本語化されていないが、ある程度参考にはなる気がする。</p><p>まじでMDNって凄いなぁと感心しつつ、今日はここまで</p><p><br /></p>nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-24806093574215880362023-02-23T21:17:00.002+09:002023-02-23T21:17:23.701+09:002023-02-22, 23 到達点メモ<p> ピースごとに黒い枠線を追加し、最初にランダム配置をすることにした。</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWyI9BPtyD0JM3hxJdRilp_QX4iK8RlIP_frveRhlenKI3t1rAqbxYn1f6AtXs40jmAl0MFrmRmIjufJvDae-rfBu4iE19CiVnsKQGcybToOdG_LAN8N8PH6j4u2fE6Ak0f15yhIodKZCodjamhzPx-w4z7W9lmwZwXV8ff590nPUnF5uSneN-mlsjug/s471/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-02-23%20205106.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="201" data-original-width="471" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWyI9BPtyD0JM3hxJdRilp_QX4iK8RlIP_frveRhlenKI3t1rAqbxYn1f6AtXs40jmAl0MFrmRmIjufJvDae-rfBu4iE19CiVnsKQGcybToOdG_LAN8N8PH6j4u2fE6Ak0f15yhIodKZCodjamhzPx-w4z7W9lmwZwXV8ff590nPUnF5uSneN-mlsjug/s320/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-02-23%20205106.png" width="320" /></a></div><br /><p>ランダムに配置をすると、いよいよジグソーパズルっぽくなってきた気がする</p><p>コードを書いていて思うのは、やはり公式サイト(もっともよく参考にしている<a href="https://developer.mozilla.org/ja/">MDN</a>はJavaScriptの公式サイトではないが・・・)を見るのが大事だなと思った。</p><p>雑な書き方をしていても実行自体はできてしまうので、よく見るとこれっていらないんじゃ(実際にいらない)があったりする</p><p>例えば、今までずっと図形を書くときにbeginPath()とclosePath()が必要だと思っていたのだが、MDNを見る限りではこれらは線を描くときに必要なのであって、少なくともstrokeRect()やfillRect()を使うときには不要だった。<br />個人で書いた内容を見て終わり。はやっぱりまずいなぁこれ。<br />少なくとも公式(に近い)サイトを見て情報の裏取りは必要だし、検証も必要だなぁと。</p><p>■参考サイト</p><p></p><ul style="text-align: left;"><li><a href="https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/beginPath">CanvasRenderingContext2D.beginPath() - Web API | MDN</a></li><li><a href="https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/closePath">CanvasRenderingContext2D.closePath() - Web API | MDN</a></li><li><a href="https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/strokeRect">CanvasRenderingContext2D.strokeRect() - Web API | MDN</a></li><li><a href="https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/fillRect">CanvasRenderingContext2D.fillRect() - Web API | MDN</a></li></ul><div><br /></div><div>あと、そのうち、クラスに書き換えようと思っていたので、ちょっとクラスについてMDNで調べて以下の書き方ができることを確認した。</div><div><br /></div><div><div>const Rectangle = class {</div><div> constructor(height, width) {</div><div> this.height = height;</div><div> this.width = width;</div><div> }</div><div> aaa(value){</div><div> return this.height = value;</div><div> }</div><div> area() {</div><div> return this.height * this.width;</div><div> }</div><div>};</div><div><br /></div><div>console.log(new Rectangle(5, 8).area());</div><div>let test = new Rectangle(10, 5)</div><div>console.log(test.area());</div><div>console.log(test.aaa(100));</div><div>console.log(test.area());</div></div><div>console.log(test.area(1100));</div><div><br /></div><div>というか、引数を設定していないところで引数を入れてもエラーを起こさないのは少しびっくりした。</div><div><br /></div><div>■参考サイト</div><div><ul style="text-align: left;"><li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes">クラス - JavaScript | MDN</a></li><li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/class">クラス式 - JavaScript | MDN</a></li></ul><div><br /></div></div><div>なんだか、疲れたので今日はここまで</div><p></p>nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-21876354352840079872023-02-21T21:18:00.001+09:002023-02-25T18:32:12.269+09:002023-02-21 到達点メモ<p> 今日もジグソーパズルの実装を進めた。</p><p>今回は、ドラッグ中のピースを一番前に表示する処理を作っていた。<br />実装自体は、ある程度検討はついていたので、苦戦せずに進めることができた。</p><p>データは配列で管理しており、配列でループして表示とやっていたので、対象のデータを一番うしろに持ってくることができれば解決できるだろうと思っていて実際その通りだった。</p><p>今回、少し覚えておいたほうがいいと感じたことは、今まで<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">splice関数</a>を使ったことがなかったので、MDNのサイト上で動作テストを行った。</p><p>すべてのページで動作テストが出来る訳では無いが、わざわざテスト用のファイルを作るのも少し面倒なので、MDN上で動きのテストができるなら、そちらで積極的にため下も良いかなと思った。</p><p>話は変わるが、よく言われることではあるが名前は大事だなと改めて思った。<br />今回で言えば、indexとnumberは違うと改めて感じた。<br />私の感覚の話になるが、indexは配列を指定するときに使うもので、numberは物体の番号(実体物?)で使っている。<br />前は全部名前をindexとか▲▲indexにしていたので、numberとindexで分けるべきところをごっちゃになっていて多分そのせいでバグが起きてしまったように感じている。<br />気の所為と言われてしまえば、そのなのかもしれないが、名前をちゃんとつけ直そうとしたからこそ、今回のバグはすっと発見できた気がする。</p><p>ほぼほぼ予定通りに進んだので、今日はここまで</p>nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-64319594290517375132023-02-20T20:54:00.004+09:002023-02-20T20:54:50.473+09:002023-02-20 到達点メモ画像を分割して読み込む処理がもう少し苦戦すると思ったが、そんなことはなかった。<br /><br /><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIFLRTSzksPgPz5-erO5mS5Sd2--9qwjlhcvZ-xaIKFimY2nEQdZiQ99leh8X2pRjMATm_hhiSrzM1gGt1Qn8pU2i-oaQIFTg2FrEfO2QStjq4s0mkiCZzr6k-9d0-Y0R6hTom_SFcYM_p6tdi7mPIwLYJ8_xFCromNuW74p1UrLj146dYd-WROdQ9ng/s456/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-02-20%20203533.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="160" data-original-width="456" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIFLRTSzksPgPz5-erO5mS5Sd2--9qwjlhcvZ-xaIKFimY2nEQdZiQ99leh8X2pRjMATm_hhiSrzM1gGt1Qn8pU2i-oaQIFTg2FrEfO2QStjq4s0mkiCZzr6k-9d0-Y0R6hTom_SFcYM_p6tdi7mPIwLYJ8_xFCromNuW74p1UrLj146dYd-WROdQ9ng/s320/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-02-20%20203533.png" width="320" /></a></div><br /><div class="separator" style="clear: both; text-align: left;">分割して読み込むにしても、分割データのパラメータ用の変数を新たに用意するのは嫌だったので、公式ドキュメントを見てgetImageData()の採用を一回考える<br />参考サイト:<a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData">CanvasRenderingContext2D.getImageData() - Web APIs | MDN</a></div><div class="separator" style="clear: both; text-align: left;"><br />狙いとしては、これ自体をdrawImage関数で使うimage代わりにできないかと考えたためだが、CORSの問題があったため、採用を断念</div><div class="separator" style="clear: both; text-align: left;">参考サイト:<a href="https://dotnsf.blog.jp/archives/1077515458.html"><canvas>利用時の getImageData() がエラー(The canvas has been tainted by cross-origin data.) : まだプログラマーですが何か?</a></div><br />色々考えたところ、すでにindexのデータは保持してあり、それを使って計算すれば求められることに気がついた。</div><div>具体的には、横の長さ×(index%横の要素数)と縦の長さ×Math.trunc((index/縦の要素数))でうまく行った。</div><div><br /></div><div>なので、新しい変数は用意せずにdrawImageの部分を書き換えて対応できた。</div><div><br /></div><div>計算の素晴らしさを感じつつ、今日はここまで。</div>nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-34651289259372185792023-02-19T22:25:00.006+09:002023-02-19T22:27:59.939+09:002023-02-19 到達点メモ<p> 昨日の続き。</p><p>ひとまず、ジグソーパズルの原型みたいなのはできた。<br />具体的に言うと以下のような感じ</p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHugW6vwuKLN8l2tFeabLVuLgI5G9NHSiWrHiYhC4-dxnyAmgPG3lljkyD_Cgq07__Wwa8kouJ2g7ynFZlgBfUi5EJvSWSELwahMDb249jzTybaqZ7w9Hsl-kBpzQPsFYoT56U0xhHkX8fnZzSKEKQ5mynTtATgqz_5qGgEunDBA_Swunn0h12PM95Sw/s1083/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-02-19%20214335.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="515" data-original-width="1083" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHugW6vwuKLN8l2tFeabLVuLgI5G9NHSiWrHiYhC4-dxnyAmgPG3lljkyD_Cgq07__Wwa8kouJ2g7ynFZlgBfUi5EJvSWSELwahMDb249jzTybaqZ7w9Hsl-kBpzQPsFYoT56U0xhHkX8fnZzSKEKQ5mynTtATgqz_5qGgEunDBA_Swunn0h12PM95Sw/w400-h190/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-02-19%20214335.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">見かけはあれだが、分割した画像と最初のピースの配置をランダムにすれば、ジグソーパズルはほぼほぼできたと思う。</div><div class="separator" style="clear: both; text-align: left;">ただ、もうちょっと作り込みたい感じではある。</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">■学んだこと、わかったこと</div><div class="separator" style="clear: both; text-align: left;"><ul style="text-align: left;"><li>昨日の<a href="https://www.nononagainfo.com/2023/02/2023-02-18.html">到達点メモ</a>で参考にしたネットのコードは、CSSのStyleの値を変化させて画像を移動させていた。元のタグの位置から計算しており、絶対座標の値ではなかったので、この方法は不採用にした</li><li>canvasで描画したものをドラッグアンドロップをしている風に移動させる方法があったので、それを採用<br />参考:<a href="https://wild-outdoorlife.com/javascript/canvas-dropdrag/">【JavaScript】Canvas要素をドラッグ&ドロップで動かす【ゲーム】 - TKGBlog</a></li><li>for..ofやfor..inの存在を忘れていて自分の情けなさに泣く。結局使わなかったが・・・。<br />いつもごっちゃになるのだが、for..inは使い方に注意が必要<br />参考:<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...in#%E9%85%8D%E5%88%97%E3%81%AE%E7%B9%B0%E3%82%8A%E8%BF%94%E3%81%97%E3%81%A8_for...in">for...in - JavaScript | MDN # 配列の繰り返しと for...in</a></li><li>配列で新しいキーを作るときに以下のやり方が入力支援を受けられて楽<br />let test = [];//空配列の作成<br />test.ptn = "___ptn____";<br /></li><li>配列の値を取り出し、計算した結果、その配列のデータを知りたいときに、findやfindIndexを使うと面倒なforとかを使わなくて済む。<br />今回は、「indexの値が知りたい」、「条件が一致すればそこで終了したい」があったのでfindIndexを採用。<br />indexも知りたいし、値そのものも知りたい場合は、findIndexでindexを取得し、そのindexを配列に入れれば良い</li><li>あと、for文を使うより、(コードが少ないせいもおそらくあるが)理解しやすい気がする</li></ul><div><br /></div><div>■感じたこと、思ったこと</div><div><ul style="text-align: left;"><li>一つずつ実装できそうなものを積み上げていくのが良かったと思う</li><li>for文を使うのは最終手段じゃないんだろうかという気がしてきた。<br />多分、他の構文を使ったほうがやりやすいし、見やすい気がする</li><li>参考にしているコードはあるが、ほぼほぼ一から書いているのでだいぶ中身がわかっているように感じている。そのせいか、昨日のコードみたいに自分のものじゃないコード感がほぼほぼない。</li><li>うまくいかないときは一つ一つの値の確認が大事だと本当に感じた。</li><li>悩んだり、変に考え込むよりは作ったほうが早いし、思考が明確になる</li><li>コードを書いていて久しぶりに達成感と楽しさを感じた。考えがうまくいくと楽しい。</li><li>ここまで来るのに多分10時間ぐらい。一時は完成が見えなかったが、ここまでこれてよかった。</li><li>どれくらいコードの量になるかは、想像できていなかったが、ライブラリなしで今のところ150行未満。意外とコンパクトにやれるもんだなと思った。</li></ul></div><div><br /></div><div>■参考サイト</div><div><a href="https://ics.media/entry/200825/">配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA</a></div><div><br /></div><div><br /></div><div><br /></div><div>今日はここまで</div></div><p></p>nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-54474017817548840872023-02-18T22:02:00.006+09:002023-02-20T20:33:56.180+09:002023-02-18 到達点メモすごく久しぶりにコードに触ったので、久しぶりに書く<div>というか、久しぶり過ぎてブログってどうやって書くんだっけ状態になってる……。</div><div><br /><div>今回は、ジグソーパズルを作りたくなったので、いろいろ試したり、調べたり、ソースコードを読んだりしていた。</div><div>昔も今も全然JavaScriptに触っていないこともあり、かなり読み解くのに苦労した。</div><div><br /></div><div><br /></div><div>■学んだこと</div><div><ul style="text-align: left;"><li>基本ForはforEachに普通に置き換えることが出来る</li><li>forEachでfor文のようなcontinueをやりたい場合は、returnを使えば良い<br />参考:<a href="https://pisuke-code.com/javascript-foreach-continue/">javascriptのforEach内でcontinueのように処理を飛ばす方法 | PisukeCode - Web開発まとめ</a></li><li>document.getElementsByTagName()の返り値は、HTMLCollectionであり、配列ではない。具体的に言うとconcat()あたりで結合すると、[HTMLCollection(5), HTMLCollection(3)]みたいな結合になる</li><li>array.fromを使えば、配列風オブジェクト(今回のケースではHTMLCollection)を配列に変換することが出来る<br />参考:<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from">Array.from() - JavaScript | MDN</a></li><li>文字の繰り返しは、repeat()を使えば良い</li></ul><div><br /></div><div><br /></div><div>■感じたこと<br /><ul style="text-align: left;"><li>実際に手を動かしたり、試したりするのが一番勉強になる</li><li>名前をちゃんとつけたほうが良い。理解度がかなり変わる。今回はそれをかなり実感した。</li><li>必要ない変数はなるべく書かないほうが良い。変数がたくさんあると把握が大変。</li><li>参考にしようとしているコードの動きはなんとなく把握できた気がするが、まだコードを物にできていない気がする</li><li>具体的な根拠があるわけではないが、一からコードを書く力が昔より落ちた気がする。</li></ul><div><br /></div><div>勉強と遊びがなんとなく両立できた気がする。</div><div>それなりに満足したので今日はここまで</div></div></div></div>nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-35780084787975604752021-03-11T22:00:00.004+09:002021-03-11T22:00:54.757+09:002021-03-11 到達点メモ<p>ブログ記事を書くのがあまりにも久しぶりすぎる・・・。</p><p>普通に操作しているとフォルダの中の合計がわかりにくいので、フォルダのそれぞれのサイズ一覧を一括でわかるようにしたかった。</p><p>ひとまずRubyで実装はできたのだが、この記事を書く際にふと気になって調べてたら、(見にくいが)PowerShellでも普通にできます・・・。</p><p>Get-Childitem -Path ./ -Directory | ForEach-Object -Process{Write-Host $_; Get-Childitem -Path $_ -Recurse | Measure-Object -property length -sum | Format-List sum}</p><p>参考サイト:<a href="https://attrise.blog/ceo/archives/13856" target="_blank">[備忘録]Windoes10:フォルダ毎の容量を調べる方法 | CEOブログ </a></p><p><br /></p><p>まぁ、見やすさ重視だったので一応無駄ではない<br />最近、全然コードを書いていなかったから、書いておきたかったし・・・。</p><p><br /></p><p>■ 躓いたところ</p><p>・コマンドライン引数でWindowsのフォルダパスを渡したら、何も取得できなかった。</p><p>-理由<br />今回はDir.glob使用しており、Dir.globにパスを渡すさいは、"C:/php/dev"といったふうに、"/"でないといけない。しかし、Windowsのパスは"\"のため、そのまま使うとだめだった。</p><p>-対処方法<br /> File.expand_path()を使うか、.gsub(/\\/,"/") で変換するかで対応できる</p><p><br /></p><p>・コマンドライン引数でテスト時のフォルダパスだとできたのに他のフォルダパスだとできなかった問題</p><p>-理由<br />フォルダ名に半角スペースが入っており、データの取得がARGV[0]で行ったため、半角スペース以降の文字列が別の配列のデータに格納されてしまったため。</p><p>-対処方法<br />コマンドライン引数で渡す際に、””で囲むようにした。結合とかも一瞬考えたが、オプションを半角スペースで区切って渡すのが、本来の仕様だと思うので、それに従ったほうが良いと思ったため。</p><p><br /></p><p>・フォルダ名:サイズKBの形式にし、文字数に応じて半角スペースで埋めて揃えようとしたところ、日本語が入るとばらばらになってしまった。</p><p>-理由<br />半角文字と全角文字を考慮していなかった。むしろ、最初は日本語をどう見つけるか、もしくは省くかを考えてしまい、半角文字と全角文字という区分に気がつくまでに時間がかかった。</p><p>-対処方法<br />考え方としては半角文字を1とし、全角文字は2とした。<br />Rubyの仕様だと、半角全角関わらず単純に文字数を数え上げてしまうようなので、半角英数字記号以外を数えて、それを足すことで解決した。<br />半角カタカナには対応していないが、使われるケースは稀と考えたので今回は考慮しなかった。</p><p><br /></p><p>・Googleで正規表現 半角英数字記号で調べたら、/^[a-zA-Z0-9!-/:-@¥[-`{-~]*$/とでてきたので、/の中身をそのまま使った。後で気がついたら、なんでこれで全角文字が判別できているんだ?</p><p>-理由<br />Rubyでは^は否定表現である。<br />参考サイト:<a href="https://docs.ruby-lang.org/ja/latest/doc/spec=2fregexp.html#string" target="_blank">正規表現 (Ruby 3.0.0 リファレンスマニュアル) </a></p><p>-対処方法<br />今回はふと疑問に思ってテストコードを書いたら発見できた。というか、そもそもちゃんと公式ドキュメントを読もう。<br /><br /></p><p><br /></p><p>■実装する際に参考にしたサイト</p><p><a href="https://uxmilk.jp/12947" target="_blank">Rubyでコマンドライン引数を取得する方法:ARGV | UX MILK</a><br /><a href="https://techacademy.jp/magazine/30885" target="_blank">Rubyでディレクトリを一覧表示する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン</a><br /><a href=" https://khws4v1.myhome.cx/article/2016/01/ruby%E3%81%A7%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%81%AE%E4%B8%AD%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E4%B8%80%E8%A6%A7%E3%82%92%E5%8F%96%E5%BE%97/" target="_blank">Rubyでディレクトリの中のファイル一覧を取得 – かひわし4v1.memo</a></p><p> </p><p>GitHubに上げるまでやりたかったが、力尽きたので今日はここまで。</p>nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-20569881169790198862021-03-11T20:57:00.005+09:002021-03-11T20:57:38.560+09:002019-11-11、12-03 到達点メモEslintとPreitterを使っているのだが、mdファイルが整形されるのは地味に困るので<br />
mdファイルは整形されないようにしたかった。<br />
<br />
◆手順<br />
1. プロジェクト直下に.prettierignoreと.eslintignoreを作成する。<br />
2. それぞれに、*.mdと記述する<br />
おわり。<br />
<br />
◆参考サイト<br />
<a href="https://qiita.com/satoruk/items/48627a86d3ac51eff43b" target="_blank">.eslintignore の配置場所は気をつけた方がいい - Qiita</a><br />
<a href="https://qiita.com/sugasaki/items/0ccb272b03b5ef3aeb86" target="_blank">Prettierの対象から一部ファイルを除外する- Qiita</a><br />
<a href="https://qiita.com/seito2014/items/bec113dcb461d704f0cb" target="_blank">eslintで任意のディレクトリ、ファイルをチェック対象から除外する方法- Qiita</a><br />
<br />
<br />
最近AtCoderの問題を解いているのだが<br />
たまにRubyのメソッドを使えば、簡単に解けるしまうケースが有る。<br />
なお、今回取り組んだのは、<a href="https://atcoder.jp/contests/abc143/tasks/abc143_c" target="_blank">C - Slimes </a>という問題である。<br />
<br />
具体的には、以下のようなメソッドである<br />
「squeezeメソッドは、文字列中で同じ文字が連続している部分を1つの文字にまとめ、新しい文字列を返します。」<br />
<a href="https://ref.xaio.jp/ruby/classes/string/squeeze" target="_blank">squeeze, squeeze! (String) - Rubyリファレンス</a>より一部抜粋<br />
<br />
これがあれば、わざわざ文字列一個一個を見る必要はなく、しかも早く結果が出る。<br />
実装の問題もあるのだろうが、<br />
自分の実装だと実行時間が771msに対し、ライブラリだと7msである。<br />
一応、自分の実装は配列(1545ms)から文字列に内容を変えた上での結果である<br />
恐らく、一つ一つ見るやり方だと非効率なのだと思われる。<div><br /></div><div><br /></div><div>途中まで記事を書いていたが、もう内容は覚えていない・・・。</div><div>お蔵入りにするのもあれなので、そのまま上げる</div><div><br /></div>nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-11682042859197394752019-11-03T23:29:00.001+09:002019-11-03T23:29:21.117+09:002019-11-02、03 到達点メモ環境移行の影響で、eslintとprettierの設定が吹っ飛んでしまった<br />
<br />
ひとまず、近い形にはなったので手順を書いておく<br />
ローカルではなく、グローバルでやりたかったので<br />
それに準拠する<br />
*Windows環境の話です<br />
<br />
- node.jsをダウンロードする<br />
- npmが動くはずなので以下のコマンドを入力する<br />
npm i -g eslint prettier npm eslint-plugin-prettier eslint-config-prettier prettier-eslint<br />
- VSCodeを立ち上げて、拡張機能のESlintとPrettierをそれぞれ入れる<br />
- Eslintの拡張機能でESlint: Auto Fix On Saveにチェックを入れる<br />
- Ctrl+,で設定画面を開き、Format on Saveで検索し、チェックを入れる<br />
- <b>.eslintrc.js</b>(eslintrcの前に「.」が付く)を作成し以下の内容にする<br />
module.exports = {<br />
env: {<br />
browser: true,<br />
es6: true,<br />
},<br />
extends: ['eslint:recommended', 'plugin:prettier/recommended'],<br />
};<br />
- <b>.prettierrc.js</b>(prettierrcの前に「.」が付く)を作成し、以下の内容にする<br />
module.exports = {<br />
tabWidth: 2,<br />
singleQuote: true,<br />
trailingComma: 'es5',<br />
};<br />
<div>
<br /></div>
<br />
多分これで動くはず<br />
<br />
<br />
参考サイト:<br />
<a href="https://qiita.com/mysticatea/items/f523dab04a25f617c87d" target="_blank">ESLint 最初の一歩 - Qiita</a><br />
<a href="https://qiita.com/ikngtty/items/4df2e13d2fa1c4c47528" target="_blank">ESLint - Prettier連携のやり方と仕組み - Qiita</a><br />
<a href="https://qiita.com/12345/items/64f4372fbca041e949d0" target="_blank">VS Code の便利なショートカットキー - Qiita</a><br />
<a href="https://wemo.tech/3307" target="_blank">VS CodeにPrettier・ESLint・Stylelintを導入してファイル保存時にコードを自動整形させる方法 | WEMO</a><br />
<a href="https://dackdive.hateblo.jp/entry/2019/03/15/100000" target="_blank">ESLintとPrettierを併用するときの設定(eslint-plugin-prettier, eslint-config-prettier) - dackdive's blog</a><br />
<br />
<br />
以前にメソッドと括弧の間にスペースが挿入される設定だったのだが<br />
できなくなったので調べてみた。<br />
どうやら、メソッドと括弧の間にスペースが挿入されるのは<br />
Eslint側でspace-before-function-parenをやればできるのようなのだが<br />
<a href="https://qiita.com/ikngtty/items/4df2e13d2fa1c4c47528#%E6%84%9A%E7%97%B4" target="_blank">ここのページ</a>によるとPreitterにはspace-before-function-parenに<br />
あたる機能がないらしく、実際に<a href="https://prettier.io/docs/en/options.html" target="_blank">PrettierのOptionページ</a>を見た限りではなさそうである<br />
<br />
<br />
参考サイト:<br />
<a href="https://qiita.com/M-ISO/items/113ddd448bdc496af783" target="_blank">ESLintのエラールール。日本語ざっくり解説[スタイル編] - Qiita</a><br />
<a href="https://eslint.org/docs/rules/space-before-function-paren" target="_blank">space-before-function-paren - Rules - ESLint - Pluggable JavaScript linter</a><br />
<a href="https://prettier.io/docs/en/options.html" target="_blank">Options · Prettier</a><br />
<a href="https://qiita.com/ikngtty/items/4df2e13d2fa1c4c47528" target="_blank">ESLint - Prettier連携のやり方と仕組み - Qiita</a><br />
<br />
<br />
<br />
console.logで警告が出る問題は以下の内容にしたら<br />
あっさり解決できた。<br />
rules: { 'no-console': ['error', { allow: 'warn' }] },<br />
<br />
参考サイト:<br />
<a href="https://eslint.org/docs/rules/no-console" target="_blank">no-console - Rules - ESLint - Pluggable JavaScript linter</a><br />
<br />
<br />
<br />
◆その他<br />
<br />
自分は今Braveというブラウザを使っているのだが<br />
その際に現在選択しているタブが見にくかった<br />
そこで選択しているタブだけ変更する方法を調べたところ<br />
テーマで選択しているタブの色を変更することができることがわかった。<br />
Black&Whiteのほうがわかりやすいが、もうちょっと白を抑えた感じにしたかったので<br />
現在はSerenityを試験的に使っている<br />
<br />
今日はここまで<br />
<br />nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-2920233036313557052019-11-02T22:45:00.000+09:002019-11-02T22:45:50.381+09:002019-10-19 到達点メモ草をはやしたい<br />
<br />
草が生えないのは、コミットしているメールアドレスと<br />
githubのほうのメールアドレスが一致していないと<br />
草が生えない。<br />
<br />
手段はいろいろあるが、今回は過去のコミットを全部変更する手段をとった<br />
<br />
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<br />
<br />
GIT_AUTHOR_NAMEはコード自体の作者名<br />
GIT_COMMITTER_EMAILはコミットした人(複数人で作業すれば、コミットが違うことはあり得る)<br />
という解釈している。<br />
AUTHORとCOMMITTERは、一人で開発しているのであれば<br />
同じと考えてよい。なので、どちらも同じものにしてやるとよい。<br />
<br />
ただ、この手法でやると過去のデータまで書き換わるのでこのままでは<br />
pushできない。そこで強制的に書き換えるforce pushが必要<br />
<br />
git push --force-with-lease origin master<br />
<br />
参考サイト<br />
<a href="https://findy-code.io/engineer-lab/github-contributions-rule" target="_blank">【草はやしてる?】意外と知らないGitHubで草を生やす条件とは | Findy Engineer Lab - ファインディエンジニアラボ</a><br />
<a href="https://qiita.com/sea_mountain/items/d70216a5bc16a88ed932" target="_blank">Git の Commit Author と Commiter を変更する - Qiita</a><br />
<a href="https://qiita.com/yyoneda1106/items/dcea0e39788d649ca8ba" target="_blank">GitのCommitユーザを修正する方法 - Qiita</a><br />
<a href="https://qiita.com/wMETAw/items/5f47dcc7cf57af8e449f" target="_blank">git push -f をやめて --force-with-lease を使おう - Qiita</a>nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-84695040101979651792019-10-24T20:30:00.002+09:002019-10-24T20:32:34.981+09:00マルチディスプレイの際に追加したディスプレイに範囲外と表示されたので、リフレッシュレートを弄って対処した話<div>
◆諸注意</div>
<div>
ブログを書く際に画像を撮ろうと前の設定に戻したのですが</div>
<div>
なぜかエラーが出ませんでした。</div>
<div>
そのため、この通りにしても解決するとは限らないですが、参考程度にどうぞ。</div>
<div>
<br /></div>
<div>
◆本文</div>
私が持っているディスプレイモニターは貰い物で、めちゃめちゃ古いやつです。<br />
<div>
具体的に言うとVGAという今のパソコンで採用していないと思われる規格です。</div>
<div>
<br /></div>
<div>
なので、HDMIという規格に変換する機器を使って接続したのですが</div>
<div>
マルチディスプレイの設定を行ったところ、範囲外とディスプレイに表示されました。</div>
<div>
<br /></div>
<div>
色々調べてみたのですが、リフレッシュレートが繋げているディスプレイと一致しないと</div>
<div>
範囲外と表示されることがあるそうです。</div>
<div>
<br /></div>
<div>
・参考サイト</div>
<div>
<a href="https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10168150475" target="_blank">500枚!PCモニターに「範囲外です!」という文字が…現在デュアルモニタ... - Yahoo!知恵袋</a></div>
<div>
<a href="https://smart-change-phone.net/windows10-refresh-rate/" target="_blank">【Windows10】「リフレッシュレート」の確認・変更方法 | 華麗なる機種変</a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
なので、以下のサイトの手順通りに59ヘルツのところを</div>
<div>
60に変更したところ、表示されるようになった。</div>
<div>
<br /></div>
<div>
・参考サイト</div>
<div>
<a href="https://121ware.com/qasearch/1007/app/servlet/relatedqa?QID=018758" target="_blank">Windows 10で画面のリフレッシュレートを確認/変更する方法</a></div>
<div>
<br /></div>
<div>
以上。</div>
nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-70844649089326648802019-09-04T23:04:00.001+09:002019-09-04T23:04:30.518+09:002019-09-04 到達点メモ今回は、珍しく何を作るかを決めてちゃんと実装してみた。<br />
大まかな手順としては以下のとおりである。<br />
<br />
1.何を作るか、もしくは、何を修正するかを決める<br />
2.ブランチ名を決める<br />
3.テスト内容を決める<br />
4.作成する<br />
5-P1.作業に戻りたい場合は、stashで一時保存をして、ブランチを切り替える<br />
6.動作テストを行う<br />
7.コミットする<br />
8.マージする<br />
<br />
テスト内容を決める際に、ブランチ名を名前としたファイルを作成して<br />
以下のことを記述した。<br />
<br />
*ブランチ名<br />
*概要<br />
*開発目的<br />
*機能概要<br />
*テスト方法<br />
*実施した際に変更した内容<br />
<div>
<br /></div>
<div>
本当はもっとファイルを別けたほうがいいのかもしれないが</div>
<div>
利便性を考えてこのような形にした。</div>
<div>
<br /></div>
<div>
この後にコードの方で実際に何を作業するのかをある程度細かく書いた。</div>
<div>
上記の内容はすべて決まっていたわけでなく、ある程度変えたり</div>
<div>
また、作業していて実際に要らないと気が付いた作業を辞めたりした。(テストをほとんど終えた状態で気が付いたので作業量は減っていない)</div>
<div>
<br /></div>
<div>
全部含めて2時間過ぎくらいかかったのだが、普段のやり方だったらもう少し早く終わったと思う。ただし、普段のやり方ならテストは不十分だし、考えながら作っているのでそれと比べると今回は迷いなくできたと思う。</div>
<div>
<br /></div>
<div>
この方法が本当にうまく行くのかはまだちょっとわからないが</div>
<div>
もう少し続けていきたいと思う。</div>
<div>
<br /></div>
<div>
今日はここまで</div>
nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-60795472123960985822019-09-03T21:58:00.003+09:002019-09-03T21:58:30.828+09:002019-09-03 到達点メモ◆jQuery話<br />
<br />
今回、URLから取得したデータに以下のように単語検索をかけていた。<br />
data.match('検索したい文字')<br />
しかし、何故かnullで結果が返ってきていた。<br />
<br />
dataの中身を改めてconsole.logで調べたところ、<br />
dataはhtmlデータで、特に問題が無いと思っていたのだが実際は違った。<br />
<br />
検索したい文字はブラウザ上だと以下のように表示されていた。<br />
<br />
<b><span style="color: red;">検索</span></b>したい文字<br />
<br />
しかし、HTMLだと以下のようになっている<br />
<br />
<b><span style="color: red;">検索</span></b>したい文字<br />
<br />
で、今回はHTMLデータを取得していたので、data.match('検索したい文字')<br />
のやり方で出てくるわけがなかった・・・。<br />
なので、もしやるなら、$ (data).text ()のようにしてタグを消す必要がある。<br />
<br />
<br />
◆Gitもしくは開発方法の話<br />
<br />
最近、Chrome拡張を開発しているのだが、ちょっとうーんと思う出来事が起きた。<br />
現状Chrome拡張を開発しながら、作業をする際にそれを使っている。<br />
作成中もしくは修正中にバグると作業が止まってしまう上に<br />
修正中のデータ時に消したくない時があったりする。<br />
<br />
developを作るとかstashを使うとか解決できるかと思ったが、<br />
考え直したところ適切な解決策ではないように思える。<br />
というかそもそも作業の進め方を間違っているような気がする。<br />
何を作るかを決めてから作業をするべきで、<br />
場当たり的に進めているのが問題の様な気がする<br />
つまり、<br />
問題が起こる。もしくは作りたいところができる。<br />
→ branchを作る。<br />
→ 作業を進める。<br />
(→ もし、何らかの理由で一時保存したい場合にstashを使って元のブランチに戻す)<br />
→ 統合する<br />
<br />
こんな感じが理想なのではないだろうか?<br />
<br />
参考サイト<br />
<a href="https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E6%A9%9F%E8%83%BD-%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%81%A8%E3%83%9E%E3%83%BC%E3%82%B8%E3%81%AE%E5%9F%BA%E6%9C%AC" target="_blank">Git - ブランチとマージの基本</a><br />
<a href="https://qiita.com/okuderap/items/0b57830d2f56d1d51692" target="_blank">Gitのブランチモデルについて - Qiita</a><br />
<a href="https://qiita.com/firstVersion/items/cba23e6f71b0699b7d75" target="_blank">Gitのdevelopでの作業について - Qiita</a><br />
<a href="https://qiita.com/fukajun/items/41288806e4733cb9c342" target="_blank">変更を一時的に退避!キメろgit stash - Qiita</a><br />
<br />
ブランチ名を変更したり、そもそもブランチを作ったりするのに<br />
以下のサイトを参考にさせてもらった。<br />
<a href="https://qiita.com/TetsuTaka/items/5ab227a8bd2cd7106833" target="_blank">git コマンド branchの作り方 - Qiita</a><br />
<a href="https://qiita.com/suin/items/96c110b218d919168d64" target="_blank">gitのローカルのブランチ名を変更したい - Qiita</a><br />
<br />
<br />
もう今日はこれでよい気がするので、ここまで。<br />
<br />
<br />
<br />nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-2495721031054918192019-09-02T23:15:00.001+09:002019-09-02T23:15:19.650+09:002019-09-02 到達点メモ以前、Windowsを立ち上げた際にbatファイルを自動起動を行う設定を行ったのだが<br />
最近はそのbatファイルを全く使っていない。<br />
なので、自動起動の設定を解除しようと思ったのだが、方法を忘れてしまったので<br />
再調査した。<br />
<br />
調べた結果、今回はタスクスケジューラの設定を使っていたことが判明しました。<br />
やり方は以下の通りで出来ました<br />
<br />
参考サイト:<a href="https://qiita.com/7of9/items/6a7134945e8b8d2414ea" target="_blank">Windows > スタートアップ時に.batファイルを実行する - Qiita</a><br />
<br />
ただ、最初見た時に何処にbatファイルがあるか分からなかったので探したところ<br />
下の画像の様な左のフォルダ名をクリックしたら見覚えのあるファイル名が見つかりました。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-cDUxo7a1FwU/XWxsn31J8PI/AAAAAAAAA9A/PPzpcKEF8EoI95dn7vtP_T7n9zqXZckTACLcBGAs/s1600/2019-09-02_100634.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="188" data-original-width="183" src="https://1.bp.blogspot.com/-cDUxo7a1FwU/XWxsn31J8PI/AAAAAAAAA9A/PPzpcKEF8EoI95dn7vtP_T7n9zqXZckTACLcBGAs/s1600/2019-09-02_100634.png" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
見つからなかった時は、試してみると見つかるかもしれません。<br />
<br />
<br />
Chrome拡張の開発の話<br />
<br />
ポータルサイトに載ってある外部URLを開く際に、<br />
既に開いているブラウザのタブがあれば<br />
開かないという重複判定の処理を作っていました。<br />
<br />
ところが、ポータルサイト内のURLはちゃんと重複があるのを判定しているのに、<br />
外部URLだと普通に開いてしまう出来事がありました。<br />
<br />
何でかなと思って調査したところ、ポータルサイトに載ってあるURLは、http://~に対してそのページに遷移してみると、http<span style="color: red; font-size: large;"><b>s</b></span>://~となってました。<br />
同じメソッドを使っているのだから、早くその点は気が付けばよかったですね・・・。<br />
このケースはたまたま対応できたが、全く違うアドレスに自動遷移するタイプはどうやって対応すればいいんだろうか・・・。<br />
<br />
<br />
Chrome拡張のCross-Origin Requests問題が解決できねぇ・・・<br />
一番簡単な立ち上げる際に<br />
--force-empty-corb-allowlist --enable-features=NetworkService<br />
は出来たんだけど、流石にとりあえず動かすならそれでよいが<br />
長期的にはちゃんと解決したいなぁと思ってました。<br />
<br />
なので、二番目以降のbackgroundで通信をするとかの方法をやっているのだけど<br />
上手く行かない・・・。<br />
まぁ、今開発しているChrome拡張にそのまま組み込もうとしているから<br />
失敗しているのだろうけど・・・。<br />
<br />
というか、やっぱ、ちゃんと公式ドキュメントを読み解いて理解する力を<br />
身に付けないとダメだわ。<br />
少なくともChrome拡張はちゃんと説明してあるし・・・。<br />
<br />
参考サイト:<a href="https://www.chromium.org/Home/chromium-security/extension-content-script-fetches" target="_blank">Changes to Cross-Origin Requests in Chrome Extension Content Scripts - The Chromium Projects</a><br />
<br />
今日はここまで<br />
<br />nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-8484885699875423352019-08-31T12:21:00.003+09:002019-09-02T08:54:28.769+09:00Chrome拡張のUnchecked runtime.lastError: Could not establish connection. Receiving end does not exist.というエラーを解決する◆事の起こり<br />
<br />
Chrome拡張を作成している際に、ボタンをクリックしたときに<br />
ブラウザの開いている全てのタブのURLが欲しい場面があった。<br />
<br />
それ自体は、chrome.tabs.queryで取得できるのだが、<br />
chrome.tabs.queryは、background.jsでないと動かないので<br />
content_script.jsとbackground.jsで通信する必要があった。<br />
<br />
しかし、content_script.jsでchrome.runtime.sendMessageを使って<br />
background.jsに送信し、background.jsでchrome.runtime.onMessage.addListener<br />
を使って受診し、sendResponseで送り返しているはずなのだが、<br />
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.というエラーがログに表示された。<br />
<br />
<br />
◆解決方法<br />
<br />
私の場合だと、以下の三つを行うことで解決できた。<br />
<br />
1.manifest.jsonに以下の内容が記述していなかった。<br />
"background": {<br />
"scripts": [<br />
"src/js/background.js"<br />
]<br />
},<br />
<br />
2.chrome.runtime.onMessage.addListener()のfunctionの中の一番最後に<br />
return trueを記述していない<br />
<br />
3.修正後も拡張機能のページ(chrome://extensions/)のエクステンションの更新ボタンをクリックして更新していなかった為である。<br />
<br />
<br />
<br />
<br />
◆実際に試したこと<br />
<br />
調べたところ、ネットに出ているのは試したのは以下の二つである。<br />
・ほかの拡張機能が悪さをしているので、他の拡張機能を全部オフにしよう。<br />
・エラー名の通り接続できていないので、接続できるまでsetTimeout()で呼び出せばいいんじゃないのか?<br />
<br />
結論から言えば、今回のケースだと全部駄目だった。<br />
<br />
なお、最初に記述した忙しい人の為の解決方法の内容を全て行った上で<br />
仮にsetTimeoutのやり方で実装する場合は<br />
以下のように実装すれば動くことは確認できた。<br />
<br />
var getTabUrlsButton =<br />
'<button type="button" class="get_tab_urls_button">ブラウザのタブのURL取得</button>';<br />
$ ('.getTabsUrlsButton').append (getTabUrlsButton);<br />
$ ('.get_tab_urls_button').click (function (e) {<br />
ping ();<br />
});<br />
function ping () {<br />
chrome.runtime.sendMessage ({}, function (response) {<br />
if (chrome.runtime.lastError) {<br />
setTimeout (ping, 1000);<br />
} else {<br />
if (response) {<br />
$ ('.getTabUrlText').html (response.urls);<br />
}<br />
}<br />
});<br />
}<br />
<div>
<br /></div>
<br />
*参考サイト<br />
<br />
・特定のChrome拡張機能をOFFにするとエラーが消える事を検証している動画<br />
<a href="https://www.youtube.com/watch?v=DsKYuBn7YpQ" target="_blank">Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.(YouTube)</a><br />
・上と同じく特定のChrome拡張機能をOFFにするとエラーが消えるという話をしている<br />
<a href="https://stackoverflow.com/questions/54619817/how-to-fix-unchecked-runtime-lasterror-could-not-establish-connection-receivi" target="_blank">node.js - How to fix 'Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.' - Stack Overflow</a><br />
<br />
・回答の一例でのsetTimeoutの話を参考にさせてもらった<br />
<a href="https://stackoverflow.com/questions/54181734/chrome-extension-message-passing-unchecked-runtime-lasterror-could-not-establi" target="_blank">Chrome Extension message passing: Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist - Stack Overflow</a><br />
<br />
<br />
◆その他<br />
<br />
・調べてもpop.jsとbackground.jsの通信による結果のケースが多く<br />
content_script.jsは特別なケースなのかと思っていたが、単にcontent_script.jsで書く人がいなかっただけのようだった。<br />
<br />
・background.jsから、content_script.jsにデータを渡す際にタブのIDの指定が必要だという情報をネットで見かけたが、今回の件に限って言えば必要なかった。<br />
<br />
・これとは直接は関係ないが、chrome.tabs.query()を使った際にsendResponse()を<br />
chrome.tabs.query()のfunction外で宣言すると、chrome.tabs.query()が非同期なので<br />
値を取得できずに初期値しか返さない。その為、きちんと動いているように見えるのに初期値しか返さなくて凄く混乱したことがあった。<br />
これは、細かくconsole.logを使う事で明らかに呼び出しの順番がおかしい事に気が付くことで、なんとか判明することができた。<br />
<br />
<br />
◆サンプル<br />
<br />
content_script.jsとbackground.js間で通信をして<br />
タブのURLを取得するChrome拡張を作りました。<br />
gitを上げたので良ければ参考にしてください。<br />
<a href="https://github.com/nononaga/myExample/tree/master/getTabUrls">https://github.com/nononaga/myExample/tree/master/getTabUrls</a><br />
<br />
<br />nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-13606266824816679432019-08-31T00:41:00.002+09:002019-08-31T12:22:59.536+09:002019-08-24 、26、27 、30 到達点メモ 正規表現で否定形を使いたい<br />
(?!TEST)<br />
<br />
上記のようにすると検索にTESTを含まないようにすることができる<br />
<strike>なので、例えばTESは含むけどTESTは含まないとかしたい場合は</strike><br />
<strike><br /></strike>
<strike>^(?!TEST)^(TES)</strike><br />
<strike><br /></strike>
<strike>とすれば行けるはず</strike><br />
<br />
駄目だった<br />
また今度参考サイトをちゃんと読みなおす<br />
<br />
参考サイト:<a href="http://www-creators.com/archives/1827" target="_blank">正規表現:文字列を「含まない」否定の表現まとめ | WWWクリエイターズ</a><br />
<br />
条件を満たしたときにチェックボックスにチェックを入れる事に成功した。<br />
どうやらnameとvalueを両方見なくても、条件が一致すれば操作できるようである<br />
なぜかnameのほうで[]があり、上手く指定できなかった。<br />
そのため、今回はvalueの方を指定して、チェックボックスにチェックを入れた<br />
<br />
$ ('[value="テストチェックボックス1"]').prop ('checked', true);<br />
<br />
本来であるならば、恐らく重複を防ぐためにnameの方も指定しているのだろうが<br />
今回でいえば、重複が起こる可能性は限りなく低いとみているのでこのままでいく。<br />
<br />
どうも動的に作られたクリックできるボタンが上手くクリックイベントを起動させることができない。<br />
どっかでそういう問題を見た記憶があるが、追加されたタグを削除することで対処ができたので良しとする。<br />
今回は.remove()で対処した。同じタグをすべて消すことができる<br />
<br />
$('.testDeleteTag').remove();<br />
<br />
参考サイト:<a href="https://uxmilk.jp/10889" target="_blank">jQueryでDOM要素を削除する:remove(), empty(), unwrap(), detach() | UX MILK</a><br />
<br />
配列の全部検索はforEachでもできるが、下のサイトによるとどうやら非推奨らしい。<br />
コードを見た時にこれは一体何なのか?ということをわかりやすくするためらしい。<br />
<br />
参考サイト:<a href="https://qiita.com/diescake/items/70d9b0cbd4e3d5cc6fce" target="_blank">JavaScript で forEach を使うのは最終手段 - Qiita</a><br />
<br />
実際、別にforEachに拘っているわけではないので<br />
mapで書いてみたところ、書けたのでそれで良しとする<br />
<br />
<br />
var categories = [<br />
<span style="white-space: pre;"> </span>'test1',<br />
<span style="white-space: pre;"> </span>'test_nononaga',<br />
<span style="white-space: pre;"> </span>'testetstetst',<br />
<span style="white-space: pre;"> </span>'Hogehoge',<br />
<span style="white-space: pre;"> </span>'ホげほげ',<br />
<span style="white-space: pre;"> </span>'その他',<br />
];<br />
categories.map (category => {<br />
<span style="white-space: pre;"> </span>var tempValue = '[value="' + category + '"]';<br />
<span style="white-space: pre;"> </span>$ (tempValue).prop ('checked', false);<br />
});<br />
<br />
参考サイト:<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map" target="_blank">Array.prototype.map()</a> by <a href="https://developer.mozilla.org/ja/docs/MDN/About$history" style="background: rgb(255, 255, 255); box-sizing: border-box; color: lightseagreen; font-size: 16px;" target="_blank">Mozilla Contributors</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/2.5/" style="background: rgb(255, 255, 255); box-sizing: border-box; color: lightseagreen; font-size: 16px;" target="_blank">CC-BY-SA 2.5.</a><br />
<br />
例えば、以下のタグがあるとして<br />
hrefのデータを取得したいとする。<br />
<a class="test_a_tag" href="<a href="https://www.nononagainfo.com/">https://www.nononagainfo.com/</a>"><br />
nononagaInfo<br />
</a><br />
<br />
この場合は以下のように書けばよい<br />
$ ('.test_a_tag').attr ('href');<br />
<br />
参考サイト:<a href="https://codeday.me/jp/qa/20190219/259386.html" target="_blank">jQueryのhref属性を取得する - コードログ</a><br />
<br />
ajaxで色々やる際に参考にしたサイト<br />
参考サイト:<a href="https://qiita.com/nekoneko-wanwan/items/bedc0e826c0842ca0b11" target="_blank">はじめてajaxを使うときに知りたかったこと - Qiita</a><br />
<br />
新しくタブを開きたい場合は、以下のようにやればよい<br />
<div>
window.open (urlData);<br />
<br />
参考サイト:<a href="https://developer.mozilla.org/ja/docs/Web/API/Window/open">window.open</a> by <a href="https://developer.mozilla.org/ja/docs/MDN/About$history" style="background: rgb(255, 255, 255); box-sizing: border-box; color: lightseagreen; font-size: 16px;" target="_blank">Mozilla Contributors</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/2.5/" style="background: rgb(255, 255, 255); box-sizing: border-box; color: lightseagreen; font-size: 16px;" target="_blank">CC-BY-SA 2.5.</a><br />
<br />
たかだか、全部のタブを調べるという作業で何でこんなに迷走しているのか・・・。<br />
問題1.background.jsでないと、 chrome.tabs.queryを使用することができない<br />
<br />
問題2.contentsとbackgroundでデータのやり取りをするのだが<br />
後述する問題3のこともあり、今一やり方がよくわかっていない・・・。<br />
<br />
◆参考サイト<br />
<a href="https://trycatchand.blogspot.com/2014/06/how-to-communicate-between-backgroundjs-and-popupjs-on-chrome-extensions.html" target="_blank">try catch and ...release: Chrome拡張機能のbackground.jsとpopup.jsで通信</a><br />
<br />
問題3.google翻訳によるものなのでどこまで正確なのかはわからないが<br />
どうやらチャンネルを開く前にrunetime.connect() を呼び出すとエラーになるらしい。<br />
というか特定のバージョンからそのようなので、古い奴のコードだと普通に動かない<br />
<br />
◆参考サイト<br />
<a href="https://www.bennettnotes.com/post/fix-receiving-end-does-not-exist/" target="_blank">How to Fix: Could not establish connection. Receiving end does not exist - Bennett Notes</a></div>
<div>
<br />
<br />
◆その他参考に成りそうなサイト<br />
<a href="https://www.aozora-create.com/tech/chrome-extension-vol-3" target="_blank">Chromeの拡張機能を作ってみる Vol.3 実装</a><br />
<a href="https://www.eisbahn.jp/yoichiro/2012/11/chrome_extension_basic_structure.html" target="_blank">僕が考えたChrome拡張機能を作るときのデザインパターン</a><br />
<br />
<br />
content_script.jsでchrome.runtime.sendMessage()を使い<br />
background.jsでchrome.runtime.onMessage.addListener()を書いているのに<br />
ずっーーーーと、Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.というエラーがなぜ起こるのかがよくわからなかった。<br />
<br />
調べたところ他の拡張機能が干渉して起こるケースもあるらしいのだが<br />
今回に限って言えば、これ以外全部動かないようにしていたので<br />
これが原因では無かった。<br />
<br />
色々調べた結果、どうやらマニフェストファイルに、<br />
"background": {<br />
"scripts": ["src/js/background.js"]<br />
},<br />
という記述が無かったのが原因のようだった。<br />
<br />
また、自分が変更の処理を行った場合、<br />
画面更新で対処していたのだが、background.jsやマニフェストファイルは<br />
其れでは対応できない。<br />
<br />
なので、下の画像のように拡張機能のページ(<a href="chrome://extensions/">chrome://extensions/</a>)のエクステンションの更新ボタンをクリックしてやるのが一番確実。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-munVcQNwgvk/XWk0n_o9iLI/AAAAAAAAA8o/C4wRbAH_jGYn4dwpf_ZSoodmtehTJ7DiwCLcBGAs/s1600/2019-08-30_233019.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="228" data-original-width="420" height="173" src="https://1.bp.blogspot.com/-munVcQNwgvk/XWk0n_o9iLI/AAAAAAAAA8o/C4wRbAH_jGYn4dwpf_ZSoodmtehTJ7DiwCLcBGAs/s320/2019-08-30_233019.png" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
◆参考サイト<br />
<a href="https://developer.chrome.com/extensions/messaging" target="_blank">Message Passing - Google Chrome</a><br />
<br />
かえせよっ!おれのじかんっ!かえせよっっ!!!<br />
<br />
<br />
他に躓いたところとして、二つあって<br />
一つはtabの一覧のURLを取得する方法はかなり苦労した。<br />
<br />
chrome.windows.getAllの方法で実装する方法を発見した。<br />
例えば、getAllの時にpopulate:trueを設定しないと<br />
必要なものが取得できなかったり、<br />
返り値がwindowsという複数形だという事に気が付かなくて<br />
大分悩んだりとか、本当に色々大変だった。<br />
<br />
◆参考サイト<br />
<a href="https://codeday.me/jp/qa/20190402/529039.html" target="_blank">javascript ー Chromeで開いているタブを取得する - コードログ</a><br />
<a href="https://developers.chrome.com/extensions/windows#method-getAll" target="_blank">chrome.windows - Google Chrome</a><br />
<div>
<br /></div>
<br />
ただ、全てが終わってこれを書いているときに検証してわかったのだが<br />
chrome.tabs.queryでやったほうが簡潔だし<br />
わかりやすかった・・・。<br />
<br />
実装例<br />
chrome.tabs.query ({}, function (tabs) {<br />
var urls = '';<br />
tabs.map (tab => {<br />
console.log (tab.url);<br />
});<br />
});<br />
<br />
<br />
かえせよっ(以下ry<br />
<br />
前にやchrome.tabs.queryで出来ていたと思っていたのですが<br />
できなかったのでchrome.windows.getAllの方法でやっていました・・・。<br />
出来なかったのは、マニフェストファイルのpermissionsの中にtabsが<br />
無かったのが原因だったのかもしれません。<br />
<br />
もう一つは、何度通信ができても値が初期値しか返ってこないことがあった。<br />
具体的には以下のように書いていた<br />
var urls = '';<br />
chrome.tabs.query ({}, function (tabs) {<br />
tabs.map (tab => {<br />
urls += tab.url + '</br>';<br />
});<br />
});<br />
sendResponse ({<br />
urls: urls,<br />
});<br />
<br />
どうも、console.logで調べた感じだとchrome.tabs.queryしかり、chrome.windows.getAllは非同期で動いているらしかった。<br />
おそらく、値が取得できていない状態でsendResponseが動いたので<br />
空データしか受け取れない状態になっていたと思われる<br />
<br />
それを踏まえた上で、今回は以下のように修正した。<br />
具体的には、chrome.tabs.queryの中に、sendResponseを含めることにした。<br />
chrome.tabs.query ({}, function (tabs) {<br />
var urls = '';<br />
tabs.map (tab => {<br />
urls += tab.url + '</br>';<br />
});<br />
sendResponse ({<br />
urls: urls,<br />
});<br />
});<br />
<br />
今回はこれで解決できたが、複数動かすものとか考えるとこれだと<br />
明らかに問題が起こる。<br />
thenについてちゃんと調べておかないと・・・。<br />
<br />
◆参考になりそうなサイト<br />
<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises" target="_blank">Promiseを使う</a> by <a href="https://developer.mozilla.org/ja/docs/MDN/About$history" style="background: rgb(255, 255, 255); box-sizing: border-box; color: lightseagreen; font-size: 16px;" target="_blank">Mozilla Contributors</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/2.5/" style="background: rgb(255, 255, 255); box-sizing: border-box; color: lightseagreen; font-size: 16px;" target="_blank">CC-BY-SA 2.5.</a><br />
<br />
今回の開いているタブのURLを取得するChrome拡張をつくったので<br />
それをGitに上げときましたので参考にしたい方はどうぞ<br />
<a href="https://github.com/nononaga/myExample/tree/master/getTabUrls">https://github.com/nononaga/myExample/tree/master/getTabUrls</a><br />
<br />
単独記事を作ろうと思ったが、力尽きたので今日はここまで。<br />
<div>
<br /></div>
<br /></div>
nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-53858204911320020842019-08-21T20:49:00.001+09:002019-08-31T12:23:12.946+09:002019-08-09 08-17 08-20 08-21 到達点メモ今回は、沢山ある<li>の中から<h3>のデータを取得し<br />
その中でNGワードがあるものを非表示にするやり方<br />
<br />
$ ('li').each (function (index, val) {<br />
<span style="white-space: pre;"> </span>var tempDOM = $ (val);<br />
<span style="white-space: pre;"> </span>var tempRegExp = new RegExp ('NGワード|禁止ワード');<br />
<span style="white-space: pre;"> </span>var searchText = tempDOM.find ('h3').text ();<br />
<span style="white-space: pre;"> </span>if (searchText && searchText.match (tempRegExp)) {<br />
<span style="white-space: pre;"> </span>var searchID = tempDOM.attr ('search_id');<br />
<span style="white-space: pre;"> </span>var hiddenElem = $ ('[search_id="' + searchID + '"]');<br />
<span style="white-space: pre;"> </span>hiddenElem.attr ('hidden', true);<br />
<span style="white-space: pre;"> </span>}<br />
});<br />
<br />
まず、$ ('li').eachで<li>のデータを取得できるようにし<br />
これは、そのままだとhtmlデータが入ったテキストのままようなので<br />
これを以下のようにセレクタにしてあげます。<br />
var tempDOM = $ (val);<br />
<br />
◆参考サイト<br />
<a href="https://uxmilk.jp/45120" target="_blank">jQueryのeach()メソッドの基本的な使い方</a><br />
<a href="https://rfs.jp/sb/javascript/jquery_abc/jquery-selector.html" target="_blank">jQueryのセレクタ解説 - SMART 開発者のためのウェブマガジン</a><br />
<br />
<br />
matchで使うようにRegExpを作ります。そのまま書いてもいいのですが<br />
今後、NGワードが増えていくのでこちらの方が見やすいと思ったので<br />
こういう形にしました。<br />
var tempRegExp = new RegExp ('NGワード|禁止ワード');<br />
<br />
◆参考サイト<br />
<a href="https://qiita.com/kazu56/items/557740f398e82fc881df" target="_blank">【JavaScript】~を含むかのチェック - Qiita</a><br />
<br />
<br />
次にtempDOMのh3タグを見つけたいので、findで検索します。<br />
<br />
今回は、構造上非表示にしたい<li>タグにsearchIDという属性があったので<br />
これで対処しましたが、場合によっては他の方法を考える必要があります。<br />
なお、searchIDのデータを取得したい場合は、以下のように指定します。<br />
var searchID = tempDOM.attr ('search_id');<br />
<br />
◆参考サイト<br />
<a href="https://itsakura.com/jquery-attr" target="_blank">jQuery 属性値を取得/設定するサンプル(attr) | ITSakura</a><br />
<a href="https://api.jquery.com/attr/" target="_blank">.attr() | jQuery API Documentation</a><br />
<br />
属性の値で検索したいので以下のように設定します。<br />
var hiddenElem = $ ('[search_id="' + searchID + '"]');<br />
<br />
◆参考サイト<br />
<a href="http://note.onichannn.net/archives/767" target="_blank">【jQuery】data属性に特定の値を持つ要素を指定する方法。</a><br />
<br />
<br />
対象のliを非表示にしたいので以下のように設定します。<br />
hiddenElem.attr ('hidden', true);<br />
<br />
◆参考サイト<br />
<a href="https://iwb.jp/html-tag-hidden/" target="_blank">HTMLタグにhiddenを付ければ内容を非表示にできる | iwb.jp</a><br />
<br />
*jQueryで、フォームに入力された値を取得したい場合<br />
<br />
//間違い<br />
$ ('.hogehoge_get_form_text').text ();<br />
<br />
// 正解<br />
$ ('.hogehoge_get_form_text').val ();<br />
<br />
◆参考サイト<br />
<a href="https://www.buildinsider.net/web/jqueryref/048" target="_blank">jQuery: フォーム要素からの入力値を取得するには?(val) - Build Insider</a><br />
<br />
<br />
*jQueryで、labelの属性forを指定したい場合<br />
<br />
$ ('label[for="hogehoge_point_label_for"]')<br />
<br />
◆参考サイト<br />
<a href="https://codeday.me/jp/qa/20190210/226089.html" target="_blank">javascript-jQueryラベルの'for'属性セレクタ - コードログ</a><br />
<br />
Ajax.getでURLからデータを取得しようとしたところ、コンソールログで以下の様なエラーが出た<br />
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.<br />
<br />
今一状況は飲み込めていないのだが、意図しないアクセスを防ぐために<br />
クロスドメインという仕様があるらしい。<br />
ただ、MDNの方を読む限りでは、オリジン間リソース共有というのが正しい単語のように思える。うーん・・・。<br />
<br />
◆参考サイト<br />
<a href="https://developer.mozilla.org/ja/docs/Web/HTTP/CORS" target="_blank">オリジン間リソース共有 (CORS)</a> by <a href="https://developer.mozilla.org/ja/docs/MDN/About$history" style="-webkit-text-stroke-width: 0.3px; background: rgb(255, 255, 255); box-sizing: border-box; color: lightseagreen; font-size: 16px;" target="_blank">Mozilla Contributors</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/2.5/" style="-webkit-text-stroke-width: 0.3px; background: rgb(255, 255, 255); box-sizing: border-box; color: lightseagreen; font-size: 16px;" target="_blank">CC-BY-SA 2.5.</a><br />
<a href="https://tsmatz.wordpress.com/2011/06/24/jsonp-cross-domain/" target="_blank">JavaScript のクロス ドメイン (Cross-Domain) 問題の回避と諸注意 - tsmatz</a><br />
<a href="https://kimihito.hatenablog.com/entry/2014/01/06/155220" target="_blank">No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. が出る。 - ミノタケ日記。</a><br />
<a href="https://blog.kazu69.net/2017/03/23/http-request-using-cors/" target="_blank">Cross-Origin Resource Sharing(CORS)を使用したHTTPリクエスト | 69log</a><br />
<a href="https://www.sitepoint.com/an-in-depth-look-at-cors/" target="_blank">An In-depth Look at CORS ー SitePoint</a><br />
<br />
◆リクエストを調べる際に参考にしたサイト<br />
<a href="https://qiita.com/yousan/items/fcc15e1046939c465ab7" target="_blank">cURLコマンドでレスポンスヘッダのみを取得する - Qiita</a><br />
<br />
色々模索してみましたが正直よくわからねぇ・・・。<br />
ただ、今回のケースでいえば、Chromeの仕様の影響が大きい様だったので<br />
起動オプションで無効化のコマンドを使った方が解決として早かったです。<br />
<br />
◆参考サイト<br />
<a href="https://qiita.com/shika-e/items/808ccdd047133315b95c" target="_blank">クロスドメイン制約を回避するChromeショートカットを作る - Qiita</a><br />
<br />
<br />
チェックボックスにチェックを入れたい場合は、以下のようにする<br />
$ ('input[type=checkbox][name=test_is_checkbox]').prop (<br />
'checked',<br />
true<br />
);<br />
チェックを外したい場合は、trueをfalseに変えればよい。<br />
<br />
ラジオボタンでチェックを入れる場合は、propでやったほうが良い。<br />
何故かというと、以下のようにvalueの値が数字でない場合があるから。<br />
<br />
$ ('[name=test_user_status][value=nononaga]').prop ('checked', true);<br />
<br />
◆参考サイト<br />
<a href="https://qiita.com/kazu56/items/36b025dac5802b76715c" target="_blank">【jQuery】フォーム部品の取得・設定まとめ - Qiita</a><br />
<br />
正規表現で特定文字列から一番最後まで削除したい場合は以下のように書く<br />
今回はURLのパラメータやプロパティを削除したい時に利用した<br />
<br />
url = url.replace (/(#.*$)|(\?.*$)/, '');<br />
<br />
◆参考サイト<br />
<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/a" target="_blank"><a>: アンカー要素 </a> by <a href="https://developer.mozilla.org/ja/docs/MDN/About$history" style="background: rgb(255, 255, 255); box-sizing: border-box; color: lightseagreen; font-size: 16px;" target="_blank">Mozilla Contributors</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/2.5/" style="background: rgb(255, 255, 255); box-sizing: border-box; color: lightseagreen; font-size: 16px;" target="_blank">CC-BY-SA 2.5.</a><br />
<a href="http://www-creators.com/archives/2591" target="_blank">正規表現:「行頭」「行末」の表現と、応用例 | WWWクリエイターズ</a><br />
<br />
<br />
ボタンクリックを使いたいと思っていたが、思った以上に実装が簡単だった。<br />
$('#buttonID').click();<br />
<br />
◆参考サイト<br />
<a href="https://qiita.com/kazu56/items/95f78b53baeb1170daeb" target="_blank">【jQuery】イベント発火方法 - Qiita</a><br />
<br />
お蔭で今やっている作業がかなり楽になった上に早くなった。<br />
今までだと登録する内容が良くて頑張れば一時間に20件登録が間に合うかどうかなのに<br />
今だと少し気を抜いてやって50分くらいで20件登録できるようになった。<br />
プログラミングで感動したのはかなり久しぶりかもしれない・・・。<br />
<br />
今日はここまでnonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-83331995176851925032019-08-07T00:42:00.001+09:002019-08-31T12:23:44.109+09:002019-07-29 07-31 08-05 08-06 到達点メモjQuery<br />
<br />
.html()で出力をさせていたのだが<br />
その際にコード上だと<br />なのに<br />
何故か.html()で出力させた場合は、<br>になっていた。<br />
調べてみると、そもそも<br />はXHTMLで使うものであって<br />
HTMLは<br>になるらしい。<br />
<br />
これが混在しているという事は、違いを理解して使っていないという事だよなぁ・・・。<br />
<br />
参考サイト:<br> と <br /> タグの違い 【HTML と XHTML 】<br />
<a href="https://ameblo.jp/midorieng03/entry-10929028852.html">https://ameblo.jp/midorieng03/entry-10929028852.html</a><br />
<br />
メソッド名を踏まえて考えると <br /> が自動的に<br>になるのは<br />
まぁ納得かな。<br />
<br />
class内でclickの中にclassのメソッドを呼び出すのは無理っぽい?<br />
*方法はあるかもしれんが、分からんかった。<br />
一先ず、下記のようにclickと同じネストで関数を定義すれば<br />
呼び出すことは出来る。<br />
<br />
class RewriteTestPage {<br />
constructor () {}<br />
addTestButton () {<br />
function testCall () {<br />
console.log ('test');<br />
}<br />
<br />
var h1Html = '<button type="button" class="test_title">テスト</button>';<br />
$ ('div.test_add td').append (h1Html);<br />
$ ('.test_title').click (function (e) {<br />
testCall ();<br />
});<br />
}<br />
}<br />
<br />
例えば、長くなった且つごちゃごちゃになったjsを分割したい時などに<br />
jsからjsを呼び出したいとする<br />
jsでjsを呼び出すには基本的には、importで大丈夫なのだが、<br />
エクステンションの場合はちょっと話が異なるようである<br />
<br />
大まかに項目を上げると<br />
・呼び出し元のクラスは、static newとexport文を宣言する必要がある<br />
・content_main.jsとcontent_script.jsを作成し<br />
content_scriptでcontent_mainを呼び出すようにする<br />
・content_mainで呼び出したいクラスのファイル名を書く<br />
<br />
参考サイト:chrome-extension-es6-import<br />
<a href="https://github.com/otiai10/chrome-extension-es6-import/tree/81199dcf1caa25df566e5e1dd9837989f151b775">https://github.com/otiai10/chrome-extension-es6-import/tree/81199dcf1caa25df566e5e1dd9837989f151b775</a><br />
<br />
<br />
あと、良く理由が分かっていないのだが<br />
先ほど記載した参考サイトを元に行ってみたのだが<br />
非同期処理内でwindow.onloadのfunction内で<br />
クラス関数を実行しようとしても何故か実行しない。<br />
window.onloadの部分をコメントアウトすると動くことは確認できている。<br />
<br />
<br />
ちょっと書かないと特に縁のない言語はやはりすぐに忘れてしまう・・・。<br />
変数を含んだ置換処理を行いたい場合は、<br />
new RegExp()を使えばよい<br />
<br />
*使用例<br />
var tempHtmlString = $ ('.test_div').html ();<br />
var tempRegExp = new RegExp (<br />
'<div>' +<br />
testValue +<br />
'<\/div>(\n(.*?)|(.*?))<\/th>\n(.*?)<td'<br />
);<br />
tempHtmlString = tempHtmlString.replace (tempRegExp, 'TestReplace');<br />
<br />
◆参考サイト<br />
<a href="https://ogakky.hatenadiary.org/entry/20110720/1311159218" target="_blank">javascript:replace()で正規表現に変数を使う場合</a><br />
<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp" target="_blank">RegExp</a><span style="background-color: white; color: #333333; font-family: "roboto slab" , serif; font-size: 16px;"> </span><span style="background-color: white; box-sizing: border-box; color: #333333; font-family: "roboto slab" , serif; font-size: 16px;">by </span><a href="https://developer.mozilla.org/ja/docs/MDN/About$history" style="-webkit-text-stroke-width: 0.3px; background: rgb(255, 255, 255); box-sizing: border-box; color: lightseagreen; font-family: "Roboto Slab", serif; font-size: 16px; text-decoration-line: none;" target="_blank">Mozilla Contributors<span style="box-sizing: border-box; font-family: "roboto slab" , serif;"> </span></a><span style="background-color: white; box-sizing: border-box; color: #333333; font-family: "roboto slab" , serif; font-size: 16px;">is licensed under </span><span style="background-color: white; box-sizing: border-box; color: #333333; font-family: "roboto slab" , serif; font-size: 16px;"><a href="https://creativecommons.org/licenses/by-sa/2.5/" style="background: transparent; box-sizing: border-box; color: lightseagreen; text-decoration-line: none;" target="_blank">CC-BY-SA 2.5.</a></span><br />
<br />
他にも作業しようと思ったが、力尽きたので今日はここまで<br />
<div>
<br /></div>
<div>
<br /></div>
nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-5645774739528715942019-07-28T01:07:00.002+09:002019-08-31T12:23:50.123+09:002019-07-26 07-27 到達点メモ.text()を行う際にDOM操作をする際にそもそもタグの指定が間違っていないか<br />
確かめたい時は.html()でやると<br />
テキストデータを取得する方法としては間違っていないが<br />
タグの指定は間違っていないかどうかが分かる。<br />
<br />
例えば、以下の様なテーブル構造があったとする<br />
<br />
<table class="test_tag nononaga_tag"><br />
<tr><br />
<th>TEST</th><br />
<td><a rel="nofollow" target="_blank" href="https://www.nononagainfo.com/">https://www.nononagainfo.com/</a></td><br />
</tr><br />
</table><br />
この際に、欲しいデータが、tdタグのURLアドレスだった場合、<br />
$ ('table.test_tag').text ();<br />
もしくは、<br />
$ ('table.nononaga_tag').text ();<br />
では取得できない。<br />
<br />
この場合、正しいやり方は以下のどちらかである。<br />
$ ('table.test_tag td').text ();<br />
$ ('table.nononaga_tag td').text ();<br />
*理由はよくわかっていないが、 ('table.test_tag table.nononaga_tag td').text ();<br />
では取得できない。何か指定方法が間違っているのかもしれない。<br />
<br />
大体目標の作業は終わったと思う。<br />
これで作業がグッと楽になるはず。<br />
<br />
例えば、以下の構造があったとして<br />
ノノナガというデータを取りたいとする。<br />
<div class="job_type"><br />
<div class="programmer"><br />
<span class="user_name"><br />
ノノナガ<br />
</span><br />
</div><br />
</div><br />
<br />
その場合は、以下のようにすればよい<br />
$('.job_type').find('.user_name')<br />
<br />
参考サイト:jQueryで子要素を取得する方法:children(), find()<br />
<a href="https://uxmilk.jp/10873">https://uxmilk.jp/10873</a><br />
<br />
jQueryとJavaScriptがごっちゃになってしまってるので気を付けないといけない<br />
.find()はjQueryの話。<br />
<br />
タグ内に不要な改行が入っており、且つそれがブラウザ上で反映されていないので<br />
その表示に近づけたい場合は、以下のようにやればよい。<br />
<br />
◆htmlでのデータ<br />
<p><br />
<br />
<br />
あいうえお<br />
</p><br />
<br />
<br />
◆ブラウザでの表示<br />
あいうえお<br />
<br />
var copyHtml = '<p>' + $ ('.aiueo').html ().replace (/\n/g, '') + '</p>';<br />
var copyText = $ (copyHtml).text ();<br />
console.log (copyText);<br />
<br />
一旦HTMLデータを出力し、そこでreplaceで改行(\nのことで<br>のではない)<br />
そのあと、タグが消えるのでhtmlに戻すためにpタグで囲んでやる<br />
<br />
他のごみデータの削除もこれで対処できるかもしれない。<br />
<br />
今日はここまで。nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-19852769656832125252019-07-26T01:16:00.003+09:002019-08-31T12:24:00.114+09:002019-07-23、07-24、07-25 到達点メモDOM操作とjQueryとJavaScriptがごっちゃになっていて分かんねぇぇえええ<br />
<br />
function内で他のDOMの値が取れないのは何でなんだ・・・。<br />
.text()じゃなかったからだった・・・。(*ずっと.textでやっており、後ろの括弧が無かった)<br />
<br />
クリップボードにコピーするのは以下のサイトが役に立ったというかコピペした。<br />
<br />
[jQuery] テキストエリアの内容をクリップボードにコピーするボタンを設置したい<br />
<a href="https://migi.me/jquery/copy-clipboard/">https://migi.me/jquery/copy-clipboard/</a><br />
<br />
思った以上に手間取った。<br />
正直、未だに分かっていないことも多い・・・。<br />
<br />
最終的に必要なところを全部ボタン化してコピーしたいのだが<br />
今のところh1タグのところしか作れていない・・・。<br />
<br />
あと、特定のURLときのみ機能するようにしないと調べ物しながらだと邪魔すぎる・・・。<br />
<br />
2019-07-24<br />
<br />
URLの指定は普通に楽だった。<br />
urlを取得する構文を書き、document.URL.match で一部分の重要な箇所が一致するかを見れば普通に場合別けができた。<br />
<br />
参考サイト:jQueryでURLを取得してページごとに条件分岐させる<br />
<a href="https://designsupply-web.com/knowledgeside/1592/">https://designsupply-web.com/knowledgeside/1592/</a><br />
<br />
データを取得する際に、タグとかの状態でhtmlデータを取得したい場合は<br />
単純に.html()で取得できる。<br />
.text()だと、<br>の改行が認識されないので、自力で変換してやる必要がある<br />
<br />
参考サイト:【jQuery】textメソッド改行入らない<br />
<a href="https://teratail.com/questions/36078">https://teratail.com/questions/36078</a><br />
<br />
なお、JavaScriptで変換する場合は.replaceを使う必要がある<br />
また、条件を満たすものを全部変換したい場合は、正規表現を使う必要がある。<br />
<br />
参考サイト:特定の文字列を全て置換する[Javascript]<br />
<a href="https://qiita.com/DecoratedKnight/items/103ab57431b6c448e535">https://qiita.com/DecoratedKnight/items/103ab57431b6c448e535</a><br />
<br />
参考サイト:基本的な正規表現一覧<br />
<a href="https://murashun.jp/blog/20190215-01.html">https://murashun.jp/blog/20190215-01.html</a><br />
<br />
参考サイト:エスケープ, 特殊文字<br />
<a href="https://ja.javascript.info/regexp-escaping">https://ja.javascript.info/regexp-escaping</a><br />
<br />
また引っかかったところとしてスラッシュとバックスラッシュがごっちゃになってしまい<br />
本来、スラッシュ(/)をやりたかったのをバックスラッシュ(<span style="background-color: white; font-family: "consolas" , "courier new" , monospace; font-size: 14px; white-space: pre;">\</span>)と勘違いしてしまい<br />
<span style="background-color: white; font-family: "consolas" , "courier new" , monospace; font-size: 14px; white-space: pre;">\\ </span>と入力して袋小路に入っていた。<br />
正しいやり方は <span style="background-color: white; font-family: "consolas" , "courier new" , monospace; font-size: 14px; white-space: pre;">\/ </span>である。<br />
<br />
DOMの指定の仕方で、仮に<h3 class="h3_hoghoge">を指定しようと思ったが、他のクラスにも同じ名前があったので、<section class="sec1234_hoghoge"><h3 class="h3_hoghoge">を指定したいとする。<br />
<br />
<br />
その場合は、以下の様な指定をすればよい<br />
*正しい例<br />
$ ('section.sec1234_hoghoge>h3.h3_hoghoge')<br />
<br />
無論、以下の様な指定はできない<br />
*ダメな例<br />
$ ('section.sec1234_hoghoge').$('h3.h3_hoghoge')<br />
<br />
jQueryのセレクタメモ(リンク先は階層関係の指定の部分からになっている)<br />
<a href="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">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</a><br />
<br />
その他<br />
たまにクラス名で<br />
<div class="hoge momomo"><br />
という風にスペースで区切ってあるものがあるが<br />
これは、クラス名が二つになっており、"hoge momomo"というクラス名のわけではない。<br />
正しくは、"hoge"と"momomo"の二つである<br />
<br />
参考サイト<br />
スペースを含んだクラス名を jquery で指定できない<br />
<a href="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">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</a><br />
<br />
2019-07-25<br />
本当に皆自由に書くんだなぁ・・・。<br />
ブラウザで表示される内容と実データの中身に乖離がありすぎるのですが、それは・・・。<br />
<br />
一番簡単なのは、一度htmlデータで出力した後に<br />
それを再度htmlデータとして取り込みをそれを.text()で出力するのが良い<br />
ただし、ブラウザで表示されるのと実データは違うので(CSSなどで表示に変化が出ているのだろうか・・・?)<br />
実データがアレだと結局手直しが必要になる。<br />
<br />
正規表現で、下のように赤字の部分だけ変えたくない場合とかがある<br />
/<div>テスト<\/div>\n<span style="color: red;"><b>(.*?)</b></span><\/th>\n<span style="color: red;"><b>(.*?)</b></span><td/,<br />
<br />
その時は以下のように書けばよい<br />
'<div>テスト<\/div>\n$1<\/th>\n$2<td class="test_class"'<br />
<br />
参考サイト<br />
文字列の一部だけを変更したい<br />
<a href="https://hodade.com/seiki/page.php?r_ichibu">https://hodade.com/seiki/page.php?r_ichibu</a><br />
<br />
日付や年数の加算減算をしたい場合は、<br />
.setDate()をすればよい。<br />
<br />
あと、紛らわしい事として、<br />
*.getMonth()で取得できる数値は0~11になっている<br />
*年数を取得したい場合は,.getFullYear()<br />
がある<br />
なお、文字列から日付に変換したい場合は<br />
var date = new Date ('2019-07-25');<br />
でも可能<br />
<br />
参考サイト<br />
【JavaScript】日付処理<br />
<a href="https://qiita.com/kazu56/items/cca24cfdca4553269cab">https://qiita.com/kazu56/items/cca24cfdca4553269cab</a><br />
JavaScript の Date は罠が多すぎる<br />
<a href="https://qiita.com/labocho/items/5fbaa0491b67221419b4">https://qiita.com/labocho/items/5fbaa0491b67221419b4</a><br />
javascriptで日付(月・日)を加算(減算)してみた<br />
<a href="http://shoprev.hatenablog.com/entry/2014/09/18/223316">http://shoprev.hatenablog.com/entry/2014/09/18/223316</a><br />
<br />
X番目のthのタグを指定するには<br />
th:nth-child(X)とやればよい<br />
一番最初の番号は1。0ではない<br />
<br />
jQueryでTABLE要素の操作<br />
<a href="https://rfs.jp/sb/javascript/js-lab/jquery-table.html">https://rfs.jp/sb/javascript/js-lab/jquery-table.html</a><br />
<br />
末尾の文字を削除する場合は<br />
'aaaaaf'.slice( 0, -1 ) ;<br />
とやればよい<br />
<br />
先頭、末尾の文字を削除する方法<br />
<a href="https://lab.syncer.jp/Web/JavaScript/Snippet/5/">https://lab.syncer.jp/Web/JavaScript/Snippet/5/</a><br />
<br />
タグの指定が間違っていないはず?なのだが上手く行かない<br />
元のHTMLの構造がおかしいのか、それとも、なんか指定が間違っているのか・・・?<br />
<br />
目標の大体は解決できたので今日はここまで。<br />
<br />
<br />nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-50643087722149708762019-07-18T18:06:00.001+09:002019-08-31T12:24:09.506+09:002019-05-11、05-24、07-18 到達点メモAndroid App Bundleについて調べる。<br />
<br />
端折った大雑把な解釈だが、apkだと全部の端末に対応しないといけないので<br />
余分なデータが含まれてしまう。<br />
そこでGooglePlay側で必要なデータだけコンパイルするようにすることで<br />
容量が減る。という解釈だと思っている。<br />
<br />
<br />
Android App Bundle でアプリサイズを削減<br />
<a href="https://rakuishi.com/archives/android-app-bundle/">https://rakuishi.com/archives/android-app-bundle/</a><br />
<br />
Android App Bundle のすゝめ<br />
<a href="https://note.mu/numero_dev/n/n36ccca859ae5">https://note.mu/numero_dev/n/n36ccca859ae5</a><br />
<br />
Android アプリバンドル (Android App Bundle) について学んだ<br />
<a href="https://vividcode.hatenablog.com/entry/android/app-bundle">https://vividcode.hatenablog.com/entry/android/app-bundle</a><br />
<br />
<br />
というかちゃんと調べたら公式ドキュメントの方がありましたね・・・。<br />
About Android App Bundles(Android Developers)<br />
<a href="https://developer.android.com/guide/app-bundle/">https://developer.android.com/guide/app-bundle/</a><br />
<br />
Android App Bundle でアプリや機能をオンデマンド配信する(GooglePlayConsoleヘルプ)<br />
<a href="https://support.google.com/googleplay/android-developer/answer/9006925">https://support.google.com/googleplay/android-developer/answer/9006925</a><br />
<br />
<br />
あまりに久しぶりなので色々アップデートしたのが<br />
またなんか動作が変わってる・・・。<br />
<br />
DeployGate関連<br />
Gradle SyncでgetPackageApplication()の警告を解決した<br />
<a href="https://firespeed.org/diary.php?diary=kenz-1911">https://firespeed.org/diary.php?diary=kenz-1911</a><br />
<br />
コンパイルに失敗したのでjreからjdkに変更<br />
implementation "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"<br />
↓<br />
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"<br />
<br />
というかAndroid App Bundleの対処をする前に動作確認をして<br />
一旦これであげようかなぁ・・・。<br />
<br />
<br />
GIMPを使ってロゴ消しなどをやりたい場合。<br />
<br />
Windowの場合は、以下のサイトに移動してプラグインをダウロードする<br />
<a href="https://github.com/pixlsus/registry.gimp.org_static/blob/master/registry.gimp.org/files/Resynthesizer_v1.0-i686.zip">https://github.com/pixlsus/registry.gimp.org_static/blob/master/registry.gimp.org/files/Resynthesizer_v1.0-i686.zip</a><br />
<br />
C:\Users\user名\.gimp-2.8\plug-insに<br />
ReadMe以外の解答したファイルを全て移動させる。<br />
<br />
消したい部分を少し大きめに囲んだうえで<br />
フィルター → 強調 → Heal selectionを選択し行うと<br />
少し時間がかかるが奇麗な感じに修正してくれる。<br />
ギリギリの大きさで選択すると、変な線が残る場合がある。<br />
<br />
軽くしかReadMeを読んでいないのだが、Pythonをあらかじめ入れておく必要があるらしい。<br />
自分は既にPythonを入れているので其処の検証はしていない。<br />
<br />
<br />
参考サイト<br />
<a href="https://github.com/bootchk/resynthesizer">https://github.com/bootchk/resynthesizer</a><br />
<a href="https://github.com/pixlsus/registry.gimp.org_static/blob/master/registry.gimp.org/files/Resynthesizer_v1.0-i686.zip">https://github.com/pixlsus/registry.gimp.org_static/blob/master/registry.gimp.org/files/Resynthesizer_v1.0-i686.zip</a><br />
<a href="https://ichinomemochou.com/1050.html">GIMPで画像の一部を削除する方法!Ver2.10でのスマート消去の使い方</a><br />
<a href="https://gimp-easy.net/image-delete/">【GIMP】画像の一部をキレイに消す方法</a><br />
<br />
<br />
引っ越しとか色々あって凄くこの手のページを開くのが久しぶりすぎる・・・。<br />
<br />
ちょっと内職の作業がクソ面倒なのでエクステンションで如何にかできそうなので<br />
前々からやろうやろうと思っていた調査を始めることにした。<br />
<br />
目標としては、<br />
・開いているページURLをボタンでコピーできるようにする<br />
・特定の情報をボタンでコピーできるようにする(のちのちは、一部の情報は加工した状態のものをコピーできるようにしたい。)<br />
<br />
久しぶりすぎて大分色々忘れているのだが、おそらくDOMの操作をすればいけそう<br />
<br />
以下のサイトが進める上で参考になりそう。<br />
<br />
Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介!【サンプルあり】<br />
<a href="https://qiita.com/guru_taka/items/37a90766f4f845e963e5">https://qiita.com/guru_taka/items/37a90766f4f845e963e5</a><br />
Extend the Browser(公式ドキュメント)<br />
<a href="https://developer.chrome.com/extensions">https://developer.chrome.com/extensions</a><br />
<br />
<br />
というかDOMの書き替えは、どちらかというとJavaScriptとかJQueryの領域だわ<br />
普通にボタンの追加とか、要素の取得とかはそっちで行けそうな気がする。<br />
<br />
参考サイト<br />
jQueryでDOM操作する際の基本記述を勉強し直してみたよ。<br />
<a href="http://programmerbox.com/2013-09-26_jquery_dom_basic_description/">http://programmerbox.com/2013-09-26_jquery_dom_basic_description/</a><br />
<br />
特定のURLのときだけ動かすみたいなことは<span style="background-color: white; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica neue" , "hiragino kaku gothic pron" , , "meiryo" , sans-serif; font-size: 16px;">manifest.jsonでやるっぽいので</span><br />
<span style="background-color: white; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica neue" , "hiragino kaku gothic pron" , , "meiryo" , sans-serif; font-size: 16px;">それを踏まえた上で如何にかできそう</span><br />
<span style="background-color: white; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica neue" , "hiragino kaku gothic pron" , , "meiryo" , sans-serif; font-size: 16px;"><br /></span>
<span style="background-color: white; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica neue" , "hiragino kaku gothic pron" , , "meiryo" , sans-serif; font-size: 16px;">何時まで経っても更新しないのはあれなので今日はここまで</span><br />
<span style="background-color: white; color: #333333; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica neue" , "hiragino kaku gothic pron" , , "meiryo" , sans-serif; font-size: 16px;"><br /></span>nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-63913430353198296212019-05-03T14:51:00.001+09:002019-05-03T14:51:22.519+09:002019-02-27、03-01、05-03 到達点メモ前に作ったプロジェクトを起動してSyncしたところ以下のエラーが出た。<br />
<br />
Error:No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android<br />
<br />
幾つか参考にしたサイトだと、NDKをダウンロードして<br />
足りないファイルを入れよう。という話が出ていたのだが<br />
その肝心のmips64el-linux-androidが無かった。<br />
<br />
参考サイト:<a href="http://android-java.hatenablog.jp/entry/2018/09/30/191211" target="_blank">Android Studio 3.2 でビルドエラー「No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android」が出た時の対処方法</a><br />
参考サイト:<a href="https://www.ahiru-sewingstore.com/entry/2018/11/25/103832" target="_blank">Error:No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android</a><br />
<br />
<br />
下記のサイトによると、どうもバージョンが上がるとmips64自体が対応されなくなったようである。恐らくなくなってしまった可能性が高い。<br />
<br />
参考サイト:<a href="https://github.com/google/filament/issues/15#issuecomment-415430142" target="_blank">"No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android" のコメントより</a><br />
<br />
で、対策に関しては、gradleのバージョンを<br />
classpath 'com.android.tools.build:gradle:3.3.1'<br />
に上げた後にGradle自体?のバージョンを4.10.1?に上げたところ<br />
エラーが出なくなった。<br />
<br />
で、なおしてたらなんか見覚えのあるエラーを見つけた。<br />
Failed to resolve: org.jetbrains.kotlin:kotlin-stdlib-jre7:1.3.11<br />
<div>
<br /></div>
<div>
案の定、<a href="https://www.nononagainfo.com/2019/01/2018-12-242830.html" target="_blank">以前の日記</a>に同じ現象があった</div>
<div>
<br /></div>
<div>
という訳で前回と同じように以下のように修正した</div>
<div>
implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
久しぶりにAdMobを動かしたら、落ちたんだが???</div>
<div>
一部のみを抜粋するが、こんなエラー文だった。</div>
<div>
<br /></div>
<div>
<div>
02-27 22:12:43.031 28083-28083/? E/AndroidRuntime: FATAL EXCEPTION: main</div>
<div>
Process: com.nononagainfo.www.admobtest, PID: 28083</div>
<div>
java.lang.RuntimeException: Unable to get provider com.google.android.gms.ads.MobileAdsInitProvider: java.lang.IllegalStateException: </div>
<div>
</div>
<div>
******************************************************************************</div>
<div>
* The Google Mobile Ads SDK was initialized incorrectly. AdMob publishers *</div>
<div>
* should follow the instructions here: https://goo.gl/fQ2neu to add a valid *</div>
<div>
* App ID inside the AndroidManifest. Google Ad Manager publishers should *</div>
<div>
* follow instructions here: https://goo.gl/h17b6x. *</div>
<div>
******************************************************************************</div>
<div>
</div>
<div>
</div>
<div>
at android.app.ActivityThread.installProvider(ActivityThread.java:5921)</div>
<div>
at android.app.ActivityThread.installContentProviders(ActivityThread.java:5510)</div>
<div>
at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5449)</div>
<div>
at android.app.ActivityThread.-wrap3(ActivityThread.java)</div>
<div>
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1587)</div>
<div>
at android.os.Handler.dispatchMessage(Handler.java:102)</div>
<div>
at android.os.Looper.loop(Looper.java:154)</div>
<div>
at android.app.ActivityThread.main(ActivityThread.java:6184)</div>
<div>
at java.lang.reflect.Method.invoke(Native Method)</div>
<div>
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:866)</div>
<div>
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:756)</div>
<div>
Caused by: java.lang.IllegalStateException: </div>
<div>
</div>
<div>
******************************************************************************</div>
<div>
* The Google Mobile Ads SDK was initialized incorrectly. AdMob publishers *</div>
<div>
* should follow the instructions here: https://goo.gl/fQ2neu to add a valid *</div>
<div>
* App ID inside the AndroidManifest. Google Ad Manager publishers should *</div>
<div>
* follow instructions here: https://goo.gl/h17b6x. *</div>
<div>
******************************************************************************</div>
<div>
</div>
<div>
</div>
<div>
at com.google.android.gms.internal.ads.zzze.attachInfo(Unknown Source)</div>
<div>
at com.google.android.gms.ads.MobileAdsInitProvider.attachInfo(Unknown Source)</div>
<div>
at android.app.ActivityThread.installProvider(ActivityThread.java:5918)</div>
<div>
<span style="white-space: pre;"> </span>... 10 more</div>
</div>
<div>
<br /></div>
<div>
で、対策を簡単に述べると</div>
<div>
AndroidManifest.xmlに以下のようにAdMobのIDを追加する必要があるようである。</div>
<div>
<manifest></div>
<div>
<div>
<application></div>
<div>
<!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 --></div>
<div>
<meta-data</div>
<div>
android:name="com.google.android.gms.ads.APPLICATION_ID"</div>
<div>
android:value="[ADMOB_APP_ID]"/></div>
<div>
</application></div>
<div>
</manifest></div>
</div>
<div>
<br /></div>
<div>
更に言うと、 Google Mobile Ads SDK バージョン 17.0.0 でこの対策をしないと</div>
<div>
クラッシュするようである</div>
<div>
<br /></div>
<div>
参考サイト:<a href="https://developers.google.com/admob/android/quick-start#update_your_androidmanifestxml" target="_blank">スタートガイド - AndroidManifest.xml を更新する</a><br />
<br />
<br />
ruby<br />
<br />
evalは文字列をコードとして実行することができる<br />
例:<br />
puts eval "1+2"<br />
<br />
<br />
javascript<br />
<br />
puppeteerで特定のサイトを開いたらチェックボックスにチェックを入れるといった事をしたかった。<br />
なので、以下のように書いた<br />
<br />
const puppeteer = require ('puppeteer');<br />
(async () => {<br />
const browser = await puppeteer.launch ({<br />
headless: false,<br />
defaultViewport: {<br />
width: 1366,<br />
height: 728,<br />
},<br />
});<br />
const page = await browser.newPage ();<br />
var linkAdders = 'https://www.nononagainfo.com/';<br />
await page.goto (linkAdders, {waitUntil: 'domcontentloaded'});<br />
await page.click ('#test_test_testID');<br />
await page.waitFor (100);<br />
<br />
const page2 = await browser.newPage ();<br />
var linkAdders2 = 'https://play.google.com/store/apps/details?id=com.aaa.nononaga.voicetimerr';<br />
await page2.goto (linkAdders2, {waitUntil: 'domcontentloaded'});<br />
await page2.waitFor (100);<br />
<br />
const page3 = await browser.newPage ();<br />
var linkAdders3 ='https://www.nononagainfo.com/p/blog-page_1.html';<br />
await page3.goto (linkAdders3, {waitUntil: 'domcontentloaded'});<br />
await page3.waitFor (100);<br />
}) ();<br />
<br /></div>
<div>
・ヘッドレスモードとは、CUIのみで処理を行う事。<br />
つまり、普通にGUIとして使いたい(ブラウザを表示したい)場合は、launchメソッドで<br />
headless: falseを入れてあげればよい。<br />
・デフォルトだと表示画面が小さいのでlaunchメソッドでdefaultViewport: {}の値を指定する必要がある<br />
・executablePathで、起動するデフォルトchromeをしているすることができるが<br />
その際の注意として、/(バックスラッシュ)は、一つではなく二つ指定する必要がある。<br />
例:'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'<br />
・チェックボックスに関しては、clickメソッドに対象のIDを指定すればチェックボックスにチェックが入る。<br />
・複数のタブを作りたい場合は、browser.newPage ();を新しく作ればよい<br />
<br />
参考サイト:<a href="https://honeybe.hatenablog.jp/entry/2018/02/09/163202" target="_blank">Puppeteer で Headless Chromeを操ってE2Eテストする(予定) - 入力・操作編</a><br />
参考サイト:<a href="https://www.dkrk-blog.net/javascript/puppeteer01" target="_blank">Puppeteerでスクレイピング</a><br />
<br />
ただ、一つ問題があってキャッシュを保持したかったのだが<br />
(元々の目的から考えるに当たり前なのだが)保持することは出来なかった。<br />
<br />
なんか、操作できる良いやつってなんかあったっけ・・・?<br />
<br />
<br />
気が付いたら、二ヶ月もたってたわ・・・。<br />
<br />
RubyのStringのdeleteの仕様について<br />
<br />
以下のコードを書くとどういう結果になると思いますか?<br />
<br />
puts "chochoc".delete("ch")<br />
<br />
理想<br />
ooc<br />
<br />
現実<br />
oo<br />
<br />
deleteはどうも一文字ずつを削除する仕様の様で<br />
二文字だけを消したい場合はこの書き方ではできない<br />
どう実装するかというとgsubを使う<br />
<br />
puts "chochoc".gsub(/ch/,"")<br />
<br />
以上。<br />
<br />
<br /></div>
nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-3265657403885886252019-02-27T15:50:00.001+09:002019-02-27T15:50:47.329+09:002019-02-11、12、15、25、27 到達点メモコマンドプロンプト<br />
<br />
入力を受け付ける<br />
set /p testdata=<br />
<br />
値を代入する<br />
echo %testdata%<br />
<br />
参考サイト:<a href="https://qiita.com/sta/items/8cab80fe74b8dcfa5336" target="_blank">バッチファイルでよく使う書き方まとめ</a><br />
<br />
<br />
Node.js<br />
<br />
コマンドプロンプトから入力した値を使いたい。<br />
例えば以下のように入力した場合、testdataという文字列を使いたいとします<br />
node index.js testdata<br />
<br />
この場合、index.js上では以下のように指定する必要があります<br />
var data = process.argv[2];<br />
<br />
参考サイト:<a href="https://qiita.com/furusin_oriver/items/f030d1eaa9e7b54233c3" target="_blank">Node.jsでコマンドライン引数を取得する</a><br />
<br />
<br />
ruby<br />
<br />
downto<br />
大きい順から特定の値まで一づつカウントダウンする<br />
大きい値から調べたい時は便利。<br />
<br />
String[0,x]<br />
左がインデックス番号で、右が文字数。<br />
<br />
計算の順番<br />
<br />
a=1<br />
b=5<br />
puts a+b > 9 ? "Fin" : a+b<br />
<br />
で10以上の時はFinと表示するもしくは、10未満の時は<br />
aとbの合計結果を出したいとする<br />
<br />
その際に、毎回a+bって書くのが嫌ので<br />
これを一行に纏めようとした。<br />
<br />
a=1<br />
b=5<br />
puts result = a+b > 9 ? "Fin" : result<br />
<br />
例えば、上記のように書くと、結果は空になる。<br />
計算の順番的に代入は後になっているものと思われる。<br />
そこで以下のように書けば、ちゃんと合計結果が出る<br />
<br />
a=1<br />
b=5<br />
puts (result = a+b) > 9 ? "Fin" : result<br />
<br />
正直な所、競技プログラミング以外でこのように一行で書く意味はあまりないと思うが<br />
やり方として覚えておくとよいと思う。<br />
<br />
重複の削除の仕方<br />
<br />
処理速度の問題は置いておくとして<br />
結果だけ見れば配列の重複したものを削除したい場合<br />
s="testcase".to_a<br />
s.uniq と s | [] と s|s<br />
は全部同じ結果になる<br />
<br />
[n..m]と[n...m]の違い<br />
<br />
[n..m]<br />
ピリオド二つの奴は、n番目からm番目という意味<br />
<br />
[n...m]<br />
ピリオド三つの奴は、n番目からm-1番目という意味。つまり、m番目を含まない<br />
<br />
[n..(m-1)]ってやるよりは見た目的には奇麗だが<br />
見逃しが起きそうではある。<br />
<br />
参考サイト<br />
<a href="https://ref.xaio.jp/ruby/classes/array/element_ref" target="_blank">[] (Array)</a><br />
<br />
検証してみた話。<br />
<br />
rubyで配列のユニークな奴を取りたい場合は<br />
array.uniq か array|[]のどちらかを使えばよいのだが<br />
結局どちらが早いのだろうか?<br />
と思ったので、以下の条件でテストしてみた。<br />
・文字列は1000文字で、AからCのランダムな文字が入る<br />
・同じ文字列を一万回重複削除し、そのタイムを取得する<br />
・100個のタイムを取得し、最大値、最小値、平均値を求める<br />
<br />
以下が実際に検証したコードである<br />
<br />
valueRandom = Random.new(1024)<br />
alphabet=("A".."Z").to_a<br />
moji = 1000.times.map{alphabet[valueRandom.rand(3)]}<br />
<br />
uniqTimes = []<br />
100.times do<br />
stratTime = Time.now.to_r<br />
10000.times.map{moji|[]}<br />
endTime = Time.now.to_r<br />
uniqTimes << endTime - stratTime<br />
end<br />
puts "array|[]"<br />
puts "FastTime:#{uniqTimes.min.to_f}"<br />
puts "SlowTime:#{uniqTimes.max.to_f}"<br />
puts "AverageTime:#{(uniqTimes.inject(:+)/100).to_f}"<br />
<br />
uniqTimes = []<br />
100.times do<br />
stratTime = Time.now.to_r<br />
10000.times.map{moji.uniq}<br />
endTime = Time.now.to_r<br />
uniqTimes << endTime - stratTime<br />
end<br />
puts "array.uniq"<br />
puts "FastTime:#{uniqTimes.min.to_f}"<br />
puts "SlowTime:#{uniqTimes.max.to_f}"<br />
puts "AverageTime:#{(uniqTimes.inject(:+)/100).to_f}"<br />
<div>
<br /></div>
<br />
結果は以下のようになった。<br />
<br />
array|[]<br />
FastTime:0.525499<br />
SlowTime:0.669585<br />
AverageTime:0.55385082<br />
<br />
array.uniq<br />
FastTime:0.524965<br />
SlowTime:0.602402<br />
AverageTime:0.55188603<br />
<br />
ある意味分かり切った事ではあったが<br />
正直誤差の範囲内だと思う。<br />
<br />
今回は、uniqの方が早いが処理順番が逆だった時は<br />
array|[]の方が早かったのでもっと回数をこなすとまた違う結果が出るのかもしれない。<br />
<br />
ただ、単純に重複削除をするのであれば<br />
分かりやすいuniqが一番無難なのでは?と思った。nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0tag:blogger.com,1999:blog-5760246251004298192.post-69840732765091648622019-02-08T23:40:00.002+09:002019-02-08T23:41:16.496+09:002019-01-30、02-01、02-07、02-08 到達点メモAtCoderのRubyでの<a href="https://atcoder.jp/contests/abc075/tasks/abc075_b">B - Minesweeper</a>のネタバレあり。<br />
<br />
<br />
何故か2019/1/30にイスラエルから700くらいアクセスがあった。<br />
普段10くらいしかないのに、一体何があったし・・・。<br />
ざっと調べてみたが、何か事件があった訳ではないようだ。<br />
VoiceTimerでググってみたが、何か特別なことがあった訳でないようだし・・・。<br />
本当に謎だ。<br />
<br />
Android<br />
<br />
エミュレーターで720dpの画面のテストをしたい場合<br />
xlargeが720dp<br />
<br />
Node.js<br />
<br />
ワンクリックで特定のサイト群を一括起動する機能が作りたかったので作った。<br />
運用していくと色々やりたいことが出てきそうだが、<br />
ひとまずはnpmのライブラリにある<a href="https://www.npmjs.com/package/opener">opener</a>で十分実現できる<br />
var opener = require ('opener');<br />
<br />
opener ('chrome');<br />
opener ('http://yahoo.co.jp);<br />
opener ('http://google.com');<br />
opener ('https://www.nononagainfo.com/');<br />
<br />
上記の通りにやるとタブが増える感じで<br />
起動することができる。<br />
他のブラウザを立ち上げていると特に立ち上げたいものが多い場合だと<br />
そっちにが立ち上がる時があるので注意。<br />
やり方がなかなか見つからなかったから<br />
案外難しいのかと思ったが凄く簡単だった。<br />
<br />
参考サイト:<a href="http://sourcechord.hatenablog.com/entry/2016/02/09/001901">openerを使ってnpmスクリプトからブラウザを開いてみる</a><br />
参考サイト:<a href="https://www.npmjs.com/package/opener">opener</a><br />
参考サイト:<a href="https://qiita.com/monpy/items/be5fa8a900728aaab5ba">npm script を試す (サンプル付き忘備録)</a><br />
<br />
AtCoder Ruby<br />
<br />
<a href="https://atcoder.jp/contests/abc075/tasks/abc075_b">B - Minesweeper</a><br />
動作が上手く行かない時の検証の仕方が凄く下手だ。<br />
今回の問題は文字列の中に含まれる"."が、0の時になることがありえるので<br />
本来は、"#"で検索をかける前に、"."を全て0に変換する必要があるのだが<br />
それを最初にやらなかった為、出力結果が本来加算されるべきところで加算されていなかった。<br />
<br />
最初に変換をやっとけと言われてしまえばそれまでなのだが<br />
そもそも変換がきちんと行われていないということに気づくのが遅すぎた。<br />
デバッグの仕方が悪いのはわかるのだが、具体的にどう理屈をつけてやればいいんだろう?<br />
<br />
いや、そもそもPrintデバックから卒業する時なんだと思う。<br />
と、下のサイトを見て思いました。<br />
<a href="https://qiita.com/jnchito/items/5aaf323ab4f24b526a61">printデバッグにさようなら!Ruby初心者のためのByebugチュートリアル</a><br />
<br />
あと、メモとして書いておくが<br />
事前に0の数値の配列を作っておくという手法は盲点だった。<br />
確かにそれをやったほうが速そうではある。<br />
<br />
rubyだと nil || "AAA" だと "AAA"が採用されるようである<br />
<br />
具体例<br />
<br />
puts nil || "BBB"<br />
結果はBBB<br />
<br />
puts "AAA" || "BBB"<br />
結果はAAA<br />
<br />
<br />nonoNagahttp://www.blogger.com/profile/08776194542184410429noreply@blogger.com0