Vue3+TailwindCSS

に従ってvue3プロジェクトにTailwindCSSを導入しビルドを行うと、下記のエラーとなる。

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

によると、
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

0Yu 2021/12/17に更新

Electron

ファイルダイアログを出すためのdialog module

をレンダリングプロセス側から使うにはremote moduleを介する必要があるが、remote moduleはElectron 10.0.0からデフォルトで無効化されたため使えない

参考

10/6追記

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

参考

https://note.com/appai/n/n659548dd08e0

remoteモジュールはElectron v14からは抹消されてしまっている。

0Yu 2021/12/11に更新

GUI

前準備

Xサーバーの導入

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

0Yu 2021/10/06に更新

TailwindCSSドキュメント(参照用)

フォント
https://tailwindcss.jp/docs/font-family
ギャップ
https://tailwindcss.jp/docs/gap
bgカラー

Screen height
https://tailwindcss.jp/docs/height

Using a plugin
You can also add base styles by writing a plugin and using the addBase function:

0Yu 2021/10/06

markdown Editor

0Yu 2021/11/17に更新

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

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",
  // ...
}

参考

0Yu 2021/10/06に更新

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

基本的には下記の手順に従う。

Add src/assets/main.css to src/main.jsする

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

に従い、

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

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

<body class="font-body">

参考

0Yu 2021/10/06

レイアウト参考

0Yu 2021/10/06に更新

Electronリーディングリスト

Vue3

0Yu 2021/10/09に更新

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

https://github.com/github/hotkey

$ 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>

0Yu 2021/10/10

mainビューの変更を自動保存する

0Yu 2021/10/11に更新

Vue.jsでGoogle API(gapi)を使う

Composition APIをインストール

yarn add @vue/composition-api

を参考にセットアップを行う

gapiをインストール

yarn add gapi

Composition APIについて

https://ics.media/entry/210929/

0Yu 2021/10/11に更新

TS + GoogleAPI(gapi)の導入

JavaScript Quickstart

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

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)で入れる

tsconfig.jsonを書き換える

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

参考

0Yu 2021/10/12

0Yu 2021/11/08に更新

memo
https://heroicons.com/

Grid Template Columns

vue router

コンポーネント分割

0Yu 2021/10/14

GAPIリファレンス

0Yu 2021/11/08

Copotisin API Column

0Yu 2021/11/08に更新

Electron

0Yu 2021/11/17に更新

ロゴメーカー

https://logo-maker.stores.jp/

フリーアイコン

https://icon-icons.com/ja/

0Yu 2022/05/28

IPC通信についてまとめたもの

0Yu 2022/09/19に更新

ビルドについて

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 で検索する

追記

electron-builder@23.0.2 を使う