くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

ブラウザで音声を再生する(howler)

ブラウザで音声を再生したいなと思って、 いろいろ調べてみたときの備忘録(*´ω`*) github.com あまりないけど、howlerがよさそうだった(*´ω`*) 使い方 まずはインストール $ npm i howler 再生するだけならこれでOK(*´ω`*) import { Howl } from 'howler'…

GitHub Actionのymlをlintでチェックする(actionlint)

前の記事でローカルで試せるようになったけど、 そもそも書き間違えが多いので、事前チェックできるといいなと思ったら、 まさにのツールがあったので、試してみたときの備忘録(*´ω`*) rhysd/actionlint: Static checker for GitHub Actions workflow files…

GitHub Actionsのset-env/set-outputをマイグレーションしてくれるツール

いつのまにか、set-env/set-outputの書き方がセキュリティの都合上、 新しい書き方になったらしい。。 # 古い書き方 - name: Save env run: echo "::set-env name={name}::{value}" - name: Set output run: echo "::set-output name={name}::{value}" - nam…

Chrome拡張機能を作ってみる | 3. データ保存(chrome.storage)

Chrome拡張で設定などデータを保存したいときに、 どうすればいいかを調べてみたときの備忘録。 オプションに関しては、このあたりから読みはじめるとよさそう。 Give users options - Chrome Developers データ保存はchrome.storage chrome.storage - Chrom…

ポインターイベントを拾わずに子要素に伝える

css

pointer-events: noneを使えばいいらしい。 .foo { pointer-events: none; } 参考にしたサイト様 pointer-events - CSS: カスケーディングスタイルシート | MDN

viteでの環境構築メモ | コミット便利ツール編

viteでの環境構築メモ(*´ω`*) この記事のコミット便利ツール編(*´ω`*) viteでの環境構築メモ | まとめ - くらげになりたい。 コミット便利ツール commitizen commitizen/cz-cli: The commitizen command line utility. #BlackLivesMatter streamich/git-cz…

viteでの環境構築メモ | lint/自動チェック編

viteでの環境構築メモ(*´ω`*) この記事のlint/自動チェック編(*´ω`*) viteでの環境構築メモ | まとめ - くらげになりたい。 lint周り eslint User Guide | eslint-plugin-vue Configuring ESLint - ESLint - Pluggable JavaScript Linter Lint | ツールガ…

viteでの環境構築メモ | テスト編

viteでの環境構築メモ(*´ω`*) この記事のテスト編(*´ω`*) - viteでの環境構築メモ | まとめ - くらげになりたい。 テスト周り vitest テスト | ツールガイド | Vue.js Vitest | A blazing fast unit test framework powered by Vite $ pnpm add -D vitest …

viteでの環境構築メモ | まとめ

viteでの環境構築メモ(*´ω`*) いれるもの ベース pnpm/fnm vite/vue tailwindcss iconify テスト周り vitest lint周り eslint prettier .editorconfig commitlint markdownlint textlint 自動チェック周り husky lint-staged githooks CHANGELOG関連 change…

viteでの環境構築メモ | ベース編

viteでの環境構築メモ(*´ω`*) この記事のベース編(*´ω`*) - viteでの環境構築メモ | まとめ - くらげになりたい。 ベース fnm/pnpm # fnm $ brew install fnm $ echo 'eval "$(fnm env --use-on-cd)"' >> ~/.bashrc $ fnm install v16 $ fnm default v16 #…

CHANGELOG生成系について調べてみた

この記事の続き。CHANGELOG生成系に関してざっと調べたまとめ。 ざっとなので、間違ってるところがある気がするけど、なんとなく雰囲気はつかめた(*´ω`*) リリースノートの自動生成ツールを調べてみた - くらげになりたい。 それにしても多い。。(*´ω`*) …

Chrome拡張機能を作ってみる | 2. 登場人物編

とりあえず、Hello Worldできたので、 登場人物やディレクトリ構成とかを調べてみる(*´ω`*) Architecture overview - Chrome Developers 前回の記事はこちら。 www.memory-lovers.blog 最小は2つのファイル ./ popup.html ... 拡張機能をクリックしたときに…

vite/vueでChrome拡張機能を作ってみる|1. Hello World編

なにかChrome拡張を作ってみたいなと思い、 viteとvueでHello Worldしてみたときの備忘録(*´ω`*) 思いの外、簡単にHello Worldできた(*´ω`*) Welcome - Chrome Developers Vite | 次世代フロントエンドツール Introduction | CRXJS Vite Plugin プラグイン…

PayPay銀行/楽天銀行ではGitHub Sponsorsを登録できない

GitHubでハートマークがついているひとがいて、いいなと思ったので つけてみようと思ったけど、うまく行かなかったときの備忘録 GitHub Sponsors GitHub SponsorsはStripe Connectを利用している GitHub SponsorsではStripe Connectを使って入金を受け取るよ…

github-actionsボットが作ったタグではon:crete:tagがトリガーされないのでworkflow_runをつかう

