こんにちは！HALアドベントカレンダーの10日目を担当する名古屋のしがない学生です。
へっぽこエンジニアの自分でもElectron Vueを使うことで2,3日でデスクトップアプリを作れたのでその素晴らしさを共有したいと思います。

何を作ったの

portanというキュートな名前のWebviewアプリを作りました。

「なんだWebviewか」
と今、何人かが思ったでしょう。

portanは常にオントップでWebページを表示することができます！
Qiitaとか誰ぞやのブログを見ながらコードを書きたいときとかありますが、MacやWindowsだとフルスクリーン状態で画面分割するのは標準では2分割が限界です。~~多分..~~
そんな時にちょっと小窓で見たいなんて時に便利で、portanは何画面でも出せます！~~検証してないけど~~

動画もフルスクリーンで表示できますが、それはpicture in pictureを使ったほうが便利ですね
Skypeみたいなやつです。
↓こんな感じ

ちなみにここからダウンロードできます
portan - Always on top Webview

どんなもの使ったのか

宣伝はこのくらいにしてどんな技術を使ったのかに入りたいと思います。

Electron Vue

Vue.js によるデスクトップアプリを作る時に便利な
Electronのボイラープレートです。

VueでElectronが使えるので書きやすいです！

ハマったポイント

Electron Vueには直接関係ありませんが、Webviewを常時トップの表示させる部分で少しハマりました
公式ドキュメントを見て下記のような感じで行けるかなーと思ったら、フルスクリーンの画面にはWebviewを表示させることができませんでした。

 win.setAlwaysOnTop(true);
 win.setVisibleOnAllWorkspaces(true);

色々と調べた結果こんな感じだと行けるようです

app.dock.hide();
win.setAlwaysOnTop(true, 'floating');
win.setVisibleOnAllWorkspaces(true);
win.setFullScreenable(false);

app.dock.hideをしないといけないのはちょっと謎ですね。いい方法を知っている方は教えていただきたいです。

Puppeteer

PuppeteerはHeadless ChromeをNode.jsから簡単に操作できるやつです
今回は表示したWebサイトのfaviconとページタイトルを盗む取得するために使用してます。

ElectronのWebcontentsというAPIでもタイトルとかは引っ張って来れますが今後の機能追加とPuppeteerを使って見たかったので使いました

NeDB

NeDBはJavaScriptで使用できるデータベースです。
WebViewの表示履歴を保存するのに使ってます。

mongodbを使ったことがある方なら問題なく使えると思います
こんな感じで検索できる↓

db.find({ ○○: ●● })

この記事が非常に参考になりました。ありがたいです
https://qiita.com/tinymouse/items/0731eef4aebf2779bd0b

おわりに

いちおうオープンソースなのでマサカリ大歓迎です。
スターは大大歓迎です😊
https://github.com/isy/portan

Twitterもやってます
https://twitter.com/isytter