便利な TweetDeck の Viewer を作ってみた #Electron

作業中も TweetDeck 見たいですよね？僕は見たいです。
そこで、作業の邪魔をしないで TweetDeck を見るための Viewer を作ってみました。

本体は GitHub/mini-deck に置いておきます。

これは何？

ちっちゃい TweetDeck を常に最前面に表示するアプリです。
（注意） 現在は macOS のみをサポートしています。

特徴

簡単導入
ミニサイズなウィンドウ
フレームレス
常に最前面表示
表示崩れなしで拡大縮小可
通常の TweetDeck と同じ使用感

使い方

アプリ版

GitHub/Releases から zip をダウンロードします
展開してアプリを起動するだけ！

CLI 起動版

レポジトリを git clone します
npm install で必要な package をインストールします
npm start で起動！

どうやったの？

TweetDeck の表示

TweetDeck 自体は Webview で表示させています。

index.html

<body>
  <div id="wrapper">
    <webview
      src="https://tweetdeck.com/">
    </webview>
  </div>
</body>

ウィンドウの諸々の設定

それ以外のウィンドウ設定は基本的に全て index.js で設定してます。
See: Electron | Browser Window

index.js

new BrowserWindow({
    // 中略
    width: 400,
    height: 200, // サイズを確定
    frame: false, // フレームを消す
    alwaysOnTop: true, // 常に最前面に表示
    titleBarStyle: 'customButtonOnHover', // ボタンを隠す
});

ちょっとした工夫

TweetDeck 内のリンクをクリックした際に Chrome などのブラウザで表示させるには openExternal(url) を使います。
See: Qiita | Electronn の内でリンクを開いたときに外部ブラウザで開く

main.js

function openExternalUrl(event){
  const url = event.url;
  if (url.startsWith('http://') || url.startsWith('https://')) {
    shell.openExternal(url);
  }
};

実は Electron の Frameless Window はデフォルトでドラッグが制限されています。なので CSS 側でドラッグを許可する必要があります。
See: Electron | Frameless Window#Draggable region

style.css

body{
  /* 中略 */
  -webkit-app-region: drag;
}

便利な TweetDeck の Viewer を作ってみた