動かざることバグの如し

近づきたいよ 君の理想に

javascript

ウェブページ上のテキストを簡単にコピーできるJavaScript

コード ウェブページ上のテキストを簡単にコピーできるJavaScript document.addEventListener('DOMContentLoaded', () => { const copyButtons = document.querySelectorAll('button[data-url]'); copyButtons.forEach(button => { button.addEventListener(…

JSの最強日付フォーマットは「toLocaleDateString」

toLocaleDateStringメソッドとは JavaScriptには、日付を文字列に変換するためのtoLocaleDateStringメソッドがあります。このメソッドは、ブラウザのロケールに基づいて、日付を指定されたフォーマットに変換します。 例えば、以下のように使用することがで…

Javascriptでスネークケースをキャメルケース等に相互変換できるライブラリ「change-case」

やりたいこと 「test string」を「testString」に変換したり、「test_string」に変換したりと色々スネークケースやらキャメルケースを相互変換したい。 色々調べた結果、jsの場合はblakeembrey/change-caseのライブラリがよさげだった インストール npm inst…

JavascriptのencodeURIComponent()した文字をRubyでデコード

結論 javascriptエンコード側 encodeURIComponent('ニンテンドースイッチ') // => "%E3%83%8B%E3%83%B3%E3%83%86%E3%83%B3%E3%83%89%E3%83%BC%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81" Rubyデコード側 require 'uri' URI.decode_www_form_component("%E3%83%8B…

JavaScriptでスマホの長押しを検知する方法

やりたいこと スマホでとある要素を長押ししたときにイベントを発火させたい PCでもロングクリックで反応させたい 解決策 自分で色々実装するのはつらいので Hammer.js というライブラリを使う Hammer.JS - Hammer.js Hammer.jsではいろんなデバイス/ブラウ…

Vue.jsでページ内リンクを使うなら「vue-scrollto」を使え

結論 Vue.jsでページ内リンク(いわゆるアンカーリンク)を使いたいならvue-scrolltoを使ったほうが幸せになれる そもそもアンカーリンクって何 アンカーリンク自体死語な気がするが、いわゆるページ内リンク リンクをクリックすることで同じページ上の任意…

クリックイベントとかを無効化するJavascript

環境 Chrome 他のブラウザは知らん(他人事 背景 絶対にニッチなニーズだが、特定のDOMの特定のイベントを削除したいとかスクロールイベントを無効化したい事があると思う(ない JSはやはりなんでもありなので、なんとかなる とりあえず動くコードよこせ 以…

リアルタイムに手を検出できるJavascriptライブラリ「handtrack.js」

TensorFlow.jsというのがあって、これはTensorflowで作成したモデルをブラウザで使えるようにできるライブラリなのだが、これを利用して手の検出をリアルタイムにブラウザ上で行えるライブラリを使う機会があったのでメモ。 その名もhandtrack.js サンプルコ…

Javascriptでrange()みたいに指定長の配列を生成

やりたいこと JSで指定した長さの配列を生成。map等でその配列の中身も一発で埋めれたらなお良い。Rubyでいう(1..10).to_a的な感じ とりあえず 以下が1番シンプルで分かりやすいんじゃないかな Array.from(Array(5), (v, k) => k) > (5) [0, 1, 2, 3, 4] な…

querySelectorAll()で取得した要素をeachで回す5つの方法

例えばhttps://github.com/のような普通のページがあって、そのページ内の全リンクを取得してforeach的な何かで順番に処理していきたいということは全然あると思う。 取得自体は簡単で const links = document.querySelectorAll('a'); で可能。が、流石JS、…

Cloud Functions+Puppeteerでサーバーレスなスクレイピング

いやこれはありだと思った。 準備 そもそもGCPのアカウントがないと始まらないのは当然として、手元の環境でgcloudコマンドがアカウント紐付いた状態で叩ける必要がある。(コマンドでCloud Functionsへデプロイをするため) gloudのインストールは以下を参…

テーブルを検索フィルタリングしてくれるJSライブラリ「jquery.ex-table-filter」

やりたいこと テーブルと検索フォームがあって、デフォルトではテーブルにはすべてのデータが表示されているが、検索フォームに文字を入力すると、入力したワードとマッチした 行のみが表示されるようにしたい。Ajax?そんなんいらんわボケ それを一発で実現…

vuexメモ

自分にはNuxtJSは早すぎた(てきとう 以下のようなsrc/App.vue <template> <div> <h1>{{ msg }}</h1> </div> </template> <script> export default { data() { return { msg: 'nyaa', }; }, }; </script> これは今まで。これをstoreで管理できるように yarn add vuex でsrc/main.jsはデフォルトだと以下のようになってい…

Javascriptで生成したHTMLをiframe内で表示させる方法

参考リンク曰く、「かなり限られたユースケース」に遭遇してしまったためメモ コード var iframe = document.getElementById('myframe'); var html = '<h1>こんにちはせかい</h1>'; var blob = new Blob([html], { type: 'text/html' }); iframe.src = URL.createObje…

Jqueryを使わずにリンク先のURLを一括置き換え

GTMでJQuery使おうとしたら$なんてねーよっtw怒られた そりゃそーか コード var links = document.querySelectorAll('a'); Array.prototype.forEach.call(links, function (elm, i) { elm.href = "http://stackoverflow.com"; }); 動作サンプル そんなに難…

Javascriptでも変数展開したい人生だった

Javascriptで変数展開、いわゆる文字列の中に変数を記述する記法は一応ある。 方法 ダブルクォーテーションの代わりにバッククォートで文字列を囲み、その中で展開したい変数を${}で囲むだけ val = 'hello' `${val} world !` > "hello world !" 正式名称はテ…

ヘッドレスブラウザPuppeteerで指定時間待たせる方法

いわゆるwait()とかsleep()とかdelay()って呼ばれてるやつ。 nightmareなら確かwait()だったかな? Puppeteerくんには残念ながら今のところそういった便利関数の実装はないので自分で作る必要がある。 const puppeteer = require('puppeteer'); async functi…

javascriptでGETパラメータを整形するときはURLSearchParams

※ レガシーブラウザの対応を除く この記事で終了、ってなっちゃうけど。 qiita.com 試してみる let url = new URL('http://thr3a.hatenablog.com/search?q=rails&order=date'); let params = new URLSearchParams(url.search.slice(1)); params.get('q') // …

jQueryのanimate()が効かない

animate()とは jQuery標準メソッドの1つで、要素を動かしたり、隠したり色々できるスグレモノ http://api.jquery.com/animate/api.jquery.com その中でも要素の背景色を別の色にフェードさせながら変えたいと思った。 <div id="mybox" style="width:300px;height:300px"></div> <script> $('#mybox').animate({backgroundCol</script>…

jQuery 3.xでajax()でエラーになったときに疑う箇所

なるほど、jQuery 3.0では多くの非推奨メソッドが削除されて2.xで動いていたものが動かなくなることがある 詳しくは以下のサイトが詳しい 【翻訳まとめ】jQuery 3.0 alpha リリースノート - Qiita 中でもajax()で若干ハマったのでメモ success() error() com…

初心者がNodeJSでBabelとgulpをインストールする

ES2015とかなんぞいって奴がちゃんと1から環境の構築をしてみる 環境 bash-3.2$ node -v v5.12.0 bash-3.2$ npm -v 3.10.6 babelのインストール まずはbabelのインストールから始める。 npm install-D babel-cli 適当にa.jsでもつくって以下 const myfunc =…

jQueryで追加削除が可能なリストを作成する

やりたかったこと 項目の追加と削除ができるリスト型入力フォーム 完成品 先に完成品見たほうが早い 失敗作 まぁとりあえずリストだしクリックされたリスト番号取得してremove()すればいけるっしょって思ってたけどこれだと削除ボタンだけじゃなくてリストの…

Socket.IOでroom内のクライアント数取得方法

ゴリゴリcount変数回すことなんてなかったんや・・・! console.log(Object.keys(io.nsps["/"].adapter.rooms["room"]).length)

Javascript+正規表現の際に変数使いたければnew RegExpを使え

Javascriptでマッチするかどうかは以下のようにしてできる。文字列に「あ」が含まれているかどうかチェックしたい場合 var str = "あいうえお"; if(str.match("あ")){ console.log('match!'); } この場合は正規表現を使ったマッチではないので変数が使える v…

Jqueryでクリックされたテーブルの位置(X行X列目)を取得する

普通にこんな感じのテーブルがあったとして <table border="3"> <tr> <td>データセル1-1</td> <td>データセル1-2</td> <td>データセル1-3</td> </tr> <tr> <td>データセル2-1</td> <td>データセル2-2</td> <td>データセル2-3</td> </tr> <tr> <td>データセル3-1</td> <td>データセル3-2</td> <td>データセル3-3</td> </tr> </table> 以下のようにすると「Row: 2, Column: 2 」のようにクリックされたセ…

NodeでNon blockingなSleepをさせる方法

Node上でPHPのように一定時間停止、つまりsleepさせるには以下が一番有名 https://www.npmjs.org/package/sleep npm install sleep 以下のように使う var sleep = require('sleep'); //3秒間スリープ sleep.sleep(n); //0.3秒間スリープ sleep.usleep(300000…

外部サイトに頼らずにYoutubeをリピート再生させるブックマークレット

単純にloop=1をつけても効いてくれないので1動画を仮のプレイリストにぶち込んでリピート再生 javascript:(function(){ if (location.href.match(/https?:\/\/www\.youtube\.com\/watch\?v=([^&]+)/)) { var url = "https://www.youtube.com/embed/" + RegE…

express jadeめも

わからんわw 超基本 doctype html html head meta(charset='UTF-8') title タイトルタイトル body h1 やっほ p ほげほげ views ディレクトリにjadeファイル npm startするとpackage.json内の「"start": "node ./bin/www"」が実行される 新しくページを作り…

jPlayerでストリーミングMP3を再生してみる

jPlayerってストリーミング再生もできるのね。すげーなこれ。 <html> <head> <title>AnimeNfo Radio</title> <meta charset="utf-8" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script> </link></meta></head></html>

Javascript「のみ」でTwitterAPIを叩いてみる

PHPに一切頼らずJavascriptのみでもできるんだね。。。 必要なもの jquery.js(今回は2.1.0) https://oauth.googlecode.com/svn/code/javascript/sha1.js https://oauth.googlecode.com/svn/code/javascript/oauth.js var options = { method: "GET", apiURL:…