CMYKとRGB

• シアン(Cyan)
• マゼンダ(Magenta)
• イエロー(Yellow)
• キー・プレート(Key plate) (黒)

• あか(Red)
• みどり(Green)
• あお(Blue)

カラーモード変更時の注意点

CMYKで色を正確に表現するには

RGBで色を正確に表現するには

const object = {a: 2, b: 3, c: 5}
console.log(object.map(e => e**2))
// Error: object.map is not a function

const object = {a: 2, b: 3, c: 5}
console.log(Object.keys(object).map(e => object[e]**2))
// [4, 9, 25]

const object = {a: 2, b: 3, c: 5}
console.log(Object.keys(object).map(e => e))
// ["a", "b", "c"]

SQLモードの変更

まずは現状のSQLモードを確認

SELECT @@global.sql_mode;
/etc/mysql/mysql.conf.d/mysqld.cnf
sql_mode=ONLY_FULL_GROUP_BY,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISIONNE_SUBSTITUTION

/etc/init.d/mysql restart

mysql> select version();
+-------------------------+
| version()               |
+-------------------------+
| 5.7.27-0ubuntu0.16.04.1 |
+-------------------------+
1 row in set (0.00 sec)

SQLモードを変更する

mysql> SET GLOBAL sql_mode = '';
Query OK, 0 rows affected, 1 warning (0.00 sec)

mysql> SELECT @@global.sql_mode;
+-------------------+
| @@global.sql_mode |
+-------------------+
|                   |
+-------------------+
1 row in set (0.00 sec)

mysql> SET GLOBAL sql_mode = 'ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION';
Query OK, 0 rows affected (0.00 sec)

mysql> SELECT @@global.sql_mode;                                                                        +-------------------------------------------------------------------------------------------------------------------------------------------+
| @@global.sql_mode                                                                                                                         |
+-------------------------------------------------------------------------------------------------------------------------------------------+
| ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION |
+-------------------------------------------------------------------------------------------------------------------------------------------+
1 row in set (0.00 sec)

と、思ったら、WordPressの投稿編集画面のGutenbergのフォントが明朝体じゃなくなってる！

タイトル部だけは明朝体のままだけど。

今Windowsで書いていますが、これはメイリオかな？

エディターと実際の記事でフォントが違うのが気になってたんだけど、しかも明朝体が見慣れなさすぎて気になってたんだけど、これはよかった。

どのタイミングで変わったのかわからなくてなぜ変わったかもわからないからちょっと怖いけど笑

なんという適当な記事でしょう。

これぞ日記！

もう、買えないのです。

9/13、午前2時、新しいiPhoneの発表会はいつものわくわく感は全くなく、むしろがっかりするという衝撃の体験でした。

新しいiPhoneは、iPhone XR、iPhone XS、iPhone X MAXで、価格が厳しさを帯びています。

新しい機能は特に目立つ点もなく、基本的にオーバースペックとなっている印象です。

これまでiPhoneを買い替えた時のApple発表会は、そのとき使っているものよりも優れた機能や魅力にあふれていて、とてもわくわくしたものです。

いまや懐かしい。

iPhone SEが発表された時は、それはもう興奮したし、発表会後に公式ホームページを見たときにはもう欲しくて欲しくてたまりませんでした。

かっちりしたフォルム、デザインのバランス、つや消しフィニッシュなど見た目もさることながら、スペックも遜色なく、今やすべてが完璧とさえ思えます。

ここがピークだったのでしょうか。

今のiPhoneは他の追随です。

業界を牽引するAppleはもうないのかもしれません。

今使ってるiPhone SEが壊れたらもうスマホいらないかな。

とりあえずカット

ある吹奏楽の演奏会の録音をそれぞれの曲ごとのトラックへとカットする作業をやりました。とりあえず曲開始(最初の音が入った瞬間)の0.1秒前から開始して、最後の音が鳴り終わったところ(減衰して無音になったところ)までで切り出していました。

曲のはじまりのなやみ

曲の始まりはだいたい無音になっているのでわかりやすいのですが、今回は吹奏楽の録音だったので、気になるのはブレスの音です。
音量大きくすると聞こえるんですね、これが。
ブレスも曲のうちかなぁ…
ちょっと悩んだのですが、ブレスするということは指揮者はもう振り始めているわけで、曲ということにしました。

