ソフトウェア開発

lsd コマンド (LSDeluxe) のインストール時には master ブランチからインストールしないと theme ファイルが効かない

lsd (LSDeluxe) とは Rust 製の Alt ls です。「すごい ls」です。 github.com 原則として master ブランチからインストールする cargo でインストールする際に $ cargo install lsd とすると最新のバージョンが入りません。その結果 theme ファイルが適用さ…

Storybook で webpack の output を設定してしまうと正しく表示されない

理由 Storybook の表示に用いられる iframe.html などが output のディレクトリに作られてしまうから*1。 具体例 .storybook/main.js に以下のように書くと output のディレクトリが設定されてしまいます。 module.exports = { (省略) webpackFinal: async…

Storybook で SCSS を使えるようにする

注意 フロントエンドは移り変わりが激しいため、この方法が誤りになる可能性があります 2021/09/06 時点での情報です 結論 1. sass-loader の v10 を入れる 最新版を入れてしまわないように注意する*1。 $ yarn add --dev sass-loader@^10.0.0 2. style-load…

CircleCI の steps 内で条件分岐をする方法

結論 when を使います。run: の step 内のシェルスクリプトで分岐する方法はよく見るのですが、step そのものを分岐します。 circleci.com 使い方具体例 公式ドキュメントに書いてあるとおりです。steps: 配下に when: を書き、その配下に condition: を書き…

Cypress の Free プランは上限に達するのが早いのでダッシュボードに記録する対象を絞る

前提 CI で Cypress を回す際に何も考えずに全実行しているとあっというまに Free プランの枠を食いつぶしてしまうので、実行する対象を絞ります。 もちろん、Free プランでないならばリッチに使いましょう。 Free プランの上限 Free プランの上限(制限)は…

Vue.js v3 でコンポーネントが表示されずに困ったときに判明した理由

結論 components: { Hoge } と書くべきところを component: { Hoge } と書いていたから(複数形にしていなかった)。 感想 一度通っておけば以後は間違えないタイプのやつです*1。 *1:そういう意味では一度通ったというのは意義があったことなのかもしれない

Yarn v3 (v2) を入れたら "scripts" が実行できなくなった場合

結論 ワイルドカードが含まれている場合はクォートでくくりましょう。 具体例 例えば、以下のような書き方だとエラーになります。 "scripts": { "hoge": "yarn clean && run-s -c hoge:*", ワイルドカードが含まれる場合は以下のようにクォートでくくります…

GitHub Actions の Runner を自前で立てる(セルフホスト self-hosted)ことについて

箇条書きで書いていきます。 公式ドキュメント docs.github.com 大前提 パブリックリポジトリでは使う意義はほぼ無いと思います パブリックリポジトリは GitHub謹製 のランナーの時間制限がないから セルフホストのランナーにはセキュリティ上の懸念が生じる…

GitHub Actions 内で任意のファイルを用いる場合には .github/ に置かない

結論 - uses: actions/checkout した際には .github/ は持ってきてくれないため、file not found になるからです。 邪魔にならないところにまとめておくのがいいと思います*1。 補足 checkout した際に持ってきてくれているファイルは steps 内で run: ls -l…

GitHub Actions と CircleCI を「ローカル環境実行」という観点で比較

注意 2021/09/26 時点での情報です。 前提 GitHub Actions では act を用います gh コマンド は push されたものを手元から発動するコマンドであって、ローカル環境に存在するジョブを実行するものではないです CircleCI では 公式の CLI ツール を用います …

Cypress で対象セレクタが複数ある中から任意のセレクタを選ぶ方法とその際の注意点

結論 cy.get('.foobar').eq(3) のように、get したあとに eq で取得できる 注意点として、get の戻り値を変数に格納している場合、eq を実行してしまうと格納した変数のオブジェクトは変更される シャローコピーになるということ 具体例 以下のような HTML …

OS起動時に Elasticsearch などの「重い」サービスがタイムアウトで自動起動に失敗するときの対処法

前提条件 Ubuntu です。 エラー例 以下のようにタイムアウトでエラーになります. $ sudo service elasticsearch status ● elasticsearch.service - Elasticsearch Loaded: loaded (/lib/systemd/system/elasticsearch.service; enabled; vendor preset: enab…

Ubuntu 20.04 で PostgreSQL 13 をインストールする

背景 現状では、単に $ sudo apt install postgresql をした場合に 12 が入るので、13 が入るようにしたいです。 結論 公式ドキュメント に従います。以下、ドキュメントのコマンド部分だけの抜粋です。 $ sudo sh -c 'echo "deb http://apt.postgresql.org/…

Ubuntu 20.04 で PostgreSQL 12 をアンインストールする

結論 $ sudo apt purge postgresql-12 背景 13 を入れようとして 12 が残ってしまった場合に、12を明示的に削除したいときに実行します*1。 *1:なお、12が残っている状態で13を入れるとポート番号がずれるので、両方を削除して13のみを入れ直すことになります

CircleCI で Rails の db:create に失敗するときの対処法

前提条件 以下のような環境です。 Ruby のイメージは circleci/ruby:3.0.2 データベースは PostgreSQL エラーメッセージ 以下のようなエラーメッセージが出ます。 #!/bin/bash -eo pipefail bundle exec rails db:create rails aborted! LoadError: libffi.s…

Ubuntu で pip install に軒並み失敗する場合の対処方法

重要な点 pyenv を使っている場合はパッケージをインストールした後に「アンインストール」→「インストール」する必要があります。 結論 各種パッケージを入れましょう。 $ sudo apt install -y build-essential libbz2-dev libdb-dev libreadline-dev libff…

VSCode の Jest 拡張機能での Jest の起動に失敗する場合

環境 Windows (WSL2) Node のバージョン管理には nodenv を使用している 状況 具体的には以下のようなエラーがターミナルに出るときです。 /usr/bin/env: 'node':そのようなファイルやディレクトリはありません Jest process "watch-tests" ended unexpected…

CircleCI の (sudo) apt update で失敗する場合の対処方法

現象 このようなエラーが出て失敗する場合です。 Get:1 http://security.debian.org/debian-security buster/updates InRelease [65.4 kB] Get:2 http://deb.debian.org/debian buster InRelease [122 kB] Get:3 http://deb.debian.org/debian buster-update…

WSL2 の設定ファイル settings.json の場所

結論 C:\Users\ユーザー名\AppData\Local\Packages\Microsoft.WindowsTerminal_英数字\LocalState\settings.json 背景 最近 WSL2 の「設定」をメニューから選択すると、次のように GUI での設定が強制されるようになりました。 gyazo.com gyazo.com しかしこ…

Lita を Heroku で用いる際にヘルスチェックのエンドポイントを作る(Webサーバ機能を使う)

Lita とは www.lita.io 結論 まず以下のようなハンドラーを作ります。 module Lita module Handlers class Healthcheck < Handler http.get '/healthcheck' do |_request, response| response.body << 'OK' end Lita.register_handler(self) end end end そ…

Ruby 3 を用いると Lita にて Webサーバー が応答できずに落ちるので注意する

Lita とは www.lita.io 結論 2021/07/25 時点では、以下のソースにあるように Ruby 3 で escape メソッドが削除されたため、Webサーバ の応答をしようとすると落ちます。 github.com 以下のようにコメントが書いてあります。 # The http_router gem still us…

Lita のローカル開発時にレスポンスを確認するには @Lita をまず先頭に入力する

Lita とは Ruby製の bot のフレームワークです。 docs.lita.io 結論 ローカル(シェル)で動作確認する際には @Lita を先頭に付けないとポストが受け付けられません(レスポンスが返ってきません)。 以下のように、@Lita を先頭につけて bot に話しかける必…

git の hooks(pre-commit など)が動かない時に確認すること

結論 .git/config の [core] の部分に hookspath が指定されているかどうかを確認する。 具体例 git/config に以下のように書き加えます*1。 [core] (省略) hookspath=.git/hooks (以下省略) *1:標準のディレクトリ構成の場合

VSCode の Ruby Test Explorer を用いる際にテスト対象 Spec が表示されない場合

結論 設定の Test Framework の項目で明示的にテストに用いるフレームワーク*1 を指定するといける場合があります。 gyazo.com *1:RSpec とか Minitest とか

VSCode で RuboCop や Solargraph や Ruby Test Explorer が実行できないときの一つの解決法

結論 コマンドの実行パスを絶対パスで書く。 実例 以下は Ruby Test Explorer の設定です。ここで実行コマンドパスを設定する箇所において、絶対パスでパスを記述します。 例えば、 .rbenv を使っている場合は /home/ここにユーザー名が入る/.rbenv/shims/bu…

material-table を使う際に検索欄やページングカーソル欄に se や fir などのアルファベットが表示される場合の対処法

material-table とは github.com 現象 こういう感じになる現象です。 gyazo.com 結論 fonts.googleapis.com から Material Icons をインポートしましょう。 <head></head> 内に以下を書き加えます*1。 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> 修正結果 上記のインポートの結果、以下のようになりました。 gyazo.</link>…

Ruby で Google API を google-api-ruby-client を使って操作する際に Google::Apis::TransmissionError が出る場合の対応

結論 リトライをする(こちらのせいではない)。 具体的方法 以下にリトライをするための方法が書いてあります。 github.com client.request_options.retries = 3

GitHub Actions でアーティファクトを保存するときには with: name: をアルファベットにしないと "Computed hash does not match with url signature" になる

結論 以下のように書くと、アーティファクトのリンクをクリックした先で Computed hash does not match with url signature というエラーが出ます*1。 (省略) - name: アーティファクトの保存を行う if: failure() uses: actions/upload-artifact@v1 with:…

apt を使って Node.js の任意のバージョンをインストールする

CI にて有用な方法と思います。 結論 たとえば、 v16 系を入れたい場合には以下のコマンドを実行します。 $ curl -sL https://deb.nodesource.com/setup_16.x | sudo bash - $ sudo apt update $ sudo apt install -y nodejs 補足 npm も最新版まで上げるに…

VS Code で .tsx ファイルを Prettier で保存時自動整形する

結論 settings.json に [typescriptreact] という key を使って Prettier を使うということを明示的に書きます。 具体例 { (省略) "[typescriptreact]": { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" }, (省略)…

Powered by はてなブログ