LoginSignup
1
2

More than 5 years have passed since last update.

Electronでデスクトップに浜風ちゃんを召喚した

Last updated at Posted at 2017-12-31

Electron

Electronというjs,htmlで簡単にデスクトップアプリを作れるパッケージを見つけたので使ってみた。
公式:https://electronjs.org/
スクリーンショット 2017-12-31 16.08.11.png

※node.jsが必要なのでインストールしておいてください。

electronをインストール
$ npm -g install electron-prebuilt

アプリ用ディレクトリを作成
$ mkdir electron
$ cd electron

package.jsonを生成
$ npm init -y

導入はこちらの記事を参考にした。
https://qiita.com/Quramy/items/a4be32769366cfe55778

まずはHelloWorldを表示してみる。

アプリのディレクトリで
$ electron .

スクリーンショット 2017-12-31 16.18.26.png

ウィンドウを透明にするには以下の処理をかく。

mainWindow = new BrowserWindow({
width: 100, 横幅
height: 100, 縦幅
transparent: true, 透明
frame: false}); フレームを表示するか

スクリーンショット 2017-12-31 16.22.12.png

透明になりました。

あとはhelloworldの文字を画像に置き換えるだけ。

以上!

超適当な記事ですが参考になればと思います。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2