曲のおわりのなやみ

トラックの最後で悩むのは最後の音の減衰を待たずに拍手が入ってしまうことです。
奏者としては感激のあまり指揮者の礼を待たずに拍手してしまった感があってよいかもしれませんが、カットするときは曲の終わりがわからないので悩みます。
今回は拍手の最初の音から5秒追加して、最後3秒をリニアフェードアウトの処理をしました。

録音をウェブ上で聴く

カットした録音をウェブ上で聴けるようにしたところ、曲のはじまり0.1秒は短すぎました。
また、曲の終わりも空間ほぼなし、拍手があっても+5秒で、これも短すぎました。
まず、環境にもよりますがストリーミングのための読み込みとブラウザ処理のラグがあり、最初の0.5秒～1秒ほどは飛んでしまうことがあります。これが起こると最初の音はつぶれて聴こえません。曲の終わりも鳴り終わった直後に次の曲が始まってしまうので、せわしなくなってしまい、落ち着いて聴くことができません。

世の中のアルバム

参考として、CDなどの録音を調べてみました。

カラヤンのニューイヤーコンサート1987では曲の先頭に0.2秒(0.15秒～0.25秒ほど)の空白があり、最後は拍手が入ってから終わるまで15秒ほどあり、フェードアウトかわかりませんがそのうち最後2～6秒は空白になっていました。

スタジオ録音のアルバムで手元にあったのは侍Brassの十拳剣で、曲の先頭の空白は1秒～2秒(平均1.2秒)で、終わりの空白は7秒～12秒(平均8秒ほど)でした。

また、侍Brassの楽団長中川英二郎氏が出したSlide Monstersでは、曲の先頭の空白は1.5秒～2.5秒(平均1.6秒ほど)で、終わりの空白は7秒～12秒(平均10秒ほど)でした。

というわけで

今回はウェブ上で聴くことを目的としているので、読み込みのラグを考慮し先頭の空白は1秒以上とし、曲の最後は10秒以上取り、最後4秒ほどをフェードアウトすることにしました。

宝の持ち腐れとはまさにこのこと。

ですが、無料のエンコードソフトや編集ソフトを使うと、映像内に文字列の消印を入れられてしまったり、対応しているファイル形式が少なかったりと制約が多く、なかなか自由にいきません。

Photoshop や Illustrator が目当てでAdobe CCを契約しましたが、すべてのソフトウェアが使えるのでせっかくなので使えそうなとこは使っています。

あ、最初に言っておきますが、別に使い方が軽いだけで、なにか動作が軽くなるとかそういう軽いではありません。

Adobe Premier と Adobe Media Encoder

初めて動画編集やってみようと思ったとき、CCソフトウェア群の中に、Premier と Media Encoderがあって、え、なにが違うの？となったので簡単にまとめます。

ひとことで言うと、Media Encoder は補佐的なソフトです。Adobe Premier Pro で全ての作業ができますが、Media Encoder はないと不便です。

Adobe Premier

Adobe Premier は動画そのものの編集を行うソフトです。
いくつかの動画ファイルをくっつけたり切り出したり、エフェクトをかけたり、やろうと思えばどんなこともできるらしいです。
その機能は多彩すぎて把握しきれません。
私は動画のカットやTC(タイムコード)の記録に使う程度です笑

Adobe Media Encoder

Adobe Media Encoder はその名の通りエンコードを専門とするソフトウェアです。
エンコードとは、いわゆるデータ形式を変換することです。
これにはCPUやGPUの高い計算処理能力が必要で、一般的に時間がかかる作業です。(始めてしまえば放置だけど)
Adobe Premier で作った動画ファイルを出力しようとしたときに
ファイル > 書き出し > メディア
などで独立したファイルとして書き出すことができますが、この操作の度に重いエンコード処理が走るとその都度作業を中断しなくてはなりません。
そこで役立つのがこのAdobe Media Encoderです。
メディア出力画面で、「書き出し」ではなく「キュー」を押すとAdobe Media Encoderが起動し、出力情報が登録されます。
キューはストックされAdobe Media Encoder上で「キューを開始」ボタンを押すと、登録された順にエンコードが開始されます。
エンコードをこのソフトで分けて行うことで、Adobe Premier側は常に操作することができます。

