モノラルログ

マツオ ( @matsuoshi / monaural.net ) のざっくりしたブログです

Tailwind CSS と Laravel Mix とで SCSS のビルド環境を作る

Tailwind CSS を使ったビルド環境を、Laravel Mix ベースで構築するメモ

install

まずは Tailwind CSS と Laravel Mix をインストール。cross-env も必要そうなので一緒に入れる。

yarn add -D tailwindcss laravel-mix cross-env

package.json を修正

Laravel Mix のドキュメントを参考に、package.json ファイルの scripts 部分を追加

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

npm run dev とか npm run watch とかを使うための設定ですね

Laravel Mix の設定ファイルを作成

Laravel Mix の設定ファイルとして webpack.mix.js を作成、こんなかんじ

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss')

mix.sass('src/app.scss', 'public/css')
  .options({
    processCssUrls: false,
    postCss: [ tailwindcss() ],
  })

フォルダ名部分は適宜ご自由に

SCSS ファイルを作成

いよいよ Tailwind CSS を使ったスタイルシートを書く、前述の設定例だと src/app.scss として

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 text-white;
}
.btn-blue:hover {
  @apply bg-blue-600;
}

とか書く。(公式サイトの例そのまんまですが)

@apply の部分が Tailwind CSS のキモ的なところ。

ビルド

npm run build とか npm run watch とかでビルド。

するとビルド結果として public/css/app.css がこうなる

.btn {
  font-weight: 700;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.25rem;
}

.btn-blue {
  --bg-opacity: 1;
  background-color: #4299e1;
  background-color: rgba(66, 153, 225, var(--bg-opacity));
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
}

.btn-blue:hover {
  --bg-opacity: 1;
  background-color: #3182ce;
  background-color: rgba(49, 130, 206, var(--bg-opacity));
}

ジャーン。

以上

そんなかんじです。

いちおうサンプルの GitHub はこちら

github.com

オフィシャルのインストールドキュメントはこちら

tailwindcss.com

laravel-mix.com

CSS animation を一時的に止める

こんなプロパティあったのか、知らんかった

CSS の animation で動かしているものを、一時停止させたいとき

animation-play-state: paused;

これでOK

明示的に再生させたいときは

animation-play-state: running;

ボタンを押すとアニメーションを再生・停止するサンプル

See the Pen animation-play-state by h.matsuo (@matsuoshi) on CodePen.

Notion が無料でも使い放題になったぞ〜〜〜

f:id:matsuoshi:20200522141422p:plain

かなりイケてる情報管理ツール、Notion。

いままで無料版では容量の制限(1000ブロックまで) というのがあったのですが、このたび改定され、無料ユーザでも容量無制限になりました。やったーーーー 🎉

www.notion.so

何につかえるのか

シンプルな見た目ながら、色々なことに使える Notion, なので最初の掴みどころがちょっと難しかったりもします

  • ドキュメントやメモを書く
    • 複数人での同時編集もOK
  • Trello みたいなカンバン
  • Evernote みたいな Webクリップ
  • データベース
    • 自由にカスタムフィールドを追加できる
  • 作ったページをサイトとして公開もできる
  • iOS / Android アプリもあるよ

などなど……

メモツールとしても、Wiki としても、タスク管理としても、プロジェクト管理としても使えるし、複数人で共有してコラボレートも可能。 All in One なので、複数ツールを使い分けるのが面倒って人にはうってつけ。

それをこのシンプルな見た目にまとめちゃってるところに、かなりのセンスを感じます。

www.notion.so

まずは試してみて

  • メモ置き場
  • Trello 的なカンバンボードでのタスク管理
  • Webクリップ

あたりで試してみてもらえればと。 やや独特なとこはありますが、ハマる人にはハマると思います。データの扱い的に、「こんなこと出来ないかな?」と思ったことが、ちょっとした工夫でだいたいできる感じが気持ちいいです。

Webクリップはこのブラウザ拡張を入れたら OK

www.notion.so

今後の希望

いま出来ないことで、これが出来たらいいな〜 というのだと、やはり API対応ですね。すでに予定はされているみたいですが。

他サービスとの連携が現状はほぼできないのですが、メール等からブロックを追加するとか、IFTTT 対応とか、きてくれると嬉しいなあ〜。(いま対応してるのは Slack 通知くらいかな)


まあなんせ、好きな人にはハマるツールだと思うので、興味ある方はお試しあれ。

bitwarden は無料でも 2人までパスワードを共有管理できる

f:id:matsuoshi:20200119124039p:plain

そういえば少し前にパスワード管理ツールを bitwarden に乗り換えたんですが

matsuoshi.hatenablog.com

