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にして、いつでも我が家の様子が見えるようにしようかと考えています。(家族に嫌がられなければ…)

Lombokで生成されたメソッドをJacocoのカバレッジから除外する

[programming] Java

Jacocoの0.8.0が2018年1月2日にリリースされ、待ち焦がれていたLombokで生成されたメソッドを除外する機能がはいりました。

  • JaCoCo - Change History

    Methods annotated with @lombok.Generated to better integrate with Lombok >= 1.16.14. Initial analysis and contribution by Rüdiger zu Dohna (GitHub #513).

なお、他にも様々なフィルタが実装(または実装予定)されています。

こういった機能を使うことによって、必要な範囲に絞ったカバレッジが把握しやすくなると思います。

除外方法

Jacoco側では、@lombok.Generatedが付いているメソッドを一律対象外にするといった実装となっており、Jacoco側で何か設定で切り替えるといったものではありませんでした。

@lombok.Generatedは、Lombokの設定lombok.configで付与することになります。デフォルトでは付与されません。 lombok.addLombokGeneratedAnnotation = trueを設定することによって付与されるようになります。

まとめると、、除外のために下記の2つが必要になります。

  • Jacocoのバージョンを 0.8.0 以上にする
  • lombok.configでlombok.addLombokGeneratedAnnotation = trueを設定する

Gradleでの設定例

Gradleプロジェクトで試してみました。コードは一式は下記にあります。

GradleでJacocoを使う場合には、build.gradleにapply plugin: 'jacoco'を指定するだけですが、2018年1月6日時点だとバージョン0.7.6が使われてしまうので、明示的にJacocoのバージョンを指定する必要があります。

apply plugin: 'java'
apply plugin: 'jacoco'

repositories { jcenter() }

dependencies {
    compileOnly 'org.projectlombok:lombok:1.16.18'
    testCompile 'junit:junit:4.12'
    testCompile 'org.assertj:assertj-core:3.9.0'
}

jacoco {
    toolVersion = "0.8.0"
}

lombok.configは下記のように記載します。config.stopBubbling = trueはプロジェクトのルートであることをLombokに教えるための設定です。(これ以上親ディレクトリを辿って設定ファイルを探さないように)

config.stopBubbling = true
lombok.addLombokGeneratedAnnotation = true

これで無事除外されました。