fetch APIでリクエストを送信

おおむねMDN web docs (fetch 概説)で紹介されているものと同じです。

fetch('リクエスト先URL', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    user: 'user',
    data: 'data'
  })
})
.then(response => {
  if (response.status === 200) {
    return response.json()
  } else {
    console.warn('Something went wrong on api server!');
  }
})
.then(json => {
  return callback(json)
})
.catch(error => {
  console.error(error);
})

ExpressでPOSTを受け取る

準備

ExpressでPOSTを受信するのはこんな感じです。

const express = require('express')
const app = express()
app.listen(3000)

app.post('/request', (req, res) => {
  console.log(req.body)
  res.send('OK')
})

ExpressでPOSTを受け取る

さらにPOSTパラメータも受け取るにはbody-parserを使います。
npmで入れてから、以下を追記します。

const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))
app.use(bodyParser.json())

ここで、この一文を書かないと受信したbodyがからっぽになります。

app.use(bodyParser.json())

HTMLのformなどから送られるデータはurlencode形式ですが、上記したfetchで送られるPOSTデータはjson形式で送られるので、urlencodeとは別にjsonも初期化が必要です。

最終的なコード

const express = require('express')
const app = express()

const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))
app.use(bodyParser.json())

app.listen(3000)

app.post('/request', (req, res) => {
  console.log(req.body)
  res.send('OK')
})

React NavigationでNavigationをネストしたとき

経緯

画面遷移を実装するために公式のドキュメントでもおすすめされているReact Navigationを使って、
作ったNavigationをネストしようとしたときに出たエラーです。

React Navigation

Expoで実行しつつ作っていたら

というWarningが出てました。

Common mistakes – React Navigation

Warningに記されているURL先を確認すると、よくある間違いをやっていたようなので修正すると以下のエラーを出すようになりました。

エラー文

ドキュメントに書いてある通りにやってるのに変だなーと思っていたのですが、書いてある通りにやってなかったという。
そのときのコードを公式ドキュメントのコードを元に再現すると、

export default App extends React.Component {
  render () {
    return <AppNavigator />
  }
}

const AppNavigator = createSwitchNavigator({
  Auth: AuthenticationNavigator,
  Home: HomeScreen,
})

const AuthenticationNavigator = createStackNavigator({
  SignIn: SignInScreen,
  ForgotPassword: ForgotPasswordScreen,
})

こんな感じにしてました。
constの宣言順が大事です。
AuthenticationNavigatorを宣言する前にAppNavigatorで呼び出そうとしてたのが悪かったみたい。

export default App extends React.Component {
  render () {
    return <AppNavigator />
  }
}

const AuthenticationNavigator = createStackNavigator({
  SignIn: SignInScreen,
  ForgotPassword: ForgotPasswordScreen,
})

const AppNavigator = createSwitchNavigator({
  Auth: AuthenticationNavigator,
  Home: HomeScreen,
})

解決しました。

Ubuntu 16.04 LTSにNode.jsの環境を作るメモ。
(Ubuntu 18.04でもこの方法でOKでした)
今回はnvmを使った構築手順です。
nvmはNode.jsのダウンロードとバージョン管理ができます。
なお、以下のコマンドは基本的にrootで書いているので、使用の際には適宜sudoを付与ください。

使用するライブラリをインストール

# apt-get install build-essential libssl-dev
# apt-get install curl

NVMのインストール

nvmはnodeのバージョンを管理するソフトウェアです。
これを使ってnodeをインストールします。

# curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
# source ~/.bashrc

これでnvmコマンドが使えるようになります。

ダウンロードできるNodeのバージョンは以下のコマンドで確認できます。

# nvm ls-remote

バージョン番号を指定してNodeのインストールを行うには以下のようにします。(バージョン10.6.0の場合)

# nvm install v10.6.0

ひとつだけの場合はすぐNodeが使用できるようになりますが、複数のバージョンをインストールして切り替えて使用することも可能です。

使いたいNodeのバージョンを切り替える場合は以下のコマンドです。

# nvm use v10.6.0

現在インストール済みのNodeのバージョンなどの情報は以下のコマンドで確認できます。

# nvm ls

nvmおよび現在使用しているNodeのバージョンは以下のコマンドでそれぞれ確認できます。

# nvm --version
# node -v