カラーモード

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"]

MySQLのSTRICT_TRANS_TABLESをオフにする

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)

とりあえずカット

ある吹奏楽の演奏会の録音をそれぞれの曲ごとのトラックへとカットする作業をやりました。とりあえず曲開始(最初の音が入った瞬間)の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.04LTSにNode.js実行環境を用意する

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

iframe内に別ページを表示させてフレーム付きページのようなものを作ろうとしています。
iframe内に表示させるページをそのまま表示するとうまく動作するjQueryが、iframe内に表示させると、scroll関連イベントが発火しない問題に悩まされています。
ChromeやIE、デスクトップ版のSafariでは想定通りに動作するのですが、iPhone Safariのみうまく動かないのです。

調べてみるとiframe内の要素はscrollTopが常に0でイベントも発生しないことから、iPhoneにとってはスクロールもしていないみたいです。
どうやら、iOS Safariでは親ページ基準でスクロール判定されている模様。
iframe自体はCSSでウィンドウサイズぴったりに合わせているので、中身だけがスクロールしていて、iframeそのものはスクロールしていないということなのでしょう。

解決策としてはiframeの外から要素指定してやることらしいですが、まだうまくいっていません…。
もう少しいろいろ試してみます。

audioタグを使ったオリジナルプレイヤーの作り方

前回、audioタグの一番簡単な使い方について書きましたが、やはりブラウザによって表示が異なるのはデザインの観点でも困りますね。
今回はデザインを統一するためにも、オリジナルのコントローラーを作成する方法について書いていけたらな、と思います。

ところで、プレイヤー？プレーヤー？
どっちが正しいんでしょ。
Google検索によると

• プレイヤー: 約 58,600,000 件
• プレーヤー: 約 63,000,000 件

でプレーヤーの方が多いですが、Wikipediaの表題はプレイヤーですね。
まぁどっちでもいいか。

audioタグの操作

さて、audioタグを操作するためには何が必要かというと、

• 再生、停止機能
• シーク機能
• 音量調整機能

ブラウザのデフォルトコントローラでできるのはこのあたりでしょうか。

この機能はHTMLやCSSだけでは制御できないので、これらをJavascriptに置き換えていきます。

HTML

まず、HTMLを用意します。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Music Player</title>
</head>
<body>
    <audio src="" onclick="" preload="none" style="display:none;"></audio>
</body>
</html>

audioタグはcontrols属性を追加しなければコントローラは表示されないと思いますが、CSSでdisplay:none;を設定しておけば、場所を取ることはないはず。

Javascriptを書く

そして、Javascriptを書いていきます。
場所はHTMLファイル内のどこでも大丈夫です。
最近は</body>の前に書くことが多いらしいですね。

<script type="text/javascript">
var media = document.getElementsByTagName("audio")[0];
var src = "media/sample.mp3";
media.src = src;
</script>

Javascriptは私もかじったようなものなので、詳細な説明は省きますが、
mediaという変数を用意して、そこにページ内の1つ目のaudio要素を格納しています。
これでmediaはインスタンスのような感じになります。
ページ内に複数のaudioタグがある場合は、先頭から番号が振られ、末尾の[0]の数字で指定できます。
配列と同じなので、最初は0です。

HTML内のaudioタグにはsrc属性を指定していないので、このままでは再生できません。
ここでは、Javascript内で変数srcを用意し、そこにメディアファイルへのパス(URL)を格納します。
それをそのまま、media.srcに指定します。

再生と停止のためのJavascript

次に再生、停止するための関数を用意します。

<script type="text/javascript">
function play() {
    media.play();
}
function pause() {
    media.pause();
}
function stop() {
    pause();
    media.currentTime = 0;
}
function start() {
    if(!media.paused){
        pause();
    }else{
        play();
    }
}
</script>

mediaオブジェクトのメソッドを呼び出すだけの関数です。
そのまま、playメソッドは再生、pauseメソッドは再生中のファイルを一時停止します。
再生を停止するには、pause処理をしたあと、再生位置(currentTime)を0にすれば良いです。

コントローラの実装

これを制御するコントローラを作ります。
なんでもいいのですが、今回はdivにします。
div要素をクリックしたときに各関数を呼び出せばOKです。

<div id="play" onclick="start();">再生</div>
<div id="stop" onclick="stop();">停止</div>

div {
    display: inline-block;
    width: 50px;
    height: 50px;
}

これが再生、停止ボタンになります。
再生ボタンを押すと再生されます。
再生中は一時停止ボタンとして利用できます。
また、play()、pause()、stop()の各関数内で、divの内容を書き換えることで、より操作性が上がると思います。

document.getElementById('play').innerHTML = '一時停止';

コントローラの位置やサイズなどは自由に設定できます。

まとめ

今回は簡易コントローラの実装方法について書いてきました。
ここまでをまとめたHTMLです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Music Player</title>
    <style>
    div {
        display: inline-block;
        width: 50px;
        height: 50px;
    }
    </style>
</head>
<body>
    <audio src="" onclick="" preload="none" style="display:none;"></audio>
    <div id="play" onclick="start();">再生</div>
    <div id="stop" onclick="stop();">停止</div>
<script type="text/javascript">
var media = document.getElementsByTagName("audio")[0];
var src = "music/003.mp3";
media.src = src;

function play() {
    media.play();
    document.getElementById('play').innerHTML = '一時停止';
}
function pause() {
    media.pause();
    document.getElementById('play').innerHTML = '再生';
}
function stop() {
    pause();
    media.currentTime = 0;
}
function start() {
    if(!media.paused){
        pause();
    }else{
        play();
    }
}
</script>
</body>
</html>

これでとりあえず、音楽ファイルの再生と停止はできるようになりました。
ですがこれだけではメディアプレイヤーのコントローラとして心許ないので、次回はもう少し作りこんでいけたらいいなと思います。