タグ: javascript

react-bootstrap-dialogつくった

React Componentのnpm packagesをつくった。React + react-bootstrapの環境で、window.alertやwindow.confirmを使うとUIが浮いてしまうので、<Modal />を使うんだけど、毎回細かい定義をするのが面倒なので、メソッドのパラメータでサクッといろいろなダイアログを表示できるようにした。

https://github.com/akiroom/react-bootstrap-dialog/

デモはこちらからどうぞ。

続きを読む react-bootstrap-dialogつくった

React v15のUnknown prop warningにはlodash.omitが便利

Reactをv0.14.xからv15.x.x系にアップデートしたところ、以下のようなWarningが多発するようになった。

Warning: Unknown prop hogefuga on <button> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop for details.

https://gyazo.com/0fe6be4ea94d52fd8f14dc9f516ac905

これは、今までは無視されていた未定義のpropを渡してはいけないという仕様が追加されたために発生している。

Unknown Prop Warning | React

これを解消するには、lodashの_.omitを使うと便利。omitは、オブジェクトから指定したキーを除外した結果を返してくれる。

https://lodash.com/docs#omit

omitを使えば、こんな感じで書ける：

import {omit} from 'lodash'

render () {
  const buttonProps = omit(this.props, ['hogefuga'])
  return <button {...props} />
}

ちなみに以下のように分割代入に ... を使って指定されてない残りを取り出す方法はES7からしか使えない。
(参考: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment )

({hogefuga, ...buttonProps} = this.props)

ElectronでBonjourに登録されたIPアドレスを取得する

最初にmdnsというnpmパッケージが目についたんだけど、実行すると以下のようなエラーがでてうまく動かない。

$ electron .
[1108/014127:ERROR:http_transport_mac.mm(186)] Could not connect to the server. (NSURLErrorDomain -1004)

Bonjourでブラウズ(デバイスの検索)するだけなら、mdns-jsというnpmパッケージが素晴らしく簡単に動いた。

  • https://www.npmjs.com/package/mdns-js
  • https://github.com/kmpm/node-mdns-js

githubリポジトリに書かれてるように、以下のサンプルコードがそのまま動く。

var mdns = require('mdns-js');

var browser = mdns.createBrowser();

browser.on('ready', function () {
    browser.discover(); 
});

browser.on('update', function (data) {
    console.log('data:', data);
});

JavaScriptからCSSファイルに書かれた定義を取得する

JavaScriptからCSSの値を取得するには、たいていの場合はjQueryのcssメソッドを使えばOK.

$('#item').css('background-color');

ただし、これがCSSファイルに書かれたmax-widthやmax-heightの場合だとChromeやFirefoxごとに実装が違っていて、%で返ってきたり計算済みのpxで返ってきたりと面倒くさい。こうなる前のCSSファイルに書かれた最初のCSSの値をとる方法について書く。

続きを読む JavaScriptからCSSファイルに書かれた定義を取得する

FirefoxでSVGからBlobを生成するとfilterが適用されない

※本記事は解決していない内容のメモです。

svgからBlobを生成すると、imgに直接画像を入れたりcssの画像URLとして取り扱ったりできる。その中でぼかし効果のあるフィルターを適用していたところ、Chromeでは適用されるのにFirefoxでは適用されなかった。「feGaussianBlur blob firefox」とかで検索しても関係しそうなWebページが見つからなかったので、メモを残す。

続きを読む FirefoxでSVGからBlobを生成するとfilterが適用されない