Help us understand the problem. What is going on with this article?

Electron Vue + Puppeteerで作る便利デスクトップApp

More than 1 year has passed since last update.

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

何を作ったの

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

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

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

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

ちなみにここからダウンロードできます
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

isy
六本木にある会社で働いてるらしいよ
dmmcom
総合エンタテイメントサイト「DMM.com」を運営。会員数は2,900万人を突破。動画配信、FX、英会話、ゲーム、太陽光発電、3Dプリンタなど40以上のサービスを展開。沖縄での水族館事業参入、ベルギーでのサッカークラブ経営など、様々な事業を手掛ける。また2018年より若手起業家の支援を強化、「DMM VENTURES」による出資や、M&Aなどを積極的に展開している。
https://dmm-corp.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした