Electronでニコ動のコメントみたいにTweetを表示するアプリつくった
知り合いのエンジニア(rayさん)がGTK3で作っていた nsd というのがあるんですが、結構いい感じなのでMacでも動くものが欲しかった。 Electronで似たようなことが出来ないか調べてみると、GTK3とかに比べて簡単にできそうだったので作ってみた。
ポイントは：
- 常に最前面にtweetが表示される
- マウスのイベントが後ろに透過する
- コーディングだったり他の作業が問題なく出来る
今度、カンファレンスや勉強会で話す時にハッシュタグ表示してみます。
ロゴも描いてみた
マウスのイベントの透過について
rayさんのnsdとかの場合、tweetのテキストを囲うだけのとても小さくて透明なウィンドウを用意していたらしい。こうすることで文字以外のところをクリックすると後ろにマウスのクリックイベントとかが通る仕組み。 透明なウィンドウを作れるGUIツールキットはたくさんあるみたいなのですが、Electronは簡単にマウスのイベントを透過できた。
ハマったところとか参考にした記事
- Electronは半年以上前に、Hello Worldをしただけだったので、今回もQuickStartからやり直した。
- 透明なウィンドウのままで、開発者ツールを使わないとデバッグがかなり難しかった。
- 開発者ツールを開く処理だったりを、もうちょっとカジュアルに環境変数とかで変更できるようにしておくとスムーズだったかも
- Electronでデスクトップいっぱいに雪を降らせるアプリを作る - Qiita
- これを見つけたので今回やってみることにしました。感謝！透過の設定やマウスを通す設定を真似させていただきました。
- tweetのデータをフロントに送る方法で悩んでいたら、 electron/ipc-renderer.md at master · electron/electron · GitHub というのをみつけた。
- とても簡単にIPCができる
- canvasの文字がぼやけて困っていたのですが、canvas自体の解像度(幅と高さ)を調整しないといけなかったみたいです。
- devicePixelRatioというものを教えていただけました。ありがとうございます！
@c_bata_ devicePixelRatio 見てないからじゃないでしょうか？ canvas は retina ディスプレイとか考慮してくれないので，自前で倍率調整する必要があると思います．
— ドッグ (@Linda_pp) October 11, 2016
あとやりたいこと
自分が使うには、最低限欲しい機能が全部揃ったのでとりあえず満足。 設定のダイアログとかを追加して、そこから認証してAccess Tokenとったりハッシュタグ指定できるようにしたい。 Issue にあげてるので、おもしろそうと思った方はぜひPRお願いします。
追記
とりあえずMacの右上のバーに常駐させて、色々と設定画面とかも用意中。
