ffmpegでMacで再生可能なテスト動画を作る

詳しく調べていないのでわからないけど、なぜか以下のように普通にテスト動画を作ると、Quick Player で再生できなかった。互換性がないとか言われる。 $ ffmpeg -f lavfi -i testsrc=duration=10:size=640x360:rate=30 -vcodec libx264 test.mp4 ピクセルフ…

ffmpegのフィルター処理(再生速度、明るさ、ノイズ除去など)

忘備録。 動画に適用するフィルタは-vf で指定する。 動画の再生速度を2倍にするなどができる。 $ ffmpeg -i in.mp4 -vf setpts=PTS/2.0 out.mp4 明るさ、彩度も調整できる。 $ ffmpeg -i in.mp4 -vf eq=brightness=0.06:saturation=2 out.mp4 イコールがつ…

【React】HOCのレンダリングコスト

何をしたか React で HOC (Higher Order Component) が肥大化するとレンダリングのコストが増大するはずだと思って調べた。 もっと詳しく HOC は要するに高階関数であり、高階関数はロジックを抽象化するために優れたデザインパターンだが、パフォーマンス面…

Canvas上のお絵かきを録画する

MediaRecorder API と Canvas の captureStream() を使えば、ブラウザの Canvas 上でお絵描きしている様子を録画できる。 デモサイト 実装は出来心から preact で行ったが、普通に React 使っとけばよかった。やはり細かいところでつまずいたりした。 録画の…

カレントディレクトリを取得するコマンドはbasename $PWD

$ pwd /usr/hoge/fuga であるとき文字列 fuga を取得したければ basename コマンドを使う。 $ basename `pwd` fuga pwd コマンドは変数 $PWD で代用できるので $ basename $PWD fuga でもよい。これなら別のコマンドの引数として使いたい時にも $ some_comma…

英和辞書のコマンドラインツールを作った

npm パッケージで作ったので、 npm install -g ejdict ですぐに始められる。 ejdict オフラインで使える英和辞書のコマンドラインツール、探してみたけどなかなかない。いちおう、Linux のコマンドラインでオフライン英和辞書 という記事で、辞書テキストフ…

Preact とかいう React のサブセット。何が違うのか

React よりもファイルサイズが小さいと謳っている Preact。 Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM. React と同じ ES6 の API で 3kb と軽量だし高速だぜ! とのこと。 で、本家 React と何が違うのか。Preact のドキ…

【React】 PureComponent にアロー関数を渡してはいけない

React v15.3 で追加された PureComponent は便利だけど、少し間違えるとパフォーマンス上がりませんよという話。 記事を書こうと思い立ったあとで調べたら先人がいらっしゃった。 React.js pure render performance anti-pattern 二番煎じだが、自戒のために…

オブジェクト指向でモナドするならメソッドチェーンで書くと自然になるかも

オブジェクト指向の言語でモナドっぽいことをするなら、メソッドチェーンできるように実装すると自然になるかなと思った。 JavaScript では Promise がモナドなのだけど、 bind 的なことをしているのは then なわけです。 // doSomethingAsync の型が number…

ヘッドレスChromeでスクレイピングする例

ヘッドレス Chrome でスクレイピング。かなり手軽にやれることがわかった。 簡単な例をいくつか書いてみた。 準備は npm install chromy するだけ。 Google 検索して、タイトルとURLを取ってくる Amazon 検索して、本のタイトルを取ってくる Instagram ハッ…

【JavaScript】reduce(Object.assign)で失敗した

コレクションの配列をオブジェクトにしようとして、こんな感じのコードをよく書くのだけど、 const users = [{ id: 1, name: 'suzuki' }, { id: 2, name: 'sato' }] const usersById = users .map((user) => ({[user.id]: user})) .reduce((obj, userObj) =>…

【JavaScript】配列のreduce関数の可読性を少し上げるテクニック

JavaScript の話題です。配列の reduce 関数、書きやすいけど可読性が低いですよね。 たとえば以下のようにコレクションを変換して id をキーとしたオブジェクトにするという操作。慣れてくれば普通に読めますけど、なんとなく読みにくいんですよね。 const …

Webエンジニアでも圏論したい!(関手篇)

この記事の目標は、「配列の map 関数は関手である」とドヤ顔で言えるようになることです。 初回の記事はこちら。 Webエンジニアでも圏論したい! 配列の map 関数を観察する まずは配列の map 関数をよく観察してみます。 map 関数はこんなやつですね。(コ…

二度と忘れないawkコマンドの基本

結論としては、これだけ。 awkはテキストの各行に対して pattern { action } を実行する。 これだけ覚えれば間違えずに使える。 awk コマンドはテキスト整形に便利だが、使い方をよく忘れるのでいつもググっている。 使い勝手が悪いわけではないけど、多機能…

Rustの練習でenvsubstを車輪再発明

Rustの練習がしたかった。新しくプログラミング言語を学ぶときにはテンプレートエンジンを作るのが手頃な難易度で良いと誰かが言っていたので、envsubst みたいなやつを作ろうと思った。 envsubstはテキスト中の$FOOのような文字列を環境変数の値に置き換え…

.bashrcで機密情報の環境変数を設定するべきではない

npm でマルウェアが発見されました。プロセスの環境変数を勝手に外部サーバーに送るそうです。 npmjs.com で著名ソフトウェアによく似た名前のマルウェアが大量に発見された 環境変数でパスワードや API Key などの機密情報を管理しているとやばい。対策とし…

Webエンジニアでも圏論したい!

この記事の目標は、「型付きの純粋な関数は圏をなす」を理解することです。 始めていきましょう。 TypeScript で圏を作ろう なじみある具体例から始めます。圏論はとりわけ抽象度が高いため、圏の定義を天下り的に書いても何を言っているのかわかりませんか…

sedコマンドはチューリング完全

チューリング完全とは、万能チューリングマシンと同じ計算能力を持つこと。ざっくり言うと、条件分岐やループが実現できて普通のプログラミング言語で実現できるアルゴリズムを作れる能力を持つことです。 sedコマンド sed コマンドは、テキスト処理を手軽に…

Node.jsでOption型を学ぶ

Option 型というものがある。 Option type - Wikipedia 概要部分を Google 翻訳に突っ込むと、 プログラミング言語(関数型プログラミング言語ほど)と型理論では、オプション型または多分型は、任意の値のカプセル化を表す多型です。 例えば、それが適用さ…

GitHub as a Data Storage的なやつ

データベースを立てるほどじゃないけど気軽にデータを保存したい。GitHub as a Data Storage 的な考え方のツールを Node.js で作った。 remote-git-storage 使い方はこんな感じ。アクセストークンを用意して、リポジトリを指定する。 ref()でファイルにアク…

【最小構成】React + Firebase で認証つきリアルタイムDBアプリ

Firebase の練習。 リアルタイムDB 認証 を使ったミニマムな Web アプリケーションを React で実装してみる。 成果 GitHub https://github.com/FujiHaruka/react-firebase-simples アプリ https://test-app-dd4f5.firebaseapp.com/ 1. 準備 [create-react-ap…

【JavaScript】class構文で宣言したクラスのメソッド名を取得する

結論としては、prototypeに対して Object.getOwnPropertyNames()を使えばよい。 class Person { sayHello () { console.log('hello') } } let methods = Object.getOwnPropertyNames(Person.prototype) console.log(methods) // > [ 'constructor', 'sayHell…

ReactでMarkdown Editorを爆速で作る

n番煎じだけど気にしない。完成品。 React Markdown Editor Github 1. create-react-appでひな型を作る create-react-appを使う。 $ yarn global add create-react-app $ create-react-app react-markdown-editor 待つこと数十秒。yarn が速いので助かる。 2…

【JavaScript】Arrayのreduce関数を自由に使いこなす

配列の reduce 関数は、配列から一つの何か(オブジェクト、数値、文字列)を作りたい時に使います。 いつものように具体例から。 let array = [1, 2, 3, 4, 5] let sum = array.reduce(function (sum, num) { return sum + num }, 0) console.log(sum) // 1…

【JavaScript】深さ優先探索をジェネレータで書く

深さ優先探索をジェネレータファンクション function * () で書いてみよう。 深さ優先探索の素朴な例 まず、深さ優先探索が必要になる課題を考える。 【課題】 ネストされたオブジェクトを deep freeze せよ。 Object.freeze はオブジェクトをフリーズしてく…

Go言語で競プロの問題を解く

練習したのを貼る。 https://gist.github.com/FujiHaruka/650f50a4f6a86a879b4ecebd4d822bb8 雰囲気はこんな感じ。AtCoder Contest 053 D問題の解答。言語に関しては競プロの解答が書けるために必要な知識は少ない。練習にはちょうどいいが、これくらいでは …

Reactでベンチマークテストするならreact-addons-perf

React でパフォーマンスが気になった時にレンダリングの時間をどうやって計測するんだろうと思ったら、公式にあった。 Performance tools react-addons-perf というツールで計測できる。 以下、簡単なサンプルコード。 import React, { Component } from 're…

JavaScript で動的にメソッド/プロパティを生成する

JavaScript で動的にメソッドやプロパティを生成するには、 Proxy を使うという方法がある。 Proxy - JavaScript | MDN - Mozilla Developer Network 例えば、あるメソッドをあらかじめ定義せずに実行したい。とりあえずメソッドを実行したら、そのメソッド…

Node.js 8.0.0 から promisify が使えるようになった

Node.js 8.0.0 から util.promisify が使えるようになった。 これで、外部ライブラリを使わなくても promisify ができる。 const { promisify } = require('util') const { readFile } = require('fs') const readFileAsync = promisify(readFile) async fun…

docker execで実行したコンテナ内のプロセスを kill する

インストールがめんどくさいツールを使う時に、 Docker コンテナ立てて exec すれば楽じゃん、と思った。 ところが、 docker exec で実行したプロセスを kill するにはひと手間必要だった。 # コンテナを立てる。 $ docker run -d --name my-ubuntu ubuntu:1…