社内勉強会でこないだ作ったWebSocket+カメラを使ったアプリケーションについて発表してきました。
www.slideshare.net
Herokuにデプロイしてデモをやりましたが、自分が試したとき以上に遅延がおっきくて、接続数にも依存してそうだなといった感じでした。
次は何やろうかな、、
社内勉強会でこないだ作ったWebSocket+カメラを使ったアプリケーションについて発表してきました。
www.slideshare.net
Herokuにデプロイしてデモをやりましたが、自分が試したとき以上に遅延がおっきくて、接続数にも依存してそうだなといった感じでした。
次は何やろうかな、、
Rocket.Chatでチャンネルが複数あったときに、発言先のチャンネルを間違えてしまうといったことがあります(少なくとも自分は)。結構恥ずかしいです。
発言する際に、どのチャンネルなのかもっと識別しやすいようにできれば間違え減らせるのでは!ということで、チャンネル毎にデザインを変えてみます。
まずはチャンネル毎にid/class属性が振られているか確認します。最初はチャンネル名で検索して見つからなかったのでこれは残念ながら、、と思いましたが、チャンネル名とは別の識別子で振られていました。
下記の例のchat-window-ZC2nnBTZTPLBTLPKw
といったように、selection
要素のid
属性にchat-window-
+ 識別子といった形で振られていました。識別子のルールはまったくわからなかったので、実際にデベロッパーツールなどで振られているid
を確認するのが良いかと思います。
チャンネル毎に識別できる情報が振られているので、あとはCSSで自由にいじるだけです。
Rocket.Chatには、Custom CSSという機能があって、管理画面からCSSを追加することができます。これで全てのユーザに対してデザインを変えることができます。
chat-window-ZC2nnBTZTPLBTLPKw
に背景色で薄い黄色のグラデーションを付けてみます。
#chat-window-ZC2nnBTZTPLBTLPKw { background: linear-gradient(#ffffff, #ffff99); }
こんな感じになりました。これでどのチャンネルか判断する情報が増えるので、識別しやすくなりそうです。(色じゃなくて、画像背景にしたりとか、いろいろやり方はあると思います)
Custom CSSだと、全ユーザ向けなので、いろいろ調整が面倒かもしれません。管理者権限がないとそもそもいじれないし。ということで、手っ取り早く他人を気にせずに自分好みのデザインで!ってなると、ブラウザの拡張機能を使うのが良いでしょう。
Stylish を使って設定してみます。StylishはChrome、Firefoxともに提供されている拡張機能です。
Rocket.Chatが動作しているURLを適用先にして、先ほどと同様のCSSを書くだけです。
簡単ですね! これで間違えが減らせるはず、、、
もともと公開していたChrome版も、先日公開したFirefoxのWebExtension版と同じものにしました。
ソースコードも同一になります。
FirefoxのWebExtensionは、Chromeとの互換性を意識していて、chrome
ネームスペースもサポートしています。なので、chrome
ネームスペースを使うことによって、どちらでも動くコードで書くことができました。
これでメンテナンスが楽になりました。
最初は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を利用してカメラの映像を共有するアプリケーションを作ってみました。 Raspberry Piにカメラをつなげて監視カメラにしたり、ブラウザを通してお互いのカメラの映像を共有するようなことができます。
仕組みとしては、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にして、いつでも我が家の様子が見えるようにしようかと考えています。(家族に嫌がられなければ…)
Jacocoの0.8.0が2018年1月2日にリリースされ、待ち焦がれていたLombokで生成されたメソッドを除外する機能がはいりました。
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つが必要になります。
lombok.config
でlombok.addLombokGeneratedAnnotation = true
を設定する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
これで無事除外されました。
v1.0.2を公開しました。
変更点は下記の2件です。
Firefoxはアドオンのショートカットキー変更する機能が無いので、他と被ったら終わりです、、、