DRYな備忘録

Don't Repeat Yourself.

javascript

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,…

Uint8Arrayをbase64文字列に変換

前回 JavaScriptでbase64文字列をUint8Arrayに変換 - DRYな備忘録 これやったから。その逆。 まあ基本対応表持ってるしかねえかな、って思った var mapReverse = { "000000":"A", "000001":"B", // 中略 "111101":"9", "111110":"+", "111111":"/", "":"=" }…

JavaScriptでbase64文字列をUint8Arrayに変換

var uri = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAYAAABirU3bAAAAM0lEQVQIW2M0q1r+//9/BiAAEwyMZlXLgAIQDljAtGoJggcTgKlgZGRkYDSpAKpgRCgCAC8QFZ6zMZV3AAAAAElFTkSuQmCC"; var marker = "base64,"; var index = uri.indexOf(marker) + m…

JavaScriptで10進数から2進数へ変換

追記 @otiai10 (30).toString(2) ではだめですかね?— Takuo Kihira (@tkihira) 2014, 7月 4 いやーインターネッツはやっぱり素晴らしい(白目 以下原文 いやーもっといい方法あるっぽいけど function decimal2binary(dec, padOrder) { var base = 2; var po…

jsプロジェクトのメタファイルが多すぎてウザいのでchestというのを使ってみたメモ

メタファイルが多すぎる TypeScriptに限った話ではないのだけれど、JavaScript関連のプロジェクトつくってるとパッケージ管理などを定義するメタファイルがトップディレクトリに散乱することになる。たとえば otiai10/prisc at freeze/before-chest · GitHub…

bower installが失敗する: Object #<Object> has no method 'tmpdir'

問題 % bower install /Users/otiai10/.nvm/v0.8.11/lib/node_modules/bower/node_modules/tmp/lib/tmp.js:266 throw err; ^ TypeError: Object #<Object> has no method 'tmpdir' #以下略 原因 nodejs古い 解決 % nvm ls v0.8.11 current: v0.8.11 default -> v0.8.</object>…

JavaScriptのselfってthisのディープコピーじゃなくて参照なのかもしかして【this】【JavaScript】

問題 こういうことできないだろうなー、と思って書いてたら、できてびっくりしたのです var Thief = function(name) { this.name = name; }; Thief.prototype.commitTheft = function(){ console.log("( ^ω^).。oO( 俺の名前は「" + this.name + "」、今から…

node.jsのsetTimeout内の`this`って何?【node.js】【setTimeout】

問題 とりあえず、コールバック関数の中でthisを使うのは注意 コールバック外で定義されてるthisとは違うから ブラウザJavaScriptで、setTimeoutコールバックで参照できるthisはwindow node.jsにwindowって無いんじゃなかったっけ? node.jsのsetTimeout内の…

memo : 俺々extendsを作りたいわけだ

参照渡し、shallow copy 調べたら Fuga = いらないハズ _.extend(Fuga, Hoge); だけでいけるのでは [3:57:11] ➜ cat sample.js var _ = { extend : function(func1, func2){ func1.prototype = Object.create(func2.prototype); func1.prototype.constructor …

ウィジェット化されず猫娘AAも出て来ない場合の調査【艦これウィジェット】

「正しく」失敗する時 回線が遅い、運営がメンテなどの理由でウィジェット化が失敗することがある。その場合は以下のような猫娘AAが出るはず。 猫娘も出ないウィジェット化失敗することが報告されている お使い頂きありがとうございます!すみません、そのバ…

多次元配列を特定の深さにある要素でsortしたい【JavaScript】【Array.sort()】【比較関数】

【問題】 JavaScriptで、多次元配列の親配列の先頭の要素ではなく、子配列の子配列の・・・の要素でsortしたい。 たとえば [[6,2], [3,9], [1,7], [4,0], [8,5]] を、こう [[4,0], [6,2], [8,5], [1,7], [3,9]] 【経緯】 まずここ 配列(Array) に来て まあ…