DRYな備忘録

Don't Repeat Yourself.

javascript

与えられた関数の引数の個数を取得したい

developer.mozilla.org const 関数を受ける関数 = (func) => { console.log(func, func.length); }; 関数を受ける関数((x, y, z) => { console.log(x,y,z) }); // [Function] 3 DRYな備忘録として

【iPhone】【Safari】getUserMediaで取ったMediaStreamをvideoタグにセットしても最初のフレームだけ描画されて止まってしまう問題【React】

問題 iPhoneのSafariにおいて、 navigator.mediaDevices.getUserMediaによって、 videoを含むMediaStreamを取得し、 HTMLのvideoタグに動画を描画しようとすると、 最初のフレームだけ描画されたのち、フリーズしてしまう。 解決 getUserMediaを呼ぶ前に、vi…

Node.jsのchild_process間で、標準出力のpipe

これをやりたい↓ cat ./testdata.txt | grep otiai JavaScriptで、 const cat = spawn('cat', ['./testdata.txt']); const grep = spawn('grep', ['otiai']); cat.stdout.pipe(grep.stdin); grep.stdout.on('data', (chunk) => { console.log('[grep]'); con…

ElectronデスクトップアプリによるGoogleのOAuth2クライアント実装

目的 僕が、ElectronデスクトップアプリによるOAuthプロセスを知る うるせえ動くもん見せろ はい。 github.com ゴール 手元のElectronアプリで、ログインユーザ(この場合、僕自身)のAPIトークンで、GoogleのなんらかのAPIが叩ける ← 登録したアプリ下でわ…

Chrome拡張の開発でwebpackを使わずにES6のimportを有効にしたい

追記 2018/10/29 chromeモジュールが使えなくなる、という指摘は半分正しくて半分間違ってる(いくらでもやりようがある)のでもうちょっとちゃんとした記事を書きました。 medium.com 以下原文ママ。 背景 JSのプロジェクトで、特に僕はChrome拡張を作るこ…

【React】画像がNotFoundのときimgタグごと表示せず存在を消す

目的 画像がサーバ上に無いとき、こうなる。 画像がサーバ上に無いときは「見つからないよ!」という画像を出すのもかっこ悪いので、タグごと存在を消したい。こう。 参考 javascript - How to silently hide "Image not found" icon when src source image …

Firebase Cloud Messaging(FCM)でより簡単にWebブラウザにPush通知を送るサンプル

前回、下記のエントリでProgressive Web Appにおけるそこそこ生のWeb-Push-Protocolについておおまかな仕組みを触れました otiai10.hatenablog.com ので、今回はFirebase Cloud Messagingを使って、もっと手軽にWebブラウザにPush通知を送るのをやってみた備…

webブラウザにPush通知送るサーバとjsのサンプル

このドキュメントは 以下の2つのドキュメントをよりプリミティブに理解するためのDRYな備忘録です。 Adding Push Notifications to a Web App | Web | Google Developers The Web Push Protocol | Web | Google Developers 背景 かつて サーバからブラウザ…

webpackのプロジェクトでWebWorker書いててつまずいたメモ

まずnew Worker(“./my/worker”) というやつ Workerのコンストラクタにファイルパスを渡すやつからしてwebpackだとどう解決されるのか問題。 worker-loader - npm webpack/webpack.config.js at master · webpack/webpack · GitHub 以上を参考にして、まず np…

react-routerでページを共通Layoutに乗せたりログイン画面は乗せなかったりするルーティングの設定

import React from 'react'; import ReactDOM from 'react-dom' import {Router, Routes, browserHistory} from 'react-router'; import {MyFancyLayout} from '../../layouts'; import { LoginPage, // これと HomePage, SettingPage, NotFoundPage, // こ…

Draft.jsを使ってContentEditableなdivに絵文字をレンダリングしつつ編集可能にする

ぜったいなんかやり方あるだろと思いつつなかなか見つからなくてググり続けたりして6時間ぐらいハマったのでメモ。 import React from 'react'; import {Editor, EditorState, CompositeDecorator} from 'draft-js'; const getEmojiURL = (key) => { // TODO…

jestでTypeError: Cannot read property 'instrument' of undefinedと叱られる

とりあえず ./node_modules/.bin/jest --no-cache # package.jsonのscriptsや、-gで入れてる場合は、 "jest --no-cache" ですもちろん。 としたら通った。 DRY Learning React Native: Building Native Mobile Apps with JavaScript作者: Bonnie Eisenman出…

ブラウザでMediaStreamを動画に固めて保存したい

ゴール ブラウザのJavaScriptで、MediaStreamを動画ファイルにしてローカルに保存できるようにしたい。 参考 MediaStream Recording API - Web APIs | MDN Using the MediaStream Recording API - Web APIs | MDN tl;dr 好きな方法でMediaStreamを取得する g…

ブラウザのJavaScriptからGoogle Cloud Vision APIを使うペライチのサンプル

わけあってJavaScriptの環境での画像認識とか文字認識とかに若干興味あるのでやってみた。 参考 Google Cloud Vision API | Google Cloud Vision API | Google Cloud Platform Method: images.annotate | Google Cloud Vision API | Google Cloud Platform h…

electronのWebView.executeJavaScriptがコールバックを呼ばない問題

以下のようなコードを書いて、electronのwindow内に作ったWebViewの中の情報を取得しようとした。 let webview = document.createElement('webview'); webview.addEventListener('did-finish-load', function() { // 第1引数に内部で実行したいJavaScript文…

sendResponseが動いてないように見える現象に半年に1回ひっかかってる気がする

background.js chrome.runtime.onMessage.addEventListener((req, sender, sendRes) => { setTimeout(() => { // ここまで来てるのに sendRes("元気でーす"); }, 100); }); contents_script.js chrome.runtime.sendMessage(null, {msg:"元気ですか?"}, (res…

正規表現でマッチした要素を残しつつsplitしたい

ほしいもの sourc: aaaaaaabbbbbxxxxxxdddddeeezzzzzfffffffffxxxxxxxxx rule: /[x|z]+/ result: ['aaaaaaabbbbb', 'xxxxxx', 'dddddeee', 'zzzzz', 'fffffffffggggg', 'xxxxxxxxx'] こんな感じ。splitだと、'xxxxxx'とか'zzzzz'は要素としては消えちゃうけ…

JavaScriptでお手軽in_array

なんかスコープとかの問題でunderscoreとか使えないとき、でゴルフっぽいコード書きたいとき [0,1,2,3].indexOf(3) > -1; // true [0,1,2,3].indexOf(100) > -1; // false angularのdirectiveの中とか <div data-ng-if="[0, 2, 3].indexOf(player.type) > -1"> アクセサリ一覧: </div> みたいな DRY

React.jsで改行が表示されなくて困ったメモ

問題 textarea -> divの中身にする みたいなありがちなやつで、これが こうなる 改行\nして\nください ってなってる 調査 みんな困ってたっぽい https://groups.google.com/forum/#!topic/reactjs/VUJT314Gm50 (textarea内部のはなしだけど↓) http://niwar…

Emscriptenとはなんじゃらほい

Emscriptend.hatena.ne.jp とりあえず使ってみるしかない kripken/emscripten · GitHub Main — Emscripten 1.29.12 documentation EmscriptenでC言語をJavaScriptに変換する - Qiita SDKインストール Download and install — Emscripten 1.29.12 documentati…

IndexedDBでauto incrementなユニークキーを使いたい

資料 Using IndexedDB - Web API Interfaces | MDN IDBDatabase.createObjectStore - Web API Interfaces | MDN 問題 objectStoreを使うにあたって、autoIncrementで一意なidっぽいものをつくりたい もちろん、参照できる形で 解決 createObjectStoreメソッ…

IndexedDB Driver "ingoose" (like Mongoose)

What is IndexedDB @see IndexedDB - Web API Interfaces | MDN Why "ingoose" it's very annoying to use indexedDB raw API simplify application code by Mongoose like API Demo anyway You can try how it works here DEMO - ingoose : mongoose like i…

たぶん世界一簡単なIndexedDBのサンプル

WebSQL先輩… localStorageのようなシンプルなkvsじゃなくて、検索を伴うようなブラウザで永続化できるストレージあるかな、そういえばWebSQLってどうなってるんだろう?と思って調べたら、 Developer's blog | HTML5のWeb SQL DatabaseがW3Cの仕様策定の範囲…

たぶん世界一簡単なAngularJSのサンプル

index.html <html> <head> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body data-ng-app="foo"> <div data-ng-controller="BarController"> </div></body></html>

JavaScriptのDateのコンストラクタとinput type="datetime-local"の扱い、あとMoment.jsとか

<input type="datetime-local" /> var val = $('input[type="datetime-local"]').val(); "2015-01-05T16:00" このままDate型のコンストラクタにぶち込む new Date("2015-01-05T16:00") Tue Jan 06 2015 01:00:00 GMT+0900 (JST) // Expected // Mon Jan 05 2015 16:00:00 GMT+0900 (JST) "T"…

undefined is not a function【Handlebars】

問題 handlebars使ってて掲題のエラー出た "undefined is not a function" とは ご存知、未定義の変数を関数呼び出しした時に起きるエラー var my = { foo: function() { console.log("This is my.foo!"); } /* bar: function() { console.log("This is my.b…

AngularJSでBootstrapのModalを出す方法メモ

問題 AngularJSと、Bootstrapのui.bootstrap使ってて BootstrapのModal機能とか使いたくなるけれど Angular的なControllerや$scopeの扱いが混乱したのでメモ 参考 公式: Angular directives for Bootstrap サンプル 親View。対応するControllerのメソッドを…

モジュールのメソッド存在判定にJSON.stringifyを使っちゃだめ【JavaScript】

JSONじゃないからね var my = {}; > undefined my.fnc = function() { window.alert("This is my function"); }; > function () { window.alert("This is my function"); } my.fnc(); > undefined JSON.stringify(my.fnc); > undefined JSON.stringify(my); …

Android/iOSのWebViewでEvaluateJavascript的サムシング

iOS iOSのWebViewインスタンスには、stringByEvaluatingJavaScriptFromStringというメソッドがある. [webView stringByEvaluatingJavaScriptFromString:@"window.alert('田井中律は俺の嫁');"]; Android AndroidのWebViewインスタンスには、「JavaScriptを実…

JavaScriptでUint8Arrayをdump

Uint8Array.prototype.dump = function() { var t = ""; for (var i = 0; i < this.length; i++) { t += String(this[i]); if (i % 4 == 3) t += " "; if (i % 16 == 15) t += "\n"; } return t; }; var a = new Uint8Array([0,0,0,0,0,0,0,1,0,0,1,0,0,0,1,…