RUANN - SCRAMBLE 14

[music]

ほんとはライブ行ったあとに書きたかったのだけど、1月、3月、4月とことごとくチャンスを逃した(都合がつかなかったり、当選しなかったり、、)ので、いまのうちに書いておきます。

【Amazon.co.jp限定】SCRAMBLE 14 (18cm×18cmW紙ジャケット豪華パッケージ)(ピクチャーCD+20Pフォトブック付)

【Amazon.co.jp限定】SCRAMBLE 14 (18cm×18cmW紙ジャケット豪華パッケージ)(ピクチャーCD+20Pフォトブック付)

2018年3月6日にリリースされたRUANN(大山琉杏)の初のCDです。今までもSpotifyなどでオリジナルの楽曲を配信していましたが、CDとしては初となります。

収録曲は5曲で、それぞれが全然違った雰囲気の曲で、とても魅力的なEPです。

1曲目のGET THE GLORYはアップテンポな元気な曲で、若さあふれる！って感じで、2曲目の I AM STANDING はちょっとしっとりした感じ。どちらもタイアップ曲で、この2曲は先行でデジタルシングルとしてリリースされていた曲です。

3曲目のThe beautiful girl is about u - TeddyLoid ver. - は以前から配信されていた曲をアレンジ変えてちょっとテクノポップ？っぽくした感じで、4曲目のJennyは、アコースティックなギターに英語の歌詞がすごく心地良くて、一番好きな曲です。洋楽アルバムにある1曲だといわれても違和感ないくらい。最後の2月14日午後3時45分もアコースティックでしっとりとした声で歌い上げてます。

まだ若干14歳だとか、英語、韓国語をしゃべれるとか、ギターやピアノ、ダンスにもたけているとか、ONE OK ROCKのTakaに認められていてライブにゲスト出演したとか、いろいろ語れるポイントがありますが、とにかく声が好きです。特に英語の歌詞を力強く歌うときの声が好きです。

最初に知ったのも、娘がアコースティックギターでテイラースイフトのWe Are Never Ever Getting Back Togetherを練習するってことで、YouTubeで参考になる動画探していて、下記の動画を見たのが最初でした。

で、気がついたら、YouTubeにあがっているカバー曲を全部聴いてました。洋楽好きな人はぜったいはまると思います。

まだ若いのにすごい！とかじゃなく、年齢関係なく魅力的なシンガーソングライターなので、これからもとても楽しみです。あと8月のライブのチケットをとったので、初めて生で聴けるのをこれから楽しみにしています。

POPSPRING 2018 (2017年3月24日@幕張メッセ)

[music]

POPSPRING 2018 幕張公演に、嫁さんと2人で参加してきました。昨年に引き続きの参加となります。

今年もGOLDチケットだったのですが、昨年よりさらにエリアが拡大していて、余裕を持って近くで見ることができました。

タイムテーブル

ラインナップも(個人的には)昨年よりさらに良かったと思いました。Liam Payne(リアム・ペイン)とLittle Mix(リトル・ミックス)だけでも、十分すぎますよね。

POPSPRINGタイムテーブル | POPSPRING 2018 より

ライブ内容

まずは Poppy(ポッピー) で始まりました。ダンサー含めきゃりーぱみゅぱみゅに似ているな、、と思いました。とにかく可愛かった。こういったデジタルな感じの好きです。

続いてRuel(ルーエル)。歌がうまくて、イケメンで、背も高い、しかもまだ15歳って、、いろいろうらやましくなりました。生で聴くとさらに好きになるアーティストだと思います。

PRETTYMUCH(プリティマッチ)は、今回POPSPRINGに来るということで初めて聴いて、とても好きになったアーティストです。Teacher大好き。

みんなほんと楽しそうにパフォーマンスするし、さらに好きになりました。歌もうまいし、これからもっと人気出るだろうなぁ。

Sofia Carson(ソフィア・カーソン)。

きゃりーぱみゅぱみゅ。今回唯一の日本人でしたが、何気にすごい楽しみにしていました。

実際ヒット曲ばっかりでとても楽しかったです。某CMの影響もあってか、ファッションモンスターのダンスが頭から離れません。

SUPERFRUIT(スーパーフルーツ)。Mitchの声すごいなぁ。

Nick Jonas(ニック・ジョナス)。昨年兄さん(ジョー)も来てたね。

待ちにまったLiam Payne(リアム・ペイン)。どれも好きな曲なんですよね。というか声が好き。

タイムテーブルの時間みて、持ち曲で足りないよな、、って思っていたら、Ed SheeranやCharlie Puthのカバーしたり、1D時代の曲をやってくれました。

Little Mix(リトル・ミックス)。とりを飾るだけあって、圧巻のパフォーマンスでした。あのダンスで、あそこまで歌えるなんてすごい。

ライブで観て、さらに好きになりました。また来日してくれたら観にいきたいです。

ほんと最高な一日になりました。来年も楽しみです。

社内勉強会で「WebSocketでカメラの映像を共有してみた」というタイトルで発表しました

[programming]

社内勉強会でこないだ作ったWebSocket＋カメラを使ったアプリケーションについて発表してきました。

www.slideshare.net

Herokuにデプロイしてデモをやりましたが、自分が試したとき以上に遅延がおっきくて、接続数にも依存してそうだなといった感じでした。

次は何やろうかな、、

Rocket.Chatでチャンネル毎にデザインを変える

[programming]

Rocket.Chatでチャンネルが複数あったときに、発言先のチャンネルを間違えてしまうといったことがあります(少なくとも自分は)。結構恥ずかしいです。

