Open22

Vue3 + Electron + TailwindCSSセットアップTips

Vue3+TailwindCSS

https://tailwindcss.com/docs/guides/vue-3-vite
に従ってvue3プロジェクトにTailwindCSSを導入しビルドを行うと、下記のエラーとなる。

Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8. Migration guide for end-users:

https://tailwindcss.com/docs/installation#post-css-7-compatibility-build
によると、
v2.0の時点で、TailwindCSSはPostCSS8に依存しており、PostCSS8はリリース間もないため、エコシステム内の他の多くのツールが非対応となっている。つまり、Tailwindのインストール後にターミナルでこのようなエラーが表示される場合があるとのこと。

そのためtailwindcss、postcssk、autoprefixerをアンインストールし、互換ビルドのインストールを行うことで無事にビルド可能となった。

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

https://tailwindcss.com/docs/installation#post-css-7-compatibility-build
https://github.com/tailwindlabs/tailwindcss/discussions/2854

Electron

ファイルダイアログを出すためのdialog module
https://github.com/electron/electron/blob/main/docs/api/dialog.md
をレンダリングプロセス側から使うにはremote moduleを介する必要があるが、remote moduleはElectron 10.0.0からデフォルトで無効化されたため使えない

参考

https://simple-minds-think-alike.moritamorie.com/entry/disable-electron-remote-module

10/6追記

そのため、デフォルトでFalseとなっているnodeIntegration(nodeモジュール用)とenableRemoteModule(remoteモジュール用)をそれぞれTrueに設定する必要がある。

参考

https://nhamada.hatenablog.com/entry/2015/05/24/210639
https://qiita.com/anurimn/items/001804a1c3b6c7130fe5
https://note.com/appai/n/n659548dd08e0

remoteモジュールはElectron v14からは抹消されてしまっている。
https://webbibouroku.com/Blog/Article/electron-ipc

GUI

  • 前準備

Xサーバーの導入

https://docs.microsoft.com/ja-jp/windows/wsl/tutorials/gui-apps
https://dev.classmethod.jp/articles/wsl-x-window/

export DISPLAY=XXX.XXX.XX.XX:0.0

ここで下記のエラーが発生

“error while loading shared libraries: libgbm.so.1: cannot open shared object file: No such file or directory” Code Answer’s

ライブラリが足りないと言われているので、足りないものをインストール

sudo apt-get install libaio-dev

アプリケーションをビルドする

electron-builderを使ってビルドする場合
electron-builderをインストール

$ vue add electron-builder

dist_electronディレクトリ内に実行ファイルを生成する

With Yarn:

$ yarn electron:build

or with NPM:

$ npm run electron:build

windows用にパッケージングするには以下のオプションでビルドする

$ yarn electron:build --win

Electron Packagerを使ってビルドする場合
windows/mackOS向けにビルドする場合
package.jsonを下記のように書き換える

{
  "scripts": {
  // ...
  +   "package": "electron-packager . electronTextEditor --platform=win32 --arch=x64 --electron-version=6.0.11"
  },
  -  "main": "background.js",
  +  "main": "main.ts",
  // ...
}

参考

https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/#to-start-a-development-server
https://qiita.com/quzq/items/608fa811f7ff2c1ae7f3
https://qiita.com/koedamon/items/e2f858511863dcc4852e#アプリのパッケージ化
https://simulatedgreg.gitbooks.io/electron-vue/content/ja/using-electron-builder.html
https://mijinc0.github.io/blog/post/20200816_electron_builder/
https://www.electron.build/multi-platform-build#linux
https://h3poteto.hatenablog.com/entry/2018/04/14/234353

TailwindCSSでGoogleフォント(Inter)をつかう

基本的には下記の手順に従う。
https://medium.com/@saulchelewani/how-to-setup-vue-tailwindcss-with-custom-fonts-and-hsl-color-palette-cda43bf64fea
Add src/assets/main.css to src/main.jsする

// src/assets/main.css
@import url('https://fonts.googleapis.com/css?family=Inter&display=swap');
// ...

https://tailwindcss.com/docs/font-family
に従い、

  // tailwind.config.js
  module.exports = {
    theme: {
      fontFamily: {
       ...
       'body': ['"Inter"', ...],
      }
    }
  }

とすると、font-bodyというクラスが生成される。その後、下記のように指定することで利用可能となる。

<body class="font-body">

参考

https://qiita.com/annin401/items/82e1549238f1aafd46d9

GitHubショートカットライブラリ

https://github.com/github/hotkey
https://zenn.dev/imaginelab/articles/c59db2aa20aecf

$ yarn add @github/hotkey

Usage(Vue3)

import { install } from "@github/hotkey";
  
export default {
  mounted: function() {
    for (const el of document.querySelectorAll("[data-hotkey]")) {
      install(el);
    }
  },
};
        <button
          @click="open"
          data-hotkey="Control o"
          class="font-body shadow-md inline-flex items-center justify-center px-5 py-3 border border-transparent text-base rounded-md text-white bg-green-500 hover:bg-green-600"
        >
          file open
        </button>

TS + GoogleAPI(gapi)の導入

JavaScript Quickstart

https://developers.google.com/calendar/api/quickstart/js

Google APIはnode moduleで提供されていない(※index.htmlのヘッダーにscriptタグで取り込む必要がある)ので、onMountedから動的にDOMに挿入する

    onMounted(() => {
      const script = document.createElement('script')
      script.src = 'https://apis.google.com/js/api.js'
      // scriptタグを動的にDOMに挿入する
      document.head.appendChild(script);
    });

TypeScript Support

https://v3.vuejs.org/guide/typescript-support.html

  • TSにgapiの型を認識させる
import { defineComponent, onMounted } from "vue";
/// <reference path="../../node_modules/@types/gapi/index.d.ts" />

// eslint-disable-next-line @typescript-eslint/no-namespace
declare const gapi: any;

下記の3つのモジュールをnpm(yarn)で入れる
https://www.npmjs.com/package/@types/gapi
https://www.npmjs.com/package/@types/gapi.auth2
https://www.npmjs.com/package/@types/gapi.calendar

tsconfig.jsonを書き換える

  "compilerOptions": {
    "types": [..., "gapi", "gapi.auth2", "gapi.calendar"],
  }

参考
https://nipo.sndbox.jp/develop-blog/gapi

ビルドについて

Vue CLI Plugin Electron Builder を使う
https://nklayman.github.io/vue-cli-plugin-electron-builder/

MacOSからビルドする

MacからWindows向けにビルドを行う際にはhomebrew-wineをここ からインストールし、
--win --x64 オプションをつけてビルドする

dmgファイルの生成でビルドエラーになった場合

⨯ Exit code: ENOENT. spawn /usr/bin/python ENOENT  failedTask=build stackTrace=Error: Exit code: ENOENT. spawn /usr/bin/python ENOENT

export PTYON_PATH= でローカルのptyhon2を環境変数にセットすると、上記エラーを回避できる
ローカルのpython2のパスはwhich python2 で検索する
https://developer.mamezou-tech.com/blogs/2022/04/04/build-intel-m1-electron-app/

追記

electron-builder@23.0.2 を使う
https://github.com/electron-userland/electron-builder/issues/6726#issuecomment-1073145042

ログインするとコメントできます