Rails アプリの開発で Browsersync を使用する

追記(2022/12/24): proxy を使用しない方法に書き換えました。

Rails v7.0.4 で、sprockets-rails, jsbundling-rails を使用している前提です。

Browsersync は v2.27.11 で確認しています。

---

まずは、プロジェクトのルートでインストール。

yarn add browser-sync --dev

---

続いて、設定ファイル (bs-config.js) をプロジェクトのルートに置きます。

ドキュメントを参照し、お好みの内容に書き換えてください。

module.exports = {
  files: [
    'app/views',
    'app/helpers',
    'app/assets/builds/application.{js,css}'
    'app/components'
  ],
  port: 3001,
  ghostMode: false,
  notify: false,
  injectChanges: false  // css 更新時もリロード
};

---

app/views/application/_browsersync.html.slim

javascript id="__bs_script__":
  document.write("<script async src='http://HOST:3001/browser-sync/browser-sync-client.js?v=2.27.11'><\/script>".replace("HOST", location.hostname));

---

app/views/layouts/application.html.slim

= render 'browsersync' if Rails.env.development?

※ slim で書いています。

---

最後に、Procfile.dev へ以下を追記します。

browsersync: yarn browser-sync start --config bs-config.js

---

あとは、いつものように bin/dev を起動して開発するだけです。

slack-notifier で autolink を無効にする

slack-notifier で、URL がリンクになるのを防ぐ方法です。

payload の parse を none にしてあげます。

notifier = Slack::Notifier.new('WEBHOOK_URL')
notifier.ping 'example.com', parse: 'none'

---

参考

api.slack.com

details 要素 + Stimulus で開閉アニメーション表示をする (高さ可変のアコーディオンメニュー)

<details> 要素 を使うと JavaScript を使わずにアコーディオンメニューを実装することができます。

ただ、2022年2月時点では、開閉のアニメーション表示をする組み込みの方法がありません。

そこで、Stimulus を使って開閉アニメーション表示をするコードを示します。

---

HTML

<details data-controller="accordion">
  <summary data-accordion-target="summary" data-action="click->accordion#toggle">詳細</summary>
  <div data-accordion-target="content">内容</div>
</details>

---

accordion_controller.js

import { Controller } from "@hotwired/stimulus"

// Thanks to: https://css-tricks.com/how-to-animate-the-details-element-using-waapi/

export default class extends Controller {
  static targets = ['summary', 'content']

  connect() {
    this.resetState()
  }

  resetState() {
    this.animation = null
    this.isClosing = false
    this.isExpanding = false
  }

  toggle(event) {
    event.preventDefault()

    this.element.style.overflow = 'hidden'

    if (this.isClosing || !this.element.open) {
      this.open()
    } else if (this.isExpanding || this.element.open) {
      this.shrink()
    }
  }

  open() {
    this.element.style.height = `${ this.element.offsetHeight }px`
    this.element.open = true

    window.requestAnimationFrame(() => this.expand())
  }

  expand() {
    this.isExpanding = true

    const startHeight = `${ this.element.offsetHeight }px`
    const endHeight = `${ this.summaryTarget.offsetHeight + this.contentTarget.offsetHeight }px`

    if (this.animation) {
      this.animation.cancel()
    }

    this.animation = this.animate(startHeight, endHeight)

    this.animation.onfinish = () => this.onAnimationFinish(true)
    this.animation.oncancel = () => this.isExpanding = false
  }

  shrink() {
    this.isClosing = true

    const startHeight = `${ this.element.offsetHeight }px`
    const endHeight = `${ this.summaryTarget.offsetHeight }px`

    if (this.animation) {
      this.animation.cancel()
    }

    this.animation = this.animate(startHeight, endHeight)

    this.animation.onfinish = () => this.onAnimationFinish(false)
    this.animation.oncancel = () => this.isClosing = false
  }

  animate(startHeight, endHeight) {
    return this.element.animate({
      height: [startHeight, endHeight]
    }, {
      duration: 300,
      easing: 'ease-out'
    })
  }

  onAnimationFinish(open) {
    this.element.open = open

    this.resetState()
    this.element.style.height = this.element.style.overflow = ''
  }
}

---

参考

• How to Animate the Details Element Using WAAPI | CSS-Tricks - CSS-Tricks
• How to Animate the Details Element | CSS-Tricks - CSS-Tricks

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 など) で開発する分には困らなそうです。