mac 버전 TwitterDeck의 메뉴 바를 느낌으로 만듭니다.

TweetDeck의 타이틀 바를 이번 네이티브 앱처럼

소개

macOS판 Twitter 앱이 폐지된다는 넷의 기사를 받아, 클라이언트로서 TwitterDeck를 대신 도입했지만 타이틀 바의 외형이 디자인적으로 통합되어 있지 않고, Twitter 앱이 보다 본 목적에 뛰어나다 처럼 느꼈다.



그래서 아래와 같은 외형으로 바꿀 방법이 없는지 조사한 결과, TwitterDeck는 온라인으로 제공되고 있어 동일한 UI를 간단하게 이용할 수 있었기 때문에, TweetDeck의 타이틀 바를 보다 현대적인 외형에 접근하기 위해 에, 어플리화(?)를 행했다.

방법

Electron에서 https://tweetdeck.twitter.com/를 표시하고 제목 표시 줄의 모양을 변경합니다.

Electron 설치

electron 시작. 환경 구축 ~ Hello World까지
이 기사를 참고로 환경 구축

코드 작성

웹페이지를 표시하는 것만이므로 어렵지 않다.
조금 CSS를 조정할 필요가 있었지만, 기본적으로는 표시하는 것만으로 끝났다.

const { app, Menu, BrowserWindow } = require('electron')
let mainWindow

function createMenu() {
  const menuTemplate = [
    {
      label: 'TweetDeck',
      submenu: [
        {
          label: 'Quit',
          accelerator: 'Cmd+Q',
          click() {
            app.quit()
          }
        }
      ]
    },
    {
      label: 'Edit',
      submenu: [
        { label: 'Undo', accelerator: 'CmdOrCtrl+Z', selector: 'undo:' },
        { label: 'Redo', accelerator: 'Shift+CmdOrCtrl+Z', selector: 'redo:' },
        { type: 'separator' },
        { label: 'Cut', accelerator: 'CmdOrCtrl+X', selector: 'cut:' },
        { label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
        { label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' },
        {
          label: 'Select All',
          accelerator: 'CmdOrCtrl+A',
          selector: 'selectAll:'
        }
      ]
    },
    {
      label: 'View',
      submenu: [
        {
          label: 'Reload',
          accelerator: 'CmdOrCtrl+R',
          click(item, focusedWindow) {
            if (focusedWindow) focusedWindow.reload()
          }
        },
        {
          label: 'Toggle Developer Tools',
          accelerator:
            process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
          click(item, focusWindow) {
            if (focusWindow) {
              focusWindow.webContents.toggleDevTools()
            }
          }
        },
        { type: 'separator' },
        { role: 'resetzoom' },
        { role: 'zoomin' },
        { role: 'zoomout' }
      ]
    }
  ]
  const menu = Menu.buildFromTemplate(menuTemplate)
  Menu.setApplicationMenu(menu)
}

app.on('ready', function() {
  mainWindow = new BrowserWindow({
    width: 1100,
    height: 800,
    useContentSize: true,
    title: 'TweetDeck',
    titleBarStyle: 'hiddenInset',
    icon: __dirname + '/icon/icon.png',
    webPreferences: {
      nodeIntegration: false,
      sandbox: true
    }
  })

  mainWindow.loadURL('https://tweetdeck.twitter.com/')
  mainWindow.webContents.on('dom-ready', function() {
    mainWindow.webContents.insertCSS(
      `
      .is-condensed .attach-compose-buttons .tweet-button {
          width: 57px;
      }
      .is-condensed .app-content {
          left: 78px;
      }
      .column-navigator {
          top: 155px;
      }
      .app-header.is-condensed .app-header-inner {
          width: 50px;
          padding: 36px 7px 3px 7px;
          box-sizing: border-box;
          margin: 0 14px;
      }
      .is-condensed .app-header {
          width: 78px;
      }
  `.replace(/;/g, '!important;')
    )
  })
  mainWindow.on('closed', function() {
    mainWindow = null
  })
  createMenu()
})

요세미티 스타일 아이콘을 쓰는 사람

김에 아이콘도 만든다.

Yosemite 스타일의 아이콘을 쉽게 만들 수있는 도구를 만들었습니다. 로 만든 이것을 사용하면서
Electron을 찾는 일상 에서 수행한 방식으로 아이콘을 생성합니다.

Twitter Brand Resources

$ mkdir -p icon icon/app.iconset
$ curl ls8h.com/yosemite-icon/api -F "[email protected]" -F "base_color=#243447" > icon/icon.png
$ sips -Z 16 icon/icon.png --out icon/app.iconset/icon_16x16.png
$ sips -Z 32 icon/icon.png --out icon/app.iconset/[email protected]
$ sips -Z 32 icon/icon.png --out icon/app.iconset/icon_32x32.png
$ sips -Z 64 icon/icon.png --out icon/app.iconset/[email protected]
$ sips -Z 128 icon/icon.png --out icon/app.iconset/icon_128x128.png
$ sips -Z 256 icon/icon.png --out icon/app.iconset/[email protected]
$ sips -Z 256 icon/icon.png --out icon/app.iconset/icon_256x256.png
$ sips -Z 512 icon/icon.png --out icon/app.iconset/[email protected]
$ sips -Z 512 icon/icon.png --out icon/app.iconset/icon_512x512.png
$ sips -Z 1024 icon/icon.png --out icon/app.iconset/[email protected]
$ iconutil -c icns icon/app.iconset

패키징

electron-packager로 Electron 앱을 생성합니다.

$ electron-packager . TweetDeck --platform=darwin --arch=x64 --version=1 --icon=build/icon/app.icns

고통 없이 완성했다.

결과

이것이


이렇게 되었다


만조쿠! !