発言する際に、どのチャンネルなのかもっと識別しやすいようにできれば間違え減らせるのでは！ということで、チャンネル毎にデザインを変えてみます。

Rocket.Chatの画面構成

まずはチャンネル毎にid/class属性が振られているか確認します。最初はチャンネル名で検索して見つからなかったのでこれは残念ながら、、と思いましたが、チャンネル名とは別の識別子で振られていました。 下記の例のchat-window-ZC2nnBTZTPLBTLPKwといったように、selection要素のid属性にchat-window- ＋ 識別子といった形で振られていました。識別子のルールはまったくわからなかったので、実際にデベロッパーツールなどで振られているidを確認するのが良いかと思います。

f:id:onozaty:20180204123552p:plain

デザインを変える

チャンネル毎に識別できる情報が振られているので、あとはCSSで自由にいじるだけです。

Custom CSSで全ユーザ向けに

Rocket.Chatには、Custom CSSという機能があって、管理画面からCSSを追加することができます。これで全てのユーザに対してデザインを変えることができます。

f:id:onozaty:20180204150551p:plain

chat-window-ZC2nnBTZTPLBTLPKw に背景色で薄い黄色のグラデーションを付けてみます。

#chat-window-ZC2nnBTZTPLBTLPKw {
  background: linear-gradient(#ffffff, #ffff99);
}

こんな感じになりました。これでどのチャンネルか判断する情報が増えるので、識別しやすくなりそうです。(色じゃなくて、画像背景にしたりとか、いろいろやり方はあると思います)

f:id:onozaty:20180204150841p:plain

ブラウザ拡張機能を使って自分だけに

Custom CSSだと、全ユーザ向けなので、いろいろ調整が面倒かもしれません。管理者権限がないとそもそもいじれないし。ということで、手っ取り早く他人を気にせずに自分好みのデザインで！ってなると、ブラウザの拡張機能を使うのが良いでしょう。

Stylish を使って設定してみます。StylishはChrome、Firefoxともに提供されている拡張機能です。

Rocket.Chatが動作しているURLを適用先にして、先ほどと同様のCSSを書くだけです。

f:id:onozaty:20180204153604p:plain

簡単ですね！ これで間違えが減らせるはず、、、

ブラウザ拡張機能 Online Bookmark Incremental Search を Firefox と Chrome で同一のものを提供するようにしました

[programming] Firefox Google Chrome

もともと公開していたChrome版も、先日公開したFirefoxのWebExtension版と同じものにしました。

ソースコードも同一になります。

FirefoxのWebExtensionは、Chromeとの互換性を意識していて、chromeネームスペースもサポートしています。なので、chromeネームスペースを使うことによって、どちらでも動くコードで書くことができました。

これでメンテナンスが楽になりました。

XPathで a を祖先に持たない b を選択する

[programming]

最初はXPath2.0のexcept使えないと無理じゃないか？って思っていたけど、よくよく考えたらそんなことなかったのでメモ。(きっとまた忘れると思うので、、、)

たとえば下記のようなXMLがあったとして

<root>
  <a>
    <c>
      <b />
    </c>
  </a>
  <c>
    <b />
  </c>
</root>

aを祖先に持たないbだけを取りたいってときは、XPathは下記のように書ける。

//b[not(ancestor::a)]

ancestorはコンテキストノードの祖先の集合なので、そこにaが無いもの(not)といった指定になる。

WebSocketでカメラの映像を共有する(Shared Camera with WebSocket)

[programming]

WebSocketを利用してカメラの映像を共有するアプリケーションを作ってみました。 Raspberry Piにカメラをつなげて監視カメラにしたり、ブラウザを通してお互いのカメラの映像を共有するようなことができます。

https://github.com/onozaty/shared-camera-websocket/blob/master/screenshot.png?raw=true

仕組みとしては、WebSocketのバイナリメッセージで、画像をブロードキャストするような感じです。通信部分では特に難しいことはしてないです。Raspberry Piのカメラ周りでは嵌りましたが、、

雑話

使い方や実装内容などは、GitHubの方を見てもらえば良いかと思いますので、ここでは作り始めたきっかけとかを。

WebSocketでバイナリも送れるってのを知ったときに、画像を連続して送りつけることによって動画っぽくできるのではと思ったのですが、ずっと試せないままだったので、今年こそはということで作り始めました。結果として、転送間隔短くすれば、それなりに動画っぽく見えなくないものが出来上がりました。

カメラからの画像取得は、ブラウザでMediaDevices.getUserMediaを通じて取るものを最初作りました。WebRTC周りを以前調べていたことがあって、カメラへのアクセスはあたりがついていたので、特に嵌ることも無くさくっと作れました。で、その次にRaspberry PiにつなげたUSBカメラから画像が取りたくて、Node.js(v4l2camera)、Python(+OpenCV)で書きましたが、自分の実装が悪いのか、どれも連続して画像を取る際に思った以上にパフォーマンスが出ないこともあって、最終的にはJavaで下記のライブラリを使って作りました。

これでも遅い(1秒くらい遅延を感じる)のですが、どうにか見えるレベルにはなりました。また、このライブラリを使ったことによって、同じコードでRaspberry Pi、Windows、Macのどれでも動くクライアントになりました。カメラ周りでOSの差を吸収してくれるのはとても便利で助かりました。

ゆくゆくは、サーバ側のアプリケーションをHerokuあたりに乗せて、クライアントを自宅のRaspberry Piにして、いつでも我が家の様子が見えるようにしようかと考えています。(家族に嫌がられなければ…)