ウェブサービスを作っています。

IE10以下で HTMLElement.dataset を使う

javascript ie

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 で、タイムスタンプなどの動的パラメータを無視する

ruby vcr rspec

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

参考

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

rails

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

参考

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

circleci ruby bundler gem

昨日の続きで、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 を設定します。

CircleCI 2.0 + Capistrano で自動デプロイ

ci circleci capistrano

CircleCI 2.0 で、Rails アプリを自動デプロイする設定例です。

ミドルウェアとして、MySQL と Elasticsearch を使用しています。

2017/11/30 現在の情報となります。

.circleci/config.yml (インデントが 4 スペースの場合があるので注意)

ruby_image: &ruby_image
  circleci/ruby:2.4.2

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

version: 2

jobs:
  build:
    docker:
      - image: *ruby_image
        environment:
          DATABASE_URL: "mysql2://root@127.0.0.1/circle_test"
          RAILS_ENV: test
      - image: circleci/mysql:5.7
      - image: docker.elastic.co/elasticsearch/elasticsearch:5.6.4
        environment:
          xpack.security.enabled: false

    steps:
      - checkout

      - restore_cache:
          key: *bundle_cache_key

      - run:
          name: Bundle Install
          command: bundle install --jobs=4 --retry=3 --path vendor/bundle

      - save_cache:
          key: *bundle_cache_key
          paths:
            - vendor/bundle

      - run:
          name: Wait for DB
          command: dockerize -wait tcp://localhost:3306 -timeout 1m

      - run:
          name: Wait for Elasticsearch
          command: dockerize -wait tcp://localhost:9200 -timeout 1m

      - run: bin/rails db:schema:load --trace

      - run: bundle exec rspec --format progress

  deploy:
    docker:
      - image: *ruby_image

    steps:
      - checkout

      - restore_cache:
          key: *bundle_cache_key

      - run:
          name: Deploy
          command: |
            bundle config --local path vendor/bundle
            .circleci/deploy.sh

workflows:
  version: 2

  build-and-deploy:
    jobs:
      - build
      - deploy:
          requires:
            - build
          filters:
            branches:
              only: master

.circleci/deploy.sh (実行権限をつける)

#!/bin/bash

set -ex

cat <<EOF >> $HOME/.ssh/config
Host xxx
  HostName xxx.xxx.xxx.xxx
  User xxx
  ...
EOF

bundle exec cap production deploy

あとは CircleCI のプロジェクト設定で、SSH 鍵の設定を行います。

「ふるふる」のスマホ版ができました

webサービス

ふるさと納税の返礼品検索サイト「ふるふる」のスマートフォン版ができました。

ふるふる

サービス開始から 1 年ほど経ち、使ってくださる方も増えました。

年末の利用が多いですね。

スマートフォン版は、スキマ時間などに使っていただければうれしいです。

まだまだ改善点はありますが、ゆっくりやっていこうと思います。

どうぞご利用ください。

Git のコミット前に sass-lint を実行する

git lint sass

追記(2022/1/26): husky v7.0.4 と lint-staged v12.3.1 で動くように修正しました。

昨日の記事 の続きです。

sass-lint -v を手動で実行するのは大変なので、git commit 時に自動実行するようにします。

必要なツールのインストール。

yarn add lint-staged husky --dev

package.json に以下を追加。

{
  "lint-staged": {
    "*.sass": "sass-lint -v -q"
  },

  "scripts": {
    "prepare": "husky install"
  }
}

husky の 設定。

yarn run prepare
yarn run husky add .husky/pre-commit "yarn lint-staged"

.sass-lint.yml を修正して、warning ではなく error になるようにします。

options:
  merge-default-rules: false

files:
  include: 'app/assets/stylesheets/**/*.sass'

rules:
  hex-length: 2
  mixins-before-declarations: 2
  no-trailing-whitespace: 2
  pseudo-element: 2
  property-sort-order: 2
  zero-unit: 2

以上で、Lint が通らないとコミットできなくなります。

参考