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

IE10以下で HTMLElement.dataset を使う

JavaScript で HTML 要素の data- 属性 を取得する際、モダンブラウザでは elem.dataset.xxx のように取得できます。

HTMLElement.dataset - Web API | MDN

ただ、この機能は IE10 以下で使うことができません。

element-dataset という npm モジュールを使うと、IE10 以下でも使えるようになります。

---

Webpacker を使用している前提です。

yarn add element-dataset

Webpack のエントリファイルなどに、以下を追加します。

import elementDatasetPolyfill from 'element-dataset'

elementDatasetPolyfill()

VCR で、タイムスタンプなどの動的パラメータを無視する

VCR 4.0.0 + RSpec 3.7.0 で確認しています。

---

spec/support/vcr.rb

VCR.configure do |c|
  c.cassette_library_dir = 'spec/cassettes'
  c.hook_into :webmock
  c.configure_rspec_metadata!
end

---

spec

vcr_options = {
  cassette_name: '...',
  match_requests_on: [:method, VCR.request_matchers.uri_without_params(:signature, :timestamp)]
}
it 'this is test...', vcr: vcr_options do
  ...
end

---

参考

• URI without param(s) - Request matching - Vcr - VCR - Relish
• Usage with RSpec metadata - Test frameworks - Vcr - VCR - Relish
• vcrでコマンドライン(環境変数)でrecordモードを切り替える、他 - Qiita

Rails で本番環境の deprecation warning を独自ログに出力する

Rails 5.0.6 で確認しています。

もっと良い方法がある気もするので、ご存知でしたら教えていただけると幸いです。

---

config/environments/production.rb (デフォルトで :notify になっていると思います)

config.active_support.deprecation = :notify

---

config/initializers/deprecation.rb

logger = Logger.new(Rails.root.join('log/deprecation.log'))

ActiveSupport::Notifications.subscribe('deprecation.rails') do |*args|
  data = args.extract_options!
  logger.info data[:message]
  logger.info data[:callstack] * "\n"
end

---

参考

• ActiveSupport::Deprecation::Behavior
• Active Support の Instrumentation 機能 | Rails ガイド

CircleCI 2.0 + circleci-bundle-update-pr で、自動 bundle update

昨日の続きで、CircleCI 2.0 を使い、毎日 bundle update を自動実行する設定例です。

circleci-bundle-update-pr という便利なツールを使用させてもらいます。

circleci-bundle-update-pr の README にも設定例は掲載されていますが、別の例ということで。

2017/12/01 現在の情報となります。

以下の例では、平日の日本時間午前 9:00 (UTC 0:00) に、ジョブを実行します。

---

.circleci/config.yml

ruby_image: &ruby_image
  circleci/ruby:2.4.2

bundle_cache_key: &bundle_cache_key
  bundle-{{ checksum "Gemfile.lock" }}

version: 2

jobs:
  build: (省略)

  ci-bundle-update:
    docker:
      - image: *ruby_image

    environment:
      TZ: "/usr/share/zoneinfo/Asia/Tokyo"

    steps:
      - checkout

      - restore_cache:
          key: *bundle_cache_key

      - run:
          name: circleci-bundle-update-pr
          command: |
            gem update bundler --no-document
            gem install circleci-bundle-update-pr
            bundle config --local path vendor/bundle
            circleci-bundle-update-pr

workflows:
  version: 2

  ci-bundle-update:
    triggers:
      - schedule:
          cron: "0 0 * * 1-5"  # UTC
          filters:
            branches:
              only: master

    jobs:
      - ci-bundle-update

---

あとは CircleCI のプロジェクト設定で、環境変数 GITHUB_ACCESS_TOKEN, GIT_USER_EMAIL, GIT_USER_NAME を設定します。