Electronでスクリーンショットを即ツイートするための何かを作った話
この記事は FUN Advent Calendar 2016 10日目の記事（になる予定だったもの）です。
本当に申し訳ない。
言い訳
SECCON 2016に出てました。チームはHarekazeに誘って頂いて、1300ptで61位でした。私はVoIPで音声聞き取ったのが全盛期でした。もっと精進したい。
本題
私は3年前ぐらいに今使用しているMacbook Pro Retina 13を購入しました。（ちょうど推薦合格したあとだったので、本当にこれぐらいの時期だったと思います）
その頃の私はターミナルの存在すら知りませんでしたが、購入したばかりのMBPを色々といじってみていました。その中で感動した機能の一つが、スクリーンショットです。もちろんWindowsでもスクリーンショットは撮れますが、Macのスクリーンショット機能はより強力に感じました。
Command+Shift+3で全体、Command+Shift+4で矩形選択、矩形選択中にSpaceでウィンドウ単位で撮影可能。いつでも撮りたいときにすぐ撮れて、煩わしさを感じさせません。
しかし、それ故にちょっと残念だなと思うことがありました。
スクリーンショットを撮影した後にすること、それは9割Twitterです。（脳内調べ）
せっかくスクリーンショットをストレスなく撮影できるのに、その後、Twitterクライアントを開き、「Add Image」のようなボタンを押して、スクリーンショットディレクトリを探し、目当てのスクリーンショットを探すという作業が入ってしまいます。
面倒くさいなあと思った私は、3年越しにそれを解消する何かを作ることにしました。
これです↓
どうにかいい感じのがとれた… pic.twitter.com/9Sb1tT2Tx0
— げん【万里小路 楓】 (@neglect_yp) 2016年12月12日
ちょっとわかりにくいかもしれませんが、上のメニューバーにあるオレンジ色のアイコンが私の作ったものです。アイコンをクリックすると、ツイートを入力するテキストエリアと、最新のスクリーンショットを表示します。GIFではマウスが動いていますが、ウィンドウが開いた時点でテキストエリアにフォーカスが移るようにしたので、そのままツイートを入力できます。
ツイートは、よくある感じで、(Ctrl|Command)+Enterで送信することができます。ツイートを送信したらそのままウィンドウも隠れます。
つまり、以前は
のような手順を踏んでいたのが、
- アイコンをクリック
- ツイートを入力
- (Ctrl|Command)+Enter
で済むようになったわけです！
あ、一応名前もつけたんですが、ss-fast-tweetといいます。
技術的な話
Electronを使って実装しました。Electronを知らない人は、この辺を読むと詳しく書かれています。
Electronでアプリケーションを作ってみよう - Qiita
ざっくりいうと、メインプロセスとレンダラプロセスという2つのプロセスで成り立っていて、メインプロセスはNode.js、レンダラプロセスはChromiumが動いています。この2つのプロセスでプロセス間通信を行い、簡単にGUIアプリケーションが作れるよ！という感じでしょうか。
HTMLやCSS、JavaScriptなどの知識がそのまま使えるので、Web系やってたけどネイティブアプリ作りたいって人にはかなりオススメです。
で、さっきのss-fast-tweetは、
ウィンドウが表示されるのをトリガーにして、メインプロセスで最新のスクリーンショットのパスを取得し、レンダラプロセスに渡す。
↓
レンダラプロセスは、imgタグのsrc属性を渡されたパスに書き換える。
(Ctrl|Command)+Enterが押されると、textareaの内容をメインプロセスに渡す。
↓
メインプロセスがツイートを行う。
雑に書くとこんな処理をしています。
まとまらない
普段私はあんまり何か作ろうとか思わないんですよね。確かに、自動化したいなと思うことはあるんですが、自動化する手間すらも面倒くさいと感じてしまい…という感じです。
でも、Electronを使ってみたら結構さっくり作れたので、これからも何か作るかもしれないです。
実は、色々と忙しかったせいで、Electronを触ったのは実質3~5日ぐらいだと思います。 Node.jsとかも初だったので、完全に学びながらでしたが、ある程度のものは出来ました（少なくとも私は満足しています）。 この手軽さもElectronの魅力の一つかなと思います。
Processingよりも本格的なアプリを作りたい1年生とかにもいいんじゃないでしょうか。
まとめる
Electronはいいぞ！！
追記
一応GitHubにリポジトリを作りました github.com