GitHub Actionsでタグ付とリリースを自動化できないかな? と思ったら、かなりハマったので、いろいろ調べたときの備忘録(*´ω`*) やりたかったこと 2つのymlを使って以下のようなことがしたかった。 mainにPRがマージされたらタグを付け(add-tag.yml) tagが…

githookで直push/直commitを禁止にするなど

githooksを試してみたときのメモ(*´ω`*) いつもミスるので教えてくれるのありがたい。。(*´ω`*) Git - githooks Documentation Git - Git フック huskyを使っているので.husky/配下にファイルを配置。 - Husky - Git hooks 特定ブランチへのcommitを禁止す…

githubのPULL_REQUEST_TEMPLATE.mdを用意してみる

いろいろ見ていると、PRのテンプレートを用意できるっぽく、 試してみたいなと思い、いろいろ調べたときの備忘録(*´ω`*) リポジトリ用のプルリクエストテンプレートの作成 - GitHub Docs 割と.github/PULL_REQUEST_TEMPLATE.mdの形式が多い感じ (ガイドだと…

githubのISSUE_TEMPLATEを用意してみる

いろいろ見ていると、issueのテンプレートをみんな用意しているので、 試してみたいなと思い、いろいろ調べたときの備忘録(*´ω`*) 割とこんな感じの構成が多い(*´ω`*) .github/ ISSUE_TEMPLATE/ config.yml bug_report.yml feature_request.yml GitHubの各…

commitlintとhuskyでConventional Commitsに従ったコミットログを強制する

いろいろ見ているとコミットメッセージの仕様なんてのがあるらしい。 Conventional Commits A specification for adding human and machine readable meaning to commit messages nuxtやvueをみていると、 それに従っているっぽいので、同じような感じででき…

リリースノートの自動生成ツールを調べてみた

いろんなOSSでリリースノートをどうしてるのかな? とおもって調べてみたときのメモ。雑多なリンク集(*´ω`*) ツールもだけど、コミットメッセージの仕様もいろいろある。。 GitHub自体の機能 自動生成リリース ノート - GitHub Docs Conventional Commits C…

VeeValidate v4&yupで日付のバリデーションをかける

VeeValidate v4の必須じゃない日付で、 date()を使ったときにハマったときの備忘録。。 date().nullable()だと空文字でエラーが出てしまう。。 transform()で処理する必要があるっぽい jquense/yup: Dead simple Object schema validation 使い方 const { me…

保護ブランチではGitHub Actionからでも直pushはできない

ひとりリポジトリでもprotected branchesを使いたいなと思って、 いろいろ調べてみたときの備忘録(*´ω`*) 無料プランだとpublicリポジトリしか使えないので注意。 保護ブランチ(protected branches)とは About protected branches - GitHub Docs 指定したブ…

`.github`ディレクトリ配下のあれこれ

いろんなリポジトリを見ると、.github/にいろいろあるけど、 よくわからないので、まとめてみた(*´ω`*) .github/ - workflows/ - *.yml - ISSUE_TEMPLATE/ - `FORM-NAME`.yml - PULL_REQUEST_TEMPLATE/ - pull_request_template.md - release.yml - setting…

GitHub Appsをほんの少しためしてみる

最近はPATの代わりにGitHub Appsを使って認証できるらしい。 PRがマージされたらアプリにversion bumpとタグ付けとReleaseの作成をしてみたときの備忘録。 GitHub Appsを作る GitHub Appの追加 Settings > Developer settingsの「New GitHub App」から。 以…

GitHub Actionsを使って自分をReviewerにしたPRを作成する

ひとりリポジトリでもPR活用したいなと思い、 いろいろ調べてみたときの備忘録(*´ω`*) 自分のPRは自分で承認できない。。 Pull Requestの作者は、自分自身のPull Requestを承認することはできません。 らしい。。(´・ω・`) 必須レビューでのプルリクエスト…

GitHub Actionsの`github.xxx`を全部ダンプする

GitHub Actionsで${{ github.ref }}とかが使えるけど、 何があるかわかりにくい。。 ドキュメントには書かれているけど、いざ使おうとすると探すのが大変。。 Events that trigger workflows - GitHub Docs Webhook events and payloads - GitHub Docs 良い…

Retrofit2でAuthorizationヘッダを自動で設定する

AndroidでRetrofit2を使うときに、 アクセストークンを毎回設定するのはめんどくさいので、 よい方法はないかなと調べてみたときの備忘録(*´ω`*) OkHttpClientのInterceptorで挿入するとよいっぽい。 ApiClientインターフェースの作成 ヘッダーが必要な場合…

auto-completeを無効にする

autocompeteを無効にしたくて、いろいろ調べたときの備忘録。 ブラウザによって挙動が違うっぽい。。 auto-complete="new-password" 参考にしたサイト様 How to turn off form autocompletion - Web security | MDN HTML attribute: autocomplete - HTML: Hy…

package.jsonのversionをいろいろするあれこれ

npm

package.json内のverion upをいい感じにできないかな? といろいろ調べてみたときの備忘録。 なんかいろんな関連ツールが出てきてむずい。。(*´ω`*) 公開されているバージョンの表示 # 公開されているバージョン $ npm view <package-spec> version # 例 $ npm view npm v</package-spec>…

Stringをcamelcaseに変換する(camelcase/decamelize)

JS/TSでキャメルケースとかの変換をしたいなと思ったときに、 いろいろ調べたときの備忘録(*´ω`*) まさになライブラリがあった(*´ω`*) camelcase 'foo-bar' => 'fooBar' 'Foo-Bar' => 'FooBar' // pascalCase Options 'Foo-BAR' => 'fooBAR' // preserveCo…