2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

"常に最前面でブラウザを表示したい"をpennywiseで解決する

Posted at

こんな時ありませんか?

  • youtubeでチューつリアルを見ながらコードを書きたい、でもIDEは全画面で開いていたい。
  • とにかくいっぱいコピペする作業がある。
  • twitterを横目に見ないと気が気でならない。

そういった方々にオススメのOSSがあるのでご紹介です。

Pennywiseとは

「Pennywise」というElectronで作られたWEB ViewアプリのOSSです。
どこかのホラー映画で聞いたことのある名前とアイコンなのが印象的です。

Repogitry: https://github.com/kamranahmedse/pennywise

Pennywiseは独立したデスクトップアプリケーションとして起動し、WEB Viewとして機能します。
ただ、他のWEB Viewアプリと異なる点がいくつかあります。
以下、ご紹介していきます。

Pennywiseの特徴

  • 常にウィンドウの最前面に位置することができる
  • 透過度を変更できる
  • yarnhomebrew で簡単導入
  • Windows, Mac, Linux対応
  • リサイズ可能

導入

実際に動かしてみます。
導入方法としては、 yarn でのインストールと、 MacOSであれば homebrew でのインストールが可能です。

homebrewの場合

$ brew cask install pennywise

yarnの場合

git clone https://github.com/kamranahmedse/pennywise.git
cd pennywise
yarn install
yarn start

homebrewとしてインストールすると、アプリケーションとして追加され、ピエロのアイコンとして起動します。
一方で、yarnで実行する場合は、Electronアプリとして起動します。

スクリーンショット 2019-01-10 2.08.33.png

右がhomebrewでインストールしたもの、左がyarnでelectronとして実行するもの

これらを立ち上げると下記のような画面が立ち上がります。

スクリーンショット 2019-01-10 2.19.08.png

このpennywiseの画面は、他のウィンドウにフォーカスを当てても、後ろに回ることはなく、常に最前面で表示されます。

また、URLを入力後、WEBページを見る際に透過度を変更することが可能です。

不透明度 100%

スクリーンショット 2019-01-10 2.22.10.png

不透明度 50%

スクリーンショット 2019-01-10 2.23.27.png

不透明度はGUIで変更できますが、ショートカットキーでも変更可能です。

ショートカットキー

ショートカット 説明
Cmd/Ctrl + L URL欄にフォーカス
Cmd/Ctrl + D デタッチモードになる
(Dockアイコンクリックで解除)
Cmd/Ctrl + Shift + D ナビバーを表示
Cmd/Ctrl + Shift + Up 不透明度を上げる
Cmd/Ctrl + Shift + Down 不透明度を下げる
Cmd/Ctrl + Alt + I デベロッパーツールを開く

終わりに

インストールも簡単で、使ってみた感触では軽量なため使いやすかったです。
ウィンドウ間を往復する作業や動画を見ながらの学習、Twitterを眺める日常には便利そうです。
ただ、youtubeやTwitterの見過ぎにならないように注意が必要ですね。

2
1
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
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?