GitHub Actions で Rails のテストを実行する

GitHub Actions で、Rails + PostgreSQL のシンプルなアプリをテストする方法です。

.ruby-version ファイルで、Ruby のバージョンを指定しているものとします。

2020年7月8日現在の情報です。

---

.github/workflows/ci.yml

name: CI

on: push

jobs:
  test:
    runs-on: ubuntu-latest

    env:
      RAILS_ENV: test
      DATABASE_URL: "postgres://postgres:postgres@localhost/ci_test"

    services:
      postgres:
        image: postgres
        ports:
          - 5432:5432
        env:
          POSTGRES_PASSWORD: postgres
        options: >-
          --health-cmd pg_isready
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5

    steps:
      - uses: actions/checkout@v2

      - uses: ruby/setup-ruby@v1
        with:
          bundler-cache: true

      - run: bundle exec rake db:setup

      - run: bundle exec rake

Bundler のキャッシュも自動でやってくれて、なかなか便利です。

参考

github.com simple-minds-think-alike.hatenablog.com docs.github.com booth.pm

Shrine で、MIME type から拡張子を設定する

ファイルアップロード gem の Shrine で、画像ファイル名が foo.php などでも foo.jpeg のように変換する方法です。

プラグインの設定だけで実現できて便利でした。

Shrine.plugin :determine_mime_type
Shrine.plugin :infer_extension, force: true

Headless Chrome でスクレイピングできる Kimurai Scraping Framework を Heroku で使う

Headless Chrome で簡単にスクレイピングできる Kimurai を Heroku で使用する方法です。

2019/11/4 現在の情報となります。

---

プロジェクトのディレクトリでコマンドを入力します。

heroku buildpacks:add heroku/ruby
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-google-chrome
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-chromedriver
heroku buildpacks:add --index 1 heroku-community/apt

heroku config:set SELENIUM_CHROME_PATH=/app/.apt/usr/bin/google-chrome
heroku config:set CHROMEDRIVER_PATH=/app/.chromedriver/bin/chromedriver

---

Gemfile

source 'https://rubygems.org'

gem 'kimurai'

---

spider.rb

require 'bundler'
Bundler.require

Kimurai.configure do |config|
  config.selenium_chrome_path = ENV['SELENIUM_CHROME_PATH'].presence
  config.chromedriver_path = ENV['CHROMEDRIVER_PATH'].presence
end

class Spider < Kimurai::Base
  @engine = :selenium_chrome
  @start_urls = ['http://example.com']

  def parse(response, url:, data: {})
    p response.at('h1').text
  end
end

Spider.crawl!

---

Aptfile

lsof

lsof が kimurai 内部で使用されているため、追加する必要があります。

Chromebook ターミナルのフォントを Inconsolata などに変更する

Chrome OS のターミナルは Web フォントを設定することで、フォントの変更ができます。

私は Powerline を使っていませんが、powerline-web-fonts というものを使うと、簡単に変更することができました。

GitHub - wernight/powerline-web-fonts: Powerline Web Fonts for Chromebook

Inconsolata など、有名なプログラミング用フォントが複数用意されています。

---

設定方法

1. ターミナルで Ctrl+Shift+P を押して、プロファイル設定画面を開く
2. Text font family の先頭に "Inconsolata", "Hack" など、設定するフォント名を追加する
3. Custom CSS (URI) に次の URL を追加する: https://cdn.jsdelivr.net/gh/wernight/powerline-web-fonts@ba4426cb0c0b05eb6cb342c7719776a41e1f2114/PowerlineFonts.css

---

完成

一応日本語も表示できます。表示が乱れる場合がありますが、Ctrl+L を押せば直るようです。

まだ若干見た目がおかしい場合もありますが、ターミナル内のエディタ (emacs -nw など) で開発する分には困らなそうです。

Chrome OS の拡張機能で、カレントウインドウがターミナルかどうか判別する

最近 Chromebook を入手したので Emacs keybindings がちゃんと使えるようにしたく、試行錯誤しています。

その過程で拡張機能を作っており、思いついたコードです。

---

const TERMINAL_URL_REGEXP = /^chrome\-extension:\/\/.+\/html\/crosh\.html/

let onTerminal = false

chrome.windows.onFocusChanged.addListener(() => {
  const getInfo = {
    populate: true,
    windowTypes: ['normal', 'popup', 'devtools']
  }

  chrome.windows.getCurrent(getInfo, window => {
    onTerminal = (
      window && window.tabs.length > 0 &&
        window.tabs[0].url.search(TERMINAL_URL_REGEXP) > -1
    )
  })
})

---

manifest.json の permissions に tabs を追加する必要があります。

"permissions": ["tabs"]

---

Chrome OS、ES6 で OS を操作できるのが良いですね。

参考

• chrome.windows - Google Chrome
• GitHub - masui/Chaim: Japanese text input system for ChromeOS
• GitHub - ento/chromeos-key-remapper: IME / tooling for remapping key combos to other key combos on Chrome OS

Webpacker4 で Vue と Pug を扱う

webpacker v4.0.2 で確認しています。

Webpacker4 + Vue.js の単一ファイルコンポーネント (SFC) で、

<template lang="pug">
  .hoge
</template>

のような Pug テンプレートを扱う方法です。

---

yarn add pug pug-plain-loader

---

config/webpack/loaders/pug.js

module.exports = {
  test: /\.pug$/,
  use: [{
    loader: 'pug-plain-loader'
  }]
}

---

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const pug = require('./loaders/pug')

environment.loaders.prepend('pug', pug)

参考

• Using Pre-Processors | Vue Loader
• Migrating from v14 | Vue Loader

Webpacker4 で、Sass のインデント記法を有効にする

webpacker v4.0.2 で確認しています。

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

// 追加
environment.loaders.get('sass').use.find(u => u.loader === 'sass-loader').
  options.indentedSyntax = true

module.exports = environment