bitwardenって、無料でも他の人とパスワードを共有管理できるんですね。

https://bitwarden.com/#personal

Free for 2 Users
Sharing for 2 users
Unlimited shared items

おお〜

ということで、家族の環境にも bitwarden を導入。必要なパスワードを、2人で共有する設定をしてみました。

共有のための組織(グループ) を作る

Webブラウザから bitwarden にログインします。

すると右下の方に「新しい組織」というボタンがあるので、そこから組織を作成。

f:id:matsuoshi:20200516110857p:plain

続くプラン選択は「フリー」でOK, これで共有できるグループができました。

そのあとは 「設定 → 組織 → 管理」と進むと、メンバーの招待ができるようになります。共有したい人のメールアドレスを入れて招待し、これでグループのできあがり。無料版だとグループに入れるのは自分も含めて2名までです。

パスワードを共有する

ブラウザからだと、複数まとめて共有できます。

保管庫で共有したアイテムをまとめてチェックボックス選択して、設定の歯車アイコンから「選択したものを共有」でOK

f:id:matsuoshi:20200516112703p:plain

新規にパスワードを追加するときも、ブラウザのエクステンションから

f:id:matsuoshi:20200516113905p:plain

この「所有者」のところで、さきほど作った組織を選択して共有することができます。

bitwarden.com

無料でこんだけできるのはありがてえ……

GitHub Actions で cron を使う

f:id:matsuoshi:20200508124640p:plain

GitHub Actions の cron を使って、定期的に実行したいジョブを設定したのでそのメモ

GitHub Actions とは

いうたら GitHub に標準搭載の CI/CD 環境的なものです。Git Push されたらテストを自動実行、みたいなことが GitHub内だけで完結します。 public リポジトリだと無料なのはもちろん、なんと private リポジトリの場合でも無料から使えます(実行時間に上限あり)。くわしくは pricing のページを

github.com

ひとまずサンプル

GitHub Actions の設定ファイルを作ります。ファイル名は何でもよいです、拡張子は .yml で。

name: cron sample
on:
  schedule:
    - cron: '0 12 * * *'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: hello
      run: |
        echo "hello world"

これを、リポジトリ内の /.github/workflows/ フォルダ内に置いて、GitHub に push するだけでOK。

上記の例だと、毎日 12:00 (UTC) に GitHub Actions によって ubuntu の環境が立ち上がり、hello world が実行されます。

注意点など

最短間隔は 5分

cron の最短間隔は 5分のようです。実際に cron: '*/2 * * *' などと5分未満の間隔を設定してみたのですが、5分に1回しか実行されませんでした。

って、ドキュメントにも書かれてましたわ。

スケジュールされたワークフローを実行できる最短のインターバルは5分ごとです。

help.github.com

指定時刻ぴったりに動く感じではない

上記と関連するかもですが、分単位でかっちりトリガーされる、というわけではなさそう。前後 5分程度のブレは見ておいたほうがよさげです。1分のズレが許されない、厳格な用途には向かなさげ。ゆるふわで。

時刻はUTC

UTC以外に設定変更する方法が見当たらず……。なので、日本時間だと 9時間引いて指定する感じになります。

privateリポジトリは制限あり

publicリポジトリは、無料アカウントでも時間制限なしです。private リポジトリの場合は時間制限があり、1アカウント 2,000分/月 までとなります。

月間2,000分ということは、1日あたり1時間ちょい。1時間あたりだと 2.6分くらい。

チーム開発でCI環境を……というならともかく、個人でちょろっと動かすくらいなら private リポジトリでも無料の範囲である程度いけそう。すごい。

curl が使える

なにか webhook的なものをトリガーしたければ、curl を使えばOKでした。

      run: |
        curl -X POST -d {} https://example.com/

こんな感じの指定になりますね。

public リポジトリだけど、設定ファイル内の情報を隠したい場合

たとえば GitHub Actions内で webhook をコールしたい、けど URL は知られたくない、けど public リポジトリにはしたい、という場合。

secret 機能が使えます。

f:id:matsuoshi:20200508123134p:plain

リポジトリの設定がありまして、setting -> secret と進むと、ナイショの値を設定できます。ここでたとえば SECRET_URL という値を入れてあげて、ymlファイル側では

      run: |
        curl -X POST -d {} ${{ secrets.SECRET_URL }}

こんな感じに指定してやることで、secret として設定した値を使うことができます。

まとめ

べんり。

cron の設定を、コードと一緒に管理できるのは良いですね。情報があちこちに散らばらず、同じリポジトリ内にまとまっているのは、やはり分かりやすいです。

private リポジトリでもそれなりの時間分使えますし!